@nvidia-elements/core 2.2.2 → 2.2.3

package/dist/button/button2.js

@@ -12,7 +12,7 @@ var s = class extends o(r) {
 	static {
 		this.metadata = {
 			tag: "nve-button",
-			version: "2.2.2"
+			version: "2.2.3"
 		};
 	}
 	render() {

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

@@ -26,7 +26,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-button-group",
-			version: "2.2.2",
+			version: "2.2.3",
 			children: [
 				"nve-button",
 				"nve-icon-button",

package/dist/card/card.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.examples.js","names":[],"sources":["../../src/card/card.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/tabs/define.js';\nimport '@nvidia-elements/core/divider/define.js';\n\nexport default {\n  title: 'Elements/Card',\n  component: 'nve-card'\n};\n\n/**\n * @summary Basic card component with header, content, and footer sections. Use this as a starting point for simple content containers.\n */\nexport const Default = {\n  render: () => html`\n  <nve-card>\n    <nve-card-header>\n      <h2 nve-text=\"heading sm medium\">Heading</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 64px\">card content</p>\n    </nve-card-content>\n    <nve-card-footer>\n      <p nve-text=\"body\">card footer</p>\n    </nve-card-footer>\n  </nve-card>\n  `\n};\n\n/**\n * @summary Card with action buttons in the footer, including primary and secondary actions for interactive card layouts.\n */\nexport const Actions = {\n  render: () => html`\n  <nve-card>\n    <nve-card-header>\n      <div nve-layout=\"column gap:xs\">\n        <h2 nve-text=\"heading sm bold\">Heading</h2>\n        <h3 nve-text=\"body sm muted\">Sub Heading</h3>\n      </div>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 64px\">card content</p>\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"row gap:xs\">\n        <nve-button container=\"flat\" style=\"margin-left: auto\">cancel</nve-button>  \n        <nve-button>action</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Cards with media content (images) displayed in a grid layout, ideal for photo galleries, product catalogs, or visual content showcases.\n */\nexport const MediaCard = {\n  render: () => html`\n  <div nve-layout=\"grid gap:md span-items:6 align:stretch\" style=\"max-width: 900px\">\n    <nve-card style=\"height: 100%; width: 100%;\">\n      <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover;\" />\n      <nve-card-content>\n        <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n      </nve-card-content>\n    </nve-card>\n    <nve-card style=\"height: 100%; width: 100%;\">\n      <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover;\" />\n      <nve-card-content>\n        <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  `\n}\n\n/**\n * @summary Card with a divider separating different content sections, useful for organizing related but distinct information within a single card.\n */\nexport const WithDivider = {\n  render: () => html`\n    <nve-card style=\"width: 400px; height: 300px;\">\n      <nve-card-header>\n        <h2 nve-text=\"heading sm bold\">Heading</h2>\n      </nve-card-header>\n      <nve-card-content>\n        <p nve-text=\"body\">card content</p>\n      </nve-card-content>\n      <nve-divider></nve-divider>\n      <nve-card-content>\n        <p nve-text=\"body\">card content</p>\n      </nve-card-content>\n    </nve-card>\n  `\n}\n\n/**\n * @summary Card containing a description list layout, perfect for displaying key-value pairs, definitions, or structured data in a readable format.\n */\nexport const DescriptionList = {\n  render: () => html`\n  <nve-card style=\"width: 650px\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm bold\">Nautical Terms</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <dl nve-layout=\"grid gap:lg\">\n        <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Knot</dt>\n        <dd nve-layout=\"span:8\" nve-text=\"body\">Knot is a unit of speed equaling 1 nautical mile per hour.</dd>\n\n        <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Port</dt>\n        <dd nve-layout=\"span:8\" nve-text=\"body\">Port is the nautical term that refers to the left side of a ship, as perceived by a person facing towards the bow (the front of the vessel).</dd>\n\n        <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Starboard</dt>\n        <dd nve-layout=\"span:8\" nve-text=\"body\">Starboard is the nautical term that refers to the right side of a vessel, as perceived by a person facing towards the bow (the front of the vessel).</dd>\n      </dl>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Card with integrated tabs in the header for multi-panel content within a single card interface.\n */\nexport const WithTabs = {\n  render: () => html`\n  <nve-card style=\"width:400px; height:200px\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm bold\">Heading</h2>\n      <nve-tabs>\n        <nve-tabs-item selected>tab 1</nve-tabs-item>\n        <nve-tabs-item>tab 2</nve-tabs-item>\n        <nve-tabs-item>tab 3</nve-tabs-item>\n      </nve-tabs>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\">card content</p>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Card with full container styling that extends to the edges, suitable for full-width layouts or when you want the card to blend with its container.\n */\nexport const ContainerFull = {\n  render: () => html`\n  <nve-card container=\"full\">\n    <nve-card-content>\n      <p nve-text=\"body\">container full</p>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Card with flat container styling that removes the default card elevation, ideal for subtle content containers or when you want a more minimal appearance.\n */\nexport const ContainerFlat = {\n  render: () => html`\n  <nve-card container=\"flat\">\n    <nve-card-content>\n      <p nve-text=\"body\">container flat</p>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Examples of invalid card usage patterns for testing and documentation purposes, showing what not to do when implementing cards.\n * @tags test-case\n */\nexport const Audit = {\n  /* eslint-disable @nvidia-elements/lint/no-restricted-attributes */\n  render: () => html`\n  <!-- invalid padding usage -->\n  <nve-card nve-layout=\"pad:md\"></nve-card>\n\n  <!-- invalid parent element -->\n  <nve-card-header>\n    card header\n  </nve-card-header>\n  <nve-card-content>\n    card content\n  </nve-card-content>\n  <nve-card-footer>\n    card footer\n  </nve-card-footer>\n  `\n  /* eslint-enable */\n};\n\n/**\n * @summary Card with overflow content, where the card body scrolls when content exceeds the card height.\n */\nexport const OverflowContent = {\n  render: () => html`\n  <nve-card style=\"height: 250px; width: 400px;\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm medium\">Heading</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"margin-bottom: 300px\">card content</p>\n      <p nve-text=\"body\">card content</p>\n    </nve-card-content>\n    <nve-card-footer>\n      <p nve-text=\"body\">card footer</p>\n    </nve-card-footer>\n  </nve-card>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"card.examples.js","names":[],"sources":["../../src/card/card.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/tabs/define.js';\nimport '@nvidia-elements/core/divider/define.js';\nimport '@nvidia-elements/core/page/define.js';\n\nexport default {\n  title: 'Elements/Card',\n  component: 'nve-card'\n};\n\n/**\n * @summary Basic card component with header, content, and footer sections. Use this as a starting point for simple content containers.\n */\nexport const Default = {\n  render: () => html`\n  <nve-card>\n    <nve-card-header>\n      <h2 nve-text=\"heading sm medium\">Heading</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 64px\">card content</p>\n    </nve-card-content>\n    <nve-card-footer>\n      <p nve-text=\"body\">card footer</p>\n    </nve-card-footer>\n  </nve-card>\n  `\n};\n\n/**\n * @summary Card with action buttons in the footer, including primary and secondary actions for interactive card layouts.\n */\nexport const Actions = {\n  render: () => html`\n  <nve-card>\n    <nve-card-header>\n      <div nve-layout=\"column gap:xs\">\n        <h2 nve-text=\"heading sm bold\">Heading</h2>\n        <h3 nve-text=\"body sm muted\">Sub Heading</h3>\n      </div>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 64px\">card content</p>\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"row gap:xs\">\n        <nve-button container=\"flat\" style=\"margin-left: auto\">cancel</nve-button>  \n        <nve-button>action</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Cards with media content (images) displayed in a grid layout, ideal for photo galleries, product catalogs, or visual content showcases.\n */\nexport const MediaCard = {\n  render: () => html`\n  <div nve-layout=\"grid gap:md span-items:6 align:stretch\" style=\"max-width: 900px\">\n    <nve-card style=\"height: 100%; width: 100%;\">\n      <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover;\" />\n      <nve-card-content>\n        <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n      </nve-card-content>\n    </nve-card>\n    <nve-card style=\"height: 100%; width: 100%;\">\n      <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover;\" />\n      <nve-card-content>\n        <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  `\n}\n\n/**\n * @summary Card with a divider separating different content sections, useful for organizing related but distinct information within a single card.\n */\nexport const WithDivider = {\n  render: () => html`\n    <nve-card style=\"width: 400px; height: 300px;\">\n      <nve-card-header>\n        <h2 nve-text=\"heading sm bold\">Heading</h2>\n      </nve-card-header>\n      <nve-card-content>\n        <p nve-text=\"body\">card content</p>\n      </nve-card-content>\n      <nve-divider></nve-divider>\n      <nve-card-content>\n        <p nve-text=\"body\">card content</p>\n      </nve-card-content>\n    </nve-card>\n  `\n}\n\n/**\n * @summary Card containing a description list layout, perfect for displaying key-value pairs, definitions, or structured data in a readable format.\n */\nexport const DescriptionList = {\n  render: () => html`\n  <nve-card style=\"width: 650px\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm bold\">Nautical Terms</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <dl nve-layout=\"grid gap:lg\">\n        <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Knot</dt>\n        <dd nve-layout=\"span:8\" nve-text=\"body\">Knot is a unit of speed equaling 1 nautical mile per hour.</dd>\n\n        <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Port</dt>\n        <dd nve-layout=\"span:8\" nve-text=\"body\">Port is the nautical term that refers to the left side of a ship, as perceived by a person facing towards the bow (the front of the vessel).</dd>\n\n        <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Starboard</dt>\n        <dd nve-layout=\"span:8\" nve-text=\"body\">Starboard is the nautical term that refers to the right side of a vessel, as perceived by a person facing towards the bow (the front of the vessel).</dd>\n      </dl>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Card with integrated tabs in the header for multi-panel content within a single card interface.\n */\nexport const WithTabs = {\n  render: () => html`\n  <nve-card style=\"width:400px; height:200px\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm bold\">Heading</h2>\n      <nve-tabs>\n        <nve-tabs-item selected>tab 1</nve-tabs-item>\n        <nve-tabs-item>tab 2</nve-tabs-item>\n        <nve-tabs-item>tab 3</nve-tabs-item>\n      </nve-tabs>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\">card content</p>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Card with full container styling that extends to the edges, suitable for full-width layouts or when you want the card to blend with its container.\n * @tags test-case\n */\nexport const ContainerFull = {\n  render: () => html`\n  <nve-page document-scroll>\n    <nve-card container=\"full\">\n      <nve-card-content>\n        <p nve-text=\"body\">container full</p>\n      </nve-card-content>\n    </nve-card>\n  </nve-page>\n  `\n}\n\n/**\n * @summary Card with flat container styling that removes the default card elevation, ideal for subtle content containers or when you want a more minimal appearance.\n * @tags test-case\n */\nexport const ContainerFlat = {\n  render: () => html`\n  <nve-card container=\"flat\">\n    <nve-card-content>\n      <p nve-text=\"body\">container flat</p>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Examples of invalid card usage patterns for testing and documentation purposes, showing what not to do when implementing cards.\n * @tags test-case\n */\nexport const Audit = {\n  /* eslint-disable @nvidia-elements/lint/no-restricted-attributes */\n  render: () => html`\n  <!-- invalid padding usage -->\n  <nve-card nve-layout=\"pad:md\"></nve-card>\n\n  <!-- invalid parent element -->\n  <nve-card-header>\n    card header\n  </nve-card-header>\n  <nve-card-content>\n    card content\n  </nve-card-content>\n  <nve-card-footer>\n    card footer\n  </nve-card-footer>\n  `\n  /* eslint-enable */\n};\n\n/**\n * @summary Card with overflow content, where the card body scrolls when content exceeds the card height.\n * @tags test-case\n */\nexport const OverflowContent = {\n  render: () => html`\n  <nve-card style=\"height: 250px; width: 400px;\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm medium\">Heading</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"margin-bottom: 300px\">card content</p>\n      <p nve-text=\"body\">card content</p>\n    </nve-card-content>\n    <nve-card-footer>\n      <p nve-text=\"body\">card footer</p>\n    </nve-card-footer>\n  </nve-card>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/card/card.examples.json

@@ -59,11 +59,13 @@
     {
       "id": "card-container-full",
       "name": "ContainerFull",
-      "template": "<nve-card container=\"full\">\n  <nve-card-content>\n    <p nve-text=\"body\">container full</p>\n  </nve-card-content>\n</nve-card>\n",
+      "template": "<nve-page document-scroll>\n  <nve-card container=\"full\">\n    <nve-card-content>\n      <p nve-text=\"body\">container full</p>\n    </nve-card-content>\n  </nve-card>\n</nve-page>\n",
       "summary": "Card with full container styling that extends to the edges, suitable for full-width layouts or when you want the card to blend with its container.",
       "description": "",
       "composition": false,
-      "tags": []
+      "tags": [
+        "test-case"
+      ]
     },
     {
       "id": "card-container-flat",
@@ -72,7 +74,9 @@
       "summary": "Card with flat container styling that removes the default card elevation, ideal for subtle content containers or when you want a more minimal appearance.",
       "description": "",
       "composition": false,
-      "tags": []
+      "tags": [
+        "test-case"
+      ]
     },
     {
       "id": "card-audit",
@@ -92,7 +96,9 @@
       "summary": "Card with overflow content, where the card body scrolls when content exceeds the card height.",
       "description": "",
       "composition": false,
-      "tags": []
+      "tags": [
+        "test-case"
+      ]
     }
   ]
 }

package/dist/card/card2.js

@@ -16,7 +16,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card",
-			version: "2.2.2"
+			version: "2.2.3"
 		};
 	}
 	render() {
@@ -37,7 +37,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-header",
-			version: "2.2.2",
+			version: "2.2.3",
 			parents: ["nve-card"]
 		};
 	}
