import type { DefineComponent } from "vue"; type AccordionHeaderProps = {}; type AccordionContentProps = {}; type AccordionProps = { /** Enables updating internal string values for internationalization. */ i18n?: string; /** Determines the container styles of component. Flat suits nesting accordions within other containers. Inset suits more complex accordions where content needs distinct separation. */ container?: "flat" | "inset" | undefined; /** Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. */ expanded?: boolean; /** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. */ disabled?: boolean; /** Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless) */ behaviorExpand?: boolean; }; type AccordionGroupProps = { /** Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless) */ behaviorExpand?: boolean; /** Determines whether the accordion should opt-in to stateful expansion of a single accordion at a time */ behaviorExpandSingle?: boolean; /** Controls the container style applied to child accordions. `flat` removes the visual container, `inset` adds rounded containment, and omission uses the default divided presentation. */ container?: "flat" | "inset" | undefined; }; type AlertGroupProps = { /** Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `accent` Highlights important actions or draws attention to primary interactive elements. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. */ status?: "accent" | "warning" | "success" | "danger" | undefined; /** Determines the visual prominence or weight, emphasis applies banner style alerts */ prominence?: "emphasis" | undefined; /** Defines a base color from the theme color palette */ color?: | "red-cardinal" | "gray-slate" | "gray-denim" | "blue-indigo" | "blue-cobalt" | "blue-sky" | "teal-cyan" | "green-mint" | "teal-seafoam" | "green-grass" | "yellow-amber" | "orange-pumpkin" | "red-tomato" | "pink-magenta" | "purple-plum" | "purple-violet" | "purple-lavender" | "pink-rose" | "green-jade" | "lime-pear" | "yellow-nova" | "brand-green"; /** Determines the container bounds of the element */ container?: "full" | undefined; }; type AlertProps = { /** Defines visual treatment to represent a ongoing task or support status. - `accent` Highlights important actions or draws attention to primary interactive elements. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. - `scheduled` Task has a scheduled future execution at a specific time. - `queued` Task is waiting in line to begin after other tasks complete. - `pending` Task is awaiting approval, user input, or external conditions before proceeding. - `starting` Task is initializing and preparing to begin active execution. - `running` Task is actively executing and making progress. - `restarting` Task restarts after an interruption or reset. - `stopping` Task is gracefully shutting down and completing cleanup operations. - `finished` Task has completed successfully with the expected outcome. - `failed` Task encountered an error and did not complete as intended. - `unknown` Task status remains unknown or unavailable. - `ignored` Task was intentionally skipped or excluded from execution. */ status?: | "accent" | "warning" | "success" | "danger" | "scheduled" | "queued" | "pending" | "starting" | "running" | "restarting" | "stopping" | "finished" | "failed" | "unknown" | "ignored" | "muted" | undefined; /** Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. */ closable?: boolean; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Dispatched when the alert closes within an alert group. */ onclose?: (e: CustomEvent) => void; }; type AvatarGroupProps = {}; type AvatarProps = { /** Sets size of the avatar component. Update size through the `width + height` css props as an alternative. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */ size?: "sm" | "md" | "lg" | "xs" | undefined; /** Defines a base color from the theme color palette */ color?: | "red-cardinal" | "gray-slate" | "gray-denim" | "blue-indigo" | "blue-cobalt" | "blue-sky" | "teal-cyan" | "green-mint" | "teal-seafoam" | "green-grass" | "yellow-amber" | "orange-pumpkin" | "red-tomato" | "pink-magenta" | "purple-plum" | "purple-violet" | "purple-lavender" | "pink-rose" | "green-jade" | "lime-pear" | "yellow-nova" | "brand-green"; }; type BadgeProps = { /** Visual treatment to represent a ongoing task, support status. - `accent` Highlights important actions or draws attention to primary interactive elements. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. - `scheduled` Task has a scheduled future execution at a specific time. - `queued` Task is waiting in line to begin after other tasks complete. - `pending` Task is awaiting approval, user input, or external conditions before proceeding. - `starting` Task is initializing and preparing to begin active execution. - `running` Task is actively executing and making progress. - `restarting` Task restarts after an interruption or reset. - `stopping` Task is gracefully shutting down and completing cleanup operations. - `finished` Task has completed successfully with the expected outcome. - `failed` Task encountered an error and did not complete as intended. - `unknown` Task status remains unknown or unavailable. - `ignored` Task was intentionally skipped or excluded from execution. */ status?: | "scheduled" | "queued" | "pending" | "starting" | "running" | "restarting" | "stopping" | "finished" | "failed" | "unknown" | "ignored" | "accent" | "warning" | "success" | "danger"; /** Defines a base color from the theme color palette */ color?: | "red-cardinal" | "gray-slate" | "gray-denim" | "blue-indigo" | "blue-cobalt" | "blue-sky" | "teal-cyan" | "green-mint" | "teal-seafoam" | "green-grass" | "yellow-amber" | "orange-pumpkin" | "red-tomato" | "pink-magenta" | "purple-plum" | "purple-violet" | "purple-lavender" | "pink-rose" | "green-jade" | "lime-pear" | "yellow-nova" | "brand-green"; /** Determines the container styles of component. Flat suits nesting within other containers. */ container?: "flat" | undefined; /** Determines the visual prominence or weight */ prominence?: "emphasis" | undefined; /** Enables updating internal string values for internationalization. */ i18n?: string; }; type BreadcrumbProps = {}; type ButtonGroupProps = { /** By default the button group is stateless. Add the `behavior-select` attribute and set to `single` or `multi` to enable stateful selction handling. */ "behavior-select"?: "single" | "multi"; /** By default the button group is stateless. Add the `behavior-select` attribute and set to `single` or `multi` to enable stateful selction handling. */ behaviorSelect?: "single" | "multi"; /** Set the style of the button group using the `container` property. Options are the default display when omitting the attribute, `flat` or `rounded`. */ container?: "flat" | "rounded" | undefined; /** Controls the directional flow of the element's layout and interaction pattern. - `horizontal` Element orients horizontally with left-to-right flow. - `vertical` Element orients vertically with top-to-bottom flow. */ orientation?: "horizontal" | "vertical" | undefined; /** The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors. - `emphasis` Shows the interaction targets emphasis or highlighting primary actions. - `destructive` Shows the interaction targets destructive actions such as deleting or removing. */ interaction?: "emphasis" | "destructive"; /** Controls the visual scale of an element to match its importance and available space. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */ size?: "sm" | "md" | "lg" | undefined; }; type ButtonProps = { /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popovertarget?: string; /** The popover target action to perform on the popover target element. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */ popovertargetaction?: "show" | "hide" | "toggle"; /** The element that receives the command. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ commandfor?: string; /** The element that receives the interest. https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */ interestfor?: string; /** Determines the container of the button. Flat suits nesting within other containers or more muted style. Inline suits inline content such as text. */ container?: "flat" | "inline" | undefined; /** Controls the visual scale of an element to match its importance and available space. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */ size?: "sm" | "md" | "lg" | undefined; /** The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors. - `emphasis` Shows the interaction targets emphasis or highlighting primary actions. - `destructive` Shows the interaction targets destructive actions such as deleting or removing. */ interaction?: "emphasis" | "destructive"; /** Indicates the current state of a toggle button that switches on or off. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) - `true` The button is in the pressed (on) state and the associated action or setting is active. - `false` The button is in the unpressed (off) state and the associated action or setting is inactive. */ pressed?: boolean; /** Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. */ expanded?: boolean; /** Indicates whether the element is a noninteractive visual treatment instead of a button. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */ readOnly?: boolean; /** Associates the button with a form. Set the property to a form element or its ID. The HTML attribute accepts only the form ID. Reading the property returns the associated form element or `null`. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */ form?: string | HTMLFormElement | null; /** The name of the button, submitted as a pair with the button value as part of the form data. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name */ name?: string; /** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */ value?: string; /** Defines the button behavior when associated within a form element. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */ type?: "button" | "submit" | "reset"; /** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. */ disabled?: boolean; /** Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. */ selected?: boolean; /** Indicates the element that represents the user's current location or position within a set. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current) - `page` Marks the current page within a set of navigation links. - `step` Marks the current step within a multi-step process or workflow. */ current?: "page" | "step"; /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popoverTargetElement?: HTMLElement | null; /** The popover target action to perform on the popover target element. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */ popoverTargetAction?: "show" | "hide" | "toggle"; /** The element that receives the command. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ commandForElement?: HTMLElement | null; /** The command to execute on the element. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ command?: string; /** The element that receives the interest. https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */ interestForElement?: HTMLElement | null; }; type CardProps = { /** flat (embed into parent container) or full (width of viewport) */ container?: "flat" | "full" | undefined; }; type CardHeaderProps = {}; type CardContentProps = {}; type CardFooterProps = {}; type ChatMessageProps = { /** Removes the border radius from the selected message corner to indicate the speaker direction. */ "arrow-position"?: "top-start" | "top-end" | "bottom-start" | "bottom-end"; /** Applies a transparent background and reduced horizontal padding for embedding the message in another container. */ container?: "flat"; /** Defines a base color from the theme color palette */ color?: | "red-cardinal" | "gray-slate" | "gray-denim" | "blue-indigo" | "blue-cobalt" | "blue-sky" | "teal-cyan" | "green-mint" | "teal-seafoam" | "green-grass" | "yellow-amber" | "orange-pumpkin" | "red-tomato" | "pink-magenta" | "purple-plum" | "purple-violet" | "purple-lavender" | "pink-rose" | "green-jade" | "lime-pear" | "yellow-nova" | "brand-green"; /** Removes the border radius from the selected message corner to indicate the speaker direction. */ arrowPosition?: "top-start" | "top-end" | "bottom-start" | "bottom-end"; }; type CheckboxGroupProps = { /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Set the visual prominence of the control group */ prominence?: "muted"; }; type CheckboxProps = { /** Set current visual state for control. This overrides any validation states active. */ status?: "warning" | "error" | "success" | "disabled"; /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Enables internal string values to update for internationalization. */ i18n?: string; /** Set the visual prominence of the control */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type ColorProps = { /** Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds. Use when embedding within another container such as a toolbar. */ container?: "flat" | undefined; /** Set current visual state for control. This overrides any validation states active. */ status?: "warning" | "error" | "success" | "disabled"; /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */ fitText?: boolean; /** Sets the input to match native default content block */ fitContent?: boolean; /** Enables internal string values to update for internationalization. */ i18n?: string; /** Set the visual prominence of the control */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type ComboboxProps = { /** Manage inline tag rendering for many-item select */ "tag-layout"?: "hidden" | "wrap"; /** Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds. Use when embedding within another container such as a toolbar. */ container?: "flat"; /** Manage inline tag rendering for many-item select */ tagLayout?: "hidden" | "wrap"; /** Enable creation of new options when the input value doesn't match any existing option. Dispatches a `create` event with `{ value }` detail. */ behaviorCreate?: boolean; /** Set current visual state for control. This overrides any validation states active. */ status?: "warning" | "error" | "success" | "disabled"; /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */ fitText?: boolean; /** Sets the input to match native default content block */ fitContent?: boolean; /** Enables internal string values to update for internationalization. */ i18n?: string; /** Set the visual prominence of the control */ prominence?: "muted"; /** Fires when the user confirms a value that doesn't match any existing option and the `behavior-create` attribute exists. `detail: { value }`. */ oncreate?: (e: CustomEvent) => void; /** Fires when the user scrolls the dropdown option list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`. */ onscroll?: (e: CustomEvent) => void; /** */ onreset?: (e: CustomEvent) => void; }; type CopyButtonProps = { /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popovertarget?: string; /** The popover target action to perform on the popover target element. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */ popovertargetaction?: "show" | "hide" | "toggle"; /** The element that receives the command. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ commandfor?: string; /** The element that receives the interest. https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */ interestfor?: string; /** Enables internal string values to update for internationalization. */ i18n?: string; /** Determines if the copy button should auto write to clipboard by the trigger. */ behaviorCopy?: boolean; /** Defines the value that copies to the user clipboard. Use `aria-label` to set the tooltip hint. */ value?: string; /** Determines the container of the button. Flat suits nesting within other containers or more muted style. Inline suits inline content such as text. */ container?: "flat" | "inline" | undefined; /** Controls the visual scale of an element to match its importance and available space. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */ size?: "sm" | "md" | "lg" | undefined; /** The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors. - `emphasis` Shows the interaction targets emphasis or highlighting primary actions. - `destructive` Shows the interaction targets destructive actions such as deleting or removing. */ interaction?: "emphasis" | "destructive"; /** Indicates the current state of a toggle button that switches on or off. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) - `true` The button is in the pressed (on) state and the associated action or setting is active. - `false` The button is in the unpressed (off) state and the associated action or setting is inactive. */ pressed?: boolean; /** Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. */ expanded?: boolean; /** Indicates whether the element is a noninteractive visual treatment instead of a button. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */ readOnly?: boolean; /** Associates the button with a form. Set the property to a form element or its ID. The HTML attribute accepts only the form ID. Reading the property returns the associated form element or `null`. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */ form?: string | HTMLFormElement | null; /** The name of the button, submitted as a pair with the button value as part of the form data. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name */ name?: string; /** Defines the button behavior when associated within a form element. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */ type?: "button" | "submit" | "reset"; /** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. */ disabled?: boolean; /** Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. */ selected?: boolean; /** Indicates the element that represents the user's current location or position within a set. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current) - `page` Marks the current page within a set of navigation links. - `step` Marks the current step within a multi-step process or workflow. */ current?: "page" | "step"; /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popoverTargetElement?: HTMLElement | null; /** The popover target action to perform on the popover target element. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */ popoverTargetAction?: "show" | "hide" | "toggle"; /** The element that receives the command. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ commandForElement?: HTMLElement | null; /** The command to execute on the element. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ command?: string; /** The element that receives the interest. https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */ interestForElement?: HTMLElement | null; }; type DateProps = { /** Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds. Use when embedding within another container such as a toolbar. */ container?: "flat" | undefined; /** Set current visual state for control. This overrides any validation states active. */ status?: "warning" | "error" | "success" | "disabled"; /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */ fitText?: boolean; /** Sets the input to match native default content block */ fitContent?: boolean; /** Enables internal string values to update for internationalization. */ i18n?: string; /** Set the visual prominence of the control */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type DatetimeProps = { /** Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds. Use when embedding within another container such as a toolbar. */ container?: "flat" | undefined; /** Set current visual state for control. This overrides any validation states active. */ status?: "warning" | "error" | "success" | "disabled"; /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */ fitText?: boolean; /** Sets the input to match native default content block */ fitContent?: boolean; /** Enables internal string values to update for internationalization. */ i18n?: string; /** Set the visual prominence of the control */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type DialogFooterProps = {}; type DialogHeaderProps = {}; type DialogProps = { /** Sets the side position of the popover relative to the provided anchor element. For dialog the anchor defaults to the document body. - `center` Centers the popover directly over the anchor element. - `top` Positions the popover above the anchor element. - `bottom` Positions the popover below the anchor element. - `left` Positions the popover to the left side of the anchor element. - `right` Positions the popover to the right side of the anchor element. */ position?: "center" | "top" | "bottom" | "left" | "right"; /** Determines the alignment of the popover relative to the provided anchor element. - `start` Aligns the popover to the beginning edge of the anchor for left or top alignment. - `end` Aligns the popover to the ending edge of the anchor for right or bottom alignment. - `center` Centers the popover along the anchor's edge for balanced positioning. */ alignment?: "start" | "end" | "center"; /** Controls the visual scale of an element to match its importance and available space. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */ size?: "sm" | "md" | "lg" | undefined; /** Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. */ closable?: boolean; /** Determines if a dialog should have a modal backdrop that visually overlays the UI. */ modal?: boolean; /** Provides the element that the popover should position relative to. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */ anchor?: string | HTMLElement; /** @deprecated Use the popover API instead. The trigger defines what element triggers an `open` interaction event. A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. - Defines the element that triggers an `open` interaction event. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */ trigger?: string | HTMLElement; /** @deprecated Use the popover API instead. Determines if popover visibility behavior should be automatically controlled by the trigger. */ behaviorTrigger?: boolean; /** Enables internal string values to update for internationalization. */ i18n?: string; /** Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) */ onbeforetoggle?: (e: CustomEvent) => void; /** Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event) */ ontoggle?: (e: CustomEvent) => void; /** Dispatched when the dialog opens. */ onopen?: (e: CustomEvent) => void; /** Dispatched when the dialog closes. */ onclose?: (e: CustomEvent) => void; }; type DividerProps = { /** Controls the directional flow of the element's layout and interaction pattern. - `vertical` Element orients vertically with top-to-bottom flow. - `horizontal` Element orients horizontally with left-to-right flow. */ orientation?: "vertical" | "horizontal"; }; type DotProps = { /** Defines visual treatment to represent a ongoing task or support status. - `accent` Highlights important actions or draws attention to primary interactive elements. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. - `scheduled` Task has a scheduled future execution at a specific time. - `queued` Task is waiting in line to begin after other tasks complete. - `pending` Task is awaiting approval, user input, or external conditions before proceeding. - `starting` Task is initializing and preparing to begin active execution. - `running` Task is actively executing and making progress. - `restarting` Task restarts after an interruption or reset. - `stopping` Task is gracefully shutting down and completing cleanup operations. - `finished` Task has completed successfully with the expected outcome. - `failed` Task encountered an error and did not complete as intended. - `unknown` Task status remains unknown or unavailable. - `ignored` Task was intentionally skipped or excluded from execution. */ status?: | "accent" | "warning" | "success" | "danger" | "scheduled" | "queued" | "pending" | "starting" | "running" | "restarting" | "stopping" | "finished" | "failed" | "unknown" | "ignored"; /** Controls the visual scale of an element to match its importance and available space. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */ size?: "sm" | "md" | "lg"; }; type DrawerContentProps = {}; type DrawerFooterProps = {}; type DrawerHeaderProps = {}; type DrawerProps = { /** Sets the side position of the popover relative to the provided anchor element. For drawer the anchor defaults to the document body. */ position?: "left" | "right" | "bottom" | "top"; /** Controls the visual scale of an element to match its importance and available space. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */ size?: "sm" | "md" | "lg" | undefined; /** Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. */ closable?: boolean; /** Determines if a drawer should have a modal backdrop that visually overlays the UI. */ modal?: boolean; /** Provides the element that the popover should position relative to. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */ anchor?: string | HTMLElement; /** @deprecated Use the popover API instead. The trigger defines what element triggers an `open` interaction event. A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. - Defines the element that triggers an `open` interaction event. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */ trigger?: string | HTMLElement; /** Create a inline layout effect while retaining the a11y characteristics and top layer behavior (light dismiss, focus trap, non interactive background) https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ */ inline?: boolean; /** @deprecated Use the popover API instead. Determines if popover visibility behavior should be automatically controlled by the trigger. */ behaviorTrigger?: boolean; /** Enables internal string values to update for internationalization. */ i18n?: string; /** Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) */ onbeforetoggle?: (e: CustomEvent) => void; /** Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event) */ ontoggle?: (e: CustomEvent) => void; /** Dispatched when the drawer opens. */ onopen?: (e: CustomEvent) => void; /** Dispatched when the drawer closes. */ onclose?: (e: CustomEvent) => void; }; type DropdownGroupProps = { /** Dispatched when a dropdown in the group opens */ onopen?: (e: CustomEvent) => void; /** Dispatched when a dropdown in the group closes */ onclose?: (e: CustomEvent) => void; }; type DropdownFooterProps = {}; type DropdownHeaderProps = {}; type DropdownProps = { /** Provides the element that the popover should position relative to. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */ anchor?: string | HTMLElement; /** @deprecated Use the popover API instead. The trigger defines what element triggers an `open` interaction event. A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. - Defines the element that triggers an `open` interaction event. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */ trigger?: string | HTMLElement; /** Sets the side position of the popover relative to the provided anchor element. - `center` Centers the popover directly over the anchor element. - `top` Positions the popover above the anchor element. - `bottom` Positions the popover below the anchor element. - `left` Positions the popover to the left side of the anchor element. - `right` Positions the popover to the right side of the anchor element. */ position?: "center" | "top" | "bottom" | "left" | "right"; /** Determines the alignment of the popover relative to the provided anchor element. - `start` Aligns the popover to the beginning edge of the anchor for left or top alignment. - `end` Aligns the popover to the ending edge of the anchor for right or bottom alignment. - `center` Centers the popover along the anchor's edge for balanced positioning. */ alignment?: "start" | "end" | "center"; /** @deprecated Use the popover API instead. Determines if popover visibility behavior should be automatically controlled by the trigger. */ behaviorTrigger?: boolean; /** Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. */ closable?: boolean; /** Determines if an arrow renders. */ arrow?: boolean; /** Enables internal string values to update for internationalization. */ i18n?: string; /** Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) */ onbeforetoggle?: (e: CustomEvent) => void; /** Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event) */ ontoggle?: (e: CustomEvent) => void; /** Dispatched when the dropdown opens. */ onopen?: (e: CustomEvent) => void; /** Dispatched when the dropdown closes. */ onclose?: (e: CustomEvent) => void; }; type DropzoneProps = { /** File size limit in bytes. */ "max-file-size"?: number; /** Defines the minimum text length. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength */ minlength?: number; /** Defines the maximum text length. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength */ maxlength?: number; /** Comma-separated file extensions or MIME types accepted by the dropzone. */ accept?: string; /** File size limit in bytes. */ maxFileSize?: number; /** Enables internal string values to update for internationalization. */ i18n?: string; /** Files selected or dropped by the user. Assign files through the JavaScript property; the HTML `value` attribute is not supported. */ value?: File[]; /** The initial value used when the parent form resets. */ defaultValue?: string; /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. */ readOnly?: boolean; /** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. */ disabled?: boolean; /** Requires a value before the parent form can submit. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required */ required?: boolean; /** Defines the pattern that text values must match. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern */ pattern?: string; /** Defines the minimum numeric value. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min */ min?: number | null; /** Defines the maximum numeric value. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max */ max?: number | null; /** Defines the value granularity for numeric inputs. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step */ step?: number | null; /** Defines the minimum text length. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength */ minLength?: number; /** Defines the maximum text length. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength */ maxLength?: number; /** The name submitted with the control value as part of the form data. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/name */ name?: string; /** Disables constraint validation for this control. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/novalidate */ noValidate?: boolean; /** The form associated with the control. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */ form?: HTMLFormElement | null; /** Indicates whether the control participates in constraint validation. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate */ willValidate?: boolean; /** The control validity state. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validity */ validity?: ValidityState; /** The validation message shown when the control is invalid. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validationMessage */ validationMessage?: string; /** The current value serialized as a string. */ valueAsString?: string; /** The current value parsed as a number. */ valueAsNumber?: number; /** The control type. */ type?: string; /** Labels associated with the control. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/labels */ labels?: NodeList; /** Text content from labels associated with the control. */ composedLabel?: string; /** Dispatched when the value has changed (files located in event.target) */ onchange?: (e: CustomEvent) => void; }; type FileProps = { /** Set current visual state for control. This overrides any validation states active. */ status?: "warning" | "error" | "success" | "disabled"; /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */ fitText?: boolean; /** Sets the input to match native default content block */ fitContent?: boolean; /** Enables internal string values to update for internationalization. */ i18n?: string; /** Set the visual prominence of the control */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type FormatDatetimeProps = { /** Preset date formatting style: 'full' | 'long' | 'medium' | 'short'. Preset styles take precedence over granular date and time part options. */ "date-style"?: "full" | "long" | "medium" | "short" | undefined; /** Preset time formatting style: 'full' | 'long' | 'medium' | 'short'. Preset styles take precedence over granular date and time part options. */ "time-style"?: "full" | "long" | "medium" | "short" | undefined; /** Time zone name display: 'long' | 'short'. Use it with granular options only; preset styles ignore it. */ "time-zone-name"?: "long" | "short" | undefined; /** IANA time zone identifier (such as 'America/New_York', 'UTC'). */ "time-zone"?: string | undefined; /** Optional date string for values supplied by JavaScript or bound data. By default, the component formats the element's text content, which also serves as the SSR fallback. When both are present, this property takes precedence. */ date?: string | undefined; /** Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default. */ locale?: string | undefined; /** Weekday representation: 'long' | 'short' | 'narrow'. */ weekday?: "long" | "short" | "narrow" | undefined; /** Year representation: 'numeric' | '2-digit'. */ year?: "numeric" | "2-digit" | undefined; /** Month representation: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow'. */ month?: "numeric" | "2-digit" | "long" | "short" | "narrow" | undefined; /** Day representation: 'numeric' | '2-digit'. */ day?: "numeric" | "2-digit" | undefined; /** Hour representation: 'numeric' | '2-digit'. */ hour?: "numeric" | "2-digit" | undefined; /** Minute representation: 'numeric' | '2-digit'. */ minute?: "numeric" | "2-digit" | undefined; /** Second representation: 'numeric' | '2-digit'. */ second?: "numeric" | "2-digit" | undefined; /** Preset date formatting style: 'full' | 'long' | 'medium' | 'short'. Preset styles take precedence over granular date and time part options. */ dateStyle?: "full" | "long" | "medium" | "short" | undefined; /** Preset time formatting style: 'full' | 'long' | 'medium' | 'short'. Preset styles take precedence over granular date and time part options. */ timeStyle?: "full" | "long" | "medium" | "short" | undefined; /** Time zone name display: 'long' | 'short'. Use it with granular options only; preset styles ignore it. */ timeZoneName?: "long" | "short" | undefined; /** IANA time zone identifier (such as 'America/New_York', 'UTC'). */ timeZone?: string | undefined; }; type FormatNumberProps = { /** Formatting style: 'decimal' | 'currency' | 'percent' | 'unit'. */ "format-style"?: "decimal" | "currency" | "percent" | "unit"; /** Currency sign style: 'standard' | 'accounting'. */ "currency-sign"?: "standard" | "accounting" | undefined; /** Currency display style: 'symbol' | 'code' | 'name' | 'narrowSymbol'. */ "currency-display"?: "symbol" | "code" | "name" | "narrowSymbol" | undefined; /** Unit display style: 'short' | 'long' | 'narrow'. */ "unit-display"?: "short" | "long" | "narrow" | undefined; /** Compact notation display: 'short' | 'long'. Only applies when notation is compact. */ "compact-display"?: "short" | "long" | undefined; /** Sign display: 'auto' | 'never' | 'always' | 'exceptZero'. */ "sign-display"?: "auto" | "never" | "always" | "exceptZero" | undefined; /** Grouping separators: 'auto' | 'always' | 'min2' | 'true' | 'false'. */ "use-grouping"?: "auto" | "always" | "min2" | "true" | "false" | boolean | undefined; /** Pad fraction output to at least this many digits (0-20). */ "minimum-fraction-digits"?: number | undefined; /** Round fraction output to at most this many digits (0-20). */ "maximum-fraction-digits"?: number | undefined; /** Pad integer output to at least this many digits (1-21). */ "minimum-integer-digits"?: number | undefined; /** Optional numeric string for values supplied by JavaScript or bound data. By default, the component formats the element's text content, which also serves as the SSR fallback. When both are present, this property takes precedence. */ number?: string | undefined; /** Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default. */ locale?: string | undefined; /** Formatting style: 'decimal' | 'currency' | 'percent' | 'unit'. */ formatStyle?: "decimal" | "currency" | "percent" | "unit"; /** ISO 4217 currency code (such as USD or EUR). Required when formatStyle is currency. */ currency?: string | undefined; /** Currency sign style: 'standard' | 'accounting'. */ currencySign?: "standard" | "accounting" | undefined; /** Currency display style: 'symbol' | 'code' | 'name' | 'narrowSymbol'. */ currencyDisplay?: "symbol" | "code" | "name" | "narrowSymbol" | undefined; /** Unit identifier (such as kilometer or byte). Required when formatStyle is unit. */ unit?: string | undefined; /** Unit display style: 'short' | 'long' | 'narrow'. */ unitDisplay?: "short" | "long" | "narrow" | undefined; /** Number notation: 'standard' | 'scientific' | 'engineering' | 'compact'. */ notation?: "standard" | "scientific" | "engineering" | "compact" | undefined; /** Compact notation display: 'short' | 'long'. Only applies when notation is compact. */ compactDisplay?: "short" | "long" | undefined; /** Sign display: 'auto' | 'never' | 'always' | 'exceptZero'. */ signDisplay?: "auto" | "never" | "always" | "exceptZero" | undefined; /** Grouping separators: 'auto' | 'always' | 'min2' | 'true' | 'false'. */ useGrouping?: "auto" | "always" | "min2" | "true" | "false" | boolean | undefined; /** Pad fraction output to at least this many digits (0-20). */ minimumFractionDigits?: number | undefined; /** Round fraction output to at most this many digits (0-20). */ maximumFractionDigits?: number | undefined; /** Pad integer output to at least this many digits (1-21). */ minimumIntegerDigits?: number | undefined; }; type FormatRelativeTimeProps = { /** Formatting length: 'long' | 'short' | 'narrow'. Controls verbosity (such as '3 days ago' vs '3d ago'). Maps to Intl.RelativeTimeFormat style option. */ "format-style"?: "long" | "short" | "narrow"; /** Optional date string for values supplied by JavaScript or bound data. By default, the component formats the element's text content, which also serves as the SSR fallback. When both are present, this property takes precedence. */ date?: string | undefined; /** Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default. */ locale?: string | undefined; /** Numeric formatting: 'always' | 'auto'. When 'auto', enables natural language forms such as 'yesterday' instead of '1 day ago'. */ numeric?: "always" | "auto"; /** Formatting length: 'long' | 'short' | 'narrow'. Controls verbosity (such as '3 days ago' vs '3d ago'). Maps to Intl.RelativeTimeFormat style option. */ formatStyle?: "long" | "short" | "narrow"; /** Time unit: 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year' | 'auto'. Use 'auto' to let the component select the most appropriate unit based on the time difference. */ unit?: "second" | "minute" | "hour" | "day" | "week" | "month" | "year" | "auto"; /** When present, auto-updates the displayed relative time at appropriate intervals. */ sync?: boolean; }; type ControlGroupProps = { /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Set the visual prominence of the control group */ prominence?: "muted"; }; type ControlMessageProps = { /** Visual treatment for current form control validation status */ status?: "warning" | "error" | "success" | "disabled" | undefined; /** Validation error code for current form control https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */ error?: | "badInput" | "customError" | "patternMismatch" | "rangeOverflow" | "rangeUnderflow" | "stepMismatch" | "tooLong" | "tooShort" | "typeMismatch" | "valid" | "valueMissing" | null; }; type ControlProps = { /** Set current visual state for control. This overrides any validation states active. */ status?: "warning" | "error" | "success" | "disabled"; /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */ fitText?: boolean; /** Sets the input to match native default content block */ fitContent?: boolean; /** Enables internal string values to update for internationalization. */ i18n?: string; /** Set the visual prominence of the control */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type GaugeProps = { /** The current `value` of the gauge. */ value?: number; /** The `max` value of the gauge that the `value` is proportionally scaled to. */ max?: number; /** Four visual treatments represent the `status` of tasks. - `accent` Highlights important actions or draws attention to primary interactive elements. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. */ status?: "accent" | "warning" | "success" | "danger" | "neutral" | undefined; /** Determines the gauge shape. Set `half` for a compact semi-circular arc. */ shape?: "half" | undefined; /** Controls the value indicator. Set `dot` for only the end dot or `needle` for a pointer. */ thumb?: "fill" | "dot" | "needle"; /** Controls the visual scale of an element to match its importance and available space. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */ size?: "sm" | "md" | "lg" | undefined; /** Enables updating internal string values for internationalization. */ i18n?: string; }; type GridCellProps = {}; type GridColumnProps = { /** Control the content alignment within a given column. */ "column-align"?: "start" | "center" | "end"; /** Only set a fixed px width when you know the grid width. Most cases this should remain unset. If the total width of all columns is less than the grid width then the last column fills the remaining space. By default column widths are evenly divided unless width is explicitly provided. */ width?: string; /** Set the `position` property or attribute to `fixed` or `sticky` to make the column fixed or sticky. Fixed columns do not scroll horizontally with the grid. Sticky columns scroll horizontally with the grid until the column reaches the edge of the grid. */ position?: "fixed" | "sticky" | ""; /** Control the content alignment within a given column. */ columnAlign?: "start" | "center" | "end"; /** */ "onnve-grid-column-resize"?: (e: CustomEvent) => void; }; type GridFooterProps = {}; type GridProps = { /** Determines the container styles of component. Flat nests the grid within other containers. Full spans the full edge-to-edge viewport width. */ container?: "flat" | "full" | undefined; /** Determine style variant stripe rows */ stripe?: boolean; }; type GridHeaderProps = {}; type GridPlaceholderProps = {}; type GridRowProps = { /** Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. */ selected?: boolean; }; type IconButtonProps = { /** Sets the icon name, which determines which icon to display. */ "icon-name"?: | "placeholder" | "caret" | "person" | "menu" | "cancel" | "gear" | "chevron" | "logout" | "copy" | "more-actions" | "add" | "arrow" | "delete" | "download" | "search" | "split-vertical" | "sparkles" | "branch" | "refresh" | "double-chevron" | "academic-cap" | "add-asset" | "add-comment" | "add-grid" | "add-user" | "ancestors" | "archive" | "arrow-angle" | "arrow-both" | "arrow-cycle" | "arrow-path-rounded-square" | "arrow-stop" | "at-symbol" | "backspace" | "bar-pill-stack" | "bars-3" | "bars-3-bottom-left" | "bars-3-bottom-right" | "bars-3-center-left" | "bars-4" | "beaker" | "bell" | "bell-slash" | "bell-stroke" | "bold" | "book" | "bookmark" | "bookmark-stroke" | "bounding-box" | "briefcase" | "broadcast" | "browser" | "bug" | "calendar" | "camera" | "carets-closed-square" | "carousel" | "category-list" | "chart-bar" | "chat-bubble" | "chat-bubbles" | "check" | "check-badge" | "checklist" | "checkmark-circle" | "chip" | "circle" | "circle-angled-line" | "circle-dash" | "circle-dot" | "circle-dot-arrows" | "circle-half" | "circle-rule" | "circle-tick" | "clipboard" | "clock" | "clock-circle-arrow" | "cloud" | "cloud-download" | "cloud-upload" | "code" | "collapse-all" | "collapse-details" | "color-palette" | "columns" | "compare" | "computer" | "connect-node" | "connected-blocks" | "cross-hairs" | "cursor-rays" | "cursor-ripples" | "data-management" | "delete-node" | "doc-checkmark" | "dock-bottom" | "dock-none" | "dock-side" | "document" | "document-clipboard" | "dot" | "dot-stroke" | "drag" | "dropper" | "duplicate" | "edit" | "ellipses" | "envelope" | "exclamation-circle" | "exclamation-mark" | "exclamation-triangle" | "expand-all" | "expand-details" | "expression" | "eye" | "eye-hidden" | "face-frown" | "face-smile" | "fast-forward" | "fast-forward-10" | "film" | "filter" | "filter-stroke" | "flag" | "flag-stroke" | "fold" | "folder" | "fork" | "globe" | "globe-alt-stroke" | "group" | "group-boxes" | "hand" | "hash" | "heading" | "home" | "horizontal-rule" | "hourglass" | "hourglass-end" | "hourglass-mid" | "hourglass-start" | "identification" | "image" | "inbox" | "infinity" | "information-circle-stroke" | "inspect" | "italic" | "key" | "keyboard" | "laptop-phone" | "layers" | "lifebuoy" | "lightbulb" | "lightning-bolt" | "link" | "list-ordered" | "list-unordered" | "lock" | "login" | "looping" | "looping-off" | "map" | "map-drives" | "map-pin" | "markdown" | "maximize" | "megaphone" | "merge" | "meter" | "minimize" | "minus" | "minus-circle" | "moon" | "multiselect" | "music-note" | "newspaper" | "not-allowed" | "numbers" | "office-building" | "outline" | "paper-airplane" | "paper-clip" | "pause" | "pencil-square" | "person-2" | "person-3" | "person-circle" | "phone" | "picture-in-picture" | "pie-chart" | "pin" | "pizza-slice" | "play" | "plug" | "plus-circle" | "plus-minus" | "pointer" | "pointer-stroke" | "priority-high" | "priority-low" | "priority-medium" | "projector" | "pull-close" | "pull-draft" | "pull-open" | "pulse" | "puzzle-piece" | "question-mark-circle" | "question-mark-circle-stroke" | "rectangle-group" | "rectangle-stack-horizontal" | "rectangle-stack-vertical" | "redo" | "reply" | "rewind" | "rewind-10" | "rocketship" | "running" | "scale" | "scissors" | "sensor" | "server" | "server-stack" | "shapes" | "share" | "signal" | "signal-slash" | "signpost" | "sort-ascending" | "sort-descending" | "soundwave" | "split-horizontal" | "split-none" | "star" | "star-half" | "star-stroke" | "start" | "status-offline" | "status-online" | "stop" | "stop-sign" | "stopwatch" | "strikethrough" | "sun" | "swatch" | "switch" | "switch-apps" | "table" | "tag" | "task" | "telescope" | "template" | "terminal" | "thumb" | "thumb-stroke" | "traffic-cone" | "transparent-box" | "trend-down" | "trend-up" | "trophy" | "truck" | "typography" | "undo" | "unlock" | "upload" | "video-camera" | "view-as-grid" | "volume" | "volume-muted" | "wifi" | "wrench" | "x-circle" | "zoom-in" | "zoom-out"; /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popovertarget?: string; /** The popover target action to perform on the popover target element. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */ popovertargetaction?: "show" | "hide" | "toggle"; /** The element that receives the command. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ commandfor?: string; /** The element that receives the interest. https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */ interestfor?: string; /** Sets the icon name, which determines which icon to display. */ iconName?: | "placeholder" | "caret" | "person" | "menu" | "cancel" | "gear" | "chevron" | "logout" | "copy" | "more-actions" | "add" | "arrow" | "delete" | "download" | "search" | "split-vertical" | "sparkles" | "branch" | "refresh" | "double-chevron" | "academic-cap" | "add-asset" | "add-comment" | "add-grid" | "add-user" | "ancestors" | "archive" | "arrow-angle" | "arrow-both" | "arrow-cycle" | "arrow-path-rounded-square" | "arrow-stop" | "at-symbol" | "backspace" | "bar-pill-stack" | "bars-3" | "bars-3-bottom-left" | "bars-3-bottom-right" | "bars-3-center-left" | "bars-4" | "beaker" | "bell" | "bell-slash" | "bell-stroke" | "bold" | "book" | "bookmark" | "bookmark-stroke" | "bounding-box" | "briefcase" | "broadcast" | "browser" | "bug" | "calendar" | "camera" | "carets-closed-square" | "carousel" | "category-list" | "chart-bar" | "chat-bubble" | "chat-bubbles" | "check" | "check-badge" | "checklist" | "checkmark-circle" | "chip" | "circle" | "circle-angled-line" | "circle-dash" | "circle-dot" | "circle-dot-arrows" | "circle-half" | "circle-rule" | "circle-tick" | "clipboard" | "clock" | "clock-circle-arrow" | "cloud" | "cloud-download" | "cloud-upload" | "code" | "collapse-all" | "collapse-details" | "color-palette" | "columns" | "compare" | "computer" | "connect-node" | "connected-blocks" | "cross-hairs" | "cursor-rays" | "cursor-ripples" | "data-management" | "delete-node" | "doc-checkmark" | "dock-bottom" | "dock-none" | "dock-side" | "document" | "document-clipboard" | "dot" | "dot-stroke" | "drag" | "dropper" | "duplicate" | "edit" | "ellipses" | "envelope" | "exclamation-circle" | "exclamation-mark" | "exclamation-triangle" | "expand-all" | "expand-details" | "expression" | "eye" | "eye-hidden" | "face-frown" | "face-smile" | "fast-forward" | "fast-forward-10" | "film" | "filter" | "filter-stroke" | "flag" | "flag-stroke" | "fold" | "folder" | "fork" | "globe" | "globe-alt-stroke" | "group" | "group-boxes" | "hand" | "hash" | "heading" | "home" | "horizontal-rule" | "hourglass" | "hourglass-end" | "hourglass-mid" | "hourglass-start" | "identification" | "image" | "inbox" | "infinity" | "information-circle-stroke" | "inspect" | "italic" | "key" | "keyboard" | "laptop-phone" | "layers" | "lifebuoy" | "lightbulb" | "lightning-bolt" | "link" | "list-ordered" | "list-unordered" | "lock" | "login" | "looping" | "looping-off" | "map" | "map-drives" | "map-pin" | "markdown" | "maximize" | "megaphone" | "merge" | "meter" | "minimize" | "minus" | "minus-circle" | "moon" | "multiselect" | "music-note" | "newspaper" | "not-allowed" | "numbers" | "office-building" | "outline" | "paper-airplane" | "paper-clip" | "pause" | "pencil-square" | "person-2" | "person-3" | "person-circle" | "phone" | "picture-in-picture" | "pie-chart" | "pin" | "pizza-slice" | "play" | "plug" | "plus-circle" | "plus-minus" | "pointer" | "pointer-stroke" | "priority-high" | "priority-low" | "priority-medium" | "projector" | "pull-close" | "pull-draft" | "pull-open" | "pulse" | "puzzle-piece" | "question-mark-circle" | "question-mark-circle-stroke" | "rectangle-group" | "rectangle-stack-horizontal" | "rectangle-stack-vertical" | "redo" | "reply" | "rewind" | "rewind-10" | "rocketship" | "running" | "scale" | "scissors" | "sensor" | "server" | "server-stack" | "shapes" | "share" | "signal" | "signal-slash" | "signpost" | "sort-ascending" | "sort-descending" | "soundwave" | "split-horizontal" | "split-none" | "star" | "star-half" | "star-stroke" | "start" | "status-offline" | "status-online" | "stop" | "stop-sign" | "stopwatch" | "strikethrough" | "sun" | "swatch" | "switch" | "switch-apps" | "table" | "tag" | "task" | "telescope" | "template" | "terminal" | "thumb" | "thumb-stroke" | "traffic-cone" | "transparent-box" | "trend-down" | "trend-up" | "trophy" | "truck" | "typography" | "undo" | "unlock" | "upload" | "video-camera" | "view-as-grid" | "volume" | "volume-muted" | "wifi" | "wrench" | "x-circle" | "zoom-in" | "zoom-out"; /** Sets the direction of the icon. Only supported by expand-panel/collapse-panel (horizontal axis) and arrow/caret/chevron icons (4-directions) */ direction?: "up" | "down" | "left" | "right"; /** Controls the visual scale of an element to match its importance and available space. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */ size?: "sm" | "md" | "lg" | undefined; /** Determines the container of the button. Flat suits nesting within other containers or more muted style. Inline suits inline content such as text. */ container?: "flat" | "inline" | undefined; /** The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors. - `emphasis` Shows the interaction targets emphasis or highlighting primary actions. - `destructive` Shows the interaction targets destructive actions such as deleting or removing. */ interaction?: "emphasis" | "destructive"; /** Indicates the current state of a toggle button that switches on or off. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) - `true` The button is in the pressed (on) state and the associated action or setting is active. - `false` The button is in the unpressed (off) state and the associated action or setting is inactive. */ pressed?: boolean; /** Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. */ expanded?: boolean; /** Indicates whether the element is a noninteractive visual treatment instead of a button. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */ readOnly?: boolean; /** Associates the button with a form. Set the property to a form element or its ID. The HTML attribute accepts only the form ID. Reading the property returns the associated form element or `null`. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */ form?: string | HTMLFormElement | null; /** The name of the button, submitted as a pair with the button value as part of the form data. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name */ name?: string; /** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */ value?: string; /** Defines the button behavior when associated within a form element. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */ type?: "button" | "submit" | "reset"; /** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. */ disabled?: boolean; /** Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. */ selected?: boolean; /** Indicates the element that represents the user's current location or position within a set. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current) - `page` Marks the current page within a set of navigation links. - `step` Marks the current step within a multi-step process or workflow. */ current?: "page" | "step"; /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popoverTargetElement?: HTMLElement | null; /** The popover target action to perform on the popover target element. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */ popoverTargetAction?: "show" | "hide" | "toggle"; /** The element that receives the command. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ commandForElement?: HTMLElement | null; /** The command to execute on the element. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ command?: string; /** The element that receives the interest. https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */ interestForElement?: HTMLElement | null; }; type IconProps = { /** Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. - `success` Represents positive outcomes, confirmations, or constructive actions. - `accent` Highlights important actions or draws attention to primary interactive elements. */ status?: "warning" | "danger" | "success" | "accent" | undefined; /** Controls the bounding box size of the icon given a t-shirt style value. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */ size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined; /** Sets the direction of the icon. Only supported by expand-panel/collapse-panel (horizontal axis) and arrow/caret/chevron icons (4-directions) */ direction?: "up" | "down" | "left" | "right" | undefined; /** The name of the icon SVG sprite to render. */ name?: | "placeholder" | "caret" | "person" | "menu" | "cancel" | "gear" | "chevron" | "logout" | "copy" | "more-actions" | "add" | "arrow" | "delete" | "download" | "search" | "split-vertical" | "sparkles" | "branch" | "refresh" | "double-chevron" | "academic-cap" | "add-asset" | "add-comment" | "add-grid" | "add-user" | "ancestors" | "archive" | "arrow-angle" | "arrow-both" | "arrow-cycle" | "arrow-path-rounded-square" | "arrow-stop" | "at-symbol" | "backspace" | "bar-pill-stack" | "bars-3" | "bars-3-bottom-left" | "bars-3-bottom-right" | "bars-3-center-left" | "bars-4" | "beaker" | "bell" | "bell-slash" | "bell-stroke" | "bold" | "book" | "bookmark" | "bookmark-stroke" | "bounding-box" | "briefcase" | "broadcast" | "browser" | "bug" | "calendar" | "camera" | "carets-closed-square" | "carousel" | "category-list" | "chart-bar" | "chat-bubble" | "chat-bubbles" | "check" | "check-badge" | "checklist" | "checkmark-circle" | "chip" | "circle" | "circle-angled-line" | "circle-dash" | "circle-dot" | "circle-dot-arrows" | "circle-half" | "circle-rule" | "circle-tick" | "clipboard" | "clock" | "clock-circle-arrow" | "cloud" | "cloud-download" | "cloud-upload" | "code" | "collapse-all" | "collapse-details" | "color-palette" | "columns" | "compare" | "computer" | "connect-node" | "connected-blocks" | "cross-hairs" | "cursor-rays" | "cursor-ripples" | "data-management" | "delete-node" | "doc-checkmark" | "dock-bottom" | "dock-none" | "dock-side" | "document" | "document-clipboard" | "dot" | "dot-stroke" | "drag" | "dropper" | "duplicate" | "edit" | "ellipses" | "envelope" | "exclamation-circle" | "exclamation-mark" | "exclamation-triangle" | "expand-all" | "expand-details" | "expression" | "eye" | "eye-hidden" | "face-frown" | "face-smile" | "fast-forward" | "fast-forward-10" | "film" | "filter" | "filter-stroke" | "flag" | "flag-stroke" | "fold" | "folder" | "fork" | "globe" | "globe-alt-stroke" | "group" | "group-boxes" | "hand" | "hash" | "heading" | "home" | "horizontal-rule" | "hourglass" | "hourglass-end" | "hourglass-mid" | "hourglass-start" | "identification" | "image" | "inbox" | "infinity" | "information-circle-stroke" | "inspect" | "italic" | "key" | "keyboard" | "laptop-phone" | "layers" | "lifebuoy" | "lightbulb" | "lightning-bolt" | "link" | "list-ordered" | "list-unordered" | "lock" | "login" | "looping" | "looping-off" | "map" | "map-drives" | "map-pin" | "markdown" | "maximize" | "megaphone" | "merge" | "meter" | "minimize" | "minus" | "minus-circle" | "moon" | "multiselect" | "music-note" | "newspaper" | "not-allowed" | "numbers" | "office-building" | "outline" | "paper-airplane" | "paper-clip" | "pause" | "pencil-square" | "person-2" | "person-3" | "person-circle" | "phone" | "picture-in-picture" | "pie-chart" | "pin" | "pizza-slice" | "play" | "plug" | "plus-circle" | "plus-minus" | "pointer" | "pointer-stroke" | "priority-high" | "priority-low" | "priority-medium" | "projector" | "pull-close" | "pull-draft" | "pull-open" | "pulse" | "puzzle-piece" | "question-mark-circle" | "question-mark-circle-stroke" | "rectangle-group" | "rectangle-stack-horizontal" | "rectangle-stack-vertical" | "redo" | "reply" | "rewind" | "rewind-10" | "rocketship" | "running" | "scale" | "scissors" | "sensor" | "server" | "server-stack" | "shapes" | "share" | "signal" | "signal-slash" | "signpost" | "sort-ascending" | "sort-descending" | "soundwave" | "split-horizontal" | "split-none" | "star" | "star-half" | "star-stroke" | "start" | "status-offline" | "status-online" | "stop" | "stop-sign" | "stopwatch" | "strikethrough" | "sun" | "swatch" | "switch" | "switch-apps" | "table" | "tag" | "task" | "telescope" | "template" | "terminal" | "thumb" | "thumb-stroke" | "traffic-cone" | "transparent-box" | "trend-down" | "trend-up" | "trophy" | "truck" | "typography" | "undo" | "unlock" | "upload" | "video-camera" | "view-as-grid" | "volume" | "volume-muted" | "wifi" | "wrench" | "x-circle" | "zoom-in" | "zoom-out" | undefined; }; type InputGroupProps = { /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Set the visual prominence of the control group */ prominence?: "muted"; }; type InputProps = { /** Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds. Use when embedding within another container such as a toolbar. */ container?: "flat" | undefined; /** Sets the rounded visual style of the input. */ rounded?: boolean; /** Set current visual state for control. This overrides any validation states active. */ status?: "warning" | "error" | "success" | "disabled"; /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */ fitText?: boolean; /** Sets the input to match native default content block */ fitContent?: boolean; /** Enables internal string values to update for internationalization. */ i18n?: string; /** Set the visual prominence of the control */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type LogoProps = { /** Defines a base color from the theme color palette */ color?: | "red-cardinal" | "gray-slate" | "gray-denim" | "blue-indigo" | "blue-cobalt" | "blue-sky" | "teal-cyan" | "green-mint" | "teal-seafoam" | "green-grass" | "yellow-amber" | "orange-pumpkin" | "red-tomato" | "pink-magenta" | "purple-plum" | "purple-violet" | "purple-lavender" | "pink-rose" | "green-jade" | "lime-pear" | "yellow-nova" | "brand-green"; /** Controls the visual scale of an element to match its importance and available space. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */ size?: "sm" | "md" | "lg" | undefined; }; type MenuItemProps = { /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popovertarget?: string; /** The popover target action to perform on the popover target element. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */ popovertargetaction?: "show" | "hide" | "toggle"; /** The element that receives the command. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ commandfor?: string; /** The element that receives the interest. https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */ interestfor?: string; /** Applies danger styling to destructive or high-risk menu actions. */ status?: "danger"; /** Defines the button behavior when associated within a form element. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */ type?: "button" | "submit" | "reset"; /** Indicates the current state of a toggle button that switches on or off. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) - `true` The button is in the pressed (on) state and the associated action or setting is active. - `false` The button is in the unpressed (off) state and the associated action or setting is inactive. */ pressed?: boolean; /** Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. */ expanded?: boolean; /** Indicates whether the element is a noninteractive visual treatment instead of a button. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */ readOnly?: boolean; /** Associates the button with a form. Set the property to a form element or its ID. The HTML attribute accepts only the form ID. Reading the property returns the associated form element or `null`. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */ form?: string | HTMLFormElement | null; /** The name of the button, submitted as a pair with the button value as part of the form data. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name */ name?: string; /** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */ value?: string; /** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. */ disabled?: boolean; /** Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. */ selected?: boolean; /** Indicates the element that represents the user's current location or position within a set. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current) - `page` Marks the current page within a set of navigation links. - `step` Marks the current step within a multi-step process or workflow. */ current?: "page" | "step"; /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popoverTargetElement?: HTMLElement | null; /** The popover target action to perform on the popover target element. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */ popoverTargetAction?: "show" | "hide" | "toggle"; /** The element that receives the command. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ commandForElement?: HTMLElement | null; /** The command to execute on the element. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ command?: string; /** The element that receives the interest. https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */ interestForElement?: HTMLElement | null; }; type MenuProps = { /** Fires when the user scrolls the menu list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`. */ onscroll?: (e: CustomEvent) => void; }; type MonthProps = { /** Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds. Use when embedding within another container such as a toolbar. */ container?: "flat" | undefined; /** Set current visual state for control. This overrides any validation states active. */ status?: "warning" | "error" | "success" | "disabled"; /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */ fitText?: boolean; /** Sets the input to match native default content block */ fitContent?: boolean; /** Enables internal string values to update for internationalization. */ i18n?: string; /** Set the visual prominence of the control */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type NotificationGroupProps = { /** Provides the element that the popover should position relative to. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */ anchor?: string | HTMLElement; /** Sets the position of the popover relative to the anchor element. - `center` Centers the popover directly over the anchor element. - `top` Positions the popover above the anchor element. - `bottom` Positions the popover below the anchor element. - `left` Positions the popover to the left side of the anchor element. - `right` Positions the popover to the right side of the anchor element. */ position?: "center" | "top" | "bottom" | "left" | "right"; /** Determines the alignment of the popover relative to the provided anchor element. - `start` Aligns the popover to the beginning edge of the anchor for left or top alignment. - `end` Aligns the popover to the ending edge of the anchor for right or bottom alignment. - `center` Centers the popover along the anchor's edge for balanced positioning. */ alignment?: "start" | "end" | "center"; }; type NotificationProps = { /** A delayed `close` event will occur determined from the provided millisecond value. */ "close-timeout"?: number; /** Provides the element that the popover should position relative to. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */ anchor?: string | HTMLElement; /** @deprecated Use the popover API instead. The trigger defines what element triggers an `open` interaction event. A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. - Defines the element that triggers an `open` interaction event. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */ trigger?: string | HTMLElement; /** Sets the side position of the popover relative to the provided anchor element. - `center` Centers the popover directly over the anchor element. - `top` Positions the popover above the anchor element. - `bottom` Positions the popover below the anchor element. - `left` Positions the popover to the left side of the anchor element. - `right` Positions the popover to the right side of the anchor element. */ position?: "center" | "top" | "bottom" | "left" | "right"; /** Determines the alignment of the popover relative to the provided anchor element. - `start` Aligns the popover to the beginning edge of the anchor for left or top alignment. - `end` Aligns the popover to the ending edge of the anchor for right or bottom alignment. - `center` Centers the popover along the anchor's edge for balanced positioning. */ alignment?: "start" | "end" | "center"; /** @deprecated Use the popover API instead. Determines if popover visibility behavior should be automatically controlled by the trigger. */ behaviorTrigger?: boolean; /** Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. */ closable?: boolean; /** Sets the automatic dismissal time in milliseconds before the element emits a `close` event. Allow ~200-250ms per word for comfortable reading. - `0` Warning or error messages requiring immediate acknowledgment. - `3000` Brief success or confirmation messages. - `7000` Standard informational messages. - `10000` Messages with actions or requiring user decision. */ closeTimeout?: number; /** Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `accent` Highlights important actions or draws attention to primary interactive elements. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. */ status?: "accent" | "warning" | "success" | "danger"; /** Flat container option applies when embedding within another containing element such as a drawer. */ container?: "flat" | undefined; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Dispatched when the notification closes. */ onclose?: (e: CustomEvent) => void; /** Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) */ onbeforetoggle?: (e: CustomEvent) => void; /** Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event) */ ontoggle?: (e: CustomEvent) => void; /** Dispatched when the notification opens. */ onopen?: (e: CustomEvent) => void; }; type PageHeaderProps = {}; type PageLoaderProps = {}; type PagePanelContentProps = {}; type PagePanelFooterProps = {}; type PagePanelHeaderProps = {}; type PagePanelProps = { /** Controls the visual scale of an element to match its importance and available space. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */ size?: "sm" | "md" | "lg" | undefined; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Dispatched after an invoker command removes `hidden` and opens the panel. */ onopen?: (e: CustomEvent) => void; /** Dispatched after an invoker command sets `hidden` and closes the panel. */ onclose?: (e: CustomEvent) => void; }; type PageProps = { /** Enables the page to use the document content scroll rather than its internal fixed scroll. */ documentScroll?: boolean; }; type PaginationProps = { /** A JSON-serialized array of page-size options available in the selector. */ "step-sizes"?: string; /** Defines the minimum text length. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength */ minlength?: number; /** Defines the maximum text length. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength */ maxlength?: number; /** The number of items per page. */ step?: number; /** Page-size options available in the selector. */ stepSizes?: number[]; /** The total number of items. */ items?: number; /** Whether the pagination is skippable to start/end. */ skippable?: boolean; /** Whether the step selector has a disabled state. */ disableStep?: boolean; /** Determines the container styles of component. Flat applies when nesting within other containers. Inline applies when placing within other inline content. */ container?: "flat" | "inline" | undefined; /** Enables updating internal string values for internationalization. */ i18n?: string; /** value the current page number */ value?: number; /** The initial value used when the parent form resets. */ defaultValue?: string; /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. */ readOnly?: boolean; /** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. */ disabled?: boolean; /** Requires a value before the parent form can submit. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required */ required?: boolean; /** Defines the pattern that text values must match. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern */ pattern?: string; /** Defines the minimum numeric value. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min */ min?: number | null; /** Defines the maximum numeric value. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max */ max?: number | null; /** Defines the minimum text length. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength */ minLength?: number; /** Defines the maximum text length. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength */ maxLength?: number; /** The name submitted with the control value as part of the form data. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/name */ name?: string; /** Disables constraint validation for this control. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/novalidate */ noValidate?: boolean; /** The form associated with the control. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */ form?: HTMLFormElement | null; /** Indicates whether the control participates in constraint validation. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate */ willValidate?: boolean; /** The control validity state. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validity */ validity?: ValidityState; /** The validation message shown when the control is invalid. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validationMessage */ validationMessage?: string; /** The current value serialized as a string. */ valueAsString?: string; /** The current value parsed as a number. */ valueAsNumber?: number; /** The control type. */ type?: string; /** Labels associated with the control. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/labels */ labels?: NodeList; /** Text content from labels associated with the control. */ composedLabel?: string; /** Dispatched after the page size changes with the current page size in `detail`. The event bubbles and crosses shadow boundaries. */ "onstep-change"?: (e: CustomEvent) => void; /** Dispatched when the last page is active */ "onlast-page"?: (e: CustomEvent) => void; /** Dispatched when the first page is active */ "onfirst-page"?: (e: CustomEvent) => void; /** Dispatched when the value (page) has changed */ oninput?: (e: CustomEvent) => void; /** Dispatched when the value (page) has changed */ onchange?: (e: CustomEvent) => void; }; type PanelHeaderProps = {}; type PanelContentProps = {}; type PanelFooterProps = {}; type PanelProps = { /** Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. */ expanded?: boolean; /** Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. */ closable?: boolean; /** Determines whether the panel should handle auto-closing behavior vs. defaults to off. */ behaviorExpand?: boolean; /** Sets the proper collapse icon and collapse animation, based on which side of the page the panel occupies. */ side?: "left" | "right"; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Dispatched when the panel opens. */ onopen?: (e: CustomEvent) => void; /** Dispatched when the panel closes. */ onclose?: (e: CustomEvent) => void; }; type PasswordProps = { /** Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds. Use when embedding within another container such as a toolbar. */ container?: "flat" | undefined; /** Set current visual state for control. This overrides any validation states active. */ status?: "warning" | "error" | "success" | "disabled"; /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */ fitText?: boolean; /** Sets the input to match native default content block */ fitContent?: boolean; /** Enables internal string values to update for internationalization. */ i18n?: string; /** Set the visual prominence of the control */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type PreferencesInputProps = { /** Defines the minimum text length. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength */ minlength?: number; /** Defines the maximum text length. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength */ maxlength?: number; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Contains the current color scheme, scale, and reduced motion preferences. Assign an object through JavaScript or provide its JSON serialization in the HTML `value` attribute. */ value?: { "color-scheme"?: string; scale?: string; "reduced-motion"?: boolean }; /** The initial value used when the parent form resets. */ defaultValue?: string; /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. */ readOnly?: boolean; /** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. */ disabled?: boolean; /** Requires a value before the parent form can submit. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required */ required?: boolean; /** Defines the pattern that text values must match. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern */ pattern?: string; /** Defines the minimum numeric value. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min */ min?: number | null; /** Defines the maximum numeric value. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max */ max?: number | null; /** Defines the value granularity for numeric inputs. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step */ step?: number | null; /** Defines the minimum text length. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength */ minLength?: number; /** Defines the maximum text length. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength */ maxLength?: number; /** The name submitted with the control value as part of the form data. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/name */ name?: string; /** Disables constraint validation for this control. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/novalidate */ noValidate?: boolean; /** The form associated with the control. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */ form?: HTMLFormElement | null; /** Indicates whether the control participates in constraint validation. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate */ willValidate?: boolean; /** The control validity state. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validity */ validity?: ValidityState; /** The validation message shown when the control is invalid. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validationMessage */ validationMessage?: string; /** The current value serialized as a string. */ valueAsString?: string; /** The current value parsed as a number. */ valueAsNumber?: number; /** The control type. */ type?: string; /** Labels associated with the control. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/labels */ labels?: NodeList; /** Text content from labels associated with the control. */ composedLabel?: string; /** Dispatched when the value has changed */ oninput?: (e: CustomEvent) => void; /** Dispatched when the value has changed */ onchange?: (e: CustomEvent) => void; }; type ProgressBarProps = { /** The current `value` of the progress indicator, set to the native HTML progress element. */ value?: number | undefined; /** The `max` property sets the highest value that `value` scales to. */ max?: number; /** Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `accent` Highlights important actions or draws attention to primary interactive elements. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. */ status?: "accent" | "warning" | "success" | "danger"; }; type ProgressRingProps = { /** The current `value` of the progress ring. When not set, an indeterminate animation will show. */ value?: number | undefined; /** The `max` value of the progress ring that the `value` is proportionally scaled to. */ max?: number; /** Four visual treatments represent the `status` of tasks. When `status` changes to `warning`, `success`, or `danger`, the component embeds appropriate icons. - `accent` Highlights important actions or draws attention to primary interactive elements. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. */ status?: "accent" | "warning" | "success" | "danger" | "neutral" | undefined; /** T-shirt `size` of the progress indicator, used to scale the ring. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */ size?: "sm" | "md" | "lg" | "xxs" | "xs" | "xl" | undefined; /** Enables updating internal string values for internationalization. */ i18n?: string; }; type ProgressiveFilterChipProps = { /** Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. */ closable?: boolean; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Dispatched when the filter chip closes. */ onclose?: (e: CustomEvent) => void; }; type PulseProps = { /** Sets size of the pulse component. You can also update size using the `width + height` css props. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. */ size?: "sm" | "md" | "lg" | "xs" | undefined; /** These visual treatments represent the `status` of different tasks. When `status` changes to `accent`, `warning` or `danger`, the component embeds appropriate colors. */ status?: "accent" | "warning" | "danger" | undefined; }; type RadioGroupProps = { /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Set the visual prominence of the control group */ prominence?: "muted"; }; type RadioProps = { /** Set current visual state for control. This overrides any validation states active. */ status?: "warning" | "error" | "success" | "disabled"; /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Enables internal string values to update for internationalization. */ i18n?: string; /** Set the visual prominence of the control */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type RangeProps = { /** Controls the directional flow of the element's layout and interaction pattern. - `vertical` Element orients vertically with top-to-bottom flow. - `horizontal` Element orients horizontally with left-to-right flow. */ orientation?: "vertical" | "horizontal"; /** Set current visual state for control. This overrides any validation states active. */ status?: "warning" | "error" | "success" | "disabled"; /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */ fitText?: boolean; /** Sets the input to match native default content block */ fitContent?: boolean; /** Enables internal string values to update for internationalization. */ i18n?: string; /** Set the visual prominence of the control */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type ResizeHandleProps = { /** Defines the minimum text length. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength */ minlength?: number; /** Defines the maximum text length. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength */ maxlength?: number; /** Controls the directional flow of the element's layout and interaction pattern. - `horizontal` Element orients horizontally with left-to-right flow. - `vertical` Element orients vertically with top-to-bottom flow. */ orientation?: "horizontal" | "vertical" | undefined; /** Determines the min resize value. */ min?: number; /** Determines the max resize value. */ max?: number; /** Determines the value step change. */ step?: number; /** Updates internal string values for internationalization. */ i18n?: string; /** The current form control value. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/value */ value?: string; /** The initial value used when the parent form resets. */ defaultValue?: string; /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. */ readOnly?: boolean; /** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. */ disabled?: boolean; /** Requires a value before the parent form can submit. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required */ required?: boolean; /** Defines the pattern that text values must match. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern */ pattern?: string; /** Defines the minimum text length. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength */ minLength?: number; /** Defines the maximum text length. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength */ maxLength?: number; /** The name submitted with the control value as part of the form data. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/name */ name?: string; /** Disables constraint validation for this control. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/novalidate */ noValidate?: boolean; /** The form associated with the control. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */ form?: HTMLFormElement | null; /** Indicates whether the control participates in constraint validation. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate */ willValidate?: boolean; /** The control validity state. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validity */ validity?: ValidityState; /** The validation message shown when the control is invalid. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validationMessage */ validationMessage?: string; /** The current value serialized as a string. */ valueAsString?: string; /** The current value parsed as a number. */ valueAsNumber?: number; /** The control type. */ type?: string; /** Labels associated with the control. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/labels */ labels?: NodeList; /** Text content from labels associated with the control. */ composedLabel?: string; /** Dispatched when the resize handle is double clicked. */ ontoggle?: (e: CustomEvent) => void; }; type SearchProps = { /** Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds. Use when embedding within another container such as a toolbar. */ container?: "flat" | undefined; /** Sets the rounded visual style of the input. */ rounded?: boolean; /** Set current visual state for control. This overrides any validation states active. */ status?: "warning" | "error" | "success" | "disabled"; /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */ fitText?: boolean; /** Sets the input to match native default content block */ fitContent?: boolean; /** Enables internal string values to update for internationalization. */ i18n?: string; /** Set the visual prominence of the control */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type SelectProps = { /** Flat container option applies when embedding the component within another containing element */ container?: "flat" | "inline" | undefined; /** Updates internal string values for internationalization. */ i18n?: string; /** Set current visual state for control. This overrides any validation states active. */ status?: "warning" | "error" | "success" | "disabled"; /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */ fitText?: boolean; /** Sets the input to match native default content block */ fitContent?: boolean; /** Set the visual prominence of the control */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type SkeletonProps = { /** Visual animation style shown while content loads. */ effect?: "shimmer" | "pulse"; /** Geometry of the placeholder — rounded corners or a full pill outline. */ shape?: "round" | "pill"; /** Hides the skeleton host when `true` and sets `aria-busy` to the inverse visibility state. */ hidden?: boolean; }; type SortButtonProps = { /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popovertarget?: string; /** The popover target action to perform on the popover target element. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */ popovertargetaction?: "show" | "hide" | "toggle"; /** The element that receives the command. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ commandfor?: string; /** The element that receives the interest. https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */ interestfor?: string; /** The current sort value, can be ascending, descending, or none. */ sort?: "ascending" | "descending" | "none"; /** Updates internal string values for internationalization. */ i18n?: string; /** Defines the button behavior when associated within a form element. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */ type?: "button" | "submit" | "reset"; /** Indicates the current state of a toggle button that switches on or off. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) - `true` The button is in the pressed (on) state and the associated action or setting is active. - `false` The button is in the unpressed (off) state and the associated action or setting is inactive. */ pressed?: boolean; /** Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. */ expanded?: boolean; /** Indicates whether the element is a noninteractive visual treatment instead of a button. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */ readOnly?: boolean; /** Associates the button with a form. Set the property to a form element or its ID. The HTML attribute accepts only the form ID. Reading the property returns the associated form element or `null`. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */ form?: string | HTMLFormElement | null; /** The name of the button, submitted as a pair with the button value as part of the form data. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name */ name?: string; /** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */ value?: string; /** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. */ disabled?: boolean; /** Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. */ selected?: boolean; /** Indicates the element that represents the user's current location or position within a set. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current) - `page` Marks the current page within a set of navigation links. - `step` Marks the current step within a multi-step process or workflow. */ current?: "page" | "step"; /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popoverTargetElement?: HTMLElement | null; /** The popover target action to perform on the popover target element. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */ popoverTargetAction?: "show" | "hide" | "toggle"; /** The element that receives the command. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ commandForElement?: HTMLElement | null; /** The command to execute on the element. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ command?: string; /** The element that receives the interest. https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */ interestForElement?: HTMLElement | null; /** Dispatched on activation with `detail: { value, next }`, where `value` is the current sort and `next` follows the cycle `none` → `ascending` → `descending` → `none`. */ onsort?: (e: CustomEvent) => void; }; type SparklineProps = { /** Controls spacing between points in a line, in em (1 = chart height). Defaults to `0.6`. */ "interval-length"?: number; /** Numeric values representing a data series. */ data?: number[]; /** Controls the visual representation of data points. - `line` Renders data as a connected line to emphasize macro trend. - `area` Renders data as a filled area beneath a line to emphasize magnitude over time. - `gradient` Renders a line with gradient color treatment to communicate value intensity across the series. - `column` Renders data as vertical columns for easy comparison of discrete values. - `winloss` Renders outcomes as binary or ternary bars to highlight wins, losses, and optional ties. */ mark?: "line" | "area" | "gradient" | "column" | "winloss"; /** Controls how the chart connects intermediate values between points in a data series. Defaults to `linear`. - `linear` Connects points with straight line segments. - `smooth` Connects points with smooth bezier curves. - `step` Connects points with horizontal and vertical step segments. */ interpolation?: "linear" | "smooth" | "step"; /** Applies semantic status colors used across Elements status patterns. - `accent` Highlights important actions or draws attention to primary interactive elements. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. - `scheduled` Task has a scheduled future execution at a specific time. - `queued` Task is waiting in line to begin after other tasks complete. - `pending` Task is awaiting approval, user input, or external conditions before proceeding. - `starting` Task is initializing and preparing to begin active execution. - `running` Task is actively executing and making progress. - `restarting` Task restarts after an interruption or reset. - `stopping` Task is gracefully shutting down and completing cleanup operations. - `finished` Task has completed successfully with the expected outcome. - `failed` Task encountered an error and did not complete as intended. - `unknown` Task status remains unknown or unavailable. - `ignored` Task was intentionally skipped or excluded from execution. */ status?: | "scheduled" | "queued" | "pending" | "starting" | "running" | "restarting" | "stopping" | "finished" | "failed" | "unknown" | "ignored" | "accent" | "warning" | "success" | "danger" | undefined; /** Controls the sparkline size with explicit font-size tokens. Omit to auto-scale with parent font-size (1em). - `xs` Extra small size for minimal elements or highly dense layouts. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. - `xl` Extra large size for emphasizing elements or sparse layouts. */ size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined; /** Denotes the first data point by rendering a symbol at its position. */ denoteFirst?: boolean; /** Denotes the last data point by rendering a symbol at its position. */ denoteLast?: boolean; /** Denotes all minimum-value data points by rendering symbols at their positions. */ denoteMin?: boolean; /** Denotes all maximum-value data points by rendering symbols at their positions. */ denoteMax?: boolean; /** Controls spacing between points in a line, in em (1 = chart height). Defaults to `0.6`. */ intervalLength?: number; /** Lower bound for the y-axis domain. When undefined, derives the bound from data. */ min?: number | undefined; /** Upper bound for the y-axis domain. When undefined, derives the bound from data. */ max?: number | undefined; }; type StarRatingProps = { /** Set current visual state for control. This overrides any validation states active. */ status?: "warning" | "error" | "success" | "disabled"; /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */ fitText?: boolean; /** Sets the input to match native default content block */ fitContent?: boolean; /** Enables internal string values to update for internationalization. */ i18n?: string; /** Set the visual prominence of the control */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type StepsItemProps = { /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popovertarget?: string; /** The popover target action to perform on the popover target element. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */ popovertargetaction?: "show" | "hide" | "toggle"; /** The element that receives the command. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ commandfor?: string; /** The element that receives the interest. https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */ interestfor?: string; /** Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. */ selected?: boolean; /** Controls the step status. `accent` has no default status icon, `danger` displays an alert icon, `success` displays a check icon, and `pending` displays a progress indicator. Omit the property to display the step number. */ status?: "accent" | "danger" | "success" | "pending" | undefined; /** Determines whether the steps should display in condensed format with no text labels. */ container?: "condensed" | undefined; /** Defines the button behavior when associated within a form element. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */ type?: "button" | "submit" | "reset"; /** Indicates the current state of a toggle button that switches on or off. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) - `true` The button is in the pressed (on) state and the associated action or setting is active. - `false` The button is in the unpressed (off) state and the associated action or setting is inactive. */ pressed?: boolean; /** Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. */ expanded?: boolean; /** Indicates whether the element is a noninteractive visual treatment instead of a button. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */ readOnly?: boolean; /** Associates the button with a form. Set the property to a form element or its ID. The HTML attribute accepts only the form ID. Reading the property returns the associated form element or `null`. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */ form?: string | HTMLFormElement | null; /** The name of the button, submitted as a pair with the button value as part of the form data. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name */ name?: string; /** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */ value?: string; /** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. */ disabled?: boolean; /** Indicates the element that represents the user's current location or position within a set. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current) - `page` Marks the current page within a set of navigation links. - `step` Marks the current step within a multi-step process or workflow. */ current?: "page" | "step"; /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popoverTargetElement?: HTMLElement | null; /** The popover target action to perform on the popover target element. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */ popoverTargetAction?: "show" | "hide" | "toggle"; /** The element that receives the command. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ commandForElement?: HTMLElement | null; /** The command to execute on the element. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ command?: string; /** The element that receives the interest. https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */ interestForElement?: HTMLElement | null; }; type StepsProps = { /** Determines whether the steps should display in a vertical layout vs. defaulting to horizontal. */ vertical?: boolean; /** Determines whether the steps should display in condensed format with no text labels. */ container?: "condensed" | undefined; /** Determines whether the steps should handle selection behavior vs. defaults to off. */ behaviorSelect?: boolean; }; type SwitchGroupProps = { /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Set the visual prominence of the control group */ prominence?: "muted"; }; type SwitchProps = { /** Set current visual state for control. This overrides any validation states active. */ status?: "warning" | "error" | "success" | "disabled"; /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */ fitText?: boolean; /** Sets the input to match native default content block */ fitContent?: boolean; /** Enables internal string values to update for internationalization. */ i18n?: string; /** Set the visual prominence of the control */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type TabsGroupProps = { /** Arranges the tab strip relative to slot-matched panels: stacked column (`top`), or sidebar row with tabs at inline-start (`start`) or inline-end (`end`) beside the panel region. */ alignment?: "top" | "start" | "end"; /** Dispatched when the selected tab value changes after an invoker `--toggle` updates selection */ onselect?: (e: CustomEvent) => void; }; type TabsItemProps = { /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popovertarget?: string; /** The popover target action to perform on the popover target element. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */ popovertargetaction?: "show" | "hide" | "toggle"; /** The element that receives the command. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ commandfor?: string; /** The element that receives the interest. https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */ interestfor?: string; /** Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. */ selected?: boolean; /** Defines the button behavior when associated within a form element. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */ type?: "button" | "submit" | "reset"; /** Indicates the current state of a toggle button that switches on or off. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) - `true` The button is in the pressed (on) state and the associated action or setting is active. - `false` The button is in the unpressed (off) state and the associated action or setting is inactive. */ pressed?: boolean; /** Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. */ expanded?: boolean; /** Indicates whether the element is a noninteractive visual treatment instead of a button. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */ readOnly?: boolean; /** Associates the button with a form. Set the property to a form element or its ID. The HTML attribute accepts only the form ID. Reading the property returns the associated form element or `null`. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */ form?: string | HTMLFormElement | null; /** The name of the button, submitted as a pair with the button value as part of the form data. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name */ name?: string; /** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */ value?: string; /** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. */ disabled?: boolean; /** Indicates the element that represents the user's current location or position within a set. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current) - `page` Marks the current page within a set of navigation links. - `step` Marks the current step within a multi-step process or workflow. */ current?: "page" | "step"; /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popoverTargetElement?: HTMLElement | null; /** The popover target action to perform on the popover target element. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */ popoverTargetAction?: "show" | "hide" | "toggle"; /** The element that receives the command. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ commandForElement?: HTMLElement | null; /** The command to execute on the element. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ command?: string; /** The element that receives the interest. https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */ interestForElement?: HTMLElement | null; }; type TabsProps = { /** Determines whether the tabs should display in a vertical layout vs. defaulting to horizontal. */ vertical?: boolean; /** Determines whether the tabs should display a border on selected items vs. defaults to show border. */ borderless?: boolean; /** Determines whether the tabs should handle selection behavior vs. defaults to off. */ behaviorSelect?: boolean; }; type TagProps = { /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popovertarget?: string; /** The popover target action to perform on the popover target element. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */ popovertargetaction?: "show" | "hide" | "toggle"; /** The element that receives the command. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ commandfor?: string; /** The element that receives the interest. https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */ interestfor?: string; /** Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. */ closable?: boolean; /** Defines a base color from the theme color palette */ color?: | "red-cardinal" | "gray-slate" | "gray-denim" | "blue-indigo" | "blue-cobalt" | "blue-sky" | "teal-cyan" | "green-mint" | "teal-seafoam" | "green-grass" | "yellow-amber" | "orange-pumpkin" | "red-tomato" | "pink-magenta" | "purple-plum" | "purple-violet" | "purple-lavender" | "pink-rose" | "green-jade" | "lime-pear" | "yellow-nova" | "brand-green"; /** Determines the visual prominence or weight */ prominence?: "emphasis" | undefined; /** Updates internal string values for internationalization. */ i18n?: string; /** Defines the button behavior when associated within a form element. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type */ type?: "button" | "submit" | "reset"; /** Indicates the current state of a toggle button that switches on or off. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) - `true` The button is in the pressed (on) state and the associated action or setting is active. - `false` The button is in the unpressed (off) state and the associated action or setting is inactive. */ pressed?: boolean; /** Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. */ expanded?: boolean; /** Indicates whether the element is a noninteractive visual treatment instead of a button. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */ readOnly?: boolean; /** Associates the button with a form. Set the property to a form element or its ID. The HTML attribute accepts only the form ID. Reading the property returns the associated form element or `null`. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */ form?: string | HTMLFormElement | null; /** The name of the button, submitted as a pair with the button value as part of the form data. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name */ name?: string; /** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */ value?: string; /** This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. */ disabled?: boolean; /** Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. */ selected?: boolean; /** Indicates the element that represents the user's current location or position within a set. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current) - `page` Marks the current page within a set of navigation links. - `step` Marks the current step within a multi-step process or workflow. */ current?: "page" | "step"; /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popoverTargetElement?: HTMLElement | null; /** The popover target action to perform on the popover target element. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction */ popoverTargetAction?: "show" | "hide" | "toggle"; /** The element that receives the command. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ commandForElement?: HTMLElement | null; /** The command to execute on the element. https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API */ command?: string; /** The element that receives the interest. https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */ interestForElement?: HTMLElement | null; }; type TextareaProps = { /** Set current visual state for control. This overrides any validation states active. */ status?: "warning" | "error" | "success" | "disabled"; /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */ fitText?: boolean; /** Sets the input to match native default content block */ fitContent?: boolean; /** Enables internal string values to update for internationalization. */ i18n?: string; /** Set the visual prominence of the control */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type TimeProps = { /** Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds. Use when embedding within another container such as a toolbar. */ container?: "flat" | undefined; /** Set current visual state for control. This overrides any validation states active. */ status?: "warning" | "error" | "success" | "disabled"; /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */ fitText?: boolean; /** Sets the input to match native default content block */ fitContent?: boolean; /** Enables internal string values to update for internationalization. */ i18n?: string; /** Set the visual prominence of the control */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type ToastProps = { /** A delayed `close` event occurs after the provided millisecond value elapses. */ "close-timeout"?: number; /** Provides the element that the popover should position relative to. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */ anchor?: string | HTMLElement; /** @deprecated Use the popover API instead. The trigger defines what element triggers an `open` interaction event. A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. - Defines the element that triggers an `open` interaction event. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */ trigger?: string | HTMLElement; /** Sets the side position of the popover relative to the provided anchor element. - `center` Centers the popover directly over the anchor element. - `top` Positions the popover above the anchor element. - `bottom` Positions the popover below the anchor element. - `left` Positions the popover to the left side of the anchor element. - `right` Positions the popover to the right side of the anchor element. */ position?: "center" | "top" | "bottom" | "left" | "right"; /** Determines the alignment of the popover relative to the provided anchor element. - `start` Aligns the popover to the beginning edge of the anchor for left or top alignment. - `end` Aligns the popover to the ending edge of the anchor for right or bottom alignment. - `center` Centers the popover along the anchor's edge for balanced positioning. */ alignment?: "start" | "end" | "center"; /** Sets the visual prominence of the toast. */ prominence?: "muted"; /** @deprecated Use the popover API instead. Determines if popover visibility behavior should be automatically controlled by the trigger. */ behaviorTrigger?: boolean; /** Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. */ closable?: boolean; /** Sets the automatic dismissal time in milliseconds before the element emits a `close` event. Allow ~200-250ms per word for comfortable reading. - `0` Warning or error messages requiring immediate acknowledgment. - `3000` Brief success or confirmation messages. - `7000` Standard informational messages. - `10000` Messages with actions or requiring user decision. */ closeTimeout?: number; /** Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `accent` Highlights important actions or draws attention to primary interactive elements. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. */ status?: "accent" | "warning" | "success" | "danger"; /** Updates internal string values for internationalization. */ i18n?: string; /** Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) */ onbeforetoggle?: (e: CustomEvent) => void; /** Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event) */ ontoggle?: (e: CustomEvent) => void; /** Dispatched when the toast opens. */ onopen?: (e: CustomEvent) => void; /** Dispatched when the toast closes. */ onclose?: (e: CustomEvent) => void; }; type ToggletipFooterProps = {}; type ToggletipHeaderProps = {}; type ToggletipProps = { /** Provides the element that the popover should position relative to. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */ anchor?: string | HTMLElement; /** @deprecated Use the popover API instead. The trigger defines what element triggers an `open` interaction event. A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. - Defines the element that triggers an `open` interaction event. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */ trigger?: string | HTMLElement; /** Sets the side position of the popover relative to the provided anchor element. - `center` Centers the popover directly over the anchor element. - `top` Positions the popover above the anchor element. - `bottom` Positions the popover below the anchor element. - `left` Positions the popover to the left side of the anchor element. - `right` Positions the popover to the right side of the anchor element. */ position?: "center" | "top" | "bottom" | "left" | "right"; /** Determines the alignment of the popover relative to the provided anchor element. - `start` Aligns the popover to the beginning edge of the anchor for left or top alignment. - `end` Aligns the popover to the ending edge of the anchor for right or bottom alignment. - `center` Centers the popover along the anchor's edge for balanced positioning. */ alignment?: "start" | "end" | "center"; /** @deprecated Use the popover API instead. Determines if popover visibility behavior should be automatically controlled by the trigger. */ behaviorTrigger?: boolean; /** Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. */ closable?: boolean; /** Determines if the component renders an arrow. */ arrow?: boolean; /** Updates internal string values for internationalization. */ i18n?: string; /** Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) */ onbeforetoggle?: (e: CustomEvent) => void; /** Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event) */ ontoggle?: (e: CustomEvent) => void; /** Dispatched when the toggletip opens. */ onopen?: (e: CustomEvent) => void; /** Dispatched when the toggletip closes. */ onclose?: (e: CustomEvent) => void; }; type ToolbarProps = { /** Determines the container styles of component. Flat applies when nesting elements within other containers or for a more muted style. Full applies when the element expands the full width of the viewport. */ container?: "flat" | "inset" | "full" | undefined; /** Determines the primary content overflow behavior. */ content?: "scroll" | "wrap" | undefined; /** Controls the directional flow of the element's layout and interaction pattern. - `horizontal` Element orients horizontally with left-to-right flow. - `vertical` Element orients vertically with top-to-bottom flow. */ orientation?: "horizontal" | "vertical" | undefined; /** Visual treatment to represent accent color for interactive selections */ status?: "accent"; }; type TooltipProps = { /** @deprecated Use interest-delay-start css property instead */ "open-delay"?: number; /** Provides the element that the popover should position relative to. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */ anchor?: string | HTMLElement; /** @deprecated Use the popover API instead. The trigger defines what element triggers an `open` interaction event. A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. - Defines the element that triggers an `open` interaction event. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */ trigger?: string | HTMLElement; /** Sets the side position of the popover relative to the provided anchor element. - `center` Centers the popover directly over the anchor element. - `top` Positions the popover above the anchor element. - `bottom` Positions the popover below the anchor element. - `left` Positions the popover to the left side of the anchor element. - `right` Positions the popover to the right side of the anchor element. */ position?: "center" | "top" | "bottom" | "left" | "right"; /** Determines the alignment of the popover relative to the provided anchor element. - `start` Aligns the popover to the beginning edge of the anchor for left or top alignment. - `end` Aligns the popover to the ending edge of the anchor for right or bottom alignment. - `center` Centers the popover along the anchor's edge for balanced positioning. */ alignment?: "start" | "end" | "center"; /** @deprecated Use the popover API instead. Determines if popover visibility behavior should be automatically controlled by the trigger. */ behaviorTrigger?: boolean; /** visual treatment to represent a ongoing task or support status */ status?: "muted"; /** @deprecated Use interest-delay-start css property instead - Sets the delay in milliseconds before the element emits an `open` event. - `0` Keyboard focus interactions (always immediate for accessibility). - `500` Dense interfaces with many tooltips to reduce visual noise and prevent accidental triggers. */ openDelay?: number; /** Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) */ onbeforetoggle?: (e: CustomEvent) => void; /** Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event) */ ontoggle?: (e: CustomEvent) => void; /** Dispatched when the tooltip opens. */ onopen?: (e: CustomEvent) => void; /** Dispatched when the tooltip closes. */ onclose?: (e: CustomEvent) => void; }; type TreeNodeProps = { /** Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. */ expanded?: boolean; /** Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. */ selected?: boolean; /** Determines whether a node can be expandable. Expandable by default if slotted nodes exist. */ expandable?: boolean; /** Determines whether a node can be in a selected state. Nodes can be in a single or multi select state. */ selectable?: "single" | "multi"; /** Determines the highlighted state of the element. Highlighted states serve non-interactive selections where nodes may relate to other selected portions of the UI. */ highlighted?: boolean; /** Updates internal string values for internationalization. */ i18n?: string; /** Dispatched when the node opens. */ onopen?: (e: CustomEvent) => void; /** Dispatched when the node closes. */ onclose?: (e: CustomEvent) => void; /** Dispatched when the node selection state changes. */ onselect?: (e: CustomEvent) => void; }; type TreeProps = { /** Determines whether all nodes can be in a selected state. Nodes can be in a single or multi select state. */ selectable?: "single" | "multi"; /** Determines whether the tree nodes should handle auto-expanding behavior. */ behaviorExpand?: boolean; /** Determines whether the tree nodes should handle auto-select behavior. */ behaviorSelect?: boolean; /** Determines if the node depth border renders. */ border?: boolean; /** Dispatched from a child nve-tree-node when opened. */ onopen?: (e: CustomEvent) => void; /** Dispatched from a child nve-tree-node when closed. */ onclose?: (e: CustomEvent) => void; /** Dispatched from a child nve-tree-node when its selection state changes. */ onselect?: (e: CustomEvent) => void; }; type WeekProps = { /** Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds. Use when embedding within another container such as a toolbar. */ container?: "flat" | undefined; /** Set current visual state for control. This overrides any validation states active. */ status?: "warning" | "error" | "success" | "disabled"; /** Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. */ layout?: "vertical" | "vertical-inline" | "horizontal" | "horizontal-inline"; /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */ fitText?: boolean; /** Sets the input to match native default content block */ fitContent?: boolean; /** Enables internal string values to update for internationalization. */ i18n?: string; /** Set the visual prominence of the control */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; export type CustomElements = { /** * Provides the clickable heading region of an accordion that toggles the visibility of associated content. * --- * * * ### **Slots:** * - _default_ - Heading text and supporting content that labels the accordion section. * - **prefix** - slot for prefix content * - **suffix** - slot for suffix content * * ### **CSS Properties:** * - **--cursor** - undefined _(default: undefined)_ */ "nve-accordion-header": DefineComponent; /** * Contains the collapsible body content that reveals or hides when the parent accordion expands or collapses. * --- * * * ### **Slots:** * - _default_ - This is a default/unnamed slot for accordion content * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ */ "nve-accordion-content": DefineComponent; /** * An accordion is a vertical stack of interactive headings used to toggle the display of further information. * --- * * * ### **Slots:** * - _default_ - Content displayed in the collapsible region, typically an `nve-accordion-content` element. * - **icon-button** - icon elements to display for expand/collapse * - **header** - header element (Use `accordion-header` or custom content) * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--header-padding** - Padding around the header content. _(default: undefined)_ * - **--cursor** - undefined _(default: undefined)_ * - **--transition** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **icon-button** - The toggle icon button element */ "nve-accordion": DefineComponent; /** * Organizes many accordions into a cohesive group, enabling coordinated expand/collapse behavior such as single-item expansion. * --- * * * ### **Slots:** * - _default_ - This is a default slot for accordions within the group * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ */ "nve-accordion-group": DefineComponent; /** * An alert group is an element that displays a group of related and important messages in a way that attracts the user's attention without interrupting the user's task. * --- * * * ### **Slots:** * - _default_ - default slot for nve-alert * * ### **CSS Properties:** * - **--gap** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ */ "nve-alert-group": DefineComponent; /** * Alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task. * --- * * * ### **Events:** * - **close** - Dispatched when the alert closes within an alert group. * * ### **Slots:** * - **icon** - Icon slot renders on the left side of the alert. Icons typically represent the alert's status. * - **prefix** - Prefix slot renders between the icon and the content. Prefixes typically represent the alert's status. * - **actions** - Actions render on the right side of the alert. Actions are typically buttons, but can also be links. Use actions for steps the user can take to resolve the alert. * - **content** - Content for large overflow text. * - _default_ - Default content placed inside of the alert. * * ### **CSS Properties:** * - **--gap** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--icon-color** - undefined _(default: undefined)_ * - **--icon-size** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--justify-content** - undefined _(default: undefined)_ * - **--align-items** - undefined _(default: undefined)_ * - **--min-height** - undefined _(default: undefined)_ * - **--text-transform** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ */ "nve-alert": DefineComponent; /** * An avatar group displays a collection of user avatars in a compact and organized layout, showcasing many participants or contributors in a space-efficient way. * --- * * * ### **Slots:** * - _default_ - `nve-avatar` elements that represent the group members. */ "nve-avatar-group": DefineComponent; /** * Avatar represents a user/bot within a UI. Typically with text or image content. * --- * * * ### **Slots:** * - _default_ - Initials, an image, or other content that identifies the represented user or bot. * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ */ "nve-avatar": DefineComponent; /** * A visual indicator that communicates a status description of an associated component. Status badges use short text, color, built in icons for quick recognition and render near the relevant content. * --- * * * ### **Slots:** * - _default_ - Short text that communicates the badge status. * - **prefix-icon** - slot for prefix icon * - **suffix-icon** - slot for suffix icon * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--icon-color** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--text-transform** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ */ "nve-badge": DefineComponent; /** * Breadcrumb is a component that can help users establish their location while navigating a website with complex URLs and navigation paths. * --- * * * ### **Slots:** * - _default_ - default slot for `nve-button` and anchor elements * * ### **CSS Properties:** * - **--gap** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--icon-width** - undefined _(default: undefined)_ * - **--icon-height** - undefined _(default: undefined)_ * - **--text-decoration** - undefined _(default: undefined)_ */ "nve-breadcrumb": DefineComponent; /** * A button group organizes related buttons and can support either mutually exclusive single or multi selection. Prefer usage within toolbars. * --- * * * ### **Slots:** * - _default_ - default slot for `nve-button` or `nve-icon-button` * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ */ "nve-button-group": DefineComponent; /** * A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation. * --- * * * ### **Slots:** * - _default_ - slot for button text content or icon, icon placement depends on whether `icon` appears before or after text content. * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--text-decoration** - undefined _(default: undefined)_ * - **--text-align** - undefined _(default: undefined)_ * - **--cursor** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--text-transform** - undefined _(default: undefined)_ * - **--line-height** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--min-width** - undefined _(default: undefined)_ */ "nve-button": DefineComponent; /** * A container for content representing a single entity. * --- * * * ### **Slots:** * - _default_ - use ``,``,`` for card content layout * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--box-shadow** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ */ "nve-card": DefineComponent; /** * Displays the title and optional actions at the top of a card, establishing the card's identity and purpose. * --- * * * ### **Slots:** * - _default_ - Card title, supporting text, and optional action controls. * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ * - **--border-bottom** - undefined _(default: undefined)_ * - **--line-height** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ */ "nve-card-header": DefineComponent; /** * Contains the primary body content of a card, providing a structured region for the main information or media. * --- * * * ### **Slots:** * - _default_ - This is a default/unnamed slot for card content * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ */ "nve-card-content": DefineComponent; /** * Provides a designated area at the bottom of a card for actions, metadata, or supplementary information. * --- * * * ### **Slots:** * - _default_ - This is a default/unnamed slot for card footer content * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ * - **--border-top** - undefined _(default: undefined)_ */ "nve-card-footer": DefineComponent; /** * A chat message component displays a text message within a conversation, sent between users or bots * --- * * * ### **Slots:** * - _default_ - The message body displayed between the prefix and suffix content. * - **prefix** - for avatar/img content * - **suffix** - for avatar/img content * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--line-height** - undefined _(default: undefined)_ * - **--overflow** - undefined _(default: undefined)_ * - **--top-offset** - Vertical offset for aligning message with avatar _(default: undefined)_ */ "nve-chat-message": DefineComponent; /** * Groups related checkboxes together with a shared label and validation messaging for multi-select form inputs. * --- * * * ### **Slots:** * - _default_ - Control input elements * * ### **CSS Properties:** * - **--color** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-text-transform** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ */ "nve-checkbox-group": DefineComponent; /** * A checkbox is a control that enables users to choose between two distinct mutually exclusive options (checked or unchecked, on or off) through a single click or tap. * --- * * * ### **Events:** * - **reset** * * ### **Methods:** * - **reset()** - Resets control value to initial attribute value and clears any active validation rules. * * ### **Slots:** * - _default_ - Control input element * - **label** - Label element * * ### **CSS Properties:** * - **--cursor** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--border-width** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--border-color** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--check-color** - undefined _(default: undefined)_ * - **--accent-color** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-width** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ * - **--control-width** - undefined _(default: undefined)_ * - **--control-height** - undefined _(default: undefined)_ */ "nve-checkbox": DefineComponent; /** * A color picker is a control that enables users to choose a color value. * --- * * * ### **Events:** * - **reset** * * ### **Methods:** * - **reset()** - Resets control value to initial attribute value and clears any active validation rules. * * ### **Slots:** * - _default_ - Control input element * - **label** - Label element * * ### **CSS Properties:** * - **--cursor** - undefined _(default: undefined)_ * - **--accent-color** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-width** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ * - **--control-width** - undefined _(default: undefined)_ * - **--control-height** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **icon-button** - The eye dropper icon button element */ "nve-color": DefineComponent; /** * An editable combobox with autocomplete behavior and selection support. * --- * * * ### **Events:** * - **create** - Fires when the user confirms a value that doesn't match any existing option and the `behavior-create` attribute exists. `detail: { value }`. * - **scroll** - Fires when the user scrolls the dropdown option list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`. * - **reset** * * ### **Methods:** * - **reset()** - Resets control value to initial attribute value and clears any active validation rules. * - **selectAll()** - Select all options provided * * ### **Slots:** * - _default_ - default slot for an input and a datalist/select element * - **prefix-icon** - slot for icon before the input * - **footer** - slot for dropdown footer content * - **label** - Label element * * ### **CSS Properties:** * - **--scroll-height** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--cursor** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--border-color** - undefined _(default: undefined)_ * - **--max-height** - undefined _(default: undefined)_ * - **--text-transform** - undefined _(default: undefined)_ * - **--accent-color** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-width** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ * - **--control-width** - undefined _(default: undefined)_ * - **--control-height** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **tag** - The tag element for selected items * - **dropdown** - The dropdown popup element * - **menu** - The menu element * - **menu-item** - The menu item elements * - **checkbox** - The checkbox element * - **icon** - The icon element * - **create-option** - The menu item element for creating new options */ "nve-combobox": DefineComponent; /** * A copy button is a button that easily enables the copy to clipboard pattern. * --- * * * ### **Slots:** * - _default_ - Text label displayed before the copy icon. * - **icon** - slot for custom icon * * ### **CSS Properties:** * - **--color** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--min-width** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--line-height** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--text-decoration** - undefined _(default: undefined)_ * - **--text-align** - undefined _(default: undefined)_ * - **--cursor** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--text-transform** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **icon** - The icon element * - **toast** - The toast notification element * - **tooltip** - The tooltip element */ "nve-copy-button": DefineComponent; /** * A date picker is a control that enables users to choose a date value. * --- * * * ### **Events:** * - **reset** * * ### **Methods:** * - **reset()** - Resets control value to initial attribute value and clears any active validation rules. * * ### **Slots:** * - _default_ - Control input element * - **label** - Label element * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--border-bottom** - undefined _(default: undefined)_ * - **--cursor** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--max-width** - undefined _(default: undefined)_ * - **--min-width** - undefined _(default: undefined)_ * - **--accent-color** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-width** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ * - **--control-width** - undefined _(default: undefined)_ * - **--control-height** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **icon-button** - The calendar icon button element */ "nve-date": DefineComponent; /** * A datetime picker is a control that enables users to choose a datetime value. * --- * * * ### **Events:** * - **reset** * * ### **Methods:** * - **reset()** - Resets control value to initial attribute value and clears any active validation rules. * * ### **Slots:** * - _default_ - Control input element * - **label** - Label element * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--border-bottom** - undefined _(default: undefined)_ * - **--cursor** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--max-width** - undefined _(default: undefined)_ * - **--min-width** - undefined _(default: undefined)_ * - **--accent-color** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-width** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ * - **--control-width** - undefined _(default: undefined)_ * - **--control-height** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **icon-button** - The calendar icon button element */ "nve-datetime": DefineComponent; /** * Contains the action buttons and controls at the bottom of a dialog for confirming, canceling, or navigating. * --- * * * ### **Slots:** * - _default_ - default slot for the dialog footer * * ### **CSS Properties:** * - **--border-top** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ */ "nve-dialog-footer": DefineComponent; /** * Displays the title and contextual information at the top of a dialog to orient users to the dialog's purpose. * --- * * * ### **Slots:** * - _default_ - default slot for the dialog header * * ### **CSS Properties:** * - **--border-bottom** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ */ "nve-dialog-header": DefineComponent; /** * Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) * --- * * * ### **Events:** * - **beforetoggle** - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) * - **toggle** - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event) * - **open** - Dispatched when the dialog opens. * - **close** - Dispatched when the dialog closes. * * ### **Slots:** * - _default_ - Dialog body content displayed between the header and footer. * * ### **CSS Properties:** * - **--border** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--box-shadow** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--max-width** - undefined _(default: undefined)_ * - **--min-height** - undefined _(default: undefined)_ * - **--max-height** - undefined _(default: undefined)_ * - **--animation-duration** - Duration of dialog open/close animations _(default: undefined)_ * * ### **CSS Parts:** * - **close-button** - The inner template reference for the close button of the dialog. * - **icon-button** - The icon button element */ "nve-dialog": DefineComponent; /** * Divider is a component that separates and distinguishes sections of content or groups of menuitems. * --- * * * ### **CSS Properties:** * - **--color** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--size** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ */ "nve-divider": DefineComponent; /** * A visual indicator that communicates a status or notification of an associated component. * --- * * * ### **Slots:** * - _default_ - default text content no more than 2 characters in length * * ### **CSS Properties:** * - **--gap** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ */ "nve-dot": DefineComponent; /** * Contains the scrollable main body content within a drawer panel. * --- * * * ### **Slots:** * - _default_ - default slot for the drawer content * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ */ "nve-drawer-content": DefineComponent; /** * Provides a fixed action area at the bottom of a drawer for primary actions such as save or cancel. * --- * * * ### **Slots:** * - _default_ - default slot for the drawer footer * * ### **CSS Properties:** * - **--border-top** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--min-height** - undefined _(default: undefined)_ */ "nve-drawer-footer": DefineComponent; /** * Displays the title and optional close control at the top of a drawer to identify its purpose. * --- * * * ### **Slots:** * - _default_ - default slot for the drawer header * * ### **CSS Properties:** * - **--border-bottom** - undefined _(default: undefined)_ * - **--min-height** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ */ "nve-drawer-header": DefineComponent; /** * Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings). Or use [Panel](./docs/elements/panel/) inline as its content couples with or closely relates to the content on the page (details, extra actions/options). [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) * --- * * * ### **Events:** * - **beforetoggle** - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) * - **toggle** - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event) * - **open** - Dispatched when the drawer opens. * - **close** - Dispatched when the drawer closes. * * ### **Slots:** * - _default_ - Drawer body content displayed between the header and footer. * * ### **CSS Properties:** * - **--border** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--box-shadow** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--top** - undefined _(default: undefined)_ * - **--max-width** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--animation-duration** - Duration of drawer open/close animations _(default: undefined)_ * * ### **CSS Parts:** * - **icon-button** - The close icon button element */ "nve-drawer": DefineComponent; /** * A Dropdown Group streamlines the management of linked dropdowns and supports nested dropdowns for a more organized and intuitive user experience * --- * * * ### **Events:** * - **open** - Dispatched when a dropdown in the group opens * - **close** - Dispatched when a dropdown in the group closes * * ### **Methods:** * - **close()** - Closes every descendant dropdown in the group. * * ### **Slots:** * - _default_ - default slot for dropdown content * * ### **CSS Properties:** * - **--arrow-transform** - Transform applied to the popover arrow _(default: undefined)_ */ "nve-dropdown-group": DefineComponent; /** * Provides a fixed area at the bottom of a dropdown menu for extra actions or supplementary controls. * --- * * * ### **Slots:** * - _default_ - default slot for the dropdown footer * * ### **CSS Properties:** * - **--border-top** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ */ "nve-dropdown-footer": DefineComponent; /** * Displays a title or contextual label at the top of a dropdown menu to categorize its contents. * --- * * * ### **Slots:** * - _default_ - default slot for the dropdown header * * ### **CSS Properties:** * - **--border-bottom** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ */ "nve-dropdown-header": DefineComponent; /** * Generic dropdown element for rendering a variety of different content such as interactive navigation or form controls. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) * --- * * * ### **Events:** * - **beforetoggle** - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) * - **toggle** - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event) * - **open** - Dispatched when the dropdown opens. * - **close** - Dispatched when the dropdown closes. * * ### **Slots:** * - _default_ - default slot for dropdown content * * ### **CSS Properties:** * - **--border** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--box-shadow** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--min-width** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--arrow-transform** - Transform applied to the popover arrow _(default: undefined)_ * - **--animation-duration** - Duration of dropdown open/close animations _(default: undefined)_ * * ### **CSS Parts:** * - **icon-button** - The close icon button element */ "nve-dropdown": DefineComponent; /** * A dropzone form control that enables users to drag and drop files onto it. * --- * * * ### **Events:** * - **change** - Dispatched when the value has changed (files located in event.target) * * ### **Methods:** * - **reportValidity()** - Reports whether the control satisfies its constraints. * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity * - **checkValidity()** - Checks whether the control satisfies its constraints. * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity * - **setCustomValidity()** - Sets a custom validation message. * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity * - **reset()** - Resets the control value to its initial value. * * ### **Slots:** * - _default_ - Custom messaging that replaces the default upload instructions. * - **icon** - Custom icon that replaces the default upload icon. * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--border-color** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--min-height** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **icon** - The upload icon element */ "nve-dropzone": DefineComponent; /** * A file picker is a control that enables users to choose a file value. * --- * * * ### **Events:** * - **reset** * * ### **Methods:** * - **reset()** - Resets control value to initial attribute value and clears any active validation rules. * * ### **Slots:** * - _default_ - Control input element * - **label** - Label element * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--text-decoration** - undefined _(default: undefined)_ * - **--cursor** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--accent-color** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-width** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ * - **--control-width** - undefined _(default: undefined)_ * - **--control-height** - undefined _(default: undefined)_ */ "nve-file": DefineComponent; /** * Formats a date/time value as localized text using the Intl.DateTimeFormat API. Renders inside a semantic time element. * Granular options (weekday, year, month, day, hour, minute, second) mirror the Intl.DateTimeFormat API. 'numeric' omits zero-padding, '2-digit' zero-pads. * --- * * * ### **Slots:** * - _default_ - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration. */ "nve-format-datetime": DefineComponent; /** * A localized number formatter for currencies, percentages, units, and compact notation, backed by Intl.NumberFormat. * Provide a `currency` attribute when `formatStyle` is `currency`, and a `unit` attribute when `formatStyle` is `unit`. * --- * * * ### **Slots:** * - _default_ - Numeric string to format (such as 1234567 or 1234.56). Serves as fallback before hydration. */ "nve-format-number": DefineComponent; /** * Formats a date/time value as localized relative text using the Intl.RelativeTimeFormat API. Renders inside a semantic time element. * Options mirror the Intl.RelativeTimeFormat API. When unit is 'auto', the component selects the best unit based on the time difference. * --- * * * ### **Slots:** * - _default_ - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration. */ "nve-format-relative-time": DefineComponent; /** * Groups many related form controls under a shared label and validation context for semantically linked inputs. * --- * * * ### **Slots:** * - _default_ - Control input elements * * ### **CSS Properties:** * - **--color** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-text-transform** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ */ "nve-control-group": DefineComponent; /** * Defining a Validity State on a control-message allows messages to show conditionally based on the current HTML5 validity state. * --- * * * ### **Slots:** * - _default_ - Validation or supporting message text for the associated control. * * ### **CSS Properties:** * - **--color** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **icon** - The icon element */ "nve-control-message": DefineComponent; /** * Wraps a form input with its associated label and validation messages, managing layout and accessibility associations. * --- * * * ### **Events:** * - **reset** * * ### **Methods:** * - **reset()** - Resets control value to initial attribute value and clears any active validation rules. * * ### **Slots:** * - _default_ - Control input element * - **label** - Label element * * ### **CSS Properties:** * - **--cursor** - undefined _(default: undefined)_ * - **--accent-color** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-width** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ * - **--control-width** - undefined _(default: undefined)_ * - **--control-height** - undefined _(default: undefined)_ */ "nve-control": DefineComponent; /** * Use a gauge to show system resource usage. * --- * * * ### **Slots:** * - _default_ - Content to display in the gauge center. * * ### **CSS Properties:** * - **--track-width** - undefined _(default: undefined)_ * - **--accent-color** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--needle-background** - undefined _(default: undefined)_ * - **--track-background** - undefined _(default: undefined)_ * - **--thumb-background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ */ "nve-gauge": DefineComponent; /** * Represents an individual data cell within a grid row, displaying content aligned to its parent column. * --- * * * ### **Slots:** * - _default_ - Data or interactive controls displayed within the cell. * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--min-height** - undefined _(default: undefined)_ * - **--min-width** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--border-left** - undefined _(default: undefined)_ * - **--border-right** - undefined _(default: undefined)_ * - **--justify-content** - undefined _(default: undefined)_ */ "nve-grid-cell": DefineComponent; /** * Defines a column header within a grid, specifying the column's label, width, and alignment for all cells beneath it. * --- * * * ### **Events:** * - **nve-grid-column-resize** * * ### **Slots:** * - _default_ - Column heading text or controls. * - **actions** - slot for column actions * * ### **CSS Properties:** * - **--color** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--min-width** - undefined _(default: undefined)_ * - **--justify-content** - undefined _(default: undefined)_ * - **--border-left** - undefined _(default: undefined)_ * - **--border-right** - undefined _(default: undefined)_ */ "nve-grid-column": DefineComponent; /** * Grid footer displays contextual information or user actions such as pagination. * --- * * * ### **Slots:** * - _default_ - Grid summary, pagination, or other footer controls. * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ */ "nve-grid-footer": DefineComponent; /** * A versatile table/datagrid component with built-in keyboard navigation for displaying and interacting with structured data. Use it for anything from simple read-only tables to fully interactive, spreadsheet experiences. * --- * * * ### **Methods:** * - **scrollTo(options: _ScrollToOptions_): _Promise_** - Scroll to a specific position in the grid. * * ### **Slots:** * - _default_ - `nve-grid-header`, `nve-grid-row`, and `nve-grid-placeholder` elements. * - **footer** - slot for grid-footer or toolbar * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--box-shadow** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--row-height** - fixed height of each row _(default: undefined)_ * - **--scroll-height** - height of the scrollable area _(default: undefined)_ */ "nve-grid": DefineComponent; /** * Contains the column headers of a grid, managing column widths and providing structural context for the data rows below. * --- * * * ### **Slots:** * - _default_ - default slot for `nve-grid-column` * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--border-bottom** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ */ "nve-grid-header": DefineComponent; /** * Placeholder displays a message while data loads for the grid or shows empty states for datasets. * --- * * * ### **Slots:** * - _default_ - Loading or empty-state message displayed in place of grid rows. * * ### **CSS Properties:** * - **--color** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ */ "nve-grid-placeholder": DefineComponent; /** * Represents a horizontal row of data cells within a grid, supporting selection and interactive states. * --- * * * ### **Slots:** * - _default_ - default slot for `nve-grid-cell` * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--border-bottom** - undefined _(default: undefined)_ */ "nve-grid-row": DefineComponent; /** * An icon button is a button that displays only an icon without a visual label. * --- * * * ### **Slots:** * - _default_ - default slot for custom icons * * ### **CSS Properties:** * - **--border-radius** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--line-height** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--text-decoration** - undefined _(default: undefined)_ * - **--text-align** - undefined _(default: undefined)_ * - **--cursor** - undefined _(default: undefined)_ * - **--text-transform** - undefined _(default: undefined)_ * - **--min-width** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **icon** - The icon element */ "nve-icon-button": DefineComponent; /** * An icon is a graphic symbol designed to visually show the purpose of an interface element. * --- * * * ### **Slots:** * - _default_ - Custom SVG content to override the named icon * * ### **CSS Properties:** * - **--color** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ */ "nve-icon": DefineComponent; /** * Visually combines many related input controls into a unified composite field with shared styling. * --- * * * ### **Slots:** * - _default_ - Control input elements * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-text-transform** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ */ "nve-input-group": DefineComponent; /** * An input is a control that enables users to enter text. * --- * * * ### **Events:** * - **reset** * * ### **Methods:** * - **reset()** - Resets control value to initial attribute value and clears any active validation rules. * * ### **Slots:** * - _default_ - Control input element * - **label** - Label element * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--cursor** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--min-width** - undefined _(default: undefined)_ * - **--max-width** - undefined _(default: undefined)_ * - **--border-bottom** - undefined _(default: undefined)_ * - **--box-shadow** - undefined _(default: undefined)_ * - **--accent-color** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-width** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ * - **--control-width** - undefined _(default: undefined)_ * - **--control-height** - undefined _(default: undefined)_ */ "nve-input": DefineComponent; /** * A visual indicator for a brand or application. * --- * * * ### **Slots:** * - _default_ - Text, an image, or other visual content representing the brand or application. * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ */ "nve-logo": DefineComponent; /** * Represents a selectable option within a menu, providing an interactive button for navigation or actions. * --- * * * ### **Slots:** * - _default_ - Label and supporting content for the menu option. * - **suffix** - slot for suffix icon * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--border-background** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--min-height** - undefined _(default: undefined)_ * - **--line-height** - undefined _(default: undefined)_ * - **--cursor** - undefined _(default: undefined)_ * - **--opacity** - undefined _(default: undefined)_ * - **--text-transform** - undefined _(default: undefined)_ */ "nve-menu-item": DefineComponent; /** * A menu offers a list of choices to the user, such as a set of actions or functions. Choosing an item in a menu typically opens a sub menu, or invokes a command. * --- * * * ### **Events:** * - **scroll** - Fires when the user scrolls the menu list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`. * * ### **Slots:** * - _default_ - default slot for `nve-menu-item` * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--max-width** - undefined _(default: undefined)_ * - **--min-width** - undefined _(default: undefined)_ * - **--max-height** - undefined _(default: undefined)_ */ "nve-menu": DefineComponent; /** * A month picker is a control that enables users to choose a month value. * --- * * * ### **Events:** * - **reset** * * ### **Methods:** * - **reset()** - Resets control value to initial attribute value and clears any active validation rules. * * ### **Slots:** * - _default_ - Control input element * - **label** - Label element * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--cursor** - undefined _(default: undefined)_ * - **--accent-color** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-width** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ * - **--control-width** - undefined _(default: undefined)_ * - **--control-height** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **icon-button** - The calendar icon button element */ "nve-month": DefineComponent; /** * Displays real time updates without interrupting the user's workflow to communicate an important message or status. * --- * * * ### **Slots:** * - _default_ - default slot for `nve-notification` * * ### **CSS Properties:** * - **--box-shadow** - undefined _(default: undefined)_ * - **--animation-duration** - Duration of notification group open/close animations _(default: undefined)_ */ "nve-notification-group": DefineComponent; /** * Displays real time updates without interrupting the user's workflow to communicate an important message or status. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) * --- * * * ### **Events:** * - **close** - Dispatched when the notification closes. * - **beforetoggle** - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) * - **toggle** - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event) * - **open** - Dispatched when the notification opens. * * ### **Slots:** * - _default_ - The message communicated by the notification. * - **icon** - content slot for the status icon * * ### **CSS Properties:** * - **--border-radius** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--box-shadow** - undefined _(default: undefined)_ * - **--min-width** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--max-width** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--status-border** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--status-color** - undefined _(default: undefined)_ * - **--animation-duration** - Duration of notification open/close animations _(default: undefined)_ * * ### **CSS Parts:** * - **status-icon** - The status icon element * - **icon-button** - The close icon button element */ "nve-notification": DefineComponent; /** * An element that appears across the top of all pages containing the application name and primary navigation. * --- * * * ### **Slots:** * - _default_ - The default content slot * - **prefix** - Content displayed at the start of the header * - **suffix** - Content displayed at the end of the header * * ### **CSS Properties:** * - **--background** - Background color of the header _(default: undefined)_ * - **--padding** - Padding inside the header _(default: undefined)_ * - **--border-bottom** - Border below the header _(default: undefined)_ * - **--gap** - Gap between the prefix, default, and suffix slots _(default: undefined)_ * - **--margin-inline** - left and right margin applied to the default content slot _(default: undefined)_ */ "nve-page-header": DefineComponent; /** * Page Loader is a full-screen version of the `progress-ring` component, for use when the page should remain unusable as the loader displays. * --- * * * ### **Slots:** * - _default_ - Loading status text displayed with the progress indicator. * * ### **CSS Properties:** * - **--gap** - undefined _(default: undefined)_ * - **--animation-duration** - Duration of page loader open/close animations _(default: undefined)_ * * ### **CSS Parts:** * - **progress-ring** - The progress ring element */ "nve-page-loader": DefineComponent; /** * Contains the scrollable main body content within a page panel region. * --- * * * ### **Slots:** * - _default_ - default slot for the page-panel content * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ */ "nve-page-panel-content": DefineComponent; /** * Provides a fixed action area at the bottom of a page panel for persistent controls or status information. * --- * * * ### **Slots:** * - _default_ - default slot for the page-panel footer * * ### **CSS Properties:** * - **--border-top** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--min-height** - undefined _(default: undefined)_ */ "nve-page-panel-footer": DefineComponent; /** * Displays the title and contextual controls at the top of a page panel to identify its purpose. * --- * * * ### **Slots:** * - _default_ - default slot for the page panel header * * ### **CSS Properties:** * - **--border-bottom** - undefined _(default: undefined)_ * - **--min-height** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ */ "nve-page-panel-header": DefineComponent; /** * Child panel for embedded panels within the page component. Typically used for left/right/bottom page slot positions. * --- * * * ### **Events:** * - **open** - Dispatched after an invoker command removes `hidden` and opens the panel. * - **close** - Dispatched after an invoker command sets `hidden` and closes the panel. * * ### **Slots:** * - _default_ - `nve-page-panel-content` elements that provide the panel body. * - **actions** - slot for action / dismiss buttons * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--max-width** - undefined _(default: undefined)_ * - **--max-height** - undefined _(default: undefined)_ * - **--animation-duration** - Duration of panel open/close animations _(default: undefined)_ */ "nve-page-panel": DefineComponent; /** * Provide a consistent page structure across the applications, ensuring a seamless user experience. * --- * * * ### **Slots:** * - _default_ - The central content area of the page, where the primary focus of the user's attention should be. * - **header** - The topmost section of the page, typically containing navigation, branding, or other global elements. * - **subheader** - A secondary section below the header, often used for breadcrumbs, filters, or other contextual information. * - **left-aside** - A narrow section on the left side of the page, commonly used for navigation, filters, or other secondary content. * - **left** - The main content area on the left side of the page, typically containing primary navigation or features. * - **bottom** - A section for extra tooling outputs such as console outputs. * - **right** - The main content area on the right side of the page, typically containing secondary navigation or features. * - **right-aside** - A narrow section on the right side of the page, commonly used for navigation, filters, or other secondary content. * - **subfooter** - A secondary section below the main content area, often used for more information or calls to action. * - **footer** - The bottommost section of the page, typically containing global elements, such as copyright information. * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--box-shadow** - undefined _(default: undefined)_ * - **--min-height** - undefined _(default: undefined)_ */ "nve-page": DefineComponent; /** * Pagination is a control that enables users to navigate through pages of content. * --- * * * ### **Events:** * - **step-change** - Dispatched after the page size changes with the current page size in `detail`. The event bubbles and crosses shadow boundaries. * - **last-page** - Dispatched when the last page is active * - **first-page** - Dispatched when the first page is active * - **input** - Dispatched when the value (page) has changed * - **change** - Dispatched when the value (page) has changed * * ### **Methods:** * - **reportValidity()** - Reports whether the control satisfies its constraints. * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity * - **checkValidity()** - Checks whether the control satisfies its constraints. * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity * - **setCustomValidity()** - Sets a custom validation message. * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity * - **reset()** - Resets the control value to its initial value. * * ### **Slots:** * - **suffix-label** - Overrides the "of total" label when the total is an approximation. * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **icon-button** - Base part applied to all icon button elements * - **previous-icon-button** - The previous page icon button * - **next-icon-button** - The next page icon button * - **start-icon-button** - The first page icon button * - **end-icon-button** - The last page icon button * - **select** - The page size select element */ "nve-pagination": DefineComponent; /** * @deprecated use `nve-page-panel-header` with `nve-page-panel` instead * * Displays the title, subtitle, and optional action controls at the top of a panel. * --- * * * ### **Slots:** * - _default_ - default content slot * - **title** - Title Text * - **subtitle** - Subtitle Text * - **action-icon** - Extra Action Button * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ * - **--border-bottom** - undefined _(default: undefined)_ */ "nve-panel-header": DefineComponent; /** * @deprecated use `nve-page-panel-content` with `nve-page-panel` instead * * Contains the main body content within a panel, providing a structured region for detailed information. * --- * * * ### **Slots:** * - _default_ - This is a default/unnamed slot for panel content * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ */ "nve-panel-content": DefineComponent; /** * @deprecated use `nve-page-panel-footer` with `nve-page-panel` instead * * Provides a designated area at the bottom of a panel for actions or supplementary controls. * --- * * * ### **Slots:** * - _default_ - This is a default/unnamed slot for panel footer content * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ * - **--border-top** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ */ "nve-panel-footer": DefineComponent; /** * @deprecated use `nve-page-panel` with `nve-page` instead * * Panel is inline container for content that couples to the content on the page (details, extra actions/options). Or [Drawer](./docs/elements/drawer/) is out of context of the rest of the page (notifications, navigations, settings). * --- * * * ### **Events:** * - **open** - Dispatched when the panel opens. * - **close** - Dispatched when the panel closes. * * ### **Slots:** * - _default_ - This is a default/unnamed slot for panel content * - **header** - header element (Use `panel-header` or custom content) * - **content** - content element (Use `panel-content` or custom content) * - **footer** - footer element (Use `panel-footer` or custom content) * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--box-shadow** - undefined _(default: undefined)_ * - **--panel-button-border-radius** - Border radius of the panel expand/collapse button _(default: undefined)_ * * ### **CSS Parts:** * - **icon-button** - The expand/collapse icon button element */ "nve-panel": DefineComponent; /** * A password is a control that enables users to enter password text. * --- * * * ### **Events:** * - **reset** * * ### **Methods:** * - **reset()** - Resets control value to initial attribute value and clears any active validation rules. * * ### **Slots:** * - _default_ - Control input element * - **label** - Label element * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--cursor** - undefined _(default: undefined)_ * - **--accent-color** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-width** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ * - **--control-width** - undefined _(default: undefined)_ * - **--control-height** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **icon-button** - The visibility toggle icon button element */ "nve-password": DefineComponent; /** * A preferences input is a widget for controlling apperance. Stylesheets register to the preferences input by including a css-property, see Standard for an example. * --- * * * ### **Events:** * - **input** - Dispatched when the value has changed * - **change** - Dispatched when the value has changed * * ### **Methods:** * - **reportValidity()** - Reports whether the control satisfies its constraints. * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity * - **checkValidity()** - Checks whether the control satisfies its constraints. * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity * - **setCustomValidity()** - Sets a custom validation message. * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity * - **reset()** - Resets the control value to its initial value. * * ### **CSS Properties:** * - **--color** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **control** - The control wrapper elements that contain the labels and menus * - **menu** - The menu elements that display color scheme and scale options * - **menu-item** - The individual menu item elements for each selectable option * - **icon** - The icon element displayed next to color scheme options * - **divider** - The divider elements that separate preference sections * - **switch** - The switch element for the reduced motion toggle */ "nve-preferences-input": DefineComponent; /** * A progress bar is a visual indicator of the status of a running task. Under the hood, the component uses the native HTML `progress` element to achieve proper a11y concerns. * --- * * * ### **CSS Properties:** * - **--height** - undefined _(default: undefined)_ * - **--opacity** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--accent-color** - undefined _(default: undefined)_ * - **--indeterminate-gradient** - Gradient used for indeterminate state animation _(default: undefined)_ */ "nve-progress-bar": DefineComponent; /** * The `progress-ring` component shows the status of a pending task. It also serves the basis of the page loading element. * --- * * * ### **Slots:** * - _default_ - Content to display in the ring center. Defaults to a status icon. * * ### **CSS Properties:** * - **--background-color** - undefined _(default: undefined)_ * - **--ring-color** - undefined _(default: undefined)_ * - **--ring-background-opacity** - undefined _(default: undefined)_ * - **--ring-width** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--animation-duration** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **icon** - The icon element */ "nve-progress-ring": DefineComponent; /** * A filter chip is a control that enables users to select many options from a set of choices. * --- * * * ### **Events:** * - **close** - Dispatched when the filter chip closes. * * ### **Slots:** * - _default_ - `input`, `select`, `nve-button`, or other `[nve-control]` elements used to build the filter. * * ### **CSS Properties:** * - **--gap** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **select** - The select element * - **date** - The date input element * - **input** - The input element * - **icon-button** - The icon button element */ "nve-progressive-filter-chip": DefineComponent; /** * Pulse component signals attention for a particular area of a UI. This helps with tutorial/getting started guides for new users. * --- * * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--animation-duration** - undefined _(default: undefined)_ */ "nve-pulse": DefineComponent; /** * Groups related radio buttons together with a shared label and validation messaging for single-select form inputs. * --- * * * ### **Slots:** * - _default_ - Control input elements * * ### **CSS Properties:** * - **--color** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-text-transform** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ */ "nve-radio-group": DefineComponent; /** * A radio button is a control that enables users to choose one option from a list of mutually exclusive options. * --- * * * ### **Events:** * - **reset** * * ### **Methods:** * - **reset()** - Resets control value to initial attribute value and clears any active validation rules. * * ### **Slots:** * - _default_ - Control input element * - **label** - Label element * * ### **CSS Properties:** * - **--cursor** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--border-width** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--border-color** - undefined _(default: undefined)_ * - **--radio-color** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--accent-color** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-width** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ * - **--control-width** - undefined _(default: undefined)_ * - **--control-height** - undefined _(default: undefined)_ */ "nve-radio": DefineComponent; /** * A range slider is a control that enables users to choose a value from a continuous range of values. * --- * * * ### **Events:** * - **reset** * * ### **Methods:** * - **reset()** - Resets control value to initial attribute value and clears any active validation rules. * * ### **Slots:** * - _default_ - Control input element * - **label** - Label element * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--control-height** - undefined _(default: undefined)_ * - **--cursor** - undefined _(default: undefined)_ * - **--track-width** - undefined _(default: undefined)_ * - **--track-height** - undefined _(default: undefined)_ * - **--track-border-radius** - undefined _(default: undefined)_ * - **--track-background** - undefined _(default: undefined)_ * - **--thumb-width** - undefined _(default: undefined)_ * - **--thumb-height** - undefined _(default: undefined)_ * - **--thumb-background** - undefined _(default: undefined)_ * - **--thumb-border** - undefined _(default: undefined)_ * - **--accent-color** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-width** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ * - **--control-width** - undefined _(default: undefined)_ */ "nve-range": DefineComponent; /** * A resize-handle slider is a control that enables users to resize views or panels vertically or horizontally. * --- * * * ### **Events:** * - **toggle** - Dispatched when the resize handle is double clicked. * * ### **Methods:** * - **reportValidity()** - Reports whether the control satisfies its constraints. * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity * - **checkValidity()** - Checks whether the control satisfies its constraints. * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity * - **setCustomValidity()** - Sets a custom validation message. * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity * - **reset()** - Resets the control value to its initial value. * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--line-width** - undefined _(default: undefined)_ * - **--target-size** - undefined _(default: undefined)_ * - **--cursor** - undefined _(default: undefined)_ */ "nve-resize-handle": DefineComponent; /** * A search is a control that enables users to enter text to search. * --- * * * ### **Events:** * - **reset** * * ### **Methods:** * - **reset()** - Resets control value to initial attribute value and clears any active validation rules. * * ### **Slots:** * - _default_ - Control input element * - **label** - Label element * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--cursor** - undefined _(default: undefined)_ * - **--accent-color** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-width** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ * - **--control-width** - undefined _(default: undefined)_ * - **--control-height** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **icon-button** - The icon button element */ "nve-search": DefineComponent; /** * A select is a control that enables users to select an option from a list of options. * --- * * * ### **Events:** * - **reset** * * ### **Methods:** * - **reset()** - Resets control value to initial attribute value and clears any active validation rules. * * ### **Slots:** * - _default_ - Select input element * - **label** - Label element * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--border-bottom** - undefined _(default: undefined)_ * - **--cursor** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--text-align** - undefined _(default: undefined)_ * - **--scroll-height** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--control-width** - undefined _(default: undefined)_ * - **--max-width** - undefined _(default: undefined)_ * - **--min-width** - undefined _(default: undefined)_ * - **--box-shadow** - undefined _(default: undefined)_ * - **--max-height** - undefined _(default: undefined)_ * - **--text-transform** - undefined _(default: undefined)_ * - **--accent-color** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-width** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ * - **--control-height** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **tag** - undefined * - **menu** - The dropdown menu element * - **menu-item** - The menu item elements * - **icon** - The icon element * - **caret** - The caret/chevron icon element * - **dropdown** - The dropdown popup element */ "nve-select": DefineComponent; /** * A loading placeholder component that displays animated placeholder shapes while content loads. * --- * * * ### **Slots:** * - _default_ - Loaded content that replaces the placeholder when provided. * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--min-height** - undefined _(default: undefined)_ */ "nve-skeleton": DefineComponent; /** * A sort button is a control that enables users to sort a list of items in ascending or descending order. * --- * * * ### **Events:** * - **sort** - Dispatched on activation with `detail: { value, next }`, where `value` is the current sort and `next` follows the cycle `none` → `ascending` → `descending` → `none`. * * ### **CSS Properties:** * - **--width** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **icon** - The icon element */ "nve-sort-button": DefineComponent; /** * A sparkline is a compact, word-sized chart with typographic scale, for data-dense layouts (text, tables, cards, dashboards). * --- * * * ### **CSS Properties:** * - **--height** - Height (defaults to 1em and scales with parent font-size). _(default: undefined)_ * - **--line-color** - undefined _(default: undefined)_ * - **--line-width** - undefined _(default: undefined)_ * - **--fill-color** - Color used by area and column marks. _(default: undefined)_ * - **--gradient-max-color** - undefined _(default: undefined)_ * - **--gradient-min-color** - undefined _(default: undefined)_ * - **--zero-line-color** - undefined _(default: undefined)_ * - **--zero-line-width** - undefined _(default: undefined)_ * - **--win-color** - Color used to represent positive values (wins). _(default: undefined)_ * - **--loss-color** - Color used to represent negative values (losses). _(default: undefined)_ * - **--draw-color** - Color used to represent zero values (draws / neutral outcomes). _(default: undefined)_ * - **--symbol-color** - undefined _(default: undefined)_ * - **--symbol-border-color** - undefined _(default: undefined)_ * - **--symbol-border-width** - undefined _(default: undefined)_ * - **--symbol-radius** - symbol circle radius in SVG units. _(default: undefined)_ */ "nve-sparkline": DefineComponent; /** * A star rating component lets users rate something using stars, providing a quick visual representation of feedback * --- * * * ### **Events:** * - **reset** * * ### **Methods:** * - **reset()** - Resets control value to initial attribute value and clears any active validation rules. * * ### **Slots:** * - _default_ - Control input element * - **label** - Label element * * ### **CSS Properties:** * - **--star-size** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--stroke-color** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--cursor** - undefined _(default: undefined)_ * - **--accent-color** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-width** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ * - **--control-width** - undefined _(default: undefined)_ * - **--control-height** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **icon** - The icon element */ "nve-star-rating": DefineComponent; /** * Represents an individual step within a multi-step workflow, displaying its status and enabling navigation within the parent steps component. * --- * * * ### **Slots:** * - _default_ - default slot for step text * - **status-icon** - custom slotted step icon * * ### **CSS Properties:** * - **--font-size** - undefined _(default: undefined)_ * - **--border-top** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--text-transform** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **icon-button** - The icon button element * - **progress-ring** - The progress ring element */ "nve-steps-item": DefineComponent; /** * Steps enables a multi-step workflow allowing a user to complete a goal in a specific sequence. * --- * * * ### **Slots:** * - _default_ - default slot for steps-item * * ### **CSS Properties:** * - **--gap** - undefined _(default: undefined)_ */ "nve-steps": DefineComponent; /** * A switch group is a container for a group of switches. * --- * * * ### **Slots:** * - _default_ - Control input elements * * ### **CSS Properties:** * - **--color** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-text-transform** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ */ "nve-switch-group": DefineComponent; /** * A switch is a control that enables users to switch between two mutually exclusive options (on or off, checked or unchecked) through a single click or tap. * --- * * * ### **Events:** * - **reset** * * ### **Methods:** * - **reset()** - Resets control value to initial attribute value and clears any active validation rules. * * ### **Slots:** * - _default_ - Control input element * - **label** - Label element * * ### **CSS Properties:** * - **--cursor** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--border-width** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--anchor-width** - undefined _(default: undefined)_ * - **--anchor-height** - undefined _(default: undefined)_ * - **--anchor-border-radius** - undefined _(default: undefined)_ * - **--anchor-background** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--accent-color** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-width** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ * - **--control-width** - undefined _(default: undefined)_ * - **--control-height** - undefined _(default: undefined)_ */ "nve-switch": DefineComponent; /** * Coordinates tabs with matching panel content using Invoker Commands and slot-matched panels. * --- * * * ### **Events:** * - **select** - Dispatched when the selected tab value changes after an invoker `--toggle` updates selection * * ### **Slots:** * - _default_ - Default slot for a single nve-tabs element. Do not use behavior-select on nve-tabs when using this group. * - **value** - Named panel content where the slot name matches a nve-tabs-item value. * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ */ "nve-tabs-group": DefineComponent; /** * Represents an individual tab within a tablist, providing a selectable button for switching between content views. * --- * * * ### **Slots:** * - _default_ - The label displayed for the tab. * * ### **CSS Properties:** * - **--font-size** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--cursor** - undefined _(default: undefined)_ * - **--text-transform** - undefined _(default: undefined)_ */ "nve-tabs-item": DefineComponent; /** * Tabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context. * --- * * * ### **Slots:** * - _default_ - default slot for tab-item * * ### **CSS Properties:** * - **--gap** - undefined _(default: undefined)_ * - **--indicator-background** - undefined _(default: undefined)_ * - **--indicator-border-radius** - undefined _(default: undefined)_ * - **--indicator-height** - undefined _(default: undefined)_ * - **--border-inset** - undefined _(default: undefined)_ */ "nve-tabs": DefineComponent; /** * A interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations. * --- * * * ### **Slots:** * - _default_ - Text or other content that identifies the category or group. * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--cursor** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--max-width** - undefined _(default: undefined)_ * - **--text-decoration** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **icon** - The icon element */ "nve-tag": DefineComponent; /** * A textarea is a control that enables users to enter and edit text. * --- * * * ### **Events:** * - **reset** * * ### **Methods:** * - **reset()** - Resets control value to initial attribute value and clears any active validation rules. * * ### **Slots:** * - _default_ - Control input element * - **label** - Label element * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--min-height** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--cursor** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--accent-color** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-width** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ * - **--control-width** - undefined _(default: undefined)_ * - **--control-height** - undefined _(default: undefined)_ */ "nve-textarea": DefineComponent; /** * A time picker is a control that enables users to choose a time value. * --- * * * ### **Events:** * - **reset** * * ### **Methods:** * - **reset()** - Resets control value to initial attribute value and clears any active validation rules. * * ### **Slots:** * - _default_ - Control input element * - **label** - Label element * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--cursor** - undefined _(default: undefined)_ * - **--accent-color** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-width** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ * - **--control-width** - undefined _(default: undefined)_ * - **--control-height** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **icon-button** - The clock icon button element */ "nve-time": DefineComponent; /** * A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) * --- * * * ### **Events:** * - **beforetoggle** - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) * - **toggle** - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event) * - **open** - Dispatched when the toast opens. * - **close** - Dispatched when the toast closes. * * ### **Slots:** * - _default_ - The message communicated by the toast. * - **prefix** - custom status icon slot * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ * - **--justify-content** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--box-shadow** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--animation-duration** - Duration of toast open/close animations _(default: undefined)_ * * ### **CSS Parts:** * - **prefix-icon** - The prefix icon slot * - **icon-button** - The close icon button element */ "nve-toast": DefineComponent; /** * Provides a designated area at the bottom of a toggletip for actions or supplementary information. * --- * * * ### **Slots:** * - _default_ - default slot for the toggletip footer * * ### **CSS Properties:** * - **--border-top** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ */ "nve-toggletip-footer": DefineComponent; /** * Displays a title or contextual label at the top of a toggletip to categorize its contents. * --- * * * ### **Slots:** * - _default_ - default slot for the toggletip header * * ### **CSS Properties:** * - **--border-bottom** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ */ "nve-toggletip-header": DefineComponent; /** * Generic toggletip element for rendering a variety of different interactive content. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) * --- * * * ### **Events:** * - **beforetoggle** - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) * - **toggle** - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event) * - **open** - Dispatched when the toggletip opens. * - **close** - Dispatched when the toggletip closes. * * ### **Slots:** * - _default_ - default slot for toggletip content * * ### **CSS Properties:** * - **--arrow-transform** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--box-shadow** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--min-width** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--animation-duration** - Duration of toggletip open/close animations _(default: undefined)_ * * ### **CSS Parts:** * - **icon-button** - The close icon button element */ "nve-toggletip": DefineComponent; /** * A toolbar is a container for grouping a set of controls, such as buttons, icon buttons and combobox search. * --- * * * ### **Slots:** * - _default_ - Primary buttons, inputs, and other toolbar controls. * - **prefix** - slot for prefix content * - **suffix** - slot for suffix content * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--min-height** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--gap** - undefined _(default: undefined)_ * - **--border-bottom** - undefined _(default: undefined)_ * - **--box-shadow** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ */ "nve-toolbar": DefineComponent; /** * A contextual popup that displays a plaintext description. Tooltips are [triggered](https://w3c.github.io/aria/#tooltip) by hovering, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) * --- * * * ### **Events:** * - **beforetoggle** - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) * - **toggle** - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event) * - **open** - Dispatched when the tooltip opens. * - **close** - Dispatched when the tooltip closes. * * ### **Slots:** * - _default_ - Noninteractive text or other descriptive content shown in the tooltip. * * ### **CSS Properties:** * - **--border-radius** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--padding** - undefined _(default: undefined)_ * - **--box-shadow** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--arrow-transform** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--animation-duration** - Duration of tooltip open/close animations _(default: undefined)_ * * ### **CSS Parts:** * - **arrow** - undefined */ "nve-tooltip": DefineComponent; /** * A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children. * --- * * * ### **Events:** * - **open** - Dispatched when the node opens. * - **close** - Dispatched when the node closes. * - **select** - Dispatched when the node selection state changes. * * ### **Methods:** * - **open()** - opens and sets the expanded state automatically if behaviorExpand is true * - **close()** - closes and sets the expanded state automatically if behaviorExpand is true * * ### **Slots:** * - _default_ - Use default slot for basic text content or nested elements. * - **content** - Use only for extended long form content containing interactive elements or form inputs. * * ### **CSS Properties:** * - **--color** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--min-height** - undefined _(default: undefined)_ * - **--text-wrap** - undefined _(default: undefined)_ * - **--font-weight** - undefined _(default: undefined)_ * - **--width** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **icon-button** - The icon button element * - **icon** - The icon element * - **checkbox** - The checkbox element */ "nve-tree-node": DefineComponent; /** * A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children. * --- * * * ### **Events:** * - **open** - Dispatched from a child nve-tree-node when opened. * - **close** - Dispatched from a child nve-tree-node when closed. * - **select** - Dispatched from a child nve-tree-node when its selection state changes. * * ### **Slots:** * - _default_ - tree nodes * * ### **CSS Properties:** * - **--max-width** - undefined _(default: undefined)_ * - **--node-border** - Border style for tree node depth indicator _(default: undefined)_ */ "nve-tree": DefineComponent; /** * A week picker is a control that enables users to choose a week value. * --- * * * ### **Events:** * - **reset** * * ### **Methods:** * - **reset()** - Resets control value to initial attribute value and clears any active validation rules. * * ### **Slots:** * - _default_ - Control input element * - **label** - Label element * * ### **CSS Properties:** * - **--padding** - undefined _(default: undefined)_ * - **--font-size** - undefined _(default: undefined)_ * - **--height** - undefined _(default: undefined)_ * - **--background** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--border** - undefined _(default: undefined)_ * - **--cursor** - undefined _(default: undefined)_ * - **--accent-color** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--label-color** - undefined _(default: undefined)_ * - **--label-width** - undefined _(default: undefined)_ * - **--label-font-weight** - undefined _(default: undefined)_ * - **--label-font-size** - undefined _(default: undefined)_ * - **--control-width** - undefined _(default: undefined)_ * - **--control-height** - undefined _(default: undefined)_ * * ### **CSS Parts:** * - **icon-button** - The calendar icon button element */ "nve-week": DefineComponent; }; declare module "vue" { // eslint-disable-next-line @typescript-eslint/no-empty-interface interface GlobalComponents extends CustomElements {} } declare global { namespace JSX { // eslint-disable-next-line @typescript-eslint/no-empty-interface interface IntrinsicElements extends CustomElements {} } }