@nvidia-elements/core 0.0.2 → 0.0.4

package/dist/button/button.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.examples.js","names":[],"sources":["../../src/button/button.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/toggletip/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/progress-ring/define.js';\n\nexport default {\n  title: 'Elements/Button',\n  component: 'nve-button'\n};\n\ndeclare const __ELEMENTS_REPO_BASE_URL__: string;\n\n/**\n * @summary Basic button component with standard appearance and behavior for primary user actions.\n */\nexport const Default = {\n  render: () => html`<nve-button>standard</nve-button>`\n};\n\n/**\n * @summary Button interaction states including hover, focus, pressed, selected, and disabled.\n * @tags test-case\n */\nexport const GroupStates = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button>standard</nve-button>\n      <nve-button selected>selected</nve-button>\n      <nve-button pressed>pressed</nve-button>\n      <nve-button disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Interaction states that communicate button hierarchy, importance, and availability to users.\n */\nexport const Interaction = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button>standard</nve-button>\n      <nve-button interaction=\"emphasis\">emphasis</nve-button>\n      <nve-button interaction=\"destructive\">destructive</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Container style variants for buttons to accommodate different visual weight and context.\n */\nexport const Container = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button container=\"inline\">inline</nve-button>\n      <nve-button container=\"flat\">flat</nve-button>\n      <nve-button>default</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button size variants to accommodate layout densities and touch target requirements.\n */\nexport const Size = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button size=\"sm\">small button</nve-button>\n      <nve-button>standard button</nve-button>\n      <nve-button size=\"lg\">large button</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Pressed state for toggle buttons marking active/selected state with clear visual feedback.\n */\nexport const Pressed = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button pressed container=\"inline\">pressed inline</nve-button>\n      <nve-button pressed container=\"flat\">pressed flat</nve-button>\n      <nve-button pressed>pressed</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button selection states to accommodate different visual weight and context.\n */\nexport const Selected = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button selected container=\"inline\">selected inline</nve-button>\n      <nve-button selected container=\"flat\">selected flat</nve-button>\n      <nve-button selected>selected</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button disabled states to accommodate different visual weight and context.\n */\nexport const Disabled = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button disabled container=\"inline\">disabled inline</nve-button>\n      <nve-button disabled container=\"flat\">disabled flat</nve-button>\n      <nve-button disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Use the `commandfor` and `command` attributes to trigger custom Invoker Commands, such as rotating an image.\n */\nexport const InvokerCommand = {\n  render: () => html`\n    <img id=\"logo\" src=\"${__ELEMENTS_REPO_BASE_URL__}/favicon.svg\" alt=\"logo\" style=\"width: 100px; height: 100px;\" />\n    <section>\n      <nve-button commandfor=\"logo\" command=\"--rotate-left\">Rotate left</nve-button>\n      <nve-button commandfor=\"logo\" command=\"--rotate-right\">Rotate right</nve-button>\n      <nve-button commandfor=\"popover\" command=\"toggle-popover\">toggle-popover</nve-button>\n    </section>\n    <nve-toggletip id=\"popover\">popover</nve-toggletip>\n    <script type=\"module\">\n      const logo = document.getElementById('logo');\n      logo.addEventListener('command', (event) => {\n        if (event.command == '--rotate-left') {\n          logo.style.rotate = '-90deg';\n        } else if (event.command == '--rotate-right') {\n          logo.style.rotate = '90deg';\n        }\n      });\n    </script>\n  `\n};\n\n/**\n * @summary Button with icons positioned before or after text to enhance visual clarity and user understanding.\n */\nexport const WithIcon = {\n  render: () => html`\n    <nve-button><nve-icon name=\"person\"></nve-icon> button</nve-button>\n    <nve-button>button <nve-icon name=\"person\"></nve-icon></nve-button>\n  `\n};\n\n/**\n * @summary Flat button style for secondary actions with minimal visual weight, maintaining clear interaction states.\n */\nexport const Flat = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button container=\"flat\">standard</nve-button>\n      <nve-button container=\"flat\" interaction=\"emphasis\">emphasis</nve-button>\n      <nve-button container=\"flat\" interaction=\"destructive\">destructive</nve-button>\n      <nve-button container=\"flat\" disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Inline button style for text-like actions that blend with content while maintaining button functionality.\n */\nexport const Inline = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button container=\"inline\">standard</nve-button>\n      <nve-button container=\"inline\" interaction=\"emphasis\">emphasis</nve-button>\n      <nve-button container=\"inline\" interaction=\"destructive\">destructive</nve-button>\n      <nve-button container=\"inline\" disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button styling applied to links for consistent visual treatment while maintaining semantic navigation behavior.\n */\nexport const Link = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\"> \n      <nve-button><a href=\"#\">standard</a></nve-button>\n      <nve-button interaction=\"emphasis\"><a href=\"#\">emphasis</a></nve-button>\n      <nve-button interaction=\"destructive\"><a href=\"#\">destructive</a></nve-button>\n      <nve-button disabled><a href=\"#\">disabled</a></nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Flat button selection state for choice groups where one option is active, providing clear selection feedback.\n */\nexport const SelectedFlat = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button selected container=\"flat\">selected</nve-button>\n      <nve-button container=\"flat\">unselected</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Flat button styling for navigation links, providing subtle visual treatment for secondary navigation actions.\n */\nexport const LinkFlat = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button container=\"flat\"><a href=\"#\">flat</a></nve-button>\n      <nve-button container=\"flat\" interaction=\"emphasis\"><a href=\"#\">flat emphasis</a></nve-button>\n      <nve-button container=\"flat\" interaction=\"destructive\"><a href=\"#\">flat destructive</a></nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Text wrapping behavior in constrained widths, where content adapts to available space.\n * @tags test-case\n */\nexport const NoWrap = {\n  render: () => html`\n    <nve-button style=\"--width: 100px\">item item item</nve-button>\n    <nve-button style=\"--width: 100px\">\n      <span>item</span><span>item</span><span>item</span>\n    </nve-button>\n  `\n}\n\n/**\n * @summary Form submission button with proper form integration and data handling for user input processing.\n */\nexport const FormSubmit = {\n  render: () => html`\n<form id=\"test-form\">\n  <nve-button name=\"test-button\" value=\"test-value\">submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector('#test-form');\n  const button = document.querySelector('[name=\"test-button\"]');\n\n  button.addEventListener('click', e => console.log(e));\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    console.log(Object.fromEntries(new FormData(form, e.submitter)));\n  });\n</script>\n`\n}\n\n/**\n * @summary The form control option styles a button like a form field. Use this pattern when a button opens custom controls such as dropdowns, filter menus, or pickers so the UI stays cohesive and users recognize the trigger as part of the form.\n */\nexport const FormControl = {\n  render: () => html`\n<div nve-layout=\"row gap:xs\" style=\"max-width: 400px\">\n  <nve-search>\n    <input type=\"search\" placeholder=\"search\" aria-label=\"search\" />\n  </nve-search>\n  <nve-button nve-control>filter option <nve-icon name=\"caret\" direction=\"down\" size=\"sm\"></nve-icon></nve-button>\n</div>\n  `\n}\n\n/**\n * @summary Button integrated with popover API to trigger contextual overlays, providing extra information or controls.\n * @tags test-case\n */\nexport const Popover = {\n  render: () => html`\n  <div popover id=\"popover-example\">popover</div>\n  <nve-button popovertarget=\"popover-example\">toggle</nve-button>\n  `\n}\n\n/**\n * @summary Override button appearance with custom CSS properties for brand-specific designs while maintaining functionality.\n * @tags test-case\n */\nexport const BackgroundOverride = {\n  render: () => html`\n    <style>\n      nve-button.custom {\n        --color: var(--nve-sys-text-black-color);\n        --background-image: linear-gradient(340deg, rgb(255 234 177) 0%, var(--nve-ref-color-yellow-amber-900) 60%);\n\n        &:hover {\n          --background-image: linear-gradient(340deg, rgb(255 234 177) 0%, color-mix(in oklab, var(--nve-ref-color-yellow-amber-900) 100%, #000 4%) 60%);\n        }\n      }\n    </style>\n\n    <nve-button class=\"custom\">Create Account</nve-button>\n    <nve-button>Create Account</nve-button>\n  `\n};\n\n/**\n * @summary Button styled as a link by slotting an anchor tag inside. Use when an action needs button visual treatment while maintaining semantic link navigation and accessibility.\n */\nexport const ValidLinkButton = {\n  render: () => html`\n    <nve-button><a href=\"#\">default</a></nve-button>\n  `\n}\n\n/**\n * @summary Do not wrap buttons in anchor tags.\n * @tags anti-pattern\n */\nexport const InvalidLinkButton = {\n  render: () => html`\n    <a href=\"#\"><nve-button>default</nve-button></a>\n  `\n}\n\n/**\n * @summary Use a progress ring within a button to communicate that an action is processing and prevent repeated submissions. Limit this pattern to short, indeterminate actions (about five seconds or less); for longer or determinate tasks, use a progress bar or ring outside the button.\n */\nexport const ProgressDisclosure = {\n  render: () => html`\n    <nve-button>\n      <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n      Submitting\n    </nve-button>\n  `\n};\n\n/**\n * @summary Use standard interaction styling to maintain maximum button contrast on varied backgrounds. This pattern applies the correct static light or dark theme colors so actions stay visible in toolbars, alerts, and cards.\n * @tags test-case\n */\nexport const ContrastColoredBackgrounds = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\" style=\"width: 280px\">\n  <nve-toolbar status=\"accent\">\n    <div nve-text=\"label medium sm\">10 Selected</div>\n    <nve-button slot=\"suffix\">Edit</nve-button>\n  </nve-toolbar>\n\n  <nve-alert-group status=\"danger\">\n    <nve-alert> Error Detected <nve-button slot=\"actions\" container=\"flat\">Review</nve-button> </nve-alert>\n  </nve-alert-group>\n\n  <nve-card style=\"width: 280px\">\n    <nve-card-content \n      style=\"width: 100%;\n      height: 100%;\n      aspect-ratio: 16/9;\n      object-fit: cover;\n      background: repeating-conic-gradient(var(--nve-sys-layer-overlay-background) 0% 25%, transparent 0% 50%) 50% / 40px 40px;\n      background-position: center;\n      border-style: hidden;\"> </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"row gap:xs\">\n        <nve-button container=\"flat\" style=\"margin-left: auto\">Cancel</nve-button>\n        <nve-button>action</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n</div>\n  `\n};"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"button.examples.js","names":[],"sources":["../../src/button/button.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/toggletip/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/progress-ring/define.js';\n\nexport default {\n  title: 'Elements/Button',\n  component: 'nve-button'\n};\n\ndeclare const __ELEMENTS_REPO_BASE_URL__: string;\n\n/**\n * @summary Basic button component with standard appearance and behavior for primary user actions.\n */\nexport const Default = {\n  render: () => html`<nve-button>standard</nve-button>`\n};\n\n/**\n * @summary Button interaction states including hover, focus, pressed, selected, and disabled.\n * @tags test-case\n */\nexport const GroupStates = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button>standard</nve-button>\n      <nve-button selected>selected</nve-button>\n      <nve-button pressed>pressed</nve-button>\n      <nve-button disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Interaction states that communicate button hierarchy, importance, and availability to users.\n */\nexport const Interaction = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button>standard</nve-button>\n      <nve-button interaction=\"emphasis\">emphasis</nve-button>\n      <nve-button interaction=\"destructive\">destructive</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Container style variants for buttons to accommodate different visual weight and context.\n */\nexport const Container = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button container=\"inline\">inline</nve-button>\n      <nve-button container=\"flat\">flat</nve-button>\n      <nve-button>default</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button size variants to accommodate layout densities and touch target requirements.\n */\nexport const Size = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button size=\"sm\">small button</nve-button>\n      <nve-button>standard button</nve-button>\n      <nve-button size=\"lg\">large button</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Pressed state for toggle buttons marking active/selected state with clear visual feedback.\n */\nexport const Pressed = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button pressed container=\"inline\">pressed inline</nve-button>\n      <nve-button pressed container=\"flat\">pressed flat</nve-button>\n      <nve-button pressed>pressed</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button selection states to accommodate different visual weight and context.\n */\nexport const Selected = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button selected container=\"inline\">selected inline</nve-button>\n      <nve-button selected container=\"flat\">selected flat</nve-button>\n      <nve-button selected>selected</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button disabled states to accommodate different visual weight and context.\n */\nexport const Disabled = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button disabled container=\"inline\">disabled inline</nve-button>\n      <nve-button disabled container=\"flat\">disabled flat</nve-button>\n      <nve-button disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Use the `commandfor` and `command` attributes to trigger custom Invoker Commands, such as rotating an image.\n */\nexport const InvokerCommand = {\n  render: () => html`\n    <img id=\"logo\" src=\"${__ELEMENTS_REPO_BASE_URL__}/favicon.svg\" alt=\"logo\" style=\"width: 100px; height: 100px;\" />\n    <section>\n      <nve-button commandfor=\"logo\" command=\"--rotate-left\">Rotate left</nve-button>\n      <nve-button commandfor=\"logo\" command=\"--rotate-right\">Rotate right</nve-button>\n      <nve-button commandfor=\"popover\" command=\"toggle-popover\">toggle-popover</nve-button>\n    </section>\n    <nve-toggletip id=\"popover\">popover</nve-toggletip>\n    <script type=\"module\">\n      const logo = document.getElementById('logo');\n      logo.addEventListener('command', (event) => {\n        if (event.command == '--rotate-left') {\n          logo.style.rotate = '-90deg';\n        } else if (event.command == '--rotate-right') {\n          logo.style.rotate = '90deg';\n        }\n      });\n    </script>\n  `\n};\n\n/**\n * @summary Button with icons positioned before or after text to enhance visual clarity and user understanding.\n */\nexport const WithIcon = {\n  render: () => html`\n    <nve-button><nve-icon name=\"person\"></nve-icon> button</nve-button>\n    <nve-button>button <nve-icon name=\"person\"></nve-icon></nve-button>\n  `\n};\n\n/**\n * @summary Flat button style for secondary actions with minimal visual weight, maintaining clear interaction states.\n */\nexport const Flat = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button container=\"flat\">standard</nve-button>\n      <nve-button container=\"flat\" interaction=\"emphasis\">emphasis</nve-button>\n      <nve-button container=\"flat\" interaction=\"destructive\">destructive</nve-button>\n      <nve-button container=\"flat\" disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Inline button style for text-like actions that blend with content while maintaining button functionality.\n */\nexport const Inline = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button container=\"inline\">standard</nve-button>\n      <nve-button container=\"inline\" interaction=\"emphasis\">emphasis</nve-button>\n      <nve-button container=\"inline\" interaction=\"destructive\">destructive</nve-button>\n      <nve-button container=\"inline\" disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button styling applied to links for consistent visual treatment while maintaining semantic navigation behavior.\n */\nexport const Link = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\"> \n      <nve-button><a href=\"#\">standard</a></nve-button>\n      <nve-button interaction=\"emphasis\"><a href=\"#\">emphasis</a></nve-button>\n      <nve-button interaction=\"destructive\"><a href=\"#\">destructive</a></nve-button>\n      <nve-button disabled><a href=\"#\">disabled</a></nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Flat button selection state for choice groups where one option is active, providing clear selection feedback.\n */\nexport const SelectedFlat = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button selected container=\"flat\">selected</nve-button>\n      <nve-button container=\"flat\">unselected</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Flat button styling for navigation links, providing subtle visual treatment for secondary navigation actions.\n */\nexport const LinkFlat = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button container=\"flat\"><a href=\"#\">flat</a></nve-button>\n      <nve-button container=\"flat\" interaction=\"emphasis\"><a href=\"#\">flat emphasis</a></nve-button>\n      <nve-button container=\"flat\" interaction=\"destructive\"><a href=\"#\">flat destructive</a></nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Text wrapping behavior in constrained widths, where content adapts to available space.\n * @tags test-case\n */\nexport const NoWrap = {\n  render: () => html`\n    <nve-button style=\"--width: 100px\">item item item</nve-button>\n    <nve-button style=\"--width: 100px\">\n      <span>item</span><span>item</span><span>item</span>\n    </nve-button>\n  `\n}\n\n/**\n * @summary Form submission button with proper form integration and data handling for user input processing.\n */\nexport const FormSubmit = {\n  render: () => html`\n<form id=\"test-form\">\n  <nve-button name=\"test-button\" value=\"test-value\">submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector('#test-form');\n  const button = document.querySelector('[name=\"test-button\"]');\n\n  button.addEventListener('click', e => console.log(e));\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    console.log(Object.fromEntries(new FormData(form, e.submitter)));\n  });\n</script>\n`\n}\n\n/**\n * @summary Use the form control option for buttons that open custom controls such as dropdowns, filter menus, or pickers within a form layout. This pattern keeps the UI cohesive and helps users recognize the button as part of the form.\n */\nexport const FormControl = {\n  render: () => html`\n<div nve-layout=\"row gap:xs\" style=\"max-width: 400px\">\n  <nve-search>\n    <input type=\"search\" placeholder=\"search\" aria-label=\"search\" />\n  </nve-search>\n  <nve-button nve-control>filter option <nve-icon name=\"caret\" direction=\"down\" size=\"sm\"></nve-icon></nve-button>\n</div>\n  `\n}\n\n/**\n * @summary Button integrated with popover API to trigger contextual overlays, providing extra information or controls.\n * @tags test-case\n */\nexport const Popover = {\n  render: () => html`\n  <div popover id=\"popover-example\">popover</div>\n  <nve-button popovertarget=\"popover-example\">toggle</nve-button>\n  `\n}\n\n/**\n * @summary Override button appearance with custom CSS properties for brand-specific designs while maintaining functionality.\n * @tags test-case\n */\nexport const BackgroundOverride = {\n  render: () => html`\n    <style>\n      nve-button.custom {\n        --color: var(--nve-sys-text-black-color);\n        --background-image: linear-gradient(340deg, rgb(255 234 177) 0%, var(--nve-ref-color-yellow-amber-900) 60%);\n\n        &:hover {\n          --background-image: linear-gradient(340deg, rgb(255 234 177) 0%, color-mix(in oklab, var(--nve-ref-color-yellow-amber-900) 100%, #000 4%) 60%);\n        }\n      }\n    </style>\n\n    <nve-button class=\"custom\">Create Account</nve-button>\n    <nve-button>Create Account</nve-button>\n  `\n};\n\n/**\n * @summary Button styled as a link by slotting an anchor tag inside. Use when an action needs button visual treatment while maintaining semantic link navigation and accessibility.\n */\nexport const ValidLinkButton = {\n  render: () => html`\n    <nve-button><a href=\"#\">default</a></nve-button>\n  `\n}\n\n/**\n * @summary Do not wrap buttons in anchor tags.\n * @tags anti-pattern\n */\nexport const InvalidLinkButton = {\n  render: () => html`\n    <a href=\"#\"><nve-button>default</nve-button></a>\n  `\n}\n\n/**\n * @summary Use a progress ring within a button to communicate that an action is processing and prevent repeated submissions. Limit this pattern to short, indeterminate actions (about five seconds or less); for longer or determinate tasks, use a progress bar or ring outside the button.\n */\nexport const ProgressDisclosure = {\n  render: () => html`\n    <nve-button>\n      <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n      Submitting\n    </nve-button>\n  `\n};\n\n/**\n * @summary Use standard interaction styling to keep buttons readable on contrasting backgrounds in light and dark themes. This pattern verifies the static button colors that deliver the intended contrast for each theme.\n * @tags pattern\n */\nexport const ContrastColoredBackgrounds = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\" style=\"width: 280px\">\n  <nve-toolbar status=\"accent\">\n    <div nve-text=\"label medium sm\">10 Selected</div>\n    <nve-button slot=\"suffix\">Edit</nve-button>\n  </nve-toolbar>\n\n  <nve-alert-group status=\"danger\">\n    <nve-alert> Error Detected <nve-button slot=\"actions\" container=\"flat\">Review</nve-button> </nve-alert>\n  </nve-alert-group>\n\n  <nve-card style=\"width: 280px\">\n    <nve-card-content \n      style=\"width: 100%;\n      height: 100%;\n      aspect-ratio: 16/9;\n      object-fit: cover;\n      background: repeating-conic-gradient(var(--nve-sys-layer-overlay-background) 0% 25%, transparent 0% 50%) 50% / 40px 40px;\n      background-position: center;\n      border-style: hidden;\"> </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"row gap:xs\">\n        <nve-button container=\"flat\" style=\"margin-left: auto\">Cancel</nve-button>\n        <nve-button>action</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n</div>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/button/button.examples.json

