@nova-design-system/nova-webcomponents 3.29.0 → 3.30.0

package/dist/collection/components/nv-sidebarnavitem/nv-sidebarnavitem.js

@@ -275,7 +275,7 @@ export class NvSidebarnavitem {
     render() {
         const showNotificationBullet = this.notificationCount !== undefined && this.notificationCount > 0;
         const notificationSize = this.isSidebarCollapsed ? 'reduced' : 'default';
-        return (h(Host, { key: '1b2cf1eb2d9c5042aeb24324194feb1b55650ca9', role: "listitem" }, h("div", { key: 'c3dafa7bd8d23dacb986a049b909c799b96aa2a9', class: "nv-sidebarnavitem-trigger", onClick: this.handleToggle, "aria-expanded": this.collapsible ? String(this.open) : undefined, "aria-current": this.active && !this.collapsible ? 'page' : undefined }, this.icon && (h("div", { key: '7f5bcd6d41518923d6a83ddca423660eb2a41e6f', class: "nv-sidebarnavitem-icon" }, h("nv-icon", { key: 'bd910ba67edcd13bacea4cd6c229a20c6cb20911', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (h("nv-notification-bullet", { key: 'cd52de830137aa70411c49d619e0ede95bcaf67f', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), h("div", { key: '103b75a710cf47e26143d4821826c95d9b17408c', class: "nv-sidebarnavitem-content" }, h("slot", { key: 'bae51d0b18e157637987b686d9ee021031256290' })), h("div", { key: 'a8eb101fb69af8a4ac279d6a3ad5652e22e22e33', class: "nv-sidebarnavitem-trailing" }, h("slot", { key: '1d797ec2458e3e4abab727cfdb0939f6be082164', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (h("nv-notification-bullet", { key: '2d4e477da92c41c7b74e30829bb283b7bb130759', count: this.notificationCount, size: notificationSize })), this.collapsible && (h("nv-icon", { key: '5012ca8ad3b830a2fd57c0382d446a2891d7949a', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (h("div", { key: 'f7fd2c3cda2ae781ce10a9bc92cbd74154a18ba1', class: "nv-sidebarnavitem-subitems", ref: el => {
+        return (h(Host, { key: '5d7b7d92812e20fa0ff6765506afc26965bcad19', role: "listitem" }, h("div", { key: '080e96026b2b1d8ed1edfe3b291aea27b3ef6a29', class: "nv-sidebarnavitem-trigger", onClick: this.handleToggle, "aria-expanded": this.collapsible ? String(this.open) : undefined, "aria-current": this.active && !this.collapsible ? 'page' : undefined }, this.icon && (h("div", { key: 'e97b9141eaf73fb363374227b59317bdf40289a3', class: "nv-sidebarnavitem-icon" }, h("nv-icon", { key: '1c7f7bbf4fd36963873b70a65786e4f89463e636', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (h("nv-notification-bullet", { key: '53151726d69a262a40e3eae7751757081e7cc70e', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), h("div", { key: '1a0a208300d3d17e7c1ecce3db5a307167be730e', class: "nv-sidebarnavitem-content" }, h("slot", { key: 'e92c48e3d9c71d767fe7e775c97d6da678f132e5' })), h("div", { key: '0f436e17da2cfadb01096eaa7854ad2c2ed2a4b3', class: "nv-sidebarnavitem-trailing" }, h("slot", { key: '71d23bd377b11c2bf5eaf17c25e26df33b4d9b53', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (h("nv-notification-bullet", { key: '1d6c4ab8f326d39bd7b452d8b0fe44577369b9f4', count: this.notificationCount, size: notificationSize })), this.collapsible && (h("nv-icon", { key: '13f4eb6174a76790bac429227d05de1beae4b4ee', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (h("div", { key: '6d5a87e10c7394663237f466d36871fe7cce48ae', class: "nv-sidebarnavitem-subitems", ref: el => {
                 // Only update ref and initialize if element changed or not yet initialized
                 if (el !== this.subitemsRef) {
                     this.subitemsRef = el;
@@ -290,7 +290,7 @@ export class NvSidebarnavitem {
                         });
                     }
                 }
-            } }, h("slot", { key: 'c3d3fb65b3af3550c10c14937dea1a981e3eb010', name: "subitems" })))));
+            } }, h("slot", { key: '6790db049f61ca41292bfd865884548a5a5da5d0', name: "subitems" })))));
     }
     static get is() { return "nv-sidebarnavitem"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-sidebarnavsubitem/nv-sidebarnavsubitem.js

@@ -23,7 +23,7 @@ export class NvSidebarnavsubitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '05f74ef3cf6f93804e4446fe23977d8773deb7e2', role: "listitem", "aria-current": this.active ? 'page' : undefined }, h("div", { key: 'f1f2db51fbff9c2f58ba317cb5fcbe1805cd189b', class: "nv-sidebarnavsubitem-indicator" }), h("div", { key: 'c476dfbda77ee7bcca1338ef8d8b103806e6e3a7', class: "nv-sidebarnavsubitem-content" }, h("slot", { key: 'b80cb20a4f13b691cbd31c344d442f8a23585a26' })), h("div", { key: '383dc01158c4752506a6069be9abe2e20b83b9e4', class: "nv-sidebarnavsubitem-trailing" }, h("slot", { key: '2c63f696dd64ef8f680f3b85959d756952fd8db4', name: "trailing" }))));
+        return (h(Host, { key: '868adf5adb19818ca6caab0f866bfd9c2bf1c6f6', role: "listitem", "aria-current": this.active ? 'page' : undefined }, h("div", { key: '212d3e04dde99a698081e8ffc3aa39e696883794', class: "nv-sidebarnavsubitem-indicator" }), h("div", { key: '2ac964d11cdc914e329a0b6edcc6753d8182e60d', class: "nv-sidebarnavsubitem-content" }, h("slot", { key: 'be2a8d0b2e81f6f299ae9574c1358cfba28ed1a9' })), h("div", { key: '62e4e65e5c502c379851201cf038c6ca49ec051d', class: "nv-sidebarnavsubitem-trailing" }, h("slot", { key: '45cb80e9cbc0ab886ff7124035e781ae7f616f75', name: "trailing" }))));
     }
     static get is() { return "nv-sidebarnavsubitem"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-split/nv-split.js

@@ -3,6 +3,7 @@ import { Host, h, } from "@stencil/core";
  * The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel. Slot=“pane” elements have margin: 0 !important by default. This is a necessary technical constraint because CSS margins are not included in the flex-basis calculation, which would distort the sizing of the panes. Solution for the user: Apply margins/padding to the content inside the pane, not to the pane itself.
  * @slot pane - Content of each split pane. Use multiple `<div slot="pane">` elements.
  * @slot gutter - Optional custom content inside every gutter handle.
+ * @slot default - Placeholder for any auto rendered gutters
  */
 export class NvSplit {
     constructor() {
@@ -321,7 +322,7 @@ export class NvSplit {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '8ad8bebda77f9868b9715280c0157f247057026d', "data-dragging": this.isDragging.toString() }, h("slot", { key: '8ca002feab0c3cd7755a5f1f53864e4e20585420', name: "pane" }), h("slot", { key: 'f7f7352ed8c326ec263f6d617bcd84fea02689ea', name: "gutter" })));
+        return (h(Host, { key: '91f106634a9f04a3b6aced262ea84e75b294255e', "data-dragging": this.isDragging.toString() }, h("slot", { key: '17fb1041dc82b510d8c303208891a2eb455b885a', name: "pane" }), h("slot", { key: '4900d19af850f103a191769ef23c0cd5d2531375', name: "gutter" }), h("slot", { key: 'bfad8d859270f46094655103f10182c25c2c94fe' })));
     }
     static get is() { return "nv-split"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-stack/nv-stack.js

@@ -18,7 +18,7 @@ export class NvStack {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '861c5eed0b6dc7cdd5bf3a2d07af92127e2025bf', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: '4cf3d3fb15fa6c4ed2d7d6bb70334965b0cca457' })));
+        return (h(Host, { key: 'fb4c34f7f678b980d4caceb71c420dc6de5d0322', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: '2a5b1b24802d9527f5d076a316401f2bb403c979' })));
     }
     static get is() { return "nv-stack"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-statusindicator/nv-statusindicator.css

@@ -0,0 +1,73 @@
+nv-statusindicator {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--status-indicator-gap-x);
+  padding: var(--status-indicator-padding-y) var(--status-indicator-padding-x);
+  height: var(--status-indicator-height);
+  border-radius: var(--status-indicator-radius);
+  border: 1px solid;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
+  font-size: var(--status-indicator-label-size);
+  font-weight: var(--font-weight-medium-emphasis);
+  line-height: var(--status-indicator-label-line-height);
+  width: fit-content;
+  vertical-align: middle;
+}
+nv-statusindicator.status-success {
+  color: var(--color-feedback-success-low-text);
+  border-color: var(--color-feedback-success-low-border);
+}
+nv-statusindicator.status-success nv-icon {
+  color: var(--color-feedback-success-low-icon);
+}
+nv-statusindicator.status-success.emphasis-high {
+  background-color: var(--color-feedback-success-low-background);
+  border-color: var(--color-feedback-success-low-border-subtle);
+}
+nv-statusindicator.status-warning {
+  color: var(--color-feedback-warning-low-text);
+  border-color: var(--color-feedback-warning-low-border);
+}
+nv-statusindicator.status-warning nv-icon {
+  color: var(--color-feedback-warning-low-icon);
+}
+nv-statusindicator.status-warning.emphasis-high {
+  background-color: var(--color-feedback-warning-low-background);
+  border-color: var(--color-feedback-warning-low-border-subtle);
+}
+nv-statusindicator.status-error {
+  color: var(--color-feedback-error-low-text);
+  border-color: var(--color-feedback-error-low-border);
+}
+nv-statusindicator.status-error nv-icon {
+  color: var(--color-feedback-error-low-icon);
+}
+nv-statusindicator.status-error.emphasis-high {
+  background-color: var(--color-feedback-error-low-background);
+  border-color: var(--color-feedback-error-low-border-subtle);
+}
+nv-statusindicator.status-information {
+  color: var(--color-feedback-information-low-text);
+  border-color: var(--color-feedback-information-low-border);
+}
+nv-statusindicator.status-information nv-icon {
+  color: var(--color-feedback-information-low-icon);
+}
+nv-statusindicator.status-information.emphasis-high {
+  background-color: var(--color-feedback-information-low-background);
+  border-color: var(--color-feedback-information-low-border-subtle);
+}
+nv-statusindicator.status-neutral {
+  color: var(--color-feedback-neutral-low-text);
+  border-color: var(--color-feedback-neutral-low-border);
+}
+nv-statusindicator.status-neutral nv-icon {
+  color: var(--color-feedback-neutral-low-icon);
+}
+nv-statusindicator.status-neutral.emphasis-high {
+  background-color: var(--color-feedback-neutral-low-background);
+  border-color: var(--color-feedback-neutral-low-border-subtle);
+}
+nv-statusindicator .nv-statusindicator-label {
+  white-space: nowrap;
+}

package/dist/collection/components/nv-statusindicator/nv-statusindicator.docs.js

@@ -0,0 +1,34 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvStatusindicatorDocs = {
+    component: 'nv-statusindicator',
+    badge: 'new',
+    parentGroup: 'Status Indicator',
+    subcomponents: ['nv-icon'],
+    stories: [
+        {
+            name: 'Default',
+            args: {
+                status: 'neutral',
+                label: 'Draft',
+            },
+            template: h("nv-statusindicator", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.status),
+            description: 'Five status variants communicate different system states.',
+            template: (h("div", null, h("nv-statusindicator", { status: "success", label: "Validated" }), h("nv-statusindicator", { status: "warning", label: "Expiring" }), h("nv-statusindicator", { status: "error", label: "Failed" }), h("nv-statusindicator", { status: "information", label: "In progress" }), h("nv-statusindicator", { status: "neutral", label: "Draft" }))),
+        },
+        {
+            name: nameof(x => x.emphasis),
+            description: 'High emphasis adds a coloured background for greater visual weight. Low emphasis (default) uses border only.',
+            template: (h("div", null, h("nv-statusindicator", { status: "success", emphasis: "low", label: "Low" }), h("nv-statusindicator", { status: "success", emphasis: "high", label: "High" }), h("nv-statusindicator", { status: "error", emphasis: "low", label: "Low" }), h("nv-statusindicator", { status: "error", emphasis: "high", label: "High" }))),
+        },
+        {
+            name: nameof(x => x.label),
+            description: 'When label is omitted, the indicator renders icon-only with an aria-label for accessibility.',
+            template: (h("div", null, h("nv-statusindicator", { status: "success" }), h("nv-statusindicator", { status: "warning" }), h("nv-statusindicator", { status: "error" }), h("nv-statusindicator", { status: "information" }), h("nv-statusindicator", { status: "neutral" }))),
+        },
+    ],
+};
+export default NvStatusindicatorDocs;

package/dist/collection/components/nv-statusindicator/nv-statusindicator.js

@@ -0,0 +1,122 @@
+import { Host, h } from "@stencil/core";
+import clsx from "clsx";
+const STATUS_ICONS = {
+    success: 'circle-check',
+    warning: 'alert-triangle',
+    error: 'alert-circle',
+    information: 'info-circle',
+    neutral: 'help',
+};
+/**
+ * A static, non-interactive visual indicator that communicates
+ * system-controlled status through colour, icon, and optional label.
+ */
+export class NvStatusindicator {
+    constructor() {
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * The status variant of the indicator.
+         */
+        this.status = 'neutral';
+        /**
+         * The visual emphasis of the indicator.
+         */
+        this.emphasis = 'low';
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        const hasLabel = Boolean(this.label);
+        return (h(Host, { key: '2f1e9277152efca4f2f3ba95b44934427555854f', class: clsx(`status-${this.status}`, `emphasis-${this.emphasis}`), ...(!hasLabel ? { 'aria-label': this.status } : {}) }, h("nv-icon", { key: '55ba1905d8cde217be9156401c4075522b1e022b', name: STATUS_ICONS[this.status], size: "xs", "aria-hidden": "true" }), hasLabel && h("span", { key: 'a55382c27c4a40dbf7c800c1f1127f31f47f2852', class: "nv-statusindicator-label" }, this.label)));
+    }
+    static get is() { return "nv-statusindicator"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-statusindicator.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-statusindicator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`${FeedbackColors}`",
+                    "resolved": "\"error\" | \"information\" | \"neutral\" | \"success\" | \"warning\"",
+                    "references": {
+                        "FeedbackColors": {
+                            "location": "import",
+                            "path": "../../utils/constants",
+                            "id": "src/utils/constants.ts::FeedbackColors",
+                            "referenceLocation": "FeedbackColors"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The status variant of the indicator."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "status",
+                "defaultValue": "'neutral'"
+            },
+            "emphasis": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`${StatusIndicatorEmphasis}`",
+                    "resolved": "\"high\" | \"low\"",
+                    "references": {
+                        "StatusIndicatorEmphasis": {
+                            "location": "import",
+                            "path": "../../utils/constants",
+                            "id": "src/utils/constants.ts::StatusIndicatorEmphasis",
+                            "referenceLocation": "StatusIndicatorEmphasis"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The visual emphasis of the indicator."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "emphasis",
+                "defaultValue": "'low'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text label of the indicator. When omitted, the component renders icon-only."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label"
+            }
+        };
+    }
+}

package/dist/collection/components/nv-table/nv-table.js

@@ -58,7 +58,7 @@ export class NvTable {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'a6882cbcf9b0b12776f6d4be6d9cbfb42aff6833' }, h("slot", { key: 'd4d47a2eb77c50ff30109e217ceecd2677b9d28d' })));
+        return (h(Host, { key: 'bc442df56ece833f6a3b6a4af24e0e67e430aefd' }, h("slot", { key: '9f0deb196b2a1bfca8d30a05a752e446068f3f3c' })));
     }
     static get is() { return "nv-table"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-table/styles/nv-table.css

@@ -9,6 +9,15 @@ nv-table table {
 nv-table table thead {
   background: var(--components-datagrid-header-background);
 }
+nv-table table tbody tr:hover {
+  background: var(--components-datagrid-body-background-hover);
+}
+nv-table table tbody tr[data-selected] {
+  background: var(--components-datagrid-body-background-active);
+}
+nv-table table tbody tr[data-selected]:hover {
+  background: var(--components-datagrid-body-background-active);
+}
 nv-table table tbody tr.nv-datatable-row-clickable {
   cursor: pointer;
 }
@@ -19,14 +28,24 @@ nv-table table tbody tr.nv-datatable-row-clickable:focus-visible {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
   outline-offset: calc(var(--focus-outline-offset) * 1);
 }
-nv-table table tbody tr[data-selected] {
-  background: var(--components-datagrid-body-background-active);
+nv-table table tbody tr.nv-datatable-expanded-row > td {
+  padding: 0;
+  height: auto;
+  border-bottom: 1px solid var(--components-datagrid-expander-border);
+  background: var(--components-datagrid-expander-expander-background);
+}
+nv-table table tbody .nv-datatable-expanded-content {
+  position: sticky;
+  left: 0;
+  width: 0;
+  min-width: 100%;
+  padding: var(--datagrid-cell-body-padding-y) var(--datagrid-cell-body-padding-x);
+  box-sizing: border-box;
 }
 nv-table table[data-row-click-enabled=true] tbody tr.nv-datatable-row-clickable:hover td {
   background: var(--components-datagrid-body-background-hover);
 }
 nv-table table[data-row-click-enabled=false] > tbody > tr:hover:not([data-selected]) {
-  background-color: transparent !important;
   cursor: default;
 }
 nv-table table[data-row-click-enabled=false] > tbody > tr:hover:not([data-selected]) > td {

package/dist/collection/components/nv-tableheader/nv-tableheader.js

@@ -55,7 +55,7 @@ export class NvTableheader {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '962f555a02b3035148c5915ae7493c68c0202cc7', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, h("slot", { key: '0e69da3d4e2eb8ad01060f51d5043ffc14380415' }), this.sortable && (h("span", { key: 'a9b5ff97552d142cc3e1becc14a34ebab1f3092d', class: "sort-icon-wrap", "aria-hidden": "true" }, h("nv-iconbutton", { key: '76f832eba2b57f244dbce597668f493a918cf599', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
+        return (h(Host, { key: '1edf4d679b60517b8fdc239a1bc9e91fc55990ab', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, h("slot", { key: '33d9ae13cbae6d34cf374bc626bc616c57e43322' }), this.sortable && (h("span", { key: '61e15b2af831a97051590e31369b42774f13ae53', class: "sort-icon-wrap", "aria-hidden": "true" }, h("nv-iconbutton", { key: 'e8cefc8559de91c2e892547b56eb51d5bc103c1c', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
             // prevent mousedown from selecting text
             onMouseDown: (e) => e.preventDefault(), class: {
                 'is-none': this.sortDirection === 'none',

package/dist/collection/components/nv-tag/nv-tag.css

@@ -0,0 +1,228 @@
+/* Tag color variants mapped to rainbow palette tokens */
+/* Color token maps: tag color name -> rainbow token */
+nv-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tag-gap-x);
+  padding: 0 var(--tag-padding-x);
+  border-radius: var(--tag-border-radius);
+  border: 1px solid;
+  overflow: hidden;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium-emphasis);
+  line-height: var(--line-height-xs);
+  height: var(--tag-height);
+  width: fit-content;
+  vertical-align: middle;
+}
+nv-tag.has-dismiss {
+  padding-right: 0;
+}
+nv-tag.tag-orange {
+  color: var(--color-rainbow-2-text);
+  background-color: var(--color-rainbow-2-background);
+  border-color: var(--color-rainbow-2-border-light);
+}
+nv-tag.tag-orange nv-icon {
+  color: var(--color-rainbow-2-icon);
+}
+nv-tag.tag-orange .nv-tag-content:focus, nv-tag.tag-orange .nv-tag-content:focus-within {
+  outline: none;
+}
+nv-tag.tag-orange .nv-tag-content:focus-visible, nv-tag.tag-orange .nv-tag-content:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-2-text);
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-tag.tag-crimson {
+  color: var(--color-rainbow-6-text);
+  background-color: var(--color-rainbow-6-background);
+  border-color: var(--color-rainbow-6-border-light);
+}
+nv-tag.tag-crimson nv-icon {
+  color: var(--color-rainbow-6-icon);
+}
+nv-tag.tag-crimson .nv-tag-content:focus, nv-tag.tag-crimson .nv-tag-content:focus-within {
+  outline: none;
+}
+nv-tag.tag-crimson .nv-tag-content:focus-visible, nv-tag.tag-crimson .nv-tag-content:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-6-text);
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-tag.tag-yellow {
+  color: var(--color-rainbow-3-text);
+  background-color: var(--color-rainbow-3-background);
+  border-color: var(--color-rainbow-3-border-light);
+}
+nv-tag.tag-yellow nv-icon {
+  color: var(--color-rainbow-3-icon);
+}
+nv-tag.tag-yellow .nv-tag-content:focus, nv-tag.tag-yellow .nv-tag-content:focus-within {
+  outline: none;
+}
+nv-tag.tag-yellow .nv-tag-content:focus-visible, nv-tag.tag-yellow .nv-tag-content:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-3-text);
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-tag.tag-red {
+  color: var(--color-rainbow-4-text);
+  background-color: var(--color-rainbow-4-background);
+  border-color: var(--color-rainbow-4-border-light);
+}
+nv-tag.tag-red nv-icon {
+  color: var(--color-rainbow-4-icon);
+}
+nv-tag.tag-red .nv-tag-content:focus, nv-tag.tag-red .nv-tag-content:focus-within {
+  outline: none;
+}
+nv-tag.tag-red .nv-tag-content:focus-visible, nv-tag.tag-red .nv-tag-content:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-4-text);
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-tag.tag-blue {
+  color: var(--color-rainbow-8-text);
+  background-color: var(--color-rainbow-8-background);
+  border-color: var(--color-rainbow-8-border-light);
+}
+nv-tag.tag-blue nv-icon {
+  color: var(--color-rainbow-8-icon);
+}
+nv-tag.tag-blue .nv-tag-content:focus, nv-tag.tag-blue .nv-tag-content:focus-within {
+  outline: none;
+}
+nv-tag.tag-blue .nv-tag-content:focus-visible, nv-tag.tag-blue .nv-tag-content:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-8-text);
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-tag.tag-amber {
+  color: var(--color-rainbow-1-text);
+  background-color: var(--color-rainbow-1-background);
+  border-color: var(--color-rainbow-1-border-light);
+}
+nv-tag.tag-amber nv-icon {
+  color: var(--color-rainbow-1-icon);
+}
+nv-tag.tag-amber .nv-tag-content:focus, nv-tag.tag-amber .nv-tag-content:focus-within {
+  outline: none;
+}
+nv-tag.tag-amber .nv-tag-content:focus-visible, nv-tag.tag-amber .nv-tag-content:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-1-text);
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-tag.tag-green {
+  color: var(--color-rainbow-7-text);
+  background-color: var(--color-rainbow-7-background);
+  border-color: var(--color-rainbow-7-border-light);
+}
+nv-tag.tag-green nv-icon {
+  color: var(--color-rainbow-7-icon);
+}
+nv-tag.tag-green .nv-tag-content:focus, nv-tag.tag-green .nv-tag-content:focus-within {
+  outline: none;
+}
+nv-tag.tag-green .nv-tag-content:focus-visible, nv-tag.tag-green .nv-tag-content:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-7-text);
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-tag.tag-turquoise {
+  color: var(--color-rainbow-5-text);
+  background-color: var(--color-rainbow-5-background);
+  border-color: var(--color-rainbow-5-border-light);
+}
+nv-tag.tag-turquoise nv-icon {
+  color: var(--color-rainbow-5-icon);
+}
+nv-tag.tag-turquoise .nv-tag-content:focus, nv-tag.tag-turquoise .nv-tag-content:focus-within {
+  outline: none;
+}
+nv-tag.tag-turquoise .nv-tag-content:focus-visible, nv-tag.tag-turquoise .nv-tag-content:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-5-text);
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-tag.tag-lime {
+  color: var(--color-rainbow-9-text);
+  background-color: var(--color-rainbow-9-background);
+  border-color: var(--color-rainbow-9-border-light);
+}
+nv-tag.tag-lime nv-icon {
+  color: var(--color-rainbow-9-icon);
+}
+nv-tag.tag-lime .nv-tag-content:focus, nv-tag.tag-lime .nv-tag-content:focus-within {
+  outline: none;
+}
+nv-tag.tag-lime .nv-tag-content:focus-visible, nv-tag.tag-lime .nv-tag-content:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-9-text);
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-tag.tag-grey {
+  color: var(--color-rainbow-10-text);
+  background-color: var(--color-rainbow-10-background);
+  border-color: var(--color-rainbow-10-border-light);
+}
+nv-tag.tag-grey nv-icon {
+  color: var(--color-rainbow-10-icon);
+}
+nv-tag.tag-grey .nv-tag-content:focus, nv-tag.tag-grey .nv-tag-content:focus-within {
+  outline: none;
+}
+nv-tag.tag-grey .nv-tag-content:focus-visible, nv-tag.tag-grey .nv-tag-content:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-10-text);
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-tag .nv-tag-leading {
+  display: contents;
+}
+nv-tag .nv-tag-label {
+  white-space: nowrap;
+}
+nv-tag .nv-tag-content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tag-gap-x);
+  color: inherit;
+  text-decoration: none;
+  border-radius: var(--tag-border-radius);
+}
+nv-tag.is-link .nv-tag-content {
+  cursor: pointer;
+}
+nv-tag.is-link .nv-tag-content:hover {
+  text-decoration: underline;
+}
+nv-tag .nv-tag-dismiss {
+  padding: 0;
+  margin: 0;
+  line-height: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--tag-height);
+  height: var(--tag-height);
+  border-radius: 0;
+  appearance: none;
+}
+nv-tag .nv-tag-dismiss:focus, nv-tag .nv-tag-dismiss:focus-within {
+  outline: none;
+}
+nv-tag .nv-tag-dismiss:focus-visible {
+  border-radius: 0;
+  box-shadow: inset 0 0 0 var(--focus-outline-stroke) var(--color-focus-brand);
+}
+nv-tag .nv-tag-dismiss:hover {
+  background-color: var(--color-interaction-container-neutral-background-hover);
+  mix-blend-mode: multiply;
+}
+nv-tag .nv-tag-dismiss:disabled {
+  opacity: var(--opacity-disabled);
+  pointer-events: none;
+  cursor: default;
+}
+nv-tag nv-icon > svg {
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  stroke-width: 1.2px;
+}