import type { DefineComponent } from "vue"; type AccordionHeaderProps = { /** */ slot?: string; }; type AccordionContentProps = {}; type AccordionProps = { /** Enables updating internal string values for internationalization. */ i18n?: string; /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `inset` Element container optimizes for embedding or inset placement inside another containing element. */ container?: "flat" | "inset" | "default"; /** 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) */ "behavior-expand"?: boolean; }; type AccordionGroupProps = { /** Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless) */ "behavior-expand"?: boolean; /** Determines whether the accordion should opt-in to stateful expansion of a single accordion at a time */ "behavior-expand-single"?: boolean; /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `inset` Element container optimizes for embedding or inset placement inside another containing element. */ container?: "flat" | "inset" | "default"; }; 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" | "default"; /** Controls the visual prominence to establish hierarchy and guide user attention. - `emphasis` Increases visual weight to draw attention and highlight important elements. */ prominence?: "emphasis" | "default"; /** 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"; /** Demonstrates different container styles to accommodate visual weight and context. - `full` Element container optimizes for filling its container bounds. */ container?: "full" | "default"; }; type AlertProps = { /** 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. - `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" | "default"; /** 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 = { /** 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" | "xs" | "default"; /** 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 = { /** 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. - `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"; /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. */ container?: "flat" | "default"; /** Controls the visual prominence to establish hierarchy and guide user attention. - `emphasis` Increases visual weight to draw attention and highlight important elements. */ prominence?: "emphasis" | "default"; /** 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"; /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. */ container?: "flat" | "rounded" | "default"; /** 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" | "default"; /** 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" | "default"; }; type ButtonProps = { /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `inline` Element container reduces to fit within inline content such as a block of text. */ container?: "flat" | "inline" | "default"; /** 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" | "default"; /** 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; /** Like input readonly, sets a button semantically as visual treatment only. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */ readonly?: boolean; /** Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */ form?: string | HTMLFormElement | null; /** The name of the element, submitted as a pair with the element value as part of the form data. [MDN](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"; /** The id reference of the element that receives the popover. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget */ 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?: 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 */ interestfor?: HTMLElement | null; /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popoverTargetElement?: HTMLElement | null; }; type CardProps = { /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `full` Element container optimizes for filling its container bounds. */ container?: "flat" | "full" | "default"; }; type CardHeaderProps = { /** */ slot?: string; }; type CardContentProps = {}; type CardFooterProps = { /** */ slot?: string; }; type ChatMessageProps = { /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual 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"; /** */ "arrow-position"?: "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"; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ prominence?: "muted"; }; type CheckboxProps = { /** 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. - `success` Represents positive outcomes, confirmations, or constructive actions. */ 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) */ "fit-text"?: boolean; /** Sets the input to match native default content block */ "fit-content"?: boolean; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type ColorProps = { /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. */ container?: "flat" | "default"; /** 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. - `success` Represents positive outcomes, confirmations, or constructive actions. */ 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) */ "fit-text"?: boolean; /** Sets the input to match native default content block */ "fit-content"?: boolean; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type ComboboxProps = { /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. */ container?: "flat"; /** Manage inline tag rendering for many-item select */ "tag-layout"?: "hidden" | "wrap"; /** Enable creation of new options when the input value doesn't match any existing option. Dispatches a `create` event with `{ value }` detail. */ "behavior-create"?: boolean; /** 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. - `success` Represents positive outcomes, confirmations, or constructive actions. */ 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) */ "fit-text"?: boolean; /** Sets the input to match native default content block */ "fit-content"?: boolean; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ 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 = { /** Enables updating internal string values for internationalization. */ i18n?: string; /** Determines if the copy button should auto write to clipboard by the trigger. */ "behavior-copy"?: boolean; /** 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; /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `inline` Element container reduces to fit within inline content such as a block of text. */ container?: "flat" | "inline" | "default"; /** 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" | "default"; /** 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; /** Like input readonly, sets a button semantically as visual treatment only. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */ readonly?: boolean; /** Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */ form?: string | HTMLFormElement | null; /** The name of the element, submitted as a pair with the element value as part of the form data. [MDN](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"; /** The id reference of the element that receives the popover. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget */ 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?: 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 */ interestfor?: HTMLElement | null; /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popoverTargetElement?: HTMLElement | null; }; type DateProps = { /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. */ container?: "flat" | "default"; /** 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. - `success` Represents positive outcomes, confirmations, or constructive actions. */ 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) */ "fit-text"?: boolean; /** Sets the input to match native default content block */ "fit-content"?: boolean; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type DatetimeProps = { /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. */ container?: "flat" | "default"; /** 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. - `success` Represents positive outcomes, confirmations, or constructive actions. */ 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) */ "fit-text"?: boolean; /** Sets the input to match native default content block */ "fit-content"?: boolean; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type DialogFooterProps = {}; type DialogHeaderProps = {}; type DialogProps = { /** Determines the position of an element along both inline and block axis. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) - `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" | "default"; /** 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. Anchor can accept a idref string within the same render root or a HTMLElement DOM reference. */ 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 what element triggers an `open` interaction event. A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. */ trigger?: string | HTMLElement; /** @deprecated Use the popover API instead. Determines if popover visibility behavior should be automatically controlled by the trigger. */ "behavior-trigger"?: boolean; /** Enables updating 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 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 = { /** 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. - `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 = { /** Determines the position of an element along both inline and block axis. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) */ 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" | "default"; /** 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. Anchor can accept a idref string within the same render root or a HTMLElement DOM reference. */ 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 what element triggers an `open` interaction event. A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. */ 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. */ "behavior-trigger"?: boolean; /** Enables updating 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 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. Anchor can accept a idref string within the same render root or a HTMLElement DOM reference. */ 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 what element triggers an `open` interaction event. A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. */ trigger?: string | HTMLElement; /** Determines the position of an element along both inline and block axis. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) - `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. */ "behavior-trigger"?: 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; /** */ modal?: boolean; /** */ "popover-type"?: "auto" | "manual" | "hint" | "inline"; /** Enables updating internal string values for internationalization. */ i18n?: string; /** */ popoverArrow?: HTMLElement; /** 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 = { /** */ accept?: string; /** */ "max-file-size"?: number; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Prevents the user from changing the control value. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */ 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 of the element, submitted as a pair with the element value as part of the form data. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name) */ name?: string; /** Disables constraint validation for this control. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/novalidate */ novalidate?: boolean; /** 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?: T | undefined; /** The initial value used when the parent form resets. */ defaultValue?: string; /** 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 = { /** 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. - `success` Represents positive outcomes, confirmations, or constructive actions. */ 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) */ "fit-text"?: boolean; /** Sets the input to match native default content block */ "fit-content"?: boolean; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type FormatDatetimeProps = { /** 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 | "default"; /** Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default. */ locale?: string | "default"; /** Weekday representation: 'long' | 'short' | 'narrow'. */ weekday?: "long" | "short" | "narrow" | "default"; /** Year representation: 'numeric' | '2-digit'. */ year?: "numeric" | "2-digit" | "default"; /** Month representation: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow'. */ month?: "numeric" | "2-digit" | "long" | "short" | "narrow" | "default"; /** Day representation: 'numeric' | '2-digit'. */ day?: "numeric" | "2-digit" | "default"; /** Hour representation: 'numeric' | '2-digit'. */ hour?: "numeric" | "2-digit" | "default"; /** Minute representation: 'numeric' | '2-digit'. */ minute?: "numeric" | "2-digit" | "default"; /** Second representation: 'numeric' | '2-digit'. */ second?: "numeric" | "2-digit" | "default"; /** 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" | "default"; /** 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" | "default"; /** Time zone name display: 'long' | 'short'. Use it with granular options only; preset styles ignore it. */ "time-zone-name"?: "long" | "short" | "default"; /** IANA time zone identifier (such as 'America/New_York', 'UTC'). */ "time-zone"?: string | "default"; }; type FormatNumberProps = { /** 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 | "default"; /** Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default. */ locale?: string | "default"; /** Formatting style: 'decimal' | 'currency' | 'percent' | 'unit'. */ "format-style"?: "decimal" | "currency" | "percent" | "unit"; /** ISO 4217 currency code (such as USD or EUR). Required when formatStyle is currency. */ currency?: string | "default"; /** Currency sign style: 'standard' | 'accounting'. */ "currency-sign"?: "standard" | "accounting" | "default"; /** Currency display style: 'symbol' | 'code' | 'name' | 'narrowSymbol'. */ "currency-display"?: "symbol" | "code" | "name" | "narrowSymbol" | "default"; /** Unit identifier (such as kilometer or byte). Required when formatStyle is unit. */ unit?: string | "default"; /** Unit display style: 'short' | 'long' | 'narrow'. */ "unit-display"?: "short" | "long" | "narrow" | "default"; /** Number notation: 'standard' | 'scientific' | 'engineering' | 'compact'. */ notation?: "standard" | "scientific" | "engineering" | "compact" | "default"; /** Compact notation display: 'short' | 'long'. Only applies when notation is compact. */ "compact-display"?: "short" | "long" | "default"; /** Sign display: 'auto' | 'never' | 'always' | 'exceptZero'. */ "sign-display"?: "auto" | "never" | "always" | "exceptZero" | "default"; /** Grouping separators: 'auto' | 'always' | 'min2' | 'true' | 'false'. */ "use-grouping"?: string | "default"; /** Pad fraction output to at least this many digits (0-20). */ "minimum-fraction-digits"?: number | "default"; /** Round fraction output to at most this many digits (0-20). */ "maximum-fraction-digits"?: number | "default"; /** Pad integer output to at least this many digits (1-21). */ "minimum-integer-digits"?: number | "default"; }; type FormatRelativeTimeProps = { /** 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 | "default"; /** Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default. */ locale?: string | "default"; /** 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. */ "format-style"?: "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"; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ prominence?: "muted"; }; type ControlMessageProps = { /** 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. - `success` Represents positive outcomes, confirmations, or constructive actions. */ status?: "warning" | "error" | "success" | "disabled" | "default"; /** 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; /** */ slot?: string; }; type ControlProps = { /** 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. - `success` Represents positive outcomes, confirmations, or constructive actions. */ 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) */ "fit-text"?: boolean; /** Sets the input to match native default content block */ "fit-content"?: boolean; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type GridCellProps = {}; type GridColumnProps = { /** 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; /** Determines the position of an element along both inline and block axis. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) */ position?: "fixed" | "sticky" | ""; /** Control the content alignment within a given column. */ "column-align"?: "start" | "center" | "end"; /** */ "aria-colindex"?: string; /** */ "onnve-grid-column-resize"?: (e: CustomEvent) => void; }; type GridFooterProps = { /** */ slot?: string; }; type GridProps = { /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `full` Element container optimizes for filling its container bounds. */ container?: "flat" | "full" | "default"; /** 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"; /** 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" | "default"; /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `inline` Element container reduces to fit within inline content such as a block of text. */ container?: "flat" | "inline" | "default"; /** 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; /** Like input readonly, sets a button semantically as visual treatment only. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */ readonly?: boolean; /** Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */ form?: string | HTMLFormElement | null; /** The name of the element, submitted as a pair with the element value as part of the form data. [MDN](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"; /** The id reference of the element that receives the popover. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget */ 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?: 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 */ interestfor?: HTMLElement | null; /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popoverTargetElement?: 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" | "default"; /** 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" | "xs" | "xl" | "default"; /** 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" | "default"; /** The name of the element, submitted as a pair with the element value as part of the form data. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name) */ 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" | "default"; }; 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"; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ prominence?: "muted"; }; type InputProps = { /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. */ container?: "flat" | "default"; /** Sets the rounded visual style of the input. */ rounded?: boolean; /** 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. - `success` Represents positive outcomes, confirmations, or constructive actions. */ 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) */ "fit-text"?: boolean; /** Sets the input to match native default content block */ "fit-content"?: boolean; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ 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" | "default"; }; type MenuItemProps = { /** Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. */ status?: "danger"; /** 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; /** Like input readonly, sets a button semantically as visual treatment only. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */ readonly?: boolean; /** Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */ form?: string | HTMLFormElement | null; /** The name of the element, submitted as a pair with the element value as part of the form data. [MDN](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"; /** The id reference of the element that receives the popover. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget */ 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?: 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 */ interestfor?: HTMLElement | null; /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popoverTargetElement?: HTMLElement | null; }; type MenuProps = { /** */ items?: MenuItem[]; /** 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 = { /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. */ container?: "flat" | "default"; /** 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. - `success` Represents positive outcomes, confirmations, or constructive actions. */ 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) */ "fit-text"?: boolean; /** Sets the input to match native default content block */ "fit-content"?: boolean; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type NotificationGroupProps = { /** Provides the element that the popover should position relative to. Anchor can accept a idref string within the same render root or a HTMLElement DOM reference. */ anchor?: string | HTMLElement; /** Determines the position of an element along both inline and block axis. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) - `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 = { /** Provides the element that the popover should position relative to. Anchor can accept a idref string within the same render root or a HTMLElement DOM reference. */ 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 what element triggers an `open` interaction event. A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. */ trigger?: string | HTMLElement; /** Determines the position of an element along both inline and block axis. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) - `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. */ "behavior-trigger"?: 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; /** A delayed `close` event will occur determined from the provided millisecond value. */ "close-timeout"?: 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"; /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. */ container?: "flat" | "default"; /** Enables updating internal string values for internationalization. */ i18n?: string; /** */ inline?: boolean; /** 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 = { /** */ slot?: string; }; type PagePanelHeaderProps = { /** */ slot?: string; }; 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" | "default"; /** Enables updating internal string values for internationalization. */ i18n?: string; /** */ onopen?: (e: CustomEvent) => void; /** */ onclose?: (e: CustomEvent) => void; }; type PageProps = { /** Enables the page to use the document content scroll rather than its internal fixed scroll. */ "document-scroll"?: boolean; }; type PaginationProps = { /** The number of items per page. */ step?: number; /** The array of custom step-size. */ stepSizes?: array; /** 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. */ "disable-step"?: boolean; /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `inline` Element container reduces to fit within inline content such as a block of text. */ container?: "flat" | "inline" | "default"; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Prevents the user from changing the control value. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */ 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 of the element, submitted as a pair with the element value as part of the form data. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name) */ name?: string; /** Disables constraint validation for this control. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/novalidate */ novalidate?: boolean; /** 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?: T | undefined; /** The initial value used when the parent form resets. */ defaultValue?: string; /** 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; /** */ "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. */ "behavior-expand"?: 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 = { /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. */ container?: "flat" | "default"; /** 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. - `success` Represents positive outcomes, confirmations, or constructive actions. */ 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) */ "fit-text"?: boolean; /** Sets the input to match native default content block */ "fit-content"?: boolean; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type PreferencesInputProps = { /** Enables updating internal string values for internationalization. */ i18n?: string; /** Prevents the user from changing the control value. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */ 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 of the element, submitted as a pair with the element value as part of the form data. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name) */ name?: string; /** Disables constraint validation for this control. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/novalidate */ novalidate?: boolean; /** 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?: T | undefined; /** The initial value used when the parent form resets. */ defaultValue?: string; /** 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 = { /** 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?: number | "default"; /** 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 = { /** 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?: number | "default"; /** The `max` value of the progress ring that the `value` is proportionally scaled 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" | "neutral" | "default"; /** 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" | "xxs" | "xs" | "xl" | "default"; /** 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 = { /** 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" | "xs" | "default"; /** 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. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. */ status?: "accent" | "warning" | "danger" | "default"; }; 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"; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ prominence?: "muted"; }; type RadioProps = { /** 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. - `success` Represents positive outcomes, confirmations, or constructive actions. */ 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) */ "fit-text"?: boolean; /** Sets the input to match native default content block */ "fit-content"?: boolean; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ 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"; /** 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. - `success` Represents positive outcomes, confirmations, or constructive actions. */ 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) */ "fit-text"?: boolean; /** Sets the input to match native default content block */ "fit-content"?: boolean; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type ResizeHandleProps = { /** 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" | "default"; /** Determines the min resize value. */ min?: number; /** Determines the max resize value. */ max?: number; /** Determines the value step change. */ step?: number; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Prevents the user from changing the control value. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */ 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 of the element, submitted as a pair with the element value as part of the form data. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name) */ name?: string; /** Disables constraint validation for this control. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/novalidate */ novalidate?: boolean; /** 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?: T | undefined; /** The initial value used when the parent form resets. */ defaultValue?: string; /** 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 = { /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. */ container?: "flat" | "default"; /** Sets the rounded visual style of the input. */ rounded?: boolean; /** 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. - `success` Represents positive outcomes, confirmations, or constructive actions. */ 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) */ "fit-text"?: boolean; /** Sets the input to match native default content block */ "fit-content"?: boolean; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type SelectProps = { /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `inline` Element container reduces to fit within inline content such as a block of text. */ container?: "flat" | "inline" | "default"; /** Enables updating internal string values for internationalization. */ i18n?: string; /** 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. - `success` Represents positive outcomes, confirmations, or constructive actions. */ 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) */ "fit-text"?: boolean; /** Sets the input to match native default content block */ "fit-content"?: boolean; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ 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"; /** Whether the skeleton hides its content */ hidden?: boolean; }; type SortButtonProps = { /** The current sort value, can be ascending, descending, or none. */ sort?: "ascending" | "descending" | "none"; /** Enables updating internal string values for internationalization. */ i18n?: string; /** 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; /** Like input readonly, sets a button semantically as visual treatment only. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */ readonly?: boolean; /** Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */ form?: string | HTMLFormElement | null; /** The name of the element, submitted as a pair with the element value as part of the form data. [MDN](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"; /** The id reference of the element that receives the popover. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget */ 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?: 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 */ interestfor?: HTMLElement | null; /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popoverTargetElement?: HTMLElement | null; /** Dispatched on sort button click, returns the current sort value and the next sort value. */ onsort?: (e: CustomEvent) => void; }; type SparklineProps = { /** 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"; /** 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. - `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" | "default"; /** Controls the visual scale of an element to match its importance and available space. - `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" | "default"; /** Denotes the first data point by rendering a symbol at its position. */ "denote-first"?: boolean; /** Denotes the last data point by rendering a symbol at its position. */ "denote-last"?: boolean; /** Denotes all minimum-value data points by rendering symbols at their positions. */ "denote-min"?: boolean; /** Denotes all maximum-value data points by rendering symbols at their positions. */ "denote-max"?: boolean; /** Controls spacing between points in a line, in em (1 = chart height). Defaults to `0.6`. */ "interval-length"?: number; /** Lower bound for the y-axis domain. When undefined, derives the bound from data. */ min?: number | "default"; /** Upper bound for the y-axis domain. When undefined, derives the bound from data. */ max?: number | "default"; }; type StarRatingProps = { /** 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. - `success` Represents positive outcomes, confirmations, or constructive actions. */ 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) */ "fit-text"?: boolean; /** Sets the input to match native default content block */ "fit-content"?: boolean; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type StepsItemProps = { /** 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; /** 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. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. - `success` Represents positive outcomes, confirmations, or constructive actions. */ status?: "accent" | "danger" | "success" | "pending" | "default"; /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `inline` Element container reduces to fit within inline content such as a block of text. - `inset` Element container optimizes for embedding or inset placement inside another containing element. - `full` Element container optimizes for filling its container bounds. */ container?: "condensed" | "default"; /** 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; /** Like input readonly, sets a button semantically as visual treatment only. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */ readonly?: boolean; /** Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */ form?: string | HTMLFormElement | null; /** The name of the element, submitted as a pair with the element value as part of the form data. [MDN](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 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"; /** The id reference of the element that receives the popover. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget */ 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?: 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 */ interestfor?: HTMLElement | null; /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popoverTargetElement?: HTMLElement | null; }; type StepsProps = { /** Determines whether the steps should display in a vertical layout vs. defaulting to horizontal. */ vertical?: boolean; /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `inline` Element container reduces to fit within inline content such as a block of text. - `inset` Element container optimizes for embedding or inset placement inside another containing element. - `full` Element container optimizes for filling its container bounds. */ container?: "condensed" | "default"; /** Determines whether the steps should handle selection behavior vs. defaults to off. */ "behavior-select"?: 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"; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ prominence?: "muted"; }; type SwitchProps = { /** 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. - `success` Represents positive outcomes, confirmations, or constructive actions. */ 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) */ "fit-text"?: boolean; /** Sets the input to match native default content block */ "fit-content"?: boolean; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type TabsGroupProps = { /** Determines the alignment of the popover relative to the provided anchor element. */ alignment?: "top" | "start" | "end"; /** Dispatched when the selected tab value changes after an invoker `--toggle` updates selection */ onselect?: (e: CustomEvent) => void; }; type TabsItemProps = { /** 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 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; /** Like input readonly, sets a button semantically as visual treatment only. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */ readonly?: boolean; /** Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */ form?: string | HTMLFormElement | null; /** The name of the element, submitted as a pair with the element value as part of the form data. [MDN](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 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"; /** The id reference of the element that receives the popover. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget */ 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?: 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 */ interestfor?: HTMLElement | null; /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popoverTargetElement?: 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. */ "behavior-select"?: boolean; }; type TagProps = { /** 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"; /** Controls the visual prominence to establish hierarchy and guide user attention. - `emphasis` Increases visual weight to draw attention and highlight important elements. */ prominence?: "emphasis" | "default"; /** Enables updating internal string values for internationalization. */ i18n?: string; /** 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; /** Like input readonly, sets a button semantically as visual treatment only. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */ readonly?: boolean; /** Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form */ form?: string | HTMLFormElement | null; /** The name of the element, submitted as a pair with the element value as part of the form data. [MDN](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"; /** The id reference of the element that receives the popover. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget */ 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?: 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 */ interestfor?: HTMLElement | null; /** Establishes a relationship between a popover and its invoker button. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */ popoverTargetElement?: HTMLElement | null; }; type TextareaProps = { /** 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. - `success` Represents positive outcomes, confirmations, or constructive actions. */ 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) */ "fit-text"?: boolean; /** Sets the input to match native default content block */ "fit-content"?: boolean; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type TimeProps = { /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. */ container?: "flat" | "default"; /** 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. - `success` Represents positive outcomes, confirmations, or constructive actions. */ 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) */ "fit-text"?: boolean; /** Sets the input to match native default content block */ "fit-content"?: boolean; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ prominence?: "muted"; /** */ onreset?: (e: CustomEvent) => void; }; type ToastProps = { /** Provides the element that the popover should position relative to. Anchor can accept a idref string within the same render root or a HTMLElement DOM reference. */ 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 what element triggers an `open` interaction event. A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. */ trigger?: string | HTMLElement; /** Determines the position of an element along both inline and block axis. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) - `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 prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ prominence?: "muted"; /** @deprecated Use the popover API instead. Determines if popover visibility behavior should be automatically controlled by the trigger. */ "behavior-trigger"?: 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; /** A delayed `close` event occurs after the provided millisecond value elapses. */ "close-timeout"?: 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"; /** Enables updating 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. Anchor can accept a idref string within the same render root or a HTMLElement DOM reference. */ 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 what element triggers an `open` interaction event. A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. */ trigger?: string | HTMLElement; /** Determines the position of an element along both inline and block axis. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) - `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. */ "behavior-trigger"?: 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; /** Enables updating internal string values for internationalization. */ i18n?: string; /** */ popoverArrow?: HTMLElement; /** 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 = { /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `inset` Element container optimizes for embedding or inset placement inside another containing element. - `full` Element container optimizes for filling its container bounds. */ container?: "flat" | "inset" | "full" | "default"; /** Determines the primary content overflow behavior. */ content?: "scroll" | "wrap" | "default"; /** 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" | "default"; /** 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. */ status?: "accent"; }; type TooltipProps = { /** Provides the element that the popover should position relative to. Anchor can accept a idref string within the same render root or a HTMLElement DOM reference. */ 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 what element triggers an `open` interaction event. A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. */ trigger?: string | HTMLElement; /** Determines the position of an element along both inline and block axis. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) - `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. */ "behavior-trigger"?: boolean; /** 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?: "muted"; /** @deprecated Use interest-delay-start css property instead */ "open-delay"?: number; /** */ popoverArrow?: HTMLElement; /** 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; /** Enables updating internal string values for internationalization. */ i18n?: string; /** */ indeterminate?: boolean; /** */ behaviorExpand?: boolean; /** */ behaviorSelect?: boolean; /** 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. */ "behavior-expand"?: boolean; /** Determines whether the tree nodes should handle auto-select behavior. */ "behavior-select"?: 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 = { /** Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. */ container?: "flat" | "default"; /** 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. - `success` Represents positive outcomes, confirmations, or constructive actions. */ 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) */ "fit-text"?: boolean; /** Sets the input to match native default content block */ "fit-content"?: boolean; /** Enables updating internal string values for internationalization. */ i18n?: string; /** Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. */ 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_ - default content slot * - **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_ - This is a default/unnamed slot for accordion content * - **icon-button** - icon elements to display for expand/collapse * - **header** - header element (Use `accordion-header` or custom content) * - **content** - content element (Use `accordion-content` or custom content) * * ### **CSS Properties:** * - **--background** - undefined _(default: undefined)_ * - **--color** - undefined _(default: undefined)_ * - **--border-radius** - undefined _(default: undefined)_ * - **--header-padding** - undefined _(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_ - default slot for content */ "nve-avatar-group": DefineComponent; /** * Avatar represents a user/bot within a UI. Typically with text or image content. * --- * * * ### **Slots:** * - _default_ - default slot for content * * ### **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_ - default slot for content * - **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_ - default slot * * ### **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_ - default slot for 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_ - default * - **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_ - default content slot * * ### **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_ - default content slot * * ### **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 * * ### **Slots:** * - _default_ - default slot for dropdown content * * ### **CSS Properties:** * - **--nve-dropdown-group-spacing** - undefined _(default: undefined)_ * - **--nve-dropdown-group-transition** - undefined _(default: undefined)_ * - **--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_ - use only when custom messaging requires it * - **icon** - default slot for icon * - **content** - default slot for content * * ### **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_ - default slot for content * * ### **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; /** * Represents an individual data cell within a grid row, displaying content aligned to its parent column. * --- * * * ### **Slots:** * - _default_ - default slot for content * * ### **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_ - default slot for content * - **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_ - default slot for content * * ### **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_ - default slot for content * - **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_ - default slot for content * * ### **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_ - default slot for content * * ### **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_ - default slot for content * - **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_ - default content slot * - **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_ - default slot for content * * ### **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** * - **close** * * ### **Slots:** * - _default_ - default content slot * - **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** * - **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:** * - _default_ - default slot for content * - **suffix-label** - slot for overriding the "n of total" label when 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_ - default slot for content * * ### **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_ - default content slot * * ### **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 sort button click, returns the current sort value and the next sort value. * * ### **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_ - default slot for content * * ### **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_ - default slot for content * * ### **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_ - default content slot * - **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_ - default slot for content * - **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_ - default content slot * * ### **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 {} } }