@nvidia-elements/core 0.0.1 → 0.0.3

package/dist/select/select.examples.json

@@ -0,0 +1,185 @@
+{
+  "element": "nve-select",
+  "entrypoint": "@nvidia-elements/core/select/select.examples.json",
+  "items": [
+    {
+      "id": "core-select_default",
+      "name": "Default",
+      "template": "<nve-select>\n  <label>label</label>\n  <select>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\">Option 2</option>\n    <option value=\"3\">Option 3</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n",
+      "summary": "Basic select component with label, options, and message.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-select_custom-option-render",
+      "name": "CustomOptionRender",
+      "template": "<nve-select>\n  <label>label</label>\n  <select id=\"complex\">\n    <option value=\"1\">Debugger</option>\n    <option value=\"2\">Task Manager</option>\n    <option value=\"3\">CI Services</option>\n  </select>\n  <div slot=\"option-1\" nve-layout=\"row gap:xs align:vertical-center\">\n    <nve-logo color=\"pink-rose\">Db</nve-logo>\n    <p nve-text=\"body\" nve-layout=\"column gap:xs\">\n      <span nve-text=\"label\">Debugger</span>\n      <span nve-text=\"body muted\">some details on option 1</span>\n    </p>\n  </div>\n  <div slot=\"option-2\" nve-layout=\"row gap:xs align:vertical-center\">\n    <nve-logo color=\"blue-cobalt\">TM</nve-logo>\n    <p nve-text=\"body\" nve-layout=\"column gap:xs\">\n      <span nve-text=\"label\">Task Manager</span>\n      <span nve-text=\"body muted\">some details on option 2</span>\n    </p>\n  </div>\n  <div slot=\"option-3\" nve-layout=\"row gap:xs align:vertical-center\">\n    <nve-logo color=\"green-mint\">CI</nve-logo>\n    <p nve-text=\"body\" nve-layout=\"column gap:xs\">\n      <span nve-text=\"label\">CI Services</span>\n      <span nve-text=\"body muted\">some details on option 3</span>\n    </p>\n  </div>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n",
+      "summary": "Rich option rendering with custom slots containing logos and descriptions for each option.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-select_prefix",
+      "name": "Prefix",
+      "template": "<nve-select>\n  <nve-button container=\"flat\" readonly>location</nve-button>\n  <select aria-label=\"location\">\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\">Option 2</option>\n    <option value=\"3\">Option 3</option>\n  </select>\n</nve-select>\n",
+      "summary": "Select with a prefix button to provide extra context or categorization.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-select_flat",
+      "name": "Flat",
+      "template": "<div nve-layout=\"column gap:xl align:stretch\">\n  <nve-select container=\"flat\">\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select container=\"flat\">\n    <label>multiple</label>\n    <select multiple>\n      <option selected value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select container=\"flat\">\n    <label>multiple + size</label>\n    <select multiple size=\"5\">\n      <option selected value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n</div>\n",
+      "summary": "Flat container style for single and multi select, providing a minimal visual treatment.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-select_vertical",
+      "name": "Vertical",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-select>\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select>\n    <label>disabled</label>\n    <select disabled>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select>\n    <label>success</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-select>\n  <nve-select>\n    <label>error</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-select>\n</div>\n",
+      "summary": "Vertical layout showcasing states: default, disabled, success, and error.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-select_horizontal",
+      "name": "Horizontal",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-select layout=\"horizontal\">\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select layout=\"horizontal\">\n    <label>disabled</label>\n    <select disabled>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select layout=\"horizontal\">\n    <label>success</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-select>\n  <nve-select layout=\"horizontal\">\n    <label>error</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-select>\n</div>\n",
+      "summary": "Horizontal layout showcasing states: default, disabled, success, and error.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-select_multiple",
+      "name": "Multiple",
+      "template": "<nve-select>\n  <label>label</label>\n  <select multiple>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\" selected>Option 2</option>\n    <option value=\"3\" selected>Option 3</option>\n    <option value=\"4\" selected>Option 4</option>\n    <option value=\"5\">Option 5</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n",
+      "summary": "Many-selection mode allowing users to select many options simultaneously.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-select_multiple-disabled",
+      "name": "MultipleDisabled",
+      "template": "<nve-select>\n  <label>label</label>\n  <select multiple disabled>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\" selected>Option 2</option>\n    <option value=\"3\" selected>Option 3</option>\n    <option value=\"4\" selected>Option 4</option>\n    <option value=\"5\">Option 5</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n",
+      "summary": "Multi-selection in disabled state, showing read-only selected options.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-select_multiple-overflow",
+      "name": "MultipleOverflow",
+      "template": "<nve-select style=\"--width: 250px\">\n  <label>label</label>\n  <select multiple>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\" selected>Option 2</option>\n    <option value=\"3\" selected>Option 3</option>\n    <option value=\"4\" selected>Option 4</option>\n    <option value=\"5\" selected>Option 5</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n",
+      "summary": "Multi-selection with constrained width to show overflow handling of selected options.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-select_size",
+      "name": "Size",
+      "template": "<div nve-layout=\"column gap:xl\">\n  <nve-select>\n    <label>label</label>\n    <select size=\"5\">\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\" selected>Option 2</option>\n      <option value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select>\n    <label>label</label>\n    <select size=\"3\">\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\" selected>Option 2</option>\n      <option value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n</div>\n",
+      "summary": "Size attribute controls the number of visible options without scrolling.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-select_height",
+      "name": "Height",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-select style=\"--scroll-height: 150px\">\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n      <option value=\"6\">Option 6</option>\n      <option value=\"7\">Option 7</option>\n      <option value=\"8\">Option 8</option>\n      <option value=\"9\">Option 9</option>\n      <option value=\"10\">Option 10</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select>\n    <label>label</label>\n    <select>\n      <option>Option 1</option>\n      <option>Option 2</option>\n      <option>Option 3</option>\n      <option>Option 4</option>\n      <option>Option 5</option>\n      <option>Option 6</option>\n      <option>Option 7</option>\n      <option>Option 8</option>\n      <option>Option 9</option>\n      <option>Option 10</option>\n      <option>Option 11</option>\n      <option>Option 12</option>\n      <option>Option 13</option>\n      <option>Option 14</option>\n      <option>Option 15</option>\n      <option>Option 16</option>\n      <option>Option 17</option>\n      <option>Option 18</option>\n      <option>Option 19</option>\n      <option>Option 20</option>\n      <option>Option 21</option>\n      <option>Option 22</option>\n      <option>Option 23</option>\n      <option>Option 24</option>\n      <option>Option 25</option>\n      <option>Option 26</option>\n      <option>Option 27</option>\n      <option>Option 28</option>\n      <option>Option 29</option>\n      <option>Option 30</option>\n      <option>Option 31</option>\n      <option>Option 32</option>\n      <option>Option 33</option>\n      <option>Option 34</option>\n      <option>Option 35</option>\n      <option>Option 36</option>\n      <option>Option 37</option>\n      <option>Option 38</option>\n      <option>Option 39</option>\n      <option>Option 40</option>\n      <option>Option 41</option>\n      <option>Option 42</option>\n      <option>Option 43</option>\n      <option>Option 44</option>\n      <option>Option 45</option>\n      <option>Option 46</option>\n      <option>Option 47</option>\n      <option>Option 48</option>\n      <option>Option 49</option>\n      <option>Option 50</option>\n      <option>Option 51</option>\n      <option>Option 52</option>\n      <option>Option 53</option>\n      <option>Option 54</option>\n      <option>Option 55</option>\n      <option>Option 56</option>\n      <option>Option 57</option>\n      <option>Option 58</option>\n      <option>Option 59</option>\n      <option>Option 60</option>\n      <option>Option 61</option>\n      <option>Option 62</option>\n      <option>Option 63</option>\n      <option>Option 64</option>\n      <option>Option 65</option>\n      <option>Option 66</option>\n      <option>Option 67</option>\n      <option>Option 68</option>\n      <option>Option 69</option>\n      <option>Option 70</option>\n      <option>Option 71</option>\n      <option>Option 72</option>\n      <option>Option 73</option>\n      <option>Option 74</option>\n      <option>Option 75</option>\n      <option>Option 76</option>\n      <option>Option 77</option>\n      <option>Option 78</option>\n      <option>Option 79</option>\n      <option>Option 80</option>\n      <option>Option 81</option>\n      <option>Option 82</option>\n      <option>Option 83</option>\n      <option>Option 84</option>\n      <option>Option 85</option>\n      <option>Option 86</option>\n      <option>Option 87</option>\n      <option>Option 88</option>\n      <option>Option 89</option>\n      <option>Option 90</option>\n      <option>Option 91</option>\n      <option>Option 92</option>\n      <option>Option 93</option>\n      <option>Option 94</option>\n      <option>Option 95</option>\n      <option>Option 96</option>\n      <option>Option 97</option>\n      <option>Option 98</option>\n      <option>Option 99</option>\n      <option>Option 100</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n</div>\n",
+      "summary": "Custom scroll height for dropdown with many options to control vertical space usage.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-select_fit-text",
+      "name": "FitText",
+      "template": "<nve-select fit-text>\n  <label>label</label>\n  <select>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\">Option 1234</option>\n    <option value=\"3\">Option 1234567809</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n",
+      "summary": "Select width dynamically adjusts to fit the currently selected option text.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-select_fit-content",
+      "name": "FitContent",
+      "template": "<div nve-layout=\"column gap:lg\">\n  <nve-select fit-content>\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 1234</option>\n      <option value=\"3\">Option 1234567809</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select fit-content layout=\"horizontal\">\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 1234</option>\n      <option value=\"3\">Option 1234567809</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n</div>\n",
+      "summary": "Select width adjusts to fit the longest option in both vertical and horizontal layouts.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-select_placeholder",
+      "name": "Placeholder",
+      "template": "<nve-select>\n  <label>label</label>\n  <select>\n    <option value selected disabled hidden>Select Option</option>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\">Option 2</option>\n    <option value=\"3\">Option 3</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n",
+      "summary": "Placeholder text prompts users to make a selection when no option exists yet.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-select_placeholder-multiple",
+      "name": "PlaceholderMultiple",
+      "template": "<nve-select>\n  <label>label</label>\n  <select multiple>\n    <option value selected disabled hidden>Select Option</option>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\">Option 2</option>\n    <option value=\"3\">Option 3</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n",
+      "summary": "Placeholder text in multi-selection mode guides users before they select any options.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-select_disabled",
+      "name": "Disabled",
+      "template": "<nve-select>\n  <label>label</label>\n  <select>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\" disabled>Option 2</option>\n    <option value=\"3\">Option 3</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n",
+      "summary": "Disable individual options to prevent selection while keeping them visible.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-select_viewport-overflow",
+      "name": "ViewportOverflow",
+      "template": "<nve-select layout=\"horizontal-inline\" style=\"margin: 30vh 0 0 60vw; max-width: 500px\">\n  <label>label</label>\n  <select>\n    <option value=\"1\">Option 1 asfd asdf asdf asdf asdf asdf asdfasdf asdf asdf asdf asdf asdf asdf asdf</option>\n    <option value=\"2\">Option 2</option>\n    <option value=\"3\">Option 3</option>\n  </select>\n</nve-select>\n<nve-select layout=\"horizontal-inline\" style=\"margin: 55vh 0 0 60vw; max-width: 500px\">\n  <label>label</label>\n  <select>\n    <option value=\"1\">Option 1 asfd asdf asdf asdf asdf asdf asdfasdf asdf asdf asdf asdf asdf asdf asdf</option>\n    <option value=\"2\">Option 2</option>\n    <option value=\"3\">Option 3</option>\n  </select>\n</nve-select>\n",
+      "summary": "Viewport overflow test for select element",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-select_performance",
+      "name": "Performance",
+      "template": "<nve-select id=\"performance-select\">\n  <label>1000 options</label>\n  <select></select>\n</nve-select>\n<script type=\"module\">\n  const select = document.querySelector(\"#performance-select select\");\n  const options = new Array(1000).fill(\"\").map((_, i) => {\n    const option = document.createElement(\"option\");\n    option.value = i;\n    option.textContent = i + \" item\";\n    return option;\n  });\n  select.append(...options);\n</script>\n",
+      "summary": "Performance test for select element with 1000 options",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case",
+        "performance"
+      ]
+    }
+  ]
+}