@@ -163,7 +163,7 @@
       "id": "core-button_form-control",
       "name": "FormControl",
       "template": "<div nve-layout=\"row gap:xs\" style=\"max-width: 400px\">\n  <nve-search>\n    <input type=\"search\" placeholder=\"search\" aria-label=\"search\" />\n  </nve-search>\n  <nve-button nve-control>filter option <nve-icon name=\"caret\" direction=\"down\" size=\"sm\"></nve-icon></nve-button>\n</div>\n",
-      "summary": "The form control option styles a button like a form field. Use this pattern when a button opens custom controls such as dropdowns, filter menus, or pickers so the UI stays cohesive and users recognize the trigger as part of the form.",
+      "summary": "Use the form control option for buttons that open custom controls such as dropdowns, filter menus, or pickers within a form layout. This pattern keeps the UI cohesive and helps users recognize the button as part of the form.",
       "description": "",
       "composition": true,
       "tags": []
@@ -223,11 +223,11 @@
       "id": "core-button_contrast-colored-backgrounds",
       "name": "ContrastColoredBackgrounds",
       "template": "<div nve-layout=\"column gap:lg\" style=\"width: 280px\">\n  <nve-toolbar status=\"accent\">\n    <div nve-text=\"label medium sm\">10 Selected</div>\n    <nve-button slot=\"suffix\">Edit</nve-button>\n  </nve-toolbar>\n  <nve-alert-group status=\"danger\">\n    <nve-alert> Error Detected <nve-button slot=\"actions\" container=\"flat\">Review</nve-button> </nve-alert>\n  </nve-alert-group>\n  <nve-card style=\"width: 280px\">\n    <nve-card-content\n      style=\"\n        width: 100%;\n        height: 100%;\n        aspect-ratio: 16/9;\n        object-fit: cover;\n        background: repeating-conic-gradient(var(--nve-sys-layer-overlay-background) 0% 25%, transparent 0% 50%) 50% /\n          40px 40px;\n        background-position: center;\n        border-style: hidden;\n      \"\n    >\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"row gap:xs\">\n        <nve-button container=\"flat\" style=\"margin-left: auto\">Cancel</nve-button>\n        <nve-button>action</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n</div>\n",
