@nvidia-elements/core 0.0.10 → 0.0.11

package/dist/progressive-filter-chip/progressive-filter-chip2.js

@@ -23,7 +23,7 @@ var b = class extends h {
 	static {
 		this.metadata = {
 			tag: "nve-progressive-filter-chip",
-			version: "0.0.10"
+			version: "0.0.11"
 		};
 	}
 	static {

package/dist/pulse/pulse.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/pulse/pulse.examples.json",
   "items": [
     {
-      "id": "core-pulse_default",
+      "id": "pulse",
       "name": "Default",
       "template": "<div nve-layout=\"row align:center\">\n  <nve-pulse aria-label=\"pulse component\"></nve-pulse>\n</div>\n",
       "summary": "Animated pulse indicator with aria-label for accessibility. Use to draw attention to live updates, active connections, or real-time status.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-pulse_status",
+      "id": "pulse-status",
       "name": "Status",
       "template": "<div nve-layout=\"row gap:sm pad:md\">\n  <nve-pulse></nve-pulse>\n  <nve-pulse status=\"accent\"></nve-pulse>\n  <nve-pulse status=\"warning\"></nve-pulse>\n  <nve-pulse status=\"danger\"></nve-pulse>\n</div>\n",
       "summary": "Pulse status variants for different severity levels. Use accent for highlights, warning for caution states, and danger for critical alerts.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-pulse_size",
+      "id": "pulse-size",
       "name": "Size",
       "template": "<div nve-layout=\"row align:center\">\n  <nve-pulse size=\"xs\"></nve-pulse>\n  <nve-pulse size=\"sm\"></nve-pulse>\n  <nve-pulse size=\"md\"></nve-pulse>\n  <nve-pulse size=\"lg\"></nve-pulse>\n</div>\n",
       "summary": "Pulse size variants from extra-small to large. Choose sizes based on context—smaller for inline indicators, larger for prominent status displays.",
@@ -32,7 +32,7 @@
       ]
     },
     {
-      "id": "core-pulse_inline",
+      "id": "pulse-inline",
       "name": "Inline",
       "template": "<div nve-layout=\"row gap:xs align:center\">\n  <nve-pulse status=\"danger\"></nve-pulse>\n  Live Status\n</div>\n",
       "summary": "Pulse used inline with text labels. Ideal for status indicators in lists, tables, or headers to show real-time or live states.",

package/dist/pulse/pulse2.js

@@ -13,7 +13,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-pulse",
-			version: "0.0.10"
+			version: "0.0.11"
 		};
 	}
 	static {

package/dist/radio/radio-group2.js

@@ -12,7 +12,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-radio-group",
-			version: "0.0.10",
+			version: "0.0.11",
 			children: [
 				"label",
 				"nve-control-message",

package/dist/radio/radio.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/radio/radio.examples.json",
   "items": [
     {
-      "id": "core-radio_default",
+      "id": "radio",
       "name": "Default",
       "template": "<nve-radio-group>\n  <label>label</label>\n  <nve-radio>\n    <label>radio 1</label>\n    <input type=\"radio\" checked />\n  </nve-radio>\n  <nve-radio>\n    <label>radio 2</label>\n    <input type=\"radio\" />\n  </nve-radio>\n  <nve-radio>\n    <label>radio 3</label>\n    <input type=\"radio\" />\n  </nve-radio>\n  <nve-control-message>message</nve-control-message>\n</nve-radio-group>\n",
       "summary": "Basic radio button group for mutually exclusive single-choice selection from many options.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-radio_vertical-group",
+      "id": "radio-vertical-group",
       "name": "VerticalGroup",
       "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group>\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group>\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group>\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group>\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n",
       "summary": "Radio groups with vertical layout including validation states for disabled, success, and error.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-radio_vertical-inline-group",
+      "id": "radio-vertical-inline-group",
       "name": "VerticalInlineGroup",
       "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n",
       "summary": "Radio groups with vertical inline layout for compact vertical stacking with inline label positioning.",
@@ -32,7 +32,7 @@
       ]
     },
     {
-      "id": "core-radio_horizontal-group",
+      "id": "radio-horizontal-group",
       "name": "HorizontalGroup",
       "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group layout=\"horizontal\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n",
       "summary": "Radio groups with horizontal layout for options arranged in a row, ideal for limited choices.",
@@ -43,7 +43,7 @@
       ]
     },
     {
-      "id": "core-radio_horizontal-inline-group",
+      "id": "radio-horizontal-inline-group",
       "name": "HorizontalInlineGroup",
       "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n",
       "summary": "Radio groups with horizontal inline layout for space-efficient horizontal arrangement with inline labels.",

package/dist/radio/radio2.js

@@ -15,7 +15,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-radio",
-			version: "0.0.10",
+			version: "0.0.11",
 			children: [
 				"label",
 				"input",

package/dist/range/range.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/range/range.examples.json",
   "items": [
     {
-      "id": "core-range_default",
+      "id": "range",
       "name": "Default",
       "template": "<nve-range>\n  <label>label</label>\n  <input type=\"range\" />\n  <nve-control-message>message</nve-control-message>\n</nve-range>\n",
       "summary": "Basic range component for numeric value selection, providing a simple slider interface for adjusting values within a defined range.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-range_datalist",
+      "id": "range-datalist",
       "name": "Datalist",
       "template": "<nve-range>\n  <label>label</label>\n  <input type=\"range\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"0\">0</option>\n    <option value=\"25\"></option>\n    <option value=\"50\"></option>\n    <option value=\"75\"></option>\n    <option value=\"100\"></option>\n  </datalist>\n</nve-range>\n",
       "summary": "Range with datalist for visual tick marks and labeled values, enabling users to see available options and precisely select predetermined values.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-range_datalist-with-steps",
+      "id": "range-datalist-with-steps",
       "name": "DatalistWithSteps",
       "template": "<nve-range>\n  <label>label</label>\n  <input type=\"range\" min=\"0\" max=\"100\" step=\"10\" />\n  <datalist>\n    <option value=\"0\">0</option>\n    <option value=\"10\">10</option>\n    <option value=\"20\">20</option>\n    <option value=\"30\">30</option>\n    <option value=\"40\">40</option>\n    <option value=\"50\">50</option>\n    <option value=\"60\">60</option>\n    <option value=\"70\">70</option>\n    <option value=\"80\">80</option>\n    <option value=\"90\">90</option>\n    <option value=\"100\">100</option>\n  </datalist>\n</nve-range>\n",
       "summary": "Range with combined step increments and datalist labels, ensuring precise value selection with clear visual indicators at each valid step position.",
@@ -30,7 +30,7 @@
       "tags": []
     },
     {
-      "id": "core-range_step",
+      "id": "range-step",
       "name": "Step",
       "template": "<nve-range>\n  <label>label</label>\n  <input type=\"range\" min=\"0\" max=\"100\" step=\"20\" />\n  <nve-control-message>message</nve-control-message>\n</nve-range>\n",
       "summary": "Range with defined step increments for discrete value selection, constraining the slider to specific intervals for controlled input precision.",
@@ -39,7 +39,7 @@
       "tags": []
     },
     {
-      "id": "core-range_vertical",
+      "id": "range-vertical",
       "name": "Vertical",
       "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-range>\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-range>\n    <label>disabled</label>\n    <input type=\"range\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-range>\n    <label>success</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-range>\n  <nve-range>\n    <label>error</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-range>\n</div>\n",
       "summary": "Vertical layout configuration for stacked form arrangements, displaying label, slider, and message in a column format with support for states including disabled, success, and error feedback.",
@@ -50,7 +50,7 @@
       ]
     },
     {
-      "id": "core-range_horizontal",
+      "id": "range-horizontal",
       "name": "Horizontal",
       "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-range layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-range layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"range\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-range layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-range>\n  <nve-range layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-range>\n</div>\n",
       "summary": "Horizontal layout configuration for inline form arrangements, positioning label and slider side-by-side for compact displays with support for states including disabled, success, and error feedback.",
@@ -61,7 +61,7 @@
       ]
     },
     {
-      "id": "core-range_orientation-vertical",
+      "id": "range-orientation-vertical",
       "name": "OrientationVertical",
       "template": "<div style=\"height: 200px\">\n  <nve-range orientation=\"vertical\">\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n</div>\n",
       "summary": "Vertical range slider for space-constrained layouts or controls where bottom-to-top value selection is intuitive, such as volume or equalizer adjustments.",
@@ -70,7 +70,7 @@
       "tags": []
     },
     {
-      "id": "core-range_orientation-vertical-datalist",
+      "id": "range-orientation-vertical-datalist",
       "name": "OrientationVerticalDatalist",
       "template": "<div style=\"height: 250px\">\n  <nve-range orientation=\"vertical\">\n    <label>label</label>\n    <input type=\"range\" />\n    <datalist>\n      <option value=\"0\">0</option>\n      <option value=\"25\">25</option>\n      <option value=\"50\">50</option>\n      <option value=\"75\">75</option>\n      <option value=\"100\">100</option>\n    </datalist>\n  </nve-range>\n</div>\n",
       "summary": "Vertical range slider with datalist tick marks and labeled values for precise value selection in vertical layouts.",
@@ -79,7 +79,7 @@
       "tags": []
     },
     {
-      "id": "core-range_custom-styles",
+      "id": "range-custom-styles",
       "name": "CustomStyles",
       "template": "<nve-range\n  style=\"\n    --background: #76b900;\n    --track-background: red;\n    --track-height: 4px;\n    --track-border-radius: 16px;\n    --thumb-background: black;\n    --thumb-border: inset 0 0 0 2px white;\n    --thumb-width: 14px;\n    --thumb-height: 14px;\n  \"\n>\n  <input type=\"range\" aria-label=\"range\" />\n</nve-range>\n",
       "summary": "Range component can have its visual styles overwritten to achieve custom themes.",

package/dist/range/range2.js

@@ -17,7 +17,7 @@ var d = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-range",
-			version: "0.0.10"
+			version: "0.0.11"
 		};
 	}
 	connectedCallback() {

package/dist/resize-handle/resize-handle.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/resize-handle/resize-handle.examples.json",
   "items": [
     {
-      "id": "core-resize-handle_default",
+      "id": "resize-handle",
       "name": "Default",
       "template": "<nve-resize-handle></nve-resize-handle>\n",
       "summary": "Basic horizontal resize handle for draggable panel dividers and split pane interfaces.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-resize-handle_vertical",
+      "id": "resize-handle-vertical",
       "name": "Vertical",
       "template": "<div style=\"height: 200px\">\n  <nve-resize-handle orientation=\"vertical\"></nve-resize-handle>\n</div>\n",
       "summary": "Vertical resize handle for side-by-side panel layouts and horizontal split panes.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-resize-handle_split-horizontal",
+      "id": "resize-handle-split-horizontal",
       "name": "SplitHorizontal",
       "template": "<section\n  id=\"split-horizontal-demo\"\n  style=\"\n    display: grid;\n    width: 250px;\n    height: 250px;\n    grid-template-rows: 1fr auto 1fr;\n    border: 1px solid var(--nve-ref-border-color);\n  \"\n>\n  <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  <nve-resize-handle min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n  <div></div>\n</section>\n<script type=\"module\">\n  const handle = document.querySelector(\"#split-horizontal-demo nve-resize-handle\");\n  const split = document.querySelector(\"#split-horizontal-demo\");\n  handle.addEventListener(\"input\", (e) => (split.style.gridTemplateRows = \"1fr auto \" + e.target.value + \"px\"));\n</script>\n",
       "summary": "Horizontal split pane with draggable divider that adjusts top and bottom panel heights.",
@@ -30,7 +30,7 @@
       "tags": []
     },
     {
-      "id": "core-resize-handle_split-vertical",
+      "id": "resize-handle-split-vertical",
       "name": "SplitVertical",
       "template": "<section\n  id=\"split-vertical-demo\"\n  style=\"\n    display: grid;\n    width: 250px;\n    height: 250px;\n    grid-template-columns: 1fr auto 1fr;\n    border: 1px solid var(--nve-ref-border-color);\n  \"\n>\n  <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  <nve-resize-handle orientation=\"vertical\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n  <div></div>\n</section>\n<script type=\"module\">\n  const handle = document.querySelector(\"#split-vertical-demo nve-resize-handle\");\n  const split = document.querySelector(\"#split-vertical-demo\");\n  handle.addEventListener(\"input\", (e) => (split.style.gridTemplateColumns = e.target.value + \"px auto 1fr\"));\n</script>\n",
       "summary": "Vertical split pane with draggable divider that adjusts left and right panel widths.",
@@ -39,7 +39,7 @@
       "tags": []
     },
     {
-      "id": "core-resize-handle_form",
+      "id": "resize-handle-form",
       "name": "Form",
       "template": "<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n  <section\n    style=\"\n      display: grid;\n      width: 250px;\n      height: 250px;\n      grid-template-rows: 1fr auto 1fr;\n      border: 1px solid var(--nve-ref-border-color);\n    \"\n  >\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n  <nve-button>submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"#form-demo\");\n  const split = document.querySelector(\"#form-demo section\");\n  const handle = document.querySelector(\"#form-demo nve-resize-handle\");\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    console.log(Object.fromEntries(new FormData(form)));\n    console.log(handle.form);\n  });\n  handle.addEventListener(\"change\", (e) => {\n    console.log(\"change\", e.target.value);\n  });\n  handle.addEventListener(\"input\", (e) => {\n    console.log(\"input\", e.target.value);\n    split.style.gridTemplateRows = \"1fr auto \" + e.target.value + \"px\";\n  });\n</script>\n",
       "summary": "Resize handle as a form control with name attribute for submitting resize values.",
@@ -48,7 +48,7 @@
       "tags": []
     },
     {
-      "id": "core-resize-handle_prevent-default",
+      "id": "resize-handle-prevent",
       "name": "PreventDefault",
       "template": "<form id=\"prevent-default-demo\" nve-layout=\"column gap:lg\">\n  <section\n    style=\"\n      display: grid;\n      width: 250px;\n      height: 250px;\n      grid-template-rows: 1fr auto 1fr;\n      border: 1px solid var(--nve-ref-border-color);\n    \"\n  >\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n</form>\n<script type=\"module\">\n  const split = document.querySelector(\"#prevent-default-demo section\");\n  const handle = document.querySelector(\"#prevent-default-demo nve-resize-handle\");\n  handle.addEventListener(\"toggle\", (e) => {\n    e.preventDefault();\n    console.log(\"toggle defaultPrevented:\", e.defaultPrevented);\n  });\n  handle.addEventListener(\"input\", (e) => {\n    split.style.gridTemplateRows = \"1fr auto \" + e.target.value + \"px\";\n  });\n</script>\n",
       "summary": "Resize handle with prevented default toggle to disable snap-to-boundary on double-click. Use when the default collapse/expand behavior conflicts with custom resize constraints or when you need full control over toggle logic.",
@@ -57,7 +57,7 @@
       "tags": []
     },
     {
-      "id": "core-resize-handle_line-width",
+      "id": "resize-handle-line-width",
       "name": "LineWidth",
       "template": "<div style=\"height: 200px\">\n  <nve-resize-handle orientation=\"vertical\" style=\"--line-width: 6px\"></nve-resize-handle>\n</div>\n",
       "summary": "Custom line width styling for resize handle visibility using CSS custom property.",

package/dist/resize-handle/resize-handle2.js

@@ -18,7 +18,7 @@ var u = class extends l(a) {
 	static {
 		this.metadata = {
 			tag: "nve-resize-handle",
-			version: "0.0.10",
+			version: "0.0.11",
 			valueSchema: { type: "number" }
 		};
 	}

package/dist/search/search.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/search/search.examples.json",
   "items": [
     {
-      "id": "core-search_default",
+      "id": "search",
       "name": "Default",
       "template": "<nve-search>\n  <label>label</label>\n  <input type=\"search\" />\n  <nve-control-message>message</nve-control-message>\n</nve-search>\n",
       "summary": "Basic search input with label and message for query entry and filtering data.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-search_inline",
+      "id": "search-inline",
       "name": "Inline",
       "template": "<nve-search rounded>\n  <input type=\"search\" aria-label=\"search\" placeholder=\"search\" />\n</nve-search>\n",
       "summary": "Rounded search input without visible label for compact inline placement in headers or toolbars.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-search_datalist",
+      "id": "search-datalist",
       "name": "Datalist",
       "template": "<nve-search rounded>\n  <input type=\"search\" aria-label=\"search\" placeholder=\"search\" />\n  <datalist>\n    <option value=\"search result 1\"></option>\n    <option value=\"search result 2\"></option>\n    <option value=\"search result 3\"></option>\n  </datalist>\n</nve-search>\n",
       "summary": "Search input with datalist providing autocomplete suggestions for quick query selection from recent searches.",
@@ -30,7 +30,7 @@
       "tags": []
     },
     {
-      "id": "core-search_vertical",
+      "id": "search-vertical",
       "name": "Vertical",
       "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-search>\n    <label>label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n  <nve-search>\n    <label>disabled</label>\n    <input type=\"search\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n  <nve-search>\n    <label>success</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-search>\n  <nve-search>\n    <label>error</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-search>\n</div>\n",
       "summary": "Search inputs with vertical layout including validation states for disabled, success, and error.",
@@ -41,7 +41,7 @@
       ]
     },
     {
-      "id": "core-search_horizontal",
+      "id": "search-horizontal",
       "name": "Horizontal",
       "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-search layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n  <nve-search layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"search\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n  <nve-search layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-search>\n  <nve-search layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-search>\n</div>\n",
       "summary": "Search inputs with horizontal layout showing validation states for inline forms and compact layouts.",

package/dist/search/search2.js

@@ -22,7 +22,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-search",
-			version: "0.0.10"
+			version: "0.0.11"
 		};
 	}
 	static {

package/dist/select/select.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/select/select.examples.json",
   "items": [
     {
-      "id": "core-select_default",
+      "id": "select",
       "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.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-select_custom-option-render",
+      "id": "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.",
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "id": "core-select_prefix",
+      "id": "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.",
@@ -32,7 +32,7 @@
       "tags": []
     },
     {
-      "id": "core-select_flat",
+      "id": "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.",
@@ -41,7 +41,7 @@
       "tags": []
     },
     {
-      "id": "core-select_vertical",
+      "id": "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.",
@@ -52,7 +52,7 @@
       ]
     },
     {
-      "id": "core-select_horizontal",
+      "id": "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.",
@@ -63,7 +63,7 @@
       ]
     },
     {
-      "id": "core-select_multiple",
+      "id": "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.",
@@ -72,7 +72,7 @@
       "tags": []
     },
     {
-      "id": "core-select_multiple-disabled",
+      "id": "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.",
@@ -81,7 +81,7 @@
       "tags": []
     },
     {
-      "id": "core-select_multiple-overflow",
+      "id": "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.",
@@ -90,7 +90,7 @@
       "tags": []
     },
     {
-      "id": "core-select_size",
+      "id": "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.",
@@ -99,7 +99,7 @@
       "tags": []
     },
     {
-      "id": "core-select_height",
+      "id": "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.",
@@ -110,7 +110,7 @@
       ]
     },
     {
-      "id": "core-select_fit-text",
+      "id": "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.",
@@ -121,7 +121,7 @@
       ]
     },
     {
-      "id": "core-select_fit-content",
+      "id": "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.",
@@ -132,7 +132,7 @@
       ]
     },
     {
-      "id": "core-select_placeholder",
+      "id": "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.",
@@ -141,7 +141,7 @@
       "tags": []
     },
     {
-      "id": "core-select_placeholder-multiple",
+      "id": "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.",
@@ -150,7 +150,7 @@
       "tags": []
     },
     {
-      "id": "core-select_disabled",
+      "id": "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.",
@@ -159,7 +159,7 @@
       "tags": []
     },
     {
-      "id": "core-select_viewport-overflow",
+      "id": "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",
@@ -170,7 +170,7 @@
       ]
     },
     {
-      "id": "core-select_performance",
+      "id": "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",

package/dist/select/select2.js

@@ -26,7 +26,7 @@ var b = class extends u {
 	static {
 		this.metadata = {
 			tag: "nve-select",
-			version: "0.0.10"
+			version: "0.0.11"
 		};
 	}
 	static {

package/dist/skeleton/skeleton.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/skeleton/skeleton.examples.json",
   "items": [
     {
-      "id": "core-skeleton_default",
+      "id": "skeleton",
       "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.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-skeleton_effect",
+      "id": "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.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-skeleton_shape",
+      "id": "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.",
@@ -32,7 +32,7 @@
       ]
     },
     {
-      "id": "core-skeleton_slotted",
+      "id": "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.",