package/dist/select/select.js

@@ -0,0 +1,6 @@
+//#region src/select/select.css?inline
+var e = ":host{--padding: 0 var(--nve-ref-size-800) 0 var(--nve-ref-size-200);--font-size: var(--nve-ref-font-size-100);--height: var(--nve-ref-size-800);--background: var(--nve-sys-interaction-field-background);--color: var(--nve-sys-interaction-field-color);--border-radius: var(--nve-ref-border-radius-sm);--border: var(--nve-ref-border-width-md) solid transparent;--border-bottom: var(--border);--cursor: pointer;--font-weight: normal;--text-align: start;--scroll-height: 50vh;--_input-background: var(--background);--_icon-color: var(--color);--width: 100%;--control-width: var(--width);--max-width: 100%;--min-width: fit-content;contain:initial;width:var(--width);max-width:var(--max-width);min-width:var(--min-width)}:host([fit-text]){--min-width: initial}[internal-host]{position:relative}[input]{height:var(--height);background:var(--background);border:var(--border);border-bottom:var(--border-bottom);border-radius:var(--border-radius);width:var(--control-width);color:var(--color);align-items:center;display:flex;align-content:stretch;position:relative}[name=caret]{right:var(--nve-ref-size-300);align-self:center;pointer-events:none;position:absolute;transition:transform var(--nve-ref-animation-duration-200) cubic-bezier(.4,0,.2,1)}::slotted(select){appearance:none!important;color:var(--color)!important;padding:var(--padding)!important;font-size:var(--font-size)!important;cursor:var(--cursor)!important;font-weight:var(--font-weight)!important;text-align:var(--text-align)!important;height:var(--height)!important;width:100%!important;border:0!important;background:none!important;display:block!important}[internal-host]:has(nve-menu:focus-within) [input]{outline:0!important}:host(:state(selected)){--font-weight: var(--nve-ref-font-weight-semibold)}:host([fit-content]:state(multiple)) [internal-host]:has(nve-tag) ::slotted(select){width:var(--nve-ref-size-1000)!important}:host(:state(multiple)){--padding: 0 var(--nve-ref-size-300) 0 var(--nve-ref-size-100)}:host(:state(multiple)) [input]{padding:var(--padding)}:host(:state(multiple)) .tags{width:fit-content;display:flex;gap:var(--nve-ref-space-xxs)}:host(:state(multiple)) .tags-label{padding:0 var(--nve-ref-size-200);font-size:var(--font-size);cursor:var(--cursor);font-weight:var(--font-weight);position:absolute;left:0;display:none;pointer-events:none}:host(:state(multiple-overflow)) .tags,:host([multiple-overflow]) .tags{opacity:0;pointer-events:none;position:absolute}:host(:state(multiple-overflow)) .tags-label,:host([multiple-overflow]) .tags-label,.placeholder.tags-label{display:block!important}:host([size]:state(multiple)) .tags,:host([size]:state(multiple)) .tags-label{display:none!important}:host(:state(multiple)) ::slotted(select[multiple]){opacity:0!important}:host(:state(size)){--height: calc(var(--nve-ref-size-800) * var(--size))}:host(:state(size)) [input]{overflow:auto;display:block}:host(:state(size)) [input] slot:not([name]){display:none}:host([layout*=\"horizontal\"][size]) ::slotted(label){padding-block-start:var(--nve-ref-size-100)!important;align-self:start!important}:host([layout*=\"horizontal\"][size]) slot[name=label]{align-self:start}: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}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}:host(:state(disabled)) nve-tag{pointer-events:none!important;--cursor: not-allowed !important}nve-dropdown{--padding: var(--nve-ref-size-200)}nve-menu{--max-height: var(--scroll-height)}nve-menu-item{--text-transform: initial;contain:content;content-visibility:auto}nve-menu-item:not(:state(selected)) nve-icon[name=check]{opacity:0}nve-menu-item nve-icon{--color: inherit}slot:not([name]),slot[name*=option-]{display:contents}:host([container=\"flat\"]){--background: unset;--border-radius: 0;--box-shadow: none;--border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-muted)}:host([container=\"flat\"]) [input]{background:inherit}:host([container=\"flat\"]) nve-tag{--background: var(--nve-sys-interaction-field-background)}:host([container=\"flat\"]:focus-within){--border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-emphasis)}:host([container=\"flat\"][size]){--border-bottom: 0 !important}:host([container=\"flat\"]:focus-within) [input]{outline:0!important}:host([container=\"inline\"]){--border-radius: 0;--box-shadow: none}:host([container=\"inline\"]) [input]{background:inherit}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=select.js.map