-      "summary": "Use standard interaction styling to maintain maximum button contrast on varied backgrounds. This pattern applies the correct static light or dark theme colors so actions stay visible in toolbars, alerts, and cards.",
+      "summary": "Use standard interaction styling to keep buttons readable on contrasting backgrounds in light and dark themes. This pattern verifies the static button colors that deliver the intended contrast for each theme.",
       "description": "",
       "composition": true,
       "tags": [
-        "test-case"
+        "pattern"
       ]
     }
   ]

package/dist/button/button2.js

@@ -1,4 +1,4 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
 import { BaseButton as t } from "../internal/base/button.js";
 import { useStyles as n } from "../internal/styles/index.js";
 import r from "./button.js";
@@ -12,7 +12,7 @@ var o = class extends t {
 	static {
 		this.metadata = {
 			tag: "nve-button",
-			version: "0.0.2"
+			version: "0.0.4"
 		};
 	}
 	render() {

package/dist/button-group/button-group2.js

@@ -1,6 +1,6 @@
 import { appendRootNodeStyle as e } from "../internal/utils/dom.js";
 import { attachInternals as t } from "../internal/utils/a11y.js";
-import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
 import { audit as r } from "../internal/controllers/audit.controller.js";
 import { keyNavigationList as i } from "../internal/controllers/keynav-list.controller.js";
 import { useStyles as a } from "../internal/styles/index.js";
@@ -26,7 +26,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-button-group",
-			version: "0.0.2",
+			version: "0.0.4",
 			children: [
 				"nve-button",
 				"nve-icon-button",

package/dist/card/card2.js

@@ -1,4 +1,4 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
 import { audit as t } from "../internal/controllers/audit.controller.js";
 import { hostAttr as n } from "../internal/decorators/host-attr.js";
 import { useStyles as r } from "../internal/styles/index.js";
@@ -16,7 +16,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card",
-			version: "0.0.2"
+			version: "0.0.4"
 		};
 	}
 	render() {
@@ -37,7 +37,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-header",
-			version: "0.0.2",
+			version: "0.0.4",
 			parents: ["nve-card"]
 		};
 	}
@@ -53,7 +53,7 @@ var p = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-content",
-			version: "0.0.2",
+			version: "0.0.4",
 			parents: ["nve-card"]
 		};
 	}
@@ -72,7 +72,7 @@ var m = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-footer",
-			version: "0.0.2",
+			version: "0.0.4",
 			parents: ["nve-card"]
 		};
 	}

package/dist/chat-message/chat-message2.js

@@ -1,5 +1,5 @@
 import { appendRootNodeStyle as e } from "../internal/utils/dom.js";
-import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
 import { colorStateStyles as n, useStyles as r } from "../internal/styles/index.js";
 import i from "./chat-message.js";
 import a from "./chat-message.global.js";
