@nvidia-elements/core 2.7.3 → 2.8.1

package/dist/tag/tag.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.examples.js","names":[],"sources":["../../src/tag/tag.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/tag/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\n\nexport default {\n  title: 'Elements/Tag',\n  component: 'nve-tag',\n};\n\n/**\n * @summary Basic tag component for interactive labeling and categorizing of content, providing clear visual organization and metadata display.\n */\nexport const Default = {\n  render: () => html`\n<nve-tag>topic-tag</nve-tag>`\n};\n\n/**\n * @summary Closable tags with comprehensive color palette, enabling user interaction for filtering, selection, and dynamic content management.\n * @tags test-case\n */\nexport const Closable = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag closable>default-color</nve-tag>\n  <nve-tag closable color=\"red-cardinal\">red-cardinal</nve-tag>\n  <nve-tag closable color=\"gray-slate\">gray-slate</nve-tag>\n  <nve-tag closable color=\"gray-denim\">gray-denim</nve-tag>\n  <nve-tag closable color=\"blue-indigo\">blue-indigo</nve-tag>\n  <nve-tag closable color=\"blue-cobalt\">blue-cobalt</nve-tag>\n  <nve-tag closable color=\"blue-sky\">blue-sky</nve-tag>\n  <nve-tag closable color=\"teal-cyan\">teal-cyan</nve-tag>\n  <nve-tag closable color=\"green-mint\">green-mint</nve-tag>\n  <nve-tag closable color=\"teal-seafoam\">teal-seafoam</nve-tag>\n  <nve-tag closable color=\"green-grass\">green-grass</nve-tag>\n  <nve-tag closable color=\"yellow-amber\">yellow-amber</nve-tag>\n  <nve-tag closable color=\"orange-pumpkin\">orange-pumpkin</nve-tag>\n  <nve-tag closable color=\"red-tomato\">red-tomato</nve-tag>\n  <nve-tag closable color=\"pink-magenta\">pink-magenta</nve-tag>\n  <nve-tag closable color=\"purple-plum\">purple-plum</nve-tag>\n  <nve-tag closable color=\"purple-violet\">purple-violet</nve-tag>\n  <nve-tag closable color=\"purple-lavender\">purple-lavender</nve-tag>\n  <nve-tag closable color=\"pink-rose\">pink-rose</nve-tag>\n  <nve-tag closable color=\"green-jade\">green-jade</nve-tag>\n  <nve-tag closable color=\"lime-pear\">lime-pear</nve-tag>\n  <nve-tag closable color=\"yellow-nova\">yellow-nova</nve-tag>\n  <nve-tag closable color=\"brand-green\">brand-green</nve-tag>\n</div>`\n};\n\n/**\n * @summary Read-only tags for displaying static labels and metadata, providing visual context without user interaction capabilities.\n */\nexport const Readonly = {\n  render: () => html`\n<nve-tag readonly>topic-tag</nve-tag>`\n};\n\n/**\n * @summary Tag group layout with overflow handling and add functionality, ideal for managing many categories with space constraints.\n */\nexport const Group = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:vertical-center\">\n  <nve-tag>topic-tag</nve-tag>\n  <nve-tag>topic-tag</nve-tag>\n  <nve-tag>topic-tag</nve-tag>\n  <nve-tag>3+</nve-tag>\n  <nve-icon-button container=\"flat\" size=\"sm\" icon-name=\"add\"></nve-icon-button>\n</div>`\n};\n\n/**\n * @summary Comprehensive color palette for tag backgrounds, enabling visual categorization and brand consistency across different content types.\n */\nexport const Color = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag>default-color</nve-tag>\n  <nve-tag color=\"red-cardinal\">red-cardinal</nve-tag>\n  <nve-tag color=\"gray-slate\">gray-slate</nve-tag>\n  <nve-tag color=\"gray-denim\">gray-denim</nve-tag>\n  <nve-tag color=\"blue-indigo\">blue-indigo</nve-tag>\n  <nve-tag color=\"blue-cobalt\">blue-cobalt</nve-tag>\n  <nve-tag color=\"blue-sky\">blue-sky</nve-tag>\n  <nve-tag color=\"teal-cyan\">teal-cyan</nve-tag>\n  <nve-tag color=\"green-mint\">green-mint</nve-tag>\n  <nve-tag color=\"teal-seafoam\">teal-seafoam</nve-tag>\n  <nve-tag color=\"green-grass\">green-grass</nve-tag>\n  <nve-tag color=\"yellow-amber\">yellow-amber</nve-tag>\n  <nve-tag color=\"orange-pumpkin\">orange-pumpkin</nve-tag>\n  <nve-tag color=\"red-tomato\">red-tomato</nve-tag>\n  <nve-tag color=\"pink-magenta\">pink-magenta</nve-tag>\n  <nve-tag color=\"purple-plum\">purple-plum</nve-tag>\n  <nve-tag color=\"purple-violet\">purple-violet</nve-tag>\n  <nve-tag color=\"purple-lavender\">purple-lavender</nve-tag>\n  <nve-tag color=\"pink-rose\">pink-rose</nve-tag>\n  <nve-tag color=\"green-jade\">green-jade</nve-tag>\n  <nve-tag color=\"lime-pear\">lime-pear</nve-tag>\n  <nve-tag color=\"yellow-nova\">yellow-nova</nve-tag>\n  <nve-tag color=\"brand-green\">brand-green</nve-tag>\n</div>\n  `\n};\n\n/**\n * @summary High prominence tags with emphasis styling for important categories and priority labels that require visual attention.\n */\nexport const Prominence = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag prominence=\"emphasis\" color=\"red-cardinal\">red-cardinal</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"gray-slate\">gray-slate</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"gray-denim\">gray-denim</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"blue-indigo\">blue-indigo</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"blue-cobalt\">blue-cobalt</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"blue-sky\">blue-sky</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"teal-cyan\">teal-cyan</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"green-mint\">green-mint</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"teal-seafoam\">teal-seafoam</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"green-grass\">green-grass</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"yellow-amber\">yellow-amber</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"orange-pumpkin\">orange-pumpkin</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"red-tomato\">red-tomato</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"pink-magenta\">pink-magenta</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"purple-plum\">purple-plum</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"purple-violet\">purple-violet</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"purple-lavender\">purple-lavender</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"pink-rose\">pink-rose</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"green-jade\">green-jade</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"lime-pear\">lime-pear</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"yellow-nova\">yellow-nova</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"brand-green\">brand-green</nve-tag>\n</div>`\n};\n\n\n/**\n * @summary Single tag with constrained width, with text overflow behavior and content truncation in limited space.\n * @tags test-case\n */\nexport const OverflowSingle = {\n  render: () => html`\n<nve-tag style=\"--width: 150px\">some really long content</nve-tag>`\n};\n\n\n/**\n * @summary Many tags with max width constraints, showing how content adapts to space limitations and maintains visual consistency.\n * @tags test-case\n */\nexport const OverflowMaxWidth= {\n  render: () => html`\n  <style>\n    .limit-width {\n      --max-width: 100px;\n    }\n  </style>\n  <nve-tag class=\"limit-width\">two words</nve-tag>\n  <nve-tag class=\"limit-width\">three words here</nve-tag>\n  <nve-tag class=\"limit-width\">four words long here</nve-tag>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"tag.examples.js","names":[],"sources":["../../src/tag/tag.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/tag/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\n\nexport default {\n  title: 'Elements/Tag',\n  component: 'nve-tag',\n};\n\n/**\n * @summary Basic tag component for interactive labeling and categorizing of content, providing clear visual organization and metadata display.\n */\nexport const Default = {\n  render: () => html`\n<nve-tag>topic-tag</nve-tag>`\n};\n\n/**\n * @summary Closable tags with comprehensive color palette, enabling user interaction for filtering, selection, and dynamic content management.\n * @tags test-case\n */\nexport const Closable = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag closable>default-color</nve-tag>\n  <nve-tag closable color=\"red-cardinal\">red-cardinal</nve-tag>\n  <nve-tag closable color=\"gray-slate\">gray-slate</nve-tag>\n  <nve-tag closable color=\"gray-denim\">gray-denim</nve-tag>\n  <nve-tag closable color=\"blue-indigo\">blue-indigo</nve-tag>\n  <nve-tag closable color=\"blue-cobalt\">blue-cobalt</nve-tag>\n  <nve-tag closable color=\"blue-sky\">blue-sky</nve-tag>\n  <nve-tag closable color=\"teal-cyan\">teal-cyan</nve-tag>\n  <nve-tag closable color=\"green-mint\">green-mint</nve-tag>\n  <nve-tag closable color=\"teal-seafoam\">teal-seafoam</nve-tag>\n  <nve-tag closable color=\"green-grass\">green-grass</nve-tag>\n  <nve-tag closable color=\"yellow-amber\">yellow-amber</nve-tag>\n  <nve-tag closable color=\"orange-pumpkin\">orange-pumpkin</nve-tag>\n  <nve-tag closable color=\"red-tomato\">red-tomato</nve-tag>\n  <nve-tag closable color=\"pink-magenta\">pink-magenta</nve-tag>\n  <nve-tag closable color=\"purple-plum\">purple-plum</nve-tag>\n  <nve-tag closable color=\"purple-violet\">purple-violet</nve-tag>\n  <nve-tag closable color=\"purple-lavender\">purple-lavender</nve-tag>\n  <nve-tag closable color=\"pink-rose\">pink-rose</nve-tag>\n  <nve-tag closable color=\"green-jade\">green-jade</nve-tag>\n  <nve-tag closable color=\"lime-pear\">lime-pear</nve-tag>\n  <nve-tag closable color=\"yellow-nova\">yellow-nova</nve-tag>\n  <nve-tag closable color=\"brand-green\">brand-green</nve-tag>\n</div>`\n};\n\n/**\n * @summary Read-only tags for displaying static labels and metadata, providing visual context without user interaction capabilities.\n * @tags test-case\n */\nexport const Readonly = {\n  render: () => html`\n<nve-tag readonly>topic-tag</nve-tag>`\n};\n\n/**\n * @summary Tag group layout with overflow handling and add functionality, ideal for managing many categories with space constraints.\n */\nexport const Group = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:vertical-center\">\n  <nve-tag>topic-tag</nve-tag>\n  <nve-tag>topic-tag</nve-tag>\n  <nve-tag>topic-tag</nve-tag>\n  <nve-tag>3+</nve-tag>\n  <nve-icon-button container=\"flat\" size=\"sm\" icon-name=\"add\"></nve-icon-button>\n</div>`\n};\n\n/**\n * @summary Comprehensive color palette for tag backgrounds, enabling visual categorization and brand consistency across different content types.\n * @tags test-case\n */\nexport const Color = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag>default-color</nve-tag>\n  <nve-tag color=\"red-cardinal\">red-cardinal</nve-tag>\n  <nve-tag color=\"gray-slate\">gray-slate</nve-tag>\n  <nve-tag color=\"gray-denim\">gray-denim</nve-tag>\n  <nve-tag color=\"blue-indigo\">blue-indigo</nve-tag>\n  <nve-tag color=\"blue-cobalt\">blue-cobalt</nve-tag>\n  <nve-tag color=\"blue-sky\">blue-sky</nve-tag>\n  <nve-tag color=\"teal-cyan\">teal-cyan</nve-tag>\n  <nve-tag color=\"green-mint\">green-mint</nve-tag>\n  <nve-tag color=\"teal-seafoam\">teal-seafoam</nve-tag>\n  <nve-tag color=\"green-grass\">green-grass</nve-tag>\n  <nve-tag color=\"yellow-amber\">yellow-amber</nve-tag>\n  <nve-tag color=\"orange-pumpkin\">orange-pumpkin</nve-tag>\n  <nve-tag color=\"red-tomato\">red-tomato</nve-tag>\n  <nve-tag color=\"pink-magenta\">pink-magenta</nve-tag>\n  <nve-tag color=\"purple-plum\">purple-plum</nve-tag>\n  <nve-tag color=\"purple-violet\">purple-violet</nve-tag>\n  <nve-tag color=\"purple-lavender\">purple-lavender</nve-tag>\n  <nve-tag color=\"pink-rose\">pink-rose</nve-tag>\n  <nve-tag color=\"green-jade\">green-jade</nve-tag>\n  <nve-tag color=\"lime-pear\">lime-pear</nve-tag>\n  <nve-tag color=\"yellow-nova\">yellow-nova</nve-tag>\n  <nve-tag color=\"brand-green\">brand-green</nve-tag>\n</div>\n  `\n};\n\n/**\n * @summary High prominence tags with emphasis styling for important categories and priority labels that require visual attention.\n * @tags test-case\n */\nexport const Prominence = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag prominence=\"emphasis\" color=\"red-cardinal\">red-cardinal</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"gray-slate\">gray-slate</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"gray-denim\">gray-denim</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"blue-indigo\">blue-indigo</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"blue-cobalt\">blue-cobalt</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"blue-sky\">blue-sky</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"teal-cyan\">teal-cyan</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"green-mint\">green-mint</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"teal-seafoam\">teal-seafoam</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"green-grass\">green-grass</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"yellow-amber\">yellow-amber</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"orange-pumpkin\">orange-pumpkin</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"red-tomato\">red-tomato</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"pink-magenta\">pink-magenta</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"purple-plum\">purple-plum</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"purple-violet\">purple-violet</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"purple-lavender\">purple-lavender</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"pink-rose\">pink-rose</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"green-jade\">green-jade</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"lime-pear\">lime-pear</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"yellow-nova\">yellow-nova</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"brand-green\">brand-green</nve-tag>\n</div>`\n};\n\n/**\n * @summary Tag with icon, showing how the icon/dot color inherits the tag color.\n * @tags test-case\n */\nexport const SlottedColor = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag style=\"--max-width: 100px\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> very words long here <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> default <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"red-cardinal\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> red-cardinal <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"gray-slate\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> gray-slate <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"gray-denim\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> gray-denim <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"blue-indigo\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> blue-indigo <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"blue-cobalt\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> blue-cobalt <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"blue-sky\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> blue-sky <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"teal-cyan\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> teal-cyan <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"green-mint\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> green-mint <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"teal-seafoam\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> teal-seafoam <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"green-grass\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> green-grass <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"yellow-amber\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> yellow-amber <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"orange-pumpkin\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> orange-pumpkin <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"red-tomato\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> red-tomato <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"pink-magenta\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> pink-magenta <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"purple-plum\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> purple-plum <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"purple-violet\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> purple-violet <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"purple-lavender\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> purple-lavender <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"pink-rose\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> pink-rose <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"green-jade\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> green-jade <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"lime-pear\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> lime-pear <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"yellow-nova\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> yellow-nova <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"brand-green\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> brand-green <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n</div>\n  `\n};\n\n/**\n * @summary Single tag with constrained width, with text overflow behavior and content truncation in limited space.\n * @tags test-case\n */\nexport const OverflowSingle = {\n  render: () => html`\n<nve-tag style=\"--width: 150px\">some really long content</nve-tag>`\n};\n\n\n/**\n * @summary Many tags with max width constraints, showing how content adapts to space limitations and maintains visual consistency.\n * @tags test-case\n */\nexport const OverflowMaxWidth= {\n  render: () => html`\n  <style>\n    .limit-width {\n      --max-width: 100px;\n    }\n  </style>\n  <nve-tag class=\"limit-width\">two words</nve-tag>\n  <nve-tag class=\"limit-width\">three words here</nve-tag>\n  <nve-tag class=\"limit-width\">four words long here</nve-tag>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/tag/tag.examples.json