package/dist/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","names":[],"sources":["../../src/select/select.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  --padding: 0 var(--nve-ref-size-800) 0 var(--nve-ref-size-200);\n  --font-size: var(--nve-ref-font-size-100);\n  --height: var(--nve-ref-size-800);\n  --background: var(--nve-sys-interaction-field-background);\n  --color: var(--nve-sys-interaction-field-color);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --border: var(--nve-ref-border-width-md) solid transparent;\n  --border-bottom: var(--border);\n  --cursor: pointer;\n  --font-weight: normal;\n  --text-align: start;\n  --scroll-height: 50vh;\n  --_input-background: var(--background);\n  --_icon-color: var(--color);\n  --width: 100%;\n  --control-width: var(--width);\n  --max-width: 100%;\n  --min-width: fit-content;\n  contain: initial;\n  width: var(--width);\n  max-width: var(--max-width);\n  min-width: var(--min-width);\n}\n\n:host([fit-text]) {\n  --min-width: initial;\n}\n\n[internal-host] {\n  position: relative;\n}\n\n[input] {\n  height: var(--height);\n  background: var(--background);\n  border: var(--border);\n  border-bottom: var(--border-bottom);\n  border-radius: var(--border-radius);\n  width: var(--control-width);\n  color: var(--color);\n  align-items: center;\n  display: flex;\n  align-content: stretch;\n  position: relative;\n}\n\n[name='caret'] {\n  right: var(--nve-ref-size-300);\n  align-self: center;\n  pointer-events: none;\n  position: absolute;\n  transition: transform var(--nve-ref-animation-duration-200) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n::slotted(select) {\n  appearance: none !important;\n  color: var(--color) !important;\n  padding: var(--padding) !important;\n  font-size: var(--font-size) !important;\n  cursor: var(--cursor) !important;\n  font-weight: var(--font-weight) !important;\n  text-align: var(--text-align) !important;\n  height: var(--height) !important;\n  width: 100% !important;\n  border: 0 !important;\n  background: none !important;\n  display: block !important;\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([fit-content]:state(multiple)) [internal-host]:has(nve-tag) ::slotted(select) {\n  width: var(--nve-ref-size-1000) !important;\n}\n\n:host(:state(multiple)) {\n  --padding: 0 var(--nve-ref-size-300) 0 var(--nve-ref-size-100);\n}\n\n:host(:state(multiple)) [input] {\n  padding: var(--padding);\n}\n\n:host(:state(multiple)) .tags {\n  width: fit-content;\n  display: flex;\n  gap: var(--nve-ref-space-xxs);\n}\n\n:host(:state(multiple)) .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  position: absolute;\n  left: 0;\n  display: none;\n  pointer-events: none;\n}\n\n:host(:state(multiple-overflow)) .tags,\n:host([multiple-overflow]) .tags {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n}\n\n:host(:state(multiple-overflow)) .tags-label,\n:host([multiple-overflow]) .tags-label,\n.placeholder.tags-label {\n  display: block !important;\n}\n\n:host([size]:state(multiple)) .tags,\n:host([size]:state(multiple)) .tags-label {\n  display: none !important;\n}\n\n:host(:state(multiple)) ::slotted(select[multiple]) {\n  opacity: 0 !important;\n}\n\n:host(:state(size)) {\n  --height: calc(var(--nve-ref-size-800) * var(--size));\n}\n\n:host(:state(size)) [input] {\n  overflow: auto;\n  display: block;\n}\n\n:host(:state(size)) [input] slot:not([name]) {\n  display: none;\n}\n\n:host([layout*='horizontal'][size]) ::slotted(label) {\n  padding-block-start: var(--nve-ref-size-100) !important;\n  align-self: start !important;\n}\n\n:host([layout*='horizontal'][size]) slot[name='label'] {\n  align-self: start;\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\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:host(:state(disabled)) nve-tag {\n  pointer-events: none !important;\n  --cursor: not-allowed !important;\n}\n\nnve-dropdown {\n  --padding: var(--nve-ref-size-200);\n}\n\nnve-menu {\n  --max-height: var(--scroll-height);\n}\n\nnve-menu-item {\n  --text-transform: initial;\n  contain: content;\n  content-visibility: auto;\n}\n\nnve-menu-item:not(:state(selected)) nve-icon[name='check'] {\n  opacity: 0;\n}\n\nnve-menu-item nve-icon {\n  --color: inherit;\n}\n\nslot:not([name]),\nslot[name*='option-'] {\n  display: contents;\n}\n\n:host([container='flat']) {\n  --background: unset;\n  --border-radius: 0;\n  --box-shadow: none;\n  --border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-muted);\n}\n\n:host([container='flat']) [input] {\n  background: inherit;\n}\n\n:host([container='flat']) nve-tag {\n  --background: var(--nve-sys-interaction-field-background);\n}\n\n:host([container='flat']:focus-within) {\n  --border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-emphasis);\n}\n\n:host([container='flat'][size]) {\n  --border-bottom: 0 !important;\n}\n\n:host([container='flat']:focus-within) [input] {\n  outline: 0 !important;\n}\n\n:host([container='inline']) {\n  --border-radius: 0;\n  --box-shadow: none;\n}\n\n:host([container='inline']) [input] {\n  background: inherit;\n}\n"],"mappings":""}