@@ -13,7 +13,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-chat-message",
-			version: "0.0.2"
+			version: "0.0.4"
 		};
 	}
 	render() {

package/dist/checkbox/checkbox-group2.js

@@ -1,4 +1,4 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
 import { audit as t } from "../internal/controllers/audit.controller.js";
 import { typeSSR as n } from "../internal/controllers/type-ssr.controller.js";
 import { useStyles as r } from "../internal/styles/index.js";
@@ -12,7 +12,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-checkbox-group",
-			version: "0.0.2",
+			version: "0.0.4",
 			children: [
 				"label",
 				"nve-control-message",

package/dist/checkbox/checkbox2.js

@@ -1,4 +1,4 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
 import { audit as t } from "../internal/controllers/audit.controller.js";
 import { hostAttr as n } from "../internal/decorators/host-attr.js";
 import { useStyles as r } from "../internal/styles/index.js";
@@ -15,7 +15,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-checkbox",
-			version: "0.0.2",
+			version: "0.0.4",
 			children: [
 				"label",
 				"input",

package/dist/checkbox/define.js

@@ -1,7 +1,10 @@
 import { define as e } from "../internal/utils/dom.js";
-import { Checkbox as t } from "./checkbox2.js";
-import { CheckboxGroup as n } from "./checkbox-group2.js";
-e(t), e(n);
+import { ControlMessage as t } from "../forms/control-message/control-message2.js";
+import { Control as n } from "../forms/control/control2.js";
+import { ControlGroup as r } from "../forms/control-group/control-group2.js";
+import { Checkbox as i } from "./checkbox2.js";
+import { CheckboxGroup as a } from "./checkbox-group2.js";
+e(i), e(a), e(n), e(r), e(t);
 //#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/checkbox/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/checkbox/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { Checkbox, CheckboxGroup } from '@nvidia-elements/core/checkbox';\nimport '@nvidia-elements/core/forms/define.js';\n\ndefine(Checkbox);\ndefine(CheckboxGroup);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-checkbox': Checkbox;\n    'nve-checkbox-group': CheckboxGroup;\n  }\n}\n"],"mappings":";;;AAOA,EAAO,EAAS,EAChB,EAAO,EAAc"}
+{"version":3,"file":"define.js","names":[],"sources":["../../src/checkbox/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { Checkbox, CheckboxGroup } from '@nvidia-elements/core/checkbox';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Checkbox);\ndefine(CheckboxGroup);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-checkbox': Checkbox;\n    'nve-checkbox-group': CheckboxGroup;\n  }\n}\n"],"mappings":";;;;;;AAOA,EAAO,EAAS,EAChB,EAAO,EAAc,EACrB,EAAO,EAAQ,EACf,EAAO,EAAa,EACpB,EAAO,EAAe"}

package/dist/color/color2.js

@@ -1,5 +1,5 @@
 import { appendRootNodeStyle as e, openEyeDropper as t } from "../internal/utils/dom.js";
-import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
 import { scopedRegistry as r } from "../internal/decorators/scoped-registry.js";
 import { useStyles as i } from "../internal/styles/index.js";
 import { Control as a } from "../forms/control/control2.js";
@@ -21,7 +21,7 @@ var f = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-color",
-			version: "0.0.2"
+			version: "0.0.4"
 		};
 	}
 	static {

package/dist/color/define.js

@@ -1,7 +1,9 @@
 import { define as e } from "../internal/utils/dom.js";
-import { Color as t } from "./color2.js";
-//#region src/color/define.ts
-e(t);
+import { ControlMessage as t } from "../forms/control-message/control-message2.js";
+import { Control as n } from "../forms/control/control2.js";
+import { ControlGroup as r } from "../forms/control-group/control-group2.js";
+import { Color as i } from "./color2.js";
+e(i), e(n), e(r), e(t);
 //#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/color/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/color/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { Color } from '@nvidia-elements/core/color';\nimport '@nvidia-elements/core/forms/define.js';\n\ndefine(Color);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-color': Color;\n  }\n}\n"],"mappings":";;;AAOA,EAAO,EAAM"}
+{"version":3,"file":"define.js","names":[],"sources":["../../src/color/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { Color } from '@nvidia-elements/core/color';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Color);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-color': Color;\n  }\n}\n"],"mappings":";;;;;AAOA,EAAO,EAAM,EACb,EAAO,EAAQ,EACf,EAAO,EAAa,EACpB,EAAO,EAAe"}

package/dist/combobox/combobox.d.ts

@@ -34,6 +34,9 @@ import { Checkbox } from '../checkbox';
  * @csspart menu-item - The menu item elements
  * @csspart checkbox - The checkbox element
  * @csspart icon - The icon element
+ * @event scroll - Fires when the user scrolls the dropdown option list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`.
+ * @event create - Fires when the user confirms a value that doesn't match any existing option and the `behavior-create` attribute exists. `detail: { value }`.
+ * @csspart create-option - The menu item element for creating new options
  * @aria https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/
  */
 export declare class Combobox extends Control implements ContainerElement {
@@ -45,6 +48,8 @@ export declare class Combobox extends Control implements ContainerElement {
     container: 'flat';
     /** Disable rendering of inline tags for many-item select */
     notags: boolean;
+    /** Enable creation of new options when the input value doesn't match any existing option. Dispatches a `create` event with `{ value }` detail. */
+    behaviorCreate: boolean;
     static styles: import('lit').CSSResult[];
     static readonly metadata: {
         tag: string;

package/dist/combobox/combobox.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.examples.js","names":["#unusedFilters","#removeFilter","#createfilter","#updateFilter","#addFilter","#valueChange"],"sources":["../../src/combobox/combobox.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, unsafeCSS } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport { choose } from 'lit/directives/choose.js';\nimport '@nvidia-elements/core/progressive-filter-chip/define.js';\nimport '@nvidia-elements/core/combobox/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/tag/define.js';\nimport '@nvidia-elements/core/date/define.js';\nimport '@nvidia-elements/core/select/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\n\nexport default {\n  title: 'Elements/Combobox',\n  component: 'nve-combobox',\n};\n\n/**\n * @summary Basic combobox with search input and datalist options for filtering and selection.\n */\nexport const Default = () => {\n  return 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\n/**\n * @summary Vertical layout showing different combobox states (normal, disabled, success, error) stacked for comparison.\n * @tags test-case\n */\nexport const Vertical = () => {\n  return html`\n<div nve-layout=\"column gap:lg full\">\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  <nve-combobox>\n    <label>disabled</label>\n    <input type=\"search\" disabled />\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  <nve-combobox>\n    <label>success</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 status=\"success\">message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox>\n    <label>error</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 status=\"error\">message</nve-control-message>\n  </nve-combobox>\n</div>`\n};\n\n/**\n * @summary Horizontal layout showing different combobox states (normal, disabled, success, error) for inline form layouts.\n */\nexport const Horizontal = () => {\n  return html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-combobox layout=\"horizontal\">\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  <nve-combobox layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"search\" disabled />\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  <nve-combobox layout=\"horizontal\">\n    <label>success</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 status=\"success\">message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox layout=\"horizontal\">\n    <label>error</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 status=\"error\">message</nve-control-message>\n  </nve-combobox>\n</div>`\n};\n\n/**\n * @summary Flat container style with prefix icon for compact inline filtering interfaces.\n */\nexport const Flat = () => {\n  return html`\n  <nve-combobox container=\"flat\">\n    <nve-icon name=\"filter\" slot=\"prefix-icon\"></nve-icon>\n    <input type=\"search\" aria-label=\"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-combobox>\n  `\n};\n\n/**\n * @summary Single select allows users only to select from a predefined list\n * of options. Invalid input is automatically cleared. All options are visible\n * on focus until typing begins for filtering.\n */\nexport const Select = () => {\n  return html`\n<nve-combobox>\n  <label>label</label>\n  <input type=\"search\">\n  <select>\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  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n  `\n};\n\n/**\n * @summary Multi select allows users to select many options from a\n * predefined list. The select `value` will only reflect the first selected value.\n * To get all selected options check the `selected` property on each `<option>`\n * or the select property `selectedOptions`.\n * On focus all options will show until the user starts typing. Select is the\n * selection value of the combobox. The input is the filter value.\n */\nexport const MultiSelect = () => {\n  return html`\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option selected value=\"status\"></option>\n      <option selected value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Combobox with an empty initial value using a disabled placeholder option. Use when no default selection exists and the user must make an explicit choice.\n */\nexport const EmptyDefault = () => {\n  return html`\n<nve-combobox>\n  <label>label</label>\n  <input type=\"search\">\n  <select>\n    <option disabled selected></option>\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  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n  `\n};\n\n/**\n * @summary Combobox options with display labels that differ from underlying values. Use when option values are IDs or codes but users need to see human-readable text in the input.\n */\nexport const Label = () => {\n  return html`\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\">\n    <select>\n      <option value=\"1\">Status</option>\n      <option value=\"2\">Priority</option>\n      <option value=\"3\">Date</option>\n      <option value=\"4\">Session</option>\n      <option value=\"5\">Configuration</option>\n      <option value=\"6\">Contains</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Multi-select with labeled options where display text differs from option values.\n */\nexport const LabelMultiSelect = () => {\n  return html`\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option value=\"1\">Status</option>\n      <option value=\"2\">Priority</option>\n      <option value=\"3\">Date</option>\n      <option value=\"4\">Session</option>\n      <option value=\"5\">Configuration</option>\n      <option value=\"6\">Contains</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Overflow behavior where many tags collapse into a simple text label when the parent container is too narrow.\n * @tags test-case\n */\nexport const Overflow = () => {\n  return html`\n  <nve-combobox style=\"width: 250px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option selected value=\"status\"></option>\n      <option selected value=\"priority\"></option>\n      <option selected value=\"date\"></option>\n      <option selected value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Combobox handling of long option text in constrained width containers.\n * @tags test-case\n */\nexport const PopoverOverflow = () => {\n  return html`\n  <nve-combobox style=\"width: 100px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select>\n      <option value=\"really-long-text-option-that-keeps-going\"></option>  \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    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Multi-select with reset functionality via icon button and footer button to clear all selections.\n */\nexport const Reset = () => {\n  return html`\n  <nve-combobox id=\"combobox-reset\" style=\"width: 500px; --scroll-height: 220px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\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    </select>\n    <nve-icon-button aria-label=\"clear selection\" icon-name=\"cancel\" container=\"inline\"></nve-icon-button>\n    <nve-button slot=\"footer\" aria-label=\"clear selection\" container=\"flat\">reset</nve-button>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  <script type=\"module\">\n    document.querySelector('#combobox-reset nve-icon-button').addEventListener('click', e => e.target.parentElement.reset());\n    document.querySelector('#combobox-reset nve-button').addEventListener('click', e => e.target.parentElement.reset());\n  </script>\n  `\n};\n\n/**\n * @summary Multi-select with footer action button for extra operations on selected items.\n */\nexport const Footer = () => {\n  return html`\n  <nve-combobox style=\"width: 500px; --scroll-height: 200px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\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      <option value=\"includes\"></option>\n      <option value=\"user\"></option>\n      <option value=\"progress\"></option>\n    </select>\n    <nve-button slot=\"footer\" container=\"flat\">action</nve-button>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Multi-select with bulk selection controls (Select All/Deselect All) in footer for efficient mass operations.\n */\nexport const SelectAll = () => {\n  return html`\n  <nve-combobox id=\"combobox-select-all\" style=\"width: 500px; --scroll-height: 200px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\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      <option value=\"includes\"></option>\n      <option value=\"user\"></option>\n      <option value=\"progress\"></option>\n    </select>\n    <div slot=\"footer\" nve-layout=\"row align:stretch full\">\n      <nve-button container=\"flat\">Select All</nve-button>\n      <nve-button container=\"flat\">Deselect All</nve-button>\n    </div>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  <script type=\"module\">\n    const combobox = document.querySelector('#combobox-select-all');\n    const [selectAll, deselectAll] = Array.from(combobox.querySelectorAll('nve-button'));\n\n    selectAll.addEventListener('click', () => combobox.selectAll());\n    deselectAll.addEventListener('click', () => combobox.reset());\n    combobox.addEventListener('change', e => console.log(e.target.selectedOptions));\n  </script>\n  `\n};\n\n/**\n * @summary Multi-select with disabled options to show unavailable choices while maintaining visual context.\n */\nexport const DisabledOptions = () => {\n  return html`\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option value=\"status\" disabled></option>\n      <option value=\"priority\" disabled></option>\n      <option value=\"date\" disabled></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Multi-select without built-in tags, using external tag management for custom selection display.\n */\nexport const NoTags = () => {\n  return html`\n  <form id=\"notags\" nve-layout=\"column gap:lg align:stretch\">\n    <nve-combobox notags>\n      <label>label</label>\n      <input type=\"search\">\n      <select multiple>\n        <option selected value=\"status\"></option>\n        <option selected value=\"priority\"></option>\n        <option value=\"date\"></option>\n        <option value=\"session\"></option>\n        <option value=\"configuration\"></option>\n        <option value=\"contains\"></option>\n      </select>\n    </nve-combobox>\n    <div id=\"tags\" nve-layout=\"row gap:xs\">\n    </div>\n  </form>\n  <script type=\"module\">\n    const form = document.querySelector('#notags');\n    const select = form.querySelector('select');\n    const tags = form.querySelector('#tags');\n    updateTags();\n    select.addEventListener('change', e => updateTags());\n    tags.addEventListener('close', e => {\n      Array.from(select.options).find(o => o.value === e.target.value).selected = false;\n      updateTags();\n    });\n    function updateTags() {\n      tags.innerHTML = '';\n      Array.from(select.selectedOptions).forEach(o => tags.innerHTML += '<nve-tag closable value=\"' + o.value + '\">' + o.value + '</nve-tag>');\n    }\n  </script>\n  `\n};\n\n/**\n * @summary Complete form integration showing combobox with form submission, reset, and programmatic value setting.\n */\nexport const Form = () => {\n  return html`\n<form nve-layout=\"column gap:lg align:stretch\">\n  <nve-combobox style=\"--scroll-height: 220px\">\n    <label>label</label>\n    <input type=\"search\" name=\"input\">\n    <select multiple name=\"select\" value=\"priority\">\n      <option value=\"status\"></option>\n      <option selected value=\"priority\"></option>\n      <option selected value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n\n  <div nve-layout=\"row gap:xs\">\n    <nve-button type=\"button\">set</nve-button>\n    <nve-button type=\"reset\">reset</nve-button>\n    <nve-button type=\"submit\">submit</nve-button>\n  </div>\n</form>\n\n<script type=\"module\">\n  const form = document.querySelector('form');\n  const select = document.querySelector('select');\n  const input = document.querySelector('input');\n  const btn = document.querySelector('[type=button]');\n\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    const formData = new FormData(form);\n    console.log('input: ', formData.get('input'));\n    console.log('select: ', formData.get('select'));\n    console.log('selectedOptions: ', Array.from(select.selectedOptions).map(o => o.value));\n  });\n\n  btn.addEventListener('click', () => {\n    select.value = 'status';\n    select.options[0].selected = true;\n    input.value = 'test';\n  });\n</script>\n  `\n};\n\n/**\n * @summary Fetches options asynchronously as the user types, cancelling stale requests with AbortController. Use for server-backed search where the full option set is too large to load up front.\n * @tags pattern\n */\nexport const DynamicTypeaheadSearch = () => {\n  return html`\n<nve-combobox id=\"combobox\">\n  <label>GPU Search</label>\n  <input type=\"search\" placeholder=\"Type to search…\" />\n  <datalist>\n    <option disabled selected></option>\n  </datalist>\n</nve-combobox>\n\n<script type=\"module\">\n  const combobox = document.getElementById('combobox');\n  const input = combobox.querySelector('input');\n  const datalist = combobox.querySelector('datalist');\n\n  let controller = null;\n  input.addEventListener('input', async () => {\n    if (controller) controller.abort();\n    controller = new AbortController();\n\n    const query = input.value.trim();\n    if (!query) {\n      datalist.innerHTML = '';\n      return;\n    }\n    try {\n      const results = await mockFetch(query, controller.signal);\n      datalist.innerHTML = results.map((v) => '<option value=\"' + v + '\">').join('');\n    } catch (err) {\n      if (err.name !== 'AbortError') datalist.innerHTML = '';\n    }\n  });\n\n  function mockFetch(query, signal) {\n    return new Promise((resolve, reject) => {\n      const timer = setTimeout(() => {\n        resolve(['A100 GPU', 'H100 GPU', 'H200 GPU', 'DGX A100', 'DGX H100', 'CUDA Toolkit'].filter((v) => v.toLowerCase().startsWith(query.toLowerCase())));\n      }, 500);\n      signal.addEventListener('abort', () => {\n        clearTimeout(timer);\n        reject(new DOMException('Aborted', 'AbortError'));\n      });\n    });\n  }\n</script>\n  `\n}\n\n/**\n * @summary Performance test with 1000 options to show filtering efficiency with large datasets.\n * @tags test-case performance\n */\nexport const Performance = () => {\n  return html`\n<nve-combobox id=\"performance-combobox\">\n  <input type=\"search\" aria-label=\"performance test\">\n  <datalist></datalist>\n</nve-combobox>\n<script type=\"module\">\n  const datalist = document.querySelector('#performance-combobox datalist');\n  const options = new Array(1000).fill('').map((_, i) => {\n    const option = document.createElement('option');\n    option.value = i + ' item';\n    return option;\n  });\n  datalist.append(...options);\n</script>`\n}\n\n/* eslint-disable @nvidia-elements/lint/no-missing-slotted-elements */\n/**\n * @summary Performance test with 1000 options to show filtering efficiency with large datasets.\n * @tags test-case performance\n */\nexport const PerformanceSelect = () => {\n  return html`\n<div nve-layout=\"pad:lg\">\n  <nve-combobox id=\"performance-combobox\">\n    <input type=\"search\" aria-label=\"performance test\">\n    <select multiple></select>\n  </nve-combobox>\n</div>\n<script type=\"module\">\n  const select = document.querySelector('#performance-combobox select');\n  const options = new Array(1000).fill('').map((_, i) => {\n    const option = document.createElement('option');\n    option.value = i + ' item';\n    return option;\n  });\n  select.append(...options);\n</script>`\n}\n\n/**\n * @summary Dynamic options with datalist and select variants of combobox.\n * @tags test-case\n */\nexport const DynamicOptions = () => {\n  return html`\n<nve-combobox id=\"dynamic-options-combobox\">\n  <input type=\"search\" aria-label=\"performance test\" />\n  <datalist>\n    <option>default</option>\n  </datalist>\n</nve-combobox>\n<script type=\"module\">\n  let i = 0;\n  setInterval(function() {\n    if (i > 100) clearInterval(interval);\n    const datalist = document.querySelector(\"#dynamic-options-combobox datalist\");\n    const option = document.createElement(\"option\");\n    option.value = i + \" item\";\n    datalist.append(option);\n    i++;\n    console.log('append');\n  }, 1000);\n</script>\n  `\n}\n\n/**\n * @summary Interactive demo showing progressive filter chips with dynamic combobox creation for complex filtering interfaces.\n * @tags test-case\n */\nexport const FilterDemo = {\n  render: () => html`<combobox-demo></combobox-demo>`\n}\n\nconst schema = {\n  status: {\n    type: 'select',\n    options: ['success', 'failure', 'processing'],\n    initial: 'success'\n  },\n  priority: {\n    type: 'select',\n    options: ['high', 'medium', 'low'],\n    initial: 'high'\n  },\n  created: {\n    type: 'date',\n    initial: new Date()\n  },\n  progress: {\n    type: 'number',\n    initial: 0\n  },\n  sessionId: {\n    type: 'text',\n    initial: ''\n  }\n};\n\n\nclass ComboboxDemo extends LitElement {\n  @state() private value = [{ name: '', value: '' }];\n\n  // todo\n  /* eslint-disable @nvidia-elements/lint/no-deprecated-popover-attributes */\n  render() {\n    return html`\n      <nve-button id=\"filter-btn\" ?pressed=${!!this.value.filter(v => v.name.length).length}><nve-icon name=\"filter\"></nve-icon> </nve-icon>filters</nve-button>\n      <nve-dropdown id=\"one\" hidden trigger=\"filter-btn\" anchor=\"filter-btn\" @open=${e => e.target.hidden = false} @close=${e => e.target.hidden = true} style=\"--min-width: 400px; --min-height: 500px;\">\n        <progressive-filter-demo @change=${e => this.value = e.detail} .value=${this.value} .schema=${schema}></progressive-filter-demo>\n      </nve-dropdown>\n      <pre style=\"margin-top: 300px\">${JSON.stringify(this.value.filter(v => v.name.length), null, 2)}</pre>\n    `;\n  }\n}\n\ncustomElements.get('combobox-demo') || customElements.define('combobox-demo', ComboboxDemo);\n\nclass ProgressiveFilterDemo extends LitElement {\n  static styles = [unsafeCSS(`\n    :host {\n      display: flex;\n      flex-direction: column;\n      gap: var(--nve-ref-space-xs);\n    }\n\n    nve-progressive-filter-chip {\n      width: 100%;\n    }\n  `)];\n\n  @property({ type: Object }) schema = {};\n\n  @property({ type: Array }) value: { name: string, value: string }[] = [{ name: '', value: '' }];\n\n  get #unusedFilters() {\n    return Object.entries(this.schema).filter(([key]) => !this.value.find(f => f.name === key));\n  }\n\n  render() {\n    return html`\n      ${this.value.map(filter => html`\n      <nve-progressive-filter-chip closable @close=${() => this.#removeFilter(filter)}>\n        <nve-combobox>\n          <span slot=\"prefix-icon\"></span>\n          <input type=\"search\" placeholder=\"filter\" .value=${filter.name} @change=${e => this.#createfilter(e.target.value, filter)} aria-label=\"filter\" />\n          <datalist>${this.#unusedFilters.map(([key]) => html`<option .value=${key}>${key}</option>`)}</datalist>\n        </nve-combobox>\n        ${choose(this.schema[filter.name]?.type, [\n      ['text', () => html`<nve-combobox><input type=\"text\" @change=${e => this.#updateFilter(e.target.value, filter)} .value=${filter.value} placeholder=\"value\" aria-label=\"filter value\" /></nve-combobox>`],\n      ['number', () => html`<nve-combobox><input type=\"number\" @change=${e => this.#updateFilter(e.target.value, filter)} .value=${filter.value} aria-label=\"filter value\" /></nve-combobox>`],\n      ['date', () => html`<nve-date><input type=\"date\" @change=${e => this.#updateFilter(e.target.value, filter)} .value=${filter.value} aria-label=\"filter value\" /></nve-date>`],\n      ['select', () => html`<nve-select><select @change=${e => this.#updateFilter(e.target.value, filter)} value=${filter.value} aria-label=\"filter value\">${this.schema[filter.name]?.options?.map(v => html`<option value=${v}>${v}</option>`)}</select></nve-select>`]\n    ], () => html`<nve-combobox><input type=\"text\" placeholder=\"value\" disabled aria-label=\"filter value\" /></nve-combobox>`)}\n      </nve-progressive-filter-chip>`)}\n      <nve-button container=\"flat\" @click=${this.#addFilter} .disabled=${this.#unusedFilters.length === 0 || !!this.value.find(v => v.name === '')} style=\"align: center; margin-top: 12px;\">\n        <nve-icon name=\"add\"></nve-icon> Add Filter\n      </nve-button>\n    `;\n  }\n\n  #addFilter() {\n    this.value = [...this.value, { name: '', value: '' }];\n    this.#valueChange();\n  }\n\n  #removeFilter(filter: { name: string, value: string }) {\n    this.value = this.value.filter(o => o.name !== filter.name);\n    this.#valueChange();\n  }\n\n  #updateFilter(value: string, filter: { name: string, value: string }) {\n    this.value = this.value.map(v => v.name === filter.name ? { ...filter, value } : v);\n    this.#valueChange();\n  }\n\n  #createfilter(name, filter: { name: string, value: string }) {\n    this.value = this.value.map(v => v.name === filter.name ? { name, value: this.schema[name]?.initial ?? '' } : v);\n    this.#valueChange();\n  }\n\n  #valueChange() {\n    this.dispatchEvent(new CustomEvent('change', { detail: this.value }));\n  }\n}\n\ncustomElements.get('progressive-filter-demo') || customElements.define('progressive-filter-demo', ProgressiveFilterDemo);\n"],"mappings":";AAGA,IAAA,IAAe"}
+{"version":3,"file":"combobox.examples.js","names":["#unusedFilters","#removeFilter","#createfilter","#updateFilter","#addFilter","#valueChange"],"sources":["../../src/combobox/combobox.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, unsafeCSS } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport { choose } from 'lit/directives/choose.js';\nimport '@nvidia-elements/core/progressive-filter-chip/define.js';\nimport '@nvidia-elements/core/combobox/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/tag/define.js';\nimport '@nvidia-elements/core/date/define.js';\nimport '@nvidia-elements/core/select/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\n\nexport default {\n  title: 'Elements/Combobox',\n  component: 'nve-combobox',\n};\n\n/**\n * @summary Basic combobox with search input and datalist options for filtering and selection.\n */\nexport const Default = () => {\n  return 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\n/**\n * @summary Vertical layout showing different combobox states (normal, disabled, success, error) stacked for comparison.\n * @tags test-case\n */\nexport const Vertical = () => {\n  return html`\n<div nve-layout=\"column gap:lg full\">\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  <nve-combobox>\n    <label>disabled</label>\n    <input type=\"search\" disabled />\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  <nve-combobox>\n    <label>success</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 status=\"success\">message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox>\n    <label>error</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 status=\"error\">message</nve-control-message>\n  </nve-combobox>\n</div>`\n};\n\n/**\n * @summary Horizontal layout showing different combobox states (normal, disabled, success, error) for inline form layouts.\n */\nexport const Horizontal = () => {\n  return html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-combobox layout=\"horizontal\">\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  <nve-combobox layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"search\" disabled />\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  <nve-combobox layout=\"horizontal\">\n    <label>success</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 status=\"success\">message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox layout=\"horizontal\">\n    <label>error</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 status=\"error\">message</nve-control-message>\n  </nve-combobox>\n</div>`\n};\n\n/**\n * @summary Flat container style with prefix icon for compact inline filtering interfaces.\n */\nexport const Flat = () => {\n  return html`\n  <nve-combobox container=\"flat\">\n    <nve-icon name=\"filter\" slot=\"prefix-icon\"></nve-icon>\n    <input type=\"search\" aria-label=\"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-combobox>\n  `\n};\n\n/**\n * @summary Single select allows users only to select from a predefined list\n * of options. Invalid input is automatically cleared. All options are visible\n * on focus until typing begins for filtering.\n */\nexport const Select = () => {\n  return html`\n<nve-combobox>\n  <label>label</label>\n  <input type=\"search\">\n  <select>\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  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n  `\n};\n\n/**\n * @summary Multi select allows users to select many options from a\n * predefined list. The select `value` will only reflect the first selected value.\n * To get all selected options check the `selected` property on each `<option>`\n * or the select property `selectedOptions`.\n * On focus all options will show until the user starts typing. Select is the\n * selection value of the combobox. The input is the filter value.\n */\nexport const MultiSelect = () => {\n  return html`\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option selected value=\"status\"></option>\n      <option selected value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Combobox with an empty initial value using a disabled placeholder option. Use when no default selection exists and the user must make an explicit choice.\n */\nexport const EmptyDefault = () => {\n  return html`\n<nve-combobox>\n  <label>label</label>\n  <input type=\"search\">\n  <select>\n    <option disabled selected></option>\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  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n  `\n};\n\n/**\n * @summary Combobox options with display labels that differ from underlying values. Use when option values are IDs or codes but users need to see human-readable text in the input.\n */\nexport const Label = () => {\n  return html`\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\">\n    <select>\n      <option value=\"1\">Status</option>\n      <option value=\"2\">Priority</option>\n      <option value=\"3\">Date</option>\n      <option value=\"4\">Session</option>\n      <option value=\"5\">Configuration</option>\n      <option value=\"6\">Contains</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Multi-select with labeled options where display text differs from option values.\n */\nexport const LabelMultiSelect = () => {\n  return html`\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option value=\"1\">Status</option>\n      <option value=\"2\">Priority</option>\n      <option value=\"3\">Date</option>\n      <option value=\"4\">Session</option>\n      <option value=\"5\">Configuration</option>\n      <option value=\"6\">Contains</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Overflow behavior where many tags collapse into a simple text label when the parent container is too narrow.\n * @tags test-case\n */\nexport const Overflow = () => {\n  return html`\n  <nve-combobox style=\"width: 250px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option selected value=\"status\"></option>\n      <option selected value=\"priority\"></option>\n      <option selected value=\"date\"></option>\n      <option selected value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Combobox handling of long option text in constrained width containers.\n * @tags test-case\n */\nexport const PopoverOverflow = () => {\n  return html`\n  <nve-combobox style=\"width: 100px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select>\n      <option value=\"really-long-text-option-that-keeps-going\"></option>  \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    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Multi-select with reset functionality via icon button and footer button to clear all selections.\n */\nexport const Reset = () => {\n  return html`\n  <nve-combobox id=\"combobox-reset\" style=\"width: 500px; --scroll-height: 220px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\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    </select>\n    <nve-icon-button aria-label=\"clear selection\" icon-name=\"cancel\" container=\"inline\"></nve-icon-button>\n    <nve-button slot=\"footer\" aria-label=\"clear selection\" container=\"flat\">reset</nve-button>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  <script type=\"module\">\n    document.querySelector('#combobox-reset nve-icon-button').addEventListener('click', e => e.target.parentElement.reset());\n    document.querySelector('#combobox-reset nve-button').addEventListener('click', e => e.target.parentElement.reset());\n  </script>\n  `\n};\n\n/**\n * @summary Multi-select with footer action button for extra operations on selected items.\n */\nexport const Footer = () => {\n  return html`\n  <nve-combobox style=\"width: 500px; --scroll-height: 200px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\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      <option value=\"includes\"></option>\n      <option value=\"user\"></option>\n      <option value=\"progress\"></option>\n    </select>\n    <nve-button slot=\"footer\" container=\"flat\">action</nve-button>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Multi-select with bulk selection controls (Select All/Deselect All) in footer for efficient mass operations.\n */\nexport const SelectAll = () => {\n  return html`\n  <nve-combobox id=\"combobox-select-all\" style=\"width: 500px; --scroll-height: 200px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\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      <option value=\"includes\"></option>\n      <option value=\"user\"></option>\n      <option value=\"progress\"></option>\n    </select>\n    <div slot=\"footer\" nve-layout=\"row align:stretch full\">\n      <nve-button container=\"flat\">Select All</nve-button>\n      <nve-button container=\"flat\">Deselect All</nve-button>\n    </div>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  <script type=\"module\">\n    const combobox = document.querySelector('#combobox-select-all');\n    const [selectAll, deselectAll] = Array.from(combobox.querySelectorAll('nve-button'));\n\n    selectAll.addEventListener('click', () => combobox.selectAll());\n    deselectAll.addEventListener('click', () => combobox.reset());\n    combobox.addEventListener('change', e => console.log(e.target.selectedOptions));\n  </script>\n  `\n};\n\n/**\n * @summary Multi-select with disabled options to show unavailable choices while maintaining visual context.\n */\nexport const DisabledOptions = () => {\n  return html`\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option value=\"status\" disabled></option>\n      <option value=\"priority\" disabled></option>\n      <option value=\"date\" disabled></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Multi-select without built-in tags, using external tag management for custom selection display.\n */\nexport const NoTags = () => {\n  return html`\n  <form id=\"notags\" nve-layout=\"column gap:lg align:stretch\">\n    <nve-combobox notags>\n      <label>label</label>\n      <input type=\"search\">\n      <select multiple>\n        <option selected value=\"status\"></option>\n        <option selected value=\"priority\"></option>\n        <option value=\"date\"></option>\n        <option value=\"session\"></option>\n        <option value=\"configuration\"></option>\n        <option value=\"contains\"></option>\n      </select>\n    </nve-combobox>\n    <div id=\"tags\" nve-layout=\"row gap:xs\">\n    </div>\n  </form>\n  <script type=\"module\">\n    const form = document.querySelector('#notags');\n    const select = form.querySelector('select');\n    const tags = form.querySelector('#tags');\n    updateTags();\n    select.addEventListener('change', e => updateTags());\n    tags.addEventListener('close', e => {\n      Array.from(select.options).find(o => o.value === e.target.value).selected = false;\n      updateTags();\n    });\n    function updateTags() {\n      tags.innerHTML = '';\n      Array.from(select.selectedOptions).forEach(o => tags.innerHTML += '<nve-tag closable value=\"' + o.value + '\">' + o.value + '</nve-tag>');\n    }\n  </script>\n  `\n};\n\n/**\n * @summary Combobox with create option behavior that allows users to add new options and tags on the fly. Use when the option list is not exhaustive and users need to enter values that don't yet exist.\n * @tags pattern\n */\nexport const CreateOptions = () => {\n  return html`\n<nve-combobox id=\"creatable-combo\" behavior-create style=\"--scroll-height: 220px\">\n  <label>Tags</label>\n  <input type=\"search\" placeholder=\"Select or create a tag…\" />\n  <select multiple>\n    <option value=\"Go\">Go</option>\n    <option value=\"Rust\">Rust</option>\n    <option value=\"Python\">Python</option>\n    <option value=\"JavaScript\">JavaScript</option>\n    <option value=\"TypeScript\">TypeScript</option>\n    <option value=\"Java\">Java</option>\n    <option value=\"C#\">C#</option>\n    <option value=\"C++\">C++</option>\n    <option value=\"C\">C</option>\n    <option value=\"PHP\">PHP</option>\n  </select>\n  <nve-control-message>Press Enter to create a tag that doesn't exist yet</nve-control-message>\n</nve-combobox>\n<script type=\"module\">\n  const combobox = document.getElementById('creatable-combo');\n  const select = combobox.querySelector('select');\n\n  combobox.addEventListener('create', (e) => {\n    const option = document.createElement('option');\n    option.value = e.detail.value;\n    option.textContent = e.detail.value;\n    option.selected = true;\n    select.appendChild(option);\n  });\n</script>\n  `\n};\n\n/**\n * @summary Complete form integration showing combobox with form submission, reset, and programmatic value setting.\n */\nexport const Form = () => {\n  return html`\n<form nve-layout=\"column gap:lg align:stretch\">\n  <nve-combobox style=\"--scroll-height: 220px\">\n    <label>label</label>\n    <input type=\"search\" name=\"input\">\n    <select multiple name=\"select\" value=\"priority\">\n      <option value=\"status\"></option>\n      <option selected value=\"priority\"></option>\n      <option selected value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n\n  <div nve-layout=\"row gap:xs\">\n    <nve-button type=\"button\">set</nve-button>\n    <nve-button type=\"reset\">reset</nve-button>\n    <nve-button type=\"submit\">submit</nve-button>\n  </div>\n</form>\n\n<script type=\"module\">\n  const form = document.querySelector('form');\n  const select = document.querySelector('select');\n  const input = document.querySelector('input');\n  const btn = document.querySelector('[type=button]');\n\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    const formData = new FormData(form);\n    console.log('input: ', formData.get('input'));\n    console.log('select: ', formData.get('select'));\n    console.log('selectedOptions: ', Array.from(select.selectedOptions).map(o => o.value));\n  });\n\n  btn.addEventListener('click', () => {\n    select.value = 'status';\n    select.options[0].selected = true;\n    input.value = 'test';\n  });\n</script>\n  `\n};\n\n/**\n * @summary Fetches options asynchronously as the user types, cancelling stale requests with AbortController. Use for server-backed search where the full option set is too large to load up front.\n * @tags pattern\n */\nexport const DynamicTypeaheadSearch = () => {\n  return html`\n<nve-combobox id=\"combobox\">\n  <label>GPU Search</label>\n  <input type=\"search\" placeholder=\"Type to search…\" />\n  <datalist>\n    <option disabled selected></option>\n  </datalist>\n</nve-combobox>\n\n<script type=\"module\">\n  const combobox = document.getElementById('combobox');\n  const input = combobox.querySelector('input');\n  const datalist = combobox.querySelector('datalist');\n\n  let controller = null;\n  input.addEventListener('input', async () => {\n    if (controller) controller.abort();\n    controller = new AbortController();\n\n    const query = input.value.trim();\n    if (!query) {\n      datalist.innerHTML = '';\n      return;\n    }\n    try {\n      const results = await mockFetch(query, controller.signal);\n      datalist.innerHTML = results.map((v) => '<option value=\"' + v + '\">').join('');\n    } catch (err) {\n      if (err.name !== 'AbortError') datalist.innerHTML = '';\n    }\n  });\n\n  function mockFetch(query, signal) {\n    return new Promise((resolve, reject) => {\n      const timer = setTimeout(() => {\n        resolve(['A100 GPU', 'H100 GPU', 'H200 GPU', 'DGX A100', 'DGX H100', 'CUDA Toolkit'].filter((v) => v.toLowerCase().startsWith(query.toLowerCase())));\n      }, 500);\n      signal.addEventListener('abort', () => {\n        clearTimeout(timer);\n        reject(new DOMException('Aborted', 'AbortError'));\n      });\n    });\n  }\n</script>\n  `\n}\n\n/**\n * @summary Infinite scroll combobox loading, using the scroll event to append options as the user nears the end of the list. Use for server-backed datasets where loading all options up front is impractical.\n * @tags pattern\n */\nexport const InfiniteScroll = () => {\n  return html`\n<nve-combobox id=\"infinite-scroll-combo\" style=\"--scroll-height: 200px\">\n  <label>GPU Models</label>\n  <input type=\"search\" placeholder=\"Scroll to load more…\" />\n  <datalist id=\"infinite-scroll-list\"></datalist>\n</nve-combobox>\n\n<script type=\"module\">\n  const combo = document.getElementById('infinite-scroll-combo');\n  const datalist = document.getElementById('infinite-scroll-list');\n  let loading = false;\n\n  async function loadBatch() {\n    if (loading) return;\n    loading = true;\n    const items = await new Promise(resolve => setTimeout(() => resolve(Array.from({ length: 100 }, (_, i) => 'GPU Model ' + (datalist.options.length + i + 1))), 300));\n    datalist.append(...items.map(v => new Option(v)));\n    loading = false;\n  }\n\n  loadBatch();\n\n  combo.addEventListener('scroll', (e) => {\n    if (e.detail.scrollHeight - e.detail.scrollTop - e.detail.clientHeight <= 128) {\n      loadBatch();\n    }\n  });\n</script>\n  `\n}\n\n/**\n * @summary Performance test with 1000 options to show filtering efficiency with large datasets.\n * @tags test-case performance\n */\nexport const Performance = () => {\n  return html`\n<nve-combobox id=\"performance-combobox\">\n  <input type=\"search\" aria-label=\"performance test\">\n  <datalist></datalist>\n</nve-combobox>\n<script type=\"module\">\n  const datalist = document.querySelector('#performance-combobox datalist');\n  const options = new Array(1000).fill('').map((_, i) => {\n    const option = document.createElement('option');\n    option.value = i + ' item';\n    return option;\n  });\n  datalist.append(...options);\n</script>`\n}\n\n/* eslint-disable @nvidia-elements/lint/no-missing-slotted-elements */\n/**\n * @summary Performance test with 1000 options to show filtering efficiency with large datasets.\n * @tags test-case performance\n */\nexport const PerformanceSelect = () => {\n  return html`\n<div nve-layout=\"pad:lg\">\n  <nve-combobox id=\"performance-combobox\">\n    <input type=\"search\" aria-label=\"performance test\">\n    <select multiple></select>\n  </nve-combobox>\n</div>\n<script type=\"module\">\n  const select = document.querySelector('#performance-combobox select');\n  const options = new Array(1000).fill('').map((_, i) => {\n    const option = document.createElement('option');\n    option.value = i + ' item';\n    return option;\n  });\n  select.append(...options);\n</script>`\n}\n\n/**\n * @summary Dynamic options with datalist and select variants of combobox.\n * @tags test-case\n */\nexport const DynamicOptions = () => {\n  return html`\n<nve-combobox id=\"dynamic-options-combobox\">\n  <input type=\"search\" aria-label=\"performance test\" />\n  <datalist>\n    <option>default</option>\n  </datalist>\n</nve-combobox>\n<script type=\"module\">\n  let i = 0;\n  setInterval(function() {\n    if (i > 100) clearInterval(interval);\n    const datalist = document.querySelector(\"#dynamic-options-combobox datalist\");\n    const option = document.createElement(\"option\");\n    option.value = i + \" item\";\n    datalist.append(option);\n    i++;\n    console.log('append');\n  }, 1000);\n</script>\n  `\n}\n\n/**\n * @summary Interactive demo showing progressive filter chips with dynamic combobox creation for complex filtering interfaces.\n * @tags test-case\n */\nexport const FilterDemo = {\n  render: () => html`<combobox-demo></combobox-demo>`\n}\n\nconst schema = {\n  status: {\n    type: 'select',\n    options: ['success', 'failure', 'processing'],\n    initial: 'success'\n  },\n  priority: {\n    type: 'select',\n    options: ['high', 'medium', 'low'],\n    initial: 'high'\n  },\n  created: {\n    type: 'date',\n    initial: new Date()\n  },\n  progress: {\n    type: 'number',\n    initial: 0\n  },\n  sessionId: {\n    type: 'text',\n    initial: ''\n  }\n};\n\n\nclass ComboboxDemo extends LitElement {\n  @state() private value = [{ name: '', value: '' }];\n\n  // todo\n  /* eslint-disable @nvidia-elements/lint/no-deprecated-popover-attributes */\n  render() {\n    return html`\n      <nve-button id=\"filter-btn\" ?pressed=${!!this.value.filter(v => v.name.length).length}><nve-icon name=\"filter\"></nve-icon> </nve-icon>filters</nve-button>\n      <nve-dropdown id=\"one\" hidden trigger=\"filter-btn\" anchor=\"filter-btn\" @open=${e => e.target.hidden = false} @close=${e => e.target.hidden = true} style=\"--min-width: 400px; --min-height: 500px;\">\n        <progressive-filter-demo @change=${e => this.value = e.detail} .value=${this.value} .schema=${schema}></progressive-filter-demo>\n      </nve-dropdown>\n      <pre style=\"margin-top: 300px\">${JSON.stringify(this.value.filter(v => v.name.length), null, 2)}</pre>\n    `;\n  }\n}\n\ncustomElements.get('combobox-demo') || customElements.define('combobox-demo', ComboboxDemo);\n\nclass ProgressiveFilterDemo extends LitElement {\n  static styles = [unsafeCSS(`\n    :host {\n      display: flex;\n      flex-direction: column;\n      gap: var(--nve-ref-space-xs);\n    }\n\n    nve-progressive-filter-chip {\n      width: 100%;\n    }\n  `)];\n\n  @property({ type: Object }) schema = {};\n\n  @property({ type: Array }) value: { name: string, value: string }[] = [{ name: '', value: '' }];\n\n  get #unusedFilters() {\n    return Object.entries(this.schema).filter(([key]) => !this.value.find(f => f.name === key));\n  }\n\n  render() {\n    return html`\n      ${this.value.map(filter => html`\n      <nve-progressive-filter-chip closable @close=${() => this.#removeFilter(filter)}>\n        <nve-combobox>\n          <span slot=\"prefix-icon\"></span>\n          <input type=\"search\" placeholder=\"filter\" .value=${filter.name} @change=${e => this.#createfilter(e.target.value, filter)} aria-label=\"filter\" />\n          <datalist>${this.#unusedFilters.map(([key]) => html`<option .value=${key}>${key}</option>`)}</datalist>\n        </nve-combobox>\n        ${choose(this.schema[filter.name]?.type, [\n      ['text', () => html`<nve-combobox><input type=\"text\" @change=${e => this.#updateFilter(e.target.value, filter)} .value=${filter.value} placeholder=\"value\" aria-label=\"filter value\" /></nve-combobox>`],\n      ['number', () => html`<nve-combobox><input type=\"number\" @change=${e => this.#updateFilter(e.target.value, filter)} .value=${filter.value} aria-label=\"filter value\" /></nve-combobox>`],\n      ['date', () => html`<nve-date><input type=\"date\" @change=${e => this.#updateFilter(e.target.value, filter)} .value=${filter.value} aria-label=\"filter value\" /></nve-date>`],\n      ['select', () => html`<nve-select><select @change=${e => this.#updateFilter(e.target.value, filter)} value=${filter.value} aria-label=\"filter value\">${this.schema[filter.name]?.options?.map(v => html`<option value=${v}>${v}</option>`)}</select></nve-select>`]\n    ], () => html`<nve-combobox><input type=\"text\" placeholder=\"value\" disabled aria-label=\"filter value\" /></nve-combobox>`)}\n      </nve-progressive-filter-chip>`)}\n      <nve-button container=\"flat\" @click=${this.#addFilter} .disabled=${this.#unusedFilters.length === 0 || !!this.value.find(v => v.name === '')} style=\"align: center; margin-top: 12px;\">\n        <nve-icon name=\"add\"></nve-icon> Add Filter\n      </nve-button>\n    `;\n  }\n\n  #addFilter() {\n    this.value = [...this.value, { name: '', value: '' }];\n    this.#valueChange();\n  }\n\n  #removeFilter(filter: { name: string, value: string }) {\n    this.value = this.value.filter(o => o.name !== filter.name);\n    this.#valueChange();\n  }\n\n  #updateFilter(value: string, filter: { name: string, value: string }) {\n    this.value = this.value.map(v => v.name === filter.name ? { ...filter, value } : v);\n    this.#valueChange();\n  }\n\n  #createfilter(name, filter: { name: string, value: string }) {\n    this.value = this.value.map(v => v.name === filter.name ? { name, value: this.schema[name]?.initial ?? '' } : v);\n    this.#valueChange();\n  }\n\n  #valueChange() {\n    this.dispatchEvent(new CustomEvent('change', { detail: this.value }));\n  }\n}\n\ncustomElements.get('progressive-filter-demo') || customElements.define('progressive-filter-demo', ProgressiveFilterDemo);\n"],"mappings":";AAGA,IAAA,IAAe"}