@@ -53,7 +53,7 @@ var p = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-content",
-			version: "2.2.2",
+			version: "2.2.3",
 			parents: ["nve-card"]
 		};
 	}
@@ -72,7 +72,7 @@ var m = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-footer",
-			version: "2.2.2",
+			version: "2.2.3",
 			parents: ["nve-card"]
 		};
 	}

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

@@ -13,7 +13,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-chat-message",
-			version: "2.2.2"
+			version: "2.2.3"
 		};
 	}
 	render() {

package/dist/checkbox/checkbox-group2.js

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

package/dist/checkbox/checkbox2.js

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

package/dist/color/color2.js

@@ -21,7 +21,7 @@ var f = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-color",
-			version: "2.2.2"
+			version: "2.2.3"
 		};
 	}
 	static {

package/dist/combobox/combobox2.js

@@ -31,7 +31,7 @@ var S = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-combobox",
-			version: "2.2.2"
+			version: "2.2.3"
 		};
 	}
 	static {

package/dist/copy-button/copy-button2.js

@@ -32,7 +32,7 @@ var p = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-copy-button",
-			version: "2.2.2"
+			version: "2.2.3"
 		};
 	}
 	static {

package/dist/custom-elements-jsx.d.ts

@@ -5570,6 +5570,7 @@ export type CustomElements = {
    * - **--border-radius** - undefined _(default: undefined)_
    * - **--box-shadow** - undefined _(default: undefined)_
    * - **--min-height** - undefined _(default: undefined)_
+   * - **--gap** - Vertical gap spacing between main content items _(default: undefined)_
    */
   "nve-page": Partial<PageProps & BaseProps & BaseEvents>;
 

package/dist/custom-elements-vue.d.ts

@@ -5328,6 +5328,7 @@ export type CustomElements = {
    * - **--border-radius** - undefined _(default: undefined)_
    * - **--box-shadow** - undefined _(default: undefined)_
    * - **--min-height** - undefined _(default: undefined)_
+   * - **--gap** - Vertical gap spacing between main content items _(default: undefined)_
    */
   "nve-page": DefineComponent<PageProps>;
 

package/dist/custom-elements.json

@@ -32215,6 +32215,10 @@
             {
               "name": "--min-height",
               "description": "[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height)"
+            },
+            {
+              "description": "Vertical gap spacing between main content items [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)",
+              "name": "--gap"
             }
           ],
           "slots": [
@@ -32327,7 +32331,7 @@
             "since": "1.15.0",
             "status": "stable",
             "behavior": "content",
-            "markdown": "## nve-page\n\nProvide a consistent page structure across the applications, ensuring a seamless user experience.\n\n### Example\n\n```html\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>panel</nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/page/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | The central content area of the page, where the primary focus of the user's attention should be. |\n| header | `string` | The topmost section of the page, typically containing navigation, branding, or other global elements. |\n| subheader | `string` | A secondary section below the header, often used for breadcrumbs, filters, or other contextual information. |\n| left-aside | `string` | A narrow section on the left side of the page, commonly used for navigation, filters, or other secondary content. |\n| left | `string` | The main content area on the left side of the page, typically containing primary navigation or features. |\n| bottom | `string` | A section for extra tooling outputs such as console outputs. |\n| right | `string` | The main content area on the right side of the page, typically containing secondary navigation or features. |\n| right-aside | `string` | A narrow section on the right side of the page, commonly used for navigation, filters, or other secondary content. |\n| subfooter | `string` | A secondary section below the main content area, often used for more information or calls to action. |\n| footer | `string` | The bottommost section of the page, typically containing global elements, such as copyright information. |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| documentScroll (document-scroll) | `boolean` | Enables the page to use the document content scroll rather than its internal fixed scroll. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |"
+            "markdown": "## nve-page\n\nProvide a consistent page structure across the applications, ensuring a seamless user experience.\n\n### Example\n\n```html\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>panel</nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/page/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | The central content area of the page, where the primary focus of the user's attention should be. |\n| header | `string` | The topmost section of the page, typically containing navigation, branding, or other global elements. |\n| subheader | `string` | A secondary section below the header, often used for breadcrumbs, filters, or other contextual information. |\n| left-aside | `string` | A narrow section on the left side of the page, commonly used for navigation, filters, or other secondary content. |\n| left | `string` | The main content area on the left side of the page, typically containing primary navigation or features. |\n| bottom | `string` | A section for extra tooling outputs such as console outputs. |\n| right | `string` | The main content area on the right side of the page, typically containing secondary navigation or features. |\n| right-aside | `string` | A narrow section on the right side of the page, commonly used for navigation, filters, or other secondary content. |\n| subfooter | `string` | A secondary section below the main content area, often used for more information or calls to action. |\n| footer | `string` | The bottommost section of the page, typically containing global elements, such as copyright information. |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| documentScroll (document-scroll) | `boolean` | Enables the page to use the document content scroll rather than its internal fixed scroll. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |\n| --gap | `string` | Vertical gap spacing between main content items [MDN](https://mdn.dev/CSS/gap) |"
           }
         }
       ],