package/dist/select/select2.js

@@ -0,0 +1,131 @@
+import { focusElementTimeout as e, onListboxActivate as t } from "../internal/utils/focus.js";
+import { getElementUpdate as n } from "../internal/utils/dom.js";
+import { onChildListMutation as r } from "../internal/utils/events.js";
+import { __decorate as i } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { I18nController as a, i18n as o } from "../internal/controllers/i18n.controller.js";
+import { scopedRegistry as s } from "../internal/decorators/scoped-registry.js";
+import { useStyles as c } from "../internal/styles/index.js";
+import { Icon as l } from "../icon/icon2.js";
+import { Control as u } from "../forms/control/control2.js";
+import { Tag as d } from "../tag/tag2.js";
+import { Menu as f } from "../menu/menu2.js";
+import { MenuItem as p } from "../menu/menu-item2.js";
+import { Dropdown as m } from "../dropdown/dropdown2.js";
+import h from "./select.js";
+import { html as g, nothing as _ } from "lit";
+import { property as v } from "lit/decorators/property.js";
+import { ifDefined as y } from "lit/directives/if-defined.js";
+//#region src/select/select.ts
+var b = class extends u {
+	constructor(...e) {
+		super(...e), this.i18n = this.#e.i18n;
+	}
+	static {
+		this.styles = c([...u.styles, h]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-select",
+			version: "0.0.3"
+		};
+	}
+	static {
+		this.elementDefinitions = {
+			[l.metadata.tag]: l,
+			[m.metadata.tag]: m,
+			[f.metadata.tag]: f,
+			[p.metadata.tag]: p,
+			[d.metadata.tag]: d
+		};
+	}
+	#e = new a(this);
+	get #t() {
+		return this.input;
+	}
+	get #n() {
+		return Array.from(this.#t?.options ? this.#t.options : []);
+	}
+	get #r() {
+		return this.shadowRoot.querySelector(m.metadata.tag);
+	}
+	get #i() {
+		return this.shadowRoot.querySelectorAll(p.metadata.tag);
+	}
+	get #a() {
+		return this.shadowRoot.querySelector("[input]");
+	}
+	get #o() {
+		return this.shadowRoot.querySelector(".tags");
+	}
+	get #s() {
+		return this.shadowRoot.querySelector("[name=\"caret\"]");
+	}
+	get #c() {
+		return this.#n.find((e) => e.selected && e.hidden && e.disabled);
+	}
+	#l = [];
+	get #u() {
+		let e = this.#c, t = e ? e.innerText : `${this.#t.selectedOptions.length} ${this.i18n.selected}`;
+		return g`<div class="tags-label ${e ? "placeholder" : ""}" aria-hidden="true">${t}</div>`;
+	}
+	get prefixContent() {
+		return this.#t?.multiple && this.#t?.size === 0 ? g`${this.#u}<div class="tags">${this.#n.filter((e) => e.selected && e !== this.#c).map((e) => g`<nve-tag part="tag" readonly="readonly" color="gray-slate" closable .value="${e.value}" @click="${() => this.#y(e, !1)}">${e.textContent}</nve-tag>`)}</div>` : _;
+	}
+	get #d() {
+		return g`<nve-menu part="menu" role="listbox" style="--width:100%;--min-width:fit-content" aria-label="${y(this.i18n.select)}">${this.#n.filter((e) => e !== this.#c).map((e, t) => g`<nve-menu-item part="menu-item" role="option" @click="${() => this.#y(e, !e.selected)}" ?selected="${e.selected}" ?disabled="${e.disabled}" ?hidden="${!!e.hidden}" aria-selected="${e.selected}"><slot name="option-${t + 1}"><nve-icon part="icon" name="check" size="sm" aria-hidden="true"></nve-icon>${e.innerText}</slot></nve-menu-item>`)}</nve-menu>`;
+	}
+	get suffixContent() {
+		return this.#t?.size === 0 ? g`<nve-icon name="caret" part="caret" direction="down" size="sm" aria-hidden="true"></nve-icon><nve-dropdown part="dropdown" @close="${this.#_}" @open="${this.#g}" hidden .anchor="${this.#a}" .trigger="${this.#a}" position="bottom">${this.#d}</nve-dropdown>` : this.#d;
+	}
+	async firstUpdated(e) {
+		super.firstUpdated(e), await this.updateComplete, this.#h(), this.#v(), this.#f(), this.#m();
+	}
+	#f() {
+		this.#l.push(n(this.#t, "value", () => this.requestUpdate()), r(this.#t, () => this.requestUpdate(), {
+			attributes: !0,
+			subtree: !0
+		}), r(this.#t, () => this.#m(), { subtree: !0 }));
+	}
+	#p = /* @__PURE__ */ new Set();
+	#m() {
+		this.#n.forEach((e) => {
+			this.#p.has(e) || (this.#p.add(e), this.#l.push(n(e, "selected", () => this.requestUpdate())));
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#l.forEach((e) => e.disconnect());
+	}
+	async updated(e) {
+		super.updated(e), this.#t?.size && this.#t?.size !== 0 && (this._internals.states.add("size"), this.style.setProperty("--size", `${this.#t?.size + .75}`)), this.#t?.multiple && this.#t?.size === 0 && this._internals.states.add("multiple");
+	}
+	#h() {
+		this.#t?.size === 0 && t(this.#t, () => {
+			this.requestUpdate(), this.#r.style.setProperty("--min-width", `${this.#a.getBoundingClientRect().width}px`), this.#r.showPopover(), e(this.#i[0]);
+		});
+	}
+	#g() {
+		this.#r.hidden = !1, this.#s.direction = "up";
+	}
+	#_() {
+		this.#r.hidden = !0, this.#s.direction = "down";
+	}
+	#v() {
+		let e = new ResizeObserver((e) => this.#b(e[0].contentRect.width));
+		this.#l.push(e), e.observe(this.#a);
+	}
+	async #y(e, t) {
+		(this.#t.multiple || !this.#t.multiple && e.value !== this.#t.value) && (e.selected = t), this.#t.selectedOptions.length < 1 && (this.#t.value = t ? e.value : ""), this.#t.dispatchEvent(new Event("input", { bubbles: !0 })), this.#t.dispatchEvent(new Event("change", { bubbles: !0 })), this.requestUpdate(), !this.#t.multiple && this.#r ? this.#r.hidePopover() : (await this.updateComplete, this.#b(this.#a.getBoundingClientRect().width));
+	}
+	#b(e) {
+		let t = this.#o;
+		this.#t?.multiple && t && t.getBoundingClientRect().width > e - 48 ? this._internals.states.add("multiple-overflow") : this._internals.states.delete("multiple-overflow");
+	}
+};
+i([v({
+	type: String,
+	reflect: !0
+})], b.prototype, "container", void 0), i([v({ type: Object })], b.prototype, "i18n", void 0), b = i([o(), s()], b);
+//#endregion
+export { b as Select };
+
+//# sourceMappingURL=select2.js.map