package/dist/combobox/combobox.examples.json

@@ -152,6 +152,17 @@
       "composition": false,
       "tags": []
     },
+    {
+      "id": "core-combobox_create-options",
+      "name": "CreateOptions",
+      "template": "<nve-combobox id=\"creatable-combo\" behavior-create style=\"--scroll-height: 220px\">\n  <label>Tags</label>\n  <input type=\"search\" placeholder=\"Select or create a tag…\" />\n  <select multiple>\n    <option value=\"Go\">Go</option>\n    <option value=\"Rust\">Rust</option>\n    <option value=\"Python\">Python</option>\n    <option value=\"JavaScript\">JavaScript</option>\n    <option value=\"TypeScript\">TypeScript</option>\n    <option value=\"Java\">Java</option>\n    <option value=\"C#\">C#</option>\n    <option value=\"C++\">C++</option>\n    <option value=\"C\">C</option>\n    <option value=\"PHP\">PHP</option>\n  </select>\n  <nve-control-message>Press Enter to create a tag that doesn't exist yet</nve-control-message>\n</nve-combobox>\n<script type=\"module\">\n  const combobox = document.getElementById(\"creatable-combo\");\n  const select = combobox.querySelector(\"select\");\n  combobox.addEventListener(\"create\", (e) => {\n    const option = document.createElement(\"option\");\n    option.value = e.detail.value;\n    option.textContent = e.detail.value;\n    option.selected = true;\n    select.appendChild(option);\n  });\n</script>\n",
+      "summary": "Combobox with create option behavior that allows users to add new options and tags on the fly. Use when the option list is not exhaustive and users need to enter values that don't yet exist.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "pattern"
+      ]
+    },
     {
       "id": "core-combobox_form",
       "name": "Form",
@@ -172,6 +183,17 @@
         "pattern"
       ]
     },