package/dist/data.html.json

@@ -3498,7 +3498,7 @@
     },
     {
       "name": "nve-page",
-      "description": "Provide a consistent page structure across the applications, ensuring a seamless user experience.\n---\n\n\n### **Slots:**\n - _default_ - The central content area of the page, where the primary focus of the user's attention should be.\n- **header** - The topmost section of the page, typically containing navigation, branding, or other global elements.\n- **subheader** - A secondary section below the header, often used for breadcrumbs, filters, or other contextual information.\n- **left-aside** - A narrow section on the left side of the page, commonly used for navigation, filters, or other secondary content.\n- **left** - The main content area on the left side of the page, typically containing primary navigation or features.\n- **bottom** - A section for extra tooling outputs such as console outputs.\n- **right** - The main content area on the right side of the page, typically containing secondary navigation or features.\n- **right-aside** - A narrow section on the right side of the page, commonly used for navigation, filters, or other secondary content.\n- **subfooter** - A secondary section below the main content area, often used for more information or calls to action.\n- **footer** - The bottommost section of the page, typically containing global elements, such as copyright information.\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--box-shadow** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) _(default: undefined)_\n- **--min-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) _(default: undefined)_",
+      "description": "Provide a consistent page structure across the applications, ensuring a seamless user experience.\n---\n\n\n### **Slots:**\n - _default_ - The central content area of the page, where the primary focus of the user's attention should be.\n- **header** - The topmost section of the page, typically containing navigation, branding, or other global elements.\n- **subheader** - A secondary section below the header, often used for breadcrumbs, filters, or other contextual information.\n- **left-aside** - A narrow section on the left side of the page, commonly used for navigation, filters, or other secondary content.\n- **left** - The main content area on the left side of the page, typically containing primary navigation or features.\n- **bottom** - A section for extra tooling outputs such as console outputs.\n- **right** - The main content area on the right side of the page, typically containing secondary navigation or features.\n- **right-aside** - A narrow section on the right side of the page, commonly used for navigation, filters, or other secondary content.\n- **subfooter** - A secondary section below the main content area, often used for more information or calls to action.\n- **footer** - The bottommost section of the page, typically containing global elements, such as copyright information.\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--box-shadow** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) _(default: undefined)_\n- **--min-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) _(default: undefined)_\n- **--gap** - Vertical gap spacing between main content items [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_",
       "attributes": [
         {
           "name": "document-scroll",

package/dist/date/date2.js

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

package/dist/datetime/datetime2.js

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

package/dist/dialog/dialog-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dialog-footer",
-			version: "2.2.2",
+			version: "2.2.3",
 			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: "2.2.2",
+			version: "2.2.3",
 			parents: ["nve-dialog"]
 		};
 	}

package/dist/dialog/dialog2.js

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

package/dist/divider/divider2.js

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

package/dist/dot/dot2.js

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

package/dist/drawer/drawer-content2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-content",
-			version: "2.2.2",
+			version: "2.2.3",
 			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: "2.2.2",
+			version: "2.2.3",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer-header2.js

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

package/dist/drawer/drawer2.js

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

package/dist/dropdown/dropdown-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-footer",
-			version: "2.2.2",
+			version: "2.2.3",
 			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: "2.2.2",
+			version: "2.2.3",
 			parents: ["nve-dropdown"]
 		};
 	}