package/dist/select/select2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select2.js","names":["#i18nController","#select","#options","#dropdown","#menuItems","#input","#tags","#caret","#placeholderOption","#multipleSelectLabel","#selectValue","#menu","#closeDropdown","#openDropdown","#setupCustomSelectUI","#setupOverflowListener","#syncSelectValueStates","#syncOptionSelectedStates","#observers","#trackedOptions","#updateMultipleOverflow"],"sources":["../../src/select/select.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {\n  focusElementTimeout,\n  onListboxActivate,\n  useStyles,\n  i18n,\n  I18nController,\n  onChildListMutation,\n  getElementUpdate,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { Menu, MenuItem } from '@nvidia-elements/core/menu';\nimport { Dropdown } from '@nvidia-elements/core/dropdown';\nimport { Tag } from '@nvidia-elements/core/tag';\nimport styles from './select.css?inline';\n\n/**\n * @element nve-select\n * @description A select is a control that enables users to select an option from a list of options.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/select\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --border-bottom\n * @cssprop --cursor\n * @cssprop --font-weight\n * @cssprop --text-align\n * @cssprop --scroll-height\n * @cssprop --width\n * @cssprop --control-width\n * @cssprop --max-width\n * @cssprop --min-width\n * @cssprop --box-shadow\n * @cssprop --max-height\n * @cssprop --text-transform\n * @csspart tag\n * @csspart menu - The dropdown menu element\n * @csspart menu-item - The menu item elements\n * @csspart icon - The icon element\n * @csspart caret - The caret/chevron icon element\n * @csspart dropdown - The dropdown popup element\n * @slot - Select input element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\n */\n@i18n<Select>()\n@scopedRegistry()\nexport class Select extends Control {\n  static styles = useStyles([...Control.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-select',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon,\n    [Dropdown.metadata.tag]: Dropdown,\n    [Menu.metadata.tag]: Menu,\n    [MenuItem.metadata.tag]: MenuItem,\n    [Tag.metadata.tag]: Tag\n  };\n\n  /** Flat container option applies when embedding the component within another containing element */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'inline';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Updates internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  get #select() {\n    return this.input as unknown as HTMLSelectElement;\n  }\n\n  get #options() {\n    return Array.from(this.#select?.options ? this.#select.options : []);\n  }\n\n  get #dropdown() {\n    return this.shadowRoot!.querySelector<Dropdown>(Dropdown.metadata.tag);\n  }\n\n  get #menuItems() {\n    return this.shadowRoot!.querySelectorAll<MenuItem>(MenuItem.metadata.tag);\n  }\n\n  get #input() {\n    return this.shadowRoot!.querySelector<HTMLElement>('[input]');\n  }\n\n  get #tags() {\n    return this.shadowRoot!.querySelector('.tags');\n  }\n\n  get #caret() {\n    return this.shadowRoot!.querySelector<Icon>('[name=\"caret\"]');\n  }\n\n  get #placeholderOption() {\n    return this.#options.find(o => o.selected && o.hidden && o.disabled);\n  }\n\n  #observers: (MutationObserver | ResizeObserver)[] = [];\n\n  get #multipleSelectLabel() {\n    const option = this.#placeholderOption;\n    const label = option ? option.innerText : `${this.#select.selectedOptions.length} ${this.i18n.selected}`;\n    return html`<div class=\"tags-label ${option ? 'placeholder' : ''}\" aria-hidden=\"true\">${label}</div>`;\n  }\n\n  protected get prefixContent() {\n    return this.#select?.multiple && this.#select?.size === 0\n      ? html`\n    ${this.#multipleSelectLabel}\n    <div class=\"tags\">\n      ${this.#options\n        .filter(o => o.selected && o !== this.#placeholderOption)\n        .map(\n          o => html`\n      <nve-tag part=\"tag\" readonly color=\"gray-slate\" closable .value=${o.value} @click=${() => this.#selectValue(o, false)}>${o.textContent}</nve-tag>`\n        )}\n    </div>`\n      : nothing;\n  }\n\n  get #menu() {\n    return html`\n    <nve-menu part=\"menu\" role=\"listbox\" style=\"--width: 100%; --min-width: fit-content\" aria-label=${ifDefined(this.i18n.select)}>\n      ${this.#options\n        .filter(o => o !== this.#placeholderOption)\n        .map(\n          (o, i) => html`\n      <nve-menu-item part=\"menu-item\" role=\"option\" @click=${() => this.#selectValue(o, !o.selected)} ?selected=${o.selected} ?disabled=${o.disabled} ?hidden=${!!o.hidden} aria-selected=${o.selected}>\n        <slot name=\"option-${i + 1}\">\n          <nve-icon part=\"icon\" name=\"check\" size=\"sm\" aria-hidden=\"true\"></nve-icon> ${o.innerText}\n        </slot>\n      </nve-menu-item>`\n        )}\n    </nve-menu>`;\n  }\n\n  protected get suffixContent() {\n    return this.#select?.size === 0\n      ? html`\n      <nve-icon name=\"caret\" part=\"caret\" direction=\"down\" size=\"sm\" aria-hidden=\"true\"></nve-icon>\n      <nve-dropdown part=\"dropdown\" @close=${this.#closeDropdown} @open=${this.#openDropdown} hidden  .anchor=${this.#input as HTMLElement} .trigger=${this.#input as HTMLElement}  position=\"bottom\">\n        ${this.#menu}\n      </nve-dropdown>`\n      : this.#menu;\n  }\n\n  async firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    await this.updateComplete;\n    this.#setupCustomSelectUI();\n    this.#setupOverflowListener();\n    this.#syncSelectValueStates();\n    this.#syncOptionSelectedStates();\n  }\n\n  #syncSelectValueStates() {\n    this.#observers.push(\n      getElementUpdate(this.#select, 'value', () => this.requestUpdate()),\n      onChildListMutation(this.#select, () => this.requestUpdate(), { attributes: true, subtree: true }),\n      onChildListMutation(this.#select, () => this.#syncOptionSelectedStates(), { subtree: true })\n    );\n  }\n\n  #trackedOptions = new Set();\n  #syncOptionSelectedStates() {\n    this.#options.forEach(o => {\n      if (!this.#trackedOptions.has(o)) {\n        this.#trackedOptions.add(o);\n        this.#observers.push(getElementUpdate(o, 'selected', () => this.requestUpdate()));\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#observers.forEach(observer => observer.disconnect());\n  }\n\n  async updated(props: PropertyValues<this>) {\n    super.updated(props);\n    if (this.#select?.size && this.#select?.size !== 0) {\n      this._internals.states.add('size');\n      this.style.setProperty('--size', `${this.#select?.size + 0.75}`);\n    }\n\n    if (this.#select?.multiple && this.#select?.size === 0) {\n      this._internals.states.add('multiple');\n    }\n  }\n\n  #setupCustomSelectUI() {\n    if (this.#select?.size === 0) {\n      onListboxActivate(this.#select, () => {\n        this.requestUpdate(); // update menu items\n        this.#dropdown!.style.setProperty('--min-width', `${this.#input!.getBoundingClientRect().width}px`);\n        this.#dropdown!.showPopover();\n        focusElementTimeout(this.#menuItems[0] as HTMLElement);\n      });\n    }\n  }\n\n  #openDropdown() {\n    this.#dropdown!.hidden = false;\n    this.#caret!.direction = 'up';\n  }\n\n  #closeDropdown() {\n    this.#dropdown!.hidden = true;\n    this.#caret!.direction = 'down';\n  }\n\n  #setupOverflowListener() {\n    const observer = new ResizeObserver(entries => this.#updateMultipleOverflow(entries[0]!.contentRect.width));\n    this.#observers.push(observer);\n    observer.observe(this.#input!);\n  }\n\n  async #selectValue(option: HTMLOptionElement, selected: boolean) {\n    if (this.#select.multiple || (!this.#select.multiple && option.value !== this.#select.value)) {\n      option.selected = selected;\n    }\n\n    // native select only the first selected option determines the select input value\n    if (this.#select.selectedOptions.length < 1) {\n      this.#select.value = selected ? option.value : '';\n    }\n\n    this.#select.dispatchEvent(new Event('input', { bubbles: true }));\n    this.#select.dispatchEvent(new Event('change', { bubbles: true }));\n    this.requestUpdate();\n\n    if (!this.#select.multiple && this.#dropdown) {\n      this.#dropdown.hidePopover();\n    } else {\n      await this.updateComplete;\n      this.#updateMultipleOverflow(this.#input!.getBoundingClientRect().width);\n    }\n  }\n\n  #updateMultipleOverflow(width: number) {\n    const tags = this.#tags;\n    if (this.#select?.multiple && tags && tags.getBoundingClientRect().width > width - 48) {\n      this._internals.states.add('multiple-overflow');\n    } else {\n      this._internals.states.delete('multiple-overflow');\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/skeleton/define.d.ts