+    {
+      "id": "core-combobox_infinite-scroll",
+      "name": "InfiniteScroll",
+      "template": "<nve-combobox id=\"infinite-scroll-combo\" style=\"--scroll-height: 200px\">\n  <label>GPU Models</label>\n  <input type=\"search\" placeholder=\"Scroll to load more…\" />\n  <datalist id=\"infinite-scroll-list\"></datalist>\n</nve-combobox>\n<script type=\"module\">\n  const combo = document.getElementById(\"infinite-scroll-combo\");\n  const datalist = document.getElementById(\"infinite-scroll-list\");\n  let loading = false;\n  async function loadBatch() {\n    if (loading) return;\n    loading = true;\n    const items = await new Promise((resolve) =>\n      setTimeout(\n        () => resolve(Array.from({ length: 100 }, (_, i) => \"GPU Model \" + (datalist.options.length + i + 1))),\n        300,\n      ),\n    );\n    datalist.append(...items.map((v) => new Option(v)));\n    loading = false;\n  }\n  loadBatch();\n  combo.addEventListener(\"scroll\", (e) => {\n    if (e.detail.scrollHeight - e.detail.scrollTop - e.detail.clientHeight <= 128) {\n      loadBatch();\n    }\n  });\n</script>\n",
+      "summary": "Infinite scroll combobox loading, using the scroll event to append options as the user nears the end of the list. Use for server-backed datasets where loading all options up front is impractical.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "pattern"
+      ]
+    },
     {
       "id": "core-combobox_performance",
       "name": "Performance",

package/dist/combobox/combobox.js

@@ -1,5 +1,5 @@
 //#region src/combobox/combobox.css?inline
-var e = ":host{--scroll-height: 25vh;--_input-background: var(--background);contain:initial}[name=caret]{right:var(--nve-ref-size-300);align-self:center;pointer-events:none;position:absolute}[internal-host]:has(nve-menu:focus-within) [input]{outline:0!important}:host(:state(selected)){--font-weight: var(--nve-ref-font-weight-semibold)}:host(:state(multiple)){--padding: 0 var(--nve-ref-size-100)}:host(:state(multiple)) [input]{padding:var(--padding)}.tags{width:fit-content;display:flex;gap:var(--nve-ref-space-xxs);align-items:center}.tags-label{padding:0 var(--nve-ref-size-200);font-size:var(--font-size);cursor:var(--cursor);font-weight:var(--font-weight);text-wrap:nowrap;display:none;align-items:center;pointer-events:none}:host(:state(multiple-overflow)) .tags{opacity:0;pointer-events:none;position:absolute}:host(:state(multiple-overflow)) .tags-label{display:flex}nve-tag{--background: color-mix(in oklab, var(--color) 15%, var(--_input-background));--padding: var(--nve-ref-size-100) var(--nve-ref-size-200);--cursor: pointer !important}::slotted(select){display:none!important}:host([status=\"error\"]),:host(:state(invalid)),:host(:state(error)){--border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color)}:host([status=\"success\"]),:host(:state(success)){--border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color)}:host(:state(disabled)){--border: var(--nve-ref-border-width-md) solid transparent}[name=prefix-icon]{display:contents}nve-dropdown{--padding: var(--nve-ref-size-200)}nve-menu{contain:content;--max-height: var(--scroll-height)}nve-menu-item{--text-transform: initial;contain:content;content-visibility:auto}[internal-host]:has([matches]) nve-menu-item{--color: var(--nve-sys-text-muted-color)}nve-menu-item nve-icon{--color: inherit}input[type=checkbox]{accent-color:var(--nve-sys-accent-secondary-background)}nve-checkbox:not(:state(disabled)){--border-color: var(--nve-ref-border-color-emphasis)}nve-menu-item:not(:state(selected)) nve-icon[name=check]{opacity:0}slot:not([name]),slot[name*=option-]{display:contents}[matches]{font-weight:var(--nve-ref-font-weight-medium);color:var(--nve-sys-text-emphasis-color)}[name=footer]{display:none;min-height:var(--nve-ref-size-900);margin:calc(var(--nve-ref-size-200) * -1);width:calc(100% + calc(var(--nve-ref-size-200) * 2));border-top:var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);padding:0 var(--nve-ref-size-200);gap:var(--nve-ref-space-sm);justify-content:center;align-items:center}:host(:state(footer-content)) [name=footer]{display:flex}";
+var e = ":host{--scroll-height: 25vh;--_input-background: var(--background);contain:initial}[name=caret]{right:var(--nve-ref-size-300);align-self:center;pointer-events:none;position:absolute}[internal-host]:has(nve-menu:focus-within) [input]{outline:0!important}:host(:state(selected)){--font-weight: var(--nve-ref-font-weight-semibold)}:host(:state(multiple)){--padding: 0 var(--nve-ref-size-100)}:host(:state(multiple)) [input]{padding:var(--padding)}.tags{width:fit-content;display:flex;gap:var(--nve-ref-space-xxs);align-items:center}.tags-label{padding:0 var(--nve-ref-size-200);font-size:var(--font-size);cursor:var(--cursor);font-weight:var(--font-weight);text-wrap:nowrap;display:none;align-items:center;pointer-events:none}:host(:state(multiple-overflow)) .tags{opacity:0;pointer-events:none;position:absolute}:host(:state(multiple-overflow)) .tags-label{display:flex}nve-tag{--background: color-mix(in oklab, var(--color) 15%, var(--_input-background));--padding: var(--nve-ref-size-100) var(--nve-ref-size-200);--cursor: pointer !important}::slotted(select){display:none!important}:host([status=\"error\"]),:host(:state(invalid)),:host(:state(error)){--border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color)}:host([status=\"success\"]),:host(:state(success)){--border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color)}:host(:state(disabled)){--border: var(--nve-ref-border-width-md) solid transparent}[name=prefix-icon]{display:contents}nve-dropdown{--padding: var(--nve-ref-size-200)}nve-menu{contain:content;--max-height: var(--scroll-height)}nve-menu-item{--text-transform: initial;contain:content;content-visibility:auto}[internal-host]:has([matches]) nve-menu-item{--color: var(--nve-sys-text-muted-color)}nve-menu-item nve-icon{--color: inherit}input[type=checkbox]{accent-color:var(--nve-sys-accent-secondary-background)}nve-checkbox:not(:state(disabled)){--border-color: var(--nve-ref-border-color-emphasis)}nve-menu-item:not(:state(selected)) nve-icon[name=check]{opacity:0}slot:not([name]),slot[name*=option-]{display:contents}[matches]{font-weight:var(--nve-ref-font-weight-medium);color:var(--nve-sys-text-emphasis-color)}[name=footer]{display:none;min-height:var(--nve-ref-size-900);margin:calc(var(--nve-ref-size-200) * -1);width:calc(100% + calc(var(--nve-ref-size-200) * 2));border-top:var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);padding:0 var(--nve-ref-size-200);gap:var(--nve-ref-space-sm);justify-content:center;align-items:center}:host(:state(footer-content)) [name=footer]{display:flex}nve-menu-item[part=create-option]{--color: var(--nve-sys-text-muted-color);font-style:italic;span:first-letter{text-transform:uppercase}}";
 //#endregion
 export { e as default };
 

package/dist/combobox/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","names":[],"sources":["../../src/combobox/combobox.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --scroll-height: 25vh;\n  --_input-background: var(--background);\n  contain: initial;\n}\n\n[name='caret'] {\n  right: var(--nve-ref-size-300);\n  align-self: center;\n  pointer-events: none;\n  position: absolute;\n}\n\n[internal-host]:has(nve-menu:focus-within) [input] {\n  outline: 0 !important;\n}\n\n:host(:state(selected)) {\n  --font-weight: var(--nve-ref-font-weight-semibold);\n}\n\n:host(:state(multiple)) {\n  --padding: 0 var(--nve-ref-size-100);\n}\n\n:host(:state(multiple)) [input] {\n  padding: var(--padding);\n}\n\n.tags {\n  width: fit-content;\n  display: flex;\n  gap: var(--nve-ref-space-xxs);\n  align-items: center;\n}\n\n.tags-label {\n  padding: 0 var(--nve-ref-size-200);\n  font-size: var(--font-size);\n  cursor: var(--cursor);\n  font-weight: var(--font-weight);\n  text-wrap: nowrap;\n  display: none;\n  align-items: center;\n  pointer-events: none;\n}\n\n:host(:state(multiple-overflow)) .tags {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n}\n\n:host(:state(multiple-overflow)) .tags-label {\n  display: flex;\n}\n\nnve-tag {\n  --background: color-mix(in oklab, var(--color) 15%, var(--_input-background));\n  --padding: var(--nve-ref-size-100) var(--nve-ref-size-200);\n  --cursor: pointer !important;\n}\n\n::slotted(select) {\n  display: none !important;\n}\n\n:host([status='error']),\n:host(:state(invalid)),\n:host(:state(error)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color);\n}\n\n:host([status='success']),\n:host(:state(success)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color);\n}\n\n:host(:state(disabled)) {\n  --border: var(--nve-ref-border-width-md) solid transparent;\n}\n\n[name='prefix-icon'] {\n  display: contents;\n}\n\nnve-dropdown {\n  --padding: var(--nve-ref-size-200);\n}\n\nnve-menu {\n  contain: content;\n  --max-height: var(--scroll-height);\n}\n\nnve-menu-item {\n  --text-transform: initial;\n  contain: content;\n  content-visibility: auto;\n}\n\n[internal-host]:has([matches]) nve-menu-item {\n  --color: var(--nve-sys-text-muted-color);\n}\n\nnve-menu-item nve-icon {\n  --color: inherit;\n}\n\ninput[type='checkbox'] {\n  accent-color: var(--nve-sys-accent-secondary-background);\n}\n\nnve-checkbox:not(:state(disabled)) {\n  --border-color: var(--nve-ref-border-color-emphasis);\n}\n\nnve-menu-item:not(:state(selected)) nve-icon[name='check'] {\n  opacity: 0;\n}\n\nslot:not([name]),\nslot[name*='option-'] {\n  display: contents;\n}\n\n[matches] {\n  font-weight: var(--nve-ref-font-weight-medium);\n  color: var(--nve-sys-text-emphasis-color);\n}\n\n[name='footer'] {\n  display: none;\n  min-height: var(--nve-ref-size-900);\n  margin: calc(var(--nve-ref-size-200) * -1);\n  width: calc(100% + calc(var(--nve-ref-size-200) * 2));\n  border-top: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  padding: 0 var(--nve-ref-size-200);\n  gap: var(--nve-ref-space-sm);\n  justify-content: center;\n  align-items: center;\n}\n\n:host(:state(footer-content)) [name='footer'] {\n  display: flex;\n}\n"],"mappings":""}
+{"version":3,"file":"combobox.js","names":[],"sources":["../../src/combobox/combobox.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --scroll-height: 25vh;\n  --_input-background: var(--background);\n  contain: initial;\n}\n\n[name='caret'] {\n  right: var(--nve-ref-size-300);\n  align-self: center;\n  pointer-events: none;\n  position: absolute;\n}\n\n[internal-host]:has(nve-menu:focus-within) [input] {\n  outline: 0 !important;\n}\n\n:host(:state(selected)) {\n  --font-weight: var(--nve-ref-font-weight-semibold);\n}\n\n:host(:state(multiple)) {\n  --padding: 0 var(--nve-ref-size-100);\n}\n\n:host(:state(multiple)) [input] {\n  padding: var(--padding);\n}\n\n.tags {\n  width: fit-content;\n  display: flex;\n  gap: var(--nve-ref-space-xxs);\n  align-items: center;\n}\n\n.tags-label {\n  padding: 0 var(--nve-ref-size-200);\n  font-size: var(--font-size);\n  cursor: var(--cursor);\n  font-weight: var(--font-weight);\n  text-wrap: nowrap;\n  display: none;\n  align-items: center;\n  pointer-events: none;\n}\n\n:host(:state(multiple-overflow)) .tags {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n}\n\n:host(:state(multiple-overflow)) .tags-label {\n  display: flex;\n}\n\nnve-tag {\n  --background: color-mix(in oklab, var(--color) 15%, var(--_input-background));\n  --padding: var(--nve-ref-size-100) var(--nve-ref-size-200);\n  --cursor: pointer !important;\n}\n\n::slotted(select) {\n  display: none !important;\n}\n\n:host([status='error']),\n:host(:state(invalid)),\n:host(:state(error)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color);\n}\n\n:host([status='success']),\n:host(:state(success)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color);\n}\n\n:host(:state(disabled)) {\n  --border: var(--nve-ref-border-width-md) solid transparent;\n}\n\n[name='prefix-icon'] {\n  display: contents;\n}\n\nnve-dropdown {\n  --padding: var(--nve-ref-size-200);\n}\n\nnve-menu {\n  contain: content;\n  --max-height: var(--scroll-height);\n}\n\nnve-menu-item {\n  --text-transform: initial;\n  contain: content;\n  content-visibility: auto;\n}\n\n[internal-host]:has([matches]) nve-menu-item {\n  --color: var(--nve-sys-text-muted-color);\n}\n\nnve-menu-item nve-icon {\n  --color: inherit;\n}\n\ninput[type='checkbox'] {\n  accent-color: var(--nve-sys-accent-secondary-background);\n}\n\nnve-checkbox:not(:state(disabled)) {\n  --border-color: var(--nve-ref-border-color-emphasis);\n}\n\nnve-menu-item:not(:state(selected)) nve-icon[name='check'] {\n  opacity: 0;\n}\n\nslot:not([name]),\nslot[name*='option-'] {\n  display: contents;\n}\n\n[matches] {\n  font-weight: var(--nve-ref-font-weight-medium);\n  color: var(--nve-sys-text-emphasis-color);\n}\n\n[name='footer'] {\n  display: none;\n  min-height: var(--nve-ref-size-900);\n  margin: calc(var(--nve-ref-size-200) * -1);\n  width: calc(100% + calc(var(--nve-ref-size-200) * 2));\n  border-top: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  padding: 0 var(--nve-ref-size-200);\n  gap: var(--nve-ref-space-sm);\n  justify-content: center;\n  align-items: center;\n}\n\n:host(:state(footer-content)) [name='footer'] {\n  display: flex;\n}\n\nnve-menu-item[part='create-option'] {\n  --color: var(--nve-sys-text-muted-color);\n  font-style: italic;\n\n  span::first-letter {\n    text-transform: uppercase;\n  }\n}\n"],"mappings":""}