package/dist/dropdown/dropdown2.js

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

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

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

package/dist/dropzone/dropzone2.js

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

package/dist/file/file2.js

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

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

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

package/dist/format-number/format-number2.js

@@ -29,7 +29,7 @@ var c = [
 	static {
 		this.metadata = {
 			tag: "nve-format-number",
-			version: "2.2.2"
+			version: "2.2.3"
 		};
 	}
 	get #e() {

package/dist/format-relative-time/format-relative-time2.js

@@ -53,7 +53,7 @@ var c = {
 	static {
 		this.metadata = {
 			tag: "nve-format-relative-time",
-			version: "2.2.2"
+			version: "2.2.3"
 		};
 	}
 	#e;

package/dist/forms/control/control.js

@@ -1,5 +1,5 @@
 //#region src/forms/control/control.css?inline
-var e = ":host{--cursor: pointer;--accent-color: var(--nve-sys-accent-secondary-background);--color: var(--nve-sys-interaction-field-color);--label-color: var(--nve-sys-interaction-field-color);--label-text-transform: none;--label-font-weight: var(--nve-ref-font-weight-medium);--label-font-size: var(--nve-ref-font-size-100);--control-width: 100%;--control-height: var(--nve-sys-interaction-field-height);--_label-width: var(--label-width, 180px);--nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));--opacity: 1;--filter: none;contain:content}::slotted(*){color-scheme:var(--nve-sys-color-scheme);font-family:inherit}::slotted(label){font-weight:var(--label-font-weight)!important;font-size:var(--label-font-size)!important;color:var(--label-color)!important;cursor:var(--cursor)!important;text-transform:var(--label-text-transform)!important;display:inline-block!important;line-height:1em!important;align-self:center!important}:host(:state(disabled)),:host(:state(disabled)) ::slotted(nve-control-message:not([status])){--cursor: not-allowed}:host(:state(disabled)){--opacity: var(--nve-ref-opacity-500)}:host(:state(invalid)) ::slotted(nve-control-message:not([error],[status])){display:none}:host([fit-content]){--control-width: fit-content;--label-width: fit-content;--width: fit-content}:host([nve-control]) ::slotted(input:focus),:host([nve-control]) ::slotted(select:focus),:host([nve-control]) ::slotted(textarea:focus),:host([nve-control]:focus-within) [internal-host]:has(nve-icon-button:focus) [input],[internal-host]:has(nve-icon-button){outline:0!important}@container style(--control-type: custom){[input]{outline:0!important}}::slotted(nve-button[nve-control]){width:100%}[input]{cursor:var(--cursor);min-height:var(--control-height);opacity:var(--opacity);filter:var(--filter);grid-area:input;display:flex;line-height:1}:host([nve-control=\"inline\"]){[internal-host]{min-height:var(--control-height)}[input]{min-height:min-content}}slot{line-height:1;width:100%}slot[name=label]{grid-area:label;display:inline-flex;align-self:center}slot[name=messages]{grid-area:messages;display:inline-flex}[name=messages]:not(:has-slotted),[name=label]:not(:has-slotted){display:none!important}[internal-host]{display:grid;width:100%;gap:var(--nve-ref-space-xs);grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto;grid-template-areas:\"input input input\"}:host([nve-control=\"inline\"]) [internal-host]{align-items:center;grid-template-columns:auto 1fr 1fr;slot[name=label],slot[name=messages]{align-items:center}::slotted(label){font-weight:var(--nve-ref-font-weight-regular)!important;color:var(--color)!important;width:100%}slot[name=label]{line-height:1;width:100%}}:host([layout=\"horizontal\"]) [internal-host],:host([layout=\"horizontal-inline\"]) [internal-host]{grid-template-columns:var(--_label-width) 1fr minmax(0,var(--_label-width))}[internal-host]{&:has([name=label]:has-slotted){grid-template-areas:\"label label label\" \"input input input\"}&:has([name=messages]:has-slotted){grid-template-areas:\"input input input\" \"messages messages messages\"}&:has([name=label]:has-slotted):has([name=messages]:has-slotted){grid-template-areas:\"label label label\" \"input input input\" \"messages messages messages\"}}:host([layout=\"horizontal\"]),:host([layout=\"horizontal-inline\"]){[internal-host]{&:has([name=messages]:has-slotted){grid-template-areas:\"label input input\" \". messages messages\"}&:not(:has([name=messages]:has-slotted)){grid-template-areas:\"label input input\"}}}:host([nve-control=\"inline\"]){--control-height: auto;width:fit-content;[internal-host]{grid-template-areas:\"input input input\";&:has([name=label]:has-slotted){grid-template-areas:\"input label label\"}&:has([name=messages]:has-slotted){grid-template-areas:\"input input input\" \"messages messages messages\"}&:has([name=label]:has-slotted):has([name=messages]:has-slotted){grid-template-areas:\"input label label\" \"messages messages messages\"}}}";
+var e = ":host{--cursor: pointer;--accent-color: var(--nve-sys-accent-secondary-background);--color: var(--nve-sys-interaction-field-color);--label-color: var(--nve-sys-interaction-field-color);--label-text-transform: none;--label-font-weight: var(--nve-ref-font-weight-medium);--label-font-size: var(--nve-ref-font-size-100);--control-width: 100%;--control-height: var(--nve-sys-interaction-field-height);--_label-width: var(--label-width, 180px);--nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));--opacity: 1;--filter: none;contain:content}::slotted(*){color-scheme:var(--nve-sys-color-scheme);font-family:inherit}::slotted(label){font-weight:var(--label-font-weight)!important;font-size:var(--label-font-size)!important;color:var(--label-color)!important;cursor:var(--cursor)!important;text-transform:var(--label-text-transform)!important;display:inline-block!important;line-height:1em!important;align-self:center!important}:host(:state(disabled)),:host(:state(disabled)) ::slotted(nve-control-message:not([status])){--cursor: not-allowed}:host(:state(disabled)){--opacity: var(--nve-ref-opacity-500)}:host(:state(invalid)) ::slotted(nve-control-message:not([error],[status])){display:none}:host([fit-content]){--control-width: fit-content;--label-width: fit-content;--width: fit-content}:host([fit-text]){--max-width: fit-content;--width: fit-content;::slotted(input),::slotted(select){field-sizing:content}}:host([nve-control]) ::slotted(input:focus),:host([nve-control]) ::slotted(select:focus),:host([nve-control]) ::slotted(textarea:focus),:host([nve-control]:focus-within) [internal-host]:has(nve-icon-button:focus) [input],[internal-host]:has(nve-icon-button){outline:0!important}@container style(--control-type: custom){[input]{outline:0!important}}::slotted(nve-button[nve-control]){width:100%}[input]{cursor:var(--cursor);min-height:var(--control-height);opacity:var(--opacity);filter:var(--filter);grid-area:input;display:flex;line-height:1}:host([nve-control=\"inline\"]){[internal-host]{min-height:var(--control-height)}[input]{min-height:min-content}}slot{line-height:1;width:100%}slot[name=label]{grid-area:label;display:inline-flex;align-self:center}slot[name=messages]{grid-area:messages;display:inline-flex}[name=messages]:not(:has-slotted),[name=label]:not(:has-slotted){display:none!important}[internal-host]{display:grid;width:100%;gap:var(--nve-ref-space-xs);grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto;grid-template-areas:\"input input input\"}:host([nve-control=\"inline\"]) [internal-host]{align-items:center;grid-template-columns:auto 1fr 1fr;slot[name=label],slot[name=messages]{align-items:center}::slotted(label){font-weight:var(--nve-ref-font-weight-regular)!important;color:var(--color)!important;width:100%}slot[name=label]{line-height:1;width:100%}}:host([layout=\"horizontal\"]) [internal-host],:host([layout=\"horizontal-inline\"]) [internal-host]{grid-template-columns:var(--_label-width) 1fr minmax(0,var(--_label-width))}[internal-host]{&:has([name=label]:has-slotted){grid-template-areas:\"label label label\" \"input input input\"}&:has([name=messages]:has-slotted){grid-template-areas:\"input input input\" \"messages messages messages\"}&:has([name=label]:has-slotted):has([name=messages]:has-slotted){grid-template-areas:\"label label label\" \"input input input\" \"messages messages messages\"}}:host([layout=\"horizontal\"]),:host([layout=\"horizontal-inline\"]){[internal-host]{&:has([name=messages]:has-slotted){grid-template-areas:\"label input input\" \". messages messages\"}&:not(:has([name=messages]:has-slotted)){grid-template-areas:\"label input input\"}}}:host([nve-control=\"inline\"]){--control-height: auto;width:fit-content;[internal-host]{grid-template-areas:\"input input input\";&:has([name=label]:has-slotted){grid-template-areas:\"input label label\"}&:has([name=messages]:has-slotted){grid-template-areas:\"input input input\" \"messages messages messages\"}&:has([name=label]:has-slotted):has([name=messages]:has-slotted){grid-template-areas:\"input label label\" \"messages messages messages\"}}}";
 //#endregion
 export { e as default };
 

package/dist/forms/control/control.js.map

@@ -1 +1 @@
-{"version":3,"file":"control.js","names":[],"sources":["../../../src/forms/control/control.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --cursor: pointer;\n  --accent-color: var(--nve-sys-accent-secondary-background);\n  --color: var(--nve-sys-interaction-field-color);\n  --label-color: var(--nve-sys-interaction-field-color);\n  --label-text-transform: none;\n  --label-font-weight: var(--nve-ref-font-weight-medium);\n  --label-font-size: var(--nve-ref-font-size-100);\n  --control-width: 100%;\n  --control-height: var(--nve-sys-interaction-field-height);\n  --_label-width: var(--label-width, 180px);\n  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  --opacity: 1;\n  --filter: none;\n  contain: content;\n}\n\n::slotted(*) {\n  color-scheme: var(--nve-sys-color-scheme);\n  font-family: inherit;\n}\n\n::slotted(label) {\n  font-weight: var(--label-font-weight) !important;\n  font-size: var(--label-font-size) !important;\n  color: var(--label-color) !important;\n  cursor: var(--cursor) !important;\n  text-transform: var(--label-text-transform) !important;\n  display: inline-block !important;\n  line-height: 1em !important;\n  align-self: center !important;\n}\n\n:host(:state(disabled)),\n:host(:state(disabled)) ::slotted(nve-control-message:not([status])) {\n  --cursor: not-allowed;\n}\n\n:host(:state(disabled)) {\n  --opacity: var(--nve-ref-opacity-500);\n}\n\n:host(:state(invalid)) ::slotted(nve-control-message:not([error], [status])) {\n  display: none;\n}\n\n:host([fit-content]) {\n  --control-width: fit-content;\n  --label-width: fit-content;\n  --width: fit-content;\n}\n\n:host([nve-control]) ::slotted(input:focus),\n:host([nve-control]) ::slotted(select:focus),\n:host([nve-control]) ::slotted(textarea:focus),\n:host([nve-control]:focus-within) [internal-host]:has(nve-icon-button:focus) [input],\n[internal-host]:has(nve-icon-button) {\n  outline: 0 !important;\n}\n\n@container style(--control-type: custom) {\n  [input] {\n    outline: 0 !important;\n  }\n}\n\n::slotted(nve-button[nve-control]) {\n  width: 100%;\n}\n\n[input] {\n  cursor: var(--cursor);\n  min-height: var(--control-height);\n  opacity: var(--opacity);\n  filter: var(--filter);\n  grid-area: input;\n  display: flex;\n  line-height: 1;\n}\n\n:host([nve-control='inline']) {\n  [internal-host] {\n    min-height: var(--control-height);\n  }\n\n  [input] {\n    min-height: min-content;\n  }\n}\n\nslot {\n  line-height: 1;\n  width: 100%;\n}\n\nslot[name='label'] {\n  grid-area: label;\n  display: inline-flex;\n  align-self: center;\n}\n\nslot[name='messages'] {\n  grid-area: messages;\n  display: inline-flex;\n}\n\n[name='messages']:not(:has-slotted),\n[name='label']:not(:has-slotted) {\n  display: none !important;\n}\n\n[internal-host] {\n  display: grid;\n  width: 100%;\n  gap: var(--nve-ref-space-xs);\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-rows: auto;\n  grid-template-areas: 'input input input';\n}\n\n:host([nve-control='inline']) [internal-host] {\n  align-items: center;\n  grid-template-columns: auto 1fr 1fr;\n\n  slot[name='label'],\n  slot[name='messages'] {\n    align-items: center;\n  }\n\n  & ::slotted(label) {\n    font-weight: var(--nve-ref-font-weight-regular) !important;\n    color: var(--color) !important;\n    width: 100%;\n  }\n\n  slot[name='label'] {\n    line-height: 1;\n    width: 100%;\n  }\n}\n\n:host([layout='horizontal']) [internal-host],\n:host([layout='horizontal-inline']) [internal-host] {\n  grid-template-columns: var(--_label-width) 1fr minmax(0, var(--_label-width));\n}\n\n/** block controls */\n[internal-host] {\n  &:has([name='label']:has-slotted) {\n    grid-template-areas:\n      'label label label'\n      'input input input';\n  }\n\n  &:has([name='messages']:has-slotted) {\n    grid-template-areas:\n      'input input input'\n      'messages messages messages';\n  }\n\n  &:has([name='label']:has-slotted):has([name='messages']:has-slotted) {\n    grid-template-areas:\n      'label label label'\n      'input input input'\n      'messages messages messages';\n  }\n}\n\n:host([layout='horizontal']),\n:host([layout='horizontal-inline']) {\n  [internal-host] {\n    &:has([name='messages']:has-slotted) {\n      grid-template-areas:\n        'label input input'\n        '. messages messages';\n    }\n\n    &:not(:has([name='messages']:has-slotted)) {\n      grid-template-areas: 'label input input';\n    }\n  }\n}\n\n/** inline controls */\n:host([nve-control='inline']) {\n  --control-height: auto;\n  width: fit-content;\n\n  [internal-host] {\n    grid-template-areas: 'input input input';\n\n    &:has([name='label']:has-slotted) {\n      grid-template-areas: 'input label label';\n    }\n\n    &:has([name='messages']:has-slotted) {\n      grid-template-areas:\n        'input input input'\n        'messages messages messages';\n    }\n\n    &:has([name='label']:has-slotted):has([name='messages']:has-slotted) {\n      grid-template-areas:\n        'input label label'\n        'messages messages messages';\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"control.js","names":[],"sources":["../../../src/forms/control/control.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --cursor: pointer;\n  --accent-color: var(--nve-sys-accent-secondary-background);\n  --color: var(--nve-sys-interaction-field-color);\n  --label-color: var(--nve-sys-interaction-field-color);\n  --label-text-transform: none;\n  --label-font-weight: var(--nve-ref-font-weight-medium);\n  --label-font-size: var(--nve-ref-font-size-100);\n  --control-width: 100%;\n  --control-height: var(--nve-sys-interaction-field-height);\n  --_label-width: var(--label-width, 180px);\n  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  --opacity: 1;\n  --filter: none;\n  contain: content;\n}\n\n::slotted(*) {\n  color-scheme: var(--nve-sys-color-scheme);\n  font-family: inherit;\n}\n\n::slotted(label) {\n  font-weight: var(--label-font-weight) !important;\n  font-size: var(--label-font-size) !important;\n  color: var(--label-color) !important;\n  cursor: var(--cursor) !important;\n  text-transform: var(--label-text-transform) !important;\n  display: inline-block !important;\n  line-height: 1em !important;\n  align-self: center !important;\n}\n\n:host(:state(disabled)),\n:host(:state(disabled)) ::slotted(nve-control-message:not([status])) {\n  --cursor: not-allowed;\n}\n\n:host(:state(disabled)) {\n  --opacity: var(--nve-ref-opacity-500);\n}\n\n:host(:state(invalid)) ::slotted(nve-control-message:not([error], [status])) {\n  display: none;\n}\n\n:host([fit-content]) {\n  --control-width: fit-content;\n  --label-width: fit-content;\n  --width: fit-content;\n}\n\n:host([fit-text]) {\n  --max-width: fit-content;\n  --width: fit-content;\n\n  ::slotted(input),\n  ::slotted(select) {\n    field-sizing: content;\n  }\n}\n\n:host([nve-control]) ::slotted(input:focus),\n:host([nve-control]) ::slotted(select:focus),\n:host([nve-control]) ::slotted(textarea:focus),\n:host([nve-control]:focus-within) [internal-host]:has(nve-icon-button:focus) [input],\n[internal-host]:has(nve-icon-button) {\n  outline: 0 !important;\n}\n\n@container style(--control-type: custom) {\n  [input] {\n    outline: 0 !important;\n  }\n}\n\n::slotted(nve-button[nve-control]) {\n  width: 100%;\n}\n\n[input] {\n  cursor: var(--cursor);\n  min-height: var(--control-height);\n  opacity: var(--opacity);\n  filter: var(--filter);\n  grid-area: input;\n  display: flex;\n  line-height: 1;\n}\n\n:host([nve-control='inline']) {\n  [internal-host] {\n    min-height: var(--control-height);\n  }\n\n  [input] {\n    min-height: min-content;\n  }\n}\n\nslot {\n  line-height: 1;\n  width: 100%;\n}\n\nslot[name='label'] {\n  grid-area: label;\n  display: inline-flex;\n  align-self: center;\n}\n\nslot[name='messages'] {\n  grid-area: messages;\n  display: inline-flex;\n}\n\n[name='messages']:not(:has-slotted),\n[name='label']:not(:has-slotted) {\n  display: none !important;\n}\n\n[internal-host] {\n  display: grid;\n  width: 100%;\n  gap: var(--nve-ref-space-xs);\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-rows: auto;\n  grid-template-areas: 'input input input';\n}\n\n:host([nve-control='inline']) [internal-host] {\n  align-items: center;\n  grid-template-columns: auto 1fr 1fr;\n\n  slot[name='label'],\n  slot[name='messages'] {\n    align-items: center;\n  }\n\n  & ::slotted(label) {\n    font-weight: var(--nve-ref-font-weight-regular) !important;\n    color: var(--color) !important;\n    width: 100%;\n  }\n\n  slot[name='label'] {\n    line-height: 1;\n    width: 100%;\n  }\n}\n\n:host([layout='horizontal']) [internal-host],\n:host([layout='horizontal-inline']) [internal-host] {\n  grid-template-columns: var(--_label-width) 1fr minmax(0, var(--_label-width));\n}\n\n/** block controls */\n[internal-host] {\n  &:has([name='label']:has-slotted) {\n    grid-template-areas:\n      'label label label'\n      'input input input';\n  }\n\n  &:has([name='messages']:has-slotted) {\n    grid-template-areas:\n      'input input input'\n      'messages messages messages';\n  }\n\n  &:has([name='label']:has-slotted):has([name='messages']:has-slotted) {\n    grid-template-areas:\n      'label label label'\n      'input input input'\n      'messages messages messages';\n  }\n}\n\n:host([layout='horizontal']),\n:host([layout='horizontal-inline']) {\n  [internal-host] {\n    &:has([name='messages']:has-slotted) {\n      grid-template-areas:\n        'label input input'\n        '. messages messages';\n    }\n\n    &:not(:has([name='messages']:has-slotted)) {\n      grid-template-areas: 'label input input';\n    }\n  }\n}\n\n/** inline controls */\n:host([nve-control='inline']) {\n  --control-height: auto;\n  width: fit-content;\n\n  [internal-host] {\n    grid-template-areas: 'input input input';\n\n    &:has([name='label']:has-slotted) {\n      grid-template-areas: 'input label label';\n    }\n\n    &:has([name='messages']:has-slotted) {\n      grid-template-areas:\n        'input input input'\n        'messages messages messages';\n    }\n\n    &:has([name='label']:has-slotted):has([name='messages']:has-slotted) {\n      grid-template-areas:\n        'input label label'\n        'messages messages messages';\n    }\n  }\n}\n"],"mappings":""}

package/dist/forms/control/control2.js

@@ -15,11 +15,9 @@ import { property as S } from "lit/decorators/property.js";
 var C = class extends v {
 	constructor(...t) {
 		super(...t), this.fitText = !1, this.fitContent = !1, this.#e = new e(this), this.i18n = this.#e.i18n, this.nveControl = "", this.#i = [], this._associateDatalist = !0, this.#a = () => {
-			this.#h(), this.input && this.#i.length === 0 && (this.#l(), this.#d());
+			this.#f(), this.input && this.#i.length === 0 && this.#l();
 		}, this.#u = () => {
-			this.#h(), this.#g();
-		}, this.#f = () => {
-			this.#p();
+			this.#f(), this.#p();
 		};
 	}
 	#e;
@@ -50,7 +48,7 @@ var C = class extends v {
 	static {
 		this.metadata = {
 			tag: "nve-control",
-			version: "2.2.2"
+			version: "2.2.3"
 		};
 	}
 	render() {
@@ -60,7 +58,7 @@ var C = class extends v {
 		super.connectedCallback(), o(this), t(this, g), this.shadowRoot.addEventListener("slotchange", this.#a);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.shadowRoot.removeEventListener("slotchange", this.#a), this.shadowRoot.removeEventListener("slotchange", this.#u), this.fitText && this.input && (this.input.removeEventListener("input", this.#f), this.input.removeEventListener("change", this.#f)), this.#i.forEach((e) => e.disconnect()), this.#i.length = 0;
+		super.disconnectedCallback(), this.shadowRoot.removeEventListener("slotchange", this.#a), this.shadowRoot.removeEventListener("slotchange", this.#u), this.#i.forEach((e) => e.disconnect()), this.#i.length = 0;
 	}
 	#a;
 	reset() {
@@ -88,29 +86,19 @@ var C = class extends v {
 		return e instanceof HTMLInputElement && (e.type === "checkbox" || e.type === "radio");
 	}
 	#l() {
-		this.#i.push(...m(this, this.#n), ...f(this), ...p(this, this.#n), h(this), n(this, ["hidden", "status"], () => this.#h())), this.#m(), this.#g(), this.shadowRoot.addEventListener("slotchange", this.#u);
+		this.#i.push(...m(this, this.#n), ...f(this), ...p(this, this.#n), h(this), n(this, ["hidden", "status"], () => this.#f())), this.#d(), this.#p(), this.shadowRoot.addEventListener("slotchange", this.#u);
 	}
 	#u;
 	#d() {
-		this.fitText && (this.#p(), this.input.addEventListener("input", this.#f), this.input.addEventListener("change", this.#f));
-	}
-	#f;
-	#p() {
-		if (this.input.tagName === "INPUT") {
-			let e = this.input.type === "text" ? 0 : 4;
-			this.style.setProperty("--control-width", `${this.input.value.length + e}ch`), this.input.style.setProperty("max-width", `${this.input.value.length + 2}ch`, "important");
-		} else this.input.tagName === "SELECT" && this.style.setProperty("--control-width", `${this.input.options[this.input.selectedIndex].textContent.length + 4}ch`);
-	}
-	#m() {
 		this.input.showPicker || (this.input.showPicker = () => this.input.focus());
 	}
-	#h() {
+	#f() {
 		this.input && (this.toggleAttribute("multiple", this.input?.multiple), this.input?.hasAttribute("size") ? this.setAttribute("size", "") : this.removeAttribute("size"));
 	}
-	#g() {
-		this.#_(), a(this.#t, this.input), r(Array.from(this.#n), this.input), this._associateDatalist && i(this.querySelector("datalist"), this.input);
+	#p() {
+		this.#m(), a(this.#t, this.input), r(Array.from(this.#n), this.input), this._associateDatalist && i(this.querySelector("datalist"), this.input);
 	}
-	#_() {
+	#m() {
 		let e = this.querySelector("label") || this.shadowRoot.querySelector("slot").assignedNodes({ flatten: !0 }).find((e) => e.tagName === "LABEL");
 		e && (e.slot = "label");
 	}