@@ -29,7 +29,9 @@
       "summary": "Read-only tags for displaying static labels and metadata, providing visual context without user interaction capabilities.",
       "description": "",
       "composition": false,
-      "tags": []
+      "tags": [
+        "test-case"
+      ]
     },
     {
       "id": "tag-group",
@@ -47,7 +49,9 @@
       "summary": "Comprehensive color palette for tag backgrounds, enabling visual categorization and brand consistency across different content types.",
       "description": "",
       "composition": false,
-      "tags": []
+      "tags": [
+        "test-case"
+      ]
     },
     {
       "id": "tag-prominence",
@@ -56,7 +60,20 @@
       "summary": "High prominence tags with emphasis styling for important categories and priority labels that require visual attention.",
       "description": "",
       "composition": false,
-      "tags": []
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "tag-slotted-color",
+      "name": "SlottedColor",
+      "template": "<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag style=\"--max-width: 100px\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> very words long here <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> default <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"red-cardinal\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> red-cardinal <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"gray-slate\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> gray-slate <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"gray-denim\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> gray-denim <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"blue-indigo\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> blue-indigo <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"blue-cobalt\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> blue-cobalt <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"blue-sky\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> blue-sky <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"teal-cyan\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> teal-cyan <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"green-mint\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> green-mint <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"teal-seafoam\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> teal-seafoam <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"green-grass\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> green-grass <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"yellow-amber\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> yellow-amber <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"orange-pumpkin\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> orange-pumpkin <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"red-tomato\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> red-tomato <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"pink-magenta\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> pink-magenta <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"purple-plum\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> purple-plum <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"purple-violet\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> purple-violet <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"purple-lavender\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> purple-lavender <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"pink-rose\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> pink-rose <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"green-jade\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> green-jade <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"lime-pear\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> lime-pear <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"yellow-nova\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> yellow-nova <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"brand-green\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> brand-green <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n</div>\n",
+      "summary": "Tag with icon, showing how the icon/dot color inherits the tag color.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
     },
     {
       "id": "tag-overflow-single",

package/dist/tag/tag.js

@@ -1,5 +1,5 @@
 //#region src/tag/tag.css?inline
-var e = ":host{--background: var(--state-color-background);--color: var(--state-color);--state-color-base: var(--nve-ref-color-blue-cobalt-1100);--nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));--gap: var(--nve-ref-space-xs);--font-size: var(--nve-ref-font-size-100);--padding: 0 var(--nve-ref-size-200);--border: 0;--border-radius: var(--nve-ref-border-radius-full);--font-weight: var(--nve-ref-font-weight-regular);--cursor: pointer;--height: var(--nve-ref-size-600);--width: initial;--max-width: initial;display:inline-flex;user-select:none}[internal-host]{font-weight:var(--font-weight);font-size:var(--font-size);gap:var(--gap);background:var(--background);color:var(--color);padding:var(--padding);border:var(--border);border-radius:var(--border-radius);cursor:var(--cursor);height:var(--height);width:var(--width);max-width:var(--max-width);display:inline-flex;line-height:1.1em;place-items:center;place-content:center;white-space:nowrap}slot{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}::slotted([nve-text]){color:inherit!important}nve-icon{--color: inherit;cursor:var(--cursor)}:host([readonly]){--text-decoration: none;--cursor: cursor}";
+var e = ":host{--background: var(--state-color-background);--color: var(--state-color);--state-color-base: var(--nve-ref-color-blue-cobalt-1100);--nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));--gap: var(--nve-ref-space-xs);--font-size: var(--nve-ref-font-size-100);--padding: 0 var(--nve-ref-size-200);--border: 0;--border-radius: var(--nve-ref-border-radius-full);--font-weight: var(--nve-ref-font-weight-regular);--cursor: pointer;--height: var(--nve-ref-size-600);--width: initial;--max-width: initial;display:inline-flex;user-select:none}[internal-host]{--_color: var(--color);font-weight:var(--font-weight);font-size:var(--font-size);gap:var(--gap);background:var(--background);color:var(--color);padding:var(--padding);border:var(--border);border-radius:var(--border-radius);cursor:var(--cursor);height:var(--height);width:var(--width);max-width:var(--max-width);display:inline-flex;line-height:1.1em;place-items:center;place-content:center;white-space:nowrap}slot:not([name]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}::slotted([nve-text]){color:inherit!important}::slotted(nve-icon){--color: var(--_color)}::slotted(nve-dot){--color: var(--state-color-background);--status-color: var(--_color)}nve-icon{--color: inherit;cursor:var(--cursor)}:host([readonly]){--text-decoration: none;--cursor: cursor}";
 //#endregion
 export { e as default };
 

package/dist/tag/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","names":[],"sources":["../../src/tag/tag.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --background: var(--state-color-background);\n  --color: var(--state-color);\n  --state-color-base: var(--nve-ref-color-blue-cobalt-1100);\n  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  --gap: var(--nve-ref-space-xs);\n  --font-size: var(--nve-ref-font-size-100);\n  --padding: 0 var(--nve-ref-size-200);\n  --border: 0;\n  --border-radius: var(--nve-ref-border-radius-full);\n  --font-weight: var(--nve-ref-font-weight-regular);\n  --cursor: pointer;\n  --height: var(--nve-ref-size-600);\n  --width: initial;\n  --max-width: initial;\n  display: inline-flex;\n  user-select: none;\n}\n\n[internal-host] {\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  gap: var(--gap);\n  background: var(--background);\n  color: var(--color);\n  padding: var(--padding);\n  border: var(--border);\n  border-radius: var(--border-radius);\n  cursor: var(--cursor);\n  height: var(--height);\n  width: var(--width);\n  max-width: var(--max-width);\n  display: inline-flex;\n  line-height: 1.1em;\n  place-items: center;\n  place-content: center;\n  white-space: nowrap;\n}\n\nslot {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: block;\n}\n\n::slotted([nve-text]) {\n  color: inherit !important;\n}\n\nnve-icon {\n  --color: inherit;\n  cursor: var(--cursor);\n}\n\n:host([readonly]) {\n  --text-decoration: none;\n  --cursor: cursor;\n}\n"],"mappings":""}
+{"version":3,"file":"tag.js","names":[],"sources":["../../src/tag/tag.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --background: var(--state-color-background);\n  --color: var(--state-color);\n  --state-color-base: var(--nve-ref-color-blue-cobalt-1100);\n  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  --gap: var(--nve-ref-space-xs);\n  --font-size: var(--nve-ref-font-size-100);\n  --padding: 0 var(--nve-ref-size-200);\n  --border: 0;\n  --border-radius: var(--nve-ref-border-radius-full);\n  --font-weight: var(--nve-ref-font-weight-regular);\n  --cursor: pointer;\n  --height: var(--nve-ref-size-600);\n  --width: initial;\n  --max-width: initial;\n  display: inline-flex;\n  user-select: none;\n}\n\n[internal-host] {\n  --_color: var(--color);\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  gap: var(--gap);\n  background: var(--background);\n  color: var(--color);\n  padding: var(--padding);\n  border: var(--border);\n  border-radius: var(--border-radius);\n  cursor: var(--cursor);\n  height: var(--height);\n  width: var(--width);\n  max-width: var(--max-width);\n  display: inline-flex;\n  line-height: 1.1em;\n  place-items: center;\n  place-content: center;\n  white-space: nowrap;\n}\n\nslot:not([name]) {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: block;\n}\n\n::slotted([nve-text]) {\n  color: inherit !important;\n}\n\n::slotted(nve-icon) {\n  --color: var(--_color);\n}\n\n::slotted(nve-dot) {\n  --color: var(--state-color-background);\n  --status-color: var(--_color);\n}\n\nnve-icon {\n  --color: inherit;\n  cursor: var(--cursor);\n}\n\n:host([readonly]) {\n  --text-decoration: none;\n  --cursor: cursor;\n}\n"],"mappings":""}

