@nvidia-elements/core 0.0.10 → 0.0.11

package/dist/custom-elements.json

@@ -48068,24 +48068,12 @@
               }
             },
             {
-              "name": "explicitMin",
-              "optional": true,
-              "type": {
-                "text": "number",
-                "_sourceAliases": []
-              }
-            },
-            {
-              "name": "explicitMax",
-              "optional": true,
+              "name": "options",
+              "default": "{}",
               "type": {
-                "text": "number",
+                "text": "{ explicitMin?: number; explicitMax?: number; includeZero?: boolean }",
                 "_sourceAliases": []
               }
-            },
-            {
-              "name": "includeZero",
-              "default": "false"
             }
           ]
         },
@@ -48106,16 +48094,9 @@
               }
             },
             {
-              "name": "min",
+              "name": "range",
               "type": {
-                "text": "number",
-                "_sourceAliases": []
-              }
-            },
-            {
-              "name": "max",
-              "type": {
-                "text": "number",
+                "text": "{ min: number; max: number }",
                 "_sourceAliases": []
               }
             },
@@ -48142,29 +48123,18 @@
               }
             },
             {
-              "name": "min",
+              "name": "range",
               "type": {
-                "text": "number",
+                "text": "{ min: number; max: number }",
                 "_sourceAliases": []
               }
             },
             {
-              "name": "max",
+              "name": "view",
               "type": {
-                "text": "number",
+                "text": "{ width: number; height?: number }",
                 "_sourceAliases": []
               }
-            },
-            {
-              "name": "viewWidth",
-              "type": {
-                "text": "number",
-                "_sourceAliases": []
-              }
-            },
-            {
-              "name": "viewHeight",
-              "default": "VIEW_HEIGHT"
             }
           ]
         },
@@ -48185,30 +48155,9 @@
               }
             },
             {
-              "name": "denoteFirst",
-              "type": {
-                "text": "boolean",
-                "_sourceAliases": []
-              }
-            },
-            {
-              "name": "denoteLast",
-              "type": {
-                "text": "boolean",
-                "_sourceAliases": []
-              }
-            },
-            {
-              "name": "denoteMin",
+              "name": "denote",
               "type": {
-                "text": "boolean",
-                "_sourceAliases": []
-              }
-            },
-            {
-              "name": "denoteMax",
-              "type": {
-                "text": "boolean",
+                "text": "{ first: boolean; last: boolean; min: boolean; max: boolean }",
                 "_sourceAliases": []
               }
             }
@@ -48353,16 +48302,9 @@
               }
             },
             {
-              "name": "width",
-              "type": {
-                "text": "number",
-                "_sourceAliases": []
-              }
-            },
-            {
-              "name": "height",
+              "name": "dimensions",
               "type": {
-                "text": "number",
+                "text": "{ width: number; height: number }",
                 "_sourceAliases": []
               }
             }

