@nova-design-system/nova-webcomponents 3.0.0-beta.35 → 3.0.0-beta.37

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

@@ -6,27 +6,17 @@ const NvBreadcrumbsDocs = {
     stories: [
         {
             name: 'Default',
-            template: (h("nv-breadcrumbs", { "data-storybook-args": true }, h("nv-breadcrumb", null, h("nv-icon", { name: "home" })), h("nv-breadcrumb", null, h("a", { href: "#" }, "Example with link")), h("nv-breadcrumb", { current: true }, h("a", { href: "#" }, "Current page")))),
-        },
-        {
-            name: 'With tooltips',
-            description: 'A breadcrumb structure that includes tooltips for additional context. Each breadcrumb item provides a tooltip describing its function',
-            template: (h("nv-breadcrumbs", { "data-storybook-args": true, "data-class": "my-5" }, h("nv-breadcrumb", { tooltip: "Home" }, h("a", { href: "#" }, h("nv-icon", { name: "home" }))), h("nv-breadcrumb", { tooltip: "User account" }, h("a", { href: "#" }, h("nv-icon", { name: "user" }))), h("nv-breadcrumb", { current: true, tooltip: "You are here" }, h("a", { href: "#" }, "Current page")))),
+            template: (h("nv-breadcrumbs", { "data-storybook-args": true }, h("nv-breadcrumb", null, h("a", { href: "#" }, "Breadcrumb")), h("nv-breadcrumb", null, h("a", { href: "#" }, "Breadcrumb")), h("nv-breadcrumb", null, h("a", { href: "#" }, "Breadcrumb")), h("nv-breadcrumb", { current: true }, h("a", { href: "#" }, "Breadcrumb")))),
         },
         {
             name: 'Collapsed',
             description: 'A breadcrumb example featuring a collapsed menu for handling long navigation paths',
-            template: (h("nv-breadcrumbs", { "data-storybook-args": true, "data-class": "mt-5 mb-20" }, h("nv-breadcrumb", null, h("a", { href: "#" }, h("nv-icon", { name: "home" }))), h("nv-breadcrumb", { type: "collapsed", tooltip: "Click to expand" }, h("li", null, h("a", { href: "#" }, "User Account")), h("li", null, h("a", { href: "#" }, "Settings")), h("li", null, h("a", { href: "#" }, "Payment"))), h("nv-breadcrumb", { current: true }, h("a", { href: "#" }, "Current page")))),
-        },
-        {
-            name: 'Custom separator',
-            description: 'A breadcrumb example featuring a custom separator icon for visual clarity',
-            template: (h("nv-breadcrumbs", { "data-storybook-args": true }, h("nv-breadcrumb", null, h("nv-icon", { name: "home" }), h("span", { slot: "separator" }, "/")), h("nv-breadcrumb", null, h("a", { href: "#" }, "Example with link"), h("span", { slot: "separator" }, "/")), h("nv-breadcrumb", { current: true }, h("a", { href: "#" }, "Current page")))),
+            template: (h("nv-breadcrumbs", { "data-storybook-args": true, "data-class": "mt-5 mb-20" }, h("nv-breadcrumb", null, h("a", { href: "#" }, "Breadcrumb")), h("nv-breadcrumb", { type: "collapsed", tooltip: "Click to expand" }, h("li", null, h("nv-breadcrumb", null, h("a", { href: "#" }, "Breadcrumb"))), h("li", null, h("nv-breadcrumb", null, h("a", { href: "#" }, "Breadcrumb"))), h("li", null, h("nv-breadcrumb", null, h("a", { href: "#" }, "Breadcrumb")))), h("nv-breadcrumb", null, h("a", { href: "#" }, "Breadcrumb")), h("nv-breadcrumb", { current: true }, h("a", { href: "#" }, "Breadcrumb")))),
         },
         {
             name: 'Current page',
-            description: 'Toggle the breadcrumbs to show the current page the visitor is on, updates the style and aria-current attribute',
-            template: (h("nv-breadcrumbs", { "data-storybook-args": true }, h("nv-breadcrumb", null, h("a", { href: "#" }, "Home")), h("nv-breadcrumb", null, h("a", { href: "#" }, "User account")), h("nv-breadcrumb", { current: true }, h("a", { href: "#" }, "Current page")))),
+            description: 'Hides the breadcrumb and sets the aria-current attribute, use this on the last breadcrumb, and include a header for the page.',
+            template: (h("div", null, h("nv-breadcrumbs", { "data-storybook-args": true }, h("nv-breadcrumb", null, h("a", { href: "#" }, "Home")), h("nv-breadcrumb", null, h("a", { href: "#" }, "User account")), h("nv-breadcrumb", { current: true }, h("a", { href: "#" }, "Authorization"))), h("h2", { "data-class": "mt-2" }, "Authorization"))),
         },
     ],
 };