package/dist/tag/tag2.js

@@ -2,7 +2,7 @@ import { I18nController as e } from "../internal/controllers/i18n.controller.js"
 import { TypeClosableController as t } from "../internal/controllers/type-closable.controller.js";
 import { scopedRegistry as n } from "../internal/decorators/scoped-registry.js";
 import { colorStateStyles as r, useStyles as i } from "../internal/styles/index.js";
-import a from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import a from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { Icon as o } from "../icon/icon2.js";
 import s from "./tag.js";
 import { LitElement as c, html as l } from "lit";
@@ -17,7 +17,7 @@ var p = class extends d(c) {
 	static {
 		this.metadata = {
 			tag: "nve-tag",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	static {
@@ -26,7 +26,7 @@ var p = class extends d(c) {
 	#e;
 	#t;
 	render() {
-		return l`<div internal-host interaction-state focus-within><slot></slot>${this.closable ? l`<nve-icon part="icon" @click="${() => this.#t.close()}" container="flat" name="cancel" size="sm" role="img" aria-label="${f(this.i18n.close)}"></nve-icon>` : ""}</div>`;
+		return l`<div internal-host interaction-state focus-within><slot name="prefix"></slot><slot></slot><slot name="suffix"></slot>${this.closable ? l`<nve-icon part="icon" @click="${() => this.#t.close()}" container="flat" name="cancel" size="sm" role="img" aria-label="${f(this.i18n.close)}"></nve-icon>` : ""}</div>`;
 	}
 	constructor() {
 		super(), this.closable = !1, this.#e = new e(this), this.i18n = this.#e.i18n, this.#t = new t(this), this.type = "button";

package/dist/tag/tag2.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag2.js","names":["#typeClosableController","#i18nController"],"sources":["../../src/tag/tag.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { Color, Prominence } from '@nvidia-elements/core/internal';\nimport {\n  I18nController,\n  TypeClosableController,\n  useStyles,\n  colorStateStyles,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './tag.css?inline';\n\n/**\n * @element nve-tag\n * @description A interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations.\n * @documentation https://nvidia.github.io/elements/docs/elements/tag/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tag\n * @slot - Text or other content that identifies the category or group.\n * @cssprop --background\n * @cssprop --color\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --padding\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --font-weight\n * @cssprop --cursor\n * @cssprop --height\n * @cssprop --width\n * @cssprop --max-width\n * @cssprop --text-decoration\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/button/\n */\n@scopedRegistry()\nexport class Tag extends ButtonFormControlMixin(LitElement) {\n  static styles = useStyles([colorStateStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tag',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /** Determines if tag is closable, if true, the component renders a close icon. */\n  @property({ type: Boolean }) closable = false;\n\n  /** Determines the color of the tag. */\n  @property({ type: String, reflect: true }) color: Color;\n\n  /** Determines the visual prominence or weight */\n  @property({ type: String, reflect: true }) prominence?: Extract<Prominence, 'emphasis'>;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Updates internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  #typeClosableController = new TypeClosableController(this);\n\n  render() {\n    return html`\n      <div internal-host interaction-state focus-within>\n        <slot></slot>\n        ${this.closable ? html`<nve-icon part=\"icon\" @click=${() => this.#typeClosableController.close()} container=\"flat\" name=\"cancel\" size=\"sm\" role=\"img\" aria-label=${ifDefined(this.i18n.close)}></nve-icon>` : ''}\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n}\n"],"mappings":";;;;;;;;;;;;AA0CO,IAAA,IAAA,cAAkB,EAAuB,CAAU,CAAC,CAAC;;gBAC1C,EAAU,CAAC,GAAkB,CAAM,CAAC;;;kBAEzB;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAK,SAAS,MAAM,EACvB;;CAWA;CAKA;CAEA,SAAS;EACP,OAAO,CAAI,kEAGL,KAAK,WAAW,CAAI,uCAAsC,KAAKA,GAAwB,MAAM,EAAE,oEAAkE,EAAU,KAAK,KAAK,KAAK,EAAE,iBAAgB,GAAG;CAGvN;CAEA,cAAc;EAEZ,AADA,MAAM,mBAzBgC,cAQA,IAAI,EAAqB,IAAI,eAGlC,KAAKC,GAAgB,gBAE9B,IAAI,EAAuB,IAAI,GAavD,KAAK,OAAO;CACd;AACF;GA5BG,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAG1B,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,MAKxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAzB3B,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"tag2.js","names":[],"sources":["../../src/tag/tag.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { Color, Prominence } from '@nvidia-elements/core/internal';\nimport {\n  I18nController,\n  TypeClosableController,\n  useStyles,\n  colorStateStyles,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './tag.css?inline';\n\n/**\n * @element nve-tag\n * @description A interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations.\n * @documentation https://nvidia.github.io/elements/docs/elements/tag/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tag\n * @slot - Text or other content that identifies the category or group.\n * @slot prefix - Optional prefix content, such as a status nve-icon.\n * @slot suffix - Optional suffix content, such as a nve-dot counter.\n * @cssprop --background\n * @cssprop --color\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --padding\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --font-weight\n * @cssprop --cursor\n * @cssprop --height\n * @cssprop --width\n * @cssprop --max-width\n * @cssprop --text-decoration\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/button/\n */\n@scopedRegistry()\nexport class Tag extends ButtonFormControlMixin(LitElement) {\n  static styles = useStyles([colorStateStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tag',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /** Determines if tag is closable, if true, the component renders a close icon. */\n  @property({ type: Boolean }) closable = false;\n\n  /** Determines the color of the tag. */\n  @property({ type: String, reflect: true }) color: Color;\n\n  /** Determines the visual prominence or weight */\n  @property({ type: String, reflect: true }) prominence?: Extract<Prominence, 'emphasis'>;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Updates internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  #typeClosableController = new TypeClosableController(this);\n\n  render() {\n    return html`\n      <div internal-host interaction-state focus-within>\n        <slot name=\"prefix\"></slot>\n        <slot></slot>\n        <slot name=\"suffix\"></slot>\n        ${this.closable ? html`<nve-icon part=\"icon\" @click=${() => this.#typeClosableController.close()} container=\"flat\" name=\"cancel\" size=\"sm\" role=\"img\" aria-label=${ifDefined(this.i18n.close)}></nve-icon>` : ''}\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n}\n"],"mappings":";;;;;;;;;;;;AA4CO,IAAM,IAAN,cAAkB,EAAuB,CAAU,CAAC,CAAC;;EAC1C,KAAA,SAAA,EAAU,CAAC,GAAkB,CAAM,CAAC;;;EAEzB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAK,SAAS,MAAM,EACvB;;CAWA;CAKA;CAEA,SAAS;EACP,OAAO,CAAI,wHAKL,KAAK,WAAW,CAAI,uCAAsC,KAAK,GAAwB,MAAM,EAAE,oEAAkE,EAAU,KAAK,KAAK,KAAK,EAAE,iBAAgB,GAAG;CAGvN;CAEA,cAAc;EAEZ,AADA,MAAM,GA3BgC,KAAA,WAAA,IAQA,KAAA,KAAA,IAAI,EAAqB,IAAI,GAGlC,KAAA,OAAA,KAAK,GAAgB,MAE9B,KAAA,KAAA,IAAI,EAAuB,IAAI,GAevD,KAAK,OAAO;CACd;AACF;AA9BG,EAAA,CAAA,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAG1B,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAzB3B,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}

package/dist/textarea/textarea.d.ts

@@ -1,4 +1,4 @@
-import type { CSSResult } from 'lit';
+import { type CSSResult } from 'lit';
 import { Control } from '@nvidia-elements/core/forms';
 /**
  * @element nve-textarea
@@ -6,6 +6,8 @@ import { Control } from '@nvidia-elements/core/forms';
  * @documentation https://nvidia.github.io/elements/docs/elements/textarea/
  * @since 0.3.0
  * @entrypoint \@nvidia-elements/core/textarea
+ * @slot prefix - Content to display before the textarea.
+ * @slot suffix - Content to display after the textarea.
  * @cssprop --padding
  * @cssprop --font-size
  * @cssprop --height
@@ -20,6 +22,10 @@ import { Control } from '@nvidia-elements/core/forms';
  */
 export declare class Textarea extends Control {
     static styles: CSSResult[];
+    /** @private */
+    protected get prefixContent(): import("lit").TemplateResult<1>;
+    /** @private */
+    protected get suffixContent(): import("lit").TemplateResult<1>;
     static readonly metadata: {
         tag: string;
         version: string;

package/dist/textarea/textarea.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.examples.js","names":[],"sources":["../../src/textarea/textarea.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/forms/define.js';\nimport '@nvidia-elements/core/textarea/define.js';\n\nexport default {\n  title: 'Elements/Textarea',\n  component: 'nve-textarea',\n};\n\n/**\n * @summary Basic multi-line text input for longer content entry like comments, descriptions, or messages.\n */\nexport const Default = {\n  render: () => html`\n<nve-textarea>\n  <label>label</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>`\n};\n\n/**\n * @summary Textareas with vertical layout including validation states for disabled, success, and error.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-textarea>\n    <label>label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea>\n    <label>disabled</label>\n    <textarea disabled></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea>\n    <label>success</label>\n    <textarea></textarea>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea>\n    <label>error</label>\n    <textarea></textarea>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-textarea>\n</div>`\n};\n\n/**\n * @summary Textareas with horizontal layout showing validation states for inline forms and compact layouts.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-textarea layout=\"horizontal\">\n    <label>label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea layout=\"horizontal\">\n    <label>disabled</label>\n    <textarea disabled></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea layout=\"horizontal\">\n    <label>success</label>\n    <textarea></textarea>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea layout=\"horizontal\">\n    <label>error</label>\n    <textarea></textarea>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-textarea>\n</div>`\n};\n\n/**\n * @summary Textarea with built-in HTML validation showing required field error messages for form validation.\n */\nexport const ControlValidation = {\n  render: () => html`\n<nve-textarea>\n  <label>validation</label>\n  <textarea required></textarea>\n  <nve-control-message>message</nve-control-message>\n  <nve-control-message error=\"valueMissing\">required</nve-control-message>\n</nve-textarea>`\n};\n\n/**\n * @summary Textarea with custom columns and rows attributes for controlling initial size and dimensions.\n */\nexport const ColumnsAndRows = {\n  render: () => html`\n<nve-textarea>\n  <label>label</label>\n  <textarea rows=\"15\" cols=\"40\"></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>`\n};"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"textarea.examples.js","names":[],"sources":["../../src/textarea/textarea.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/forms/define.js';\nimport '@nvidia-elements/core/textarea/define.js';\n\nexport default {\n  title: 'Elements/Textarea',\n  component: 'nve-textarea',\n};\n\n/**\n * @summary Basic multi-line text input for longer content entry like comments, descriptions, or messages.\n */\nexport const Default = {\n  render: () => html`\n<nve-textarea>\n  <label>label</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>`\n};\n\n/**\n * @summary Textareas with vertical layout including validation states for disabled, success, and error.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-textarea>\n    <label>label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea>\n    <label>disabled</label>\n    <textarea disabled></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea>\n    <label>success</label>\n    <textarea></textarea>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea>\n    <label>error</label>\n    <textarea></textarea>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-textarea>\n</div>`\n};\n\n/**\n * @summary Textareas with horizontal layout showing validation states for inline forms and compact layouts.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-textarea layout=\"horizontal\">\n    <label>label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea layout=\"horizontal\">\n    <label>disabled</label>\n    <textarea disabled></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea layout=\"horizontal\">\n    <label>success</label>\n    <textarea></textarea>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea layout=\"horizontal\">\n    <label>error</label>\n    <textarea></textarea>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-textarea>\n</div>`\n};\n\n/**\n * @summary Textarea with built-in HTML validation showing required field error messages for form validation.\n */\nexport const ControlValidation = {\n  render: () => html`\n<nve-textarea>\n  <label>validation</label>\n  <textarea required></textarea>\n  <nve-control-message>message</nve-control-message>\n  <nve-control-message error=\"valueMissing\">required</nve-control-message>\n</nve-textarea>`\n};\n\n/**\n * @summary Textarea with custom columns and rows attributes for controlling initial size and dimensions.\n */\nexport const ColumnsAndRows = {\n  render: () => html`\n<nve-textarea>\n  <label>label</label>\n  <textarea rows=\"15\" cols=\"40\"></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>`\n};\n\n/**\n * @summary Flat textarea with prefix tags for context and suffix buttons to attach files or send a message.\n * @tags test-case\n */\nexport const Slots = {\n  render: () => html`\n<nve-textarea container=\"flat\">\n  <textarea placeholder=\"Build something...\" aria-label=\"prompt\"></textarea>\n  <nve-tag slot=\"prefix\" color=\"gray-denim\" closable>AGENTS.md</nve-tag>\n  <nve-tag slot=\"prefix\" color=\"gray-denim\" closable>Web Search</nve-tag>\n  <nve-icon-button slot=\"suffix\" icon-name=\"paper-clip\" aria-label=\"Attach file\" container=\"flat\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" icon-name=\"paper-airplane\" aria-label=\"Send message\" style=\"margin-left: auto\"></nve-icon-button>\n</nve-textarea>`\n};\n\n/**\n * @summary Textarea with flat container for inline forms.\n * @tags test-case\n */\nexport const ContainerFlat = {\n  render: () => html`\n<nve-textarea container=\"flat\">\n  <label>label</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/textarea/textarea.examples.json

@@ -50,6 +50,28 @@
       "description": "",
       "composition": false,
       "tags": []
+    },
+    {
+      "id": "textarea-slots",
+      "name": "Slots",
+      "template": "<nve-textarea container=\"flat\">\n  <textarea placeholder=\"Build something...\" aria-label=\"prompt\"></textarea>\n  <nve-tag slot=\"prefix\" color=\"gray-denim\" closable>AGENTS.md</nve-tag>\n  <nve-tag slot=\"prefix\" color=\"gray-denim\" closable>Web Search</nve-tag>\n  <nve-icon-button slot=\"suffix\" icon-name=\"paper-clip\" aria-label=\"Attach file\" container=\"flat\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" icon-name=\"paper-airplane\" aria-label=\"Send message\" style=\"margin-left: auto\"></nve-icon-button>\n</nve-textarea>\n",
+      "summary": "Flat textarea with prefix tags for context and suffix buttons to attach files or send a message.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "textarea-container-flat",
+      "name": "ContainerFlat",
+      "template": "<nve-textarea container=\"flat\">\n  <label>label</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>\n",
+      "summary": "Textarea with flat container for inline forms.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
     }
   ]
 }

package/dist/textarea/textarea.js

@@ -1,5 +1,5 @@
 //#region src/textarea/textarea.css?inline
-var e = ":host{--padding: var(--nve-ref-size-200);--font-size: var(--nve-ref-font-size-100);--height: 100px;--width: 100%;--min-height: 100px;--background: var(--nve-sys-interaction-field-background);--color: var(--nve-sys-interaction-field-color);--border-radius: var(--nve-ref-border-radius-sm);--cursor: text;--border: 0;display:block;width:100%;contain:layout}::slotted(textarea){padding:var(--padding)!important;font-size:var(--font-size)!important;margin:0!important;align-content:stretch!important;background:var(--background)!important;border:var(--border)!important;color:var(--color)!important;border-radius:var(--border-radius)!important;cursor:var(--cursor)!important}::slotted(textarea:not([rows])){min-height:var(--min-height)!important;height:var(--min-height)!important}::slotted(textarea:not([cols])){width:var(--width)!important}:host([layout*=\"horizontal\"]) ::slotted(label){padding-block-start:var(--nve-ref-size-100)!important;align-self:start!important}:host([layout*=\"horizontal\"]) slot[name=label]{align-self:start}:host([status=\"error\"]),:host(:state(invalid)),:host(:state(error)){--border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color)}:host([status=\"success\"]),:host(:state(success)){--border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color)}:host(:state(disabled)){--border: var(--nve-ref-border-width-md) solid transparent}";
+var e = ":host{--padding: var(--nve-ref-size-200);--font-size: var(--nve-ref-font-size-100);--height: 100px;--width: 100%;--min-height: 100px;--background: var(--nve-sys-interaction-field-background);--color: var(--nve-sys-interaction-field-color);--border-radius: var(--nve-ref-border-radius-sm);--cursor: text;--border: 0;display:block;width:var(--width);contain:layout}::slotted(textarea){font-size:var(--font-size)!important;margin:0!important;align-content:stretch!important;background:var(--background)!important;border:0!important;color:var(--color)!important;cursor:var(--cursor)!important;scrollbar-color:var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);scrollbar-width:var(--nve-sys-scrollbar-width)}slot[name=prefix],slot[name=suffix]{display:none;gap:var(--nve-ref-space-xxs)}@scope{:scope:has([slot=prefix]) slot[name=prefix]{display:flex}:scope:has([slot=suffix]) slot[name=suffix]{display:flex}:scope:has(textarea[style*=width],textarea[cols]) [input]{width:fit-content}:scope:has(textarea:focus-visible) [input]{outline:5px auto -webkit-focus-ring-color!important;outline:Highlight solid 2px!important}}[input]{flex-direction:column;gap:var(--nve-ref-space-xs);background:var(--background);border:var(--border);border-radius:var(--border-radius);padding:var(--padding);cursor:initial;outline:none!important}::slotted(textarea:not([rows],[style*=\"height\"])){height:var(--height)!important;min-height:var(--min-height)!important}::slotted(textarea:not([cols],[style*=\"width\"])){width:var(--width)!important}::slotted(textarea:not([cols],[rows])){field-sizing:content}:host([layout*=\"horizontal\"]) ::slotted(label){padding-block-start:var(--nve-ref-size-100)!important;align-self:start!important}:host([layout*=\"horizontal\"]) slot[name=label]{align-self:start}:host([status=\"error\"]),:host(:state(invalid)),:host(:state(error)){--border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color)}:host([status=\"success\"]),:host(:state(success)){--border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color)}:host(:state(disabled)){--border: var(--nve-ref-border-width-md) solid transparent}:host([container=\"flat\"]){--background: transparent;--border: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-muted)}";
 //#endregion
 export { e as default };
 

package/dist/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":[],"sources":["../../src/textarea/textarea.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --padding: var(--nve-ref-size-200);\n  --font-size: var(--nve-ref-font-size-100);\n  --height: 100px;\n  --width: 100%;\n  --min-height: 100px;\n  --background: var(--nve-sys-interaction-field-background);\n  --color: var(--nve-sys-interaction-field-color);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --cursor: text;\n  --border: 0;\n  display: block;\n  width: 100%;\n  contain: layout;\n}\n\n::slotted(textarea) {\n  padding: var(--padding) !important;\n  font-size: var(--font-size) !important;\n  margin: 0 !important;\n  align-content: stretch !important;\n  background: var(--background) !important;\n  border: var(--border) !important;\n  color: var(--color) !important;\n  border-radius: var(--border-radius) !important;\n  cursor: var(--cursor) !important;\n}\n\n::slotted(textarea:not([rows])) {\n  min-height: var(--min-height) !important;\n  height: var(--min-height) !important;\n}\n\n::slotted(textarea:not([cols])) {\n  width: var(--width) !important;\n}\n\n:host([layout*='horizontal']) ::slotted(label) {\n  padding-block-start: var(--nve-ref-size-100) !important;\n  align-self: start !important;\n}\n\n:host([layout*='horizontal']) slot[name='label'] {\n  align-self: start;\n}\n\n:host([status='error']),\n:host(:state(invalid)),\n:host(:state(error)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color);\n}\n\n:host([status='success']),\n:host(:state(success)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color);\n}\n\n:host(:state(disabled)) {\n  --border: var(--nve-ref-border-width-md) solid transparent;\n}\n"],"mappings":""}
+{"version":3,"file":"textarea.js","names":[],"sources":["../../src/textarea/textarea.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --padding: var(--nve-ref-size-200);\n  --font-size: var(--nve-ref-font-size-100);\n  --height: 100px;\n  --width: 100%;\n  --min-height: 100px;\n  --background: var(--nve-sys-interaction-field-background);\n  --color: var(--nve-sys-interaction-field-color);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --cursor: text;\n  --border: 0;\n  display: block;\n  width: var(--width);\n  contain: layout;\n}\n\n::slotted(textarea) {\n  font-size: var(--font-size) !important;\n  margin: 0 !important;\n  align-content: stretch !important;\n  background: var(--background) !important;\n  border: 0 !important;\n  color: var(--color) !important;\n  cursor: var(--cursor) !important;\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n}\n\nslot[name='prefix'],\nslot[name='suffix'] {\n  display: none;\n  gap: var(--nve-ref-space-xxs);\n}\n\n@scope {\n  :scope:has([slot='prefix']) slot[name='prefix'] {\n    display: flex;\n  }\n\n  :scope:has([slot='suffix']) slot[name='suffix'] {\n    display: flex;\n  }\n\n  :scope:has(textarea[style*='width'], textarea[cols]) [input] {\n    width: fit-content;\n  }\n\n  :scope:has(textarea:focus-visible) [input] {\n    outline: 5px auto -webkit-focus-ring-color !important;\n    outline: Highlight solid 2px !important;\n  }\n}\n\n[input] {\n  flex-direction: column;\n  gap: var(--nve-ref-space-xs);\n  background: var(--background);\n  border: var(--border);\n  border-radius: var(--border-radius);\n  padding: var(--padding);\n  cursor: initial;\n  outline: none !important;\n}\n\n::slotted(textarea:not([rows], [style*='height'])) {\n  height: var(--height) !important;\n  min-height: var(--min-height) !important;\n}\n\n::slotted(textarea:not([cols], [style*='width'])) {\n  width: var(--width) !important;\n}\n\n::slotted(textarea:not([cols], [rows])) {\n  field-sizing: content;\n}\n\n:host([layout*='horizontal']) ::slotted(label) {\n  padding-block-start: var(--nve-ref-size-100) !important;\n  align-self: start !important;\n}\n\n:host([layout*='horizontal']) slot[name='label'] {\n  align-self: start;\n}\n\n:host([status='error']),\n:host(:state(invalid)),\n:host(:state(error)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color);\n}\n\n:host([status='success']),\n:host(:state(success)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color);\n}\n\n:host(:state(disabled)) {\n  --border: var(--nve-ref-border-width-md) solid transparent;\n}\n\n:host([container='flat']) {\n  --background: transparent;\n  --border: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-muted);\n}\n"],"mappings":""}

package/dist/textarea/textarea2.js

@@ -1,19 +1,26 @@
 import { useStyles as e } from "../internal/styles/index.js";
 import { Control as t } from "../forms/control/control2.js";
 import n from "./textarea.js";
+import { html as r } from "lit";
 //#region src/textarea/textarea.ts
-var r = class extends t {
+var i = class extends t {
 	static {
 		this.styles = e([...t.styles, n]);
 	}
+	get prefixContent() {
+		return r`<slot name="prefix"></slot>`;
+	}
+	get suffixContent() {
+		return r`<slot name="suffix"></slot>`;
+	}
 	static {
 		this.metadata = {
 			tag: "nve-textarea",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 };
 //#endregion
-export { r as Textarea };
+export { i as Textarea };
 
 //# sourceMappingURL=textarea2.js.map

package/dist/textarea/textarea2.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea2.js","names":[],"sources":["../../src/textarea/textarea.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './textarea.css?inline';\n\n/**\n * @element nve-textarea\n * @description A textarea is a control that enables users to enter and edit text.\n * @documentation https://nvidia.github.io/elements/docs/elements/textarea/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/textarea\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --width\n * @cssprop --min-height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --cursor\n * @cssprop --border\n * @cssprop --color\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n */\nexport class Textarea extends Control {\n  static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-textarea',\n    version: '0.0.0'\n  };\n}\n"],"mappings":";;;;AA0BA,IAAa,IAAb,cAA8B,EAAQ;;gBACP,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;kBAEvC;GACzB,KAAK;GACL,SAAS;EACX;;AACF"}
+{"version":3,"file":"textarea2.js","names":[],"sources":["../../src/textarea/textarea.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, type CSSResult } from 'lit';\nimport { useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './textarea.css?inline';\n\n/**\n * @element nve-textarea\n * @description A textarea is a control that enables users to enter and edit text.\n * @documentation https://nvidia.github.io/elements/docs/elements/textarea/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/textarea\n * @slot prefix - Content to display before the textarea.\n * @slot suffix - Content to display after the textarea.\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --width\n * @cssprop --min-height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --cursor\n * @cssprop --border\n * @cssprop --color\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n */\nexport class Textarea extends Control {\n  static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n  /** @private */\n  protected get prefixContent() {\n    return html`<slot name=\"prefix\"></slot>`;\n  }\n\n  /** @private */\n  protected get suffixContent() {\n    return html`<slot name=\"suffix\"></slot>`;\n  }\n\n  static readonly metadata = {\n    tag: 'nve-textarea',\n    version: '0.0.0'\n  };\n}\n"],"mappings":";;;;;AA4BA,IAAa,IAAb,cAA8B,EAAQ;;EACP,KAAA,SAAA,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;CAGlE,IAAc,gBAAgB;EAC5B,OAAO,CAAI;CACb;CAGA,IAAc,gBAAgB;EAC5B,OAAO,CAAI;CACb;;EAE2B,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;AACF"}

package/dist/time/time2.js

@@ -1,6 +1,6 @@
 import { scopedRegistry as e } from "../internal/decorators/scoped-registry.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { Control as r } from "../forms/control/control2.js";
 import { IconButton as i } from "../icon-button/icon-button2.js";
 import { inputStyles as a } from "../input/input2.js";
@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-time",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	static {

package/dist/time/time2.js.map

@@ -1 +1 @@
-{"version":3,"file":"time2.js","names":[],"sources":["../../src/time/time.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 { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport styles from './time.css?inline';\n\n/**\n * @element nve-time\n * @description A time picker is a control that enables users to choose a time value.\n * @documentation https://nvidia.github.io/elements/docs/elements/time/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/time\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @csspart icon-button - The clock icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time\n */\n@scopedRegistry()\nexport class Time extends Control implements ContainerElement {\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-time',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get suffixContent() {\n    return html`<nve-icon-button part=\"icon-button\" .ariaLabel=${this.i18n.expand} icon-name=\"clock\" container=\"inline\" @click=${this.showPicker}></nve-icon-button>`;\n  }\n}\n"],"mappings":";;;;;;;;;;AA6BO,IAAA,IAAA,cAAmB,EAAoC;;gBAO5C,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;EAAM,CAAC;;;kBAEvC;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,mDAAkD,KAAK,KAAK,OAAO,iDAA+C,KAAK,WAAW;CAC/I;AACF;GAhBG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,UAN1C,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"time2.js","names":[],"sources":["../../src/time/time.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 { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport styles from './time.css?inline';\n\n/**\n * @element nve-time\n * @description A time picker is a control that enables users to choose a time value.\n * @documentation https://nvidia.github.io/elements/docs/elements/time/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/time\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @csspart icon-button - The clock icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time\n */\n@scopedRegistry()\nexport class Time extends Control implements ContainerElement {\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-time',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get suffixContent() {\n    return html`<nve-icon-button part=\"icon-button\" .ariaLabel=${this.i18n.expand} icon-name=\"clock\" container=\"inline\" @click=${this.showPicker}></nve-icon-button>`;\n  }\n}\n"],"mappings":";;;;;;;;;;AA6BO,IAAM,IAAN,cAAmB,EAAoC;;EAO5C,KAAA,SAAA,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;EAAM,CAAC;;;EAEvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,mDAAkD,KAAK,KAAK,OAAO,iDAA+C,KAAK,WAAW;CAC/I;AACF;AAhBG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAN1C,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}

package/dist/toast/toast.examples.json

@@ -106,7 +106,7 @@
     {
       "id": "toast-body-anchor",
       "name": "BodyAnchor",
-      "template": "<nve-toast style=\"--background: red\" anchor=\"body\" position=\"center\" alignment=\"center\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: blue\" anchor=\"body\" position=\"top\" alignment=\"start\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: yellow\" anchor=\"body\" position=\"top\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: green\" anchor=\"body\" position=\"top\" alignment=\"end\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: purple\" anchor=\"body\" position=\"bottom\" alignment=\"start\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: orange\" anchor=\"body\" position=\"bottom\">•︎︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: pink\" anchor=\"body\" position=\"bottom\" alignment=\"end\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: brown; margin-right: -250px\" anchor=\"body\" position=\"left\" alignment=\"start\"\n  >•︎•︎•︎•︎•︎•︎</nve-toast\n>\n<nve-toast style=\"--background: gray\" anchor=\"body\" position=\"left\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: black; margin-right: -250px\" anchor=\"body\" position=\"left\" alignment=\"end\"\n  >•︎•︎•︎•︎•︎•︎</nve-toast\n>\n<nve-toast style=\"--background: red; margin-left: -250px\" anchor=\"body\" position=\"right\" alignment=\"start\"\n  >•︎•︎•︎•︎•︎•︎</nve-toast\n>\n<nve-toast style=\"--background: blue\" anchor=\"body\" position=\"right\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: yellow; margin-left: -250px\" anchor=\"body\" position=\"right\" alignment=\"end\"\n  >•︎•︎•︎•︎•︎•︎</nve-toast\n>\n",
+      "template": "<nve-toast style=\"--background: red\" anchor=\"body\" position=\"center\" alignment=\"center\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: blue\" anchor=\"body\" position=\"top\" alignment=\"start\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: yellow\" anchor=\"body\" position=\"top\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: green\" anchor=\"body\" position=\"top\" alignment=\"end\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: purple\" anchor=\"body\" position=\"bottom\" alignment=\"start\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: orange\" anchor=\"body\" position=\"bottom\">•︎︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: pink\" anchor=\"body\" position=\"bottom\" alignment=\"end\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: brown; margin-right: -250px\" anchor=\"body\" position=\"left\" alignment=\"start\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: gray\" anchor=\"body\" position=\"left\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: black; margin-right: -250px\" anchor=\"body\" position=\"left\" alignment=\"end\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: red; margin-left: -250px\" anchor=\"body\" position=\"right\" alignment=\"start\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: blue\" anchor=\"body\" position=\"right\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: yellow; margin-left: -250px\" anchor=\"body\" position=\"right\" alignment=\"end\">•︎•︎•︎•︎•︎•︎</nve-toast>\n",
       "summary": "Body anchor positioning for toast.",
       "description": "",
       "composition": false,

package/dist/toast/toast2.js

@@ -6,7 +6,7 @@ import { scopedRegistry as i } from "../internal/decorators/scoped-registry.js";
 import { useStyles as a } from "../internal/styles/index.js";
 import { popoverStyles as o } from "../internal/styles/popover2.js";
 import { statusIcons as s } from "../internal/types/index.js";
-import c from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import c from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { Icon as l } from "../icon/icon2.js";
 import { IconButton as u } from "../icon-button/icon-button2.js";
 import d from "./toast.js";
@@ -23,7 +23,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-toast",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	static {

package/dist/toast/toast2.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast2.js","names":["#i18nController"],"sources":["../../src/toast/toast.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { PopoverAlign, PopoverPosition, PopoverType, SupportStatus } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  audit,\n  excessiveInstanceLimit,\n  I18nController,\n  popoverStyles,\n  scopedRegistry,\n  statusIcons,\n  TypeNativePopoverController,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { Icon, type IconName } from '@nvidia-elements/core/icon';\nimport styles from './toast.css?inline';\n\n/**\n * @element nve-toast\n * @description A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them.\n * @documentation https://nvidia.github.io/elements/docs/elements/toast/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/toast\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the toast opens.\n * @event close - Dispatched when the toast closes.\n * @slot - The message communicated by the toast.\n * @slot prefix - custom status icon slot\n * @cssprop --padding\n * @cssprop --justify-content\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --color\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --box-shadow\n * @cssprop --gap\n * @csspart prefix-icon - The prefix icon slot\n * @csspart icon-button - The close icon button element\n * @cssprop --animation-duration - Duration of toast open/close animations\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n */\n@scopedRegistry()\n@audit({ excessiveInstanceLimit })\nexport class Toast extends LitElement {\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-toast',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton,\n    [Icon.metadata.tag]: Icon\n  };\n\n  /**\n   * (optional) By default the popover automatically anchors itself relative to the trigger element.\n   * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) anchor: string | HTMLElement;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * The trigger defines what element triggers an `open` interaction event.\n   * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) trigger: string | HTMLElement;\n\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition = 'top';\n\n  /**\n   * Sets the alignment of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign;\n\n  /**\n   * Sets the visual prominence of the toast.\n   */\n  @property({ type: String, reflect: true }) prominence: 'muted';\n\n  /**\n   * @deprecated Use the popover API instead.\n   * Determines if popover visibility behavior should be automatically controlled by the trigger.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n  /**\n   * Determines if a close button should render within toast.\n   */\n  @property({ type: Boolean }) closable = false;\n\n  /**\n   * A delayed `close` event occurs after the provided millisecond value elapses.\n   */\n  @property({ type: Number, attribute: 'close-timeout' }) closeTimeout = 0;\n\n  /**\n   * Visual treatment to represent a support status.\n   */\n  @property({ type: String, reflect: true }) status: SupportStatus;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** @private */\n  readonly popoverType: PopoverType = 'manual';\n\n  protected typeNativePopoverController = new TypeNativePopoverController<Toast>(this);\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"prefix\"><nve-icon part=\"prefix-icon\" .name=${statusIcons[this.status] as IconName} .ariaLabel=${(this.i18n as Record<string, string>)[this.status] ?? this.i18n.information}></nve-icon></slot>\n        ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${this.hidePopover} icon-name=\"cancel\" container=\"flat\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : nothing}\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'alert';\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkDO,IAAA,IAAA,cAAoB,EAAW;;+BA6BmC,uBAqB/B,wBAK+B,aAO/B,IAAI,EAAqB,IAAI,eAKlC,KAAKA,GAAgB,yBAGpB,6CAEI,IAAI,EAAmC,IAAI;;;gBAvEnE,EAAU,CAAC,GAAe,CAAM,CAAC;;;kBAEtB;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B;IACzB,EAAW,SAAS,MAAM;IAC1B,EAAK,SAAS,MAAM;EACvB;;CAmDA;CAeA,SAAS;EACP,OAAO,CAAI,8EAEkD,EAAY,KAAK,QAAoB,gBAAe,KAAK,KAAgC,KAAK,WAAW,KAAK,KAAK,YAAY,sBACtL,KAAK,WAAW,CAAI,mFAAkF,KAAK,YAAY,oDAAkD,KAAK,KAAK,MAAM,wBAAuB,EAAQ;CAIhO;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF;GA3EG,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAOzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAKzB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAKxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAKxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,MAMxC,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAmB,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,MAKxE,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAK1B,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAgB,CAAC,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,MAKrD,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAOxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UArE3B,EAAe,GACf,EAAM,EAAE,wBAAA,GAAuB,CAAC,CAAA,GAAA,CAAA"}
+{"version":3,"file":"toast2.js","names":[],"sources":["../../src/toast/toast.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { PopoverAlign, PopoverPosition, PopoverType, SupportStatus } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  audit,\n  excessiveInstanceLimit,\n  I18nController,\n  popoverStyles,\n  scopedRegistry,\n  statusIcons,\n  TypeNativePopoverController,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { Icon, type IconName } from '@nvidia-elements/core/icon';\nimport styles from './toast.css?inline';\n\n/**\n * @element nve-toast\n * @description A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them.\n * @documentation https://nvidia.github.io/elements/docs/elements/toast/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/toast\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the toast opens.\n * @event close - Dispatched when the toast closes.\n * @slot - The message communicated by the toast.\n * @slot prefix - custom status icon slot\n * @cssprop --padding\n * @cssprop --justify-content\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --color\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --box-shadow\n * @cssprop --gap\n * @csspart prefix-icon - The prefix icon slot\n * @csspart icon-button - The close icon button element\n * @cssprop --animation-duration - Duration of toast open/close animations\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n */\n@scopedRegistry()\n@audit({ excessiveInstanceLimit })\nexport class Toast extends LitElement {\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-toast',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton,\n    [Icon.metadata.tag]: Icon\n  };\n\n  /**\n   * (optional) By default the popover automatically anchors itself relative to the trigger element.\n   * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) anchor: string | HTMLElement;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * The trigger defines what element triggers an `open` interaction event.\n   * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) trigger: string | HTMLElement;\n\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition = 'top';\n\n  /**\n   * Sets the alignment of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign;\n\n  /**\n   * Sets the visual prominence of the toast.\n   */\n  @property({ type: String, reflect: true }) prominence: 'muted';\n\n  /**\n   * @deprecated Use the popover API instead.\n   * Determines if popover visibility behavior should be automatically controlled by the trigger.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n  /**\n   * Determines if a close button should render within toast.\n   */\n  @property({ type: Boolean }) closable = false;\n\n  /**\n   * A delayed `close` event occurs after the provided millisecond value elapses.\n   */\n  @property({ type: Number, attribute: 'close-timeout' }) closeTimeout = 0;\n\n  /**\n   * Visual treatment to represent a support status.\n   */\n  @property({ type: String, reflect: true }) status: SupportStatus;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** @private */\n  readonly popoverType: PopoverType = 'manual';\n\n  protected typeNativePopoverController = new TypeNativePopoverController<Toast>(this);\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"prefix\"><nve-icon part=\"prefix-icon\" .name=${statusIcons[this.status] as IconName} .ariaLabel=${(this.i18n as Record<string, string>)[this.status] ?? this.i18n.information}></nve-icon></slot>\n        ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${this.hidePopover} icon-name=\"cancel\" container=\"flat\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : nothing}\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'alert';\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkDO,IAAM,IAAN,cAAoB,EAAW;;EAwEI,aA3C+B,KAAA,WAAA,OAqB/B,KAAA,WAAA,IAK+B,KAAA,eAAA,GAO/B,KAAA,KAAA,IAAI,EAAqB,IAAI,GAKlC,KAAA,OAAA,KAAK,GAAgB,MAGpB,KAAA,cAAA,UAEI,KAAA,8BAAA,IAAI,EAAmC,IAAI;;;EAvEnE,KAAA,SAAA,EAAU,CAAC,GAAe,CAAM,CAAC;;;EAEtB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA;IACzB,EAAW,SAAS,MAAM;IAC1B,EAAK,SAAS,MAAM;EACvB;;CAmDA;CAeA,SAAS;EACP,OAAO,CAAI,8EAEkD,EAAY,KAAK,QAAoB,gBAAe,KAAK,KAAgC,KAAK,WAAW,KAAK,KAAK,YAAY,sBACtL,KAAK,WAAW,CAAI,mFAAkF,KAAK,YAAY,oDAAkD,KAAK,KAAK,MAAM,wBAAuB,EAAQ;CAIhO;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF;AA3EG,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAOzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAKzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAMxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAmB,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,GAKxE,EAAA,CAAA,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAK1B,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAgB,CAAC,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,GAKrD,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAOxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GArE3B,IAAA,EAAA,CAAA,EAAe,GACf,EAAM,EAAE,wBAAA,GAAuB,CAAC,CAAA,GAAA,CAAA"}

package/dist/toggletip/toggletip-footer2.js

@@ -1,6 +1,6 @@
 import { audit as e } from "../internal/controllers/audit.controller.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import r from "./toggletip-footer.js";
 import { LitElement as i, html as a } from "lit";
 //#region src/toggletip/toggletip-footer.ts
@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-toggletip-footer",
-			version: "2.7.3",
+			version: "2.8.1",
 			parents: ["nve-toggletip"]
 		};
 	}

package/dist/toggletip/toggletip-footer2.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggletip-footer2.js","names":[],"sources":["../../src/toggletip/toggletip-footer.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { audit, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './toggletip-footer.css?inline';\n\n/**\n * @element nve-toggletip-footer\n * @description Provides a designated area at the bottom of a toggletip for actions or supplementary information.\n * @documentation https://nvidia.github.io/elements/docs/elements/toggletip/\n * @since 0.38.0\n * @entrypoint \\@nvidia-elements/core/toggletip\n * @slot - default slot for the toggletip footer\n * @cssprop --border-top\n * @cssprop --padding\n * @cssprop --gap\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n */\n@audit()\nexport class ToggletipFooter extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-toggletip-footer',\n    version: '0.0.0',\n    parents: ['nve-toggletip']\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.slot = 'footer';\n  }\n}\n"],"mappings":";;;;;;AAoBO,IAAA,IAAA,cAA8B,EAAW;;gBAC9B,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,eAAe;EAC3B;;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,OAAO;CACd;AACF;OAtBC,EAAM,CAAA,GAAA,CAAA"}
+{"version":3,"file":"toggletip-footer2.js","names":[],"sources":["../../src/toggletip/toggletip-footer.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { audit, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './toggletip-footer.css?inline';\n\n/**\n * @element nve-toggletip-footer\n * @description Provides a designated area at the bottom of a toggletip for actions or supplementary information.\n * @documentation https://nvidia.github.io/elements/docs/elements/toggletip/\n * @since 0.38.0\n * @entrypoint \\@nvidia-elements/core/toggletip\n * @slot - default slot for the toggletip footer\n * @cssprop --border-top\n * @cssprop --padding\n * @cssprop --gap\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n */\n@audit()\nexport class ToggletipFooter extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-toggletip-footer',\n    version: '0.0.0',\n    parents: ['nve-toggletip']\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.slot = 'footer';\n  }\n}\n"],"mappings":";;;;;;AAoBO,IAAM,IAAN,cAA8B,EAAW;;EAC9B,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,eAAe;EAC3B;;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,OAAO;CACd;AACF;AAtBC,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA"}

package/dist/toggletip/toggletip-header2.js

@@ -1,6 +1,6 @@
 import { audit as e } from "../internal/controllers/audit.controller.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import r from "./toggletip-header.js";
 import { LitElement as i, html as a } from "lit";
 //#region src/toggletip/toggletip-header.ts
@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-toggletip-header",
-			version: "2.7.3",
+			version: "2.8.1",
 			parents: ["nve-toggletip"]
 		};
 	}

package/dist/toggletip/toggletip-header2.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggletip-header2.js","names":[],"sources":["../../src/toggletip/toggletip-header.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { audit, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './toggletip-header.css?inline';\n\n/**\n * @element nve-toggletip-header\n * @description Displays a title or contextual label at the top of a toggletip to categorize its contents.\n * @documentation https://nvidia.github.io/elements/docs/elements/toggletip/\n * @since 0.38.0\n * @entrypoint \\@nvidia-elements/core/toggletip\n * @slot - default slot for the toggletip header\n * @cssprop --border-bottom\n * @cssprop --padding\n * @cssprop --border-radius\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n */\n@audit()\nexport class ToggletipHeader extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-toggletip-header',\n    version: '0.0.0',\n    parents: ['nve-toggletip']\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.slot = 'header';\n  }\n}\n"],"mappings":";;;;;;AAoBO,IAAA,IAAA,cAA8B,EAAW;;gBAC9B,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,eAAe;EAC3B;;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,OAAO;CACd;AACF;OAtBC,EAAM,CAAA,GAAA,CAAA"}
+{"version":3,"file":"toggletip-header2.js","names":[],"sources":["../../src/toggletip/toggletip-header.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { audit, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './toggletip-header.css?inline';\n\n/**\n * @element nve-toggletip-header\n * @description Displays a title or contextual label at the top of a toggletip to categorize its contents.\n * @documentation https://nvidia.github.io/elements/docs/elements/toggletip/\n * @since 0.38.0\n * @entrypoint \\@nvidia-elements/core/toggletip\n * @slot - default slot for the toggletip header\n * @cssprop --border-bottom\n * @cssprop --padding\n * @cssprop --border-radius\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n */\n@audit()\nexport class ToggletipHeader extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-toggletip-header',\n    version: '0.0.0',\n    parents: ['nve-toggletip']\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.slot = 'header';\n  }\n}\n"],"mappings":";;;;;;AAoBO,IAAM,IAAN,cAA8B,EAAW;;EAC9B,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,eAAe;EAC3B;;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,OAAO;CACd;AACF;AAtBC,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA"}

package/dist/toggletip/toggletip2.js

@@ -6,7 +6,7 @@ import { TypeNativePopoverController as i } from "../internal/controllers/type-n
 import { scopedRegistry as a } from "../internal/decorators/scoped-registry.js";
 import { useStyles as o } from "../internal/styles/index.js";
 import { popoverStyles as s } from "../internal/styles/popover2.js";
-import c from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import c from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { IconButton as l } from "../icon-button/icon-button2.js";
 import u from "./toggletip.js";
 import d from "./toggletip.global.js";
@@ -24,7 +24,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-toggletip",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	static {

package/dist/toggletip/toggletip2.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggletip2.js","names":["#i18nController"],"sources":["../../src/toggletip/toggletip.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { PopoverAlign, PopoverPosition, PopoverType } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  audit,\n  excessiveInstanceLimit,\n  I18nController,\n  popoverStyles,\n  TypeNativePopoverController,\n  useStyles,\n  appendRootNodeStyle,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport styles from './toggletip.css?inline';\nimport globalStyles from './toggletip.global.css?inline';\n\n/**\n * @element nve-toggletip\n * @description Generic toggletip element for rendering a variety of different interactive content. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)\n * @documentation https://nvidia.github.io/elements/docs/elements/toggletip/\n * @since 0.38.0\n * @entrypoint \\@nvidia-elements/core/toggletip\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the toggletip opens.\n * @event close - Dispatched when the toggletip closes.\n * @slot - default slot for toggletip content\n * @cssprop --arrow-transform\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --box-shadow\n * @cssprop --width\n * @cssprop --min-width\n * @cssprop --gap\n * @cssprop --animation-duration - Duration of toggletip open/close animations\n * @csspart icon-button - The close icon button element\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n *\n */\n@scopedRegistry()\n@audit({ excessiveInstanceLimit })\nexport class Toggletip extends LitElement {\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-toggletip',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  /**\n   * (optional) By default the popover automatically anchors itself relative to the trigger element.\n   * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) anchor: string | HTMLElement;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * The trigger defines what element triggers an `open` interaction event.\n   * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) trigger: string | HTMLElement;\n\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition = 'top';\n\n  /**\n   * Sets the alignment of the popover relative to the provided anchor element.\n   * If an arrow exists the alginment will be relative to the arrow against the anchor.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign = 'center';\n\n  /**\n   * @deprecated Use the popover API instead.\n   * Determines if popover visibility behavior should be automatically controlled by the trigger.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n  /**\n   * Determines if a close button should render within toggletip.\n   */\n  @property({ type: Boolean }) closable = false;\n\n  /**\n   * Determines if the component renders an arrow.\n   */\n  @property({ type: Boolean }) arrow = true;\n\n  /** @private */\n  @query('.arrow') popoverArrow: HTMLElement;\n\n  /** @private */\n  readonly popoverType: PopoverType = 'auto';\n\n  protected typeNativePopoverController = new TypeNativePopoverController<Toggletip>(this);\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n    <div internal-host>\n      <slot name=\"header\"></slot>\n      ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${this.hidePopover} icon-name=\"cancel\" container=\"flat\" size=\"sm\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : ''}\n      <div id=\"content\" part=\"_content\">\n        <slot></slot>\n      </div>\n      <slot name=\"footer\"></slot>\n    </div>\n    ${this.arrow ? html`<div class=\"arrow\"></div>` : ''}\n  `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'toggletip';\n    appendRootNodeStyle(this, globalStyles);\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAqDO,IAAA,IAAA,cAAwB,EAAW;;+BA4B+B,wBAMF,0BAW7B,iBAKH,uBAMD,2CAEI,IAAI,EAAuC,IAAI,aAE/C,IAAI,EAAqB,IAAI,eAKlC,KAAKA,GAAgB;;;gBAhExC,EAAU,CAAC,GAAe,CAAM,CAAC;;;kBAEtB;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAkDA;CAUA,SAAS;EACP,OAAO,CAAI,iDAGP,KAAK,WAAW,CAAI,mFAAkF,KAAK,YAAY,8DAA4D,KAAK,KAAK,MAAM,wBAAuB,GAAG,wFAM/N,KAAK,QAAQ,CAAI,8BAA8B;CAEnD;CAEA,oBAAoB;EAIlB,AAHA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,aACvB,EAAoB,MAAM,CAAY;CACxC;AACF;GA1EG,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAOzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAKzB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAMxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAMxC,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAmB,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,MAKxE,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAK1B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAG1B,EAAM,QAAQ,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,MAYd,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAnE3B,EAAe,GACf,EAAM,EAAE,wBAAA,GAAuB,CAAC,CAAA,GAAA,CAAA"}
+{"version":3,"file":"toggletip2.js","names":[],"sources":["../../src/toggletip/toggletip.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { PopoverAlign, PopoverPosition, PopoverType } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  audit,\n  excessiveInstanceLimit,\n  I18nController,\n  popoverStyles,\n  TypeNativePopoverController,\n  useStyles,\n  appendRootNodeStyle,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport styles from './toggletip.css?inline';\nimport globalStyles from './toggletip.global.css?inline';\n\n/**\n * @element nve-toggletip\n * @description Generic toggletip element for rendering a variety of different interactive content. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)\n * @documentation https://nvidia.github.io/elements/docs/elements/toggletip/\n * @since 0.38.0\n * @entrypoint \\@nvidia-elements/core/toggletip\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the toggletip opens.\n * @event close - Dispatched when the toggletip closes.\n * @slot - default slot for toggletip content\n * @cssprop --arrow-transform\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --box-shadow\n * @cssprop --width\n * @cssprop --min-width\n * @cssprop --gap\n * @cssprop --animation-duration - Duration of toggletip open/close animations\n * @csspart icon-button - The close icon button element\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n *\n */\n@scopedRegistry()\n@audit({ excessiveInstanceLimit })\nexport class Toggletip extends LitElement {\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-toggletip',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  /**\n   * (optional) By default the popover automatically anchors itself relative to the trigger element.\n   * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) anchor: string | HTMLElement;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * The trigger defines what element triggers an `open` interaction event.\n   * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) trigger: string | HTMLElement;\n\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition = 'top';\n\n  /**\n   * Sets the alignment of the popover relative to the provided anchor element.\n   * If an arrow exists the alginment will be relative to the arrow against the anchor.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign = 'center';\n\n  /**\n   * @deprecated Use the popover API instead.\n   * Determines if popover visibility behavior should be automatically controlled by the trigger.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n  /**\n   * Determines if a close button should render within toggletip.\n   */\n  @property({ type: Boolean }) closable = false;\n\n  /**\n   * Determines if the component renders an arrow.\n   */\n  @property({ type: Boolean }) arrow = true;\n\n  /** @private */\n  @query('.arrow') popoverArrow: HTMLElement;\n\n  /** @private */\n  readonly popoverType: PopoverType = 'auto';\n\n  protected typeNativePopoverController = new TypeNativePopoverController<Toggletip>(this);\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n    <div internal-host>\n      <slot name=\"header\"></slot>\n      ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${this.hidePopover} icon-name=\"cancel\" container=\"flat\" size=\"sm\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : ''}\n      <div id=\"content\" part=\"_content\">\n        <slot></slot>\n      </div>\n      <slot name=\"footer\"></slot>\n    </div>\n    ${this.arrow ? html`<div class=\"arrow\"></div>` : ''}\n  `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'toggletip';\n    appendRootNodeStyle(this, globalStyles);\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAqDO,IAAM,IAAN,cAAwB,EAAW;;EAiEL,aArCoC,KAAA,WAAA,OAMF,KAAA,YAAA,UAW7B,KAAA,WAAA,IAKH,KAAA,QAAA,IAMD,KAAA,cAAA,QAEI,KAAA,8BAAA,IAAI,EAAuC,IAAI,GAE/C,KAAA,KAAA,IAAI,EAAqB,IAAI,GAKlC,KAAA,OAAA,KAAK,GAAgB;;;EAhExC,KAAA,SAAA,EAAU,CAAC,GAAe,CAAM,CAAC;;;EAEtB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAkDA;CAUA,SAAS;EACP,OAAO,CAAI,iDAGP,KAAK,WAAW,CAAI,mFAAkF,KAAK,YAAY,8DAA4D,KAAK,KAAK,MAAM,wBAAuB,GAAG,wFAM/N,KAAK,QAAQ,CAAI,8BAA8B;CAEnD;CAEA,oBAAoB;EAIlB,AAHA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,aACvB,EAAoB,MAAM,CAAY;CACxC;AACF;AA1EG,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAOzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAKzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAMxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAMxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAmB,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,GAKxE,EAAA,CAAA,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAK1B,EAAA,CAAA,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAG1B,EAAA,CAAA,EAAM,QAAQ,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,GAYd,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAnE3B,IAAA,EAAA,CAAA,EAAe,GACf,EAAM,EAAE,wBAAA,GAAuB,CAAC,CAAA,GAAA,CAAA"}