package/dist/date/date.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/date/date.examples.json",
   "items": [
     {
-      "id": "core-date_default",
+      "id": "date",
       "name": "Default",
       "template": "<nve-date>\n  <label>date</label>\n  <input type=\"date\" />\n  <nve-control-message>message</nve-control-message>\n</nve-date>\n",
       "summary": "Basic date picker input with label and message for selecting calendar dates.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-date_datalist",
+      "id": "date-datalist",
       "name": "Datalist",
       "template": "<nve-date>\n  <label>label</label>\n  <input type=\"date\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"2018-07-22\"></option>\n    <option value=\"2018-01-01\"></option>\n    <option value=\"2018-12-31\"></option>\n  </datalist>\n</nve-date>\n",
       "summary": "Date picker with datalist providing suggested date options for quick selection from predefined dates.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-date_vertical",
+      "id": "date-vertical",
       "name": "Vertical",
       "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date>\n    <label>label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-date>\n    <label>disabled</label>\n    <input type=\"date\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-date>\n    <label>success</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-date>\n  <nve-date>\n    <label>error</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-date>\n</div>\n",
       "summary": "Date pickers with vertical layout including validation states for disabled, success, and error.",
@@ -32,7 +32,7 @@
       ]
     },
     {
-      "id": "core-date_horizontal",
+      "id": "date-horizontal",
       "name": "Horizontal",
       "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-date layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"date\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-date layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-date>\n  <nve-date layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-date>\n</div>\n",
       "summary": "Date pickers with horizontal layout showing validation states for inline forms and compact layouts.",
@@ -43,7 +43,7 @@
       ]
     },
     {
-      "id": "core-date_range",
+      "id": "date-range",
       "name": "Range",
       "template": "<nve-input-group>\n  <label>date range</label>\n  <nve-date>\n    <input type=\"date\" aria-label=\"start date\" value=\"2018-07-22\" />\n  </nve-date>\n  <nve-date>\n    <input type=\"date\" aria-label=\"end date\" value=\"2022-07-22\" />\n  </nve-date>\n  <nve-control-message>message</nve-control-message>\n</nve-input-group>\n",
       "summary": "Date range input with start and end date pickers for selecting time periods and date intervals.",
@@ -52,7 +52,7 @@
       "tags": []
     },
     {
-      "id": "core-date_types",
+      "id": "date-types",
       "name": "Types",
       "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date layout=\"horizontal\">\n    <label>date label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-datetime layout=\"horizontal\">\n    <label>datetime label</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n  <nve-month layout=\"horizontal\">\n    <label>month label</label>\n    <input type=\"month\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-month>\n  <nve-week layout=\"horizontal\">\n    <label>week label</label>\n    <input type=\"week\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n  <nve-time layout=\"horizontal\">\n    <label>time label</label>\n    <input type=\"time\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n  <nve-input-group layout=\"horizontal\">\n    <label>date range</label>\n    <nve-date>\n      <input type=\"date\" aria-label=\"start date\" value=\"2018-07-22\" />\n    </nve-date>\n    <nve-date>\n      <input type=\"date\" aria-label=\"end date\" value=\"2022-07-22\" />\n    </nve-date>\n    <nve-control-message>message</nve-control-message>\n  </nve-input-group>\n</div>\n",
       "summary": "Collection of temporal input types including date, datetime, month, week, time, and date range pickers.",
@@ -61,7 +61,7 @@
       "tags": []
     },
     {
-      "id": "core-date_fit-text",
+      "id": "date-fit-text",
       "name": "FitText",
       "template": "<nve-date fit-text>\n  <label>date</label>\n  <input type=\"date\" value=\"2017-06-01\" />\n  <nve-control-message>message</nve-control-message>\n</nve-date>\n",
       "summary": "Date picker with fit-text styling that adjusts width to match the selected date value for compact displays.",

package/dist/date/date2.js

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

package/dist/datetime/datetime.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/datetime/datetime.examples.json",
   "items": [
     {
-      "id": "core-datetime_default",
+      "id": "datetime",
       "name": "Default",
       "template": "<nve-datetime>\n  <label>date</label>\n  <input type=\"datetime-local\" />\n  <nve-control-message>message</nve-control-message>\n</nve-datetime>\n",
       "summary": "Basic datetime picker input with label and message for selecting both date and time values.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-datetime_datalist",
+      "id": "datetime-datalist",
       "name": "Datalist",
       "template": "<nve-datetime>\n  <label>label</label>\n  <input type=\"datetime-local\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"2018-06-07T00:00\"></option>\n    <option value=\"2018-06-12T19:30\"></option>\n    <option value=\"2018-06-14T00:00\"></option>\n  </datalist>\n</nve-datetime>\n",
       "summary": "Datetime picker with datalist providing suggested datetime options for quick selection from predefined values.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-datetime_vertical",
+      "id": "datetime-vertical",
       "name": "Vertical",
       "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-datetime>\n    <label>label</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n  <nve-datetime>\n    <label>disabled</label>\n    <input type=\"datetime-local\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n  <nve-datetime>\n    <label>success</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-datetime>\n  <nve-datetime>\n    <label>error</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-datetime>\n</div>\n",
       "summary": "Datetime pickers with vertical layout including validation states for disabled, success, and error.",
@@ -32,7 +32,7 @@
       ]
     },
     {
-      "id": "core-datetime_horizontal",
+      "id": "datetime-horizontal",
       "name": "Horizontal",
       "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-datetime layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n  <nve-datetime layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"datetime-local\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n  <nve-datetime layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-datetime>\n  <nve-datetime layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-datetime>\n</div>\n",
       "summary": "Datetime pickers with horizontal layout showing validation states for inline forms and compact layouts.",

package/dist/datetime/datetime2.js

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

package/dist/dialog/dialog-footer2.js

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

package/dist/dialog/dialog-header2.js

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

package/dist/dialog/dialog.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/dialog/dialog.examples.json",
   "items": [
     {
-      "id": "core-dialog_default",
+      "id": "dialog",
       "name": "Default",
       "template": "<nve-button popovertarget=\"dialog\">button</nve-button>\n<nve-dialog id=\"dialog\" modal closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n</nve-dialog>\n",
       "summary": "Basic modal dialog for focused user interactions. Use dialogs for confirmations, simple forms, or important information that requires user attention before continuing, creating a modal overlay that blocks interaction with the underlying page until dismissed.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-dialog_invoker-command",
+      "id": "dialog-invoker-command",
       "name": "InvokerCommand",
       "template": "<nve-button commandfor=\"dialog\" command=\"toggle-popover\">toggle popover</nve-button>\n<nve-dialog id=\"dialog\" modal closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n</nve-dialog>\n",
       "summary": "Use the `commandfor` and `command` attributes to trigger custom Invoker Commands, such as toggling a dialog.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-dialog_events",
+      "id": "dialog-events",
       "name": "Events",
       "template": "<nve-dialog id=\"dialog\" modal closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n</nve-dialog>\n<nve-button popovertarget=\"dialog\">button</nve-button>\n<script type=\"module\">\n  const dialog = document.querySelector(\"nve-dialog\");\n  dialog.addEventListener(\"beforetoggle\", () => console.log(\"beforetoggle\"));\n  dialog.addEventListener(\"toggle\", () => console.log(\"toggle\"));\n  dialog.addEventListener(\"open\", () => console.log(\"open\"));\n  dialog.addEventListener(\"close\", () => console.log(\"close\"));\n</script>\n",
       "summary": "Dialog with event listeners for state change tracking. Use dialog events (beforetoggle, toggle, open, close) to trigger side effects like loading data on open, cleaning up resources on close, or preventing closure based on validation state.",
@@ -32,7 +32,7 @@
       ]
     },
     {
-      "id": "core-dialog_visual",
+      "id": "dialog-visual",
       "name": "Visual",
       "template": "<nve-dialog closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n  <nve-dialog-footer>\n    <nve-button>button</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n",
       "summary": "Dialog with header, content, and footer structure for complete user interactions. Use the footer for action buttons, organizing the dialog into clear sections that guide users through the information hierarchy and toward decision-making.",
@@ -41,7 +41,7 @@
       "tags": []
     },
     {
-      "id": "core-dialog_content",
+      "id": "dialog-content",
       "name": "Content",
       "template": "<nve-dialog closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n  <nve-dialog-footer>\n    <nve-button>cancel</nve-button>\n    <nve-button interaction=\"emphasis\">action</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n",
       "summary": "Dialog with primary and secondary actions in footer. Use cancel + emphasized action pattern for confirmations or decisions where you need to present a choice, with emphasis on the primary action guiding users toward the preferred or expected path.",
@@ -52,7 +52,7 @@
       ]
     },
     {
-      "id": "core-dialog_small",
+      "id": "dialog-small",
       "name": "Small",
       "template": "<nve-dialog size=\"sm\" closable>\n  <h3 nve-text=\"heading\">Small</h3>\n  <p nve-text=\"body\">some text content in a small dialog</p>\n</nve-dialog>\n",
       "summary": "Small dialog size for brief confirmations or single-field inputs. Use size=\"sm\" for simple yes/no confirmations, quick edits, or minimal interactions that don't require significant screen space, keeping the interface uncluttered.",
@@ -63,7 +63,7 @@
       ]
     },
     {
-      "id": "core-dialog_medium",
+      "id": "dialog-medium",
       "name": "Medium",
       "template": "<nve-dialog size=\"md\" closable>\n  <h3 nve-text=\"heading\">Medium</h3>\n  <p nve-text=\"body\">some text content in a medium dialog</p>\n</nve-dialog>\n",
       "summary": "Medium dialog size (default) for standard forms and content. Use size=\"md\" for typical dialogs containing short forms (3-5 fields), moderate content, or standard user interactions that need balanced space without overwhelming the interface.",
@@ -74,7 +74,7 @@
       ]
     },
     {
-      "id": "core-dialog_large",
+      "id": "dialog-large",
       "name": "Large",
       "template": "<nve-dialog size=\"lg\" closable>\n  <h3 nve-text=\"heading\">Large</h3>\n  <p nve-text=\"body\">some text content in a large dialog</p>\n</nve-dialog>\n",
       "summary": "Large dialog size for complex forms or extensive content. Use size=\"lg\" for multi-section forms, detailed settings panels, or content-rich interactions where users need more space to work comfortably, but consider using a drawer for large content areas.",
@@ -85,7 +85,7 @@
       ]
     },
     {
-      "id": "core-dialog_text-wrap",
+      "id": "dialog-text-wrap",
       "name": "TextWrap",
       "template": "<nve-dialog closable>\n  <h3 nve-text=\"heading\">Text Wrap</h3>\n  <p nve-text=\"body\">\n    Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content\n    in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some\n    text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a\n    small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text\n    wrapped content in a small dialog. Some text wrapped content in a small dialog.\n  </p>\n</nve-dialog>\n",
       "summary": "Dialog with text wrapping behavior, where content adapts to dialog constraints and maintains readability in limited space.",
@@ -96,7 +96,7 @@
       ]
     },
     {
-      "id": "core-dialog_non-closable",
+      "id": "dialog-non-closable",
       "name": "NonClosable",
       "template": "<nve-button popovertarget=\"dialog\">open</nve-button>\n<nve-dialog id=\"dialog\" modal>\n  <h3 nve-text=\"heading\">Non-Closable Dialog</h3>\n  <p nve-text=\"body\">Clicking the background to dismiss will not work here</p>\n  <nve-dialog-footer>\n    <nve-button popovertarget=\"dialog\" popovertargetaction=\"hide\">cancel</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n",
       "summary": "Non-closable dialog requiring explicit action through buttons. Use non-closable dialogs sparingly for critical decisions (like irreversible deletions) or required acknowledgments where you must ensure users make a conscious choice rather than accidentally dismissing the dialog.",
@@ -107,7 +107,7 @@
       ]
     },
     {
-      "id": "core-dialog_alignment",
+      "id": "dialog-alignment",
       "name": "Alignment",
       "template": "<nve-dialog>center</nve-dialog>\n<nve-dialog position=\"top\">top center</nve-dialog>\n<nve-dialog position=\"top\" alignment=\"start\">top start</nve-dialog>\n<nve-dialog position=\"top\">top center</nve-dialog>\n<nve-dialog position=\"top\" alignment=\"end\">top end</nve-dialog>\n<nve-dialog position=\"right\" alignment=\"start\">right start</nve-dialog>\n<nve-dialog position=\"right\">right center</nve-dialog>\n<nve-dialog position=\"right\" alignment=\"end\">right end</nve-dialog>\n<nve-dialog position=\"bottom\" alignment=\"start\">bottom start</nve-dialog>\n<nve-dialog position=\"bottom\">bottom center</nve-dialog>\n<nve-dialog position=\"bottom\" alignment=\"end\">bottom end</nve-dialog>\n<nve-dialog position=\"left\" alignment=\"start\">left start</nve-dialog>\n<nve-dialog position=\"left\">left center</nve-dialog>\n<nve-dialog position=\"left\" alignment=\"end\">left end</nve-dialog>\n",
       "summary": "Dialog positioning and alignment options for contextual placement. While center positioning is standard, use edge positioning (top/bottom/left/right) for contextually relevant dialogs that relate to specific interface regions or when working with limited vertical space.",
@@ -118,7 +118,7 @@
       ]
     },
     {
-      "id": "core-dialog_position",
+      "id": "dialog-position",
       "name": "Position",
       "template": "<style>\n  body {\n    min-height: 200vh;\n  }\n</style>\n<nve-dialog size=\"sm\" position=\"bottom\" alignment=\"end\" closable>\n  <h3 nve-text=\"heading\">Position</h3>\n  <p nve-text=\"body\">some text content in a small dialog</p>\n</nve-dialog>\n",
       "summary": "Specific dialog positioning example, with placement in optimal locations for user interaction and visual hierarchy.",
@@ -129,7 +129,7 @@
       ]
     },
     {
-      "id": "core-dialog_legacy-trigger",
+      "id": "dialog-legacy-trigger",
       "name": "LegacyTrigger",
       "template": "<nve-button id=\"dialog-btn\">open</nve-button>\n<nve-dialog trigger=\"dialog-btn\" closable modal hidden>\n  <h3 nve-text=\"heading\">Title</h3>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n  <nve-accordion behavior-expand>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Heading</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences including theme, notification settings, and default project configurations to\n      customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-dialog>\n<script type=\"module\">\n  const dialog = document.querySelector(\"nve-dialog\");\n  dialog.addEventListener(\"open\", (e) => {\n    console.log(e);\n    dialog.hidden = false;\n  });\n  dialog.addEventListener(\"close\", (e) => {\n    console.log(e);\n    dialog.hidden = true;\n  });\n</script>\n",
       "summary": "Legacy trigger mechanism for dialog opening, with backward compatibility and alternative interaction patterns for dialog activation.",
@@ -141,7 +141,7 @@
       ]
     },
     {
-      "id": "core-dialog_legacy-behavior-trigger",
+      "id": "dialog-legacy-behavior-trigger",
       "name": "LegacyBehaviorTrigger",
       "template": "<nve-button id=\"dialog-btn\">open</nve-button>\n<nve-dialog trigger=\"dialog-btn\" behavior-trigger closable modal hidden>\n  <h3 nve-text=\"heading\">Title</h3>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n  <nve-accordion behavior-expand>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Heading</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences including theme, notification settings, and default project configurations to\n      customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-dialog>\n",
       "summary": "Legacy behavior trigger for dialog management, showing traditional dialog control patterns and event handling for dialog lifecycle.",
@@ -153,7 +153,7 @@
       ]
     },
     {
-      "id": "core-dialog_shadow-root",
+      "id": "dialog-shadow-root",
       "name": "ShadowRoot",
       "template": "<dialog-test-shadow-root>\n  <template shadowrootmode=\"open\">\n    <style>\n      :host {\n        box-sizing: border-box;\n        display: block;\n        margin: 25vh auto;\n        width: 400px;\n        height: 400px;\n        background: red;\n        visibility: visible !important;\n      }\n    </style>\n    <nve-dialog size=\"sm\">center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"top\">top center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"top\" alignment=\"start\">top start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"top\" alignment=\"end\">top end</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"right\" alignment=\"start\">right start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"right\">right center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"right\" alignment=\"end\">right end</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"bottom\" alignment=\"start\">bottom start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"bottom\">bottom center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"bottom\" alignment=\"end\">bottom end</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"left\" alignment=\"start\">left start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"left\">left center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"left\" alignment=\"end\">left end</nve-dialog>\n  </template>\n</dialog-test-shadow-root>\n",
       "summary": "Dialog functionality within shadow DOM, with proper dialog behavior in encapsulated component environments and custom elements.",
@@ -164,7 +164,7 @@
       ]
     },
     {
-      "id": "core-dialog_scroll-content",
+      "id": "dialog-scroll-content",
       "name": "ScrollContent",
       "template": "<nve-dialog id=\"dialog\" modal closable style=\"height: 400px\">\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\" style=\"height: 600px\">some tall content</p>\n  <p nve-text=\"body\">some overflow content</p>\n  <nve-dialog-footer>\n    <nve-button id=\"cancel-btn\">cancel</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n",
       "summary": "Dialog with scrollable content while keeping header and footer fixed. Use scrollable content areas for dialogs with variable or lengthy content (like terms of service or detailed descriptions) while keeping action buttons always visible, ensuring users can complete the task without scrolling to find buttons.",
@@ -175,7 +175,7 @@
       ]
     },
     {
-      "id": "core-dialog_inert-modal",
+      "id": "dialog-inert-modal",
       "name": "InertModal",
       "template": "<style>\n  body {\n    display: block !important;\n    padding: 24px;\n  }\n</style>\n<div>\n  <button popovertarget=\"popover\">btn</button>\n  <div>\n    <button popovertarget=\"popover\">btn</button>\n    <nve-dialog id=\"popover\" modal>\n      <nve-dialog-header>\n        <h3 nve-text=\"heading semibold\">title</h3>\n      </nve-dialog-header>\n      <button popovertarget=\"dropdown\">button</button>\n      <nve-dropdown id=\"dropdown\">\n        dropdown content\n        <button>btn</button>\n      </nve-dropdown>\n      <p nve-text=\"body\">some text content in a closable dialog</p>\n      <button>btn</button>\n      <button>btn</button>\n    </nve-dialog>\n  </div>\n</div>\n<button popovertarget=\"popover\">btn</button><br />\n<button popovertarget=\"popover\">btn</button>\n<div>\n  <button popovertarget=\"popover\">btn</button>\n  <div>\n    <button popovertarget=\"popover\">btn</button>\n    <div>\n      <button popovertarget=\"popover\">btn</button>\n    </div>\n  </div>\n</div>\n",
       "summary": "Modal dialog with inert behavior, including proper focus management and accessibility compliance for modal overlays and user interaction.",
@@ -186,7 +186,7 @@
       ]
     },
     {
-      "id": "core-dialog_container-styles",
+      "id": "dialog-container-styles",
       "name": "ContainerStyles",
       "template": "<nve-dialog id=\"slots-dialog\" closable popover=\"manual\" position=\"top\">\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">default</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">default dialog with header and footer components</p>\n  <nve-dialog-footer>\n    <nve-button>button</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n<nve-dialog id=\"content-dialog\" closable popover=\"manual\" position=\"right\">\n  <h3 nve-text=\"heading semibold\">title</h3>\n  <p nve-text=\"body\">dialog with only content and no header or footer components</p>\n  <nve-button>button</nve-button>\n</nve-dialog>\n<nve-dialog id=\"custom-dialog\" closable style=\"--padding: 0\" position=\"bottom\">\n  <h3 nve-text=\"heading semibold\">title</h3>\n  <p nve-text=\"body\">dialog with only content and no header or footer components and --padding set to 0</p>\n  <nve-button>button</nve-button>\n</nve-dialog>\n<nve-dialog id=\"custom-slots\" closable style=\"--padding: 48px\" position=\"left\">\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">dialog with header and footer components with --padding set to 48px</p>\n  <nve-dialog-footer>\n    <nve-button>button</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n",
       "summary": "Dialog with different container styles, including custom padding and layout options.",
@@ -197,7 +197,7 @@
       ]
     },
     {
-      "id": "core-dialog_max-height",
+      "id": "dialog-max-height",
       "name": "MaxHeight",
       "template": "<nve-dialog id=\"dialog\" modal closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">some overflow content</p>\n  <p nve-text=\"body\" style=\"min-height: 1000px\">some overflow content</p>\n  <nve-button>button</nve-button>\n  <nve-dialog-footer>\n    <nve-button id=\"cancel-btn\">cancel</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n",
       "summary": "Dialog with overflow content, including max-height constraints and a scrollable content area.",
@@ -208,7 +208,7 @@
       ]
     },
     {
-      "id": "core-dialog_legacy-dom-creation",
+      "id": "dialog-legacy-dom-creation",
       "name": "LegacyDOMCreation",
       "template": "<nve-button id=\"dialog-btn\">button</nve-button>\n<script type=\"module\">\n  import \"@nvidia-elements/core/dialog/define.js\";\n  import \"@nvidia-elements/core/button/define.js\";\n  document.querySelector(\"#dialog-btn\").addEventListener(\"click\", () => {\n    const dialog = document.createElement(\"nve-dialog\");\n    dialog.id = \"dialog-dom-creation\";\n    dialog.modal = true;\n    dialog.closable = true;\n\n    dialog.addEventListener(\n      \"close\",\n      () => {\n        document.body.removeChild(dialog);\n      },\n      { once: true },\n    );\n    document.body.appendChild(dialog);\n  });\n</script>\n",
       "summary": "Legacy DOM Creation",
@@ -220,7 +220,7 @@
       ]
     },
     {
-      "id": "core-dialog_center-alignment",
+      "id": "dialog-center-alignment",
       "name": "CenterAlignment",
       "template": "<style>\n  body {\n    min-height: 200vh;\n  }\n</style>\n<nve-button popovertarget=\"dialog\">button</nve-button>\n<nve-dialog id=\"dialog\" closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n  <nve-select>\n    <select aria-label=\"select\">\n      <option>one</option>\n      <option>two</option>\n      <option>three</option>\n    </select>\n  </nve-select>\n</nve-dialog>\n",
       "summary": "Center alignment with anchor body",

package/dist/dialog/dialog2.js

@@ -30,7 +30,7 @@ var h = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-dialog",
-			version: "0.0.10"
+			version: "0.0.11"
 		};
 	}
 	static {

package/dist/divider/divider.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/divider/divider.examples.json",
   "items": [
     {
-      "id": "core-divider_default",
+      "id": "divider",
       "name": "Default",
       "template": "<nve-divider></nve-divider>\n",
       "summary": "Basic horizontal divider for separating content sections with a subtle line.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-divider_emphasis",
+      "id": "divider-emphasis",
       "name": "Emphasis",
       "template": "<nve-divider style=\"--color: var(--nve-ref-border-color-emphasis)\"></nve-divider>\n",
       "summary": "Divider with emphasis color styling for stronger visual separation between content sections.",
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "id": "core-divider_muted",
+      "id": "divider-muted",
       "name": "Muted",
       "template": "<nve-divider style=\"--color: var(--nve-ref-border-color-muted)\"></nve-divider>\n",
       "summary": "Divider with muted color styling for subtle, low-contrast separation in dense layouts.",
@@ -34,7 +34,7 @@
       ]
     },
     {
-      "id": "core-divider_vertical",
+      "id": "divider-vertical",
       "name": "Vertical",
       "template": "<div nve-layout=\"row gap:sm align:vertical-center\" style=\"height: 50px\">\n  <nve-divider orientation=\"vertical\"></nve-divider>\n  <nve-icon-button icon-name=\"information-circle-stroke\"></nve-icon-button>\n  <nve-icon-button icon-name=\"more-actions\"></nve-icon-button>\n</div>\n",
       "summary": "Vertical divider for separating horizontally arranged elements like toolbar buttons or inline actions.",
@@ -43,7 +43,7 @@
       "tags": []
     },
     {
-      "id": "core-divider_rounded",
+      "id": "divider-rounded",
       "name": "Rounded",
       "template": "<nve-divider\n  style=\"\n    --size: var(--nve-ref-border-width-xl);\n    --border-radius: var(--nve-ref-border-radius-xs);\n    --color: var(--nve-sys-accent-secondary-background);\n  \"\n></nve-divider>\n",
       "summary": "Divider with custom rounded styling, thicker border, and accent color for decorative separation.",

package/dist/divider/divider2.js

@@ -15,7 +15,7 @@ var s = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-divider",
-			version: "0.0.10"
+			version: "0.0.11"
 		};
 	}
 	render() {

package/dist/dot/dot.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/dot/dot.examples.json",
   "items": [
     {
-      "id": "core-dot_default",
+      "id": "dot",
       "name": "Default",
       "template": "<nve-dot status=\"starting\"></nve-dot>\n",
       "summary": "Basic dot component with status indicator, providing a simple visual cue for process states and system status.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-dot_size",
+      "id": "dot-size",
       "name": "Size",
       "template": "<div nve-layout=\"row gap:sm\">\n  <nve-dot size=\"sm\">10</nve-dot>\n  <nve-dot>10</nve-dot>\n  <nve-dot size=\"lg\">10</nve-dot>\n</div>\n<br />\n<div nve-layout=\"row gap:lg\">\n  <nve-dot size=\"sm\"></nve-dot>\n  <nve-dot></nve-dot>\n  <nve-dot size=\"lg\"></nve-dot>\n</div>\n",
       "summary": "Different dot sizes to accommodate layout contexts from compact indicators to prominent status displays.",
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "id": "core-dot_support-status",
+      "id": "dot-support-status",
       "name": "SupportStatus",
       "template": "<div nve-layout=\"row gap:md\">\n  <nve-dot></nve-dot>\n  <nve-dot status=\"accent\"></nve-dot>\n  <nve-dot status=\"warning\"></nve-dot>\n  <nve-dot status=\"success\"></nve-dot>\n  <nve-dot status=\"danger\"></nve-dot>\n</div>\n",
       "summary": "Semantic color variations for general status communication, enabling clear visual distinction of different states and priorities.",
@@ -32,7 +32,7 @@
       "tags": []
     },
     {
-      "id": "core-dot_number",
+      "id": "dot-number",
       "name": "Number",
       "template": "<div nve-layout=\"row gap:md\">\n  <nve-dot>10</nve-dot>\n  <nve-dot status=\"accent\" aria-label=\"10 notifications\">10</nve-dot>\n  <nve-dot status=\"warning\" aria-label=\"10 notifications\">10</nve-dot>\n  <nve-dot status=\"success\" aria-label=\"10 notifications\">10</nve-dot>\n  <nve-dot status=\"danger\" aria-label=\"10 notifications\">10</nve-dot>\n</div>\n",
       "summary": "Dot with numeric content for notification badges and counters, providing clear visual indicators of quantity or alerts.",
@@ -41,7 +41,7 @@
       "tags": []
     },
     {
-      "id": "core-dot_status",
+      "id": "dot-status",
       "name": "Status",
       "template": "<div nve-layout=\"row gap:md\">\n  <nve-dot status=\"scheduled\"></nve-dot>\n  <nve-dot status=\"queued\"></nve-dot>\n  <nve-dot status=\"pending\"></nve-dot>\n  <nve-dot status=\"starting\"></nve-dot>\n  <nve-dot status=\"running\"></nve-dot>\n  <nve-dot status=\"restarting\"></nve-dot>\n  <nve-dot status=\"stopping\"></nve-dot>\n  <nve-dot status=\"finished\"></nve-dot>\n  <nve-dot status=\"failed\"></nve-dot>\n  <nve-dot status=\"unknown\"></nve-dot>\n</div>\n",
       "summary": "Comprehensive process status indicators for system operations, providing clear visual feedback on job states and workflow progress.",

package/dist/dot/dot2.js

@@ -16,7 +16,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-dot",
-			version: "0.0.10"
+			version: "0.0.11"
 		};
 	}
 	render() {

package/dist/drawer/drawer-content2.js

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

package/dist/drawer/drawer-footer2.js

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