@@ -0,0 +1,6 @@
+import { Skeleton } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-skeleton': Skeleton;
+    }
+}

package/dist/skeleton/define.js

@@ -0,0 +1,7 @@
+import { define as e } from "../internal/utils/dom.js";
+import { Skeleton as t } from "./skeleton2.js";
+//#region src/skeleton/define.ts
+e(t);
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/skeleton/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/skeleton/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 { Skeleton } from '@nvidia-elements/core/skeleton';\n\ndefine(Skeleton);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-skeleton': Skeleton;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,EAAS"}

package/dist/skeleton/index.d.ts

@@ -0,0 +1 @@
+export * from './skeleton.js';

package/dist/skeleton/index.js

@@ -0,0 +1,2 @@
+import { Skeleton as e } from "./skeleton2.js";
+export { e as Skeleton };

package/dist/skeleton/skeleton.d.ts

@@ -0,0 +1,31 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * @element nve-skeleton
+ * @description A loading placeholder component that displays animated placeholder shapes while content loads.
+ * @since 1.44.0
+ * @entrypoint \@nvidia-elements/core/skeleton
+ * @slot - default content slot
+ * @cssprop --background
+ * @cssprop --border-radius
+ * @cssprop --min-height
+ * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live
+ */
+export declare class Skeleton extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    /** The effect of the skeleton */
+    effect: 'shimmer' | 'pulse';
+    /** The shape of the skeleton */
+    shape: 'round' | 'pill';
+    /** Whether the skeleton hides its content */
+    hidden: boolean;
+    /** @private */
+    _internals: ElementInternals;
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+    updated(props: PropertyValues<this>): void;
+}

