@nvidia-elements/core 0.0.9 → 0.0.11

package/dist/drawer/drawer.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/drawer/drawer.examples.json",
   "items": [
     {
-      "id": "core-drawer_default",
+      "id": "drawer",
       "name": "Default",
       "template": "<nve-drawer id=\"drawer\" closable modal>\n  <nve-drawer-header>\n    <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<nve-button popovertarget=\"drawer\">button</nve-button>\n",
       "summary": "Basic modal drawer with header, content, and footer sections. Use for displaying detailed information, forms, or settings that need more space than a dialog, typically sliding in from the side of the screen.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-drawer_visual",
+      "id": "drawer-visual",
       "name": "Visual",
       "template": "<nve-drawer closable>\n  <nve-drawer-header>\n    <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n",
       "summary": "Complete drawer layout pattern with header, scrollable content, and footer sections for consistent drawer structure.",
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "id": "core-drawer_scroll",
+      "id": "drawer-scroll",
       "name": "Scroll",
       "template": "<nve-drawer closable>\n  <nve-drawer-header>\n    <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\" style=\"height: 2500px\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n",
       "summary": "Drawer with scrollable content for overflow behavior. Use when drawer content exceeds viewport height, ensuring header and footer remain fixed while content scrolls independently.",
@@ -34,7 +34,7 @@
       ]
     },
     {
-      "id": "core-drawer_events",
+      "id": "drawer-events",
       "name": "Events",
       "template": "<nve-drawer id=\"drawer\" closable modal position=\"right\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n</nve-drawer>\n<nve-button popovertarget=\"drawer\">open</nve-button>\n<script type=\"module\">\n  const drawer = document.querySelector(\"nve-drawer\");\n  drawer.addEventListener(\"beforetoggle\", () => console.log(\"beforetoggle\"));\n  drawer.addEventListener(\"toggle\", () => console.log(\"toggle\"));\n  drawer.addEventListener(\"open\", () => console.log(\"open\"));\n  drawer.addEventListener(\"close\", () => console.log(\"close\"));\n</script>\n",
       "summary": "Event handling for drawer open, close, and toggle events. Useful for adding custom behavior when drawer state changes.",
@@ -45,7 +45,7 @@
       ]
     },
     {
-      "id": "core-drawer_small",
+      "id": "drawer-small",
       "name": "Small",
       "template": "<nve-drawer size=\"sm\" closable>\n  <nve-drawer-header>\n    <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n",
       "summary": "Small drawer size for compact side panels and quick actions. Ideal for navigation menus, filters, or supplementary information that shouldn't dominate the screen.",
@@ -56,7 +56,7 @@
       ]
     },
     {
-      "id": "core-drawer_large",
+      "id": "drawer-large",
       "name": "Large",
       "template": "<nve-drawer size=\"lg\" closable>\n  <nve-drawer-header>\n    <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n",
       "summary": "Large drawer size for comprehensive content like detailed forms or settings panels. Use when users need significant screen space for complex tasks without leaving the current page context.",
@@ -67,7 +67,7 @@
       ]
     },
     {
-      "id": "core-drawer_non-closable",
+      "id": "drawer-non-closable",
       "name": "NonClosable",
       "template": "<nve-button id=\"open-btn\">open</nve-button>\n<nve-drawer hidden modal>\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<script type=\"module\">\n  const drawer = document.querySelector(\"nve-drawer\");\n  const open = document.querySelector(\"#open-btn\");\n  const cancel = document.querySelector(\"#cancel-btn\");\n  open.addEventListener(\"click\", () => (drawer.hidden = false));\n  cancel.addEventListener(\"click\", () => (drawer.hidden = true));\n</script>\n",
       "summary": "Non-closable drawer requiring explicit user action to close. Use for critical workflows or multi-step processes where users must complete or explicitly cancel actions, preventing accidental dismissal.",
@@ -78,7 +78,7 @@
       ]
     },
     {
-      "id": "core-drawer_position",
+      "id": "drawer-position",
       "name": "Position",
       "template": "<div nve-layout=\"row align:center gap:md\">\n  <nve-button popovertarget=\"popover-top\">open top</nve-button>\n  <nve-button popovertarget=\"popover-left\">open left</nve-button>\n  <nve-button popovertarget=\"popover-right\">open right</nve-button>\n  <nve-button popovertarget=\"popover-bottom\">open bottom</nve-button>\n</div>\n<nve-drawer id=\"popover-top\" closable modal position=\"top\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Top</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\" style=\"height: 200px\">some text content in a top closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<nve-drawer id=\"popover-left\" closable modal position=\"left\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Left</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<nve-drawer id=\"popover-right\" closable modal position=\"right\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Right</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">some text content in a right closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<nve-drawer id=\"popover-bottom\" closable modal position=\"bottom\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Bottom</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\" style=\"height: 200px\">some text content in a bottom closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n",
       "summary": "Drawer positioning from all four screen edges. Use position based on content type and user workflow: right for details/settings, left for navigation, top/bottom for notifications or quick actions that span the width.",
@@ -89,7 +89,7 @@
       ]
     },
     {
-      "id": "core-drawer_legacy-position",
+      "id": "drawer-legacy-position",
       "name": "LegacyPosition",
       "template": "<div nve-layout=\"row align:center gap:md\" style=\"height: 95vh\">\n  <nve-button class=\"drawer-btn-left\">open left</nve-button>\n  <nve-button class=\"drawer-btn-right\">open right</nve-button>\n  <nve-button class=\"drawer-btn-bottom\">open bottom</nve-button>\n</div>\n<nve-drawer closable modal hidden position=\"left\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Left</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<nve-drawer closable modal hidden position=\"right\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Right</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">some text content in a right closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<nve-drawer closable modal hidden position=\"bottom\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Bottom</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">some text content in a bottom closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<script type=\"module\">\n  const leftDrawer = document.querySelector('nve-drawer[position=\"left\"]');\n  document.querySelector(\".drawer-btn-left\").addEventListener(\"click\", () => {\n    leftDrawer.position = \"left\";\n    leftDrawer.hidden = false;\n  });\n  const rightDrawer = document.querySelector('nve-drawer[position=\"right\"]');\n  document.querySelector(\".drawer-btn-right\").addEventListener(\"click\", () => {\n    rightDrawer.position = \"right\";\n    rightDrawer.hidden = false;\n  });\n  const bottomDrawer = document.querySelector('nve-drawer[position=\"bottom\"]');\n  document.querySelector(\".drawer-btn-bottom\").addEventListener(\"click\", () => {\n    bottomDrawer.position = \"bottom\";\n    bottomDrawer.hidden = false;\n  });\n  leftDrawer.addEventListener(\"close\", () => (leftDrawer.hidden = true));\n  rightDrawer.addEventListener(\"close\", () => (rightDrawer.hidden = true));\n  bottomDrawer.addEventListener(\"close\", () => (bottomDrawer.hidden = true));\n</script>\n",
       "summary": "Legacy drawer positioning with manual visibility management. Uses an older pattern with programmatic position control and event handling for backward compatibility.",
@@ -100,7 +100,7 @@
       ]
     },
     {
-      "id": "core-drawer_inline",
+      "id": "drawer-inline",
       "name": "Inline",
       "template": "<div nve-layout=\"row align:horizontal-stretch\">\n  <div nve-layout=\"column gap:md align:stretch\">\n    <nve-card style=\"height: 200px\">\n      <nve-card-content>\n        <nve-button popovertarget=\"drawer\">inline drawer</nve-button>\n      </nve-card-content>\n    </nve-card>\n    <nve-card style=\"height: 200px\"></nve-card>\n  </div>\n  <nve-drawer id=\"drawer\" closable modal inline position=\"right\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <p nve-text=\"body\">drawer content</p>\n    </nve-drawer-content>\n    <nve-drawer-footer>\n      <p nve-text=\"body\">drawer footer</p>\n    </nve-drawer-footer>\n  </nve-drawer>\n</div>\n",
       "summary": "Inline drawer constrained within a parent container rather than full viewport. Perfect for detail panels within cards or sections, maintaining context without overlaying the entire application.",
@@ -111,7 +111,7 @@
       ]
     },
     {
-      "id": "core-drawer_inline-visible",
+      "id": "drawer-inline-visible",
       "name": "InlineVisible",
       "template": "<div nve-layout=\"row align:horizontal-stretch\">\n  <div nve-layout=\"column gap:md align:stretch\">\n    <nve-card style=\"height: 200px\">\n      <nve-card-content> open inline drawer </nve-card-content>\n    </nve-card>\n    <nve-card style=\"height: 200px\"></nve-card>\n  </div>\n  <nve-drawer id=\"drawer\" inline position=\"right\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <p nve-text=\"body\">drawer content</p>\n    </nve-drawer-content>\n    <nve-drawer-footer>\n      <p nve-text=\"body\">drawer footer</p>\n    </nve-drawer-footer>\n  </nve-drawer>\n</div>\n",
       "summary": "Inline drawer in persistent open state for always-visible side panels. Use for navigation, filters, or contextual information that should remain accessible while users interact with main content.",
@@ -122,7 +122,7 @@
       ]
     },
     {
-      "id": "core-drawer_legacy-inline",
+      "id": "drawer-legacy-inline",
       "name": "LegacyInline",
       "template": "<div nve-layout=\"row align:stretch\">\n  <div nve-layout=\"column gap:md align:horizontal-stretch\">\n    <nve-card style=\"height: 200px\">\n      <nve-card-content>\n        <nve-button>open inline drawer</nve-button>\n      </nve-card-content>\n    </nve-card>\n    <nve-card style=\"height: 200px\"></nve-card>\n  </div>\n  <nve-drawer hidden closable modal inline position=\"right\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <p nve-text=\"body\">drawer content</p>\n    </nve-drawer-content>\n    <nve-drawer-footer>\n      <p nve-text=\"body\">drawer footer</p>\n    </nve-drawer-footer>\n  </nve-drawer>\n</div>\n<script type=\"module\">\n  const drawer = document.querySelector(\"nve-drawer\");\n  const open = document.querySelector(\"nve-button\");\n  open.addEventListener(\"click\", () => (drawer.hidden = false));\n  drawer.addEventListener(\"close\", () => (drawer.hidden = true));\n</script>\n",
       "summary": "Legacy inline drawer pattern with manual visibility control. Uses an older implementation for inline drawer management; prefer the modern popovertarget API for new implementations.",
@@ -133,7 +133,7 @@
       ]
     },
     {
-      "id": "core-drawer_legacy-behavior-trigger",
+      "id": "drawer-legacy-behavior-trigger",
       "name": "LegacyBehaviorTrigger",
       "template": "<nve-button id=\"drawer-btn\">open</nve-button>\n<nve-drawer behavior-trigger trigger=\"drawer-btn\" closable modal hidden position=\"right\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n",
       "summary": "Legacy behavior-trigger pattern for automatic drawer lifecycle management. Deprecated approach that auto-manages visibility and state, prefer modern popovertarget API for new implementations.",

package/dist/drawer/drawer2.js

@@ -28,7 +28,7 @@ var p = class extends u {
 	static {
 		this.metadata = {
 			tag: "nve-drawer",
-			version: "0.0.9"
+			version: "0.0.11"
 		};
 	}
 	static {

package/dist/dropdown/dropdown-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-footer",
-			version: "0.0.9",
+			version: "0.0.11",
 			parents: ["nve-dropdown"]
 		};
 	}

package/dist/dropdown/dropdown-header2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-header",
-			version: "0.0.9",
+			version: "0.0.11",
 			parents: ["nve-dropdown"]
 		};
 	}