package/dist/collection/components/nv-breadcrumbs/nv-breadcrumbs.docs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-breadcrumbs.docs.js","sourceRoot":"","sources":["../../../src/components/nv-breadcrumbs/nv-breadcrumbs.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAIlC,MAAM,iBAAiB,GAAuC;IAC5D,SAAS,EAAE,gBAAgB;IAC3B,aAAa,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC;IAC3C,kBAAkB,EAAE,CAAC,eAAe,CAAC;IACrC,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,CACR;gBACE;oBACE,eAAS,IAAI,EAAC,MAAM,GAAW,CACjB;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,wBAAsB,CACnB;gBAChB,qBAAe,OAAO;oBACpB,SAAG,IAAI,EAAC,GAAG,mBAAiB,CACd,CACD,CAClB;SACF;QACD;YACE,IAAI,EAAE,eAAe;YACrB,WAAW,EACT,uIAAuI;YACzI,QAAQ,EAAE,CACR,iEAA+C,MAAM;gBACnD,qBAAe,OAAO,EAAC,MAAM;oBAC3B,SAAG,IAAI,EAAC,GAAG;wBACT,eAAS,IAAI,EAAC,MAAM,GAAW,CAC7B,CACU;gBAChB,qBAAe,OAAO,EAAC,cAAc;oBACnC,SAAG,IAAI,EAAC,GAAG;wBACT,eAAS,IAAI,EAAC,MAAM,GAAW,CAC7B,CACU;gBAChB,qBAAe,OAAO,QAAC,OAAO,EAAC,cAAc;oBAC3C,SAAG,IAAI,EAAC,GAAG,mBAAiB,CACd,CACD,CAClB;SACF;QACD;YACE,IAAI,EAAE,WAAW;YACjB,WAAW,EACT,oFAAoF;YACtF,QAAQ,EAAE,CACR,iEAA+C,YAAY;gBACzD;oBACE,SAAG,IAAI,EAAC,GAAG;wBACT,eAAS,IAAI,EAAC,MAAM,GAAW,CAC7B,CACU;gBAChB,qBAAe,IAAI,EAAC,WAAW,EAAC,OAAO,EAAC,iBAAiB;oBACvD;wBACE,SAAG,IAAI,EAAC,GAAG,mBAAiB,CACzB;oBACL;wBACE,SAAG,IAAI,EAAC,GAAG,eAAa,CACrB;oBACL;wBACE,SAAG,IAAI,EAAC,GAAG,cAAY,CACpB,CACS;gBAChB,qBAAe,OAAO;oBACpB,SAAG,IAAI,EAAC,GAAG,mBAAiB,CACd,CACD,CAClB;SACF;QACD;YACE,IAAI,EAAE,kBAAkB;YACxB,WAAW,EACT,2EAA2E;YAC7E,QAAQ,EAAE,CACR;gBACE;oBACE,eAAS,IAAI,EAAC,MAAM,GAAW;oBAC/B,YAAM,IAAI,EAAC,WAAW,QAAS,CACjB;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,wBAAsB;oBACjC,YAAM,IAAI,EAAC,WAAW,QAAS,CACjB;gBAChB,qBAAe,OAAO;oBACpB,SAAG,IAAI,EAAC,GAAG,mBAAiB,CACd,CACD,CAClB;SACF;QACD;YACE,IAAI,EAAE,cAAc;YACpB,WAAW,EACT,iHAAiH;YACnH,QAAQ,EAAE,CACR;gBACE;oBACE,SAAG,IAAI,EAAC,GAAG,WAAS,CACN;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,mBAAiB,CACd;gBAChB,qBAAe,OAAO;oBACpB,SAAG,IAAI,EAAC,GAAG,mBAAiB,CACd,CACD,CAClB;SACF;KACF;CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvBreadcrumbsDocs: NovaDocs<Components.NvBreadcrumbs> = {\n  component: 'nv-breadcrumbs',\n  subcomponents: ['nv-breadcrumb', 'nv-icon'],\n  composedComponents: ['nv-breadcrumb'],\n  stories: [\n    {\n      name: 'Default',\n      template: (\n        <nv-breadcrumbs data-storybook-args>\n          <nv-breadcrumb>\n            <nv-icon name=\"home\"></nv-icon>\n          </nv-breadcrumb>\n          <nv-breadcrumb>\n            <a href=\"#\">Example with link</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb current>\n            <a href=\"#\">Current page</a>\n          </nv-breadcrumb>\n        </nv-breadcrumbs>\n      ),\n    },\n    {\n      name: 'With tooltips',\n      description:\n        'A breadcrumb structure that includes tooltips for additional context. Each breadcrumb item provides a tooltip describing its function',\n      template: (\n        <nv-breadcrumbs data-storybook-args data-class=\"my-5\">\n          <nv-breadcrumb tooltip=\"Home\">\n            <a href=\"#\">\n              <nv-icon name=\"home\"></nv-icon>\n            </a>\n          </nv-breadcrumb>\n          <nv-breadcrumb tooltip=\"User account\">\n            <a href=\"#\">\n              <nv-icon name=\"user\"></nv-icon>\n            </a>\n          </nv-breadcrumb>\n          <nv-breadcrumb current tooltip=\"You are here\">\n            <a href=\"#\">Current page</a>\n          </nv-breadcrumb>\n        </nv-breadcrumbs>\n      ),\n    },\n    {\n      name: 'Collapsed',\n      description:\n        'A breadcrumb example featuring a collapsed menu for handling long navigation paths',\n      template: (\n        <nv-breadcrumbs data-storybook-args data-class=\"mt-5 mb-20\">\n          <nv-breadcrumb>\n            <a href=\"#\">\n              <nv-icon name=\"home\"></nv-icon>\n            </a>\n          </nv-breadcrumb>\n          <nv-breadcrumb type=\"collapsed\" tooltip=\"Click to expand\">\n            <li>\n              <a href=\"#\">User Account</a>\n            </li>\n            <li>\n              <a href=\"#\">Settings</a>\n            </li>\n            <li>\n              <a href=\"#\">Payment</a>\n            </li>\n          </nv-breadcrumb>\n          <nv-breadcrumb current>\n            <a href=\"#\">Current page</a>\n          </nv-breadcrumb>\n        </nv-breadcrumbs>\n      ),\n    },\n    {\n      name: 'Custom separator',\n      description:\n        'A breadcrumb example featuring a custom separator icon for visual clarity',\n      template: (\n        <nv-breadcrumbs data-storybook-args>\n          <nv-breadcrumb>\n            <nv-icon name=\"home\"></nv-icon>\n            <span slot=\"separator\">/</span>\n          </nv-breadcrumb>\n          <nv-breadcrumb>\n            <a href=\"#\">Example with link</a>\n            <span slot=\"separator\">/</span>\n          </nv-breadcrumb>\n          <nv-breadcrumb current>\n            <a href=\"#\">Current page</a>\n          </nv-breadcrumb>\n        </nv-breadcrumbs>\n      ),\n    },\n    {\n      name: 'Current page',\n      description:\n        'Toggle the breadcrumbs to show the current page the visitor is on, updates the style and aria-current attribute',\n      template: (\n        <nv-breadcrumbs data-storybook-args>\n          <nv-breadcrumb>\n            <a href=\"#\">Home</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb>\n            <a href=\"#\">User account</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb current>\n            <a href=\"#\">Current page</a>\n          </nv-breadcrumb>\n        </nv-breadcrumbs>\n      ),\n    },\n  ],\n};\n\nexport default NvBreadcrumbsDocs;\n"]}
+{"version":3,"file":"nv-breadcrumbs.docs.js","sourceRoot":"","sources":["../../../src/components/nv-breadcrumbs/nv-breadcrumbs.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAIlC,MAAM,iBAAiB,GAAuC;IAC5D,SAAS,EAAE,gBAAgB;IAC3B,aAAa,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC;IAC3C,kBAAkB,EAAE,CAAC,eAAe,CAAC;IACrC,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,CACR;gBACE;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB,qBAAe,OAAO;oBACpB,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACD,CAClB;SACF;QACD;YACE,IAAI,EAAE,WAAW;YACjB,WAAW,EACT,oFAAoF;YACtF,QAAQ,EAAE,CACR,iEAA+C,YAAY;gBACzD;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB,qBAAe,IAAI,EAAC,WAAW,EAAC,OAAO,EAAC,iBAAiB;oBACvD;wBACE;4BACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACb;oBACL;wBACE;4BACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACb;oBACL;wBACE;4BACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACb,CACS;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB,qBAAe,OAAO;oBACpB,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACD,CAClB;SACF;QACD;YACE,IAAI,EAAE,cAAc;YACpB,WAAW,EACT,+HAA+H;YACjI,QAAQ,EAAE,CACR;gBACE;oBACE;wBACE,SAAG,IAAI,EAAC,GAAG,WAAS,CACN;oBAChB;wBACE,SAAG,IAAI,EAAC,GAAG,mBAAiB,CACd;oBAChB,qBAAe,OAAO;wBACpB,SAAG,IAAI,EAAC,GAAG,oBAAkB,CACf,CACD;gBAEjB,wBAAe,MAAM,oBAAmB,CACpC,CACP;SACF;KACF;CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvBreadcrumbsDocs: NovaDocs<Components.NvBreadcrumbs> = {\n  component: 'nv-breadcrumbs',\n  subcomponents: ['nv-breadcrumb', 'nv-icon'],\n  composedComponents: ['nv-breadcrumb'],\n  stories: [\n    {\n      name: 'Default',\n      template: (\n        <nv-breadcrumbs data-storybook-args>\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb current>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n        </nv-breadcrumbs>\n      ),\n    },\n    {\n      name: 'Collapsed',\n      description:\n        'A breadcrumb example featuring a collapsed menu for handling long navigation paths',\n      template: (\n        <nv-breadcrumbs data-storybook-args data-class=\"mt-5 mb-20\">\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb type=\"collapsed\" tooltip=\"Click to expand\">\n            <li>\n              <nv-breadcrumb>\n                <a href=\"#\">Breadcrumb</a>\n              </nv-breadcrumb>\n            </li>\n            <li>\n              <nv-breadcrumb>\n                <a href=\"#\">Breadcrumb</a>\n              </nv-breadcrumb>\n            </li>\n            <li>\n              <nv-breadcrumb>\n                <a href=\"#\">Breadcrumb</a>\n              </nv-breadcrumb>\n            </li>\n          </nv-breadcrumb>\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb current>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n        </nv-breadcrumbs>\n      ),\n    },\n    {\n      name: 'Current page',\n      description:\n        'Hides the breadcrumb and sets the aria-current attribute, use this on the last breadcrumb, and include a header for the page.',\n      template: (\n        <div>\n          <nv-breadcrumbs data-storybook-args>\n            <nv-breadcrumb>\n              <a href=\"#\">Home</a>\n            </nv-breadcrumb>\n            <nv-breadcrumb>\n              <a href=\"#\">User account</a>\n            </nv-breadcrumb>\n            <nv-breadcrumb current>\n              <a href=\"#\">Authorization</a>\n            </nv-breadcrumb>\n          </nv-breadcrumbs>\n\n          <h2 data-class=\"mt-2\">Authorization</h2>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvBreadcrumbsDocs;\n"]}

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

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 export class NvBreadcrumbs {
     //#region RENDER
     render() {
-        return (h(Host, { key: '5ab0f09cb86a92464ffcd06d8129543539bdcddf', role: "navigation", "aria-label": "breadcrumbs" }, h("ol", { key: 'a7624a2400d9a91ec477694bbd3600960e198981' }, h("slot", { key: '7c4102ceebe110377bf212e0695bdec6b455ea74' }))));
+        return (h(Host, { key: 'd54bb25f9f34ea0f5ea58da6a60261aed57fefef', role: "navigation", "aria-label": "breadcrumbs" }, h("ol", { key: '660c31fbb8860ce0639b475875dd720f3876549b' }, h("slot", { key: 'c77828910bfb759839d04b5ac28e11cebec7c937' }))));
     }
     static get is() { return "nv-breadcrumbs"; }
     static get originalStyleUrls() {

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

@@ -16,6 +16,11 @@ const NvButtonDocs = {
             name: nameof(x => x.emphasis),
             template: (h("div", { "data-class": "flex gap-4" }, h("nv-button", { "data-storybook-args": true, emphasis: "high" }, "emphasis: high"), h("nv-button", { "data-storybook-args": true, emphasis: "medium" }, "emphasis: medium"), h("nv-button", { "data-storybook-args": true, emphasis: "low" }, "emphasis: low"), h("nv-button", { "data-storybook-args": true, emphasis: "lower" }, "emphasis: lower"))),
         },
+        {
+            name: nameof(x => x.active),
+            args: { size: 'md' },
+            template: (h("div", { "data-class": "flex gap-4" }, h("nv-button", { "data-storybook-args": true, emphasis: "high", active: true }, "high active"), h("nv-button", { "data-storybook-args": true, emphasis: "medium", active: true }, "medium active"), h("nv-button", { "data-storybook-args": true, emphasis: "low", active: true }, "low active"), h("nv-button", { "data-storybook-args": true, emphasis: "lower", active: true }, "lower active"))),
+        },
         {
             name: nameof(x => x.danger),
             args: { size: 'md' },
@@ -43,7 +48,7 @@ const NvButtonDocs = {
         {
             name: 'LinkAsButton',
             description: 'You can use our button classes if you need to use link tags',
-            template: (h("div", { "data-class": "flex flex-col gap-4" }, h("a", { href: "#", "data-class": "nv-button" }, "Default Link"), h("div", { "data-class": "flex flex-wrap gap-4 items-center" }, h("a", { href: "#", "data-class": "nv-button size-xs" }, "Link size-xs"), h("a", { href: "#", "data-class": "nv-button size-sm" }, "Link size-sm"), h("a", { href: "#", "data-class": "nv-button size-md" }, "Link size-md"), h("a", { href: "#", "data-class": "nv-button size-lg" }, "Link size-lg")), h("div", { "data-class": "flex flex-wrap gap-4" }, h("a", { href: "#", "data-class": "nv-button emphasis-high" }, "Emphasis High"), h("a", { href: "#", "data-class": "nv-button emphasis-medium" }, "Emphasis Medium"), h("a", { href: "#", "data-class": "nv-button emphasis-low" }, "Emphasis Low"), h("a", { href: "#", "data-class": "nv-button emphasis-lower" }, "Emphasis Lower")), h("div", { "data-class": "flex flex-wrap gap-4" }, h("a", { href: "#", "data-class": "nv-button danger" }, "Default Danger"), h("a", { href: "#", "data-class": "nv-button danger emphasis-high" }, "Danger Emphasis High"), h("a", { href: "#", "data-class": "nv-button danger emphasis-medium" }, "Danger Emphasis Medium"), h("a", { href: "#", "data-class": "nv-button danger emphasis-low" }, "Danger Emphasis Low"), h("a", { href: "#", "data-class": "nv-button danger emphasis-lower" }, "Danger Emphasis Lower")))),
+            template: (h("div", { "data-class": "flex flex-col gap-4" }, h("a", { href: "#", "data-class": "nv-button" }, "Default Link"), h("div", { "data-class": "flex flex-wrap gap-4 items-center" }, h("a", { href: "#", "data-class": "nv-button size-xs" }, "Link size-xs"), h("a", { href: "#", "data-class": "nv-button size-sm" }, "Link size-sm"), h("a", { href: "#", "data-class": "nv-button size-md" }, "Link size-md"), h("a", { href: "#", "data-class": "nv-button size-lg" }, "Link size-lg")), h("div", { "data-class": "flex flex-wrap gap-4" }, h("a", { href: "#", "data-class": "nv-button emphasis-high" }, "Emphasis High"), h("a", { href: "#", "data-class": "nv-button emphasis-medium" }, "Emphasis Medium"), h("a", { href: "#", "data-class": "nv-button emphasis-low" }, "Emphasis Low"), h("a", { href: "#", "data-class": "nv-button emphasis-lower" }, "Emphasis Lower")), h("div", { "data-class": "flex flex-wrap gap-4" }, h("a", { href: "#", "data-class": "nv-button active" }, "Default active"), h("a", { href: "#", "data-class": "nv-button active emphasis-high" }, "Active Emphasis High"), h("a", { href: "#", "data-class": "nv-button active emphasis-medium" }, "Active Emphasis Medium"), h("a", { href: "#", "data-class": "nv-button active emphasis-low" }, "Active Emphasis Low"), h("a", { href: "#", "data-class": "nv-button active emphasis-lower" }, "Active Emphasis Lower")), h("div", { "data-class": "flex flex-wrap gap-4" }, h("a", { href: "#", "data-class": "nv-button danger" }, "Default Danger"), h("a", { href: "#", "data-class": "nv-button danger emphasis-high" }, "Danger Emphasis High"), h("a", { href: "#", "data-class": "nv-button danger emphasis-medium" }, "Danger Emphasis Medium"), h("a", { href: "#", "data-class": "nv-button danger emphasis-low" }, "Danger Emphasis Low"), h("a", { href: "#", "data-class": "nv-button danger emphasis-lower" }, "Danger Emphasis Lower")))),
         },
         {
             name: 'DefaultSlot',

package/dist/collection/components/nv-button/nv-button.docs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-button.docs.js","sourceRoot":"","sources":["../../../src/components/nv-button/nv-button.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvButtonDocs: NovaDocs<Components.NvButton> = {\n  component: 'nv-button',\n  subcomponents: ['nv-icon'],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-button data-storybook-args>NV Button</nv-button>,\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.size),\n      template: (\n        <div data-class=\"flex gap-4 items-center\">\n          <nv-button data-storybook-args size=\"xs\">\n            size: xs\n          </nv-button>\n          <nv-button data-storybook-args size=\"sm\">\n            size: sm\n          </nv-button>\n          <nv-button data-storybook-args size=\"md\">\n            size: md\n          </nv-button>\n          <nv-button data-storybook-args size=\"lg\">\n            size: lg\n          </nv-button>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.emphasis),\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-button data-storybook-args emphasis=\"high\">\n            emphasis: high\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"medium\">\n            emphasis: medium\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"low\">\n            emphasis: low\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"lower\">\n            emphasis: lower\n          </nv-button>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.danger),\n      args: { size: 'md' },\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-button data-storybook-args emphasis=\"high\" danger>\n            high danger\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"medium\" danger>\n            medium danger\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"low\" danger>\n            low danger\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"lower\" danger>\n            lower danger\n          </nv-button>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.loading),\n      args: { loading: true },\n      template: <nv-button data-storybook-args>loading</nv-button>,\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.disabled),\n      args: { disabled: true },\n      template: <nv-button data-storybook-args>disabled</nv-button>,\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.fluid),\n      args: { fluid: true },\n      template: <nv-button data-storybook-args>fluid</nv-button>,\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.type),\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-button data-storybook-args type=\"submit\">\n            submit\n          </nv-button>\n          <nv-button data-storybook-args type=\"reset\">\n            reset\n          </nv-button>\n        </div>\n      ),\n    },\n    {\n      name: 'LinkAsButton',\n      description:\n        'You can use our button classes if you need to use link tags',\n      template: (\n        <div data-class=\"flex flex-col gap-4\">\n          <a href=\"#\" data-class=\"nv-button\">\n            Default Link\n          </a>\n\n          <div data-class=\"flex flex-wrap gap-4 items-center\">\n            <a href=\"#\" data-class=\"nv-button size-xs\">\n              Link size-xs\n            </a>\n            <a href=\"#\" data-class=\"nv-button size-sm\">\n              Link size-sm\n            </a>\n            <a href=\"#\" data-class=\"nv-button size-md\">\n              Link size-md\n            </a>\n            <a href=\"#\" data-class=\"nv-button size-lg\">\n              Link size-lg\n            </a>\n          </div>\n\n          <div data-class=\"flex flex-wrap gap-4\">\n            <a href=\"#\" data-class=\"nv-button emphasis-high\">\n              Emphasis High\n            </a>\n            <a href=\"#\" data-class=\"nv-button emphasis-medium\">\n              Emphasis Medium\n            </a>\n            <a href=\"#\" data-class=\"nv-button emphasis-low\">\n              Emphasis Low\n            </a>\n            <a href=\"#\" data-class=\"nv-button emphasis-lower\">\n              Emphasis Lower\n            </a>\n          </div>\n\n          <div data-class=\"flex flex-wrap gap-4\">\n            <a href=\"#\" data-class=\"nv-button danger\">\n              Default Danger\n            </a>\n\n            <a href=\"#\" data-class=\"nv-button danger emphasis-high\">\n              Danger Emphasis High\n            </a>\n            <a href=\"#\" data-class=\"nv-button danger emphasis-medium\">\n              Danger Emphasis Medium\n            </a>\n            <a href=\"#\" data-class=\"nv-button danger emphasis-low\">\n              Danger Emphasis Low\n            </a>\n            <a href=\"#\" data-class=\"nv-button danger emphasis-lower\">\n              Danger Emphasis Lower\n            </a>\n          </div>\n        </div>\n      ),\n    },\n    {\n      name: 'DefaultSlot',\n      description: 'Add content to the button via the default slot.',\n      template: (\n        <nv-button data-storybook-args>\n          <nv-icon name=\"user\"></nv-icon>\n          Default Slot\n        </nv-button>\n      ),\n    },\n    {\n      name: 'IconSlots',\n      description:\n        'Add icons to the button via the leading-icon or trailing-icon slots.',\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-button data-storybook-args>\n            Leading Icon\n            <nv-icon slot=\"leading-icon\" name=\"user\"></nv-icon>\n          </nv-button>\n          <nv-button data-storybook-args>\n            Trailing Icon\n            <nv-icon slot=\"trailing-icon\" name=\"user\"></nv-icon>\n          </nv-button>\n          <nv-button data-storybook-args>\n            Both Sides\n            <nv-icon slot=\"leading-icon\" name=\"user\"></nv-icon>\n            <nv-icon slot=\"leading-icon\" name=\"bell\"></nv-icon>\n            <nv-icon slot=\"trailing-icon\" name=\"filter\"></nv-icon>\n          </nv-button>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvButtonDocs;\n"]}
+{"version":3,"file":"nv-button.docs.js","sourceRoot":"","sources":["../../../src/components/nv-button/nv-button.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvButtonDocs: NovaDocs<Components.NvButton> = {\n  component: 'nv-button',\n  subcomponents: ['nv-icon'],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-button data-storybook-args>NV Button</nv-button>,\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.size),\n      template: (\n        <div data-class=\"flex gap-4 items-center\">\n          <nv-button data-storybook-args size=\"xs\">\n            size: xs\n          </nv-button>\n          <nv-button data-storybook-args size=\"sm\">\n            size: sm\n          </nv-button>\n          <nv-button data-storybook-args size=\"md\">\n            size: md\n          </nv-button>\n          <nv-button data-storybook-args size=\"lg\">\n            size: lg\n          </nv-button>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.emphasis),\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-button data-storybook-args emphasis=\"high\">\n            emphasis: high\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"medium\">\n            emphasis: medium\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"low\">\n            emphasis: low\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"lower\">\n            emphasis: lower\n          </nv-button>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.active),\n      args: { size: 'md' },\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-button data-storybook-args emphasis=\"high\" active>\n            high active\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"medium\" active>\n            medium active\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"low\" active>\n            low active\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"lower\" active>\n            lower active\n          </nv-button>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.danger),\n      args: { size: 'md' },\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-button data-storybook-args emphasis=\"high\" danger>\n            high danger\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"medium\" danger>\n            medium danger\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"low\" danger>\n            low danger\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"lower\" danger>\n            lower danger\n          </nv-button>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.loading),\n      args: { loading: true },\n      template: <nv-button data-storybook-args>loading</nv-button>,\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.disabled),\n      args: { disabled: true },\n      template: <nv-button data-storybook-args>disabled</nv-button>,\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.fluid),\n      args: { fluid: true },\n      template: <nv-button data-storybook-args>fluid</nv-button>,\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.type),\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-button data-storybook-args type=\"submit\">\n            submit\n          </nv-button>\n          <nv-button data-storybook-args type=\"reset\">\n            reset\n          </nv-button>\n        </div>\n      ),\n    },\n    {\n      name: 'LinkAsButton',\n      description:\n        'You can use our button classes if you need to use link tags',\n      template: (\n        <div data-class=\"flex flex-col gap-4\">\n          <a href=\"#\" data-class=\"nv-button\">\n            Default Link\n          </a>\n\n          <div data-class=\"flex flex-wrap gap-4 items-center\">\n            <a href=\"#\" data-class=\"nv-button size-xs\">\n              Link size-xs\n            </a>\n            <a href=\"#\" data-class=\"nv-button size-sm\">\n              Link size-sm\n            </a>\n            <a href=\"#\" data-class=\"nv-button size-md\">\n              Link size-md\n            </a>\n            <a href=\"#\" data-class=\"nv-button size-lg\">\n              Link size-lg\n            </a>\n          </div>\n\n          <div data-class=\"flex flex-wrap gap-4\">\n            <a href=\"#\" data-class=\"nv-button emphasis-high\">\n              Emphasis High\n            </a>\n            <a href=\"#\" data-class=\"nv-button emphasis-medium\">\n              Emphasis Medium\n            </a>\n            <a href=\"#\" data-class=\"nv-button emphasis-low\">\n              Emphasis Low\n            </a>\n            <a href=\"#\" data-class=\"nv-button emphasis-lower\">\n              Emphasis Lower\n            </a>\n          </div>\n\n          <div data-class=\"flex flex-wrap gap-4\">\n            <a href=\"#\" data-class=\"nv-button active\">\n              Default active\n            </a>\n\n            <a href=\"#\" data-class=\"nv-button active emphasis-high\">\n              Active Emphasis High\n            </a>\n            <a href=\"#\" data-class=\"nv-button active emphasis-medium\">\n              Active Emphasis Medium\n            </a>\n            <a href=\"#\" data-class=\"nv-button active emphasis-low\">\n              Active Emphasis Low\n            </a>\n            <a href=\"#\" data-class=\"nv-button active emphasis-lower\">\n              Active Emphasis Lower\n            </a>\n          </div>\n\n          <div data-class=\"flex flex-wrap gap-4\">\n            <a href=\"#\" data-class=\"nv-button danger\">\n              Default Danger\n            </a>\n\n            <a href=\"#\" data-class=\"nv-button danger emphasis-high\">\n              Danger Emphasis High\n            </a>\n            <a href=\"#\" data-class=\"nv-button danger emphasis-medium\">\n              Danger Emphasis Medium\n            </a>\n            <a href=\"#\" data-class=\"nv-button danger emphasis-low\">\n              Danger Emphasis Low\n            </a>\n            <a href=\"#\" data-class=\"nv-button danger emphasis-lower\">\n              Danger Emphasis Lower\n            </a>\n          </div>\n        </div>\n      ),\n    },\n    {\n      name: 'DefaultSlot',\n      description: 'Add content to the button via the default slot.',\n      template: (\n        <nv-button data-storybook-args>\n          <nv-icon name=\"user\"></nv-icon>\n          Default Slot\n        </nv-button>\n      ),\n    },\n    {\n      name: 'IconSlots',\n      description:\n        'Add icons to the button via the leading-icon or trailing-icon slots.',\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-button data-storybook-args>\n            Leading Icon\n            <nv-icon slot=\"leading-icon\" name=\"user\"></nv-icon>\n          </nv-button>\n          <nv-button data-storybook-args>\n            Trailing Icon\n            <nv-icon slot=\"trailing-icon\" name=\"user\"></nv-icon>\n          </nv-button>\n          <nv-button data-storybook-args>\n            Both Sides\n            <nv-icon slot=\"leading-icon\" name=\"user\"></nv-icon>\n            <nv-icon slot=\"leading-icon\" name=\"bell\"></nv-icon>\n            <nv-icon slot=\"trailing-icon\" name=\"filter\"></nv-icon>\n          </nv-button>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvButtonDocs;\n"]}

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

@@ -21,6 +21,11 @@ export class NvButton {
          * on less critical ones
          */
         this.emphasis = 'high';
+        /**
+         * Use this prop to highlight the button when it represents the current page
+         * or active selection. This helps users understand their navigation context.
+         */
+        this.active = false;
         /**
          * Applies styling that visually indicates the button represents a dangerous
          * action.
@@ -71,6 +76,21 @@ export class NvButton {
     }
     //#endregion METHODS
     /****************************************************************************/
+    //#region EVENTS
+    handleKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.el.click();
+        }
+    }
+    handleTouchStart(event) {
+        if (event.touches.length > 1)
+            return;
+        event.preventDefault();
+        this.el.click();
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
     //#region WATCHERS
     handleLoadingChange(loading) {
         this.loading = loading;
@@ -96,7 +116,7 @@ export class NvButton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '09d1a764e1dd0a8175e5b1ec0e5fececac19ad31', role: "button", tabindex: "0", onClick: this.handleClick }, this.loading && (h("nv-loader", { key: '796432d620655f263be114909f9777b2d408a75c', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), h("slot", { key: '4309b3ec76fd089bb57af356c08212498ada787b', name: "leading-icon" }), h("slot", { key: '2531e9e7c50cf549eea56595c16bbcf0431d346e' }), h("slot", { key: 'b1884a687df70ead0e5ff5ab905eb6a3265d7f59', name: "trailing-icon" })));
+        return (h(Host, { key: '76ec47961a6e4443b3d6027345f94ada45d6c13f', role: "button", tabindex: "0", onClick: this.handleClick }, this.loading && (h("nv-loader", { key: '4d9f1ff4ccaf3060e65b68101a2e5672c79ad2b5', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), h("slot", { key: '7a4e08881daf71fb3fb8aaa65625b767252ffb72', name: "leading-icon" }), h("slot", { key: 'a8d577da8439889ba517fc305ac75a50d3c121f0' }), h("slot", { key: '0278d86b2479950e480cc8bbd0f67438591d606f', name: "trailing-icon" })));
     }
     static get is() { return "nv-button"; }
     static get formAssociated() { return true; }
@@ -164,6 +184,26 @@ export class NvButton {
                 "reflect": true,
                 "defaultValue": "'high'"
             },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this prop to highlight the button when it represents the current page\nor active selection. This helps users understand their navigation context."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active",
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "danger": {
                 "type": "boolean",
                 "mutable": false,
@@ -282,6 +322,21 @@ export class NvButton {
                 "methodName": "handleDisabledChange"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "touchstart",
+                "method": "handleTouchStart",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
     static get attachInternalsMemberName() { return "internals"; }
 }
 //# sourceMappingURL=nv-button.js.map

package/dist/collection/components/nv-button/nv-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-button.js","sourceRoot":"","sources":["../../../src/components/nv-button/nv-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,eAAe,EACf,OAAO,EACP,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,UAAU,EAA8B,MAAM,uBAAuB,CAAC;AAE/E;;;;GAIG;AAOH,MAAM,OAAO,QAAQ;IANrB;QAUE,8EAA8E;QAC9E,oBAAoB;QAEpB;;;;WAIG;QAEM,SAAI,GAAoB,IAAI,CAAC;QAEtC;;;;WAIG;QAEM,aAAQ,GAAwB,MAAM,CAAC;QAEhD;;;WAGG;QAEM,WAAM,GAAY,KAAK,CAAC;QAEjC;;;;WAIG;QAEH,YAAO,GAAY,KAAK,CAAC;QAEzB;;WAEG;QAEH,aAAQ,GAAY,KAAK,CAAC;QAE1B;;WAEG;QAEM,UAAK,GAAY,KAAK,CAAC;QAEhC;;;;WAIG;QAEM,SAAI,GAAoB,QAAQ,CAAC;QAE1C,uBAAuB;QACvB,8EAA8E;QAC9E,iBAAiB;QAEjB;;;;;WAKG;QACK,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;;YACrC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;gBAC3B,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,aAAa,EAAE,CAAC;YACxC,CAAC;YACD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;gBAC1B,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,KAAK,EAAE,CAAC;YAChC,CAAC;QACH,CAAC,CAAC;KAoDH;IAlDC,oBAAoB;IACpB,8EAA8E;IAC9E,kBAAkB;IAGlB,mBAAmB,CAAC,OAAgB;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;IAC1B,CAAC;IAGD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;QAC/B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,qBAAqB;IACrB,8EAA8E;IAC9E,mBAAmB;IAEnB,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,sBAAsB;IACtB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW;YACvD,IAAI,CAAC,OAAO,IAAI,CACf,kEACE,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,GACvC,CACd;YAED,6DAAM,IAAI,EAAC,cAAc,GAAQ;YACjC,8DAAa;YACb,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC7B,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n} from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Content of the button.\n * @slot leading-icon - Icon before the label.\n * @slot trailing-icon - Icon after the label.\n */\n@Component({\n  tag: 'nv-button',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'styles/nv-button.scss',\n})\nexport class NvButton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvButtonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button's emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Applies styling that visually indicates the button represents a dangerous\n   * action.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ reflect: true, mutable: true })\n  disabled: boolean = false;\n\n  /**\n   * Allows the button to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn’t interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles form-related actions when the button is clicked.\n   * - Submits the form if the button type is 'submit'.\n   * - Resets the form if the button type is 'reset'.\n   * @param {Event} event - The click event.\n   */\n  private handleClick = (event: Event) => {\n    if (this.loading || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (this.type === 'submit') {\n      this.internals?.form?.requestSubmit();\n    }\n    if (this.type === 'reset') {\n      this.internals?.form?.reset();\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"button\" tabindex=\"0\" onClick={this.handleClick}>\n        {this.loading && (\n          <nv-loader\n            size={this.size === ButtonSize.Large ? 'sm' : 'xs'}\n          ></nv-loader>\n        )}\n\n        <slot name=\"leading-icon\"></slot>\n        <slot></slot>\n        <slot name=\"trailing-icon\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}
+{"version":3,"file":"nv-button.js","sourceRoot":"","sources":["../../../src/components/nv-button/nv-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Listen,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n} from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Content of the button.\n * @slot leading-icon - Icon before the label.\n * @slot trailing-icon - Icon after the label.\n */\n@Component({\n  tag: 'nv-button',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'styles/nv-button.scss',\n})\nexport class NvButton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvButtonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button's emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Use this prop to highlight the button when it represents the current page\n   * or active selection. This helps users understand their navigation context.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Applies styling that visually indicates the button represents a dangerous\n   * action.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ reflect: true, mutable: true })\n  disabled: boolean = false;\n\n  /**\n   * Allows the button to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn’t interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles form-related actions when the button is clicked.\n   * - Submits the form if the button type is 'submit'.\n   * - Resets the form if the button type is 'reset'.\n   * @param {Event} event - The click event.\n   */\n  private handleClick = (event: Event) => {\n    if (this.loading || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (this.type === 'submit') {\n      this.internals?.form?.requestSubmit();\n    }\n    if (this.type === 'reset') {\n      this.internals?.form?.reset();\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.el.click();\n    }\n  }\n\n  @Listen('touchstart', { passive: false })\n  handleTouchStart(event: TouchEvent) {\n    if (event.touches.length > 1) return;\n    event.preventDefault();\n    this.el.click();\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"button\" tabindex=\"0\" onClick={this.handleClick}>\n        {this.loading && (\n          <nv-loader\n            size={this.size === ButtonSize.Large ? 'sm' : 'xs'}\n          ></nv-loader>\n        )}\n\n        <slot name=\"leading-icon\"></slot>\n        <slot></slot>\n        <slot name=\"trailing-icon\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

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

@@ -70,11 +70,16 @@ nv-button[emphasis=high]:hover {
   border: 1px solid var(--components-button-high-border);
   color: var(--components-button-high-text-hover);
 }
+nv-button[emphasis=high]:active {
+  background: var(--components-button-high-background-active);
+  border: 1px solid var(--components-button-high-border-active);
+  color: var(--components-button-high-text-active);
+}
 nv-button[emphasis=high]:focus, nv-button[emphasis=high]:focus-within {
   outline: none;
 }
 nv-button[emphasis=high]:focus-visible, nv-button[emphasis=high]:has(:focus-visible) {
-  outline: var(--focus-outline-stroke) solid var(--color-focus-brand);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
   outline-offset: calc(var(--focus-outline-offset) * 1);
 }
 nv-button[emphasis=high]:disabled:not([disabled=false]) {
@@ -82,21 +87,26 @@ nv-button[emphasis=high]:disabled:not([disabled=false]) {
   cursor: not-allowed;
   box-shadow: none;
 }
+nv-button[emphasis=high][active]:not([active=false]) {
+  background: var(--components-button-high-background-active);
+  border: 1px solid var(--components-button-high-border-active);
+  color: var(--components-button-high-text-active);
+}
 nv-button[emphasis=high][danger]:not([danger=false]) {
   background: var(--components-button-destructive-high-background);
-  border: 1px solid unset;
+  border: 1px solid transparent;
   color: var(--components-button-destructive-high-text);
 }
 nv-button[emphasis=high][danger]:not([danger=false]):hover {
   background: var(--components-button-destructive-high-background-hover);
-  border: 1px solid unset;
+  border: 1px solid transparent;
   color: var(--components-button-destructive-high-text-hover);
 }
 nv-button[emphasis=high][danger]:not([danger=false]):focus, nv-button[emphasis=high][danger]:not([danger=false]):focus-within {
   outline: none;
 }
 nv-button[emphasis=high][danger]:not([danger=false]):focus-visible, nv-button[emphasis=high][danger]:not([danger=false]):has(:focus-visible) {
-  outline: var(--focus-outline-stroke) solid var(--color-focus-destructive);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);
   outline-offset: calc(var(--focus-outline-offset) * 1);
 }
 nv-button[emphasis=medium] {
@@ -109,11 +119,16 @@ nv-button[emphasis=medium]:hover {
   border: 1px solid var(--components-button-medium-border);
   color: var(--components-button-medium-text-hover);
 }
+nv-button[emphasis=medium]:active {
+  background: var(--components-button-medium-background-active);
+  border: 1px solid var(--components-button-medium-border-active);
+  color: var(--components-button-medium-text-active);
+}
 nv-button[emphasis=medium]:focus, nv-button[emphasis=medium]:focus-within {
   outline: none;
 }
 nv-button[emphasis=medium]:focus-visible, nv-button[emphasis=medium]:has(:focus-visible) {
-  outline: var(--focus-outline-stroke) solid var(--color-focus-brand);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
   outline-offset: calc(var(--focus-outline-offset) * 1);
 }
 nv-button[emphasis=medium]:disabled:not([disabled=false]) {
@@ -121,6 +136,11 @@ nv-button[emphasis=medium]:disabled:not([disabled=false]) {
   cursor: not-allowed;
   box-shadow: none;
 }
+nv-button[emphasis=medium][active]:not([active=false]) {
+  background: var(--components-button-medium-background-active);
+  border: 1px solid var(--components-button-medium-border-active);
+  color: var(--components-button-medium-text-active);
+}
 nv-button[emphasis=medium][danger]:not([danger=false]) {
   background: var(--components-button-destructive-medium-background);
   border: 1px solid var(--components-button-destructive-medium-border);
@@ -135,7 +155,7 @@ nv-button[emphasis=medium][danger]:not([danger=false]):focus, nv-button[emphasis
   outline: none;
 }
 nv-button[emphasis=medium][danger]:not([danger=false]):focus-visible, nv-button[emphasis=medium][danger]:not([danger=false]):has(:focus-visible) {
-  outline: var(--focus-outline-stroke) solid var(--color-focus-destructive);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);
   outline-offset: calc(var(--focus-outline-offset) * 1);
 }
 nv-button[emphasis=low] {
@@ -148,11 +168,16 @@ nv-button[emphasis=low]:hover {
   border: 1px solid var(--components-button-low-border);
   color: var(--components-button-low-text-hover);
 }
+nv-button[emphasis=low]:active {
+  background: var(--components-button-low-background-active);
+  border: 1px solid var(--components-button-low-border-active);
+  color: var(--components-button-low-text-active);
+}
 nv-button[emphasis=low]:focus, nv-button[emphasis=low]:focus-within {
   outline: none;
 }
 nv-button[emphasis=low]:focus-visible, nv-button[emphasis=low]:has(:focus-visible) {
-  outline: var(--focus-outline-stroke) solid var(--color-focus-brand);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
   outline-offset: calc(var(--focus-outline-offset) * 1);
 }
 nv-button[emphasis=low]:disabled:not([disabled=false]) {
@@ -160,6 +185,11 @@ nv-button[emphasis=low]:disabled:not([disabled=false]) {
   cursor: not-allowed;
   box-shadow: none;
 }
+nv-button[emphasis=low][active]:not([active=false]) {
+  background: var(--components-button-low-background-active);
+  border: 1px solid var(--components-button-low-border-active);
+  color: var(--components-button-low-text-active);
+}
 nv-button[emphasis=low][danger]:not([danger=false]) {
   background: var(--components-button-destructive-low-background);
   border: 1px solid var(--components-button-destructive-low-border);
@@ -174,7 +204,7 @@ nv-button[emphasis=low][danger]:not([danger=false]):focus, nv-button[emphasis=lo
   outline: none;
 }
 nv-button[emphasis=low][danger]:not([danger=false]):focus-visible, nv-button[emphasis=low][danger]:not([danger=false]):has(:focus-visible) {
-  outline: var(--focus-outline-stroke) solid var(--color-focus-destructive);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);
   outline-offset: calc(var(--focus-outline-offset) * 1);
 }
 nv-button[emphasis=lower] {
@@ -187,11 +217,16 @@ nv-button[emphasis=lower]:hover {
   border: 1px solid var(--components-button-lower-border);
   color: var(--components-button-lower-text-hover);
 }
+nv-button[emphasis=lower]:active {
+  background: var(--components-button-lower-background-active);
+  border: 1px solid var(--components-button-lower-border-active);
+  color: var(--components-button-lower-text-active);
+}
 nv-button[emphasis=lower]:focus, nv-button[emphasis=lower]:focus-within {
   outline: none;
 }
 nv-button[emphasis=lower]:focus-visible, nv-button[emphasis=lower]:has(:focus-visible) {
-  outline: var(--focus-outline-stroke) solid var(--color-focus-brand);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
   outline-offset: calc(var(--focus-outline-offset) * 1);
 }
 nv-button[emphasis=lower]:disabled:not([disabled=false]) {
@@ -199,6 +234,11 @@ nv-button[emphasis=lower]:disabled:not([disabled=false]) {
   cursor: not-allowed;
   box-shadow: none;
 }
+nv-button[emphasis=lower][active]:not([active=false]) {
+  background: var(--components-button-lower-background-active);
+  border: 1px solid var(--components-button-lower-border-active);
+  color: var(--components-button-lower-text-active);
+}
 nv-button[emphasis=lower][danger]:not([danger=false]) {
   background: var(--components-button-destructive-lower-background);
   border: 1px solid var(--components-button-destructive-lower-border);
@@ -213,7 +253,7 @@ nv-button[emphasis=lower][danger]:not([danger=false]):focus, nv-button[emphasis=
   outline: none;
 }
 nv-button[emphasis=lower][danger]:not([danger=false]):focus-visible, nv-button[emphasis=lower][danger]:not([danger=false]):has(:focus-visible) {
-  outline: var(--focus-outline-stroke) solid var(--color-focus-destructive);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);
   outline-offset: calc(var(--focus-outline-offset) * 1);
 }
 nv-button[fluid]:not([fluid=false]) {

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

@@ -22,7 +22,7 @@ export class NvCol {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'b3ef4b6e10022cdb97e2ea6238ba99b5a84c5c82', class: clsx(this.getColSize()) }, h("slot", { key: 'a77821b6384d2abc78233bfa966795b99db785ff' })));
+        return (h(Host, { key: '9a8a19ece2570e4a0c7f3b7ef1e3cb683f15f1a5', class: clsx(this.getColSize()) }, h("slot", { key: 'c6d5c9e86c51ce25d7a0a3801cf1a78126b0eb26' })));
     }
     static get is() { return "nv-col"; }
     static get originalStyleUrls() {

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 const NvDatagridDocs = {
     component: 'nv-datagrid',
+    badge: 'beta',
     subcomponents: [
         'nv-datagridhead',
         'nv-datagridbody',

package/dist/collection/components/nv-datagrid/nv-datagrid.docs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-datagrid.docs.js","sourceRoot":"","sources":["../../../src/components/nv-datagrid/nv-datagrid.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvDatagridDocs: NovaDocs<Components.NvDatagrid> = {\n  component: 'nv-datagrid',\n  subcomponents: [\n    'nv-datagridhead',\n    'nv-datagridbody',\n    'nv-datagridrow',\n    'nv-datagridcolumn',\n    'nv-datagriddatacell',\n    'nv-icon',\n    'nv-iconbutton',\n  ],\n  composedComponents: [\n    'nv-datagridhead',\n    'nv-datagridbody',\n    'nv-datagridrow',\n    'nv-datagridcolumn',\n    'nv-datagriddatacell',\n    'nv-icon',\n    'nv-iconbutton',\n  ],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'No Columns No Data Message',\n      args: {\n        noColumnsNoDataMessage: 'Nothing to display.',\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'No Data Message',\n      args: {\n        noDataMessage: 'No element available to display.',\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Columns Array And Empty Data',\n      args: {\n        columns: [\n          { header: 'Name', accessor: 'name' },\n          { header: 'Age', accessor: 'age' },\n          { header: 'Email', accessor: 'email' },\n        ],\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Columns JSON And Empty Data',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Data Array And Empty Columns',\n      args: {\n        columns: [\n          { header: 'Product', accessor: 'product' },\n          { header: 'Price', accessor: 'price' },\n          { header: 'Quantity', accessor: 'quantity' },\n        ],\n        data: [\n          { name: 'Alice', age: '25', email: 'alice@mail.com' },\n          { name: 'Bob', age: '30', email: 'bob@mail.com' },\n        ],\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Data JSON And Empty Columns',\n      args: {\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Columns Array And Data Array',\n      args: {\n        columns: [\n          { header: 'Name', accessor: 'name' },\n          { header: 'Age', accessor: 'age' },\n          { header: 'Email', accessor: 'email' },\n        ],\n        data: [\n          { name: 'Alice', age: '25', email: 'alice@mail.com' },\n          { name: 'Bob', age: '30', email: 'bob@mail.com' },\n        ],\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Columns JSON And Data JSON',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Columns Decomposed And Empty Data',\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridhead slot=\"head\">\n            <nv-datagridrow>\n              <nv-datagridcolumn\n                header=\"Name\"\n                accessor=\"name\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Age\"\n                accessor=\"age\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Email\"\n                accessor=\"email\"\n              ></nv-datagridcolumn>\n            </nv-datagridrow>\n          </nv-datagridhead>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Columns Decomposed And Data Array',\n      args: {\n        data: [\n          { name: 'Alice', age: '25', email: 'alice@mail.com' },\n          { name: 'Bob', age: '30', email: 'bob@mail.com' },\n        ],\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridhead slot=\"head\">\n            <nv-datagridrow>\n              <nv-datagridcolumn\n                header=\"Name\"\n                accessor=\"name\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Age\"\n                accessor=\"age\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Email\"\n                accessor=\"email\"\n              ></nv-datagridcolumn>\n            </nv-datagridrow>\n          </nv-datagridhead>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Columns Decomposed And Data JSON',\n      args: {\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridhead slot=\"head\">\n            <nv-datagridrow>\n              <nv-datagridcolumn\n                header=\"Name\"\n                accessor=\"name\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Age\"\n                accessor=\"age\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Email\"\n                accessor=\"email\"\n              ></nv-datagridcolumn>\n            </nv-datagridrow>\n          </nv-datagridhead>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Data Decomposed And Empty Columns',\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridbody slot=\"body\">\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Alice</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">25</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                alice@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Bob</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">30</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                bob@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n          </nv-datagridbody>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Data Decomposed And Columns Array',\n      args: {\n        columns: [\n          { header: 'Name', accessor: 'name' },\n          { header: 'Age', accessor: 'age' },\n          { header: 'Email', accessor: 'email' },\n        ],\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridbody slot=\"body\">\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Alice</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">25</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                alice@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Bob</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">30</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                bob@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n          </nv-datagridbody>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Data Decomposed And Columns JSON',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridbody slot=\"body\">\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Alice</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">25</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                alice@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Bob</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">30</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                bob@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n          </nv-datagridbody>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Columns Decomposed And Data Decomposed',\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridhead slot=\"head\">\n            <nv-datagridrow>\n              <nv-datagridcolumn\n                header=\"Name\"\n                accessor=\"name\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Age\"\n                accessor=\"age\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Email\"\n                accessor=\"email\"\n              ></nv-datagridcolumn>\n            </nv-datagridrow>\n          </nv-datagridhead>\n          <nv-datagridbody slot=\"body\">\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Alice</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">25</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                <nv-icon name=\"mail\"></nv-icon>\n                <a href=\"mailto:alice@mail.com\" class=\"text-amber-500\">\n                  alice@mail.com\n                </a>\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Bob</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">30</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                <nv-iconbutton name=\"mail\">bob@mail.com</nv-iconbutton>\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n          </nv-datagridbody>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Slot Before',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <div slot=\"before\">Before</div>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Slot After',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <div slot=\"after\">After</div>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Slot Before And After',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <div slot=\"before\">Before</div>\n          <div slot=\"after\">After</div>\n        </nv-datagrid>\n      ),\n    },\n  ],\n};\n\nexport default NvDatagridDocs;\n"]}
+{"version":3,"file":"nv-datagrid.docs.js","sourceRoot":"","sources":["../../../src/components/nv-datagrid/nv-datagrid.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvDatagridDocs: NovaDocs<Components.NvDatagrid> = {\n  component: 'nv-datagrid',\n  badge: 'beta',\n  subcomponents: [\n    'nv-datagridhead',\n    'nv-datagridbody',\n    'nv-datagridrow',\n    'nv-datagridcolumn',\n    'nv-datagriddatacell',\n    'nv-icon',\n    'nv-iconbutton',\n  ],\n  composedComponents: [\n    'nv-datagridhead',\n    'nv-datagridbody',\n    'nv-datagridrow',\n    'nv-datagridcolumn',\n    'nv-datagriddatacell',\n    'nv-icon',\n    'nv-iconbutton',\n  ],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'No Columns No Data Message',\n      args: {\n        noColumnsNoDataMessage: 'Nothing to display.',\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'No Data Message',\n      args: {\n        noDataMessage: 'No element available to display.',\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Columns Array And Empty Data',\n      args: {\n        columns: [\n          { header: 'Name', accessor: 'name' },\n          { header: 'Age', accessor: 'age' },\n          { header: 'Email', accessor: 'email' },\n        ],\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Columns JSON And Empty Data',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Data Array And Empty Columns',\n      args: {\n        columns: [\n          { header: 'Product', accessor: 'product' },\n          { header: 'Price', accessor: 'price' },\n          { header: 'Quantity', accessor: 'quantity' },\n        ],\n        data: [\n          { name: 'Alice', age: '25', email: 'alice@mail.com' },\n          { name: 'Bob', age: '30', email: 'bob@mail.com' },\n        ],\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Data JSON And Empty Columns',\n      args: {\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Columns Array And Data Array',\n      args: {\n        columns: [\n          { header: 'Name', accessor: 'name' },\n          { header: 'Age', accessor: 'age' },\n          { header: 'Email', accessor: 'email' },\n        ],\n        data: [\n          { name: 'Alice', age: '25', email: 'alice@mail.com' },\n          { name: 'Bob', age: '30', email: 'bob@mail.com' },\n        ],\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Columns JSON And Data JSON',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: <nv-datagrid data-storybook-args></nv-datagrid>,\n    },\n    {\n      name: 'Columns Decomposed And Empty Data',\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridhead slot=\"head\">\n            <nv-datagridrow>\n              <nv-datagridcolumn\n                header=\"Name\"\n                accessor=\"name\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Age\"\n                accessor=\"age\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Email\"\n                accessor=\"email\"\n              ></nv-datagridcolumn>\n            </nv-datagridrow>\n          </nv-datagridhead>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Columns Decomposed And Data Array',\n      args: {\n        data: [\n          { name: 'Alice', age: '25', email: 'alice@mail.com' },\n          { name: 'Bob', age: '30', email: 'bob@mail.com' },\n        ],\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridhead slot=\"head\">\n            <nv-datagridrow>\n              <nv-datagridcolumn\n                header=\"Name\"\n                accessor=\"name\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Age\"\n                accessor=\"age\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Email\"\n                accessor=\"email\"\n              ></nv-datagridcolumn>\n            </nv-datagridrow>\n          </nv-datagridhead>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Columns Decomposed And Data JSON',\n      args: {\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridhead slot=\"head\">\n            <nv-datagridrow>\n              <nv-datagridcolumn\n                header=\"Name\"\n                accessor=\"name\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Age\"\n                accessor=\"age\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Email\"\n                accessor=\"email\"\n              ></nv-datagridcolumn>\n            </nv-datagridrow>\n          </nv-datagridhead>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Data Decomposed And Empty Columns',\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridbody slot=\"body\">\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Alice</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">25</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                alice@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Bob</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">30</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                bob@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n          </nv-datagridbody>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Data Decomposed And Columns Array',\n      args: {\n        columns: [\n          { header: 'Name', accessor: 'name' },\n          { header: 'Age', accessor: 'age' },\n          { header: 'Email', accessor: 'email' },\n        ],\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridbody slot=\"body\">\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Alice</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">25</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                alice@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Bob</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">30</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                bob@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n          </nv-datagridbody>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Data Decomposed And Columns JSON',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridbody slot=\"body\">\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Alice</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">25</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                alice@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Bob</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">30</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                bob@mail.com\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n          </nv-datagridbody>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Columns Decomposed And Data Decomposed',\n      template: (\n        <nv-datagrid data-storybook-args>\n          <nv-datagridhead slot=\"head\">\n            <nv-datagridrow>\n              <nv-datagridcolumn\n                header=\"Name\"\n                accessor=\"name\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Age\"\n                accessor=\"age\"\n              ></nv-datagridcolumn>\n              <nv-datagridcolumn\n                header=\"Email\"\n                accessor=\"email\"\n              ></nv-datagridcolumn>\n            </nv-datagridrow>\n          </nv-datagridhead>\n          <nv-datagridbody slot=\"body\">\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Alice</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">25</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                <nv-icon name=\"mail\"></nv-icon>\n                <a href=\"mailto:alice@mail.com\" class=\"text-amber-500\">\n                  alice@mail.com\n                </a>\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n            <nv-datagridrow>\n              <nv-datagriddatacell accessor=\"name\">Bob</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"age\">30</nv-datagriddatacell>\n              <nv-datagriddatacell accessor=\"email\">\n                <nv-iconbutton name=\"mail\">bob@mail.com</nv-iconbutton>\n              </nv-datagriddatacell>\n            </nv-datagridrow>\n          </nv-datagridbody>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Slot Before',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <div slot=\"before\">Before</div>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Slot After',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <div slot=\"after\">After</div>\n        </nv-datagrid>\n      ),\n    },\n    {\n      name: 'Slot Before And After',\n      args: {\n        columnsJson: `[\n          {\"header\":\"Name\",\"accessor\":\"name\"},\n          {\"header\":\"Age\",\"accessor\":\"age\"},\n          {\"header\":\"Email\",\"accessor\":\"email\"}\n        ]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-datagrid data-storybook-args>\n          <div slot=\"before\">Before</div>\n          <div slot=\"after\">After</div>\n        </nv-datagrid>\n      ),\n    },\n  ],\n};\n\nexport default NvDatagridDocs;\n"]}