package/dist/skeleton/skeleton.examples.js

@@ -0,0 +1,6 @@
+//#region src/skeleton/skeleton.examples.ts
+var e = "";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=skeleton.examples.js.map

package/dist/skeleton/skeleton.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.examples.js","names":[],"sources":["../../src/skeleton/skeleton.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/skeleton/define.js';\n\nexport default {\n  title: 'Elements/Skeleton',\n  component: 'nve-skeleton',\n};\n\n/**\n * @summary Basic skeleton component for text content. Placeholder lines appear while content loads.\n */\nexport const Default = {\n  render: () => html`\n<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton style=\"width: 90%\"></nve-skeleton>\n  <nve-skeleton style=\"width: 80%\"></nve-skeleton>\n</div>`\n};\n\n/**\n * @summary Skeleton loading effects including pulse and shimmer animations. Use pulse for subtle breathing motion or shimmer for a scanning highlight that conveys active content loading.\n */\nexport const Effect = {\n  render: () => html`\n<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton effect=\"pulse\"></nve-skeleton>\n  <nve-skeleton effect=\"shimmer\"></nve-skeleton>\n</div>`\n}\n\n/**\n * @summary Skeleton shape variants including default rectangle, pill, and round. Use pill for button or tag placeholders and round for avatar or icon placeholders to match the final content shape.\n */\nexport const Shape = {\n  render: () => html`\n<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton shape=\"pill\"></nve-skeleton>\n  <nve-skeleton shape=\"round\" style=\"width: 40px; height: 40px;\"></nve-skeleton>\n</div>`\n}\n\n/**\n * @summary Skeleton with slotted content that automatically hides the placeholder when real content arrives. Use to wrap lazy-loaded content so the skeleton disappears once data loads without manual state management.\n */\nexport const Slotted = {\n  render: () => html`\n<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton effect=\"shimmer\">slotting content will hide the skeleton</nve-skeleton>\n  <nve-skeleton effect=\"shimmer\">  </nve-skeleton>\n</div>`\n}\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/skeleton/skeleton.examples.json