package/dist/dropdown/dropdown.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/dropdown/dropdown.examples.json",
   "items": [
     {
-      "id": "core-dropdown_default",
+      "id": "dropdown",
       "name": "Default",
       "template": "<nve-button popovertarget=\"dropdown\">button</nve-button>\n<nve-dropdown id=\"dropdown\">dropdown content</nve-dropdown>\n",
       "summary": "Basic dropdown implementation using popovertarget attribute to connect trigger and dropdown. Useful for simple dropdown menus.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-dropdown_menu",
+      "id": "dropdown-menu",
       "name": "Menu",
       "template": "<nve-button popovertarget=\"dropdown-menu\">dropdown</nve-button>\n<nve-dropdown id=\"dropdown-menu\">\n  <nve-menu>\n    <nve-menu-item><nve-icon name=\"person\"></nve-icon> profile</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"gear\"></nve-icon> settings</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"star\"></nve-icon> favorites</nve-menu-item>\n    <nve-divider></nve-divider>\n    <nve-menu-item><nve-icon name=\"logout\"></nve-icon> logout</nve-menu-item>\n  </nve-menu>\n</nve-dropdown>\n",
       "summary": "Dropdown with popover-positioned menu for trigger-based actions. Use for context menus, settings, and user actions where content appears on demand relative to a trigger button.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-dropdown_visual",
+      "id": "dropdown-visual",
       "name": "Visual",
       "template": "<nve-dropdown anchor=\"btn\">dropdown content</nve-dropdown>\n<nve-button id=\"btn\">button</nve-button>\n",
       "summary": "Dropdown using anchor attribute to reference trigger element by ID. Alternative approach for connecting dropdowns to their triggers.",
@@ -32,7 +32,7 @@
       ]
     },
     {
-      "id": "core-dropdown_events",
+      "id": "dropdown-events",
       "name": "Events",
       "template": "<nve-dropdown id=\"dropdown\">dropdown content</nve-dropdown>\n<nve-button popovertarget=\"dropdown\">button</nve-button>\n<script type=\"module\">\n  const dropdown = document.querySelector(\"nve-dropdown\");\n  dropdown.addEventListener(\"beforetoggle\", () => console.log(\"beforetoggle\"));\n  dropdown.addEventListener(\"toggle\", () => console.log(\"toggle\"));\n  dropdown.addEventListener(\"open\", () => console.log(\"open\"));\n  dropdown.addEventListener(\"close\", () => console.log(\"close\"));\n</script>\n",
       "summary": "Event handling for dropdown open and close events. Useful for adding custom behavior when dropdown state changes.",
@@ -43,7 +43,7 @@
       ]
     },
     {
-      "id": "core-dropdown_closable",
+      "id": "dropdown-closable",
       "name": "Closable",
       "template": "<nve-dropdown anchor=\"btn\" closable>\n  <h3 nve-text=\"label\">Title</h3>\n  <p nve-text=\"body\">some text content in a closable dropdown</p>\n</nve-dropdown>\n<nve-button id=\"btn\">button</nve-button>\n",
       "summary": "Dropdown with closable attribute that allows users to dismiss the dropdown by clicking close button.",
@@ -54,7 +54,7 @@
       ]
     },
     {
-      "id": "core-dropdown_layout",
+      "id": "dropdown-layout",
       "name": "Layout",
       "template": "<nve-dropdown anchor=\"btn\">\n  <nve-dropdown-header>\n    <h3 nve-text=\"heading semibold sm\">heading</h3>\n  </nve-dropdown-header>\n  <p nve-text=\"body\">some text content in a closable dropdown</p>\n  <nve-dropdown-footer>\n    <p nve-text=\"body\">footer</p>\n  </nve-dropdown-footer>\n</nve-dropdown>\n<nve-button id=\"btn\">button</nve-button>\n",
       "summary": "Dropdown with structured content using header and footer sections. Perfect for complex dropdown content that needs clear visual hierarchy.",
@@ -65,7 +65,7 @@
       ]
     },
     {
-      "id": "core-dropdown_multiple-triggers",
+      "id": "dropdown-multiple-triggers",
       "name": "MultipleTriggers",
       "template": "<div nve-layout=\"row gap:sm align:center\">\n  <nve-button popovertarget=\"dropdown\">button</nve-button>\n  <nve-button popovertarget=\"dropdown\">button</nve-button>\n  <nve-button popovertarget=\"dropdown\">button</nve-button>\n  <nve-dropdown id=\"dropdown\">hello there</nve-dropdown>\n</div>\n",
       "summary": "Dropdown with many triggers, showing how to use the popovertarget attribute to connect many triggers to the same dropdown.",
@@ -76,7 +76,7 @@
       ]
     },
     {
-      "id": "core-dropdown_position",
+      "id": "dropdown-position",
       "name": "Position",
       "template": "<nve-dropdown anchor=\"card\" position=\"top\" alignment=\"center\">\n  <h3 nve-text=\"label\">Top</h3>\n  <p nve-text=\"body\">dropdown positioned top</p>\n</nve-dropdown>\n<nve-dropdown anchor=\"card\" position=\"right\" alignment=\"center\">\n  <h3 nve-text=\"label\">Right</h3>\n  <p nve-text=\"body\">dropdown positioned right</p>\n</nve-dropdown>\n<nve-dropdown anchor=\"card\" position=\"bottom\" alignment=\"center\">\n  <h3 nve-text=\"label\">Bottom</h3>\n  <p nve-text=\"body\">dropdown positioned bottom</p>\n</nve-dropdown>\n<nve-dropdown anchor=\"card\" position=\"left\" alignment=\"center\">\n  <h3 nve-text=\"label\">Left</h3>\n  <p nve-text=\"body\">dropdown positioned left</p>\n</nve-dropdown>\n<nve-card id=\"card\" style=\"width: 250px; height: 200px\"></nve-card>\n",
       "summary": "Dropdown position, with the position attribute controlling placement when the trigger is not visible.",
@@ -87,7 +87,7 @@
       ]
     },
     {
-      "id": "core-dropdown_alignment",
+      "id": "dropdown-alignment",
       "name": "Alignment",
       "template": "<div nve-theme nve-layout=\"row align:center\">\n  <nve-dropdown open anchor=\"card\" position=\"top\" alignment=\"start\">top start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"top\" alignment=\"center\">top center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"top\" alignment=\"end\">top end</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"right\" alignment=\"start\">right start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"right\" alignment=\"center\">right center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"right\" alignment=\"end\">right end</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"bottom\" alignment=\"start\">bottom start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"bottom\" alignment=\"center\">bottom center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"bottom\" alignment=\"end\">bottom end</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"left\" alignment=\"start\">left start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"left\" alignment=\"center\">left center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"left\" alignment=\"end\">left end</nve-dropdown>\n  <nve-card id=\"card\" style=\"width: 450px; height: 300px; margin-top: 50px\"></nve-card>\n</div>\n",
       "summary": "Dropdown alignment, with the alignment attribute controlling horizontal placement relative to the trigger.",
@@ -98,7 +98,7 @@
       ]
     },
     {
-      "id": "core-dropdown_radio-group",
+      "id": "dropdown-radio-group",
       "name": "RadioGroup",
       "template": "<nve-dropdown anchor=\"btn\">\n  <nve-radio-group style=\"width: 250px\">\n    <label>Sort By</label>\n    <nve-radio>\n      <label>Completed</label>\n      <input type=\"radio\" checked />\n      <nve-control-message>latest completed tasks</nve-control-message>\n    </nve-radio>\n    <nve-radio>\n      <label>Failing</label>\n      <input type=\"radio\" />\n      <nve-control-message>latest failing tasks</nve-control-message>\n    </nve-radio>\n    <nve-radio>\n      <label>Status</label>\n      <input type=\"radio\" />\n      <nve-control-message>task status priority</nve-control-message>\n    </nve-radio>\n  </nve-radio-group>\n</nve-dropdown>\n<nve-button id=\"btn\" nve-control>completed <nve-icon name=\"caret\" direction=\"down\" size=\"sm\"></nve-icon></nve-button>\n",
       "summary": "Dropdown containing a radio group for single-selection options. Perfect for sort controls, filter selections, or preference settings.",
@@ -109,7 +109,7 @@
       ]
     },
     {
-      "id": "core-dropdown_checkbox-group",
+      "id": "dropdown-checkbox-group",
       "name": "CheckboxGroup",
       "template": "<nve-dropdown anchor=\"btn\">\n  <nve-checkbox-group style=\"width: 250px\">\n    <label>Test Suites</label>\n    <nve-checkbox>\n      <label>Local</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>Nightly</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>Remote</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n  </nve-checkbox-group>\n</nve-dropdown>\n<nve-button id=\"btn\" nve-control>test suites <nve-icon name=\"caret\" direction=\"down\" size=\"sm\"></nve-icon></nve-button>\n",
       "summary": "Dropdown containing a checkbox group for multi-selection options. Ideal for filter controls, feature toggles, or bulk action selections.",
@@ -120,7 +120,7 @@
       ]
     },
     {
-      "id": "core-dropdown_legacy-behavior-trigger",
+      "id": "dropdown-legacy-behavior-trigger",
       "name": "LegacyBehaviorTrigger",
       "template": "<nve-button id=\"dropdown-btn\">open</nve-button>\n<nve-dropdown anchor=\"dropdown-btn\" trigger=\"dropdown-btn\" behavior-trigger hidden>\n  <p nve-text=\"body\">hello there</p>\n</nve-dropdown>\n",
       "summary": "Legacy behavior trigger for dropdown, using the behavior-trigger attribute to open the dropdown on button click.",
@@ -132,7 +132,7 @@
       ]
     },
     {
-      "id": "core-dropdown_hint",
+      "id": "dropdown-hint",
       "name": "Hint",
       "template": "<nve-dropdown id=\"dropdown\"> dropdown content </nve-dropdown>\n<nve-tooltip id=\"tooltip\" hidden behavior-trigger trigger=\"btn\">dropdown content</nve-tooltip>\n<nve-icon-button id=\"btn\" popovertarget=\"dropdown\" icon-name=\"gear\" aria-label=\"settings\"></nve-icon-button>\n",
       "summary": "Dropdown hint, using the tooltip element to display a hint when the dropdown opens.",
@@ -144,7 +144,7 @@
       ]
     },
     {
-      "id": "core-dropdown_position-fallback",
+      "id": "dropdown-position-fallback",
       "name": "PositionFallback",
       "template": "<style>\n  body {\n    align-items: start !important;\n    margin: 0;\n    padding: 0 !important;\n  }\n</style>\n<nve-dropdown anchor=\"btn\" position=\"bottom\" alignment=\"center\"> dropdown content </nve-dropdown>\n<nve-dropdown anchor=\"btn\" position=\"right\" alignment=\"center\"> dropdown content </nve-dropdown>\n<nve-icon-button id=\"btn\" icon-name=\"gear\" aria-label=\"settings\"></nve-icon-button>\n",
       "summary": "Dropdown position fallback, using the position and alignment attributes to reposition the dropdown when the trigger is not visible.",

package/dist/dropdown/dropdown2.js

@@ -21,7 +21,7 @@ var p = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown",
-			version: "0.0.9"
+			version: "0.0.11"
 		};
 	}
 	static {

package/dist/dropdown-group/dropdown-group.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/dropdown-group/dropdown-group.examples.json",
   "items": [
     {
-      "id": "core-dropdown-group_default",
+      "id": "dropdown-group",
       "name": "Default",
       "template": "<nve-button popovertarget=\"menu-1\">menu</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"menu-2\">\n        item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item>item 1-2</nve-menu-item>\n      <nve-menu-item>item 1-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 2-1</nve-menu-item>\n      <nve-menu-item popovertarget=\"menu-3\">\n        item 2-2 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item>item 2-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 3-1</nve-menu-item>\n      <nve-menu-item>item 3-2</nve-menu-item>\n      <nve-menu-item>item 3-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
       "summary": "Cascading dropdown menu group with nested submenus for hierarchical navigation.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-dropdown-group_with-disabled-items",
+      "id": "dropdown-group-with-disabled-items",
       "name": "WithDisabledItems",
       "template": "<nve-button popovertarget=\"disabled-menu-1\">Disabled Items</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"disabled-menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"disabled-menu-2\">\n        item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item disabled>item 1-2</nve-menu-item>\n      <nve-menu-item>item 1-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"disabled-menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 2-1</nve-menu-item>\n      <nve-menu-item disabled>item 2-2</nve-menu-item>\n      <nve-menu-item popovertarget=\"disabled-menu-3\">\n        item 2-3 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n      </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"disabled-menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 3-1</nve-menu-item>\n      <nve-menu-item disabled>item 3-2</nve-menu-item>\n      <nve-menu-item>item 3-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
       "summary": "Cascading dropdown menu with disabled menu items in non-interactive states.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-dropdown-group_with-icons",
+      "id": "dropdown-group-with-icons",
       "name": "WithIcons",
       "template": "<nve-button popovertarget=\"icon-menu-1\">Icons Menu</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"icon-menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"icon-menu-2\">\n        <nve-icon name=\"folder\" size=\"sm\"></nve-icon> item 1-1\n        <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"image\" size=\"sm\"></nve-icon> item 1-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"video-camera\" size=\"sm\"></nve-icon> item 1-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"icon-menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"document\" size=\"sm\"></nve-icon> item 2-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"document\" size=\"sm\"></nve-icon> item 2-2 </nve-menu-item>\n      <nve-menu-item popovertarget=\"icon-menu-3\">\n        <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 2-3\n        <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n      </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"icon-menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
       "summary": "Cascading dropdown menu with leading icons for visual identification of menu item types.",
@@ -30,7 +30,7 @@
       "tags": []
     },
     {
-      "id": "core-dropdown-group_with-more-icons",
+      "id": "dropdown-group-with-more-icons",
       "name": "WithMoreIcons",
       "template": "<nve-button popovertarget=\"more-icon-menu-1\">More Icons</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"more-icon-menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"more-icon-menu-2\">\n        <nve-icon name=\"person\" size=\"sm\"></nve-icon> item 1-1\n        <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"arrow\" direction=\"right\" size=\"sm\"></nve-icon> item 1-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"star\" size=\"sm\"></nve-icon> item 1-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"more-icon-menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"flag\" size=\"sm\"></nve-icon> item 2-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"home\" size=\"sm\"></nve-icon> item 2-2 </nve-menu-item>\n      <nve-menu-item popovertarget=\"more-icon-menu-3\">\n        <nve-icon name=\"gear\" size=\"sm\"></nve-icon> item 2-3\n        <nve-icon name=\"chevron\" direction=\"right\" size=\"sm\"></nve-icon>\n      </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"more-icon-menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"dot\" size=\"sm\"></nve-icon> item 3-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"exclamation-mark\" size=\"sm\"></nve-icon> item 3-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"edit\" size=\"sm\"></nve-icon> item 3-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
       "summary": "Cascading dropdown menu showcasing extra icon varieties for diverse menu actions.",

package/dist/dropdown-group/dropdown-group.js

@@ -14,7 +14,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-group",
-			version: "0.0.9",
+			version: "0.0.11",
 			children: ["nve-dropdown"]
 		};
 	}

package/dist/dropzone/dropzone.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/dropzone/dropzone.examples.json",
   "items": [
     {
-      "id": "core-dropzone_default",
+      "id": "dropzone",
       "name": "Default",
       "template": "<nve-dropzone name=\"files\" style=\"--min-height: 200px\"></nve-dropzone>\n",
       "summary": "Basic file dropzone with drag-and-drop area for file upload interactions.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-dropzone_icon",
+      "id": "dropzone-icon",
       "name": "Icon",
       "template": "<style>\n  nve-dropzone nve-icon {\n    --color: red;\n    background: var(--nve-sys-layer-canvas-accent-background);\n  }\n  nve-dropzone[highlighted] nve-icon,\n  nve-dropzone:hover nve-icon {\n    --color: var(--nve-sys-text-white-color);\n    background: var(--nve-sys-accent-primary-background);\n  }\n</style>\n<nve-dropzone name=\"files\">\n  <nve-icon slot=\"icon\" name=\"document\"></nve-icon>\n</nve-dropzone>\n",
       "summary": "Dropzone with custom icon slot showing visual feedback on hover and highlight states.",
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "id": "core-dropzone_form",
+      "id": "dropzone-form",
       "name": "Form",
       "template": "<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n  <section>\n    <nve-control>\n      <nve-dropzone name=\"files\" accept=\"image/gif, image/jpeg, image/png\" max-file-size=\"1048576\"></nve-dropzone>\n      <nve-control-message error=\"typeMismatch\"\n        >Unsupported file type — this upload only accepts images</nve-control-message\n      >\n      <nve-control-message error=\"rangeOverflow\">File too big - maximum 1.00 MB allowed</nve-control-message>\n    </nve-control>\n  </section>\n  <nve-button type=\"submit\">submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"#form-demo\");\n  const dropzone = document.querySelector(\"#form-demo nve-dropzone\");\n  dropzone.addEventListener(\"change\", (e) => {\n    console.log(\"change\", e.target.value);\n    const files = e.target.value;\n    console.log(\"Validity:\", e.target.validity);\n    console.log(\"Validation Message:\", e.target.validationMessage);\n  });\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    const formData = new FormData(e.target);\n    const files = formData.getAll(\"files\");\n    if (form.checkValidity()) {\n      console.log(\"Form submitted successfully!\");\n    } else {\n      console.log(\"Form validation failed\");\n    }\n  });\n</script>\n",
       "summary": "Dropzone integrated with form validation showing file type and size constraint errors.",

package/dist/dropzone/dropzone2.js

@@ -20,7 +20,7 @@ var g = class extends h(d) {
 	static {
 		this.metadata = {
 			tag: "nve-dropzone",
-			version: "0.0.9",
+			version: "0.0.11",
 			validators: [l, c],
 			valueSchema: {
 				type: "array",

package/dist/file/file.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/file/file.examples.json",
   "items": [
     {
-      "id": "core-file_default",
+      "id": "file",
       "name": "Default",
       "template": "<nve-file>\n  <label>file</label>\n  <input type=\"file\" />\n  <nve-control-message>message</nve-control-message>\n</nve-file>\n",
       "summary": "Basic file input with label and validation message. Use for simple file upload fields in forms.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-file_vertical",
+      "id": "file-vertical",
       "name": "Vertical",
       "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-file>\n    <label>label</label>\n    <input type=\"file\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-file>\n  <nve-file>\n    <label>disabled</label>\n    <input type=\"file\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-file>\n  <nve-file>\n    <label>success</label>\n    <input type=\"file\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-file>\n  <nve-file>\n    <label>error</label>\n    <input type=\"file\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-file>\n</div>\n",
       "summary": "Vertical layout file inputs showing all validation states including disabled, success, and error. Use for stacked form layouts where labels appear above inputs.",
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "id": "core-file_horizontal",
+      "id": "file-horizontal",
       "name": "Horizontal",
       "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-file layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"file\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-file>\n  <nve-file layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"file\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-file>\n  <nve-file layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"file\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-file>\n  <nve-file layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"file\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-file>\n</div>\n",
       "summary": "Horizontal layout file inputs with side-by-side labels. Ideal for compact forms or when aligning labels with other horizontal form controls.",

package/dist/file/file2.js

@@ -11,7 +11,7 @@ var a = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-file",
-			version: "0.0.9"
+			version: "0.0.11"
 		};
 	}
 	connectedCallback() {

package/dist/format-datetime/format-datetime.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/format-datetime/format-datetime.examples.json",
   "items": [
     {
-      "id": "core-format-datetime_default",
+      "id": "format-datetime",
       "name": "Default",
       "template": "<nve-format-datetime date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n",
       "summary": "Basic date formatting with the long date style preset. Use for displaying human-readable dates in content areas, tables, or metadata.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-format-datetime_date-style",
+      "id": "format-datetime-date-style",
       "name": "DateStyle",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime date-style=\"full\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime date-style=\"medium\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime date-style=\"short\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
       "summary": "Date style presets for controlling output density. Use full or long for detail-rich contexts and medium or short for compact layouts like data tables or cards.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-format-datetime_time-style",
+      "id": "format-datetime-time-style",
       "name": "TimeStyle",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime date-style=\"long\" time-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime date-style=\"short\" time-style=\"short\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
       "summary": "Combined date and time style presets for full timestamps. Use for audit logs, event schedules, or activity feeds that need both date and time. Preset styles take precedence over granular formatting options when both appear.",
@@ -30,7 +30,7 @@
       "tags": []
     },
     {
-      "id": "core-format-datetime_granular",
+      "id": "format-datetime-granular",
       "name": "Granular",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime weekday=\"long\" month=\"short\" day=\"numeric\" year=\"numeric\"\n    >2023-07-28T04:20:17.434Z</nve-format-datetime\n  >\n  <nve-format-datetime month=\"long\" year=\"numeric\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
       "summary": "Granular date part options for precise formatting control. Use when presets don't match your layout, such as weekday and month only. Do not combine with date-style or time-style; style presets take priority if both appear.",
@@ -39,7 +39,7 @@
       "tags": []
     },
     {
-      "id": "core-format-datetime_time-only",
+      "id": "format-datetime-time-only",
       "name": "TimeOnly",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime hour=\"numeric\" minute=\"2-digit\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime hour=\"2-digit\" minute=\"2-digit\" second=\"2-digit\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
       "summary": "Time-only formatting with granular hour, minute, and second options. Use for clocks, time labels, or timestamps where the date is unnecessary.",
@@ -48,7 +48,7 @@
       "tags": []
     },
     {
-      "id": "core-format-datetime_locale",
+      "id": "format-datetime-locale",
       "name": "Locale",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime locale=\"de-DE\" date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime locale=\"ja\" date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime locale=\"fr-FR\" date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
       "summary": "Explicit locale settings for internationalized date output. Use when the target audience locale differs from the browser default, such as multilingual dashboards or region-specific reports.",
@@ -57,7 +57,7 @@
       "tags": []
     },
     {
-      "id": "core-format-datetime_date-attribute",
+      "id": "format-datetime-date-attribute",
       "name": "DateAttribute",
       "template": "<nve-format-datetime date=\"2023-07-28T04:20:17.434Z\" date-style=\"long\"></nve-format-datetime>\n",
       "summary": "Date attribute input for values supplied by JavaScript or bound data. By default, the component formats text content, which also serves as the SSR fallback, and `date` wins when both are present.",
@@ -66,7 +66,7 @@
       "tags": []
     },
     {
-      "id": "core-format-datetime_time-zone",
+      "id": "format-datetime-time-zone",
       "name": "TimeZone",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime date-style=\"long\" time-style=\"long\" time-zone=\"America/New_York\"\n    >2023-07-28T04:20:17.434Z</nve-format-datetime\n  >\n  <nve-format-datetime date-style=\"long\" time-style=\"long\" time-zone=\"Asia/Tokyo\"\n    >2023-07-28T04:20:17.434Z</nve-format-datetime\n  >\n</div>\n",
       "summary": "Time zone conversion for displaying dates in a specific region. Use for global teams, scheduling interfaces, or when UTC or server timestamps need a fixed time zone.",
@@ -75,7 +75,7 @@
       "tags": []
     },
     {
-      "id": "core-format-datetime_time-zone-name",
+      "id": "format-datetime-time-zone-name",
       "name": "TimeZoneName",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime\n    locale=\"en-US\"\n    month=\"long\"\n    day=\"numeric\"\n    year=\"numeric\"\n    hour=\"numeric\"\n    minute=\"2-digit\"\n    time-zone=\"America/New_York\"\n    time-zone-name=\"short\"\n    >2023-07-28T04:20:17.434Z</nve-format-datetime\n  >\n  <nve-format-datetime\n    locale=\"en-US\"\n    month=\"long\"\n    day=\"numeric\"\n    year=\"numeric\"\n    hour=\"numeric\"\n    minute=\"2-digit\"\n    time-zone=\"America/New_York\"\n    time-zone-name=\"long\"\n    >2023-07-28T04:20:17.434Z</nve-format-datetime\n  >\n</div>\n",
       "summary": "Time zone name labels in short and long form alongside the formatted date. Use with granular options when the viewer needs to know which time zone applies, such as meeting schedulers or cross-region dashboards.",

package/dist/format-datetime/format-datetime2.js

@@ -13,7 +13,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-format-datetime",
-			version: "0.0.9"
+			version: "0.0.11"
 		};
 	}
 	get #e() {

package/dist/format-relative-time/format-relative-time.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/format-relative-time/format-relative-time.examples.json",
   "items": [
     {
-      "id": "core-format-relative-time_default",
+      "id": "format-relative-time",
       "name": "Default",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-relative-time>2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time>2024-06-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time>2025-12-01T12:00:00.000Z</nve-format-relative-time>\n</div>\n",
       "summary": "Basic relative time formatting with auto unit selection. Use for displaying human-readable relative timestamps in content areas, feeds, or metadata.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-format-relative-time_numeric",
+      "id": "format-relative-time-numeric",
       "name": "Numeric",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-relative-time numeric=\"always\" unit=\"year\">2025-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time numeric=\"auto\" unit=\"year\">2025-01-15T12:00:00.000Z</nve-format-relative-time>\n</div>\n",
       "summary": "Numeric formatting control for natural language output. Use 'auto' to display natural forms such as 'yesterday' instead of '1 day ago'.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-format-relative-time_format-style",
+      "id": "format-relative-time-format-style",
       "name": "FormatStyle",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-relative-time format-style=\"long\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time format-style=\"short\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time format-style=\"narrow\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n</div>\n",
       "summary": "Format style presets for controlling output verbosity. Use 'short' or 'narrow' for compact layouts such as data tables or timelines.",
@@ -30,7 +30,7 @@
       "tags": []
     },
     {
-      "id": "core-format-relative-time_unit",
+      "id": "format-relative-time-unit",
       "name": "Unit",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-relative-time unit=\"day\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time unit=\"month\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time unit=\"year\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n</div>\n",
       "summary": "Explicit time unit selection for keeping relative time in a fixed unit. Use when you always want output in days, months, or years instead of letting the component auto-select the unit.",
@@ -39,7 +39,7 @@
       "tags": []
     },
     {
-      "id": "core-format-relative-time_locale",
+      "id": "format-relative-time-locale",
       "name": "Locale",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-relative-time locale=\"de-DE\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time locale=\"ja\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time locale=\"fr-FR\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n</div>\n",
       "summary": "Explicit locale settings for internationalized relative time output. Use when the target audience locale differs from the document language or browser default.",
@@ -48,7 +48,7 @@
       "tags": []
     },
     {
-      "id": "core-format-relative-time_date-attribute",
+      "id": "format-relative-time-date-attribute",
       "name": "DateAttribute",
       "template": "<nve-format-relative-time date=\"2020-01-15T12:00:00.000Z\"></nve-format-relative-time>\n",
       "summary": "Date attribute input for values supplied by JavaScript or bound data. By default, the component formats text content, which also serves as the SSR fallback, and `date` wins when both are present.",
@@ -57,7 +57,7 @@
       "tags": []
     },
     {
-      "id": "core-format-relative-time_sync",
+      "id": "format-relative-time-sync",
       "name": "Sync",
       "template": "<nve-format-relative-time sync>2020-01-15T12:00:00.000Z</nve-format-relative-time>\n",
       "summary": "Auto-updating relative time with the sync attribute. Use for live feeds, notifications, or dashboards where freshness matters.",