{
  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
  "version": 1.1,
  "tags": [
    {
      "name": "nve-accordion-header",
      "description": "Provides the clickable heading region of an accordion that toggles the visibility of associated content.\n---\n\n\n### **Slots:**\n - _default_ - default content slot\n- **prefix** - slot for prefix content\n- **suffix** - slot for suffix content\n\n### **CSS Properties:**\n - **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/"
        },
        {
          "name": "markdown",
          "url": "## nve-accordion-header\n\nProvides the clickable heading region of an accordion that toggles the visibility of associated content.\n\n### Example\n\n```html\n<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/accordion/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default content slot |\n| prefix | `string` | slot for prefix content |\n| suffix | `string` | slot for suffix content |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| slot | `string` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |"
        }
      ]
    },
    {
      "name": "nve-accordion-content",
      "description": "Contains the collapsible body content that reveals or hides when the parent accordion expands or collapses.\n---\n\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot for accordion content\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/"
        },
        {
          "name": "markdown",
          "url": "## nve-accordion-content\n\nContains the collapsible body content that reveals or hides when the parent accordion expands or collapses.\n\n### Example\n\n```html\n<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/accordion/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default/unnamed slot for accordion content |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
        }
      ]
    },
    {
      "name": "nve-accordion",
      "description": "An accordion is a vertical stack of interactive headings used to toggle the display of further information.\n---\n\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot for accordion content\n- **icon-button** - icon elements to display for expand/collapse\n- **header** - header element (Use `accordion-header` or custom content)\n- **content** - content element (Use `accordion-content` or custom content)\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--header-padding** -  _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--transition** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon-button** - The toggle icon button element",
      "attributes": [
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.\n\n- `inset` Element container optimizes for embedding or inset placement inside another containing element.",
          "values": [
            { "name": "flat" },
            { "name": "inset" },
            { "name": "default" }
          ]
        },
        {
          "name": "expanded",
          "description": "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)\n- `true` The associated content expands and becomes visible to the user.\n\n- `false` The associated content collapses and hides from the user.",
          "values": []
        },
        {
          "name": "disabled",
          "description": "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)\n- `true` The element has a disabled state and does not accept interaction.\n\n- `false` The element has an enabled state and accepts interaction.",
          "values": []
        },
        {
          "name": "behavior-expand",
          "description": "Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless)",
          "values": []
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/"
        },
        {
          "name": "markdown",
          "url": "## nve-accordion\n\nAn accordion is a vertical stack of interactive headings used to toggle the display of further information.\n\n### Example\n\n```html\n<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/accordion/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default/unnamed slot for accordion content |\n| icon-button | `string` | icon elements to display for expand/collapse |\n| header | `string` | header element (Use `accordion-header` or custom content) |\n| content | `string` | content element (Use `accordion-content` or custom content) |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| i18n |  | Enables updating internal string values for internationalization. |\n| container | `'flat' \\| 'inset' \\| \"default\"` | 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. |\n| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/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. |\n| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/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. |\n| behaviorExpand (behavior-expand) | `boolean` | Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless) |\n\n### Invoker Commands\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --open | `CommandEvent` | use to open the accordion |\n| --close | `CommandEvent` | use to close the accordion |\n| --toggle | `CommandEvent` | use to toggle the accordion |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --header-padding | `string` |  |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --transition | `string` | [MDN](https://mdn.dev/CSS/transition) |"
        }
      ]
    },
    {
      "name": "nve-accordion-group",
      "description": "Organizes many accordions into a cohesive group, enabling coordinated expand/collapse behavior such as single-item expansion.\n---\n\n\n### **Slots:**\n - _default_ - This is a default slot for accordions within the group\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_",
      "attributes": [
        {
          "name": "behavior-expand",
          "description": "Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless)",
          "values": []
        },
        {
          "name": "behavior-expand-single",
          "description": "Determines whether the accordion should opt-in to stateful expansion of a single accordion at a time",
          "values": []
        },
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.\n\n- `inset` Element container optimizes for embedding or inset placement inside another containing element.",
          "values": [
            { "name": "flat" },
            { "name": "inset" },
            { "name": "default" }
          ]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/"
        },
        {
          "name": "markdown",
          "url": "## nve-accordion-group\n\nOrganizes many accordions into a cohesive group, enabling coordinated expand/collapse behavior such as single-item expansion.\n\n### Example\n\n```html\n<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/accordion/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default slot for accordions within the group |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| behaviorExpand (behavior-expand) | `boolean` | Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless) |\n| behaviorExpandSingle (behavior-expand-single) | `boolean` | Determines whether the accordion should opt-in to stateful expansion of a single accordion at a time |\n| container | `'flat' \\| 'inset' \\| \"default\"` | 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. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
        }
      ]
    },
    {
      "name": "nve-alert-group",
      "description": "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.\n---\n\n\n### **Slots:**\n - _default_ - default slot for nve-alert\n\n### **CSS Properties:**\n - **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_",
      "attributes": [
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `accent` Highlights important actions or draws attention to primary interactive elements.\n\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.\n\n- `danger` Signals destructive or irreversible actions that need extra attention and confirmation.",
          "values": [
            { "name": "accent" },
            { "name": "warning" },
            { "name": "success" },
            { "name": "danger" },
            { "name": "default" }
          ]
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `emphasis` Increases visual weight to draw attention and highlight important elements.",
          "values": [{ "name": "emphasis" }, { "name": "default" }]
        },
        {
          "name": "color",
          "description": "Defines a base color from the theme color palette",
          "values": [
            { "name": "red-cardinal" },
            { "name": "gray-slate" },
            { "name": "gray-denim" },
            { "name": "blue-indigo" },
            { "name": "blue-cobalt" },
            { "name": "blue-sky" },
            { "name": "teal-cyan" },
            { "name": "green-mint" },
            { "name": "teal-seafoam" },
            { "name": "green-grass" },
            { "name": "yellow-amber" },
            { "name": "orange-pumpkin" },
            { "name": "red-tomato" },
            { "name": "pink-magenta" },
            { "name": "purple-plum" },
            { "name": "purple-violet" },
            { "name": "purple-lavender" },
            { "name": "pink-rose" },
            { "name": "green-jade" },
            { "name": "lime-pear" },
            { "name": "yellow-nova" },
            { "name": "brand-green" }
          ]
        },
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `full` Element container optimizes for filling its container bounds.",
          "values": [{ "name": "full" }, { "name": "default" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/alert/"
        },
        {
          "name": "markdown",
          "url": "## nve-alert-group\n\nAn 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.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/alert/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for nve-alert |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| status | `'accent' \\| 'warning' \\| 'success' \\| 'danger' \\| \"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. - `success` Represents positive outcomes, confirmations, or constructive actions. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. |\n| prominence | `'emphasis' \\| \"default\"` | Controls the visual prominence to establish hierarchy and guide user attention. - `emphasis` Increases visual weight to draw attention and highlight important elements. |\n| 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'` | Defines a base color from the theme color palette |\n| container | `'full' \\| \"default\"` | Demonstrates different container styles to accommodate visual weight and context. - `full` Element container optimizes for filling its container bounds. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |"
        }
      ]
    },
    {
      "name": "nve-alert",
      "description": "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.\n---\n\n\n### **Events:**\n - **close** - Dispatched when the alert closes within an alert group.\n\n### **Slots:**\n - **icon** - Icon slot renders on the left side of the alert. Icons typically represent the alert's status.\n- **prefix** - Prefix slot renders between the icon and the content. Prefixes typically represent the alert's status.\n- **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.\n- **content** - Content for large overflow text.\n- _default_ - Default content placed inside of the alert.\n\n### **CSS Properties:**\n - **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--icon-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--icon-size** -  _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--justify-content** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) _(default: undefined)_\n- **--align-items** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) _(default: undefined)_\n- **--min-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) _(default: undefined)_\n- **--text-transform** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_",
      "attributes": [
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `accent` Highlights important actions or draws attention to primary interactive elements.\n\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.\n\n- `danger` Signals destructive or irreversible actions that need extra attention and confirmation.\n\n- `scheduled` Task has a scheduled future execution at a specific time.\n\n- `queued` Task is waiting in line to begin after other tasks complete.\n\n- `pending` Task is awaiting approval, user input, or external conditions before proceeding.\n\n- `starting` Task is initializing and preparing to begin active execution.\n\n- `running` Task is actively executing and making progress.\n\n- `restarting` Task restarts after an interruption or reset.\n\n- `stopping` Task is gracefully shutting down and completing cleanup operations.\n\n- `finished` Task has completed successfully with the expected outcome.\n\n- `failed` Task encountered an error and did not complete as intended.\n\n- `unknown` Task status remains unknown or unavailable.\n\n- `ignored` Task was intentionally skipped or excluded from execution.",
          "values": [
            { "name": "accent" },
            { "name": "warning" },
            { "name": "success" },
            { "name": "danger" },
            { "name": "scheduled" },
            { "name": "queued" },
            { "name": "pending" },
            { "name": "starting" },
            { "name": "running" },
            { "name": "restarting" },
            { "name": "stopping" },
            { "name": "finished" },
            { "name": "failed" },
            { "name": "unknown" },
            { "name": "ignored" },
            { "name": "muted" },
            { "name": "default" }
          ]
        },
        {
          "name": "closable",
          "description": "Indicates whether the user can dismiss or close the element.\n- `true` The element displays a close control and the user can dismiss it.\n\n- `false` The user cannot close the element and must dismiss it programmatically.",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/alert/"
        },
        {
          "name": "markdown",
          "url": "## nve-alert\n\nAlert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.\n\n### Example\n\n```html\n<nve-alert>alert message</nve-alert>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/alert/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| icon | `string` | Icon slot renders on the left side of the alert. Icons typically represent the alert's status. |\n| prefix | `string` | Prefix slot renders between the icon and the content. Prefixes typically represent the alert's status. |\n| actions | `string` | 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. |\n| content | `string` | Content for large overflow text. |\n| (default) | `string` | Default content placed inside of the alert. |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| status | `'accent' \\| 'warning' \\| 'success' \\| 'danger' \\| 'scheduled' \\| 'queued' \\| 'pending' \\| 'starting' \\| 'running' \\| 'restarting' \\| 'stopping' \\| 'finished' \\| 'failed' \\| 'unknown' \\| 'ignored' \\| 'muted' \\| \"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. - `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. |\n| closable | `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. |\n| i18n |  | Enables updating internal string values for internationalization. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| close | `CustomEvent` | Dispatched when the alert closes within an alert group. |\n\n### Invoker Commands\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --close | `CommandEvent` | Use to set the alert closed/hidden state. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --icon-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --icon-size | `string` |  |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --justify-content | `string` | [MDN](https://mdn.dev/CSS/justify-content) |\n| --align-items | `string` | [MDN](https://mdn.dev/CSS/align-items) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |\n| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |"
        }
      ]
    },
    {
      "name": "nve-avatar-group",
      "description": "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.\n---\n\n\n### **Slots:**\n - _default_ - default slot for content",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/alert/"
        }
      ]
    },
    {
      "name": "nve-avatar",
      "description": "Avatar represents a user/bot within a UI. Typically with text or image content.\n---\n\n\n### **Slots:**\n - _default_ - default slot for content\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_",
      "attributes": [
        {
          "name": "size",
          "description": "Controls the visual scale of an element to match its importance and available space.\n- `sm` Compact size for dense layouts or secondary elements with less visual prominence.\n\n- `md` Standard size that works well in most contexts and provides balanced visibility.\n\n- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts.",
          "values": [
            { "name": "sm" },
            { "name": "md" },
            { "name": "lg" },
            { "name": "xs" },
            { "name": "default" }
          ]
        },
        {
          "name": "color",
          "description": "Defines a base color from the theme color palette",
          "values": [
            { "name": "red-cardinal" },
            { "name": "gray-slate" },
            { "name": "gray-denim" },
            { "name": "blue-indigo" },
            { "name": "blue-cobalt" },
            { "name": "blue-sky" },
            { "name": "teal-cyan" },
            { "name": "green-mint" },
            { "name": "teal-seafoam" },
            { "name": "green-grass" },
            { "name": "yellow-amber" },
            { "name": "orange-pumpkin" },
            { "name": "red-tomato" },
            { "name": "pink-magenta" },
            { "name": "purple-plum" },
            { "name": "purple-violet" },
            { "name": "purple-lavender" },
            { "name": "pink-rose" },
            { "name": "green-jade" },
            { "name": "lime-pear" },
            { "name": "yellow-nova" },
            { "name": "brand-green" }
          ]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/alert/"
        },
        {
          "name": "markdown",
          "url": "## nve-avatar\n\nAvatar represents a user/bot within a UI. Typically with text or image content.\n\n### Example\n\n```html\n<nve-avatar>AV</nve-avatar>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/avatar/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for content |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| size | `'sm' \\| 'md' \\| 'lg' \\| 'xs' \\| \"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. |\n| 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'` | Defines a base color from the theme color palette |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |"
        }
      ]
    },
    {
      "name": "nve-badge",
      "description": "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.\n---\n\n\n### **Slots:**\n - _default_ - default slot for content\n- **prefix-icon** - slot for prefix icon\n- **suffix-icon** - slot for suffix icon\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--icon-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--text-transform** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_",
      "attributes": [
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `accent` Highlights important actions or draws attention to primary interactive elements.\n\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.\n\n- `danger` Signals destructive or irreversible actions that need extra attention and confirmation.\n\n- `scheduled` Task has a scheduled future execution at a specific time.\n\n- `queued` Task is waiting in line to begin after other tasks complete.\n\n- `pending` Task is awaiting approval, user input, or external conditions before proceeding.\n\n- `starting` Task is initializing and preparing to begin active execution.\n\n- `running` Task is actively executing and making progress.\n\n- `restarting` Task restarts after an interruption or reset.\n\n- `stopping` Task is gracefully shutting down and completing cleanup operations.\n\n- `finished` Task has completed successfully with the expected outcome.\n\n- `failed` Task encountered an error and did not complete as intended.\n\n- `unknown` Task status remains unknown or unavailable.\n\n- `ignored` Task was intentionally skipped or excluded from execution.",
          "values": [
            { "name": "scheduled" },
            { "name": "queued" },
            { "name": "pending" },
            { "name": "starting" },
            { "name": "running" },
            { "name": "restarting" },
            { "name": "stopping" },
            { "name": "finished" },
            { "name": "failed" },
            { "name": "unknown" },
            { "name": "ignored" },
            { "name": "accent" },
            { "name": "warning" },
            { "name": "success" },
            { "name": "danger" }
          ]
        },
        {
          "name": "color",
          "description": "Defines a base color from the theme color palette",
          "values": [
            { "name": "red-cardinal" },
            { "name": "gray-slate" },
            { "name": "gray-denim" },
            { "name": "blue-indigo" },
            { "name": "blue-cobalt" },
            { "name": "blue-sky" },
            { "name": "teal-cyan" },
            { "name": "green-mint" },
            { "name": "teal-seafoam" },
            { "name": "green-grass" },
            { "name": "yellow-amber" },
            { "name": "orange-pumpkin" },
            { "name": "red-tomato" },
            { "name": "pink-magenta" },
            { "name": "purple-plum" },
            { "name": "purple-violet" },
            { "name": "purple-lavender" },
            { "name": "pink-rose" },
            { "name": "green-jade" },
            { "name": "lime-pear" },
            { "name": "yellow-nova" },
            { "name": "brand-green" }
          ]
        },
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.",
          "values": [{ "name": "flat" }, { "name": "default" }]
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `emphasis` Increases visual weight to draw attention and highlight important elements.",
          "values": [{ "name": "emphasis" }, { "name": "default" }]
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img"
        },
        {
          "name": "markdown",
          "url": "## nve-badge\n\nA 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.\n\n### Example\n\n```html\n<nve-badge>badge</nve-badge>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/badge/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for content |\n| prefix-icon | `string` | slot for prefix icon |\n| suffix-icon | `string` | slot for suffix icon |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| status | `'scheduled' \\| 'queued' \\| 'pending' \\| 'starting' \\| 'running' \\| 'restarting' \\| 'stopping' \\| 'finished' \\| 'failed' \\| 'unknown' \\| 'ignored' \\| 'accent' \\| 'warning' \\| 'success' \\| 'danger'` | 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. |\n| 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'` | Defines a base color from the theme color palette |\n| container | `'flat' \\| \"default\"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n| prominence | `'emphasis' \\| \"default\"` | Controls the visual prominence to establish hierarchy and guide user attention. - `emphasis` Increases visual weight to draw attention and highlight important elements. |\n| i18n |  | Enables updating internal string values for internationalization. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --icon-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |"
        }
      ]
    },
    {
      "name": "nve-breadcrumb",
      "description": "Breadcrumb is a component that can help users establish their location while navigating a website with complex URLs and navigation paths.\n---\n\n\n### **Slots:**\n - _default_ - default slot for `nve-button` and anchor elements\n\n### **CSS Properties:**\n - **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--icon-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--icon-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--text-decoration** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role"
        },
        {
          "name": "markdown",
          "url": "## nve-breadcrumb\n\nBreadcrumb is a component that can help users establish their location while navigating a website with complex URLs and navigation paths.\n\n### Example\n\n```html\n<nve-breadcrumb>\n  <nve-button><a href=\"#\" target=\"_self\">Item 1</a></nve-button>\n  <nve-button><a href=\"#\" target=\"_self\">Item 2</a></nve-button>\n  <nve-button><a href=\"#\" target=\"_self\">Item 3</a></nve-button>\n  <span>You Are Here</span>\n</nve-breadcrumb>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/breadcrumb/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for `nve-button` and anchor elements |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --icon-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --icon-height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --text-decoration | `string` | [MDN](https://mdn.dev/CSS/text-decoration) |"
        }
      ]
    },
    {
      "name": "nve-button-group",
      "description": "A button group organizes related buttons and can support either mutually exclusive single or multi selection. Prefer usage within toolbars.\n---\n\n\n### **Slots:**\n - _default_ - default slot for `nve-button` or `nve-icon-button`\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_",
      "attributes": [
        {
          "name": "behavior-select",
          "description": "By default the button group is stateless. Add the `behavior-select` attribute and set to `single` or `multi` to enable stateful selction handling.",
          "values": [{ "name": "single" }, { "name": "multi" }]
        },
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.",
          "values": [
            { "name": "flat" },
            { "name": "rounded" },
            { "name": "default" }
          ]
        },
        {
          "name": "orientation",
          "description": "Controls the directional flow of the element's layout and interaction pattern.\n- `horizontal` Element orients horizontally with left-to-right flow.\n\n- `vertical` Element orients vertically with top-to-bottom flow.",
          "values": [
            { "name": "horizontal" },
            { "name": "vertical" },
            { "name": "default" }
          ]
        },
        {
          "name": "interaction",
          "description": "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.\n- `emphasis` Shows the interaction targets emphasis or highlighting primary actions.\n\n- `destructive` Shows the interaction targets destructive actions such as deleting or removing.",
          "values": [{ "name": "emphasis" }, { "name": "destructive" }]
        },
        {
          "name": "size",
          "description": "Controls the visual scale of an element to match its importance and available space.\n- `sm` Compact size for dense layouts or secondary elements with less visual prominence.\n\n- `md` Standard size that works well in most contexts and provides balanced visibility.\n\n- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts.",
          "values": [
            { "name": "sm" },
            { "name": "md" },
            { "name": "lg" },
            { "name": "default" }
          ]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role"
        },
        {
          "name": "markdown",
          "url": "## nve-button-group\n\nA button group organizes related buttons and can support either mutually exclusive single or multi selection. Prefer usage within toolbars.\n\n### Example\n\n```html\n<nve-button-group>\n  <nve-icon-button selected icon-name=\"copy\"></nve-icon-button>\n  <nve-icon-button icon-name=\"add-comment\"></nve-icon-button>\n  <nve-icon-button icon-name=\"download\"></nve-icon-button>\n</nve-button-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/button-group/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for `nve-button` or `nve-icon-button` |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| behaviorSelect (behavior-select) | `'single' \\| 'multi'` | By default the button group is stateless. Add the `behavior-select` attribute and set to `single` or `multi` to enable stateful selction handling. |\n| container | `'flat' \\| 'rounded' \\| \"default\"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n| orientation | `'horizontal' \\| 'vertical' \\| \"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. |\n| interaction | `'emphasis' \\| 'destructive'` | 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. |\n| size | `'sm' \\| 'md' \\| 'lg' \\| \"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. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |"
        }
      ]
    },
    {
      "name": "nve-button",
      "description": "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.\n---\n\n\n### **Slots:**\n - _default_ - slot for button text content or icon, icon placement depends on whether `icon` appears before or after text content.\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--text-decoration** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) _(default: undefined)_\n- **--text-align** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--text-transform** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) _(default: undefined)_\n- **--line-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--min-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) _(default: undefined)_",
      "attributes": [
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.\n\n- `inline` Element container reduces to fit within inline content such as a block of text.",
          "values": [
            { "name": "flat" },
            { "name": "inline" },
            { "name": "default" }
          ]
        },
        {
          "name": "size",
          "description": "Controls the visual scale of an element to match its importance and available space.\n- `sm` Compact size for dense layouts or secondary elements with less visual prominence.\n\n- `md` Standard size that works well in most contexts and provides balanced visibility.\n\n- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts.",
          "values": [
            { "name": "sm" },
            { "name": "md" },
            { "name": "lg" },
            { "name": "default" }
          ]
        },
        {
          "name": "interaction",
          "description": "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.\n- `emphasis` Shows the interaction targets emphasis or highlighting primary actions.\n\n- `destructive` Shows the interaction targets destructive actions such as deleting or removing.",
          "values": [{ "name": "emphasis" }, { "name": "destructive" }]
        },
        {
          "name": "pressed",
          "description": "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)\n- `true` The button is in the pressed (on) state and the associated action or setting is active.\n\n- `false` The button is in the unpressed (off) state and the associated action or setting is inactive.",
          "values": []
        },
        {
          "name": "expanded",
          "description": "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)\n- `true` The associated content expands and becomes visible to the user.\n\n- `false` The associated content collapses and hides from the user.",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Like input readonly, sets a button semantically as visual treatment only.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly",
          "values": []
        },
        {
          "name": "form",
          "description": "Like input form, sets a button to submit a form outside its parent form.\nReturns a reference to the form element if available.\nhttps://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form",
          "values": [{ "name": "HTMLFormElement" }]
        },
        {
          "name": "name",
          "description": "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)",
          "values": []
        },
        {
          "name": "value",
          "description": "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)",
          "values": []
        },
        {
          "name": "type",
          "description": "Defines the button behavior when associated within a form element.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type",
          "values": [
            { "name": "button" },
            { "name": "submit" },
            { "name": "reset" }
          ]
        },
        {
          "name": "disabled",
          "description": "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)\n- `true` The element has a disabled state and does not accept interaction.\n\n- `false` The element has an enabled state and accepts interaction.",
          "values": []
        },
        {
          "name": "selected",
          "description": "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)\n- `true` The element holds selection and represents the user's current choice within the group.\n\n- `false` The element does not hold selection and the user can choose it.",
          "values": []
        },
        {
          "name": "current",
          "description": "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)\n- `page` Marks the current page within a set of navigation links.\n\n- `step` Marks the current step within a multi-step process or workflow.",
          "values": [{ "name": "page" }, { "name": "step" }]
        },
        {
          "name": "popovertarget",
          "description": "The id reference of the element that receives the popover.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget",
          "values": []
        },
        {
          "name": "popovertargetaction",
          "description": "The popover target action to perform on the popover target element.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction",
          "values": [
            { "name": "show" },
            { "name": "hide" },
            { "name": "toggle" }
          ]
        },
        {
          "name": "commandfor",
          "description": "The element that receives the command.\nhttps://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API",
          "values": [{ "name": "HTMLElement" }]
        },
        {
          "name": "command",
          "description": "The command to execute on the element.\nhttps://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API",
          "values": []
        },
        {
          "name": "interestfor",
          "description": "The element that receives the interest.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement",
          "values": [{ "name": "HTMLElement" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/button/"
        },
        {
          "name": "markdown",
          "url": "## nve-button\n\nA 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.\n\n### Example\n\n```html\n<nve-button>standard</nve-button>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/button/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | slot for button text content or icon, icon placement depends on whether `icon` appears before or after text content. |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat' \\| 'inline' \\| \"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. |\n| size | `'sm' \\| 'md' \\| 'lg' \\| \"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. |\n| interaction | `'emphasis' \\| 'destructive'` | 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. |\n| pressed | `boolean` | Indicates the current state of a toggle button that switches on or off. [MDN](https://mdn.dev/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. |\n| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/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. |\n| readOnly (readonly) | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |\n| form | `string \\| HTMLFormElement \\| null` | Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://mdn.dev/ElementInternals/form |\n| name | `string` | The name of the button, submitted as a pair with the button value as part of the form data. https://mdn.dev/HTML/Element/button#attr-name |\n| value | `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://mdn.dev/HTML/Element/input#value) |\n| type | `'button' \\| 'submit' \\| 'reset'` | Defines the button behavior when associated within a form element. https://mdn.dev/HTML/Element/button#attr-type |\n| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/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. |\n| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/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. |\n| current | `'page' \\| 'step'` | Indicates the element that represents the user's current location or position within a set. [MDN](https://mdn.dev/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. |\n| popoverTargetElement | `HTMLElement \\| null` | Establishes a relationship between a popover and its invoker button. https://mdn.dev/HTMLInputElement/popoverTargetElement |\n| popovertarget | `string` | The id reference of the element that receives the popover. https://mdn.dev/HTML/Reference/Elements/button#popovertarget |\n| popoverTargetAction (popovertargetaction) | `'show' \\| 'hide' \\| 'toggle'` | The popover target action to perform on the popover target element. https://mdn.dev/HTMLInputElement/popoverTargetAction |\n| commandForElement (commandfor) | `HTMLElement \\| null` | The element that receives the command. https://mdn.dev/Invoker_Commands_API |\n| command | `string` | The command to execute on the element. https://mdn.dev/Invoker_Commands_API |\n| interestForElement (interestfor) | `HTMLElement \\| null` | The element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --text-decoration | `string` | [MDN](https://mdn.dev/CSS/text-decoration) |\n| --text-align | `string` | [MDN](https://mdn.dev/CSS/text-align) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --line-height | `string` | [MDN](https://mdn.dev/CSS/line-height) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |"
        }
      ]
    },
    {
      "name": "nve-card",
      "description": "A container for content representing a single entity.\n---\n\n\n### **Slots:**\n - _default_ - use `<nve-card-header>`,`<nve-card-content>`,`<nve-card-footer>` for card content layout\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--box-shadow** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_",
      "attributes": [
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.\n\n- `full` Element container optimizes for filling its container bounds.",
          "values": [
            { "name": "flat" },
            { "name": "full" },
            { "name": "default" }
          ]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://github.com/w3c/aria-practices/issues"
        },
        {
          "name": "markdown",
          "url": "## nve-card\n\nA container for content representing a single entity.\n\n### Example\n\n```html\n<nve-card>\n  <nve-card-header>\n    <h2 nve-text=\"heading sm medium\">Heading</h2>\n  </nve-card-header>\n  <nve-card-content>\n    <p nve-text=\"body\" style=\"min-height: 64px\">card content</p>\n  </nve-card-content>\n  <nve-card-footer>\n    <p nve-text=\"body\">card footer</p>\n  </nve-card-footer>\n</nve-card>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/card/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | use `<nve-card-header>`,`<nve-card-content>`,`<nve-card-footer>` for card content layout |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat' \\| 'full' \\| \"default\"` | 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. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |"
        }
      ]
    },
    {
      "name": "nve-card-header",
      "description": "Displays the title and optional actions at the top of a card, establishing the card's identity and purpose.\n---\n\n\n### **Slots:**\n - _default_ - default slot\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--border-bottom** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) _(default: undefined)_\n- **--line-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://github.com/w3c/aria-practices/issues"
        },
        {
          "name": "markdown",
          "url": "## nve-card-header\n\nDisplays the title and optional actions at the top of a card, establishing the card's identity and purpose.\n\n### Example\n\n```html\n<nve-card>\n  <nve-card-header>\n    <h2 nve-text=\"heading sm medium\">Heading</h2>\n  </nve-card-header>\n  <nve-card-content>\n    <p nve-text=\"body\" style=\"min-height: 64px\">card content</p>\n  </nve-card-content>\n  <nve-card-footer>\n    <p nve-text=\"body\">card footer</p>\n  </nve-card-footer>\n</nve-card>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/card/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| slot | `string` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |\n| --line-height | `string` | [MDN](https://mdn.dev/CSS/line-height) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |"
        }
      ]
    },
    {
      "name": "nve-card-content",
      "description": "Contains the primary body content of a card, providing a structured region for the main information or media.\n---\n\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot for card content\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://github.com/w3c/aria-practices/issues"
        },
        {
          "name": "markdown",
          "url": "## nve-card-content\n\nContains the primary body content of a card, providing a structured region for the main information or media.\n\n### Example\n\n```html\n<nve-card>\n  <nve-card-header>\n    <h2 nve-text=\"heading sm medium\">Heading</h2>\n  </nve-card-header>\n  <nve-card-content>\n    <p nve-text=\"body\" style=\"min-height: 64px\">card content</p>\n  </nve-card-content>\n  <nve-card-footer>\n    <p nve-text=\"body\">card footer</p>\n  </nve-card-footer>\n</nve-card>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/card/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default/unnamed slot for card content |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
        }
      ]
    },
    {
      "name": "nve-card-footer",
      "description": "Provides a designated area at the bottom of a card for actions, metadata, or supplementary information.\n---\n\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot for card footer content\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--border-top** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://github.com/w3c/aria-practices/issues"
        },
        {
          "name": "markdown",
          "url": "## nve-card-footer\n\nProvides a designated area at the bottom of a card for actions, metadata, or supplementary information.\n\n### Example\n\n```html\n<nve-card>\n  <nve-card-header>\n    <h2 nve-text=\"heading sm medium\">Heading</h2>\n  </nve-card-header>\n  <nve-card-content>\n    <p nve-text=\"body\" style=\"min-height: 64px\">card content</p>\n  </nve-card-content>\n  <nve-card-footer>\n    <p nve-text=\"body\">card footer</p>\n  </nve-card-footer>\n</nve-card>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/card/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default/unnamed slot for card footer content |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| slot | `string` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |"
        }
      ]
    },
    {
      "name": "nve-chat-message",
      "description": "A chat message component displays a text message within a conversation, sent between users or bots\n---\n\n\n### **Slots:**\n - _default_ - default slot for content\n- **prefix** - for avatar/img content\n- **suffix** - for avatar/img content\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--line-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) _(default: undefined)_\n- **--overflow** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) _(default: undefined)_\n- **--top-offset** - Vertical offset for aligning message with avatar _(default: undefined)_",
      "attributes": [
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.",
          "values": [{ "name": "flat" }]
        },
        {
          "name": "color",
          "description": "Defines a base color from the theme color palette",
          "values": [
            { "name": "red-cardinal" },
            { "name": "gray-slate" },
            { "name": "gray-denim" },
            { "name": "blue-indigo" },
            { "name": "blue-cobalt" },
            { "name": "blue-sky" },
            { "name": "teal-cyan" },
            { "name": "green-mint" },
            { "name": "teal-seafoam" },
            { "name": "green-grass" },
            { "name": "yellow-amber" },
            { "name": "orange-pumpkin" },
            { "name": "red-tomato" },
            { "name": "pink-magenta" },
            { "name": "purple-plum" },
            { "name": "purple-violet" },
            { "name": "purple-lavender" },
            { "name": "pink-rose" },
            { "name": "green-jade" },
            { "name": "lime-pear" },
            { "name": "yellow-nova" },
            { "name": "brand-green" }
          ]
        },
        {
          "name": "arrow-position",
          "values": [
            { "name": "" },
            { "name": "top-start" },
            { "name": "top-end" },
            { "name": "bottom-start" },
            { "name": "bottom-end" }
          ]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/alert/"
        },
        {
          "name": "markdown",
          "url": "## nve-chat-message\n\nA chat message component displays a text message within a conversation, sent between users or bots\n\n### Example\n\n```html\n<nve-chat-message> Your deployment completed successfully. All services are running as expected. </nve-chat-message>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/chat-message/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for content |\n| prefix | `string` | for avatar/img content |\n| suffix | `string` | for avatar/img content |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat'` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n| 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'` | Defines a base color from the theme color palette |\n| arrowPosition (arrow-position) | `\\| 'top-start'\n    \\| 'top-end'\n    \\| 'bottom-start'\n    \\| 'bottom-end'` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --line-height | `string` | [MDN](https://mdn.dev/CSS/line-height) |\n| --overflow | `string` | [MDN](https://mdn.dev/CSS/overflow) |\n| --top-offset | `string` | Vertical offset for aligning message with avatar |"
        }
      ]
    },
    {
      "name": "nve-checkbox-group",
      "description": "Groups related checkboxes together with a shared label and validation messaging for multi-select form inputs.\n---\n\n\n### **Slots:**\n - _default_ - Control input elements\n\n### **CSS Properties:**\n - **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-text-transform** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_",
      "attributes": [
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/"
        },
        {
          "name": "markdown",
          "url": "## nve-checkbox-group\n\nGroups related checkboxes together with a shared label and validation messaging for multi-select form inputs.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/checkbox/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input elements |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |"
        }
      ]
    },
    {
      "name": "nve-checkbox",
      "description": "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.\n---\n\n\n### **Events:**\n - **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n\n### **Slots:**\n - _default_ - Control input element\n- **label** - Label element\n\n### **CSS Properties:**\n - **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--border-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--border-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--check-color** -  _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_",
      "attributes": [
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.",
          "values": [
            { "name": "warning" },
            { "name": "error" },
            { "name": "success" },
            { "name": "disabled" }
          ]
        },
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "fit-text",
          "description": "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)",
          "values": []
        },
        {
          "name": "fit-content",
          "description": "Sets the input to match native default content block",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/"
        },
        {
          "name": "markdown",
          "url": "## nve-checkbox\n\nA 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.\n\n### Example\n\n```html\n<nve-checkbox>\n  <label>label</label>\n  <input type=\"checkbox\" checked />\n</nve-checkbox>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/checkbox/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input element |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| nveControl | `string` |  |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | 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. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| i18n |  | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n| showPicker |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --border-width | `string` | [MDN](https://mdn.dev/CSS/border-width) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border-color | `string` | [MDN](https://mdn.dev/CSS/border-color) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --check-color | `string` |  |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
        }
      ]
    },
    {
      "name": "nve-color",
      "description": "A color picker is a control that enables users to choose a color value.\n---\n\n\n### **Events:**\n - **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n\n### **Slots:**\n - _default_ - Control input element\n- **label** - Label element\n\n### **CSS Properties:**\n - **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon-button** - The eye dropper icon button element",
      "attributes": [
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.",
          "values": [{ "name": "flat" }, { "name": "default" }]
        },
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.",
          "values": [
            { "name": "warning" },
            { "name": "error" },
            { "name": "success" },
            { "name": "disabled" }
          ]
        },
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "fit-text",
          "description": "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)",
          "values": []
        },
        {
          "name": "fit-content",
          "description": "Sets the input to match native default content block",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color"
        },
        {
          "name": "markdown",
          "url": "## nve-color\n\nA color picker is a control that enables users to choose a color value.\n\n### Example\n\n```html\n<nve-color>\n  <label>label</label>\n  <input type=\"color\" />\n  <nve-control-message>message</nve-control-message>\n</nve-color>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/color/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input element |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat' \\| \"default\"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | 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. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| fitText (fit-text) | `boolean` | 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) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| i18n |  | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| nveControl | `string` |  |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n| showPicker |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
        }
      ]
    },
    {
      "name": "nve-combobox",
      "description": "An editable combobox with autocomplete behavior and selection support.\n---\n\n\n### **Events:**\n - **create** - Fires when the user confirms a value that doesn't match any existing option and the `behavior-create` attribute exists. `detail: { value }`.\n- **scroll** - Fires when the user scrolls the dropdown option list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`.\n- **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n- **selectAll()** - Select all options provided\n\n### **Slots:**\n - _default_ - default slot for an input and a datalist/select element\n- **prefix-icon** - slot for icon before the input\n- **footer** - slot for dropdown footer content\n- **label** - Label element\n\n### **CSS Properties:**\n - **--scroll-height** -  _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--border-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) _(default: undefined)_\n- **--max-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) _(default: undefined)_\n- **--text-transform** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n\n### **CSS Parts:**\n - **tag** - The tag element for selected items\n- **dropdown** - The dropdown popup element\n- **menu** - The menu element\n- **menu-item** - The menu item elements\n- **checkbox** - The checkbox element\n- **icon** - The icon element\n- **create-option** - The menu item element for creating new options",
      "attributes": [
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.",
          "values": [{ "name": "flat" }]
        },
        {
          "name": "tag-layout",
          "description": "Manage inline tag rendering for many-item select",
          "values": [{ "name": "hidden" }, { "name": "wrap" }]
        },
        {
          "name": "behavior-create",
          "description": "Enable creation of new options when the input value doesn't match any existing option. Dispatches a `create` event with `{ value }` detail.",
          "values": []
        },
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.",
          "values": [
            { "name": "warning" },
            { "name": "error" },
            { "name": "success" },
            { "name": "disabled" }
          ]
        },
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "fit-text",
          "description": "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)",
          "values": []
        },
        {
          "name": "fit-content",
          "description": "Sets the input to match native default content block",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/"
        },
        {
          "name": "markdown",
          "url": "## nve-combobox\n\nAn editable combobox with autocomplete behavior and selection support.\n\n### Example\n\n```html\n<nve-combobox>\n  <label>label</label>\n  <input type=\"search\" />\n  <datalist>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n  </datalist>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/combobox/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for an input and a datalist/select element |\n| prefix-icon | `string` | slot for icon before the input |\n| footer | `string` | slot for dropdown footer content |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat'` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n| tagLayout (tag-layout) | `'hidden' \\| 'wrap'` | Manage inline tag rendering for many-item select |\n| behaviorCreate (behavior-create) | `boolean` | Enable creation of new options when the input value doesn't match any existing option. Dispatches a `create` event with `{ value }` detail. |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n| selectAll |  | Select all options provided |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | 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. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| fitText (fit-text) | `boolean` | 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) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| i18n |  | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| nveControl | `string` |  |\n| showPicker |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| create | `CustomEvent` | Fires when the user confirms a value that doesn't match any existing option and the `behavior-create` attribute exists. `detail: { value }`. |\n| scroll | `CustomEvent` | Fires when the user scrolls the dropdown option list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`. |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --scroll-height | `string` |  |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --border-color | `string` | [MDN](https://mdn.dev/CSS/border-color) |\n| --max-height | `string` | [MDN](https://mdn.dev/CSS/max-height) |\n| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
        }
      ]
    },
    {
      "name": "nve-copy-button",
      "description": "A copy button is a button that easily enables the copy to clipboard pattern.\n---\n\n\n### **Slots:**\n - _default_ - default\n- **icon** - slot for custom icon\n\n### **CSS Properties:**\n - **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--min-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--line-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--text-decoration** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) _(default: undefined)_\n- **--text-align** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--text-transform** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon** - The icon element\n- **toast** - The toast notification element\n- **tooltip** - The tooltip element",
      "attributes": [
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "behavior-copy",
          "description": "Determines if the copy button should auto write to clipboard by the trigger.",
          "values": []
        },
        {
          "name": "value",
          "description": "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)",
          "values": []
        },
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.\n\n- `inline` Element container reduces to fit within inline content such as a block of text.",
          "values": [
            { "name": "flat" },
            { "name": "inline" },
            { "name": "default" }
          ]
        },
        {
          "name": "size",
          "description": "Controls the visual scale of an element to match its importance and available space.\n- `sm` Compact size for dense layouts or secondary elements with less visual prominence.\n\n- `md` Standard size that works well in most contexts and provides balanced visibility.\n\n- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts.",
          "values": [
            { "name": "sm" },
            { "name": "md" },
            { "name": "lg" },
            { "name": "default" }
          ]
        },
        {
          "name": "interaction",
          "description": "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.\n- `emphasis` Shows the interaction targets emphasis or highlighting primary actions.\n\n- `destructive` Shows the interaction targets destructive actions such as deleting or removing.",
          "values": [{ "name": "emphasis" }, { "name": "destructive" }]
        },
        {
          "name": "pressed",
          "description": "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)\n- `true` The button is in the pressed (on) state and the associated action or setting is active.\n\n- `false` The button is in the unpressed (off) state and the associated action or setting is inactive.",
          "values": []
        },
        {
          "name": "expanded",
          "description": "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)\n- `true` The associated content expands and becomes visible to the user.\n\n- `false` The associated content collapses and hides from the user.",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Like input readonly, sets a button semantically as visual treatment only.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly",
          "values": []
        },
        {
          "name": "form",
          "description": "Like input form, sets a button to submit a form outside its parent form.\nReturns a reference to the form element if available.\nhttps://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form",
          "values": [{ "name": "HTMLFormElement" }]
        },
        {
          "name": "name",
          "description": "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)",
          "values": []
        },
        {
          "name": "type",
          "description": "Defines the button behavior when associated within a form element.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type",
          "values": [
            { "name": "button" },
            { "name": "submit" },
            { "name": "reset" }
          ]
        },
        {
          "name": "disabled",
          "description": "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)\n- `true` The element has a disabled state and does not accept interaction.\n\n- `false` The element has an enabled state and accepts interaction.",
          "values": []
        },
        {
          "name": "selected",
          "description": "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)\n- `true` The element holds selection and represents the user's current choice within the group.\n\n- `false` The element does not hold selection and the user can choose it.",
          "values": []
        },
        {
          "name": "current",
          "description": "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)\n- `page` Marks the current page within a set of navigation links.\n\n- `step` Marks the current step within a multi-step process or workflow.",
          "values": [{ "name": "page" }, { "name": "step" }]
        },
        {
          "name": "popovertarget",
          "description": "The id reference of the element that receives the popover.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget",
          "values": []
        },
        {
          "name": "popovertargetaction",
          "description": "The popover target action to perform on the popover target element.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction",
          "values": [
            { "name": "show" },
            { "name": "hide" },
            { "name": "toggle" }
          ]
        },
        {
          "name": "commandfor",
          "description": "The element that receives the command.\nhttps://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API",
          "values": [{ "name": "HTMLElement" }]
        },
        {
          "name": "command",
          "description": "The command to execute on the element.\nhttps://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API",
          "values": []
        },
        {
          "name": "interestfor",
          "description": "The element that receives the interest.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement",
          "values": [{ "name": "HTMLElement" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/button/"
        },
        {
          "name": "markdown",
          "url": "## nve-copy-button\n\nA copy button is a button that easily enables the copy to clipboard pattern.\n\n### Example\n\n```html\n<nve-copy-button value=\"hello\" aria-label=\"copy value\" behavior-copy></nve-copy-button>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/copy-button/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default |\n| icon | `string` | slot for custom icon |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| i18n |  | Enables updating internal string values for internationalization. |\n| behaviorCopy (behavior-copy) | `boolean` | Determines if the copy button should auto write to clipboard by the trigger. |\n| value | `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://mdn.dev/HTML/Element/input#value) |\n| container | `'flat' \\| 'inline' \\| \"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. |\n| size | `'sm' \\| 'md' \\| 'lg' \\| \"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. |\n| interaction | `'emphasis' \\| 'destructive'` | 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. |\n| pressed | `boolean` | Indicates the current state of a toggle button that switches on or off. [MDN](https://mdn.dev/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. |\n| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/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. |\n| readOnly (readonly) | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |\n| form | `string \\| HTMLFormElement \\| null` | Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://mdn.dev/ElementInternals/form |\n| name | `string` | The name of the button, submitted as a pair with the button value as part of the form data. https://mdn.dev/HTML/Element/button#attr-name |\n| type | `'button' \\| 'submit' \\| 'reset'` | Defines the button behavior when associated within a form element. https://mdn.dev/HTML/Element/button#attr-type |\n| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/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. |\n| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/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. |\n| current | `'page' \\| 'step'` | Indicates the element that represents the user's current location or position within a set. [MDN](https://mdn.dev/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. |\n| popoverTargetElement | `HTMLElement \\| null` | Establishes a relationship between a popover and its invoker button. https://mdn.dev/HTMLInputElement/popoverTargetElement |\n| popovertarget | `string` | The id reference of the element that receives the popover. https://mdn.dev/HTML/Reference/Elements/button#popovertarget |\n| popoverTargetAction (popovertargetaction) | `'show' \\| 'hide' \\| 'toggle'` | The popover target action to perform on the popover target element. https://mdn.dev/HTMLInputElement/popoverTargetAction |\n| commandForElement (commandfor) | `HTMLElement \\| null` | The element that receives the command. https://mdn.dev/Invoker_Commands_API |\n| command | `string` | The command to execute on the element. https://mdn.dev/Invoker_Commands_API |\n| interestForElement (interestfor) | `HTMLElement \\| null` | The element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --line-height | `string` | [MDN](https://mdn.dev/CSS/line-height) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --text-decoration | `string` | [MDN](https://mdn.dev/CSS/text-decoration) |\n| --text-align | `string` | [MDN](https://mdn.dev/CSS/text-align) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |"
        }
      ]
    },
    {
      "name": "nve-date",
      "description": "A date picker is a control that enables users to choose a date value.\n---\n\n\n### **Events:**\n - **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n\n### **Slots:**\n - _default_ - Control input element\n- **label** - Label element\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--border-bottom** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--max-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) _(default: undefined)_\n- **--min-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon-button** - The calendar icon button element",
      "attributes": [
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.",
          "values": [{ "name": "flat" }, { "name": "default" }]
        },
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.",
          "values": [
            { "name": "warning" },
            { "name": "error" },
            { "name": "success" },
            { "name": "disabled" }
          ]
        },
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "fit-text",
          "description": "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)",
          "values": []
        },
        {
          "name": "fit-content",
          "description": "Sets the input to match native default content block",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date"
        },
        {
          "name": "markdown",
          "url": "## nve-date\n\nA date picker is a control that enables users to choose a date value.\n\n### Example\n\n```html\n<nve-date>\n  <label>date</label>\n  <input type=\"date\" />\n  <nve-control-message>message</nve-control-message>\n</nve-date>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/date/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input element |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat' \\| \"default\"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | 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. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| fitText (fit-text) | `boolean` | 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) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| i18n |  | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| nveControl | `string` |  |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n| showPicker |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --max-width | `string` | [MDN](https://mdn.dev/CSS/max-width) |\n| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
        }
      ]
    },
    {
      "name": "nve-datetime",
      "description": "A datetime picker is a control that enables users to choose a datetime value.\n---\n\n\n### **Events:**\n - **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n\n### **Slots:**\n - _default_ - Control input element\n- **label** - Label element\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--border-bottom** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--max-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) _(default: undefined)_\n- **--min-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon-button** - The calendar icon button element",
      "attributes": [
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.",
          "values": [{ "name": "flat" }, { "name": "default" }]
        },
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.",
          "values": [
            { "name": "warning" },
            { "name": "error" },
            { "name": "success" },
            { "name": "disabled" }
          ]
        },
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "fit-text",
          "description": "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)",
          "values": []
        },
        {
          "name": "fit-content",
          "description": "Sets the input to match native default content block",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local"
        },
        {
          "name": "markdown",
          "url": "## nve-datetime\n\nA datetime picker is a control that enables users to choose a datetime value.\n\n### Example\n\n```html\n<nve-datetime>\n  <label>date</label>\n  <input type=\"datetime-local\" />\n  <nve-control-message>message</nve-control-message>\n</nve-datetime>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/datetime/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input element |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat' \\| \"default\"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | 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. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| fitText (fit-text) | `boolean` | 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) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| i18n |  | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| nveControl | `string` |  |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n| showPicker |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --max-width | `string` | [MDN](https://mdn.dev/CSS/max-width) |\n| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
        }
      ]
    },
    {
      "name": "nve-dialog-footer",
      "description": "Contains the action buttons and controls at the bottom of a dialog for confirming, canceling, or navigating.\n---\n\n\n### **Slots:**\n - _default_ - default slot for the dialog footer\n\n### **CSS Properties:**\n - **--border-top** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/"
        },
        {
          "name": "markdown",
          "url": "## nve-dialog-footer\n\nContains the action buttons and controls at the bottom of a dialog for confirming, canceling, or navigating.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/dialog/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for the dialog footer |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |"
        }
      ]
    },
    {
      "name": "nve-dialog-header",
      "description": "Displays the title and contextual information at the top of a dialog to orient users to the dialog's purpose.\n---\n\n\n### **Slots:**\n - _default_ - default slot for the dialog header\n\n### **CSS Properties:**\n - **--border-bottom** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/"
        },
        {
          "name": "markdown",
          "url": "## nve-dialog-header\n\nDisplays the title and contextual information at the top of a dialog to orient users to the dialog's purpose.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/dialog/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for the dialog header |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
        }
      ]
    },
    {
      "name": "nve-dialog",
      "description": "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)\n---\n\n\n### **Events:**\n - **beforetoggle** - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n- **toggle** - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n- **open** - Dispatched when the dialog opens.\n- **close** - Dispatched when the dialog closes.\n\n### **Slots:**\n - _default_ - default content slot\n\n### **CSS Properties:**\n - **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--box-shadow** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--max-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) _(default: undefined)_\n- **--min-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) _(default: undefined)_\n- **--max-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) _(default: undefined)_\n- **--animation-duration** - Duration of dialog open/close animations [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) _(default: undefined)_\n\n### **CSS Parts:**\n - **close-button** - The inner template reference for the close button of the dialog.\n- **icon-button** - The icon button element",
      "attributes": [
        {
          "name": "position",
          "description": "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)\n- `center` Centers the popover directly over the anchor element.\n\n- `top` Positions the popover above the anchor element.\n\n- `bottom` Positions the popover below the anchor element.\n\n- `left` Positions the popover to the left side of the anchor element.\n\n- `right` Positions the popover to the right side of the anchor element.",
          "values": [
            { "name": "center" },
            { "name": "top" },
            { "name": "bottom" },
            { "name": "left" },
            { "name": "right" }
          ]
        },
        {
          "name": "alignment",
          "description": "Determines the alignment of the popover relative to the provided anchor element.\n- `start` Aligns the popover to the beginning edge of the anchor for left or top alignment.\n\n- `end` Aligns the popover to the ending edge of the anchor for right or bottom alignment.\n\n- `center` Centers the popover along the anchor's edge for balanced positioning.",
          "values": [
            { "name": "start" },
            { "name": "end" },
            { "name": "center" }
          ]
        },
        {
          "name": "size",
          "description": "Controls the visual scale of an element to match its importance and available space.\n- `sm` Compact size for dense layouts or secondary elements with less visual prominence.\n\n- `md` Standard size that works well in most contexts and provides balanced visibility.\n\n- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts.",
          "values": [
            { "name": "sm" },
            { "name": "md" },
            { "name": "lg" },
            { "name": "default" }
          ]
        },
        {
          "name": "closable",
          "description": "Indicates whether the user can dismiss or close the element.\n- `true` The element displays a close control and the user can dismiss it.\n\n- `false` The user cannot close the element and must dismiss it programmatically.",
          "values": []
        },
        {
          "name": "modal",
          "description": "Determines if a dialog should have a modal backdrop that visually overlays the UI.",
          "values": []
        },
        {
          "name": "anchor",
          "description": "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.",
          "values": [{ "name": "HTMLElement" }]
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/"
        },
        {
          "name": "markdown",
          "url": "## nve-dialog\n\nDialog 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)\n\n### Example\n\n```html\n<nve-button popovertarget=\"dialog\">button</nve-button>\n<nve-dialog id=\"dialog\" modal closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n</nve-dialog>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/dialog/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default content slot |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| position | `'center' \\| 'top' \\| 'bottom' \\| 'left' \\| 'right'` | Determines the position of an element along both inline and block axis. [MDN](https://mdn.dev/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. |\n| alignment | `'start' \\| 'end' \\| 'center'` | 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. |\n| size | `'sm' \\| 'md' \\| 'lg' \\| \"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. |\n| closable | `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. |\n| modal | `boolean` | Determines if a dialog should have a modal backdrop that visually overlays the UI. |\n| anchor | `string \\| HTMLElement` | 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. |\n| i18n |  | Enables updating internal string values for internationalization. |\n| typeNativePopoverController |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| beforetoggle | `CustomEvent` | Dispatched on a popover just before showing or hiding. [MDN](https://mdn.dev/HTMLElement/beforetoggle_event) |\n| toggle | `CustomEvent` | Dispatched on a popover element just after showing or hiding. [MDN](https://mdn.dev/HTMLElement/toggle_event) |\n| open | `CustomEvent` | Dispatched when the dialog opens. |\n| close | `CustomEvent` | Dispatched when the dialog closes. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --max-width | `string` | [MDN](https://mdn.dev/CSS/max-width) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |\n| --max-height | `string` | [MDN](https://mdn.dev/CSS/max-height) |\n| --animation-duration | `string` | Duration of dialog open/close animations [MDN](https://mdn.dev/CSS/animation-duration) |"
        }
      ]
    },
    {
      "name": "nve-divider",
      "description": "Divider is a component that separates and distinguishes sections of content or groups of menuitems.\n---\n\n\n### **CSS Properties:**\n - **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--size** -  _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_",
      "attributes": [
        {
          "name": "orientation",
          "description": "Controls the directional flow of the element's layout and interaction pattern.\n- `vertical` Element orients vertically with top-to-bottom flow.\n\n- `horizontal` Element orients horizontally with left-to-right flow.",
          "values": [{ "name": "vertical" }, { "name": "horizontal" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role"
        },
        {
          "name": "markdown",
          "url": "## nve-divider\n\nDivider is a component that separates and distinguishes sections of content or groups of menuitems.\n\n### Example\n\n```html\n<nve-divider></nve-divider>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/divider/define.js';\n```\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| orientation | `'vertical' \\| 'horizontal'` | 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. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --size | `string` |  |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |"
        }
      ]
    },
    {
      "name": "nve-dot",
      "description": "A visual indicator that communicates a status or notification of an associated component.\n---\n\n\n### **Slots:**\n - _default_ - default text content no more than 2 characters in length\n\n### **CSS Properties:**\n - **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_",
      "attributes": [
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `accent` Highlights important actions or draws attention to primary interactive elements.\n\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.\n\n- `danger` Signals destructive or irreversible actions that need extra attention and confirmation.\n\n- `scheduled` Task has a scheduled future execution at a specific time.\n\n- `queued` Task is waiting in line to begin after other tasks complete.\n\n- `pending` Task is awaiting approval, user input, or external conditions before proceeding.\n\n- `starting` Task is initializing and preparing to begin active execution.\n\n- `running` Task is actively executing and making progress.\n\n- `restarting` Task restarts after an interruption or reset.\n\n- `stopping` Task is gracefully shutting down and completing cleanup operations.\n\n- `finished` Task has completed successfully with the expected outcome.\n\n- `failed` Task encountered an error and did not complete as intended.\n\n- `unknown` Task status remains unknown or unavailable.\n\n- `ignored` Task was intentionally skipped or excluded from execution.",
          "values": [
            { "name": "accent" },
            { "name": "warning" },
            { "name": "success" },
            { "name": "danger" },
            { "name": "scheduled" },
            { "name": "queued" },
            { "name": "pending" },
            { "name": "starting" },
            { "name": "running" },
            { "name": "restarting" },
            { "name": "stopping" },
            { "name": "finished" },
            { "name": "failed" },
            { "name": "unknown" },
            { "name": "ignored" }
          ]
        },
        {
          "name": "size",
          "description": "Controls the visual scale of an element to match its importance and available space.\n- `sm` Compact size for dense layouts or secondary elements with less visual prominence.\n\n- `md` Standard size that works well in most contexts and provides balanced visibility.\n\n- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts.",
          "values": [{ "name": "sm" }, { "name": "md" }, { "name": "lg" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img"
        },
        {
          "name": "markdown",
          "url": "## nve-dot\n\nA visual indicator that communicates a status or notification of an associated component.\n\n### Example\n\n```html\n<nve-dot status=\"starting\"></nve-dot>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/dot/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default text content no more than 2 characters in length |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| status | `'accent' \\| 'warning' \\| 'success' \\| 'danger' \\| 'scheduled' \\| 'queued' \\| 'pending' \\| 'starting' \\| 'running' \\| 'restarting' \\| 'stopping' \\| 'finished' \\| 'failed' \\| 'unknown' \\| 'ignored'` | 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. |\n| size | `'sm' \\| 'md' \\| 'lg'` | 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. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |"
        }
      ]
    },
    {
      "name": "nve-drawer-content",
      "description": "Contains the scrollable main body content within a drawer panel.\n---\n\n\n### **Slots:**\n - _default_ - default slot for the drawer content\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/"
        },
        {
          "name": "markdown",
          "url": "## nve-drawer-content\n\nContains the scrollable main body content within a drawer panel.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/drawer/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for the drawer content |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |"
        }
      ]
    },
    {
      "name": "nve-drawer-footer",
      "description": "Provides a fixed action area at the bottom of a drawer for primary actions such as save or cancel.\n---\n\n\n### **Slots:**\n - _default_ - default slot for the drawer footer\n\n### **CSS Properties:**\n - **--border-top** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--min-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/"
        },
        {
          "name": "markdown",
          "url": "## nve-drawer-footer\n\nProvides a fixed action area at the bottom of a drawer for primary actions such as save or cancel.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/drawer/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for the drawer footer |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |"
        }
      ]
    },
    {
      "name": "nve-drawer-header",
      "description": "Displays the title and optional close control at the top of a drawer to identify its purpose.\n---\n\n\n### **Slots:**\n - _default_ - default slot for the drawer header\n\n### **CSS Properties:**\n - **--border-bottom** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) _(default: undefined)_\n- **--min-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/"
        },
        {
          "name": "markdown",
          "url": "## nve-drawer-header\n\nDisplays the title and optional close control at the top of a drawer to identify its purpose.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/drawer/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for the drawer header |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
        }
      ]
    },
    {
      "name": "nve-drawer",
      "description": "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)\n---\n\n\n### **Events:**\n - **beforetoggle** - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n- **toggle** - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n- **open** - Dispatched when the drawer opens.\n- **close** - Dispatched when the drawer closes.\n\n### **Slots:**\n - _default_ - default content slot\n\n### **CSS Properties:**\n - **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--box-shadow** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--top** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/top) _(default: undefined)_\n- **--max-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--animation-duration** - Duration of drawer open/close animations [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon-button** - The close icon button element",
      "attributes": [
        {
          "name": "position",
          "description": "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)",
          "values": [
            { "name": "left" },
            { "name": "right" },
            { "name": "bottom" },
            { "name": "top" }
          ]
        },
        {
          "name": "size",
          "description": "Controls the visual scale of an element to match its importance and available space.\n- `sm` Compact size for dense layouts or secondary elements with less visual prominence.\n\n- `md` Standard size that works well in most contexts and provides balanced visibility.\n\n- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts.",
          "values": [
            { "name": "sm" },
            { "name": "md" },
            { "name": "lg" },
            { "name": "default" }
          ]
        },
        {
          "name": "closable",
          "description": "Indicates whether the user can dismiss or close the element.\n- `true` The element displays a close control and the user can dismiss it.\n\n- `false` The user cannot close the element and must dismiss it programmatically.",
          "values": []
        },
        {
          "name": "modal",
          "description": "Determines if a drawer should have a modal backdrop that visually overlays the UI.",
          "values": []
        },
        {
          "name": "anchor",
          "description": "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.",
          "values": [{ "name": "HTMLElement" }]
        },
        {
          "name": "inline",
          "description": "Create a inline layout effect while retaining the a11y characteristics and top layer behavior (light dismiss, focus trap, non interactive background)\nhttps://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/"
        },
        {
          "name": "markdown",
          "url": "## nve-drawer\n\nDrawer 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)\n\n### Example\n\n```html\n<nve-drawer id=\"drawer\" closable modal>\n  <nve-drawer-header>\n    <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<nve-button popovertarget=\"drawer\">button</nve-button>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/drawer/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default content slot |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| position | `'left' \\| 'right' \\| 'bottom' \\| 'top'` | Determines the position of an element along both inline and block axis. [MDN](https://mdn.dev/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) |\n| size | `'sm' \\| 'md' \\| 'lg' \\| \"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. |\n| closable | `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. |\n| modal | `boolean` | Determines if a drawer should have a modal backdrop that visually overlays the UI. |\n| anchor | `string \\| HTMLElement` | 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. |\n| inline | `boolean` | 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/ |\n| i18n |  | Enables updating internal string values for internationalization. |\n| typeNativePopoverController |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| beforetoggle | `CustomEvent` | Dispatched on a popover just before showing or hiding. [MDN](https://mdn.dev/HTMLElement/beforetoggle_event) |\n| toggle | `CustomEvent` | Dispatched on a popover element just after showing or hiding. [MDN](https://mdn.dev/HTMLElement/toggle_event) |\n| open | `CustomEvent` | Dispatched when the drawer opens. |\n| close | `CustomEvent` | Dispatched when the drawer closes. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --top | `string` | [MDN](https://mdn.dev/CSS/top) |\n| --max-width | `string` | [MDN](https://mdn.dev/CSS/max-width) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --animation-duration | `string` | Duration of drawer open/close animations [MDN](https://mdn.dev/CSS/animation-duration) |"
        }
      ]
    },
    {
      "name": "nve-dropdown-group",
      "description": "A Dropdown Group streamlines the management of linked dropdowns and supports nested dropdowns for a more organized and intuitive user experience\n---\n\n\n### **Events:**\n - **open** - Dispatched when a dropdown in the group opens\n- **close** - Dispatched when a dropdown in the group closes\n\n### **Slots:**\n - _default_ - default slot for dropdown content\n\n### **CSS Properties:**\n - **--nve-dropdown-group-spacing** -  _(default: undefined)_\n- **--nve-dropdown-group-transition** -  _(default: undefined)_\n- **--arrow-transform** - Transform applied to the popover arrow _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/menubar/"
        }
      ]
    },
    {
      "name": "nve-dropdown-footer",
      "description": "Provides a fixed area at the bottom of a dropdown menu for extra actions or supplementary controls.\n---\n\n\n### **Slots:**\n - _default_ - default slot for the dropdown footer\n\n### **CSS Properties:**\n - **--border-top** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/menubar/"
        },
        {
          "name": "markdown",
          "url": "## nve-dropdown-footer\n\nProvides a fixed area at the bottom of a dropdown menu for extra actions or supplementary controls.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/dropdown/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for the dropdown footer |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |"
        }
      ]
    },
    {
      "name": "nve-dropdown-header",
      "description": "Displays a title or contextual label at the top of a dropdown menu to categorize its contents.\n---\n\n\n### **Slots:**\n - _default_ - default slot for the dropdown header\n\n### **CSS Properties:**\n - **--border-bottom** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/menubar/"
        },
        {
          "name": "markdown",
          "url": "## nve-dropdown-header\n\nDisplays a title or contextual label at the top of a dropdown menu to categorize its contents.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/dropdown/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for the dropdown header |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
        }
      ]
    },
    {
      "name": "nve-dropdown",
      "description": "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)\n---\n\n\n### **Events:**\n - **beforetoggle** - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n- **toggle** - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n- **open** - Dispatched when the dropdown opens.\n- **close** - Dispatched when the dropdown closes.\n\n### **Slots:**\n - _default_ - default slot for dropdown content\n\n### **CSS Properties:**\n - **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--box-shadow** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--min-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--arrow-transform** - Transform applied to the popover arrow _(default: undefined)_\n- **--animation-duration** - Duration of dropdown open/close animations [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon-button** - The close icon button element",
      "attributes": [
        {
          "name": "anchor",
          "description": "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.",
          "values": [{ "name": "HTMLElement" }]
        },
        {
          "name": "position",
          "description": "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)\n- `center` Centers the popover directly over the anchor element.\n\n- `top` Positions the popover above the anchor element.\n\n- `bottom` Positions the popover below the anchor element.\n\n- `left` Positions the popover to the left side of the anchor element.\n\n- `right` Positions the popover to the right side of the anchor element.",
          "values": [
            { "name": "center" },
            { "name": "top" },
            { "name": "bottom" },
            { "name": "left" },
            { "name": "right" }
          ]
        },
        {
          "name": "alignment",
          "description": "Determines the alignment of the popover relative to the provided anchor element.\n- `start` Aligns the popover to the beginning edge of the anchor for left or top alignment.\n\n- `end` Aligns the popover to the ending edge of the anchor for right or bottom alignment.\n\n- `center` Centers the popover along the anchor's edge for balanced positioning.",
          "values": [
            { "name": "start" },
            { "name": "end" },
            { "name": "center" }
          ]
        },
        {
          "name": "closable",
          "description": "Indicates whether the user can dismiss or close the element.\n- `true` The element displays a close control and the user can dismiss it.\n\n- `false` The user cannot close the element and must dismiss it programmatically.",
          "values": []
        },
        {
          "name": "arrow",
          "description": "Determines if an arrow renders.",
          "values": []
        },
        { "name": "modal", "values": [] },
        {
          "name": "popover-type",
          "values": [
            { "name": "auto" },
            { "name": "manual" },
            { "name": "hint" },
            { "name": "inline" }
          ]
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/menubar/"
        },
        {
          "name": "markdown",
          "url": "## nve-dropdown\n\nGeneric 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)\n\n### Example\n\n```html\n<nve-button popovertarget=\"dropdown\">button</nve-button>\n<nve-dropdown id=\"dropdown\">dropdown content</nve-dropdown>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/dropdown/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for dropdown content |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| anchor | `string \\| HTMLElement` | 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. |\n| position | `'center' \\| 'top' \\| 'bottom' \\| 'left' \\| 'right'` | Determines the position of an element along both inline and block axis. [MDN](https://mdn.dev/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. |\n| alignment | `'start' \\| 'end' \\| 'center'` | 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. |\n| closable | `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. |\n| arrow | `boolean` | Determines if an arrow renders. |\n| popoverArrow | `HTMLElement` |  |\n| typeNativePopoverController |  |  |\n| i18n |  | Enables updating internal string values for internationalization. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| beforetoggle | `CustomEvent` | Dispatched on a popover just before showing or hiding. [MDN](https://mdn.dev/HTMLElement/beforetoggle_event) |\n| toggle | `CustomEvent` | Dispatched on a popover element just after showing or hiding. [MDN](https://mdn.dev/HTMLElement/toggle_event) |\n| open | `CustomEvent` | Dispatched when the dropdown opens. |\n| close | `CustomEvent` | Dispatched when the dropdown closes. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --arrow-transform | `string` | Transform applied to the popover arrow |\n| --animation-duration | `string` | Duration of dropdown open/close animations [MDN](https://mdn.dev/CSS/animation-duration) |"
        }
      ]
    },
    {
      "name": "nve-dropzone",
      "description": "A dropzone form control that enables users to drag and drop files onto it.\n---\n\n\n### **Events:**\n - **change** - Dispatched when the value has changed (files located in event.target)\n\n### **Methods:**\n - **reportValidity()** - Reports whether the control satisfies its constraints.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity\n- **checkValidity()** - Checks whether the control satisfies its constraints.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity\n- **setCustomValidity()** - Sets a custom validation message.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity\n- **reset()** - Resets the control value to its initial value.\n\n### **Slots:**\n - _default_ - use only when custom messaging requires it\n- **icon** - default slot for icon\n- **content** - default slot for content\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--min-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon** - The upload icon element",
      "attributes": [
        { "name": "accept", "values": [] },
        { "name": "max-file-size", "values": [] },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Prevents the user from changing the control value.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly",
          "values": []
        },
        {
          "name": "disabled",
          "description": "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)\n- `true` The element has a disabled state and does not accept interaction.\n\n- `false` The element has an enabled state and accepts interaction.",
          "values": []
        },
        {
          "name": "required",
          "description": "Requires a value before the parent form can submit.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required",
          "values": []
        },
        {
          "name": "pattern",
          "description": "Defines the pattern that text values must match.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern",
          "values": []
        },
        {
          "name": "min",
          "description": "Defines the minimum numeric value.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min",
          "values": []
        },
        {
          "name": "max",
          "description": "Defines the maximum numeric value.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max",
          "values": []
        },
        {
          "name": "step",
          "description": "Defines the value granularity for numeric inputs.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step",
          "values": []
        },
        {
          "name": "minlength",
          "description": "Defines the minimum text length.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength",
          "values": []
        },
        {
          "name": "maxlength",
          "description": "Defines the maximum text length.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength",
          "values": []
        },
        {
          "name": "name",
          "description": "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)",
          "values": []
        },
        {
          "name": "novalidate",
          "description": "Disables constraint validation for this control.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/novalidate",
          "values": []
        },
        {
          "name": "value",
          "description": "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)",
          "values": [{ "name": "T" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file"
        },
        {
          "name": "markdown",
          "url": "## nve-dropzone\n\nA dropzone form control that enables users to drag and drop files onto it.\n\n### Example\n\n```html\n<nve-dropzone name=\"files\" style=\"--min-height: 200px\"></nve-dropzone>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/dropzone/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | use only when custom messaging requires it |\n| icon | `string` | default slot for icon |\n| content | `string` | default slot for content |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| accept | `string` |  |\n| maxFileSize (max-file-size) | `number` |  |\n| i18n |  | Enables updating internal string values for internationalization. |\n| formResetCallback |  |  |\n| value | `array` | 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://mdn.dev/HTML/Element/input#value) |\n| defaultValue | `string` | The initial value used when the parent form resets. |\n| readOnly (readonly) | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |\n| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/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. |\n| required | `boolean` | Requires a value before the parent form can submit. https://mdn.dev/HTML/Attributes/required |\n| pattern | `string` | Defines the pattern that text values must match. https://mdn.dev/HTML/Attributes/pattern |\n| min | `number \\| null` | Defines the minimum numeric value. https://mdn.dev/HTML/Attributes/min |\n| max | `number \\| null` | Defines the maximum numeric value. https://mdn.dev/HTML/Attributes/max |\n| step | `number \\| null` | Defines the value granularity for numeric inputs. https://mdn.dev/HTML/Attributes/step |\n| minLength (minlength) | `number` | Defines the minimum text length. https://mdn.dev/HTML/Attributes/minlength |\n| maxLength (maxlength) | `number` | Defines the maximum text length. https://mdn.dev/HTML/Attributes/maxlength |\n| name | `string` | The name submitted with the control value as part of the form data. https://mdn.dev/HTML/Attributes/name |\n| noValidate (novalidate) | `boolean` | Disables constraint validation for this control. https://mdn.dev/HTML/Attributes/novalidate |\n| form | `HTMLFormElement \\| null` | The form associated with the control. https://mdn.dev/ElementInternals/form |\n| willValidate | `boolean` | Indicates whether the control participates in constraint validation. https://mdn.dev/ElementInternals/willValidate |\n| validity | `ValidityState` | The control validity state. https://mdn.dev/ElementInternals/validity |\n| validationMessage | `string` | The validation message shown when the control is invalid. https://mdn.dev/ElementInternals/validationMessage |\n| valueAsString | `string` | The current value serialized as a string. |\n| valueAsNumber | `number` | The current value parsed as a number. |\n| type | `string` | The control type. |\n| labels | `NodeList` | Labels associated with the control. https://mdn.dev/ElementInternals/labels |\n| composedLabel | `string` | Text content from labels associated with the control. |\n| reportValidity | `() => boolean` | Reports whether the control satisfies its constraints. https://mdn.dev/HTMLInputElement/reportValidity |\n| checkValidity | `() => boolean` | Checks whether the control satisfies its constraints. https://mdn.dev/HTMLInputElement/checkValidity |\n| setCustomValidity | `(message: string) => void` | Sets a custom validation message. https://mdn.dev/HTMLInputElement/setCustomValidity |\n| reset | `() => void` | Resets the control value to its initial value. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| change | `CustomEvent` | Dispatched when the value has changed (files located in event.target) |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border-color | `string` | [MDN](https://mdn.dev/CSS/border-color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |"
        }
      ]
    },
    {
      "name": "nve-file",
      "description": "A file picker is a control that enables users to choose a file value.\n---\n\n\n### **Events:**\n - **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n\n### **Slots:**\n - _default_ - Control input element\n- **label** - Label element\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--text-decoration** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_",
      "attributes": [
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.",
          "values": [
            { "name": "warning" },
            { "name": "error" },
            { "name": "success" },
            { "name": "disabled" }
          ]
        },
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "fit-text",
          "description": "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)",
          "values": []
        },
        {
          "name": "fit-content",
          "description": "Sets the input to match native default content block",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file"
        },
        {
          "name": "markdown",
          "url": "## nve-file\n\nA file picker is a control that enables users to choose a file value.\n\n### Example\n\n```html\n<nve-file>\n  <label>file</label>\n  <input type=\"file\" />\n  <nve-control-message>message</nve-control-message>\n</nve-file>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/file/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input element |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | 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. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| fitText (fit-text) | `boolean` | 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) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| i18n |  | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| nveControl | `string` |  |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n| showPicker |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --text-decoration | `string` | [MDN](https://mdn.dev/CSS/text-decoration) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
        }
      ]
    },
    {
      "name": "nve-format-datetime",
      "description": "Formats a date/time value as localized text using the Intl.DateTimeFormat API. Renders inside a semantic time element.\nGranular options (weekday, year, month, day, hour, minute, second) mirror the Intl.DateTimeFormat API. 'numeric' omits zero-padding, '2-digit' zero-pads.\n---\n\n\n### **Slots:**\n - _default_ - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration.",
      "attributes": [
        {
          "name": "date",
          "description": "Optional date string for values supplied by JavaScript or bound data.\nBy default, the component formats the element's text content, which also serves as the SSR fallback.\nWhen both are present, this property takes precedence.",
          "values": [{ "name": "default" }]
        },
        {
          "name": "locale",
          "description": "Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default.",
          "values": [{ "name": "default" }]
        },
        {
          "name": "weekday",
          "description": "Weekday representation: 'long' | 'short' | 'narrow'.",
          "values": [
            { "name": "long" },
            { "name": "short" },
            { "name": "narrow" },
            { "name": "default" }
          ]
        },
        {
          "name": "year",
          "description": "Year representation: 'numeric' | '2-digit'.",
          "values": [
            { "name": "numeric" },
            { "name": "2-digit" },
            { "name": "default" }
          ]
        },
        {
          "name": "month",
          "description": "Month representation: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow'.",
          "values": [
            { "name": "numeric" },
            { "name": "2-digit" },
            { "name": "long" },
            { "name": "short" },
            { "name": "narrow" },
            { "name": "default" }
          ]
        },
        {
          "name": "day",
          "description": "Day representation: 'numeric' | '2-digit'.",
          "values": [
            { "name": "numeric" },
            { "name": "2-digit" },
            { "name": "default" }
          ]
        },
        {
          "name": "hour",
          "description": "Hour representation: 'numeric' | '2-digit'.",
          "values": [
            { "name": "numeric" },
            { "name": "2-digit" },
            { "name": "default" }
          ]
        },
        {
          "name": "minute",
          "description": "Minute representation: 'numeric' | '2-digit'.",
          "values": [
            { "name": "numeric" },
            { "name": "2-digit" },
            { "name": "default" }
          ]
        },
        {
          "name": "second",
          "description": "Second representation: 'numeric' | '2-digit'.",
          "values": [
            { "name": "numeric" },
            { "name": "2-digit" },
            { "name": "default" }
          ]
        },
        {
          "name": "date-style",
          "description": "Preset date formatting style: 'full' | 'long' | 'medium' | 'short'.\nPreset styles take precedence over granular date and time part options.",
          "values": [
            { "name": "full" },
            { "name": "long" },
            { "name": "medium" },
            { "name": "short" },
            { "name": "default" }
          ]
        },
        {
          "name": "time-style",
          "description": "Preset time formatting style: 'full' | 'long' | 'medium' | 'short'.\nPreset styles take precedence over granular date and time part options.",
          "values": [
            { "name": "full" },
            { "name": "long" },
            { "name": "medium" },
            { "name": "short" },
            { "name": "default" }
          ]
        },
        {
          "name": "time-zone-name",
          "description": "Time zone name display: 'long' | 'short'. Use it with granular options only; preset styles ignore it.",
          "values": [
            { "name": "long" },
            { "name": "short" },
            { "name": "default" }
          ]
        },
        {
          "name": "time-zone",
          "description": "IANA time zone identifier (such as 'America/New_York', 'UTC').",
          "values": [{ "name": "default" }]
        }
      ],
      "references": []
    },
    {
      "name": "nve-format-number",
      "description": "A localized number formatter for currencies, percentages, units, and compact notation, backed by Intl.NumberFormat.\nProvide a `currency` attribute when `formatStyle` is `currency`, and a `unit` attribute when `formatStyle` is `unit`.\n---\n\n\n### **Slots:**\n - _default_ - Numeric string to format (such as 1234567 or 1234.56). Serves as fallback before hydration.",
      "attributes": [
        {
          "name": "number",
          "description": "Optional numeric string for values supplied by JavaScript or bound data.\nBy default, the component formats the element's text content, which also serves as the SSR fallback.\nWhen both are present, this property takes precedence.",
          "values": [{ "name": "default" }]
        },
        {
          "name": "locale",
          "description": "Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default.",
          "values": [{ "name": "default" }]
        },
        {
          "name": "format-style",
          "description": "Formatting style: 'decimal' | 'currency' | 'percent' | 'unit'.",
          "values": [
            { "name": "decimal" },
            { "name": "currency" },
            { "name": "percent" },
            { "name": "unit" }
          ]
        },
        {
          "name": "currency",
          "description": "ISO 4217 currency code (such as USD or EUR). Required when formatStyle is currency.",
          "values": [{ "name": "default" }]
        },
        {
          "name": "currency-sign",
          "description": "Currency sign style: 'standard' | 'accounting'.",
          "values": [
            { "name": "standard" },
            { "name": "accounting" },
            { "name": "default" }
          ]
        },
        {
          "name": "currency-display",
          "description": "Currency display style: 'symbol' | 'code' | 'name' | 'narrowSymbol'.",
          "values": [
            { "name": "symbol" },
            { "name": "code" },
            { "name": "name" },
            { "name": "narrowSymbol" },
            { "name": "default" }
          ]
        },
        {
          "name": "unit",
          "description": "Unit identifier (such as kilometer or byte). Required when formatStyle is unit.",
          "values": [{ "name": "default" }]
        },
        {
          "name": "unit-display",
          "description": "Unit display style: 'short' | 'long' | 'narrow'.",
          "values": [
            { "name": "short" },
            { "name": "long" },
            { "name": "narrow" },
            { "name": "default" }
          ]
        },
        {
          "name": "notation",
          "description": "Number notation: 'standard' | 'scientific' | 'engineering' | 'compact'.",
          "values": [
            { "name": "standard" },
            { "name": "scientific" },
            { "name": "engineering" },
            { "name": "compact" },
            { "name": "default" }
          ]
        },
        {
          "name": "compact-display",
          "description": "Compact notation display: 'short' | 'long'. Only applies when notation is compact.",
          "values": [
            { "name": "short" },
            { "name": "long" },
            { "name": "default" }
          ]
        },
        {
          "name": "sign-display",
          "description": "Sign display: 'auto' | 'never' | 'always' | 'exceptZero'.",
          "values": [
            { "name": "auto" },
            { "name": "never" },
            { "name": "always" },
            { "name": "exceptZero" },
            { "name": "default" }
          ]
        },
        {
          "name": "use-grouping",
          "description": "Grouping separators: 'auto' | 'always' | 'min2' | 'true' | 'false'.",
          "values": [{ "name": "default" }]
        },
        {
          "name": "minimum-fraction-digits",
          "description": "Pad fraction output to at least this many digits (0-20).",
          "values": [{ "name": "default" }]
        },
        {
          "name": "maximum-fraction-digits",
          "description": "Round fraction output to at most this many digits (0-20).",
          "values": [{ "name": "default" }]
        },
        {
          "name": "minimum-integer-digits",
          "description": "Pad integer output to at least this many digits (1-21).",
          "values": [{ "name": "default" }]
        }
      ],
      "references": []
    },
    {
      "name": "nve-format-relative-time",
      "description": "Formats a date/time value as localized relative text using the Intl.RelativeTimeFormat API. Renders inside a semantic time element.\nOptions mirror the Intl.RelativeTimeFormat API. When unit is 'auto', the component selects the best unit based on the time difference.\n---\n\n\n### **Slots:**\n - _default_ - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration.",
      "attributes": [
        {
          "name": "date",
          "description": "Optional date string for values supplied by JavaScript or bound data.\nBy default, the component formats the element's text content, which also serves as the SSR fallback.\nWhen both are present, this property takes precedence.",
          "values": [{ "name": "default" }]
        },
        {
          "name": "locale",
          "description": "Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default.",
          "values": [{ "name": "default" }]
        },
        {
          "name": "numeric",
          "description": "Numeric formatting: 'always' | 'auto'. When 'auto', enables natural language forms such as 'yesterday' instead of '1 day ago'.",
          "values": [{ "name": "always" }, { "name": "auto" }]
        },
        {
          "name": "format-style",
          "description": "Formatting length: 'long' | 'short' | 'narrow'. Controls verbosity (such as '3 days ago' vs '3d ago'). Maps to Intl.RelativeTimeFormat style option.",
          "values": [
            { "name": "long" },
            { "name": "short" },
            { "name": "narrow" }
          ]
        },
        {
          "name": "unit",
          "description": "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.",
          "values": [
            { "name": "second" },
            { "name": "minute" },
            { "name": "hour" },
            { "name": "day" },
            { "name": "week" },
            { "name": "month" },
            { "name": "year" },
            { "name": "auto" }
          ]
        },
        {
          "name": "sync",
          "description": "When present, auto-updates the displayed relative time at appropriate intervals.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "nve-control-group",
      "description": "Groups many related form controls under a shared label and validation context for semantically linked inputs.\n---\n\n\n### **Slots:**\n - _default_ - Control input elements\n\n### **CSS Properties:**\n - **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-text-transform** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_",
      "attributes": [
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals"
        },
        {
          "name": "markdown",
          "url": "## nve-control-group\n\nGroups many related form controls under a shared label and validation context for semantically linked inputs.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/forms/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input elements |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |"
        }
      ]
    },
    {
      "name": "nve-control-message",
      "description": "Defining a Validity State on a control-message allows messages to show conditionally based on the current HTML5 validity state.\n---\n\n\n### **Slots:**\n - _default_ - default slot for content\n\n### **CSS Properties:**\n - **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon** - The icon element",
      "attributes": [
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.",
          "values": [
            { "name": "warning" },
            { "name": "error" },
            { "name": "success" },
            { "name": "disabled" },
            { "name": "default" }
          ]
        },
        {
          "name": "error",
          "description": "Validation error code for current form control\nhttps://developer.mozilla.org/en-US/docs/Web/API/ValidityState",
          "values": [
            { "name": "badInput" },
            { "name": "customError" },
            { "name": "patternMismatch" },
            { "name": "rangeOverflow" },
            { "name": "rangeUnderflow" },
            { "name": "stepMismatch" },
            { "name": "tooLong" },
            { "name": "tooShort" },
            { "name": "typeMismatch" },
            { "name": "valid" },
            { "name": "valueMissing" }
          ]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals"
        },
        {
          "name": "markdown",
          "url": "## nve-control-message\n\nDefining a Validity State on a control-message allows messages to show conditionally based on the current HTML5 validity state.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/forms/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for content |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled' \\| \"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. |\n| error | `'badInput' \\| 'customError' \\| 'patternMismatch' \\| 'rangeOverflow' \\| 'rangeUnderflow' \\| 'stepMismatch' \\| 'tooLong' \\| 'tooShort' \\| 'typeMismatch' \\| 'valid' \\| 'valueMissing' \\| null` | Validation error code for current form control https://mdn.dev/ValidityState |\n| slot | `string` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |"
        }
      ]
    },
    {
      "name": "nve-control",
      "description": "Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.\n---\n\n\n### **Events:**\n - **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n\n### **Slots:**\n - _default_ - Control input element\n- **label** - Label element\n\n### **CSS Properties:**\n - **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_",
      "attributes": [
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.",
          "values": [
            { "name": "warning" },
            { "name": "error" },
            { "name": "success" },
            { "name": "disabled" }
          ]
        },
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "fit-text",
          "description": "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)",
          "values": []
        },
        {
          "name": "fit-content",
          "description": "Sets the input to match native default content block",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals"
        },
        {
          "name": "markdown",
          "url": "## nve-control\n\nWraps a form input with its associated label and validation messages, managing layout and accessibility associations.\n\n### Example\n\n```html\n<nve-control>\n  <label>label</label>\n  <input />\n  <nve-control-message>message</nve-control-message>\n</nve-control>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/forms/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input element |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | 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. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| fitText (fit-text) | `boolean` | 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) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| i18n |  | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| nveControl | `string` |  |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n| showPicker |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
        }
      ]
    },
    {
      "name": "nve-grid-cell",
      "description": "Represents an individual data cell within a grid row, displaying content aligned to its parent column.\n---\n\n\n### **Slots:**\n - _default_ - default slot for content\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--min-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) _(default: undefined)_\n- **--min-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--border-left** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left) _(default: undefined)_\n- **--border-right** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right) _(default: undefined)_\n- **--justify-content** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/grid/"
        },
        {
          "name": "markdown",
          "url": "## nve-grid-cell\n\nRepresents an individual data cell within a grid row, displaying content aligned to its parent column.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/grid/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for content |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |\n| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --border-left | `string` | [MDN](https://mdn.dev/CSS/border-left) |\n| --border-right | `string` | [MDN](https://mdn.dev/CSS/border-right) |\n| --justify-content | `string` | [MDN](https://mdn.dev/CSS/justify-content) |"
        }
      ]
    },
    {
      "name": "nve-grid-column",
      "description": "Defines a column header within a grid, specifying the column's label, width, and alignment for all cells beneath it.\n---\n\n\n### **Events:**\n - **nve-grid-column-resize**\n\n### **Slots:**\n - _default_ - default slot for content\n- **actions** - slot for column actions\n\n### **CSS Properties:**\n - **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--min-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) _(default: undefined)_\n- **--justify-content** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) _(default: undefined)_\n- **--border-left** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left) _(default: undefined)_\n- **--border-right** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right) _(default: undefined)_",
      "attributes": [
        {
          "name": "width",
          "description": "Only set a fixed px width when you know the grid width. Most cases this should remain unset.\nIf the total width of all columns is less than the grid width then the last column fills the remaining space.\nBy default column widths are evenly divided unless width is explicitly provided.",
          "values": []
        },
        {
          "name": "position",
          "description": "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)",
          "values": [
            { "name": "fixed" },
            { "name": "sticky" },
            { "name": "''" }
          ]
        },
        {
          "name": "column-align",
          "description": "Control the content alignment within a given column.",
          "values": [
            { "name": "start" },
            { "name": "center" },
            { "name": "end" }
          ]
        },
        { "name": "aria-colindex", "values": [] }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/grid/"
        },
        {
          "name": "markdown",
          "url": "## nve-grid-column\n\nDefines a column header within a grid, specifying the column's label, width, and alignment for all cells beneath it.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/grid/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for content |\n| actions | `string` | slot for column actions |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| width | `string` | 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. |\n| position | `'fixed' \\| 'sticky' \\| ''` | Determines the position of an element along both inline and block axis. [MDN](https://mdn.dev/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) |\n| columnAlign (column-align) | `'start' \\| 'center' \\| 'end'` | Control the content alignment within a given column. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| nve-grid-column-resize | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |\n| --justify-content | `string` | [MDN](https://mdn.dev/CSS/justify-content) |\n| --border-left | `string` | [MDN](https://mdn.dev/CSS/border-left) |\n| --border-right | `string` | [MDN](https://mdn.dev/CSS/border-right) |"
        }
      ]
    },
    {
      "name": "nve-grid-footer",
      "description": "Grid footer displays contextual information or user actions such as pagination.\n---\n\n\n### **Slots:**\n - _default_ - default slot for content\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/grid/"
        },
        {
          "name": "markdown",
          "url": "## nve-grid-footer\n\nGrid footer displays contextual information or user actions such as pagination.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/grid/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for content |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| slot | `string` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |"
        }
      ]
    },
    {
      "name": "nve-grid",
      "description": "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.\n---\n\n\n### **Methods:**\n - **scrollTo(options: _ScrollToOptions_): _Promise<void>_** - Scroll to a specific position in the grid.\n\n### **Slots:**\n - _default_ - default slot for content\n- **footer** - slot for grid-footer or toolbar\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--box-shadow** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--row-height** - fixed height of each row _(default: undefined)_\n- **--scroll-height** - height of the scrollable area _(default: undefined)_",
      "attributes": [
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.\n\n- `full` Element container optimizes for filling its container bounds.",
          "values": [
            { "name": "flat" },
            { "name": "full" },
            { "name": "default" }
          ]
        },
        {
          "name": "stripe",
          "description": "Determine style variant stripe rows",
          "values": []
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/grid/"
        },
        {
          "name": "markdown",
          "url": "## nve-grid\n\nA 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.\n\n### Example\n\n```html\n<nve-grid>\n  <nve-grid-header>\n    <nve-grid-column>column 0</nve-grid-column><nve-grid-column>column 1</nve-grid-column\n    ><nve-grid-column>column 2</nve-grid-column><nve-grid-column>column 3</nve-grid-column\n    ><nve-grid-column>column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell\n    ><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell\n    ><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell\n    ><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell><nve-grid-cell>cell 3-2</nve-grid-cell\n    ><nve-grid-cell>cell 3-3</nve-grid-cell><nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell><nve-grid-cell>cell 4-2</nve-grid-cell\n    ><nve-grid-cell>cell 4-3</nve-grid-cell><nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell><nve-grid-cell>cell 5-1</nve-grid-cell><nve-grid-cell>cell 5-2</nve-grid-cell\n    ><nve-grid-cell>cell 5-3</nve-grid-cell><nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell><nve-grid-cell>cell 6-1</nve-grid-cell><nve-grid-cell>cell 6-2</nve-grid-cell\n    ><nve-grid-cell>cell 6-3</nve-grid-cell><nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell><nve-grid-cell>cell 7-1</nve-grid-cell><nve-grid-cell>cell 7-2</nve-grid-cell\n    ><nve-grid-cell>cell 7-3</nve-grid-cell><nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell><nve-grid-cell>cell 8-1</nve-grid-cell><nve-grid-cell>cell 8-2</nve-grid-cell\n    ><nve-grid-cell>cell 8-3</nve-grid-cell><nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell><nve-grid-cell>cell 9-1</nve-grid-cell><nve-grid-cell>cell 9-2</nve-grid-cell\n    ><nve-grid-cell>cell 9-3</nve-grid-cell><nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/grid/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for content |\n| footer | `string` | slot for grid-footer or toolbar |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat' \\| 'full' \\| \"default\"` | 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. |\n| stripe | `boolean` | Determine style variant stripe rows |\n| scrollTo |  | Scroll to a specific position in the grid. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --row-height | `string` | fixed height of each row |\n| --scroll-height | `string` | height of the scrollable area |"
        }
      ]
    },
    {
      "name": "nve-grid-header",
      "description": "Contains the column headers of a grid, managing column widths and providing structural context for the data rows below.\n---\n\n\n### **Slots:**\n - _default_ - default slot for `nve-grid-column`\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border-bottom** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/grid/"
        },
        {
          "name": "markdown",
          "url": "## nve-grid-header\n\nContains the column headers of a grid, managing column widths and providing structural context for the data rows below.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/grid/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for `nve-grid-column` |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
        }
      ]
    },
    {
      "name": "nve-grid-placeholder",
      "description": "Placeholder displays a message while data loads for the grid or shows empty states for datasets.\n---\n\n\n### **Slots:**\n - _default_ - default slot for content\n\n### **CSS Properties:**\n - **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/grid/"
        },
        {
          "name": "markdown",
          "url": "## nve-grid-placeholder\n\nPlaceholder displays a message while data loads for the grid or shows empty states for datasets.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/grid/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for content |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
        }
      ]
    },
    {
      "name": "nve-grid-row",
      "description": "Represents a horizontal row of data cells within a grid, supporting selection and interactive states.\n---\n\n\n### **Slots:**\n - _default_ - default slot for `nve-grid-cell`\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border-bottom** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) _(default: undefined)_",
      "attributes": [
        {
          "name": "selected",
          "description": "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)\n- `true` The element holds selection and represents the user's current choice within the group.\n\n- `false` The element does not hold selection and the user can choose it.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/grid/"
        },
        {
          "name": "markdown",
          "url": "## nve-grid-row\n\nRepresents a horizontal row of data cells within a grid, supporting selection and interactive states.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/grid/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for `nve-grid-cell` |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/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. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |"
        }
      ]
    },
    {
      "name": "nve-icon-button",
      "description": "An icon button is a button that displays only an icon without a visual label.\n---\n\n\n### **Slots:**\n - _default_ - default slot for custom icons\n\n### **CSS Properties:**\n - **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--line-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--text-decoration** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) _(default: undefined)_\n- **--text-align** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--text-transform** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) _(default: undefined)_\n- **--min-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon** - The icon element",
      "attributes": [
        {
          "name": "icon-name",
          "description": "Sets the icon name, which determines which icon to display.",
          "values": [
            { "name": "placeholder" },
            { "name": "caret" },
            { "name": "person" },
            { "name": "menu" },
            { "name": "cancel" },
            { "name": "gear" },
            { "name": "chevron" },
            { "name": "logout" },
            { "name": "copy" },
            { "name": "more-actions" },
            { "name": "add" },
            { "name": "arrow" },
            { "name": "delete" },
            { "name": "download" },
            { "name": "search" },
            { "name": "split-vertical" },
            { "name": "sparkles" },
            { "name": "branch" },
            { "name": "refresh" },
            { "name": "double-chevron" },
            { "name": "academic-cap" },
            { "name": "add-asset" },
            { "name": "add-comment" },
            { "name": "add-grid" },
            { "name": "add-user" },
            { "name": "ancestors" },
            { "name": "archive" },
            { "name": "arrow-angle" },
            { "name": "arrow-both" },
            { "name": "arrow-cycle" },
            { "name": "arrow-path-rounded-square" },
            { "name": "arrow-stop" },
            { "name": "at-symbol" },
            { "name": "backspace" },
            { "name": "bar-pill-stack" },
            { "name": "bars-3" },
            { "name": "bars-3-bottom-left" },
            { "name": "bars-3-bottom-right" },
            { "name": "bars-3-center-left" },
            { "name": "bars-4" },
            { "name": "beaker" },
            { "name": "bell" },
            { "name": "bell-slash" },
            { "name": "bell-stroke" },
            { "name": "bold" },
            { "name": "book" },
            { "name": "bookmark" },
            { "name": "bookmark-stroke" },
            { "name": "bounding-box" },
            { "name": "briefcase" },
            { "name": "broadcast" },
            { "name": "browser" },
            { "name": "bug" },
            { "name": "calendar" },
            { "name": "camera" },
            { "name": "carets-closed-square" },
            { "name": "carousel" },
            { "name": "category-list" },
            { "name": "chart-bar" },
            { "name": "chat-bubble" },
            { "name": "chat-bubbles" },
            { "name": "check" },
            { "name": "check-badge" },
            { "name": "checklist" },
            { "name": "checkmark-circle" },
            { "name": "chip" },
            { "name": "circle" },
            { "name": "circle-angled-line" },
            { "name": "circle-dash" },
            { "name": "circle-dot" },
            { "name": "circle-dot-arrows" },
            { "name": "circle-half" },
            { "name": "circle-rule" },
            { "name": "circle-tick" },
            { "name": "clipboard" },
            { "name": "clock" },
            { "name": "clock-circle-arrow" },
            { "name": "cloud" },
            { "name": "cloud-download" },
            { "name": "cloud-upload" },
            { "name": "code" },
            { "name": "collapse-all" },
            { "name": "collapse-details" },
            { "name": "color-palette" },
            { "name": "columns" },
            { "name": "compare" },
            { "name": "computer" },
            { "name": "connect-node" },
            { "name": "connected-blocks" },
            { "name": "cross-hairs" },
            { "name": "cursor-rays" },
            { "name": "cursor-ripples" },
            { "name": "data-management" },
            { "name": "delete-node" },
            { "name": "doc-checkmark" },
            { "name": "dock-bottom" },
            { "name": "dock-none" },
            { "name": "dock-side" },
            { "name": "document" },
            { "name": "document-clipboard" },
            { "name": "dot" },
            { "name": "dot-stroke" },
            { "name": "drag" },
            { "name": "dropper" },
            { "name": "duplicate" },
            { "name": "edit" },
            { "name": "ellipses" },
            { "name": "envelope" },
            { "name": "exclamation-circle" },
            { "name": "exclamation-mark" },
            { "name": "exclamation-triangle" },
            { "name": "expand-all" },
            { "name": "expand-details" },
            { "name": "expression" },
            { "name": "eye" },
            { "name": "eye-hidden" },
            { "name": "face-frown" },
            { "name": "face-smile" },
            { "name": "fast-forward" },
            { "name": "fast-forward-10" },
            { "name": "film" },
            { "name": "filter" },
            { "name": "filter-stroke" },
            { "name": "flag" },
            { "name": "flag-stroke" },
            { "name": "fold" },
            { "name": "folder" },
            { "name": "fork" },
            { "name": "globe" },
            { "name": "globe-alt-stroke" },
            { "name": "group" },
            { "name": "group-boxes" },
            { "name": "hand" },
            { "name": "hash" },
            { "name": "heading" },
            { "name": "home" },
            { "name": "horizontal-rule" },
            { "name": "hourglass" },
            { "name": "hourglass-end" },
            { "name": "hourglass-mid" },
            { "name": "hourglass-start" },
            { "name": "identification" },
            { "name": "image" },
            { "name": "inbox" },
            { "name": "infinity" },
            { "name": "information-circle-stroke" },
            { "name": "inspect" },
            { "name": "italic" },
            { "name": "key" },
            { "name": "keyboard" },
            { "name": "laptop-phone" },
            { "name": "layers" },
            { "name": "lifebuoy" },
            { "name": "lightbulb" },
            { "name": "lightning-bolt" },
            { "name": "link" },
            { "name": "list-ordered" },
            { "name": "list-unordered" },
            { "name": "lock" },
            { "name": "login" },
            { "name": "looping" },
            { "name": "looping-off" },
            { "name": "map" },
            { "name": "map-drives" },
            { "name": "map-pin" },
            { "name": "markdown" },
            { "name": "maximize" },
            { "name": "megaphone" },
            { "name": "merge" },
            { "name": "meter" },
            { "name": "minimize" },
            { "name": "minus" },
            { "name": "minus-circle" },
            { "name": "moon" },
            { "name": "multiselect" },
            { "name": "music-note" },
            { "name": "newspaper" },
            { "name": "not-allowed" },
            { "name": "numbers" },
            { "name": "office-building" },
            { "name": "outline" },
            { "name": "paper-airplane" },
            { "name": "paper-clip" },
            { "name": "pause" },
            { "name": "pencil-square" },
            { "name": "person-2" },
            { "name": "person-3" },
            { "name": "person-circle" },
            { "name": "phone" },
            { "name": "picture-in-picture" },
            { "name": "pie-chart" },
            { "name": "pin" },
            { "name": "pizza-slice" },
            { "name": "play" },
            { "name": "plug" },
            { "name": "plus-circle" },
            { "name": "plus-minus" },
            { "name": "pointer" },
            { "name": "pointer-stroke" },
            { "name": "priority-high" },
            { "name": "priority-low" },
            { "name": "priority-medium" },
            { "name": "projector" },
            { "name": "pull-close" },
            { "name": "pull-draft" },
            { "name": "pull-open" },
            { "name": "pulse" },
            { "name": "puzzle-piece" },
            { "name": "question-mark-circle" },
            { "name": "question-mark-circle-stroke" },
            { "name": "rectangle-group" },
            { "name": "rectangle-stack-horizontal" },
            { "name": "rectangle-stack-vertical" },
            { "name": "redo" },
            { "name": "reply" },
            { "name": "rewind" },
            { "name": "rewind-10" },
            { "name": "rocketship" },
            { "name": "running" },
            { "name": "scale" },
            { "name": "scissors" },
            { "name": "sensor" },
            { "name": "server" },
            { "name": "server-stack" },
            { "name": "shapes" },
            { "name": "share" },
            { "name": "signal" },
            { "name": "signal-slash" },
            { "name": "signpost" },
            { "name": "sort-ascending" },
            { "name": "sort-descending" },
            { "name": "soundwave" },
            { "name": "split-horizontal" },
            { "name": "split-none" },
            { "name": "star" },
            { "name": "star-half" },
            { "name": "star-stroke" },
            { "name": "start" },
            { "name": "status-offline" },
            { "name": "status-online" },
            { "name": "stop" },
            { "name": "stop-sign" },
            { "name": "stopwatch" },
            { "name": "strikethrough" },
            { "name": "sun" },
            { "name": "swatch" },
            { "name": "switch" },
            { "name": "switch-apps" },
            { "name": "table" },
            { "name": "tag" },
            { "name": "task" },
            { "name": "telescope" },
            { "name": "template" },
            { "name": "terminal" },
            { "name": "thumb" },
            { "name": "thumb-stroke" },
            { "name": "traffic-cone" },
            { "name": "transparent-box" },
            { "name": "trend-down" },
            { "name": "trend-up" },
            { "name": "trophy" },
            { "name": "truck" },
            { "name": "typography" },
            { "name": "undo" },
            { "name": "unlock" },
            { "name": "upload" },
            { "name": "video-camera" },
            { "name": "view-as-grid" },
            { "name": "volume" },
            { "name": "volume-muted" },
            { "name": "wifi" },
            { "name": "wrench" },
            { "name": "x-circle" },
            { "name": "zoom-in" },
            { "name": "zoom-out" }
          ]
        },
        {
          "name": "direction",
          "description": "Sets the direction of the icon.\nOnly supported by expand-panel/collapse-panel (horizontal axis) and arrow/caret/chevron icons (4-directions)",
          "values": [
            { "name": "up" },
            { "name": "down" },
            { "name": "left" },
            { "name": "right" }
          ]
        },
        {
          "name": "size",
          "description": "Controls the visual scale of an element to match its importance and available space.\n- `sm` Compact size for dense layouts or secondary elements with less visual prominence.\n\n- `md` Standard size that works well in most contexts and provides balanced visibility.\n\n- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts.",
          "values": [
            { "name": "sm" },
            { "name": "md" },
            { "name": "lg" },
            { "name": "default" }
          ]
        },
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.\n\n- `inline` Element container reduces to fit within inline content such as a block of text.",
          "values": [
            { "name": "flat" },
            { "name": "inline" },
            { "name": "default" }
          ]
        },
        {
          "name": "interaction",
          "description": "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.\n- `emphasis` Shows the interaction targets emphasis or highlighting primary actions.\n\n- `destructive` Shows the interaction targets destructive actions such as deleting or removing.",
          "values": [{ "name": "emphasis" }, { "name": "destructive" }]
        },
        {
          "name": "pressed",
          "description": "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)\n- `true` The button is in the pressed (on) state and the associated action or setting is active.\n\n- `false` The button is in the unpressed (off) state and the associated action or setting is inactive.",
          "values": []
        },
        {
          "name": "expanded",
          "description": "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)\n- `true` The associated content expands and becomes visible to the user.\n\n- `false` The associated content collapses and hides from the user.",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Like input readonly, sets a button semantically as visual treatment only.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly",
          "values": []
        },
        {
          "name": "form",
          "description": "Like input form, sets a button to submit a form outside its parent form.\nReturns a reference to the form element if available.\nhttps://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form",
          "values": [{ "name": "HTMLFormElement" }]
        },
        {
          "name": "name",
          "description": "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)",
          "values": []
        },
        {
          "name": "value",
          "description": "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)",
          "values": []
        },
        {
          "name": "type",
          "description": "Defines the button behavior when associated within a form element.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type",
          "values": [
            { "name": "button" },
            { "name": "submit" },
            { "name": "reset" }
          ]
        },
        {
          "name": "disabled",
          "description": "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)\n- `true` The element has a disabled state and does not accept interaction.\n\n- `false` The element has an enabled state and accepts interaction.",
          "values": []
        },
        {
          "name": "selected",
          "description": "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)\n- `true` The element holds selection and represents the user's current choice within the group.\n\n- `false` The element does not hold selection and the user can choose it.",
          "values": []
        },
        {
          "name": "current",
          "description": "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)\n- `page` Marks the current page within a set of navigation links.\n\n- `step` Marks the current step within a multi-step process or workflow.",
          "values": [{ "name": "page" }, { "name": "step" }]
        },
        {
          "name": "popovertarget",
          "description": "The id reference of the element that receives the popover.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget",
          "values": []
        },
        {
          "name": "popovertargetaction",
          "description": "The popover target action to perform on the popover target element.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction",
          "values": [
            { "name": "show" },
            { "name": "hide" },
            { "name": "toggle" }
          ]
        },
        {
          "name": "commandfor",
          "description": "The element that receives the command.\nhttps://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API",
          "values": [{ "name": "HTMLElement" }]
        },
        {
          "name": "command",
          "description": "The command to execute on the element.\nhttps://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API",
          "values": []
        },
        {
          "name": "interestfor",
          "description": "The element that receives the interest.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement",
          "values": [{ "name": "HTMLElement" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/button/"
        },
        {
          "name": "markdown",
          "url": "## nve-icon-button\n\nAn icon button is a button that displays only an icon without a visual label.\n\n### Example\n\n```html\n<nve-icon-button icon-name=\"menu\"></nve-icon-button>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/icon-button/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for custom icons |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| iconName (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 icon name, which determines which icon to display. |\n| direction | `'up' \\| 'down' \\| 'left' \\| 'right'` | Sets the direction of the icon. Only supported by expand-panel/collapse-panel (horizontal axis) and arrow/caret/chevron icons (4-directions) |\n| size | `'sm' \\| 'md' \\| 'lg' \\| \"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. |\n| container | `'flat' \\| 'inline' \\| \"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. |\n| interaction | `'emphasis' \\| 'destructive'` | 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. |\n| pressed | `boolean` | Indicates the current state of a toggle button that switches on or off. [MDN](https://mdn.dev/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. |\n| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/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. |\n| readOnly (readonly) | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |\n| form | `string \\| HTMLFormElement \\| null` | Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://mdn.dev/ElementInternals/form |\n| name | `string` ... (use `icons_list` tool for full list) | The name of the button, submitted as a pair with the button value as part of the form data. https://mdn.dev/HTML/Element/button#attr-name |\n| value | `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://mdn.dev/HTML/Element/input#value) |\n| type | `'button' \\| 'submit' \\| 'reset'` | Defines the button behavior when associated within a form element. https://mdn.dev/HTML/Element/button#attr-type |\n| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/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. |\n| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/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. |\n| current | `'page' \\| 'step'` | Indicates the element that represents the user's current location or position within a set. [MDN](https://mdn.dev/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. |\n| popoverTargetElement | `HTMLElement \\| null` | Establishes a relationship between a popover and its invoker button. https://mdn.dev/HTMLInputElement/popoverTargetElement |\n| popovertarget | `string` | The id reference of the element that receives the popover. https://mdn.dev/HTML/Reference/Elements/button#popovertarget |\n| popoverTargetAction (popovertargetaction) | `'show' \\| 'hide' \\| 'toggle'` | The popover target action to perform on the popover target element. https://mdn.dev/HTMLInputElement/popoverTargetAction |\n| commandForElement (commandfor) | `HTMLElement \\| null` | The element that receives the command. https://mdn.dev/Invoker_Commands_API |\n| command | `string` | The command to execute on the element. https://mdn.dev/Invoker_Commands_API |\n| interestForElement (interestfor) | `HTMLElement \\| null` | The element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --line-height | `string` | [MDN](https://mdn.dev/CSS/line-height) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --text-decoration | `string` | [MDN](https://mdn.dev/CSS/text-decoration) |\n| --text-align | `string` | [MDN](https://mdn.dev/CSS/text-align) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |"
        }
      ]
    },
    {
      "name": "nve-icon",
      "description": "An icon is a graphic symbol designed to visually show the purpose of an interface element.\n---\n\n\n### **Slots:**\n - _default_ - Custom SVG content to override the named icon\n\n### **CSS Properties:**\n - **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_",
      "attributes": [
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `danger` Signals destructive or irreversible actions that need extra attention and confirmation.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.\n\n- `accent` Highlights important actions or draws attention to primary interactive elements.",
          "values": [
            { "name": "warning" },
            { "name": "danger" },
            { "name": "success" },
            { "name": "accent" },
            { "name": "default" }
          ]
        },
        {
          "name": "size",
          "description": "Controls the visual scale of an element to match its importance and available space.\n- `sm` Compact size for dense layouts or secondary elements with less visual prominence.\n\n- `md` Standard size that works well in most contexts and provides balanced visibility.\n\n- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts.",
          "values": [
            { "name": "sm" },
            { "name": "md" },
            { "name": "lg" },
            { "name": "xs" },
            { "name": "xl" },
            { "name": "default" }
          ]
        },
        {
          "name": "direction",
          "description": "Sets the direction of the icon. Only supported by expand-panel/collapse-panel (horizontal axis) and arrow/caret/chevron icons (4-directions)",
          "values": [
            { "name": "up" },
            { "name": "down" },
            { "name": "left" },
            { "name": "right" },
            { "name": "default" }
          ]
        },
        {
          "name": "name",
          "description": "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)",
          "values": [
            { "name": "placeholder" },
            { "name": "caret" },
            { "name": "person" },
            { "name": "menu" },
            { "name": "cancel" },
            { "name": "gear" },
            { "name": "chevron" },
            { "name": "logout" },
            { "name": "copy" },
            { "name": "more-actions" },
            { "name": "add" },
            { "name": "arrow" },
            { "name": "delete" },
            { "name": "download" },
            { "name": "search" },
            { "name": "split-vertical" },
            { "name": "sparkles" },
            { "name": "branch" },
            { "name": "refresh" },
            { "name": "double-chevron" },
            { "name": "academic-cap" },
            { "name": "add-asset" },
            { "name": "add-comment" },
            { "name": "add-grid" },
            { "name": "add-user" },
            { "name": "ancestors" },
            { "name": "archive" },
            { "name": "arrow-angle" },
            { "name": "arrow-both" },
            { "name": "arrow-cycle" },
            { "name": "arrow-path-rounded-square" },
            { "name": "arrow-stop" },
            { "name": "at-symbol" },
            { "name": "backspace" },
            { "name": "bar-pill-stack" },
            { "name": "bars-3" },
            { "name": "bars-3-bottom-left" },
            { "name": "bars-3-bottom-right" },
            { "name": "bars-3-center-left" },
            { "name": "bars-4" },
            { "name": "beaker" },
            { "name": "bell" },
            { "name": "bell-slash" },
            { "name": "bell-stroke" },
            { "name": "bold" },
            { "name": "book" },
            { "name": "bookmark" },
            { "name": "bookmark-stroke" },
            { "name": "bounding-box" },
            { "name": "briefcase" },
            { "name": "broadcast" },
            { "name": "browser" },
            { "name": "bug" },
            { "name": "calendar" },
            { "name": "camera" },
            { "name": "carets-closed-square" },
            { "name": "carousel" },
            { "name": "category-list" },
            { "name": "chart-bar" },
            { "name": "chat-bubble" },
            { "name": "chat-bubbles" },
            { "name": "check" },
            { "name": "check-badge" },
            { "name": "checklist" },
            { "name": "checkmark-circle" },
            { "name": "chip" },
            { "name": "circle" },
            { "name": "circle-angled-line" },
            { "name": "circle-dash" },
            { "name": "circle-dot" },
            { "name": "circle-dot-arrows" },
            { "name": "circle-half" },
            { "name": "circle-rule" },
            { "name": "circle-tick" },
            { "name": "clipboard" },
            { "name": "clock" },
            { "name": "clock-circle-arrow" },
            { "name": "cloud" },
            { "name": "cloud-download" },
            { "name": "cloud-upload" },
            { "name": "code" },
            { "name": "collapse-all" },
            { "name": "collapse-details" },
            { "name": "color-palette" },
            { "name": "columns" },
            { "name": "compare" },
            { "name": "computer" },
            { "name": "connect-node" },
            { "name": "connected-blocks" },
            { "name": "cross-hairs" },
            { "name": "cursor-rays" },
            { "name": "cursor-ripples" },
            { "name": "data-management" },
            { "name": "delete-node" },
            { "name": "doc-checkmark" },
            { "name": "dock-bottom" },
            { "name": "dock-none" },
            { "name": "dock-side" },
            { "name": "document" },
            { "name": "document-clipboard" },
            { "name": "dot" },
            { "name": "dot-stroke" },
            { "name": "drag" },
            { "name": "dropper" },
            { "name": "duplicate" },
            { "name": "edit" },
            { "name": "ellipses" },
            { "name": "envelope" },
            { "name": "exclamation-circle" },
            { "name": "exclamation-mark" },
            { "name": "exclamation-triangle" },
            { "name": "expand-all" },
            { "name": "expand-details" },
            { "name": "expression" },
            { "name": "eye" },
            { "name": "eye-hidden" },
            { "name": "face-frown" },
            { "name": "face-smile" },
            { "name": "fast-forward" },
            { "name": "fast-forward-10" },
            { "name": "film" },
            { "name": "filter" },
            { "name": "filter-stroke" },
            { "name": "flag" },
            { "name": "flag-stroke" },
            { "name": "fold" },
            { "name": "folder" },
            { "name": "fork" },
            { "name": "globe" },
            { "name": "globe-alt-stroke" },
            { "name": "group" },
            { "name": "group-boxes" },
            { "name": "hand" },
            { "name": "hash" },
            { "name": "heading" },
            { "name": "home" },
            { "name": "horizontal-rule" },
            { "name": "hourglass" },
            { "name": "hourglass-end" },
            { "name": "hourglass-mid" },
            { "name": "hourglass-start" },
            { "name": "identification" },
            { "name": "image" },
            { "name": "inbox" },
            { "name": "infinity" },
            { "name": "information-circle-stroke" },
            { "name": "inspect" },
            { "name": "italic" },
            { "name": "key" },
            { "name": "keyboard" },
            { "name": "laptop-phone" },
            { "name": "layers" },
            { "name": "lifebuoy" },
            { "name": "lightbulb" },
            { "name": "lightning-bolt" },
            { "name": "link" },
            { "name": "list-ordered" },
            { "name": "list-unordered" },
            { "name": "lock" },
            { "name": "login" },
            { "name": "looping" },
            { "name": "looping-off" },
            { "name": "map" },
            { "name": "map-drives" },
            { "name": "map-pin" },
            { "name": "markdown" },
            { "name": "maximize" },
            { "name": "megaphone" },
            { "name": "merge" },
            { "name": "meter" },
            { "name": "minimize" },
            { "name": "minus" },
            { "name": "minus-circle" },
            { "name": "moon" },
            { "name": "multiselect" },
            { "name": "music-note" },
            { "name": "newspaper" },
            { "name": "not-allowed" },
            { "name": "numbers" },
            { "name": "office-building" },
            { "name": "outline" },
            { "name": "paper-airplane" },
            { "name": "paper-clip" },
            { "name": "pause" },
            { "name": "pencil-square" },
            { "name": "person-2" },
            { "name": "person-3" },
            { "name": "person-circle" },
            { "name": "phone" },
            { "name": "picture-in-picture" },
            { "name": "pie-chart" },
            { "name": "pin" },
            { "name": "pizza-slice" },
            { "name": "play" },
            { "name": "plug" },
            { "name": "plus-circle" },
            { "name": "plus-minus" },
            { "name": "pointer" },
            { "name": "pointer-stroke" },
            { "name": "priority-high" },
            { "name": "priority-low" },
            { "name": "priority-medium" },
            { "name": "projector" },
            { "name": "pull-close" },
            { "name": "pull-draft" },
            { "name": "pull-open" },
            { "name": "pulse" },
            { "name": "puzzle-piece" },
            { "name": "question-mark-circle" },
            { "name": "question-mark-circle-stroke" },
            { "name": "rectangle-group" },
            { "name": "rectangle-stack-horizontal" },
            { "name": "rectangle-stack-vertical" },
            { "name": "redo" },
            { "name": "reply" },
            { "name": "rewind" },
            { "name": "rewind-10" },
            { "name": "rocketship" },
            { "name": "running" },
            { "name": "scale" },
            { "name": "scissors" },
            { "name": "sensor" },
            { "name": "server" },
            { "name": "server-stack" },
            { "name": "shapes" },
            { "name": "share" },
            { "name": "signal" },
            { "name": "signal-slash" },
            { "name": "signpost" },
            { "name": "sort-ascending" },
            { "name": "sort-descending" },
            { "name": "soundwave" },
            { "name": "split-horizontal" },
            { "name": "split-none" },
            { "name": "star" },
            { "name": "star-half" },
            { "name": "star-stroke" },
            { "name": "start" },
            { "name": "status-offline" },
            { "name": "status-online" },
            { "name": "stop" },
            { "name": "stop-sign" },
            { "name": "stopwatch" },
            { "name": "strikethrough" },
            { "name": "sun" },
            { "name": "swatch" },
            { "name": "switch" },
            { "name": "switch-apps" },
            { "name": "table" },
            { "name": "tag" },
            { "name": "task" },
            { "name": "telescope" },
            { "name": "template" },
            { "name": "terminal" },
            { "name": "thumb" },
            { "name": "thumb-stroke" },
            { "name": "traffic-cone" },
            { "name": "transparent-box" },
            { "name": "trend-down" },
            { "name": "trend-up" },
            { "name": "trophy" },
            { "name": "truck" },
            { "name": "typography" },
            { "name": "undo" },
            { "name": "unlock" },
            { "name": "upload" },
            { "name": "video-camera" },
            { "name": "view-as-grid" },
            { "name": "volume" },
            { "name": "volume-muted" },
            { "name": "wifi" },
            { "name": "wrench" },
            { "name": "x-circle" },
            { "name": "zoom-in" },
            { "name": "zoom-out" },
            { "name": "default" }
          ]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img"
        },
        {
          "name": "markdown",
          "url": "## nve-icon\n\nAn icon is a graphic symbol designed to visually show the purpose of an interface element.\n\n### Example\n\n```html\n<nve-icon name=\"person\"></nve-icon>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/icon/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Custom SVG content to override the named icon |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| status | `'warning' \\| 'danger' \\| 'success' \\| 'accent' \\| \"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. - `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. |\n| size | `'sm' \\| 'md' \\| 'lg' \\| 'xs' \\| 'xl' \\| \"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. |\n| direction | `'up' \\| 'down' \\| 'left' \\| 'right' \\| \"default\"` | Sets the direction of the icon. Only supported by expand-panel/collapse-panel (horizontal axis) and arrow/caret/chevron icons (4-directions) |\n| name | `placeholder` \\| `caret` \\| `person` \\| `menu` \\| `cancel` \\| `gear` \\| `chevron` \\| `logout` \\| `copy` \\| `more-actions` \\| `add` \\| `arrow` \\| `delete` \\| `download` \\| `search` \\| `split-vertical` \\| `sparkles` \\| `branch` \\| `refresh` \\| `double-chevron` ... (use `icons_list` tool for full list) | The name of the icon SVG sprite to render. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |"
        }
      ]
    },
    {
      "name": "nve-input-group",
      "description": "Visually combines many related input controls into a unified composite field with shared styling.\n---\n\n\n### **Slots:**\n - _default_ - Control input elements\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-text-transform** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_",
      "attributes": [
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"
        },
        {
          "name": "example",
          "url": "<nve-input-group>\n  <label>domain</label>\n  <nve-select style=\"width: 130px\">\n    <select aria-label=\"protocol\">\n      <option>https://</option>\n      <option>http://</option>\n    </select>\n  </nve-select>\n  <nve-input>\n    <input placeholder=\"example\" type=\"url\" aria-label=\"host\" />\n    <nve-button container=\"flat\" readonly>.com</nve-button>\n  </nve-input>\n  <nve-control-message>host: 123456</nve-control-message>\n</nve-input-group>"
        },
        {
          "name": "markdown",
          "url": "## nve-input-group\n\nVisually combines many related input controls into a unified composite field with shared styling.\n\n### Example\n\n```html\n<nve-input-group>\n  <label>domain</label>\n  <nve-select style=\"width: 130px\">\n    <select aria-label=\"protocol\">\n      <option>https://</option>\n      <option>http://</option>\n    </select>\n  </nve-select>\n  <nve-input>\n    <input placeholder=\"example\" type=\"url\" aria-label=\"host\" />\n    <nve-button container=\"flat\" readonly>.com</nve-button>\n  </nve-input>\n  <nve-control-message>host: 123456</nve-control-message>\n</nve-input-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/input/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input elements |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |"
        }
      ]
    },
    {
      "name": "nve-input",
      "description": "An input is a control that enables users to enter text.\n---\n\n\n### **Events:**\n - **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n\n### **Slots:**\n - _default_ - Control input element\n- **label** - Label element\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--min-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) _(default: undefined)_\n- **--max-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) _(default: undefined)_\n- **--border-bottom** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) _(default: undefined)_\n- **--box-shadow** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_",
      "attributes": [
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.",
          "values": [{ "name": "flat" }, { "name": "default" }]
        },
        {
          "name": "rounded",
          "description": "Sets the rounded visual style of the input.",
          "values": []
        },
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.",
          "values": [
            { "name": "warning" },
            { "name": "error" },
            { "name": "success" },
            { "name": "disabled" }
          ]
        },
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "fit-text",
          "description": "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)",
          "values": []
        },
        {
          "name": "fit-content",
          "description": "Sets the input to match native default content block",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"
        },
        {
          "name": "markdown",
          "url": "## nve-input\n\nAn input is a control that enables users to enter text.\n\n### Example\n\n```html\n<nve-input>\n  <label>label</label>\n  <input type=\"text\" />\n  <nve-control-message>message</nve-control-message>\n</nve-input>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/input/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input element |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat' \\| \"default\"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n| rounded | `boolean` | Sets the rounded visual style of the input. |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | 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. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| fitText (fit-text) | `boolean` | 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) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| i18n |  | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| nveControl | `string` |  |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n| showPicker |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |\n| --max-width | `string` | [MDN](https://mdn.dev/CSS/max-width) |\n| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |\n| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
        }
      ]
    },
    {
      "name": "nve-logo",
      "description": "A visual indicator for a brand or application.\n---\n\n\n### **Slots:**\n - _default_ - default slot for content\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_",
      "attributes": [
        {
          "name": "color",
          "description": "Defines a base color from the theme color palette",
          "values": [
            { "name": "red-cardinal" },
            { "name": "gray-slate" },
            { "name": "gray-denim" },
            { "name": "blue-indigo" },
            { "name": "blue-cobalt" },
            { "name": "blue-sky" },
            { "name": "teal-cyan" },
            { "name": "green-mint" },
            { "name": "teal-seafoam" },
            { "name": "green-grass" },
            { "name": "yellow-amber" },
            { "name": "orange-pumpkin" },
            { "name": "red-tomato" },
            { "name": "pink-magenta" },
            { "name": "purple-plum" },
            { "name": "purple-violet" },
            { "name": "purple-lavender" },
            { "name": "pink-rose" },
            { "name": "green-jade" },
            { "name": "lime-pear" },
            { "name": "yellow-nova" },
            { "name": "brand-green" }
          ]
        },
        {
          "name": "size",
          "description": "Controls the visual scale of an element to match its importance and available space.\n- `sm` Compact size for dense layouts or secondary elements with less visual prominence.\n\n- `md` Standard size that works well in most contexts and provides balanced visibility.\n\n- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts.",
          "values": [
            { "name": "sm" },
            { "name": "md" },
            { "name": "lg" },
            { "name": "default" }
          ]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img"
        },
        {
          "name": "markdown",
          "url": "## nve-logo\n\nA visual indicator for a brand or application.\n\n### Example\n\n```html\n<nve-logo aria-label=\"NVIDIA\">NV</nve-logo>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/logo/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for content |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| 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'` | Defines a base color from the theme color palette |\n| size | `'sm' \\| 'md' \\| 'lg' \\| \"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. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |"
        }
      ]
    },
    {
      "name": "nve-menu-item",
      "description": "Represents a selectable option within a menu, providing an interactive button for navigation or actions.\n---\n\n\n### **Slots:**\n - _default_ - default slot for content\n- **suffix** - slot for suffix icon\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--border-background** -  _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--min-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) _(default: undefined)_\n- **--line-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--opacity** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) _(default: undefined)_\n- **--text-transform** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) _(default: undefined)_",
      "attributes": [
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `danger` Signals destructive or irreversible actions that need extra attention and confirmation.",
          "values": [{ "name": "danger" }]
        },
        {
          "name": "pressed",
          "description": "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)\n- `true` The button is in the pressed (on) state and the associated action or setting is active.\n\n- `false` The button is in the unpressed (off) state and the associated action or setting is inactive.",
          "values": []
        },
        {
          "name": "expanded",
          "description": "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)\n- `true` The associated content expands and becomes visible to the user.\n\n- `false` The associated content collapses and hides from the user.",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Like input readonly, sets a button semantically as visual treatment only.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly",
          "values": []
        },
        {
          "name": "form",
          "description": "Like input form, sets a button to submit a form outside its parent form.\nReturns a reference to the form element if available.\nhttps://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form",
          "values": [{ "name": "HTMLFormElement" }]
        },
        {
          "name": "name",
          "description": "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)",
          "values": []
        },
        {
          "name": "value",
          "description": "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)",
          "values": []
        },
        {
          "name": "type",
          "description": "Defines the button behavior when associated within a form element.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type",
          "values": [
            { "name": "button" },
            { "name": "submit" },
            { "name": "reset" }
          ]
        },
        {
          "name": "disabled",
          "description": "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)\n- `true` The element has a disabled state and does not accept interaction.\n\n- `false` The element has an enabled state and accepts interaction.",
          "values": []
        },
        {
          "name": "selected",
          "description": "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)\n- `true` The element holds selection and represents the user's current choice within the group.\n\n- `false` The element does not hold selection and the user can choose it.",
          "values": []
        },
        {
          "name": "current",
          "description": "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)\n- `page` Marks the current page within a set of navigation links.\n\n- `step` Marks the current step within a multi-step process or workflow.",
          "values": [{ "name": "page" }, { "name": "step" }]
        },
        {
          "name": "popovertarget",
          "description": "The id reference of the element that receives the popover.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget",
          "values": []
        },
        {
          "name": "popovertargetaction",
          "description": "The popover target action to perform on the popover target element.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction",
          "values": [
            { "name": "show" },
            { "name": "hide" },
            { "name": "toggle" }
          ]
        },
        {
          "name": "commandfor",
          "description": "The element that receives the command.\nhttps://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API",
          "values": [{ "name": "HTMLElement" }]
        },
        {
          "name": "command",
          "description": "The command to execute on the element.\nhttps://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API",
          "values": []
        },
        {
          "name": "interestfor",
          "description": "The element that receives the interest.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement",
          "values": [{ "name": "HTMLElement" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/menubar/"
        },
        {
          "name": "markdown",
          "url": "## nve-menu-item\n\nRepresents a selectable option within a menu, providing an interactive button for navigation or actions.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/menu/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for content |\n| suffix | `string` | slot for suffix icon |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| status | `'danger'` | 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. |\n| type | `string` |  |\n| pressed | `boolean` | Indicates the current state of a toggle button that switches on or off. [MDN](https://mdn.dev/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. |\n| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/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. |\n| readOnly (readonly) | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |\n| form | `string \\| HTMLFormElement \\| null` | Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://mdn.dev/ElementInternals/form |\n| name | `string` | The name of the button, submitted as a pair with the button value as part of the form data. https://mdn.dev/HTML/Element/button#attr-name |\n| value | `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://mdn.dev/HTML/Element/input#value) |\n| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/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. |\n| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/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. |\n| current | `'page' \\| 'step'` | Indicates the element that represents the user's current location or position within a set. [MDN](https://mdn.dev/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. |\n| popoverTargetElement | `HTMLElement \\| null` | Establishes a relationship between a popover and its invoker button. https://mdn.dev/HTMLInputElement/popoverTargetElement |\n| popovertarget | `string` | The id reference of the element that receives the popover. https://mdn.dev/HTML/Reference/Elements/button#popovertarget |\n| popoverTargetAction (popovertargetaction) | `'show' \\| 'hide' \\| 'toggle'` | The popover target action to perform on the popover target element. https://mdn.dev/HTMLInputElement/popoverTargetAction |\n| commandForElement (commandfor) | `HTMLElement \\| null` | The element that receives the command. https://mdn.dev/Invoker_Commands_API |\n| command | `string` | The command to execute on the element. https://mdn.dev/Invoker_Commands_API |\n| interestForElement (interestfor) | `HTMLElement \\| null` | The element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border-background | `string` |  |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |\n| --line-height | `string` | [MDN](https://mdn.dev/CSS/line-height) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --opacity | `string` | [MDN](https://mdn.dev/CSS/opacity) |\n| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |"
        }
      ]
    },
    {
      "name": "nve-menu",
      "description": "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.\n---\n\n\n### **Events:**\n - **scroll** - Fires when the user scrolls the menu list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`.\n\n### **Slots:**\n - _default_ - default slot for `nve-menu-item`\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--max-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) _(default: undefined)_\n- **--min-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) _(default: undefined)_\n- **--max-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/menubar/"
        },
        {
          "name": "markdown",
          "url": "## nve-menu\n\nA 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.\n\n### Example\n\n```html\n<nve-menu>\n  <nve-menu-item>item 1</nve-menu-item>\n  <nve-menu-item>item 2</nve-menu-item>\n  <nve-menu-item>item 3</nve-menu-item>\n  <nve-menu-item>item 4</nve-menu-item>\n</nve-menu>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/menu/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for `nve-menu-item` |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| items | `MenuItem[]` |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| scroll | `CustomEvent` | Fires when the user scrolls the menu list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --max-width | `string` | [MDN](https://mdn.dev/CSS/max-width) |\n| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |\n| --max-height | `string` | [MDN](https://mdn.dev/CSS/max-height) |"
        }
      ]
    },
    {
      "name": "nve-month",
      "description": "A month picker is a control that enables users to choose a month value.\n---\n\n\n### **Events:**\n - **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n\n### **Slots:**\n - _default_ - Control input element\n- **label** - Label element\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon-button** - The calendar icon button element",
      "attributes": [
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.",
          "values": [{ "name": "flat" }, { "name": "default" }]
        },
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.",
          "values": [
            { "name": "warning" },
            { "name": "error" },
            { "name": "success" },
            { "name": "disabled" }
          ]
        },
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "fit-text",
          "description": "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)",
          "values": []
        },
        {
          "name": "fit-content",
          "description": "Sets the input to match native default content block",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month"
        },
        {
          "name": "markdown",
          "url": "## nve-month\n\nA month picker is a control that enables users to choose a month value.\n\n### Example\n\n```html\n<nve-month>\n  <label>label</label>\n  <input type=\"month\" />\n  <nve-control-message>message</nve-control-message>\n</nve-month>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/month/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input element |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat' \\| \"default\"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | 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. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| fitText (fit-text) | `boolean` | 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) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| i18n |  | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| nveControl | `string` |  |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n| showPicker |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
        }
      ]
    },
    {
      "name": "nve-notification-group",
      "description": "Displays real time updates without interrupting the user's workflow to communicate an important message or status.\n---\n\n\n### **Slots:**\n - _default_ - default slot for `nve-notification`\n\n### **CSS Properties:**\n - **--box-shadow** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) _(default: undefined)_\n- **--animation-duration** - Duration of notification group open/close animations [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) _(default: undefined)_",
      "attributes": [
        {
          "name": "anchor",
          "description": "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.",
          "values": [{ "name": "HTMLElement" }]
        },
        {
          "name": "position",
          "description": "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)\n- `center` Centers the popover directly over the anchor element.\n\n- `top` Positions the popover above the anchor element.\n\n- `bottom` Positions the popover below the anchor element.\n\n- `left` Positions the popover to the left side of the anchor element.\n\n- `right` Positions the popover to the right side of the anchor element.",
          "values": [
            { "name": "center" },
            { "name": "top" },
            { "name": "bottom" },
            { "name": "left" },
            { "name": "right" }
          ]
        },
        {
          "name": "alignment",
          "description": "Determines the alignment of the popover relative to the provided anchor element.\n- `start` Aligns the popover to the beginning edge of the anchor for left or top alignment.\n\n- `end` Aligns the popover to the ending edge of the anchor for right or bottom alignment.\n\n- `center` Centers the popover along the anchor's edge for balanced positioning.",
          "values": [
            { "name": "start" },
            { "name": "end" },
            { "name": "center" }
          ]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/"
        },
        {
          "name": "markdown",
          "url": "## nve-notification-group\n\nDisplays real time updates without interrupting the user's workflow to communicate an important message or status.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/notification/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for `nve-notification` |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| anchor | `string \\| HTMLElement` | 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. |\n| position | `'center' \\| 'top' \\| 'bottom' \\| 'left' \\| 'right'` | Determines the position of an element along both inline and block axis. [MDN](https://mdn.dev/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. |\n| alignment | `'start' \\| 'end' \\| 'center'` | 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. |\n| typeNativePopoverController |  |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |\n| --animation-duration | `string` | Duration of notification group open/close animations [MDN](https://mdn.dev/CSS/animation-duration) |"
        }
      ]
    },
    {
      "name": "nve-notification",
      "description": "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)\n---\n\n\n### **Events:**\n - **close** - Dispatched when the notification closes.\n- **beforetoggle** - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n- **toggle** - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n- **open** - Dispatched when the notification opens.\n\n### **Slots:**\n - _default_ - default content slot\n- **icon** - content slot for the status icon\n\n### **CSS Properties:**\n - **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--box-shadow** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) _(default: undefined)_\n- **--min-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--max-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--status-border** -  _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--status-color** -  _(default: undefined)_\n- **--animation-duration** - Duration of notification open/close animations [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) _(default: undefined)_\n\n### **CSS Parts:**\n - **status-icon** - The status icon element\n- **icon-button** - The close icon button element",
      "attributes": [
        {
          "name": "anchor",
          "description": "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.",
          "values": [{ "name": "HTMLElement" }]
        },
        {
          "name": "position",
          "description": "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)\n- `center` Centers the popover directly over the anchor element.\n\n- `top` Positions the popover above the anchor element.\n\n- `bottom` Positions the popover below the anchor element.\n\n- `left` Positions the popover to the left side of the anchor element.\n\n- `right` Positions the popover to the right side of the anchor element.",
          "values": [
            { "name": "center" },
            { "name": "top" },
            { "name": "bottom" },
            { "name": "left" },
            { "name": "right" }
          ]
        },
        {
          "name": "alignment",
          "description": "Determines the alignment of the popover relative to the provided anchor element.\n- `start` Aligns the popover to the beginning edge of the anchor for left or top alignment.\n\n- `end` Aligns the popover to the ending edge of the anchor for right or bottom alignment.\n\n- `center` Centers the popover along the anchor's edge for balanced positioning.",
          "values": [
            { "name": "start" },
            { "name": "end" },
            { "name": "center" }
          ]
        },
        {
          "name": "closable",
          "description": "Indicates whether the user can dismiss or close the element.\n- `true` The element displays a close control and the user can dismiss it.\n\n- `false` The user cannot close the element and must dismiss it programmatically.",
          "values": []
        },
        {
          "name": "close-timeout",
          "description": "A delayed `close` event will occur determined from the provided millisecond value.",
          "values": []
        },
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `accent` Highlights important actions or draws attention to primary interactive elements.\n\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.\n\n- `danger` Signals destructive or irreversible actions that need extra attention and confirmation.",
          "values": [
            { "name": "accent" },
            { "name": "warning" },
            { "name": "success" },
            { "name": "danger" }
          ]
        },
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.",
          "values": [{ "name": "flat" }, { "name": "default" }]
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        { "name": "inline", "values": [] }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/"
        },
        {
          "name": "markdown",
          "url": "## nve-notification\n\nDisplays 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)\n\n### Example\n\n```html\n<nve-notification id=\"notification\" position=\"top\" close-timeout=\"2000\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-button popovertarget=\"notification\">button</nve-button>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/notification/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default content slot |\n| icon | `string` | content slot for the status icon |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| anchor | `string \\| HTMLElement` | 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. |\n| position | `'center' \\| 'top' \\| 'bottom' \\| 'left' \\| 'right'` | Determines the position of an element along both inline and block axis. [MDN](https://mdn.dev/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. |\n| alignment | `'start' \\| 'end' \\| 'center'` | 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. |\n| closable | `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. |\n| closeTimeout (close-timeout) | `number` | Sets the automatic dismissal time in milliseconds before the element emits a `close` event. Allow ~200-250ms per word for comfortable reading. - `0` Warning or error messages requiring immediate acknowledgment. - `3000` Brief success or confirmation messages. - `7000` Standard informational messages. - `10000` Messages with actions or requiring user decision. |\n| status | `'accent' \\| 'warning' \\| 'success' \\| 'danger'` | 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. |\n| container | `'flat' \\| \"default\"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n| i18n |  | Enables updating internal string values for internationalization. |\n| typeNativePopoverController | `TypeNativePopoverController<Notification>` |  |\n| hidePopover |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| close | `CustomEvent` | Dispatched when the notification closes. |\n| beforetoggle | `CustomEvent` | Dispatched on a popover just before showing or hiding. [MDN](https://mdn.dev/HTMLElement/beforetoggle_event) |\n| toggle | `CustomEvent` | Dispatched on a popover element just after showing or hiding. [MDN](https://mdn.dev/HTMLElement/toggle_event) |\n| open | `CustomEvent` | Dispatched when the notification opens. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |\n| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --max-width | `string` | [MDN](https://mdn.dev/CSS/max-width) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --status-border | `string` |  |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --status-color | `string` |  |\n| --animation-duration | `string` | Duration of notification open/close animations [MDN](https://mdn.dev/CSS/animation-duration) |"
        }
      ]
    },
    {
      "name": "nve-page-header",
      "description": "An element that appears across the top of all pages containing the application name and primary navigation.\n---\n\n\n### **Slots:**\n - _default_ - The default content slot\n- **prefix** - Content displayed at the start of the header\n- **suffix** - Content displayed at the end of the header\n\n### **CSS Properties:**\n - **--background** - Background color of the header [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--padding** - Padding inside the header [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--border-bottom** - Border below the header [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) _(default: undefined)_\n- **--gap** - Gap between the prefix, default, and suffix slots [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--margin-inline** - left and right margin applied to the default content slot _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav"
        },
        {
          "name": "markdown",
          "url": "## nve-page-header\n\nAn element that appears across the top of all pages containing the application name and primary navigation.\n\n### Example\n\n```html\n<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"chat-bubble\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"search\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"switch-apps\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n</nve-page-header>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/page-header/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | The default content slot |\n| prefix | `string` | Content displayed at the start of the header |\n| suffix | `string` | Content displayed at the end of the header |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | Background color of the header [MDN](https://mdn.dev/CSS/background) |\n| --padding | `string` | Padding inside the header [MDN](https://mdn.dev/CSS/padding) |\n| --border-bottom | `string` | Border below the header [MDN](https://mdn.dev/CSS/border-bottom) |\n| --gap | `string` | Gap between the prefix, default, and suffix slots [MDN](https://mdn.dev/CSS/gap) |\n| --margin-inline | `string` | left and right margin applied to the default content slot |"
        }
      ]
    },
    {
      "name": "nve-page-loader",
      "description": "Page Loader is a full-screen version of the `progress-ring` component, for use when the page should remain unusable as the loader displays.\n---\n\n\n### **Slots:**\n - _default_ - default slot for content\n\n### **CSS Properties:**\n - **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--animation-duration** - Duration of page loader open/close animations [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) _(default: undefined)_\n\n### **CSS Parts:**\n - **progress-ring** - The progress ring element",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role"
        },
        {
          "name": "markdown",
          "url": "## nve-page-loader\n\nPage Loader is a full-screen version of the `progress-ring` component, for use when the page should remain unusable as the loader displays.\n\n### Example\n\n```html\n<nve-page-loader></nve-page-loader>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/page-loader/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for content |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --animation-duration | `string` | Duration of page loader open/close animations [MDN](https://mdn.dev/CSS/animation-duration) |"
        }
      ]
    },
    {
      "name": "nve-page-panel-content",
      "description": "Contains the scrollable main body content within a page panel region.\n---\n\n\n### **Slots:**\n - _default_ - default slot for the page-panel content\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role"
        },
        {
          "name": "markdown",
          "url": "## nve-page-panel-content\n\nContains the scrollable main body content within a page panel region.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/page/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for the page-panel content |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |"
        }
      ]
    },
    {
      "name": "nve-page-panel-footer",
      "description": "Provides a fixed action area at the bottom of a page panel for persistent controls or status information.\n---\n\n\n### **Slots:**\n - _default_ - default slot for the page-panel footer\n\n### **CSS Properties:**\n - **--border-top** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--min-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role"
        },
        {
          "name": "markdown",
          "url": "## nve-page-panel-footer\n\nProvides a fixed action area at the bottom of a page panel for persistent controls or status information.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/page/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for the page-panel footer |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| slot | `string` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |"
        }
      ]
    },
    {
      "name": "nve-page-panel-header",
      "description": "Displays the title and contextual controls at the top of a page panel to identify its purpose.\n---\n\n\n### **Slots:**\n - _default_ - default slot for the page panel header\n\n### **CSS Properties:**\n - **--border-bottom** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) _(default: undefined)_\n- **--min-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role"
        },
        {
          "name": "markdown",
          "url": "## nve-page-panel-header\n\nDisplays the title and contextual controls at the top of a page panel to identify its purpose.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/page/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for the page panel header |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| slot | `string` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
        }
      ]
    },
    {
      "name": "nve-page-panel",
      "description": "Child panel for embedded panels within the page component. Typically used for left/right/bottom page slot positions.\n---\n\n\n### **Events:**\n - **open**\n- **close**\n\n### **Slots:**\n - _default_ - default content slot\n- **actions** - slot for action / dismiss buttons\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--max-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) _(default: undefined)_\n- **--max-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) _(default: undefined)_\n- **--animation-duration** - Duration of panel open/close animations [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) _(default: undefined)_",
      "attributes": [
        {
          "name": "size",
          "description": "Controls the visual scale of an element to match its importance and available space.\n- `sm` Compact size for dense layouts or secondary elements with less visual prominence.\n\n- `md` Standard size that works well in most contexts and provides balanced visibility.\n\n- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts.",
          "values": [
            { "name": "sm" },
            { "name": "md" },
            { "name": "lg" },
            { "name": "default" }
          ]
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role"
        },
        {
          "name": "markdown",
          "url": "## nve-page-panel\n\nChild panel for embedded panels within the page component. Typically used for left/right/bottom page slot positions.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/page/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default content slot |\n| actions | `string` | slot for action / dismiss buttons |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| size | `'sm' \\| 'md' \\| 'lg' \\| \"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. |\n| i18n |  | Enables updating internal string values for internationalization. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| open | `CustomEvent` |  |\n| close | `CustomEvent` |  |\n\n### Invoker Commands\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --open | `CommandEvent` | use to open the panel |\n| --close | `CommandEvent` | use to close the panel |\n| --toggle | `CommandEvent` | use to toggle the panel |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --max-width | `string` | [MDN](https://mdn.dev/CSS/max-width) |\n| --max-height | `string` | [MDN](https://mdn.dev/CSS/max-height) |\n| --animation-duration | `string` | Duration of panel open/close animations [MDN](https://mdn.dev/CSS/animation-duration) |"
        }
      ]
    },
    {
      "name": "nve-page",
      "description": "Provide a consistent page structure across the applications, ensuring a seamless user experience.\n---\n\n\n### **Slots:**\n - _default_ - The central content area of the page, where the primary focus of the user's attention should be.\n- **header** - The topmost section of the page, typically containing navigation, branding, or other global elements.\n- **subheader** - A secondary section below the header, often used for breadcrumbs, filters, or other contextual information.\n- **left-aside** - A narrow section on the left side of the page, commonly used for navigation, filters, or other secondary content.\n- **left** - The main content area on the left side of the page, typically containing primary navigation or features.\n- **bottom** - A section for extra tooling outputs such as console outputs.\n- **right** - The main content area on the right side of the page, typically containing secondary navigation or features.\n- **right-aside** - A narrow section on the right side of the page, commonly used for navigation, filters, or other secondary content.\n- **subfooter** - A secondary section below the main content area, often used for more information or calls to action.\n- **footer** - The bottommost section of the page, typically containing global elements, such as copyright information.\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--box-shadow** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) _(default: undefined)_\n- **--min-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) _(default: undefined)_",
      "attributes": [
        {
          "name": "document-scroll",
          "description": "Enables the page to use the document content scroll rather than its internal fixed scroll.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/"
        },
        {
          "name": "markdown",
          "url": "## nve-page\n\nProvide a consistent page structure across the applications, ensuring a seamless user experience.\n\n### Example\n\n```html\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>panel</nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/page/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | The central content area of the page, where the primary focus of the user's attention should be. |\n| header | `string` | The topmost section of the page, typically containing navigation, branding, or other global elements. |\n| subheader | `string` | A secondary section below the header, often used for breadcrumbs, filters, or other contextual information. |\n| left-aside | `string` | A narrow section on the left side of the page, commonly used for navigation, filters, or other secondary content. |\n| left | `string` | The main content area on the left side of the page, typically containing primary navigation or features. |\n| bottom | `string` | A section for extra tooling outputs such as console outputs. |\n| right | `string` | The main content area on the right side of the page, typically containing secondary navigation or features. |\n| right-aside | `string` | A narrow section on the right side of the page, commonly used for navigation, filters, or other secondary content. |\n| subfooter | `string` | A secondary section below the main content area, often used for more information or calls to action. |\n| footer | `string` | The bottommost section of the page, typically containing global elements, such as copyright information. |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| documentScroll (document-scroll) | `boolean` | Enables the page to use the document content scroll rather than its internal fixed scroll. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |"
        }
      ]
    },
    {
      "name": "nve-pagination",
      "description": "Pagination is a control that enables users to navigate through pages of content.\n---\n\n\n### **Events:**\n - **step-change**\n- **last-page** - Dispatched when the last page is active\n- **first-page** - Dispatched when the first page is active\n- **input** - Dispatched when the value (page) has changed\n- **change** - Dispatched when the value (page) has changed\n\n### **Methods:**\n - **reportValidity()** - Reports whether the control satisfies its constraints.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity\n- **checkValidity()** - Checks whether the control satisfies its constraints.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity\n- **setCustomValidity()** - Sets a custom validation message.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity\n- **reset()** - Resets the control value to its initial value.\n\n### **Slots:**\n - _default_ - default slot for content\n- **suffix-label** - slot for overriding the \"n of total\" label when total is an approximation\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon-button** - Base part applied to all icon button elements\n- **previous-icon-button** - The previous page icon button\n- **next-icon-button** - The next page icon button\n- **start-icon-button** - The first page icon button\n- **end-icon-button** - The last page icon button\n- **select** - The page size select element",
      "attributes": [
        {
          "name": "step",
          "description": "The number of items per page.",
          "values": []
        },
        {
          "name": "stepSizes",
          "description": "The array of custom step-size.",
          "values": [{ "name": "array" }]
        },
        {
          "name": "items",
          "description": "The total number of items.",
          "values": []
        },
        {
          "name": "skippable",
          "description": "Whether the pagination is skippable to start/end.",
          "values": []
        },
        {
          "name": "disable-step",
          "description": "Whether the step selector has a disabled state.",
          "values": []
        },
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.\n\n- `inline` Element container reduces to fit within inline content such as a block of text.",
          "values": [
            { "name": "flat" },
            { "name": "inline" },
            { "name": "default" }
          ]
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Prevents the user from changing the control value.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly",
          "values": []
        },
        {
          "name": "disabled",
          "description": "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)\n- `true` The element has a disabled state and does not accept interaction.\n\n- `false` The element has an enabled state and accepts interaction.",
          "values": []
        },
        {
          "name": "required",
          "description": "Requires a value before the parent form can submit.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required",
          "values": []
        },
        {
          "name": "pattern",
          "description": "Defines the pattern that text values must match.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern",
          "values": []
        },
        {
          "name": "min",
          "description": "Defines the minimum numeric value.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min",
          "values": []
        },
        {
          "name": "max",
          "description": "Defines the maximum numeric value.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max",
          "values": []
        },
        {
          "name": "minlength",
          "description": "Defines the minimum text length.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength",
          "values": []
        },
        {
          "name": "maxlength",
          "description": "Defines the maximum text length.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength",
          "values": []
        },
        {
          "name": "name",
          "description": "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)",
          "values": []
        },
        {
          "name": "novalidate",
          "description": "Disables constraint validation for this control.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/novalidate",
          "values": []
        },
        {
          "name": "value",
          "description": "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)",
          "values": [{ "name": "T" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/"
        },
        {
          "name": "markdown",
          "url": "## nve-pagination\n\nPagination is a control that enables users to navigate through pages of content.\n\n### Example\n\n```html\n<nve-pagination value=\"1\" items=\"100\" step=\"10\"></nve-pagination>\n<script type=\"module\">\n  const pagination = document.querySelector(\"nve-pagination\");\n  pagination.addEventListener(\"change\", (e) => console.log(e.target.value));\n</script>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/pagination/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for content |\n| suffix-label | `string` | slot for overriding the \"n of total\" label when total is an approximation |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| step | `number` | The number of items per page. |\n| stepSizes | `array` | The array of custom step-size. |\n| items | `number` | The total number of items. |\n| skippable | `boolean` | Whether the pagination is skippable to start/end. |\n| disableStep (disable-step) | `boolean` | Whether the step selector has a disabled state. |\n| container | `'flat' \\| 'inline' \\| \"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. |\n| i18n |  | Enables updating internal string values for internationalization. |\n| value | `number` | 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://mdn.dev/HTML/Element/input#value) |\n| defaultValue | `string` | The initial value used when the parent form resets. |\n| readOnly (readonly) | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |\n| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/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. |\n| required | `boolean` | Requires a value before the parent form can submit. https://mdn.dev/HTML/Attributes/required |\n| pattern | `string` | Defines the pattern that text values must match. https://mdn.dev/HTML/Attributes/pattern |\n| min | `number \\| null` | Defines the minimum numeric value. https://mdn.dev/HTML/Attributes/min |\n| max | `number \\| null` | Defines the maximum numeric value. https://mdn.dev/HTML/Attributes/max |\n| minLength (minlength) | `number` | Defines the minimum text length. https://mdn.dev/HTML/Attributes/minlength |\n| maxLength (maxlength) | `number` | Defines the maximum text length. https://mdn.dev/HTML/Attributes/maxlength |\n| name | `string` | The name submitted with the control value as part of the form data. https://mdn.dev/HTML/Attributes/name |\n| noValidate (novalidate) | `boolean` | Disables constraint validation for this control. https://mdn.dev/HTML/Attributes/novalidate |\n| form | `HTMLFormElement \\| null` | The form associated with the control. https://mdn.dev/ElementInternals/form |\n| willValidate | `boolean` | Indicates whether the control participates in constraint validation. https://mdn.dev/ElementInternals/willValidate |\n| validity | `ValidityState` | The control validity state. https://mdn.dev/ElementInternals/validity |\n| validationMessage | `string` | The validation message shown when the control is invalid. https://mdn.dev/ElementInternals/validationMessage |\n| valueAsString | `string` | The current value serialized as a string. |\n| valueAsNumber | `number` | The current value parsed as a number. |\n| type | `string` | The control type. |\n| labels | `NodeList` | Labels associated with the control. https://mdn.dev/ElementInternals/labels |\n| composedLabel | `string` | Text content from labels associated with the control. |\n| reportValidity | `() => boolean` | Reports whether the control satisfies its constraints. https://mdn.dev/HTMLInputElement/reportValidity |\n| checkValidity | `() => boolean` | Checks whether the control satisfies its constraints. https://mdn.dev/HTMLInputElement/checkValidity |\n| setCustomValidity | `(message: string) => void` | Sets a custom validation message. https://mdn.dev/HTMLInputElement/setCustomValidity |\n| reset | `() => void` | Resets the control value to its initial value. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| step-change | `CustomEvent` |  |\n| last-page | `CustomEvent` | Dispatched when the last page is active |\n| first-page | `CustomEvent` | Dispatched when the first page is active |\n| input | `CustomEvent` | Dispatched when the value (page) has changed |\n| change | `CustomEvent` | Dispatched when the value (page) has changed |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |"
        }
      ]
    },
    {
      "name": "nve-panel-header",
      "description": "@deprecated use `nve-page-panel-header` with `nve-page-panel` instead\n\nDisplays the title, subtitle, and optional action controls at the top of a panel.\n---\n\n\n### **Slots:**\n - _default_ - default content slot\n- **title** - Title Text\n- **subtitle** - Subtitle Text\n- **action-icon** - Extra Action Button\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--border-bottom** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/"
        },
        {
          "name": "example",
          "url": "<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>"
        },
        {
          "name": "markdown",
          "url": "## nve-panel-header\n\nDisplays the title, subtitle, and optional action controls at the top of a panel.\n\n### Example\n\n```html\n<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/panel/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default content slot |\n| title | `string` | Title Text |\n| subtitle | `string` | Subtitle Text |\n| action-icon | `string` | Extra Action Button |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |"
        }
      ]
    },
    {
      "name": "nve-panel-content",
      "description": "@deprecated use `nve-page-panel-content` with `nve-page-panel` instead\n\nContains the main body content within a panel, providing a structured region for detailed information.\n---\n\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot for panel content\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/"
        },
        {
          "name": "example",
          "url": "<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>"
        },
        {
          "name": "markdown",
          "url": "## nve-panel-content\n\nContains the main body content within a panel, providing a structured region for detailed information.\n\n### Example\n\n```html\n<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/panel/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default/unnamed slot for panel content |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
        }
      ]
    },
    {
      "name": "nve-panel-footer",
      "description": "@deprecated use `nve-page-panel-footer` with `nve-page-panel` instead\n\nProvides a designated area at the bottom of a panel for actions or supplementary controls.\n---\n\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot for panel footer content\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--border-top** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/"
        },
        {
          "name": "example",
          "url": "<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>"
        },
        {
          "name": "markdown",
          "url": "## nve-panel-footer\n\nProvides a designated area at the bottom of a panel for actions or supplementary controls.\n\n### Example\n\n```html\n<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/panel/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default/unnamed slot for panel footer content |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |"
        }
      ]
    },
    {
      "name": "nve-panel",
      "description": "@deprecated use `nve-page-panel` with `nve-page` instead\n\nPanel 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).\n---\n\n\n### **Events:**\n - **open** - Dispatched when the panel opens.\n- **close** - Dispatched when the panel closes.\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot for panel content\n- **header** - header element (Use `panel-header` or custom content)\n- **content** - content element (Use `panel-content` or custom content)\n- **footer** - footer element (Use `panel-footer` or custom content)\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--box-shadow** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) _(default: undefined)_\n- **--panel-button-border-radius** - Border radius of the panel expand/collapse button _(default: undefined)_\n\n### **CSS Parts:**\n - **icon-button** - The expand/collapse icon button element",
      "attributes": [
        {
          "name": "expanded",
          "description": "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)\n- `true` The associated content expands and becomes visible to the user.\n\n- `false` The associated content collapses and hides from the user.",
          "values": []
        },
        {
          "name": "closable",
          "description": "Indicates whether the user can dismiss or close the element.\n- `true` The element displays a close control and the user can dismiss it.\n\n- `false` The user cannot close the element and must dismiss it programmatically.",
          "values": []
        },
        {
          "name": "behavior-expand",
          "description": "Determines whether the panel should handle auto-closing behavior vs. defaults to off.",
          "values": []
        },
        {
          "name": "side",
          "description": "Sets the proper collapse icon and collapse animation, based on which side of the page the panel occupies.",
          "values": [{ "name": "left" }, { "name": "right" }]
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/"
        },
        {
          "name": "example",
          "url": "<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>"
        },
        {
          "name": "markdown",
          "url": "## nve-panel\n\nPanel 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).\n\n### Example\n\n```html\n<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/panel/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default/unnamed slot for panel content |\n| header | `string` | header element (Use `panel-header` or custom content) |\n| content | `string` | content element (Use `panel-content` or custom content) |\n| footer | `string` | footer element (Use `panel-footer` or custom content) |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/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. |\n| closable | `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. |\n| behaviorExpand (behavior-expand) | `boolean` | Determines whether the panel should handle auto-closing behavior vs. defaults to off. |\n| side | `'left' \\| 'right'` | Sets the proper collapse icon and collapse animation, based on which side of the page the panel occupies. |\n| i18n |  | Enables updating internal string values for internationalization. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| open | `CustomEvent` | Dispatched when the panel opens. |\n| close | `CustomEvent` | Dispatched when the panel closes. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |\n| --panel-button-border-radius | `string` | Border radius of the panel expand/collapse button |"
        }
      ]
    },
    {
      "name": "nve-password",
      "description": "A password is a control that enables users to enter password text.\n---\n\n\n### **Events:**\n - **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n\n### **Slots:**\n - _default_ - Control input element\n- **label** - Label element\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon-button** - The visibility toggle icon button element",
      "attributes": [
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.",
          "values": [{ "name": "flat" }, { "name": "default" }]
        },
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.",
          "values": [
            { "name": "warning" },
            { "name": "error" },
            { "name": "success" },
            { "name": "disabled" }
          ]
        },
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "fit-text",
          "description": "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)",
          "values": []
        },
        {
          "name": "fit-content",
          "description": "Sets the input to match native default content block",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password"
        },
        {
          "name": "markdown",
          "url": "## nve-password\n\nA password is a control that enables users to enter password text.\n\n### Example\n\n```html\n<nve-password>\n  <label>label</label>\n  <input type=\"password\" value=\"123456\" />\n  <nve-control-message>message</nve-control-message>\n</nve-password>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/password/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input element |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat' \\| \"default\"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | 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. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| fitText (fit-text) | `boolean` | 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) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| i18n |  | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| nveControl | `string` |  |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n| showPicker |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
        }
      ]
    },
    {
      "name": "nve-preferences-input",
      "description": "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.\n---\n\n\n### **Events:**\n - **input** - Dispatched when the value has changed\n- **change** - Dispatched when the value has changed\n\n### **Methods:**\n - **reportValidity()** - Reports whether the control satisfies its constraints.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity\n- **checkValidity()** - Checks whether the control satisfies its constraints.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity\n- **setCustomValidity()** - Sets a custom validation message.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity\n- **reset()** - Resets the control value to its initial value.\n\n### **CSS Properties:**\n - **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n\n### **CSS Parts:**\n - **control** - The control wrapper elements that contain the labels and menus\n- **menu** - The menu elements that display color scheme and scale options\n- **menu-item** - The individual menu item elements for each selectable option\n- **icon** - The icon element displayed next to color scheme options\n- **divider** - The divider elements that separate preference sections\n- **switch** - The switch element for the reduced motion toggle",
      "attributes": [
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Prevents the user from changing the control value.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly",
          "values": []
        },
        {
          "name": "disabled",
          "description": "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)\n- `true` The element has a disabled state and does not accept interaction.\n\n- `false` The element has an enabled state and accepts interaction.",
          "values": []
        },
        {
          "name": "required",
          "description": "Requires a value before the parent form can submit.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required",
          "values": []
        },
        {
          "name": "pattern",
          "description": "Defines the pattern that text values must match.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern",
          "values": []
        },
        {
          "name": "min",
          "description": "Defines the minimum numeric value.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min",
          "values": []
        },
        {
          "name": "max",
          "description": "Defines the maximum numeric value.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max",
          "values": []
        },
        {
          "name": "step",
          "description": "Defines the value granularity for numeric inputs.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step",
          "values": []
        },
        {
          "name": "minlength",
          "description": "Defines the minimum text length.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength",
          "values": []
        },
        {
          "name": "maxlength",
          "description": "Defines the maximum text length.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength",
          "values": []
        },
        {
          "name": "name",
          "description": "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)",
          "values": []
        },
        {
          "name": "novalidate",
          "description": "Disables constraint validation for this control.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/novalidate",
          "values": []
        },
        {
          "name": "value",
          "description": "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)",
          "values": [{ "name": "T" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/listbox/"
        },
        {
          "name": "markdown",
          "url": "## nve-preferences-input\n\nA preferences input is a widget for controlling apperance. Stylesheets register to the preferences input by including a css-property, see Standard for an example.\n\n### Example\n\n```html\n<nve-preferences-input\n  name=\"theme\"\n  value='{ \"color-scheme\": \"dark\", \"scale\": \"compact\", \"reduced-motion\": \"true\" }'\n></nve-preferences-input>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/preferences-input/define.js';\n```\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| i18n |  | Enables updating internal string values for internationalization. |\n| value | `object` | 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://mdn.dev/HTML/Element/input#value) |\n| defaultValue | `string` | The initial value used when the parent form resets. |\n| readOnly (readonly) | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |\n| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/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. |\n| required | `boolean` | Requires a value before the parent form can submit. https://mdn.dev/HTML/Attributes/required |\n| pattern | `string` | Defines the pattern that text values must match. https://mdn.dev/HTML/Attributes/pattern |\n| min | `number \\| null` | Defines the minimum numeric value. https://mdn.dev/HTML/Attributes/min |\n| max | `number \\| null` | Defines the maximum numeric value. https://mdn.dev/HTML/Attributes/max |\n| step | `number \\| null` | Defines the value granularity for numeric inputs. https://mdn.dev/HTML/Attributes/step |\n| minLength (minlength) | `number` | Defines the minimum text length. https://mdn.dev/HTML/Attributes/minlength |\n| maxLength (maxlength) | `number` | Defines the maximum text length. https://mdn.dev/HTML/Attributes/maxlength |\n| name | `string` | The name submitted with the control value as part of the form data. https://mdn.dev/HTML/Attributes/name |\n| noValidate (novalidate) | `boolean` | Disables constraint validation for this control. https://mdn.dev/HTML/Attributes/novalidate |\n| form | `HTMLFormElement \\| null` | The form associated with the control. https://mdn.dev/ElementInternals/form |\n| willValidate | `boolean` | Indicates whether the control participates in constraint validation. https://mdn.dev/ElementInternals/willValidate |\n| validity | `ValidityState` | The control validity state. https://mdn.dev/ElementInternals/validity |\n| validationMessage | `string` | The validation message shown when the control is invalid. https://mdn.dev/ElementInternals/validationMessage |\n| valueAsString | `string` | The current value serialized as a string. |\n| valueAsNumber | `number` | The current value parsed as a number. |\n| type | `string` | The control type. |\n| labels | `NodeList` | Labels associated with the control. https://mdn.dev/ElementInternals/labels |\n| composedLabel | `string` | Text content from labels associated with the control. |\n| reportValidity | `() => boolean` | Reports whether the control satisfies its constraints. https://mdn.dev/HTMLInputElement/reportValidity |\n| checkValidity | `() => boolean` | Checks whether the control satisfies its constraints. https://mdn.dev/HTMLInputElement/checkValidity |\n| setCustomValidity | `(message: string) => void` | Sets a custom validation message. https://mdn.dev/HTMLInputElement/setCustomValidity |\n| reset | `() => void` | Resets the control value to its initial value. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| input | `CustomEvent` | Dispatched when the value has changed |\n| change | `CustomEvent` | Dispatched when the value has changed |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |"
        }
      ]
    },
    {
      "name": "nve-progress-bar",
      "description": "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.\n---\n\n\n### **CSS Properties:**\n - **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--opacity** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--indeterminate-gradient** - Gradient used for indeterminate state animation _(default: undefined)_",
      "attributes": [
        {
          "name": "value",
          "description": "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)",
          "values": [{ "name": "default" }]
        },
        {
          "name": "max",
          "description": "The `max` property sets the highest value that `value` scales to.",
          "values": []
        },
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `accent` Highlights important actions or draws attention to primary interactive elements.\n\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.\n\n- `danger` Signals destructive or irreversible actions that need extra attention and confirmation.",
          "values": [
            { "name": "accent" },
            { "name": "warning" },
            { "name": "success" },
            { "name": "danger" }
          ]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role"
        },
        {
          "name": "markdown",
          "url": "## nve-progress-bar\n\nA 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.\n\n### Example\n\n```html\n<nve-progress-bar value=\"50\"></nve-progress-bar>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/progress-bar/define.js';\n```\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| value | `number \\| \"default\"` | 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://mdn.dev/HTML/Element/input#value) |\n| max | `number` | The `max` property sets the highest value that `value` scales to. |\n| status | `'accent' \\| 'warning' \\| 'success' \\| 'danger'` | 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. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --opacity | `string` | [MDN](https://mdn.dev/CSS/opacity) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --indeterminate-gradient | `string` | Gradient used for indeterminate state animation |"
        }
      ]
    },
    {
      "name": "nve-progress-ring",
      "description": "The `progress-ring` component shows the status of a pending task. It also serves the basis of the page loading element.\n---\n\n\n### **Slots:**\n - _default_ - Content to display in the ring center. Defaults to a status icon.\n\n### **CSS Properties:**\n - **--background-color** -  _(default: undefined)_\n- **--ring-color** -  _(default: undefined)_\n- **--ring-background-opacity** -  _(default: undefined)_\n- **--ring-width** -  _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--animation-duration** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon** - The icon element",
      "attributes": [
        {
          "name": "value",
          "description": "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)",
          "values": [{ "name": "default" }]
        },
        {
          "name": "max",
          "description": "The `max` value of the progress ring that the `value` is proportionally scaled to.",
          "values": []
        },
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `accent` Highlights important actions or draws attention to primary interactive elements.\n\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.\n\n- `danger` Signals destructive or irreversible actions that need extra attention and confirmation.",
          "values": [
            { "name": "accent" },
            { "name": "warning" },
            { "name": "success" },
            { "name": "danger" },
            { "name": "neutral" },
            { "name": "default" }
          ]
        },
        {
          "name": "size",
          "description": "Controls the visual scale of an element to match its importance and available space.\n- `sm` Compact size for dense layouts or secondary elements with less visual prominence.\n\n- `md` Standard size that works well in most contexts and provides balanced visibility.\n\n- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts.",
          "values": [
            { "name": "sm" },
            { "name": "md" },
            { "name": "lg" },
            { "name": "xxs" },
            { "name": "xs" },
            { "name": "xl" },
            { "name": "default" }
          ]
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role"
        },
        {
          "name": "markdown",
          "url": "## nve-progress-ring\n\nThe `progress-ring` component shows the status of a pending task. It also serves the basis of the page loading element.\n\n### Example\n\n```html\n<div nve-layout=\"row gap:sm\">\n  <nve-progress-ring status=\"accent\"></nve-progress-ring>\n\n  <nve-progress-ring status=\"accent\" value=\"66\"></nve-progress-ring>\n</div>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/progress-ring/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Content to display in the ring center. Defaults to a status icon. |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| value | `number \\| \"default\"` | 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://mdn.dev/HTML/Element/input#value) |\n| max | `number` | The `max` value of the progress ring that the `value` is proportionally scaled to. |\n| status | `'accent' \\| 'warning' \\| 'success' \\| 'danger' \\| 'neutral' \\| \"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. - `success` Represents positive outcomes, confirmations, or constructive actions. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. |\n| size | `'sm' \\| 'md' \\| 'lg' \\| 'xxs' \\| 'xs' \\| 'xl' \\| \"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. |\n| i18n |  | Enables updating internal string values for internationalization. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background-color | `string` |  |\n| --ring-color | `string` |  |\n| --ring-background-opacity | `string` |  |\n| --ring-width | `string` |  |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --animation-duration | `string` | [MDN](https://mdn.dev/CSS/animation-duration) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |"
        }
      ]
    },
    {
      "name": "nve-progressive-filter-chip",
      "description": "A filter chip is a control that enables users to select many options from a set of choices.\n---\n\n\n### **Events:**\n - **close** - Dispatched when the filter chip closes.\n\n### **Slots:**\n - _default_ - default slot for content\n\n### **CSS Properties:**\n - **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n\n### **CSS Parts:**\n - **select** - The select element\n- **date** - The date input element\n- **input** - The input element\n- **icon-button** - The icon button element",
      "attributes": [
        {
          "name": "closable",
          "description": "Indicates whether the user can dismiss or close the element.\n- `true` The element displays a close control and the user can dismiss it.\n\n- `false` The user cannot close the element and must dismiss it programmatically.",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/"
        },
        {
          "name": "markdown",
          "url": "## nve-progressive-filter-chip\n\nA filter chip is a control that enables users to select many options from a set of choices.\n\n### Example\n\n```html\n<nve-progressive-filter-chip closable>\n  <nve-select>\n    <select aria-label=\"dataset\">\n      <option>workload</option>\n      <option selected>instance</option>\n    </select>\n  </nve-select>\n  <nve-select>\n    <select aria-label=\"condition\">\n      <option>sort by</option>\n      <option selected>filter by</option>\n    </select>\n  </nve-select>\n  <nve-select>\n    <select aria-label=\"filter\">\n      <option selected>utilization</option>\n      <option>status</option>\n    </select>\n  </nve-select>\n</nve-progressive-filter-chip>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/progressive-filter-chip/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for content |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| closable | `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. |\n| i18n |  | Enables updating internal string values for internationalization. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| close | `CustomEvent` | Dispatched when the filter chip closes. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |"
        }
      ]
    },
    {
      "name": "nve-pulse",
      "description": "Pulse component signals attention for a particular area of a UI. This helps with tutorial/getting started guides for new users.\n---\n\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--animation-duration** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) _(default: undefined)_",
      "attributes": [
        {
          "name": "size",
          "description": "Controls the visual scale of an element to match its importance and available space.\n- `sm` Compact size for dense layouts or secondary elements with less visual prominence.\n\n- `md` Standard size that works well in most contexts and provides balanced visibility.\n\n- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts.",
          "values": [
            { "name": "sm" },
            { "name": "md" },
            { "name": "lg" },
            { "name": "xs" },
            { "name": "default" }
          ]
        },
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `accent` Highlights important actions or draws attention to primary interactive elements.\n\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `danger` Signals destructive or irreversible actions that need extra attention and confirmation.",
          "values": [
            { "name": "accent" },
            { "name": "warning" },
            { "name": "danger" },
            { "name": "default" }
          ]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/alert/"
        },
        {
          "name": "markdown",
          "url": "## nve-pulse\n\nPulse component signals attention for a particular area of a UI. This helps with tutorial/getting started guides for new users.\n\n### Example\n\n```html\n<div nve-layout=\"row align:center\">\n  <nve-pulse aria-label=\"pulse component\"></nve-pulse>\n</div>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/pulse/define.js';\n```\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| size | `'sm' \\| 'md' \\| 'lg' \\| 'xs' \\| \"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. |\n| status | `'accent' \\| 'warning' \\| 'danger' \\| \"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. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --animation-duration | `string` | [MDN](https://mdn.dev/CSS/animation-duration) |"
        }
      ]
    },
    {
      "name": "nve-radio-group",
      "description": "Groups related radio buttons together with a shared label and validation messaging for single-select form inputs.\n---\n\n\n### **Slots:**\n - _default_ - Control input elements\n\n### **CSS Properties:**\n - **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-text-transform** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_",
      "attributes": [
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/radio/"
        },
        {
          "name": "markdown",
          "url": "## nve-radio-group\n\nGroups related radio buttons together with a shared label and validation messaging for single-select form inputs.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/radio/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input elements |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |"
        }
      ]
    },
    {
      "name": "nve-radio",
      "description": "A radio button is a control that enables users to choose one option from a list of mutually exclusive options.\n---\n\n\n### **Events:**\n - **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n\n### **Slots:**\n - _default_ - Control input element\n- **label** - Label element\n\n### **CSS Properties:**\n - **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--border-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--border-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) _(default: undefined)_\n- **--radio-color** -  _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_",
      "attributes": [
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.",
          "values": [
            { "name": "warning" },
            { "name": "error" },
            { "name": "success" },
            { "name": "disabled" }
          ]
        },
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "fit-text",
          "description": "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)",
          "values": []
        },
        {
          "name": "fit-content",
          "description": "Sets the input to match native default content block",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/radio/"
        },
        {
          "name": "markdown",
          "url": "## nve-radio\n\nA radio button is a control that enables users to choose one option from a list of mutually exclusive options.\n\n### Example\n\n```html\n<nve-radio-group>\n  <label>label</label>\n  <nve-radio>\n    <label>radio 1</label>\n    <input type=\"radio\" checked />\n  </nve-radio>\n  <nve-radio>\n    <label>radio 2</label>\n    <input type=\"radio\" />\n  </nve-radio>\n  <nve-radio>\n    <label>radio 3</label>\n    <input type=\"radio\" />\n  </nve-radio>\n  <nve-control-message>message</nve-control-message>\n</nve-radio-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/radio/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input element |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| nveControl | `string` |  |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | 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. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| i18n |  | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n| showPicker |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --border-width | `string` | [MDN](https://mdn.dev/CSS/border-width) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border-color | `string` | [MDN](https://mdn.dev/CSS/border-color) |\n| --radio-color | `string` |  |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
        }
      ]
    },
    {
      "name": "nve-range",
      "description": "A range slider is a control that enables users to choose a value from a continuous range of values.\n---\n\n\n### **Events:**\n - **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n\n### **Slots:**\n - _default_ - Control input element\n- **label** - Label element\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--track-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--track-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--track-border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--track-background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--thumb-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--thumb-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--thumb-background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--thumb-border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_",
      "attributes": [
        {
          "name": "orientation",
          "description": "Controls the directional flow of the element's layout and interaction pattern.\n- `vertical` Element orients vertically with top-to-bottom flow.\n\n- `horizontal` Element orients horizontally with left-to-right flow.",
          "values": [{ "name": "vertical" }, { "name": "horizontal" }]
        },
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.",
          "values": [
            { "name": "warning" },
            { "name": "error" },
            { "name": "success" },
            { "name": "disabled" }
          ]
        },
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "fit-text",
          "description": "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)",
          "values": []
        },
        {
          "name": "fit-content",
          "description": "Sets the input to match native default content block",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/slider/"
        },
        {
          "name": "markdown",
          "url": "## nve-range\n\nA range slider is a control that enables users to choose a value from a continuous range of values.\n\n### Example\n\n```html\n<nve-range>\n  <label>label</label>\n  <input type=\"range\" />\n  <nve-control-message>message</nve-control-message>\n</nve-range>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/range/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input element |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| orientation | `'vertical' \\| 'horizontal'` | 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. |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | 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. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| fitText (fit-text) | `boolean` | 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) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| i18n |  | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| nveControl | `string` |  |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n| showPicker |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --track-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --track-height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --track-border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --track-background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --thumb-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --thumb-height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --thumb-background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --thumb-border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |"
        }
      ]
    },
    {
      "name": "nve-resize-handle",
      "description": "A resize-handle slider is a control that enables users to resize views or panels vertically or horizontally.\n---\n\n\n### **Events:**\n - **toggle** - Dispatched when the resize handle is double clicked.\n\n### **Methods:**\n - **reportValidity()** - Reports whether the control satisfies its constraints.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity\n- **checkValidity()** - Checks whether the control satisfies its constraints.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity\n- **setCustomValidity()** - Sets a custom validation message.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity\n- **reset()** - Resets the control value to its initial value.\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--line-width** -  _(default: undefined)_\n- **--target-size** -  _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_",
      "attributes": [
        {
          "name": "orientation",
          "description": "Controls the directional flow of the element's layout and interaction pattern.\n- `horizontal` Element orients horizontally with left-to-right flow.\n\n- `vertical` Element orients vertically with top-to-bottom flow.",
          "values": [
            { "name": "horizontal" },
            { "name": "vertical" },
            { "name": "default" }
          ]
        },
        {
          "name": "min",
          "description": "Determines the min resize value.",
          "values": []
        },
        {
          "name": "max",
          "description": "Determines the max resize value.",
          "values": []
        },
        {
          "name": "step",
          "description": "Determines the value step change.",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Prevents the user from changing the control value.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly",
          "values": []
        },
        {
          "name": "disabled",
          "description": "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)\n- `true` The element has a disabled state and does not accept interaction.\n\n- `false` The element has an enabled state and accepts interaction.",
          "values": []
        },
        {
          "name": "required",
          "description": "Requires a value before the parent form can submit.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required",
          "values": []
        },
        {
          "name": "pattern",
          "description": "Defines the pattern that text values must match.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern",
          "values": []
        },
        {
          "name": "minlength",
          "description": "Defines the minimum text length.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength",
          "values": []
        },
        {
          "name": "maxlength",
          "description": "Defines the maximum text length.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength",
          "values": []
        },
        {
          "name": "name",
          "description": "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)",
          "values": []
        },
        {
          "name": "novalidate",
          "description": "Disables constraint validation for this control.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/novalidate",
          "values": []
        },
        {
          "name": "value",
          "description": "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)",
          "values": [{ "name": "T" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/slider/"
        },
        {
          "name": "markdown",
          "url": "## nve-resize-handle\n\nA resize-handle slider is a control that enables users to resize views or panels vertically or horizontally.\n\n### Example\n\n```html\n<nve-resize-handle></nve-resize-handle>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/resize-handle/define.js';\n```\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| orientation | `'horizontal' \\| 'vertical' \\| \"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. |\n| min | `number` | Determines the min resize value. |\n| max | `number` | Determines the max resize value. |\n| step | `number` | Determines the value step change. |\n| i18n |  | Enables updating internal string values for internationalization. |\n| value |  | 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://mdn.dev/HTML/Element/input#value) |\n| defaultValue | `string` | The initial value used when the parent form resets. |\n| readOnly (readonly) | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |\n| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/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. |\n| required | `boolean` | Requires a value before the parent form can submit. https://mdn.dev/HTML/Attributes/required |\n| pattern | `string` | Defines the pattern that text values must match. https://mdn.dev/HTML/Attributes/pattern |\n| minLength (minlength) | `number` | Defines the minimum text length. https://mdn.dev/HTML/Attributes/minlength |\n| maxLength (maxlength) | `number` | Defines the maximum text length. https://mdn.dev/HTML/Attributes/maxlength |\n| name | `string` | The name submitted with the control value as part of the form data. https://mdn.dev/HTML/Attributes/name |\n| noValidate (novalidate) | `boolean` | Disables constraint validation for this control. https://mdn.dev/HTML/Attributes/novalidate |\n| form | `HTMLFormElement \\| null` | The form associated with the control. https://mdn.dev/ElementInternals/form |\n| willValidate | `boolean` | Indicates whether the control participates in constraint validation. https://mdn.dev/ElementInternals/willValidate |\n| validity | `ValidityState` | The control validity state. https://mdn.dev/ElementInternals/validity |\n| validationMessage | `string` | The validation message shown when the control is invalid. https://mdn.dev/ElementInternals/validationMessage |\n| valueAsString | `string` | The current value serialized as a string. |\n| valueAsNumber | `number` | The current value parsed as a number. |\n| type | `string` | The control type. |\n| labels | `NodeList` | Labels associated with the control. https://mdn.dev/ElementInternals/labels |\n| composedLabel | `string` | Text content from labels associated with the control. |\n| reportValidity | `() => boolean` | Reports whether the control satisfies its constraints. https://mdn.dev/HTMLInputElement/reportValidity |\n| checkValidity | `() => boolean` | Checks whether the control satisfies its constraints. https://mdn.dev/HTMLInputElement/checkValidity |\n| setCustomValidity | `(message: string) => void` | Sets a custom validation message. https://mdn.dev/HTMLInputElement/setCustomValidity |\n| reset | `() => void` | Resets the control value to its initial value. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| toggle | `CustomEvent` | Dispatched when the resize handle is double clicked. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --line-width | `string` |  |\n| --target-size | `string` |  |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |"
        }
      ]
    },
    {
      "name": "nve-search",
      "description": "A search is a control that enables users to enter text to search.\n---\n\n\n### **Events:**\n - **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n\n### **Slots:**\n - _default_ - Control input element\n- **label** - Label element\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon-button** - The icon button element",
      "attributes": [
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.",
          "values": [{ "name": "flat" }, { "name": "default" }]
        },
        {
          "name": "rounded",
          "description": "Sets the rounded visual style of the input.",
          "values": []
        },
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.",
          "values": [
            { "name": "warning" },
            { "name": "error" },
            { "name": "success" },
            { "name": "disabled" }
          ]
        },
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "fit-text",
          "description": "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)",
          "values": []
        },
        {
          "name": "fit-content",
          "description": "Sets the input to match native default content block",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search"
        },
        {
          "name": "markdown",
          "url": "## nve-search\n\nA search is a control that enables users to enter text to search.\n\n### Example\n\n```html\n<nve-search>\n  <label>label</label>\n  <input type=\"search\" />\n  <nve-control-message>message</nve-control-message>\n</nve-search>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/search/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input element |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat' \\| \"default\"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n| rounded | `boolean` | Sets the rounded visual style of the input. |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | 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. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| fitText (fit-text) | `boolean` | 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) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| i18n |  | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| nveControl | `string` |  |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n| showPicker |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
        }
      ]
    },
    {
      "name": "nve-select",
      "description": "A select is a control that enables users to select an option from a list of options.\n---\n\n\n### **Events:**\n - **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n\n### **Slots:**\n - _default_ - Select input element\n- **label** - Label element\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--border-bottom** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--text-align** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) _(default: undefined)_\n- **--scroll-height** -  _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--max-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) _(default: undefined)_\n- **--min-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) _(default: undefined)_\n- **--box-shadow** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) _(default: undefined)_\n- **--max-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) _(default: undefined)_\n- **--text-transform** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n\n### **CSS Parts:**\n - **tag** - undefined\n- **menu** - The dropdown menu element\n- **menu-item** - The menu item elements\n- **icon** - The icon element\n- **caret** - The caret/chevron icon element\n- **dropdown** - The dropdown popup element",
      "attributes": [
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.\n\n- `inline` Element container reduces to fit within inline content such as a block of text.",
          "values": [
            { "name": "flat" },
            { "name": "inline" },
            { "name": "default" }
          ]
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.",
          "values": [
            { "name": "warning" },
            { "name": "error" },
            { "name": "success" },
            { "name": "disabled" }
          ]
        },
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "fit-text",
          "description": "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)",
          "values": []
        },
        {
          "name": "fit-content",
          "description": "Sets the input to match native default content block",
          "values": []
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select"
        },
        {
          "name": "markdown",
          "url": "## nve-select\n\nA select is a control that enables users to select an option from a list of options.\n\n### Example\n\n```html\n<nve-select>\n  <label>label</label>\n  <select>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\">Option 2</option>\n    <option value=\"3\">Option 3</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/select/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Select input element |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat' \\| 'inline' \\| \"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. |\n| i18n |  | Enables updating internal string values for internationalization. |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | 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. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| fitText (fit-text) | `boolean` | 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) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| nveControl | `string` |  |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n| showPicker |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --text-align | `string` | [MDN](https://mdn.dev/CSS/text-align) |\n| --scroll-height | `string` |  |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --max-width | `string` | [MDN](https://mdn.dev/CSS/max-width) |\n| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |\n| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |\n| --max-height | `string` | [MDN](https://mdn.dev/CSS/max-height) |\n| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
        }
      ]
    },
    {
      "name": "nve-skeleton",
      "description": "A loading placeholder component that displays animated placeholder shapes while content loads.\n---\n\n\n### **Slots:**\n - _default_ - default content slot\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--min-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) _(default: undefined)_",
      "attributes": [
        {
          "name": "effect",
          "description": "Visual animation style shown while content loads.",
          "values": [{ "name": "shimmer" }, { "name": "pulse" }]
        },
        {
          "name": "shape",
          "description": "Geometry of the placeholder — rounded corners or a full pill outline.",
          "values": [{ "name": "round" }, { "name": "pill" }]
        },
        {
          "name": "hidden",
          "description": "Whether the skeleton hides its content",
          "values": []
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live"
        },
        {
          "name": "markdown",
          "url": "## nve-skeleton\n\nA loading placeholder component that displays animated placeholder shapes while content loads.\n\n### Example\n\n```html\n<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton style=\"width: 90%\"></nve-skeleton>\n  <nve-skeleton style=\"width: 80%\"></nve-skeleton>\n</div>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/skeleton/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default content slot |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| effect | `'shimmer' \\| 'pulse'` | Visual animation style shown while content loads. |\n| shape | `'round' \\| 'pill'` | Geometry of the placeholder — rounded corners or a full pill outline. |\n| hidden | `boolean` | Whether the skeleton hides its content |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |"
        }
      ]
    },
    {
      "name": "nve-sort-button",
      "description": "A sort button is a control that enables users to sort a list of items in ascending or descending order.\n---\n\n\n### **Events:**\n - **sort** - Dispatched on sort button click, returns the current sort value and the next sort value.\n\n### **CSS Properties:**\n - **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon** - The icon element",
      "attributes": [
        {
          "name": "sort",
          "description": "The current sort value, can be ascending, descending, or none.",
          "values": [
            { "name": "ascending" },
            { "name": "descending" },
            { "name": "none" }
          ]
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "pressed",
          "description": "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)\n- `true` The button is in the pressed (on) state and the associated action or setting is active.\n\n- `false` The button is in the unpressed (off) state and the associated action or setting is inactive.",
          "values": []
        },
        {
          "name": "expanded",
          "description": "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)\n- `true` The associated content expands and becomes visible to the user.\n\n- `false` The associated content collapses and hides from the user.",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Like input readonly, sets a button semantically as visual treatment only.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly",
          "values": []
        },
        {
          "name": "form",
          "description": "Like input form, sets a button to submit a form outside its parent form.\nReturns a reference to the form element if available.\nhttps://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form",
          "values": [{ "name": "HTMLFormElement" }]
        },
        {
          "name": "name",
          "description": "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)",
          "values": []
        },
        {
          "name": "value",
          "description": "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)",
          "values": []
        },
        {
          "name": "type",
          "description": "Defines the button behavior when associated within a form element.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type",
          "values": [
            { "name": "button" },
            { "name": "submit" },
            { "name": "reset" }
          ]
        },
        {
          "name": "disabled",
          "description": "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)\n- `true` The element has a disabled state and does not accept interaction.\n\n- `false` The element has an enabled state and accepts interaction.",
          "values": []
        },
        {
          "name": "selected",
          "description": "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)\n- `true` The element holds selection and represents the user's current choice within the group.\n\n- `false` The element does not hold selection and the user can choose it.",
          "values": []
        },
        {
          "name": "current",
          "description": "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)\n- `page` Marks the current page within a set of navigation links.\n\n- `step` Marks the current step within a multi-step process or workflow.",
          "values": [{ "name": "page" }, { "name": "step" }]
        },
        {
          "name": "popovertarget",
          "description": "The id reference of the element that receives the popover.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget",
          "values": []
        },
        {
          "name": "popovertargetaction",
          "description": "The popover target action to perform on the popover target element.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction",
          "values": [
            { "name": "show" },
            { "name": "hide" },
            { "name": "toggle" }
          ]
        },
        {
          "name": "commandfor",
          "description": "The element that receives the command.\nhttps://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API",
          "values": [{ "name": "HTMLElement" }]
        },
        {
          "name": "command",
          "description": "The command to execute on the element.\nhttps://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API",
          "values": []
        },
        {
          "name": "interestfor",
          "description": "The element that receives the interest.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement",
          "values": [{ "name": "HTMLElement" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/"
        },
        {
          "name": "markdown",
          "url": "## nve-sort-button\n\nA sort button is a control that enables users to sort a list of items in ascending or descending order.\n\n### Example\n\n```html\n<nve-sort-button></nve-sort-button>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/sort-button/define.js';\n```\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| sort | `'ascending' \\| 'descending' \\| 'none'` | The current sort value, can be ascending, descending, or none. |\n| i18n |  | Enables updating internal string values for internationalization. |\n| type | `string` |  |\n| pressed | `boolean` | Indicates the current state of a toggle button that switches on or off. [MDN](https://mdn.dev/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. |\n| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/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. |\n| readOnly (readonly) | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |\n| form | `string \\| HTMLFormElement \\| null` | Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://mdn.dev/ElementInternals/form |\n| name | `string` | The name of the button, submitted as a pair with the button value as part of the form data. https://mdn.dev/HTML/Element/button#attr-name |\n| value | `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://mdn.dev/HTML/Element/input#value) |\n| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/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. |\n| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/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. |\n| current | `'page' \\| 'step'` | Indicates the element that represents the user's current location or position within a set. [MDN](https://mdn.dev/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. |\n| popoverTargetElement | `HTMLElement \\| null` | Establishes a relationship between a popover and its invoker button. https://mdn.dev/HTMLInputElement/popoverTargetElement |\n| popovertarget | `string` | The id reference of the element that receives the popover. https://mdn.dev/HTML/Reference/Elements/button#popovertarget |\n| popoverTargetAction (popovertargetaction) | `'show' \\| 'hide' \\| 'toggle'` | The popover target action to perform on the popover target element. https://mdn.dev/HTMLInputElement/popoverTargetAction |\n| commandForElement (commandfor) | `HTMLElement \\| null` | The element that receives the command. https://mdn.dev/Invoker_Commands_API |\n| command | `string` | The command to execute on the element. https://mdn.dev/Invoker_Commands_API |\n| interestForElement (interestfor) | `HTMLElement \\| null` | The element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| sort | `CustomEvent` | Dispatched on sort button click, returns the current sort value and the next sort value. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |"
        }
      ]
    },
    {
      "name": "nve-sparkline",
      "description": "A sparkline is a compact, word-sized chart with typographic scale, for data-dense layouts (text, tables, cards, dashboards).\n---\n\n\n### **CSS Properties:**\n - **--height** - Height (defaults to 1em and scales with parent font-size). [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--line-color** -  _(default: undefined)_\n- **--line-width** -  _(default: undefined)_\n- **--fill-color** - Color used by area and column marks. _(default: undefined)_\n- **--gradient-max-color** -  _(default: undefined)_\n- **--gradient-min-color** -  _(default: undefined)_\n- **--zero-line-color** -  _(default: undefined)_\n- **--zero-line-width** -  _(default: undefined)_\n- **--win-color** - Color used to represent positive values (wins). _(default: undefined)_\n- **--loss-color** - Color used to represent negative values (losses). _(default: undefined)_\n- **--draw-color** - Color used to represent zero values (draws / neutral outcomes). _(default: undefined)_\n- **--symbol-color** -  _(default: undefined)_\n- **--symbol-border-color** -  _(default: undefined)_\n- **--symbol-border-width** -  _(default: undefined)_\n- **--symbol-radius** - symbol circle radius in SVG units. _(default: undefined)_",
      "attributes": [
        {
          "name": "data",
          "description": "Numeric values representing a data series.",
          "values": [{ "name": "number[]" }]
        },
        {
          "name": "mark",
          "description": "Controls the visual representation of data points.\n- `line` Renders data as a connected line to emphasize macro trend.\n\n- `area` Renders data as a filled area beneath a line to emphasize magnitude over time.\n\n- `gradient` Renders a line with gradient color treatment to communicate value intensity across the series.\n\n- `column` Renders data as vertical columns for easy comparison of discrete values.\n\n- `winloss` Renders outcomes as binary or ternary bars to highlight wins, losses, and optional ties.",
          "values": [
            { "name": "line" },
            { "name": "area" },
            { "name": "gradient" },
            { "name": "column" },
            { "name": "winloss" }
          ]
        },
        {
          "name": "interpolation",
          "description": "Controls how the chart connects intermediate values between points in a data series. Defaults to `linear`.\n- `linear` Connects points with straight line segments.\n\n- `smooth` Connects points with smooth bezier curves.\n\n- `step` Connects points with horizontal and vertical step segments.",
          "values": [
            { "name": "linear" },
            { "name": "smooth" },
            { "name": "step" }
          ]
        },
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `accent` Highlights important actions or draws attention to primary interactive elements.\n\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.\n\n- `danger` Signals destructive or irreversible actions that need extra attention and confirmation.\n\n- `scheduled` Task has a scheduled future execution at a specific time.\n\n- `queued` Task is waiting in line to begin after other tasks complete.\n\n- `pending` Task is awaiting approval, user input, or external conditions before proceeding.\n\n- `starting` Task is initializing and preparing to begin active execution.\n\n- `running` Task is actively executing and making progress.\n\n- `restarting` Task restarts after an interruption or reset.\n\n- `stopping` Task is gracefully shutting down and completing cleanup operations.\n\n- `finished` Task has completed successfully with the expected outcome.\n\n- `failed` Task encountered an error and did not complete as intended.\n\n- `unknown` Task status remains unknown or unavailable.\n\n- `ignored` Task was intentionally skipped or excluded from execution.",
          "values": [
            { "name": "scheduled" },
            { "name": "queued" },
            { "name": "pending" },
            { "name": "starting" },
            { "name": "running" },
            { "name": "restarting" },
            { "name": "stopping" },
            { "name": "finished" },
            { "name": "failed" },
            { "name": "unknown" },
            { "name": "ignored" },
            { "name": "accent" },
            { "name": "warning" },
            { "name": "success" },
            { "name": "danger" },
            { "name": "default" }
          ]
        },
        {
          "name": "size",
          "description": "Controls the visual scale of an element to match its importance and available space.\n- `xs` Extra small size for minimal elements or highly dense layouts.\n\n- `sm` Compact size for dense layouts or secondary elements with less visual prominence.\n\n- `md` Standard size that works well in most contexts and provides balanced visibility.\n\n- `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts.\n\n- `xl` Extra large size for emphasizing elements or sparse layouts.",
          "values": [
            { "name": "xs" },
            { "name": "sm" },
            { "name": "md" },
            { "name": "lg" },
            { "name": "xl" },
            { "name": "default" }
          ]
        },
        {
          "name": "denote-first",
          "description": "Denotes the first data point by rendering a symbol at its position.",
          "values": []
        },
        {
          "name": "denote-last",
          "description": "Denotes the last data point by rendering a symbol at its position.",
          "values": []
        },
        {
          "name": "denote-min",
          "description": "Denotes all minimum-value data points by rendering symbols at their positions.",
          "values": []
        },
        {
          "name": "denote-max",
          "description": "Denotes all maximum-value data points by rendering symbols at their positions.",
          "values": []
        },
        {
          "name": "interval-length",
          "description": "Controls spacing between points in a line, in em (1 = chart height). Defaults to `0.6`.",
          "values": []
        },
        {
          "name": "min",
          "description": "Lower bound for the y-axis domain. When undefined, derives the bound from data.",
          "values": [{ "name": "default" }]
        },
        {
          "name": "max",
          "description": "Upper bound for the y-axis domain. When undefined, derives the bound from data.",
          "values": [{ "name": "default" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img"
        },
        {
          "name": "markdown",
          "url": "## nve-sparkline\n\nA sparkline is a compact, word-sized chart with typographic scale, for data-dense layouts (text, tables, cards, dashboards).\n\n### Example\n\n```html\n<nve-sparkline id=\"default\"></nve-sparkline>\n<script type=\"module\">\n  const sparkline = document.querySelector(\"nve-sparkline#default\");\n  sparkline.data = [18, 22, 20, 24, 19, 28, 25, 30];\n</script>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/sparkline/define.js';\n```\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| data | `number[]` | Numeric values representing a data series. |\n| mark | `'line' \\| 'area' \\| 'gradient' \\| 'column' \\| 'winloss'` | 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. |\n| interpolation | `'linear' \\| 'smooth' \\| 'step'` | 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. |\n| status | `'scheduled' \\| 'queued' \\| 'pending' \\| 'starting' \\| 'running' \\| 'restarting' \\| 'stopping' \\| 'finished' \\| 'failed' \\| 'unknown' \\| 'ignored' \\| 'accent' \\| 'warning' \\| 'success' \\| 'danger' \\| \"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. - `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. |\n| size | `'xs' \\| 'sm' \\| 'md' \\| 'lg' \\| 'xl' \\| \"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. |\n| denoteFirst (denote-first) | `boolean` | Denotes the first data point by rendering a symbol at its position. |\n| denoteLast (denote-last) | `boolean` | Denotes the last data point by rendering a symbol at its position. |\n| denoteMin (denote-min) | `boolean` | Denotes all minimum-value data points by rendering symbols at their positions. |\n| denoteMax (denote-max) | `boolean` | Denotes all maximum-value data points by rendering symbols at their positions. |\n| intervalLength (interval-length) | `number` | Controls spacing between points in a line, in em (1 = chart height). Defaults to `0.6`. |\n| min | `number \\| \"default\"` | Lower bound for the y-axis domain. When undefined, derives the bound from data. |\n| max | `number \\| \"default\"` | Upper bound for the y-axis domain. When undefined, derives the bound from data. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --height | `string` | Height (defaults to 1em and scales with parent font-size). [MDN](https://mdn.dev/CSS/height) |\n| --line-color | `string` |  |\n| --line-width | `string` |  |\n| --fill-color | `string` | Color used by area and column marks. |\n| --gradient-max-color | `string` |  |\n| --gradient-min-color | `string` |  |\n| --zero-line-color | `string` |  |\n| --zero-line-width | `string` |  |\n| --win-color | `string` | Color used to represent positive values (wins). |\n| --loss-color | `string` | Color used to represent negative values (losses). |\n| --draw-color | `string` | Color used to represent zero values (draws / neutral outcomes). |\n| --symbol-color | `string` |  |\n| --symbol-border-color | `string` |  |\n| --symbol-border-width | `string` |  |\n| --symbol-radius | `string` | symbol circle radius in SVG units. |"
        }
      ]
    },
    {
      "name": "nve-star-rating",
      "description": "A star rating component lets users rate something using stars, providing a quick visual representation of feedback\n---\n\n\n### **Events:**\n - **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n\n### **Slots:**\n - _default_ - Control input element\n- **label** - Label element\n\n### **CSS Properties:**\n - **--star-size** -  _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--stroke-color** -  _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon** - The icon element",
      "attributes": [
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.",
          "values": [
            { "name": "warning" },
            { "name": "error" },
            { "name": "success" },
            { "name": "disabled" }
          ]
        },
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "fit-text",
          "description": "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)",
          "values": []
        },
        {
          "name": "fit-content",
          "description": "Sets the input to match native default content block",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range"
        },
        {
          "name": "markdown",
          "url": "## nve-star-rating\n\nA star rating component lets users rate something using stars, providing a quick visual representation of feedback\n\n### Example\n\n```html\n<nve-star-rating>\n  <label>rate this input</label>\n  <input id=\"range\" type=\"range\" max=\"5\" value=\"3\" min=\"0\" />\n  <nve-control-message>message</nve-control-message>\n</nve-star-rating>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/star-rating/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input element |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | 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. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| fitText (fit-text) | `boolean` | 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) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| i18n |  | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| nveControl | `string` |  |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n| showPicker |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --star-size | `string` |  |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --stroke-color | `string` |  |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
        }
      ]
    },
    {
      "name": "nve-steps-item",
      "description": "Represents an individual step within a multi-step workflow, displaying its status and enabling navigation within the parent steps component.\n---\n\n\n### **Slots:**\n - _default_ - default slot for step text\n- **status-icon** - custom slotted step icon\n\n### **CSS Properties:**\n - **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--border-top** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--text-transform** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon-button** - The icon button element\n- **progress-ring** - The progress ring element",
      "attributes": [
        {
          "name": "selected",
          "description": "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)\n- `true` The element holds selection and represents the user's current choice within the group.\n\n- `false` The element does not hold selection and the user can choose it.",
          "values": []
        },
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `accent` Highlights important actions or draws attention to primary interactive elements.\n\n- `danger` Signals destructive or irreversible actions that need extra attention and confirmation.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.",
          "values": [
            { "name": "accent" },
            { "name": "danger" },
            { "name": "success" },
            { "name": "pending" },
            { "name": "default" }
          ]
        },
        {
          "name": "container",
          "description": "\nDemonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.\n- `inline` Element container reduces to fit within inline content such as a block of text.\n- `inset` Element container optimizes for embedding or inset placement inside another containing element.\n- `full` Element container optimizes for filling its container bounds.",
          "values": [{ "name": "condensed" }, { "name": "default" }]
        },
        {
          "name": "pressed",
          "description": "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)\n- `true` The button is in the pressed (on) state and the associated action or setting is active.\n\n- `false` The button is in the unpressed (off) state and the associated action or setting is inactive.",
          "values": []
        },
        {
          "name": "expanded",
          "description": "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)\n- `true` The associated content expands and becomes visible to the user.\n\n- `false` The associated content collapses and hides from the user.",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Like input readonly, sets a button semantically as visual treatment only.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly",
          "values": []
        },
        {
          "name": "form",
          "description": "Like input form, sets a button to submit a form outside its parent form.\nReturns a reference to the form element if available.\nhttps://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form",
          "values": [{ "name": "HTMLFormElement" }]
        },
        {
          "name": "name",
          "description": "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)",
          "values": []
        },
        {
          "name": "value",
          "description": "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)",
          "values": []
        },
        {
          "name": "type",
          "description": "Defines the button behavior when associated within a form element.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type",
          "values": [
            { "name": "button" },
            { "name": "submit" },
            { "name": "reset" }
          ]
        },
        {
          "name": "disabled",
          "description": "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)\n- `true` The element has a disabled state and does not accept interaction.\n\n- `false` The element has an enabled state and accepts interaction.",
          "values": []
        },
        {
          "name": "current",
          "description": "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)\n- `page` Marks the current page within a set of navigation links.\n\n- `step` Marks the current step within a multi-step process or workflow.",
          "values": [{ "name": "page" }, { "name": "step" }]
        },
        {
          "name": "popovertarget",
          "description": "The id reference of the element that receives the popover.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget",
          "values": []
        },
        {
          "name": "popovertargetaction",
          "description": "The popover target action to perform on the popover target element.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction",
          "values": [
            { "name": "show" },
            { "name": "hide" },
            { "name": "toggle" }
          ]
        },
        {
          "name": "commandfor",
          "description": "The element that receives the command.\nhttps://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API",
          "values": [{ "name": "HTMLElement" }]
        },
        {
          "name": "command",
          "description": "The command to execute on the element.\nhttps://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API",
          "values": []
        },
        {
          "name": "interestfor",
          "description": "The element that receives the interest.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement",
          "values": [{ "name": "HTMLElement" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/tabs/"
        },
        {
          "name": "markdown",
          "url": "## nve-steps-item\n\nRepresents an individual step within a multi-step workflow, displaying its status and enabling navigation within the parent steps component.\n\n### Example\n\n```html\n<nve-steps behavior-select>\n  <nve-steps-item status=\"success\">Step 1</nve-steps-item>\n  <nve-steps-item status=\"danger\">Step 2</nve-steps-item>\n  <nve-steps-item selected>Step 3</nve-steps-item>\n  <nve-steps-item status=\"pending\">Step 4</nve-steps-item>\n  <nve-steps-item disabled>Disabled</nve-steps-item>\n</nve-steps>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/steps/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for step text |\n| status-icon | `string` | custom slotted step icon |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/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. |\n| status | `'accent' \\| 'danger' \\| 'success' \\| 'pending' \\| \"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. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. - `success` Represents positive outcomes, confirmations, or constructive actions. |\n| container | `'condensed' \\| \"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. |\n| type | `string` |  |\n| pressed | `boolean` | Indicates the current state of a toggle button that switches on or off. [MDN](https://mdn.dev/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. |\n| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/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. |\n| readOnly (readonly) | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |\n| form | `string \\| HTMLFormElement \\| null` | Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://mdn.dev/ElementInternals/form |\n| name | `string` | The name of the button, submitted as a pair with the button value as part of the form data. https://mdn.dev/HTML/Element/button#attr-name |\n| value | `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://mdn.dev/HTML/Element/input#value) |\n| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/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. |\n| current | `'page' \\| 'step'` | Indicates the element that represents the user's current location or position within a set. [MDN](https://mdn.dev/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. |\n| popoverTargetElement | `HTMLElement \\| null` | Establishes a relationship between a popover and its invoker button. https://mdn.dev/HTMLInputElement/popoverTargetElement |\n| popovertarget | `string` | The id reference of the element that receives the popover. https://mdn.dev/HTML/Reference/Elements/button#popovertarget |\n| popoverTargetAction (popovertargetaction) | `'show' \\| 'hide' \\| 'toggle'` | The popover target action to perform on the popover target element. https://mdn.dev/HTMLInputElement/popoverTargetAction |\n| commandForElement (commandfor) | `HTMLElement \\| null` | The element that receives the command. https://mdn.dev/Invoker_Commands_API |\n| command | `string` | The command to execute on the element. https://mdn.dev/Invoker_Commands_API |\n| interestForElement (interestfor) | `HTMLElement \\| null` | The element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |"
        }
      ]
    },
    {
      "name": "nve-steps",
      "description": "Steps enables a multi-step workflow allowing a user to complete a goal in a specific sequence.\n---\n\n\n### **Slots:**\n - _default_ - default slot for steps-item\n\n### **CSS Properties:**\n - **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_",
      "attributes": [
        {
          "name": "vertical",
          "description": "Determines whether the steps should display in a vertical layout vs. defaulting to horizontal.",
          "values": []
        },
        {
          "name": "container",
          "description": "\nDemonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.\n- `inline` Element container reduces to fit within inline content such as a block of text.\n- `inset` Element container optimizes for embedding or inset placement inside another containing element.\n- `full` Element container optimizes for filling its container bounds.",
          "values": [{ "name": "condensed" }, { "name": "default" }]
        },
        {
          "name": "behavior-select",
          "description": "Determines whether the steps should handle selection behavior vs. defaults to off.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/tabs/"
        },
        {
          "name": "markdown",
          "url": "## nve-steps\n\nSteps enables a multi-step workflow allowing a user to complete a goal in a specific sequence.\n\n### Example\n\n```html\n<nve-steps behavior-select>\n  <nve-steps-item status=\"success\">Step 1</nve-steps-item>\n  <nve-steps-item status=\"danger\">Step 2</nve-steps-item>\n  <nve-steps-item selected>Step 3</nve-steps-item>\n  <nve-steps-item status=\"pending\">Step 4</nve-steps-item>\n  <nve-steps-item disabled>Disabled</nve-steps-item>\n</nve-steps>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/steps/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for steps-item |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| vertical | `boolean` | Determines whether the steps should display in a vertical layout vs. defaulting to horizontal. |\n| container | `'condensed' \\| \"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. |\n| behaviorSelect (behavior-select) | `boolean` | Determines whether the steps should handle selection behavior vs. defaults to off. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |"
        }
      ]
    },
    {
      "name": "nve-switch-group",
      "description": "A switch group is a container for a group of switches.\n---\n\n\n### **Slots:**\n - _default_ - Control input elements\n\n### **CSS Properties:**\n - **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-text-transform** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_",
      "attributes": [
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/switch/"
        },
        {
          "name": "markdown",
          "url": "## nve-switch-group\n\nA switch group is a container for a group of switches.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/switch/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input elements |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |"
        }
      ]
    },
    {
      "name": "nve-switch",
      "description": "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.\n---\n\n\n### **Events:**\n - **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n\n### **Slots:**\n - _default_ - Control input element\n- **label** - Label element\n\n### **CSS Properties:**\n - **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--border-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--anchor-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--anchor-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--anchor-border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--anchor-background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_",
      "attributes": [
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.",
          "values": [
            { "name": "warning" },
            { "name": "error" },
            { "name": "success" },
            { "name": "disabled" }
          ]
        },
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "fit-text",
          "description": "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)",
          "values": []
        },
        {
          "name": "fit-content",
          "description": "Sets the input to match native default content block",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/switch/"
        },
        {
          "name": "markdown",
          "url": "## nve-switch\n\nA 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.\n\n### Example\n\n```html\n<nve-switch>\n  <label>label</label>\n  <input type=\"checkbox\" />\n</nve-switch>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/switch/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input element |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| nveControl | `string` |  |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | 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. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| fitText (fit-text) | `boolean` | 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) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| i18n |  | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n| showPicker |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border-width | `string` | [MDN](https://mdn.dev/CSS/border-width) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --anchor-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --anchor-height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --anchor-border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --anchor-background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
        }
      ]
    },
    {
      "name": "nve-tabs-group",
      "description": "Coordinates tabs with matching panel content using Invoker Commands and slot-matched panels.\n---\n\n\n### **Events:**\n - **select** - Dispatched when the selected tab value changes after an invoker `--toggle` updates selection\n\n### **Slots:**\n - _default_ - Default slot for a single nve-tabs element. Do not use behavior-select on nve-tabs when using this group.\n- **value** - Named panel content where the slot name matches a nve-tabs-item value.\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_",
      "attributes": [
        {
          "name": "alignment",
          "description": "Determines the alignment of the popover relative to the provided anchor element.",
          "values": [{ "name": "top" }, { "name": "start" }, { "name": "end" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/tabs/"
        },
        {
          "name": "markdown",
          "url": "## nve-tabs-group\n\nCoordinates tabs with matching panel content using Invoker Commands and slot-matched panels.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/tabs/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Default slot for a single nve-tabs element. Do not use behavior-select on nve-tabs when using this group. |\n| {value} | `string` | Named panel content where the slot name matches a nve-tabs-item value. |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| alignment | `'top' \\| 'start' \\| 'end'` | Determines the alignment of the popover relative to the provided anchor element. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| select | `CustomEvent` | Dispatched when the selected tab value changes after an invoker `--toggle` updates selection |\n\n### Invoker Commands\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --toggle | `CommandEvent` | Select the matching tab and reveal the panel whose slot matches the invoker value. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
        }
      ]
    },
    {
      "name": "nve-tabs-item",
      "description": "Represents an individual tab within a tablist, providing a selectable button for switching between content views.\n---\n\n\n### **Slots:**\n - _default_ - default slot for content\n\n### **CSS Properties:**\n - **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--text-transform** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) _(default: undefined)_",
      "attributes": [
        {
          "name": "selected",
          "description": "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)\n- `true` The element holds selection and represents the user's current choice within the group.\n\n- `false` The element does not hold selection and the user can choose it.",
          "values": []
        },
        {
          "name": "pressed",
          "description": "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)\n- `true` The button is in the pressed (on) state and the associated action or setting is active.\n\n- `false` The button is in the unpressed (off) state and the associated action or setting is inactive.",
          "values": []
        },
        {
          "name": "expanded",
          "description": "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)\n- `true` The associated content expands and becomes visible to the user.\n\n- `false` The associated content collapses and hides from the user.",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Like input readonly, sets a button semantically as visual treatment only.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly",
          "values": []
        },
        {
          "name": "form",
          "description": "Like input form, sets a button to submit a form outside its parent form.\nReturns a reference to the form element if available.\nhttps://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form",
          "values": [{ "name": "HTMLFormElement" }]
        },
        {
          "name": "name",
          "description": "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)",
          "values": []
        },
        {
          "name": "value",
          "description": "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)",
          "values": []
        },
        {
          "name": "type",
          "description": "Defines the button behavior when associated within a form element.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type",
          "values": [
            { "name": "button" },
            { "name": "submit" },
            { "name": "reset" }
          ]
        },
        {
          "name": "disabled",
          "description": "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)\n- `true` The element has a disabled state and does not accept interaction.\n\n- `false` The element has an enabled state and accepts interaction.",
          "values": []
        },
        {
          "name": "current",
          "description": "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)\n- `page` Marks the current page within a set of navigation links.\n\n- `step` Marks the current step within a multi-step process or workflow.",
          "values": [{ "name": "page" }, { "name": "step" }]
        },
        {
          "name": "popovertarget",
          "description": "The id reference of the element that receives the popover.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget",
          "values": []
        },
        {
          "name": "popovertargetaction",
          "description": "The popover target action to perform on the popover target element.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction",
          "values": [
            { "name": "show" },
            { "name": "hide" },
            { "name": "toggle" }
          ]
        },
        {
          "name": "commandfor",
          "description": "The element that receives the command.\nhttps://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API",
          "values": [{ "name": "HTMLElement" }]
        },
        {
          "name": "command",
          "description": "The command to execute on the element.\nhttps://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API",
          "values": []
        },
        {
          "name": "interestfor",
          "description": "The element that receives the interest.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement",
          "values": [{ "name": "HTMLElement" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/tabs/"
        },
        {
          "name": "markdown",
          "url": "## nve-tabs-item\n\nRepresents an individual tab within a tablist, providing a selectable button for switching between content views.\n\n### Example\n\n```html\n<nve-tabs-group id=\"tab-group-default\">\n  <nve-tabs>\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-default\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-default\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-default\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\">overview content</div>\n  <div slot=\"details\">details content</div>\n  <div slot=\"settings\">settings content</div>\n</nve-tabs-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/tabs/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for content |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/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. |\n| type | `string` |  |\n| pressed | `boolean` | Indicates the current state of a toggle button that switches on or off. [MDN](https://mdn.dev/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. |\n| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/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. |\n| readOnly (readonly) | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |\n| form | `string \\| HTMLFormElement \\| null` | Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://mdn.dev/ElementInternals/form |\n| name | `string` | The name of the button, submitted as a pair with the button value as part of the form data. https://mdn.dev/HTML/Element/button#attr-name |\n| value | `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://mdn.dev/HTML/Element/input#value) |\n| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/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. |\n| current | `'page' \\| 'step'` | Indicates the element that represents the user's current location or position within a set. [MDN](https://mdn.dev/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. |\n| popoverTargetElement | `HTMLElement \\| null` | Establishes a relationship between a popover and its invoker button. https://mdn.dev/HTMLInputElement/popoverTargetElement |\n| popovertarget | `string` | The id reference of the element that receives the popover. https://mdn.dev/HTML/Reference/Elements/button#popovertarget |\n| popoverTargetAction (popovertargetaction) | `'show' \\| 'hide' \\| 'toggle'` | The popover target action to perform on the popover target element. https://mdn.dev/HTMLInputElement/popoverTargetAction |\n| commandForElement (commandfor) | `HTMLElement \\| null` | The element that receives the command. https://mdn.dev/Invoker_Commands_API |\n| command | `string` | The command to execute on the element. https://mdn.dev/Invoker_Commands_API |\n| interestForElement (interestfor) | `HTMLElement \\| null` | The element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |"
        }
      ]
    },
    {
      "name": "nve-tabs",
      "description": "Tabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.\n---\n\n\n### **Slots:**\n - _default_ - default slot for tab-item\n\n### **CSS Properties:**\n - **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--indicator-background** -  _(default: undefined)_\n- **--indicator-border-radius** -  _(default: undefined)_\n- **--indicator-height** -  _(default: undefined)_\n- **--border-inset** -  _(default: undefined)_",
      "attributes": [
        {
          "name": "vertical",
          "description": "Determines whether the tabs should display in a vertical layout vs. defaulting to horizontal.",
          "values": []
        },
        {
          "name": "borderless",
          "description": "Determines whether the tabs should display a border on selected items vs. defaults to show border.",
          "values": []
        },
        {
          "name": "behavior-select",
          "description": "Determines whether the tabs should handle selection behavior vs. defaults to off.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/tabs/"
        },
        {
          "name": "markdown",
          "url": "## nve-tabs\n\nTabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.\n\n### Example\n\n```html\n<nve-tabs-group id=\"tab-group-default\">\n  <nve-tabs>\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-default\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-default\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-default\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\">overview content</div>\n  <div slot=\"details\">details content</div>\n  <div slot=\"settings\">settings content</div>\n</nve-tabs-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/tabs/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for tab-item |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| vertical | `boolean` | Determines whether the tabs should display in a vertical layout vs. defaulting to horizontal. |\n| borderless | `boolean` | Determines whether the tabs should display a border on selected items vs. defaults to show border. |\n| behaviorSelect (behavior-select) | `boolean` | Determines whether the tabs should handle selection behavior vs. defaults to off. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --indicator-background | `string` |  |\n| --indicator-border-radius | `string` |  |\n| --indicator-height | `string` |  |\n| --border-inset | `string` |  |"
        }
      ]
    },
    {
      "name": "nve-tag",
      "description": "A interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations.\n---\n\n\n### **Slots:**\n - _default_ - default slot for content\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--max-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) _(default: undefined)_\n- **--text-decoration** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon** - The icon element",
      "attributes": [
        {
          "name": "closable",
          "description": "Indicates whether the user can dismiss or close the element.\n- `true` The element displays a close control and the user can dismiss it.\n\n- `false` The user cannot close the element and must dismiss it programmatically.",
          "values": []
        },
        {
          "name": "color",
          "description": "Defines a base color from the theme color palette",
          "values": [
            { "name": "red-cardinal" },
            { "name": "gray-slate" },
            { "name": "gray-denim" },
            { "name": "blue-indigo" },
            { "name": "blue-cobalt" },
            { "name": "blue-sky" },
            { "name": "teal-cyan" },
            { "name": "green-mint" },
            { "name": "teal-seafoam" },
            { "name": "green-grass" },
            { "name": "yellow-amber" },
            { "name": "orange-pumpkin" },
            { "name": "red-tomato" },
            { "name": "pink-magenta" },
            { "name": "purple-plum" },
            { "name": "purple-violet" },
            { "name": "purple-lavender" },
            { "name": "pink-rose" },
            { "name": "green-jade" },
            { "name": "lime-pear" },
            { "name": "yellow-nova" },
            { "name": "brand-green" }
          ]
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `emphasis` Increases visual weight to draw attention and highlight important elements.",
          "values": [{ "name": "emphasis" }, { "name": "default" }]
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "pressed",
          "description": "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)\n- `true` The button is in the pressed (on) state and the associated action or setting is active.\n\n- `false` The button is in the unpressed (off) state and the associated action or setting is inactive.",
          "values": []
        },
        {
          "name": "expanded",
          "description": "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)\n- `true` The associated content expands and becomes visible to the user.\n\n- `false` The associated content collapses and hides from the user.",
          "values": []
        },
        {
          "name": "readonly",
          "description": "Like input readonly, sets a button semantically as visual treatment only.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly",
          "values": []
        },
        {
          "name": "form",
          "description": "Like input form, sets a button to submit a form outside its parent form.\nReturns a reference to the form element if available.\nhttps://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form",
          "values": [{ "name": "HTMLFormElement" }]
        },
        {
          "name": "name",
          "description": "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)",
          "values": []
        },
        {
          "name": "value",
          "description": "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)",
          "values": []
        },
        {
          "name": "type",
          "description": "Defines the button behavior when associated within a form element.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type",
          "values": [
            { "name": "button" },
            { "name": "submit" },
            { "name": "reset" }
          ]
        },
        {
          "name": "disabled",
          "description": "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)\n- `true` The element has a disabled state and does not accept interaction.\n\n- `false` The element has an enabled state and accepts interaction.",
          "values": []
        },
        {
          "name": "selected",
          "description": "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)\n- `true` The element holds selection and represents the user's current choice within the group.\n\n- `false` The element does not hold selection and the user can choose it.",
          "values": []
        },
        {
          "name": "current",
          "description": "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)\n- `page` Marks the current page within a set of navigation links.\n\n- `step` Marks the current step within a multi-step process or workflow.",
          "values": [{ "name": "page" }, { "name": "step" }]
        },
        {
          "name": "popovertarget",
          "description": "The id reference of the element that receives the popover.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget",
          "values": []
        },
        {
          "name": "popovertargetaction",
          "description": "The popover target action to perform on the popover target element.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction",
          "values": [
            { "name": "show" },
            { "name": "hide" },
            { "name": "toggle" }
          ]
        },
        {
          "name": "commandfor",
          "description": "The element that receives the command.\nhttps://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API",
          "values": [{ "name": "HTMLElement" }]
        },
        {
          "name": "command",
          "description": "The command to execute on the element.\nhttps://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API",
          "values": []
        },
        {
          "name": "interestfor",
          "description": "The element that receives the interest.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement",
          "values": [{ "name": "HTMLElement" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/button/"
        },
        {
          "name": "markdown",
          "url": "## nve-tag\n\nA interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations.\n\n### Example\n\n```html\n<nve-tag>topic-tag</nve-tag>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/tag/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for content |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| closable | `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. |\n| 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'` | Defines a base color from the theme color palette |\n| prominence | `'emphasis' \\| \"default\"` | Controls the visual prominence to establish hierarchy and guide user attention. - `emphasis` Increases visual weight to draw attention and highlight important elements. |\n| i18n |  | Enables updating internal string values for internationalization. |\n| type | `string` |  |\n| pressed | `boolean` | Indicates the current state of a toggle button that switches on or off. [MDN](https://mdn.dev/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. |\n| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/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. |\n| readOnly (readonly) | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |\n| form | `string \\| HTMLFormElement \\| null` | Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://mdn.dev/ElementInternals/form |\n| name | `string` | The name of the button, submitted as a pair with the button value as part of the form data. https://mdn.dev/HTML/Element/button#attr-name |\n| value | `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://mdn.dev/HTML/Element/input#value) |\n| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/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. |\n| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/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. |\n| current | `'page' \\| 'step'` | Indicates the element that represents the user's current location or position within a set. [MDN](https://mdn.dev/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. |\n| popoverTargetElement | `HTMLElement \\| null` | Establishes a relationship between a popover and its invoker button. https://mdn.dev/HTMLInputElement/popoverTargetElement |\n| popovertarget | `string` | The id reference of the element that receives the popover. https://mdn.dev/HTML/Reference/Elements/button#popovertarget |\n| popoverTargetAction (popovertargetaction) | `'show' \\| 'hide' \\| 'toggle'` | The popover target action to perform on the popover target element. https://mdn.dev/HTMLInputElement/popoverTargetAction |\n| commandForElement (commandfor) | `HTMLElement \\| null` | The element that receives the command. https://mdn.dev/Invoker_Commands_API |\n| command | `string` | The command to execute on the element. https://mdn.dev/Invoker_Commands_API |\n| interestForElement (interestfor) | `HTMLElement \\| null` | The element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --max-width | `string` | [MDN](https://mdn.dev/CSS/max-width) |\n| --text-decoration | `string` | [MDN](https://mdn.dev/CSS/text-decoration) |"
        }
      ]
    },
    {
      "name": "nve-textarea",
      "description": "A textarea is a control that enables users to enter and edit text.\n---\n\n\n### **Events:**\n - **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n\n### **Slots:**\n - _default_ - Control input element\n- **label** - Label element\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--min-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_",
      "attributes": [
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.",
          "values": [
            { "name": "warning" },
            { "name": "error" },
            { "name": "success" },
            { "name": "disabled" }
          ]
        },
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "fit-text",
          "description": "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)",
          "values": []
        },
        {
          "name": "fit-content",
          "description": "Sets the input to match native default content block",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea"
        },
        {
          "name": "markdown",
          "url": "## nve-textarea\n\nA textarea is a control that enables users to enter and edit text.\n\n### Example\n\n```html\n<nve-textarea>\n  <label>label</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/textarea/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input element |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | 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. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| fitText (fit-text) | `boolean` | 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) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| i18n |  | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| nveControl | `string` |  |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n| showPicker |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
        }
      ]
    },
    {
      "name": "nve-time",
      "description": "A time picker is a control that enables users to choose a time value.\n---\n\n\n### **Events:**\n - **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n\n### **Slots:**\n - _default_ - Control input element\n- **label** - Label element\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon-button** - The clock icon button element",
      "attributes": [
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.",
          "values": [{ "name": "flat" }, { "name": "default" }]
        },
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.",
          "values": [
            { "name": "warning" },
            { "name": "error" },
            { "name": "success" },
            { "name": "disabled" }
          ]
        },
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "fit-text",
          "description": "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)",
          "values": []
        },
        {
          "name": "fit-content",
          "description": "Sets the input to match native default content block",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time"
        },
        {
          "name": "markdown",
          "url": "## nve-time\n\nA time picker is a control that enables users to choose a time value.\n\n### Example\n\n```html\n<nve-time>\n  <label>label</label>\n  <input type=\"time\" min=\"09:00\" max=\"18:00\" value=\"12:00\" />\n  <nve-control-message>message</nve-control-message>\n</nve-time>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/time/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input element |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat' \\| \"default\"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | 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. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| fitText (fit-text) | `boolean` | 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) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| i18n |  | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| nveControl | `string` |  |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n| showPicker |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
        }
      ]
    },
    {
      "name": "nve-toast",
      "description": "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)\n---\n\n\n### **Events:**\n - **beforetoggle** - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n- **toggle** - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n- **open** - Dispatched when the toast opens.\n- **close** - Dispatched when the toast closes.\n\n### **Slots:**\n - _default_ - default content slot\n- **prefix** - custom status icon slot\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--justify-content** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--box-shadow** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--animation-duration** - Duration of toast open/close animations [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) _(default: undefined)_\n\n### **CSS Parts:**\n - **prefix-icon** - The prefix icon slot\n- **icon-button** - The close icon button element",
      "attributes": [
        {
          "name": "anchor",
          "description": "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.",
          "values": [{ "name": "HTMLElement" }]
        },
        {
          "name": "position",
          "description": "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)\n- `center` Centers the popover directly over the anchor element.\n\n- `top` Positions the popover above the anchor element.\n\n- `bottom` Positions the popover below the anchor element.\n\n- `left` Positions the popover to the left side of the anchor element.\n\n- `right` Positions the popover to the right side of the anchor element.",
          "values": [
            { "name": "center" },
            { "name": "top" },
            { "name": "bottom" },
            { "name": "left" },
            { "name": "right" }
          ]
        },
        {
          "name": "alignment",
          "description": "Determines the alignment of the popover relative to the provided anchor element.\n- `start` Aligns the popover to the beginning edge of the anchor for left or top alignment.\n\n- `end` Aligns the popover to the ending edge of the anchor for right or bottom alignment.\n\n- `center` Centers the popover along the anchor's edge for balanced positioning.",
          "values": [
            { "name": "start" },
            { "name": "end" },
            { "name": "center" }
          ]
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        },
        {
          "name": "closable",
          "description": "Indicates whether the user can dismiss or close the element.\n- `true` The element displays a close control and the user can dismiss it.\n\n- `false` The user cannot close the element and must dismiss it programmatically.",
          "values": []
        },
        {
          "name": "close-timeout",
          "description": "A delayed `close` event occurs after the provided millisecond value elapses.",
          "values": []
        },
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `accent` Highlights important actions or draws attention to primary interactive elements.\n\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.\n\n- `danger` Signals destructive or irreversible actions that need extra attention and confirmation.",
          "values": [
            { "name": "accent" },
            { "name": "warning" },
            { "name": "success" },
            { "name": "danger" }
          ]
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/"
        },
        {
          "name": "markdown",
          "url": "## nve-toast\n\nA 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)\n\n### Example\n\n```html\n<nve-toast id=\"toast\" close-timeout=\"1500\">hello there</nve-toast>\n<nve-button popovertarget=\"toast\">button</nve-button>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/toast/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default content slot |\n| prefix | `string` | custom status icon slot |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| anchor | `string \\| HTMLElement` | 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. |\n| position | `'center' \\| 'top' \\| 'bottom' \\| 'left' \\| 'right'` | Determines the position of an element along both inline and block axis. [MDN](https://mdn.dev/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. |\n| alignment | `'start' \\| 'end' \\| 'center'` | 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. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| closable | `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. |\n| closeTimeout (close-timeout) | `number` | Sets the automatic dismissal time in milliseconds before the element emits a `close` event. Allow ~200-250ms per word for comfortable reading. - `0` Warning or error messages requiring immediate acknowledgment. - `3000` Brief success or confirmation messages. - `7000` Standard informational messages. - `10000` Messages with actions or requiring user decision. |\n| status | `'accent' \\| 'warning' \\| 'success' \\| 'danger'` | 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. |\n| i18n |  | Enables updating internal string values for internationalization. |\n| typeNativePopoverController |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| beforetoggle | `CustomEvent` | Dispatched on a popover just before showing or hiding. [MDN](https://mdn.dev/HTMLElement/beforetoggle_event) |\n| toggle | `CustomEvent` | Dispatched on a popover element just after showing or hiding. [MDN](https://mdn.dev/HTMLElement/toggle_event) |\n| open | `CustomEvent` | Dispatched when the toast opens. |\n| close | `CustomEvent` | Dispatched when the toast closes. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --justify-content | `string` | [MDN](https://mdn.dev/CSS/justify-content) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --animation-duration | `string` | Duration of toast open/close animations [MDN](https://mdn.dev/CSS/animation-duration) |"
        }
      ]
    },
    {
      "name": "nve-toggletip-footer",
      "description": "Provides a designated area at the bottom of a toggletip for actions or supplementary information.\n---\n\n\n### **Slots:**\n - _default_ - default slot for the toggletip footer\n\n### **CSS Properties:**\n - **--border-top** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "markdown",
          "url": "## nve-toggletip-footer\n\nProvides a designated area at the bottom of a toggletip for actions or supplementary information.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/toggletip/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for the toggletip footer |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |"
        }
      ]
    },
    {
      "name": "nve-toggletip-header",
      "description": "Displays a title or contextual label at the top of a toggletip to categorize its contents.\n---\n\n\n### **Slots:**\n - _default_ - default slot for the toggletip header\n\n### **CSS Properties:**\n - **--border-bottom** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_",
      "attributes": [],
      "references": [
        {
          "name": "markdown",
          "url": "## nve-toggletip-header\n\nDisplays a title or contextual label at the top of a toggletip to categorize its contents.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/toggletip/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for the toggletip header |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |"
        }
      ]
    },
    {
      "name": "nve-toggletip",
      "description": "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)\n---\n\n\n### **Events:**\n - **beforetoggle** - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n- **toggle** - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n- **open** - Dispatched when the toggletip opens.\n- **close** - Dispatched when the toggletip closes.\n\n### **Slots:**\n - _default_ - default slot for toggletip content\n\n### **CSS Properties:**\n - **--arrow-transform** -  _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--box-shadow** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--min-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--animation-duration** - Duration of toggletip open/close animations [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon-button** - The close icon button element",
      "attributes": [
        {
          "name": "anchor",
          "description": "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.",
          "values": [{ "name": "HTMLElement" }]
        },
        {
          "name": "position",
          "description": "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)\n- `center` Centers the popover directly over the anchor element.\n\n- `top` Positions the popover above the anchor element.\n\n- `bottom` Positions the popover below the anchor element.\n\n- `left` Positions the popover to the left side of the anchor element.\n\n- `right` Positions the popover to the right side of the anchor element.",
          "values": [
            { "name": "center" },
            { "name": "top" },
            { "name": "bottom" },
            { "name": "left" },
            { "name": "right" }
          ]
        },
        {
          "name": "alignment",
          "description": "Determines the alignment of the popover relative to the provided anchor element.\n- `start` Aligns the popover to the beginning edge of the anchor for left or top alignment.\n\n- `end` Aligns the popover to the ending edge of the anchor for right or bottom alignment.\n\n- `center` Centers the popover along the anchor's edge for balanced positioning.",
          "values": [
            { "name": "start" },
            { "name": "end" },
            { "name": "center" }
          ]
        },
        {
          "name": "closable",
          "description": "Indicates whether the user can dismiss or close the element.\n- `true` The element displays a close control and the user can dismiss it.\n\n- `false` The user cannot close the element and must dismiss it programmatically.",
          "values": []
        },
        {
          "name": "arrow",
          "description": "Determines if the component renders an arrow.",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/"
        },
        {
          "name": "markdown",
          "url": "## nve-toggletip\n\nGeneric toggletip element for rendering a variety of different interactive content. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)\n\n### Example\n\n```html\n<nve-toggletip id=\"toggletip\">hello there</nve-toggletip>\n<nve-button popovertarget=\"toggletip\">button</nve-button>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/toggletip/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for toggletip content |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| anchor | `string \\| HTMLElement` | 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. |\n| position | `'center' \\| 'top' \\| 'bottom' \\| 'left' \\| 'right'` | Determines the position of an element along both inline and block axis. [MDN](https://mdn.dev/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. |\n| alignment | `'start' \\| 'end' \\| 'center'` | 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. |\n| closable | `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. |\n| arrow | `boolean` | Determines if the component renders an arrow. |\n| popoverArrow | `HTMLElement` |  |\n| typeNativePopoverController |  |  |\n| i18n |  | Enables updating internal string values for internationalization. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| beforetoggle | `CustomEvent` | Dispatched on a popover just before showing or hiding. [MDN](https://mdn.dev/HTMLElement/beforetoggle_event) |\n| toggle | `CustomEvent` | Dispatched on a popover element just after showing or hiding. [MDN](https://mdn.dev/HTMLElement/toggle_event) |\n| open | `CustomEvent` | Dispatched when the toggletip opens. |\n| close | `CustomEvent` | Dispatched when the toggletip closes. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --arrow-transform | `string` |  |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --animation-duration | `string` | Duration of toggletip open/close animations [MDN](https://mdn.dev/CSS/animation-duration) |"
        }
      ]
    },
    {
      "name": "nve-toolbar",
      "description": "A toolbar is a container for grouping a set of controls, such as buttons, icon buttons and combobox search.\n---\n\n\n### **Slots:**\n - _default_ - default slot for content\n- **prefix** - slot for prefix content\n- **suffix** - slot for suffix content\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--min-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--border-bottom** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) _(default: undefined)_\n- **--box-shadow** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_",
      "attributes": [
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.\n\n- `inset` Element container optimizes for embedding or inset placement inside another containing element.\n\n- `full` Element container optimizes for filling its container bounds.",
          "values": [
            { "name": "flat" },
            { "name": "inset" },
            { "name": "full" },
            { "name": "default" }
          ]
        },
        {
          "name": "content",
          "description": "Determines the primary content overflow behavior.",
          "values": [
            { "name": "scroll" },
            { "name": "wrap" },
            { "name": "default" }
          ]
        },
        {
          "name": "orientation",
          "description": "Controls the directional flow of the element's layout and interaction pattern.\n- `horizontal` Element orients horizontally with left-to-right flow.\n\n- `vertical` Element orients vertically with top-to-bottom flow.",
          "values": [
            { "name": "horizontal" },
            { "name": "vertical" },
            { "name": "default" }
          ]
        },
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `accent` Highlights important actions or draws attention to primary interactive elements.",
          "values": [{ "name": "accent" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/"
        },
        {
          "name": "markdown",
          "url": "## nve-toolbar\n\nA toolbar is a container for grouping a set of controls, such as buttons, icon buttons and combobox search.\n\n### Example\n\n```html\n<nve-toolbar>\n  <nve-button><nve-icon name=\"add\"></nve-icon> create</nve-button>\n  <nve-button><nve-icon name=\"delete\"></nve-icon> delete</nve-button>\n  <nve-icon-button icon-name=\"gear\" slot=\"suffix\" aria-label=\"settings\"></nve-icon-button>\n</nve-toolbar>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/toolbar/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for content |\n| prefix | `string` | slot for prefix content |\n| suffix | `string` | slot for suffix content |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat' \\| 'inset' \\| 'full' \\| \"default\"` | 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. |\n| content | `'scroll' \\| 'wrap' \\| \"default\"` | Determines the primary content overflow behavior. |\n| orientation | `'horizontal' \\| 'vertical' \\| \"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. |\n| status | `'accent'` | 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. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |\n| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |"
        }
      ]
    },
    {
      "name": "nve-tooltip",
      "description": "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)\n---\n\n\n### **Events:**\n - **beforetoggle** - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n- **toggle** - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n- **open** - Dispatched when the tooltip opens.\n- **close** - Dispatched when the tooltip closes.\n\n### **Slots:**\n - _default_ - default content slot\n\n### **CSS Properties:**\n - **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--box-shadow** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--arrow-transform** -  _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--animation-duration** - Duration of tooltip open/close animations [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) _(default: undefined)_\n\n### **CSS Parts:**\n - **arrow** - undefined",
      "attributes": [
        {
          "name": "anchor",
          "description": "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.",
          "values": [{ "name": "HTMLElement" }]
        },
        {
          "name": "position",
          "description": "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)\n- `center` Centers the popover directly over the anchor element.\n\n- `top` Positions the popover above the anchor element.\n\n- `bottom` Positions the popover below the anchor element.\n\n- `left` Positions the popover to the left side of the anchor element.\n\n- `right` Positions the popover to the right side of the anchor element.",
          "values": [
            { "name": "center" },
            { "name": "top" },
            { "name": "bottom" },
            { "name": "left" },
            { "name": "right" }
          ]
        },
        {
          "name": "alignment",
          "description": "Determines the alignment of the popover relative to the provided anchor element.\n- `start` Aligns the popover to the beginning edge of the anchor for left or top alignment.\n\n- `end` Aligns the popover to the ending edge of the anchor for right or bottom alignment.\n\n- `center` Centers the popover along the anchor's edge for balanced positioning.",
          "values": [
            { "name": "start" },
            { "name": "end" },
            { "name": "center" }
          ]
        },
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `accent` - Highlights important actions or draws attention to primary interactive elements.\n- `warning` - Indicates cautionary actions that require careful consideration before proceeding.\n- `success` - Represents positive outcomes, confirmations, or constructive actions.\n- `danger` - Signals destructive or irreversible actions that need extra attention and confirmation.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/"
        },
        {
          "name": "markdown",
          "url": "## nve-tooltip\n\nA 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)\n\n### Example\n\n```html\n<nve-tooltip id=\"tooltip\">hello there</nve-tooltip>\n<nve-button interestfor=\"tooltip\">button</nve-button>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/tooltip/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default content slot |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| anchor | `string \\| HTMLElement` | 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. |\n| position | `'center' \\| 'top' \\| 'bottom' \\| 'left' \\| 'right'` | Determines the position of an element along both inline and block axis. [MDN](https://mdn.dev/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. |\n| alignment | `'start' \\| 'end' \\| 'center'` | 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. |\n| status | `'muted'` | 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. |\n| popoverArrow | `HTMLElement` |  |\n| typeNativePopoverController |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| beforetoggle | `CustomEvent` | Dispatched on a popover just before showing or hiding. [MDN](https://mdn.dev/HTMLElement/beforetoggle_event) |\n| toggle | `CustomEvent` | Dispatched on a popover element just after showing or hiding. [MDN](https://mdn.dev/HTMLElement/toggle_event) |\n| open | `CustomEvent` | Dispatched when the tooltip opens. |\n| close | `CustomEvent` | Dispatched when the tooltip closes. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --arrow-transform | `string` |  |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --animation-duration | `string` | Duration of tooltip open/close animations [MDN](https://mdn.dev/CSS/animation-duration) |"
        }
      ]
    },
    {
      "name": "nve-tree-node",
      "description": "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.\n---\n\n\n### **Events:**\n - **open** - Dispatched when the node opens.\n- **close** - Dispatched when the node closes.\n- **select** - Dispatched when the node selection state changes.\n\n### **Methods:**\n - **open()** - opens and sets the expanded state automatically if behaviorExpand is true\n- **close()** - closes and sets the expanded state automatically if behaviorExpand is true\n\n### **Slots:**\n - _default_ - Use default slot for basic text content or nested <nve-tree-node> elements.\n- **content** - Use only for extended long form content containing interactive elements or form inputs.\n\n### **CSS Properties:**\n - **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--min-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) _(default: undefined)_\n- **--text-wrap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon-button** - The icon button element\n- **icon** - The icon element\n- **checkbox** - The checkbox element",
      "attributes": [
        {
          "name": "expanded",
          "description": "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)\n- `true` The associated content expands and becomes visible to the user.\n\n- `false` The associated content collapses and hides from the user.",
          "values": []
        },
        {
          "name": "selected",
          "description": "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)\n- `true` The element holds selection and represents the user's current choice within the group.\n\n- `false` The element does not hold selection and the user can choose it.",
          "values": []
        },
        {
          "name": "expandable",
          "description": "Determines whether a node can be expandable. Expandable by default if slotted nodes exist.",
          "values": []
        },
        {
          "name": "selectable",
          "description": "Determines whether a node can be in a selected state. Nodes can be in a single or multi select state.",
          "values": [{ "name": "single" }, { "name": "multi" }]
        },
        {
          "name": "highlighted",
          "description": "Determines the highlighted state of the element. Highlighted states serve non-interactive selections where nodes may relate to other selected portions of the UI.",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/treeview/"
        },
        {
          "name": "markdown",
          "url": "## nve-tree-node\n\nA 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.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/tree/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Use default slot for basic text content or nested <nve-tree-node> elements. |\n| content | `string` | Use only for extended long form content containing interactive elements or form inputs. |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/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. |\n| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/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. |\n| expandable | `boolean` | Determines whether a node can be expandable. Expandable by default if slotted nodes exist. |\n| selectable | `'single' \\| 'multi'` | Determines whether a node can be in a selected state. Nodes can be in a single or multi select state. |\n| highlighted | `boolean` | Determines the highlighted state of the element. Highlighted states serve non-interactive selections where nodes may relate to other selected portions of the UI. |\n| i18n |  | Enables updating internal string values for internationalization. |\n| indeterminate | `boolean` |  |\n| behaviorExpand | `boolean` |  |\n| behaviorSelect | `boolean` |  |\n| open |  | opens and sets the expanded state automatically if behaviorExpand is true |\n| close |  | closes and sets the expanded state automatically if behaviorExpand is true |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| open | `CustomEvent` | Dispatched when the node opens. |\n| close | `CustomEvent` | Dispatched when the node closes. |\n| select | `CustomEvent` | Dispatched when the node selection state changes. |\n\n### Invoker Commands\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --select | `CommandEvent` | use to select the node |\n| --deselect | `CommandEvent` | use to deselect the node |\n| --toggle-select | `CommandEvent` | use to toggle the node selection state |\n| --open | `CommandEvent` | use to open the node |\n| --close | `CommandEvent` | use to close the node |\n| --toggle | `CommandEvent` | use to toggle open / closed state of the node |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |\n| --text-wrap | `string` | [MDN](https://mdn.dev/CSS/text-wrap) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |"
        }
      ]
    },
    {
      "name": "nve-tree",
      "description": "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.\n---\n\n\n### **Events:**\n - **open** - Dispatched from a child nve-tree-node when opened.\n- **close** - Dispatched from a child nve-tree-node when closed.\n- **select** - Dispatched from a child nve-tree-node when its selection state changes.\n\n### **Slots:**\n - _default_ - tree nodes\n\n### **CSS Properties:**\n - **--max-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) _(default: undefined)_\n- **--node-border** - Border style for tree node depth indicator _(default: undefined)_",
      "attributes": [
        {
          "name": "selectable",
          "description": "Determines whether all nodes can be in a selected state. Nodes can be in a single or multi select state.",
          "values": [{ "name": "single" }, { "name": "multi" }]
        },
        {
          "name": "behavior-expand",
          "description": "Determines whether the tree nodes should handle auto-expanding behavior.",
          "values": []
        },
        {
          "name": "behavior-select",
          "description": "Determines whether the tree nodes should handle auto-select behavior.",
          "values": []
        },
        {
          "name": "border",
          "description": "Determines if the node depth border renders.",
          "values": []
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/treeview/"
        },
        {
          "name": "markdown",
          "url": "## nve-tree\n\nA 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.\n\n### Example\n\n```html\n<nve-tree behavior-expand>\n  <nve-tree-node expanded>\n    node 1\n    <nve-tree-node>node 1-1</nve-tree-node>\n    <nve-tree-node>node 1-2</nve-tree-node>\n    <nve-tree-node>\n      node 1-3\n      <nve-tree-node>node 1-3-1</nve-tree-node>\n      <nve-tree-node>node 1-3-2</nve-tree-node>\n      <nve-tree-node>node 1-3-3</nve-tree-node>\n    </nve-tree-node>\n  </nve-tree-node>\n  <nve-tree-node>\n    node 2\n    <nve-tree-node>node 2-1</nve-tree-node>\n    <nve-tree-node>node 2-2</nve-tree-node>\n    <nve-tree-node>node 2-3</nve-tree-node>\n  </nve-tree-node>\n  <nve-tree-node>\n    node 3\n    <nve-tree-node>node 3-1</nve-tree-node>\n    <nve-tree-node>node 3-2</nve-tree-node>\n    <nve-tree-node>\n      node 3-3\n      <nve-tree-node>node 3-3-1</nve-tree-node>\n      <nve-tree-node>node 3-3-2</nve-tree-node>\n      <nve-tree-node>node 3-3-3</nve-tree-node>\n    </nve-tree-node>\n  </nve-tree-node>\n</nve-tree>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/tree/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | tree nodes |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| selectable | `'single' \\| 'multi'` | Determines whether all nodes can be in a selected state. Nodes can be in a single or multi select state. |\n| behaviorExpand (behavior-expand) | `boolean` | Determines whether the tree nodes should handle auto-expanding behavior. |\n| behaviorSelect (behavior-select) | `boolean` | Determines whether the tree nodes should handle auto-select behavior. |\n| border | `boolean` | Determines if the node depth border renders. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| open | `CustomEvent` | Dispatched from a child nve-tree-node when opened. |\n| close | `CustomEvent` | Dispatched from a child nve-tree-node when closed. |\n| select | `CustomEvent` | Dispatched from a child nve-tree-node when its selection state changes. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --max-width | `string` | [MDN](https://mdn.dev/CSS/max-width) |\n| --node-border | `string` | Border style for tree node depth indicator |"
        }
      ]
    },
    {
      "name": "nve-week",
      "description": "A week picker is a control that enables users to choose a week value.\n---\n\n\n### **Events:**\n - **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n\n### **Slots:**\n - _default_ - Control input element\n- **label** - Label element\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon-button** - The calendar icon button element",
      "attributes": [
        {
          "name": "container",
          "description": "Demonstrates different container styles to accommodate visual weight and context.\n- `flat` Element has white space bounds but reduced visual container.",
          "values": [{ "name": "flat" }, { "name": "default" }]
        },
        {
          "name": "status",
          "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.",
          "values": [
            { "name": "warning" },
            { "name": "error" },
            { "name": "success" },
            { "name": "disabled" }
          ]
        },
        {
          "name": "layout",
          "description": "Controls the directional arrangement and spacing behavior of the element's content.\n- `vertical` Arranges content in a vertical stack with block-level spacing.\n\n- `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts.\n\n- `horizontal` Arranges content in a horizontal row with block-level spacing.\n\n- `horizontal-inline` Arranges content horizontally with compact inline spacing.",
          "values": [
            { "name": "" },
            { "name": "vertical" },
            { "name": "vertical-inline" },
            { "name": "horizontal" },
            { "name": "horizontal-inline" }
          ]
        },
        {
          "name": "fit-text",
          "description": "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)",
          "values": []
        },
        {
          "name": "fit-content",
          "description": "Sets the input to match native default content block",
          "values": []
        },
        {
          "name": "i18n",
          "description": "Enables updating internal string values for internationalization.",
          "values": []
        },
        {
          "name": "prominence",
          "description": "Controls the visual prominence to establish hierarchy and guide user attention.\n- `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive.",
          "values": [{ "name": "muted" }]
        }
      ],
      "references": [
        {
          "name": "aria",
          "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/week"
        },
        {
          "name": "markdown",
          "url": "## nve-week\n\nA week picker is a control that enables users to choose a week value.\n\n### Example\n\n```html\n<nve-week>\n  <label>label</label>\n  <input type=\"week\" />\n  <nve-control-message>message</nve-control-message>\n</nve-week>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/week/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input element |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat' \\| \"default\"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | 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. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | 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. |\n| fitText (fit-text) | `boolean` | 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) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| i18n |  | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| nveControl | `string` |  |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n| showPicker |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
        }
      ]
    }
  ]
}