@@ -0,0 +1,42 @@
+{
+  "element": "nve-skeleton",
+  "entrypoint": "@nvidia-elements/core/skeleton/skeleton.examples.json",
+  "items": [
+    {
+      "id": "core-skeleton_default",
+      "name": "Default",
+      "template": "<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton style=\"width: 90%\"></nve-skeleton>\n  <nve-skeleton style=\"width: 80%\"></nve-skeleton>\n</div>\n",
+      "summary": "Basic skeleton component for text content. Placeholder lines appear while content loads.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-skeleton_effect",
+      "name": "Effect",
+      "template": "<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton effect=\"pulse\"></nve-skeleton>\n  <nve-skeleton effect=\"shimmer\"></nve-skeleton>\n</div>\n",
+      "summary": "Skeleton loading effects including pulse and shimmer animations. Use pulse for subtle breathing motion or shimmer for a scanning highlight that conveys active content loading.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-skeleton_shape",
+      "name": "Shape",
+      "template": "<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton shape=\"pill\"></nve-skeleton>\n  <nve-skeleton shape=\"round\" style=\"width: 40px; height: 40px\"></nve-skeleton>\n</div>\n",
+      "summary": "Skeleton shape variants including default rectangle, pill, and round. Use pill for button or tag placeholders and round for avatar or icon placeholders to match the final content shape.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-skeleton_slotted",
+      "name": "Slotted",
+      "template": "<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton effect=\"shimmer\">slotting content will hide the skeleton</nve-skeleton>\n  <nve-skeleton effect=\"shimmer\"> </nve-skeleton>\n</div>\n",
+      "summary": "Skeleton with slotted content that automatically hides the placeholder when real content arrives. Use to wrap lazy-loaded content so the skeleton disappears once data loads without manual state management.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    }
+  ]
+}

package/dist/skeleton/skeleton.js

@@ -0,0 +1,6 @@
+//#region src/skeleton/skeleton.css?inline
+var e = ":host{--background: var(--nve-sys-layer-container-background);--min-height: var(--nve-ref-size-400);--border-radius: var(--nve-ref-border-radius-xs);display:block;width:100%;height:100%;position:relative}[internal-host]{background:var(--background);min-height:var(--min-height);border-radius:var(--border-radius);height:100%;width:100%}:host([shape=\"round\"]){--border-radius: var(--nve-ref-border-radius-full)}:host([shape=\"pill\"]){--border-radius: var(--nve-ref-border-radius-lg)}:host([effect=\"shimmer\"]) [internal-host]{animation:shimmer calc(var(--nve-ref-animation-duration-400) * 4);animation-iteration-count:infinite;background:linear-gradient(to right,var(--background) 5%,color-mix(in srgb,var(--background),var(--nve-sys-interaction-state-mix) 5%) 25%,var(--background) 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}:host([effect=\"pulse\"]) [internal-host]{animation:calc(var(--nve-ref-animation-duration-400) * 2) ease-in-out var(--nve-ref-animation-duration-300) infinite normal none running pulse}@keyframes pulse{0%{opacity:1}50%{opacity:var(--nve-ref-opacity-500)}to{opacity:1}}:host(:state(slotted)){display:contents}:host(:state(slotted)) [internal-host]{display:contents;background:none;min-height:0;animation:none}:host(:state(slotted)) .animate{display:none}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=skeleton.js.map

package/dist/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/skeleton/skeleton.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  --background: var(--nve-sys-layer-container-background);\n  --min-height: var(--nve-ref-size-400);\n  --border-radius: var(--nve-ref-border-radius-xs);\n  display: block;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n[internal-host] {\n  background: var(--background);\n  min-height: var(--min-height);\n  border-radius: var(--border-radius);\n  height: 100%;\n  width: 100%;\n}\n\n:host([shape='round']) {\n  --border-radius: var(--nve-ref-border-radius-full);\n}\n\n:host([shape='pill']) {\n  --border-radius: var(--nve-ref-border-radius-lg);\n}\n\n:host([effect='shimmer']) [internal-host] {\n  animation: shimmer calc(var(--nve-ref-animation-duration-400) * 4);\n  animation-iteration-count: infinite;\n  background: linear-gradient(\n    to right,\n    var(--background) 5%,\n    color-mix(in srgb, var(--background), var(--nve-sys-interaction-state-mix) 5%) 25%,\n    var(--background) 35%\n  );\n  background-size: 1000px 100%;\n}\n\n@keyframes shimmer {\n  from {\n    background-position: -1000px 0;\n  }\n\n  to {\n    background-position: 1000px 0;\n  }\n}\n\n:host([effect='pulse']) [internal-host] {\n  animation: calc(var(--nve-ref-animation-duration-400) * 2) ease-in-out var(--nve-ref-animation-duration-300) infinite\n    normal none running pulse;\n}\n\n@keyframes pulse {\n  0% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: var(--nve-ref-opacity-500);\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n/* if slotted content is provided hide the skeleton */\n:host(:state(slotted)) {\n  display: contents;\n}\n\n:host(:state(slotted)) [internal-host] {\n  display: contents;\n  background: none;\n  min-height: 0;\n  animation: none;\n}\n\n:host(:state(slotted)) .animate {\n  display: none;\n}\n"],"mappings":""}

package/dist/skeleton/skeleton2.js

@@ -0,0 +1,47 @@
+import { attachInternals as e } from "../internal/utils/a11y.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { useStyles as n } from "../internal/styles/index.js";
+import r from "./skeleton.js";
+import { LitElement as i, html as a } from "lit";
+import { property as o } from "lit/decorators/property.js";
+//#region src/skeleton/skeleton.ts
+var s = class extends i {
+	constructor(...e) {
+		super(...e), this.hidden = !1;
+	}
+	static {
+		this.styles = n([r]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-skeleton",
+			version: "0.0.3"
+		};
+	}
+	render() {
+		return a`<div internal-host><div class="animate"></div><slot @slotchange="${this.#e}"></slot></div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), e(this), this._internals.ariaBusy = "true";
+	}
+	updated(e) {
+		super.updated(e), this._internals.ariaBusy = `${!this.hidden}`;
+	}
+	#e(e) {
+		e.target.assignedNodes().some((e) => e.nodeType === Node.ELEMENT_NODE || e.nodeType === Node.TEXT_NODE && e.textContent?.trim() !== "") ? this._internals.states.add("slotted") : this._internals.states.delete("slotted");
+	}
+};
+t([o({
+	type: String,
+	reflect: !0
+})], s.prototype, "effect", void 0), t([o({
+	type: String,
+	reflect: !0
+})], s.prototype, "shape", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "hidden", void 0);
+//#endregion
+export { s as Skeleton };
+
+//# sourceMappingURL=skeleton2.js.map

package/dist/skeleton/skeleton2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton2.js","names":["#slotchange"],"sources":["../../src/skeleton/skeleton.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { attachInternals, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './skeleton.css?inline';\n\n/**\n * @element nve-skeleton\n * @description A loading placeholder component that displays animated placeholder shapes while content loads.\n * @since 1.44.0\n * @entrypoint \\@nvidia-elements/core/skeleton\n * @slot - default content slot\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --min-height\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live\n */\nexport class Skeleton extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-skeleton',\n    version: '0.0.0'\n  };\n\n  /** The effect of the skeleton */\n  @property({ type: String, reflect: true }) effect: 'shimmer' | 'pulse';\n\n  /** The shape of the skeleton */\n  @property({ type: String, reflect: true }) shape: 'round' | 'pill';\n\n  /** Whether the skeleton hides its content */\n  @property({ type: Boolean, reflect: true }) hidden = false;\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host>\n        <div class=\"animate\"></div>\n        <slot @slotchange=${this.#slotchange}></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.ariaBusy = 'true';\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this._internals.ariaBusy = `${!this.hidden}`;\n  }\n\n  #slotchange(event: Event) {\n    const target = event.target as HTMLSlotElement;\n    const hasContent = target\n      .assignedNodes()\n      .some(\n        node =>\n          node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '')\n      );\n\n    if (hasContent) {\n      this._internals.states.add('slotted');\n    } else {\n      this._internals.states.delete('slotted');\n    }\n  }\n}\n"],"mappings":";;;;;;;AAmBA,IAAa,IAAb,cAA8B,EAAW;;6BAec;;;gBAdrC,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACV;;CAcD,SAAS;AACP,SAAO,CAAI,oEAGa,MAAA,EAAiB;;CAK3C,oBAAoB;AAGlB,EAFA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,WAAW;;CAG7B,QAAQ,GAA6B;AAEnC,EADA,MAAM,QAAQ,EAAM,EACpB,KAAK,WAAW,WAAW,GAAG,CAAC,KAAK;;CAGtC,GAAY,GAAc;AASxB,EARe,EAAM,OAElB,eAAe,CACf,MACC,MACE,EAAK,aAAa,KAAK,gBAAiB,EAAK,aAAa,KAAK,aAAa,EAAK,aAAa,MAAM,KAAK,GAC5G,GAGD,KAAK,WAAW,OAAO,IAAI,UAAU,GAErC,KAAK,WAAW,OAAO,OAAO,UAAU;;;GA3C3C,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAGzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,SAAA,KAAA,EAAA,KAGzC,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA"}

package/dist/sort-button/define.d.ts

@@ -0,0 +1,6 @@
+import { SortButton } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-sort-button': SortButton;
+    }
+}