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

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,12 +9,48 @@ nv-table table {
 nv-table table thead {
   background: var(--components-datagrid-header-background);
 }
-nv-table table tbody tr:hover td {
+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;
+}
+nv-table table tbody tr.nv-datatable-row-clickable td {
+  transition: background-color 120ms ease-in-out;
+}
+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.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]) {
+  cursor: default;
+}
+nv-table table[data-row-click-enabled=false] > tbody > tr:hover:not([data-selected]) > td {
+  background: var(--components-datagrid-body-background-default) !important;
+}
 nv-table table td {
   height: var(--spacing-16);
   padding: var(--datagrid-cell-body-padding-y) var(--datagrid-cell-body-padding-x) var(--spacing-2) var(--datagrid-cell-body-padding-x);

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;
+}

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

@@ -0,0 +1,114 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvTagDocs = {
+    component: 'nv-tag',
+    badge: 'new',
+    parentGroup: 'Tag',
+    subcomponents: ['nv-icon'],
+    stories: [
+        // Default
+        {
+            name: 'Default',
+            args: {
+                label: 'Category',
+            },
+            template: h("nv-tag", { "data-storybook-args": true }),
+        },
+        // label
+        {
+            name: nameof(x => x.label),
+            args: {
+                label: 'Infrastructure',
+            },
+            template: h("nv-tag", { "data-storybook-args": true }),
+        },
+        // color
+        {
+            name: nameof(x => x.color),
+            description: 'Tag supports 10 colour variants from the rainbow palette.',
+            template: (h("div", { "data-class": "flex flex-wrap gap-4" }, h("nv-tag", { "data-storybook-args": true, color: "orange", label: "Orange" }), h("nv-tag", { "data-storybook-args": true, color: "crimson", label: "Crimson" }), h("nv-tag", { "data-storybook-args": true, color: "yellow", label: "Yellow" }), h("nv-tag", { "data-storybook-args": true, color: "red", label: "Red" }), h("nv-tag", { "data-storybook-args": true, color: "blue", label: "Blue" }), h("nv-tag", { "data-storybook-args": true, color: "amber", label: "Amber" }), h("nv-tag", { "data-storybook-args": true, color: "green", label: "Green" }), h("nv-tag", { "data-storybook-args": true, color: "turquoise", label: "Turquoise" }), h("nv-tag", { "data-storybook-args": true, color: "lime", label: "Lime" }), h("nv-tag", { "data-storybook-args": true, color: "grey", label: "Grey" }))),
+        },
+        // dismissible
+        {
+            name: nameof(x => x.dismissible),
+            description: 'When dismissible, a dismiss button is rendered. Clicking it emits the `dismissed` event.',
+            args: {
+                label: 'Active filter',
+                color: 'orange',
+                dismissible: true,
+            },
+            template: h("nv-tag", { "data-storybook-args": true }),
+        },
+        // href
+        {
+            name: nameof(x => x.href),
+            description: 'When `href` is set, the tag renders as a link. The label area navigates; the dismiss button (if present) is a separate action zone.',
+            args: {
+                label: 'View category',
+                color: 'amber',
+                href: '#',
+            },
+            template: h("nv-tag", { "data-storybook-args": true }),
+        },
+        // target
+        {
+            name: nameof(x => x.target),
+            description: 'When `target="_blank"`, the link opens in a new tab and `rel="noopener noreferrer"` is automatically applied for security.',
+            args: {
+                label: 'Documentation',
+                color: 'blue',
+                href: 'https://nova.eliagroup.io/',
+                target: '_blank',
+            },
+            template: h("nv-tag", { "data-storybook-args": true }),
+        },
+        // rel
+        {
+            name: nameof(x => x.rel),
+            description: 'Overrides the `rel` attribute on the anchor. When `target="_blank"` and `rel` is not set, it defaults to `"noopener noreferrer"` for security.',
+            args: {
+                label: 'Partner site',
+                color: 'blue',
+                href: 'https://partner.example.com/',
+                target: '_blank',
+                rel: 'noopener',
+            },
+            template: h("nv-tag", { "data-storybook-args": true }),
+        },
+        // disabled
+        {
+            name: nameof(x => x.disabled),
+            description: 'When `disabled` is true, the dismiss button is visually dimmed and non-interactive.',
+            args: {
+                label: 'Read-only filter',
+                color: 'orange',
+                dismissible: true,
+                disabled: true,
+            },
+            template: h("nv-tag", { "data-storybook-args": true }),
+        },
+        // Combined: link + dismissible + icon
+        {
+            name: 'LinkDismissibleWithIcon',
+            description: 'Combined variant with link navigation, dismiss action, and a leading icon. The label area navigates while the dismiss button emits a separate event.',
+            args: {
+                label: 'Energy',
+                color: 'turquoise',
+                dismissible: true,
+                href: '#',
+            },
+            template: (h("nv-tag", { "data-storybook-args": true }, h("nv-icon", { slot: "leading-icon", name: "bolt" }))),
+        },
+        // Slot: leading-icon
+        {
+            name: 'SlotLeadingIcon',
+            description: 'Tag with a leading icon via the `leading-icon` slot.',
+            args: {
+                label: 'Renewable',
+                color: 'green',
+            },
+            template: (h("nv-tag", { "data-storybook-args": true }, h("nv-icon", { slot: "leading-icon", name: "leaf" }))),
+        },
+    ],
+};
+export default NvTagDocs;