@nova-design-system/nova-webcomponents 3.23.0 → 3.24.0

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

@@ -1 +1 @@
-{"version":3,"file":"nv-avatar.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-avatar/nv-avatar.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,YAAY,GAAkC;IAClD,SAAS,EAAE,WAAW;IACtB,aAAa,EAAE,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,+CAA2C;SACtD;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAC9C,QAAQ,EAAE,CACR,yBAAgB,yBAAyB;gBACvC,8CAA+B,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,GAAa;gBACnE,8CAA+B,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,GAAa;gBACnE,8CAA+B,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,GAAa;gBACnE,8CAA+B,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,GAAa;gBACnE,8CAA+B,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,GAAa;gBACnE,8CAA+B,IAAI,EAAC,IAAI,GAAa;gBACrD,8CAA+B,IAAI,EAAC,IAAI,GAAa;gBACrD,8CAA+B,IAAI,EAAC,IAAI,GAAa;gBACrD,8CAA+B,IAAI,EAAC,IAAI,GAAa;gBACrD,8CAA+B,IAAI,EAAC,IAAI,GAAa,CACjD,CACP;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;YAC/C,QAAQ,EAAE,CACR,yBAAgB,YAAY;gBAC1B,8CAA+B,QAAQ,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,GAAa;gBAClE,8CAA+B,QAAQ,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,GAAa;gBAClE,8CAA+B,QAAQ,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,GAAa;gBAClE,8CAA+B,QAAQ,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,GAAa;gBAClE,8CAA+B,QAAQ,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,GAAa;gBAClE,8CAA+B,QAAQ,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,GAAa;gBAClE,8CAA+B,QAAQ,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,GAAa;gBAClE,8CAA+B,QAAQ,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,GAAa;gBAClE,8CAA+B,QAAQ,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,GAAa;gBAClE,8CAA+B,QAAQ,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,GAAa,CAChE,CACP;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;YAClD,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;YACxB,QAAQ,EAAE,+CAA2C;SACtD;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;YAC7C,IAAI,EAAE,EAAE,GAAG,EAAE,sBAAsB,EAAE,GAAG,EAAE,2BAA2B,EAAE;YACvE,QAAQ,EAAE,+CAA2C;SACtD;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;YAC7C,IAAI,EAAE,EAAE,GAAG,EAAE,2BAA2B,EAAE;YAC1C,QAAQ,EAAE,+CAA2C;SACtD;QACD;YACE,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,0CAA0C;YACvD,QAAQ,EAAE,CACR;gBACE,eAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,UAAU,GAAW,CACrC,CACb;SACF;KACF;CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvAvatarDocs: NovaDocs<Components.NvAvatar> = {\n  component: 'nv-avatar',\n  subcomponents: ['nv-icon'],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-avatar data-storybook-args></nv-avatar>,\n    },\n    {\n      name: nameof<Components.NvAvatar>(x => x.size),\n      template: (\n        <div data-class=\"flex gap-4 items-center\">\n          <nv-avatar data-storybook-args initials=\"xs\" size=\"xs\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"sm\" size=\"sm\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"md\" size=\"md\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"lg\" size=\"lg\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"xl\" size=\"xl\"></nv-avatar>\n          <nv-avatar data-storybook-args size=\"xs\"></nv-avatar>\n          <nv-avatar data-storybook-args size=\"sm\"></nv-avatar>\n          <nv-avatar data-storybook-args size=\"md\"></nv-avatar>\n          <nv-avatar data-storybook-args size=\"lg\"></nv-avatar>\n          <nv-avatar data-storybook-args size=\"xl\"></nv-avatar>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvAvatar>(x => x.color),\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-avatar data-storybook-args initials=\"1\" color=\"1\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"2\" color=\"2\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"3\" color=\"3\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"4\" color=\"4\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"5\" color=\"5\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"6\" color=\"6\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"7\" color=\"7\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"8\" color=\"8\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"9\" color=\"9\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"10\" color=\"10\"></nv-avatar>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvAvatar>(x => x.initials),\n      args: { initials: 'AB' },\n      template: <nv-avatar data-storybook-args></nv-avatar>,\n    },\n    {\n      name: nameof<Components.NvAvatar>(x => x.alt),\n      args: { alt: 'User profile picture', src: 'https://picsum.photos/200' },\n      template: <nv-avatar data-storybook-args></nv-avatar>,\n    },\n    {\n      name: nameof<Components.NvAvatar>(x => x.src),\n      args: { src: 'https://picsum.photos/200' },\n      template: <nv-avatar data-storybook-args></nv-avatar>,\n    },\n    {\n      name: 'SlotIcon',\n      description: 'Add an icon to the avatar using the slot',\n      template: (\n        <nv-avatar data-storybook-args>\n          <nv-icon slot=\"icon\" name=\"calendar\"></nv-icon>\n        </nv-avatar>\n      ),\n    },\n  ],\n};\n\nexport default NvAvatarDocs;\n"]}
+{"version":3,"file":"nv-avatar.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-avatar/nv-avatar.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 NvAvatarDocs: NovaDocs<Components.NvAvatar> = {\n  component: 'nv-avatar',\n  subcomponents: ['nv-icon'],\n  stories: [\n    // Default\n    {\n      name: 'Default',\n      template: <nv-avatar data-storybook-args></nv-avatar>,\n    },\n    // xsmall\n    {\n      name: nameof<Components.NvAvatar>(x => x.xsmall),\n      description: 'Deprecated: Use size=\"xs\" instead.',\n      args: { xsmall: true, initials: 'XS' },\n      template: <nv-avatar data-storybook-args></nv-avatar>,\n    },\n    // small\n    {\n      name: nameof<Components.NvAvatar>(x => x.small),\n      description: 'Deprecated: Use size=\"sm\" instead.',\n      args: { small: true, initials: 'SM' },\n      template: <nv-avatar data-storybook-args></nv-avatar>,\n    },\n    // medium\n    {\n      name: nameof<Components.NvAvatar>(x => x.medium),\n      description: 'Deprecated: Use size=\"md\" instead.',\n      args: { medium: true, initials: 'MD' },\n      template: <nv-avatar data-storybook-args></nv-avatar>,\n    },\n    // large\n    {\n      name: nameof<Components.NvAvatar>(x => x.large),\n      description: 'Deprecated: Use size=\"lg\" instead.',\n      args: { large: true, initials: 'LG' },\n      template: <nv-avatar data-storybook-args></nv-avatar>,\n    },\n    // xlarge\n    {\n      name: nameof<Components.NvAvatar>(x => x.xlarge),\n      description: 'Deprecated: Use size=\"xl\" instead.',\n      args: { xlarge: true, initials: 'XL' },\n      template: <nv-avatar data-storybook-args></nv-avatar>,\n    },\n    // text\n    {\n      name: nameof<Components.NvAvatar>(x => x.text),\n      description: 'Deprecated: Use initials instead.',\n      args: { text: 'AB' },\n      template: <nv-avatar data-storybook-args></nv-avatar>,\n    },\n    // url\n    {\n      name: nameof<Components.NvAvatar>(x => x.url),\n      description: 'Deprecated: Use src instead.',\n      args: { url: 'https://picsum.photos/200' },\n      template: <nv-avatar data-storybook-args></nv-avatar>,\n    },\n    // size\n    {\n      name: nameof<Components.NvAvatar>(x => x.size),\n      template: (\n        <div data-class=\"flex gap-4 items-center\">\n          <nv-avatar data-storybook-args initials=\"xs\" size=\"xs\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"sm\" size=\"sm\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"md\" size=\"md\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"lg\" size=\"lg\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"xl\" size=\"xl\"></nv-avatar>\n          <nv-avatar data-storybook-args size=\"xs\"></nv-avatar>\n          <nv-avatar data-storybook-args size=\"sm\"></nv-avatar>\n          <nv-avatar data-storybook-args size=\"md\"></nv-avatar>\n          <nv-avatar data-storybook-args size=\"lg\"></nv-avatar>\n          <nv-avatar data-storybook-args size=\"xl\"></nv-avatar>\n        </div>\n      ),\n    },\n    // color\n    {\n      name: nameof<Components.NvAvatar>(x => x.color),\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-avatar data-storybook-args initials=\"1\" color=\"1\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"2\" color=\"2\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"3\" color=\"3\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"4\" color=\"4\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"5\" color=\"5\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"6\" color=\"6\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"7\" color=\"7\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"8\" color=\"8\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"9\" color=\"9\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"10\" color=\"10\"></nv-avatar>\n        </div>\n      ),\n    },\n    // initials\n    {\n      name: nameof<Components.NvAvatar>(x => x.initials),\n      args: { initials: 'AB' },\n      template: <nv-avatar data-storybook-args></nv-avatar>,\n    },\n    // alt\n    {\n      name: nameof<Components.NvAvatar>(x => x.alt),\n      args: { alt: 'User profile picture', src: 'https://picsum.photos/200' },\n      template: <nv-avatar data-storybook-args></nv-avatar>,\n    },\n    // src\n    {\n      name: nameof<Components.NvAvatar>(x => x.src),\n      args: { src: 'https://picsum.photos/200' },\n      template: <nv-avatar data-storybook-args></nv-avatar>,\n    },\n    // SlotIcon\n    {\n      name: 'SlotIcon',\n      description: 'Add an icon to the avatar using the slot',\n      template: (\n        <nv-avatar data-storybook-args>\n          <nv-icon slot=\"icon\" name=\"calendar\"></nv-icon>\n        </nv-avatar>\n      ),\n    },\n  ],\n};\n\nexport default NvAvatarDocs;\n"]}

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

@@ -4,6 +4,7 @@ const NvBadgeDocs = {
     component: 'nv-badge',
     subcomponents: ['nv-icon'],
     stories: [
+        // Default
         {
             name: 'Default',
             args: {
@@ -11,6 +12,7 @@ const NvBadgeDocs = {
             },
             template: h("nv-badge", { "data-storybook-args": true }),
         },
+        // label
         {
             name: nameof(x => x.label),
             args: {
@@ -18,20 +20,43 @@ const NvBadgeDocs = {
             },
             template: h("nv-badge", { "data-storybook-args": true }),
         },
+        // color
         {
             name: nameof(x => x.color),
             template: (h("div", null, h("div", { "data-class": "text-warning mb-4" }, h("strong", null, "DEPRECATED:"), " Numeric colors (1-10) are deprecated. Use status colors or named colors instead."), h("div", { "data-class": "flex gap-4" }, h("nv-badge", { "data-storybook-args": true, color: "1", label: "Badge color 1" }), h("nv-badge", { "data-storybook-args": true, color: "2", label: "Badge color 2" }), h("nv-badge", { "data-storybook-args": true, color: "3", label: "Badge color 3" }), h("nv-badge", { "data-storybook-args": true, color: "4", label: "Badge color 4" }), h("nv-badge", { "data-storybook-args": true, color: "5", label: "Badge color 5" }), h("nv-badge", { "data-storybook-args": true, color: "6", label: "Badge color 6" }), h("nv-badge", { "data-storybook-args": true, color: "7", label: "Badge color 7" }), h("nv-badge", { "data-storybook-args": true, color: "8", label: "Badge color 8" }), h("nv-badge", { "data-storybook-args": true, color: "9", label: "Badge color 9" }), h("nv-badge", { "data-storybook-args": true, color: "10", label: "Badge color 10" })))),
         },
+        // dismissal (deprecated)
         {
-            name: 'Status Colors',
-            description: 'Badge with status-based colors',
-            template: (h("div", { "data-class": "flex gap-4" }, h("nv-badge", { "data-storybook-args": true, color: "error", label: "Error" }), h("nv-badge", { "data-storybook-args": true, color: "information", label: "Information" }), h("nv-badge", { "data-storybook-args": true, color: "neutral", label: "Neutral" }), h("nv-badge", { "data-storybook-args": true, color: "success", label: "Success" }), h("nv-badge", { "data-storybook-args": true, color: "warning", label: "Warning" }))),
+            name: nameof(x => x.dismissal),
+            description: 'Deprecated: Use dismissible instead.',
+            args: {
+                dismissal: true,
+                label: 'Dismissible Badge',
+            },
+            template: h("nv-badge", { "data-storybook-args": true }),
         },
+        // icon (deprecated)
         {
-            name: 'Named Colors',
-            description: 'Badge with named colors',
-            template: (h("div", { "data-class": "flex gap-4" }, h("nv-badge", { "data-storybook-args": true, color: "amber", label: "Amber" }), h("nv-badge", { "data-storybook-args": true, color: "orange", label: "Orange" }), h("nv-badge", { "data-storybook-args": true, color: "turquoise", label: "Turquoise" }), h("nv-badge", { "data-storybook-args": true, color: "crimson", label: "Crimson" }), h("nv-badge", { "data-storybook-args": true, color: "lime", label: "Lime" }), h("nv-badge", { "data-storybook-args": true, color: "petrol", label: "Petrol" }))),
+            name: nameof(x => x.icon),
+            description: 'Deprecated: Use leadIcon or slot="leading-icon" instead.',
+            args: {
+                icon: 'user',
+                label: 'Badge with Icon',
+            },
+            template: h("nv-badge", { "data-storybook-args": true }),
+        },
+        // iconLocation (deprecated)
+        {
+            name: nameof(x => x.iconLocation),
+            description: 'Deprecated: Only leading icon is supported now.',
+            args: {
+                iconLocation: 'left',
+                icon: 'user',
+                label: 'Badge with Icon Location',
+            },
+            template: h("nv-badge", { "data-storybook-args": true }),
         },
+        // leadIcon
         {
             name: nameof(x => x.leadIcon),
             args: {
@@ -40,14 +65,18 @@ const NvBadgeDocs = {
             },
             template: h("nv-badge", { "data-storybook-args": true }),
         },
+        // isIconOnly
         {
-            name: 'LeadingIconSlot',
-            description: 'Badge with an icon.',
+            name: nameof(x => x.isIconOnly),
+            description: 'Badge displaying only an icon without visible label text.',
             args: {
-                label: 'Badge with Icon',
+                isIconOnly: true,
+                leadIcon: 'user',
+                label: 'Icon Only Badge',
             },
-            template: (h("nv-badge", { "data-storybook-args": true }, h("nv-icon", { slot: "leading-icon", name: "user" }))),
+            template: (h("div", { "data-class": "flex gap-4" }, h("nv-badge", { "data-storybook-args": true, color: "amber" }), h("nv-badge", { "data-storybook-args": true, color: "orange" }), h("nv-badge", { "data-storybook-args": true, color: "turquoise" }), h("nv-badge", { "data-storybook-args": true, color: "crimson" }), h("nv-badge", { "data-storybook-args": true, color: "lime" }), h("nv-badge", { "data-storybook-args": true, color: "petrol" }))),
         },
+        // dismissible
         {
             name: nameof(x => x.dismissible),
             description: 'Badge with a dismiss button.',
@@ -57,6 +86,7 @@ const NvBadgeDocs = {
             },
             template: h("nv-badge", { "data-storybook-args": true }),
         },
+        // hidden
         {
             name: nameof(x => x.hidden),
             description: 'Badge with hidden state.',
@@ -66,6 +96,7 @@ const NvBadgeDocs = {
             },
             template: h("nv-badge", { "data-storybook-args": true }),
         },
+        // preventAutoClose
         {
             name: nameof(x => x.preventAutoClose),
             description: 'Badge with prevent auto close.',
@@ -76,14 +107,32 @@ const NvBadgeDocs = {
             },
             template: h("nv-badge", { "data-storybook-args": true }),
         },
+        // StatusColors
+        {
+            name: 'StatusColors',
+            description: 'Badge with status-based colors',
+            template: (h("div", { "data-class": "flex gap-4" }, h("nv-badge", { "data-storybook-args": true, color: "error", label: "Error" }), h("nv-badge", { "data-storybook-args": true, color: "information", label: "Information" }), h("nv-badge", { "data-storybook-args": true, color: "neutral", label: "Neutral" }), h("nv-badge", { "data-storybook-args": true, color: "success", label: "Success" }), h("nv-badge", { "data-storybook-args": true, color: "warning", label: "Warning" }))),
+        },
+        // NamedColors
         {
-            name: 'Icon Only',
-            description: 'Badge with Icon Only',
+            name: 'NamedColors',
+            description: 'Badge with named colors',
+            template: (h("div", { "data-class": "flex gap-4" }, h("nv-badge", { "data-storybook-args": true, color: "amber", label: "Amber" }), h("nv-badge", { "data-storybook-args": true, color: "orange", label: "Orange" }), h("nv-badge", { "data-storybook-args": true, color: "turquoise", label: "Turquoise" }), h("nv-badge", { "data-storybook-args": true, color: "crimson", label: "Crimson" }), h("nv-badge", { "data-storybook-args": true, color: "lime", label: "Lime" }), h("nv-badge", { "data-storybook-args": true, color: "petrol", label: "Petrol" }))),
+        },
+        // SlotDefault
+        {
+            name: 'SlotDefault',
+            description: 'Badge with custom content using the default slot.',
+            template: (h("nv-badge", { "data-storybook-args": true }, "Custom content in default slot")),
+        },
+        // SlotLeadingIcon
+        {
+            name: 'SlotLeadingIcon',
+            description: 'Badge with an icon.',
             args: {
-                isIconOnly: true,
-                leadIcon: 'user',
+                label: 'Badge with Icon',
             },
-            template: (h("div", { "data-class": "flex gap-4" }, h("nv-badge", { "data-storybook-args": true, color: "amber" }), h("nv-badge", { "data-storybook-args": true, color: "orange" }), h("nv-badge", { "data-storybook-args": true, color: "turquoise" }), h("nv-badge", { "data-storybook-args": true, color: "crimson" }), h("nv-badge", { "data-storybook-args": true, color: "lime" }), h("nv-badge", { "data-storybook-args": true, color: "petrol" }))),
+            template: (h("nv-badge", { "data-storybook-args": true }, h("nv-icon", { slot: "leading-icon", name: "user" }))),
         },
     ],
 };

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

@@ -1 +1 @@
-{"version":3,"file":"nv-badge.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-badge/nv-badge.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 NvBadgeDocs: NovaDocs<Components.NvBadge> = {\n  component: 'nv-badge',\n  subcomponents: ['nv-icon'],\n  stories: [\n    {\n      name: 'Default',\n      args: {\n        label: 'Label',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.label),\n      args: {\n        label: 'Badge Label',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.color),\n      template: (\n        <div>\n          <div data-class=\"text-warning mb-4\">\n            <strong>DEPRECATED:</strong> Numeric colors (1-10) are deprecated.\n            Use status colors or named colors instead.\n          </div>\n          <div data-class=\"flex gap-4\">\n            <nv-badge\n              data-storybook-args\n              color=\"1\"\n              label=\"Badge color 1\"\n            ></nv-badge>\n            <nv-badge\n              data-storybook-args\n              color=\"2\"\n              label=\"Badge color 2\"\n            ></nv-badge>\n            <nv-badge\n              data-storybook-args\n              color=\"3\"\n              label=\"Badge color 3\"\n            ></nv-badge>\n            <nv-badge\n              data-storybook-args\n              color=\"4\"\n              label=\"Badge color 4\"\n            ></nv-badge>\n            <nv-badge\n              data-storybook-args\n              color=\"5\"\n              label=\"Badge color 5\"\n            ></nv-badge>\n            <nv-badge\n              data-storybook-args\n              color=\"6\"\n              label=\"Badge color 6\"\n            ></nv-badge>\n            <nv-badge\n              data-storybook-args\n              color=\"7\"\n              label=\"Badge color 7\"\n            ></nv-badge>\n            <nv-badge\n              data-storybook-args\n              color=\"8\"\n              label=\"Badge color 8\"\n            ></nv-badge>\n            <nv-badge\n              data-storybook-args\n              color=\"9\"\n              label=\"Badge color 9\"\n            ></nv-badge>\n            <nv-badge\n              data-storybook-args\n              color=\"10\"\n              label=\"Badge color 10\"\n            ></nv-badge>\n          </div>\n        </div>\n      ),\n    },\n    {\n      name: 'Status Colors',\n      description: 'Badge with status-based colors',\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-badge data-storybook-args color=\"error\" label=\"Error\"></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"information\"\n            label=\"Information\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"neutral\"\n            label=\"Neutral\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"success\"\n            label=\"Success\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"warning\"\n            label=\"Warning\"\n          ></nv-badge>\n        </div>\n      ),\n    },\n    {\n      name: 'Named Colors',\n      description: 'Badge with named colors',\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-badge data-storybook-args color=\"amber\" label=\"Amber\"></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"orange\"\n            label=\"Orange\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"turquoise\"\n            label=\"Turquoise\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"crimson\"\n            label=\"Crimson\"\n          ></nv-badge>\n          <nv-badge data-storybook-args color=\"lime\" label=\"Lime\"></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"petrol\"\n            label=\"Petrol\"\n          ></nv-badge>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.leadIcon),\n      args: {\n        leadIcon: 'user',\n        label: 'Badge with Icon',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: 'LeadingIconSlot',\n      description: 'Badge with an icon.',\n      args: {\n        label: 'Badge with Icon',\n      },\n      template: (\n        <nv-badge data-storybook-args>\n          <nv-icon slot=\"leading-icon\" name=\"user\"></nv-icon>\n        </nv-badge>\n      ),\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.dismissible),\n      description: 'Badge with a dismiss button.',\n      args: {\n        dismissible: true,\n        label: 'Dismissible Badge',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.hidden),\n      description: 'Badge with hidden state.',\n      args: {\n        hidden: true,\n        label: 'Hidden Badge',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.preventAutoClose),\n      description: 'Badge with prevent auto close.',\n      args: {\n        preventAutoClose: true,\n        dismissible: true,\n        label: 'Prevent Auto Close Badge',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: 'Icon Only',\n      description: 'Badge with Icon Only',\n      args: {\n        isIconOnly: true,\n        leadIcon: 'user',\n      },\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-badge data-storybook-args color=\"amber\"></nv-badge>\n          <nv-badge data-storybook-args color=\"orange\"></nv-badge>\n          <nv-badge data-storybook-args color=\"turquoise\"></nv-badge>\n          <nv-badge data-storybook-args color=\"crimson\"></nv-badge>\n          <nv-badge data-storybook-args color=\"lime\"></nv-badge>\n          <nv-badge data-storybook-args color=\"petrol\"></nv-badge>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvBadgeDocs;\n"]}
+{"version":3,"file":"nv-badge.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-badge/nv-badge.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 NvBadgeDocs: NovaDocs<Components.NvBadge> = {\n  component: 'nv-badge',\n  subcomponents: ['nv-icon'],\n  stories: [\n    // Default\n    {\n      name: 'Default',\n      args: {\n        label: 'Label',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    // label\n    {\n      name: nameof<Components.NvBadge>(x => x.label),\n      args: {\n        label: 'Badge Label',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    // color\n    {\n      name: nameof<Components.NvBadge>(x => x.color),\n      template: (\n        <div>\n          <div data-class=\"text-warning mb-4\">\n            <strong>DEPRECATED:</strong> Numeric colors (1-10) are deprecated.\n            Use status colors or named colors instead.\n          </div>\n          <div data-class=\"flex gap-4\">\n            <nv-badge\n              data-storybook-args\n              color=\"1\"\n              label=\"Badge color 1\"\n            ></nv-badge>\n            <nv-badge\n              data-storybook-args\n              color=\"2\"\n              label=\"Badge color 2\"\n            ></nv-badge>\n            <nv-badge\n              data-storybook-args\n              color=\"3\"\n              label=\"Badge color 3\"\n            ></nv-badge>\n            <nv-badge\n              data-storybook-args\n              color=\"4\"\n              label=\"Badge color 4\"\n            ></nv-badge>\n            <nv-badge\n              data-storybook-args\n              color=\"5\"\n              label=\"Badge color 5\"\n            ></nv-badge>\n            <nv-badge\n              data-storybook-args\n              color=\"6\"\n              label=\"Badge color 6\"\n            ></nv-badge>\n            <nv-badge\n              data-storybook-args\n              color=\"7\"\n              label=\"Badge color 7\"\n            ></nv-badge>\n            <nv-badge\n              data-storybook-args\n              color=\"8\"\n              label=\"Badge color 8\"\n            ></nv-badge>\n            <nv-badge\n              data-storybook-args\n              color=\"9\"\n              label=\"Badge color 9\"\n            ></nv-badge>\n            <nv-badge\n              data-storybook-args\n              color=\"10\"\n              label=\"Badge color 10\"\n            ></nv-badge>\n          </div>\n        </div>\n      ),\n    },\n    // dismissal (deprecated)\n    {\n      name: nameof<Components.NvBadge>(x => x.dismissal),\n      description: 'Deprecated: Use dismissible instead.',\n      args: {\n        dismissal: true,\n        label: 'Dismissible Badge',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    // icon (deprecated)\n    {\n      name: nameof<Components.NvBadge>(x => x.icon),\n      description: 'Deprecated: Use leadIcon or slot=\"leading-icon\" instead.',\n      args: {\n        icon: 'user',\n        label: 'Badge with Icon',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    // iconLocation (deprecated)\n    {\n      name: nameof<Components.NvBadge>(x => x.iconLocation),\n      description: 'Deprecated: Only leading icon is supported now.',\n      args: {\n        iconLocation: 'left',\n        icon: 'user',\n        label: 'Badge with Icon Location',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    // leadIcon\n    {\n      name: nameof<Components.NvBadge>(x => x.leadIcon),\n      args: {\n        leadIcon: 'user',\n        label: 'Badge with Icon',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    // isIconOnly\n    {\n      name: nameof<Components.NvBadge>(x => x.isIconOnly),\n      description: 'Badge displaying only an icon without visible label text.',\n      args: {\n        isIconOnly: true,\n        leadIcon: 'user',\n        label: 'Icon Only Badge',\n      },\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-badge data-storybook-args color=\"amber\"></nv-badge>\n          <nv-badge data-storybook-args color=\"orange\"></nv-badge>\n          <nv-badge data-storybook-args color=\"turquoise\"></nv-badge>\n          <nv-badge data-storybook-args color=\"crimson\"></nv-badge>\n          <nv-badge data-storybook-args color=\"lime\"></nv-badge>\n          <nv-badge data-storybook-args color=\"petrol\"></nv-badge>\n        </div>\n      ),\n    },\n    // dismissible\n    {\n      name: nameof<Components.NvBadge>(x => x.dismissible),\n      description: 'Badge with a dismiss button.',\n      args: {\n        dismissible: true,\n        label: 'Dismissible Badge',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    // hidden\n    {\n      name: nameof<Components.NvBadge>(x => x.hidden),\n      description: 'Badge with hidden state.',\n      args: {\n        hidden: true,\n        label: 'Hidden Badge',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    // preventAutoClose\n    {\n      name: nameof<Components.NvBadge>(x => x.preventAutoClose),\n      description: 'Badge with prevent auto close.',\n      args: {\n        preventAutoClose: true,\n        dismissible: true,\n        label: 'Prevent Auto Close Badge',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    // StatusColors\n    {\n      name: 'StatusColors',\n      description: 'Badge with status-based colors',\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-badge data-storybook-args color=\"error\" label=\"Error\"></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"information\"\n            label=\"Information\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"neutral\"\n            label=\"Neutral\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"success\"\n            label=\"Success\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"warning\"\n            label=\"Warning\"\n          ></nv-badge>\n        </div>\n      ),\n    },\n    // NamedColors\n    {\n      name: 'NamedColors',\n      description: 'Badge with named colors',\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-badge data-storybook-args color=\"amber\" label=\"Amber\"></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"orange\"\n            label=\"Orange\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"turquoise\"\n            label=\"Turquoise\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"crimson\"\n            label=\"Crimson\"\n          ></nv-badge>\n          <nv-badge data-storybook-args color=\"lime\" label=\"Lime\"></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"petrol\"\n            label=\"Petrol\"\n          ></nv-badge>\n        </div>\n      ),\n    },\n    // SlotDefault\n    {\n      name: 'SlotDefault',\n      description: 'Badge with custom content using the default slot.',\n      template: (\n        <nv-badge data-storybook-args>Custom content in default slot</nv-badge>\n      ),\n    },\n    // SlotLeadingIcon\n    {\n      name: 'SlotLeadingIcon',\n      description: 'Badge with an icon.',\n      args: {\n        label: 'Badge with Icon',\n      },\n      template: (\n        <nv-badge data-storybook-args>\n          <nv-icon slot=\"leading-icon\" name=\"user\"></nv-icon>\n        </nv-badge>\n      ),\n    },\n  ],\n};\n\nexport default NvBadgeDocs;\n"]}

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

@@ -4,20 +4,29 @@ const NvBreadcrumbsDocs = {
     subcomponents: ['nv-breadcrumb', 'nv-icon'],
     composedComponents: ['nv-breadcrumb'],
     stories: [
+        // Default
         {
             name: 'Default',
             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")))),
         },
+        // Collapsed
         {
             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: "#" }, "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")))),
         },
+        // CurrentPage
         {
-            name: 'Current page',
+            name: 'CurrentPage',
             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"))),
         },
+        // SlotDefault
+        {
+            name: 'SlotDefault',
+            description: 'Child content of the component.',
+            template: (h("nv-breadcrumbs", { "data-storybook-args": true }, h("nv-breadcrumb", null, h("a", { href: "#" }, "Home")), h("nv-breadcrumb", null, h("a", { href: "#" }, "Category")), h("nv-breadcrumb", { current: true }, h("a", { href: "#" }, "Current Page")))),
+        },
     ],
 };
 export default NvBreadcrumbsDocs;

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,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"]}
+{"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,UAAU;QACV;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,YAAY;QACZ;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,cAAc;QACd;YACE,IAAI,EAAE,aAAa;YACnB,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;QACD,cAAc;QACd;YACE,IAAI,EAAE,aAAa;YACnB,WAAW,EAAE,iCAAiC;YAC9C,QAAQ,EAAE,CACR;gBACE;oBACE,SAAG,IAAI,EAAC,GAAG,WAAS,CACN;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,eAAa,CACV;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    // Default\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    // Collapsed\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    // CurrentPage\n    {\n      name: 'CurrentPage',\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    // SlotDefault\n    {\n      name: 'SlotDefault',\n      description: 'Child content of the component.',\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=\"#\">Category</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"]}

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

@@ -4,66 +4,100 @@ const NvButtonDocs = {
     component: 'nv-button',
     subcomponents: ['nv-icon'],
     stories: [
+        // Default
         {
             name: 'Default',
             template: h("nv-button", { "data-storybook-args": true }, "NV Button"),
         },
+        // size
         {
             name: nameof(x => x.size),
             template: (h("div", { "data-class": "flex gap-4 items-center" }, h("nv-button", { "data-storybook-args": true, size: "xs" }, "size: xs"), h("nv-button", { "data-storybook-args": true, size: "sm" }, "size: sm"), h("nv-button", { "data-storybook-args": true, size: "md" }, "size: md"), h("nv-button", { "data-storybook-args": true, size: "lg" }, "size: lg"))),
         },
+        // emphasis
         {
             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"))),
         },
+        // active
         {
             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"))),
         },
+        // danger
         {
             name: nameof(x => x.danger),
             args: { size: 'md' },
             template: (h("div", { "data-class": "flex gap-4" }, h("nv-button", { "data-storybook-args": true, emphasis: "high", danger: true }, "high danger"), h("nv-button", { "data-storybook-args": true, emphasis: "medium", danger: true }, "medium danger"), h("nv-button", { "data-storybook-args": true, emphasis: "low", danger: true }, "low danger"), h("nv-button", { "data-storybook-args": true, emphasis: "lower", danger: true }, "lower danger"))),
         },
+        // loading
         {
             name: nameof(x => x.loading),
             args: { loading: true },
             template: h("nv-button", { "data-storybook-args": true }, "loading"),
         },
+        // disabled
         {
             name: nameof(x => x.disabled),
             args: { disabled: true },
             template: h("nv-button", { "data-storybook-args": true }, "disabled"),
         },
+        // fluid
         {
             name: nameof(x => x.fluid),
             args: { fluid: true },
             template: h("nv-button", { "data-storybook-args": true }, "fluid"),
         },
+        // type
         {
             name: nameof(x => x.type),
             template: (h("div", { "data-class": "flex gap-4" }, h("nv-button", { "data-storybook-args": true, type: "submit" }, "submit"), h("nv-button", { "data-storybook-args": true, type: "reset" }, "reset"))),
         },
+        // form
         {
             name: nameof(x => x.form),
             template: (h("nv-button", { "data-storybook-args": true, form: "test-form", type: "submit" }, "Submit test-form")),
         },
+        // disableTabindex
+        {
+            name: nameof(x => x.disableTabindex),
+            description: "Use this to make the button skip-able when users navigate with the keyboard. The button remains clickable but won't be reached via the Tab key.",
+            args: {
+                disableTabindex: true,
+            },
+            template: h("nv-button", { "data-storybook-args": true }, "disableTabindex"),
+        },
+        // LinkAsButton
         {
             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 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")))),
         },
+        // SlotLeadingIcon
         {
-            name: 'DefaultSlot',
-            description: 'Add content to the button via the default slot.',
-            template: (h("nv-button", { "data-storybook-args": true }, h("nv-icon", { name: "user" }), "Default Slot")),
+            name: 'SlotLeadingIcon',
+            description: 'Icon before the label.',
+            template: (h("nv-button", { "data-storybook-args": true }, "Leading Icon", h("nv-icon", { slot: "leading-icon", name: "user" }))),
+        },
+        // SlotTrailingIcon
+        {
+            name: 'SlotTrailingIcon',
+            description: 'Icon after the label.',
+            template: (h("nv-button", { "data-storybook-args": true }, "Trailing Icon", h("nv-icon", { slot: "trailing-icon", name: "user" }))),
         },
+        // SlotIcons
         {
-            name: 'IconSlots',
+            name: 'SlotIcons',
             description: 'Add icons to the button via the leading-icon or trailing-icon slots.',
             template: (h("div", { "data-class": "flex gap-4" }, h("nv-button", { "data-storybook-args": true }, "Leading Icon", h("nv-icon", { slot: "leading-icon", name: "user" })), h("nv-button", { "data-storybook-args": true }, "Trailing Icon", h("nv-icon", { slot: "trailing-icon", name: "user" })), h("nv-button", { "data-storybook-args": true }, "Both Sides", h("nv-icon", { slot: "leading-icon", name: "user" }), h("nv-icon", { slot: "leading-icon", name: "bell" }), h("nv-icon", { slot: "trailing-icon", name: "filter" })))),
         },
+        // SlotDefault
+        {
+            name: 'SlotDefault',
+            description: 'Add content to the button via the default slot.',
+            template: (h("nv-button", { "data-storybook-args": true }, h("nv-icon", { name: "user" }), "Default Slot")),
+        },
     ],
 };
 export default NvButtonDocs;

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.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: nameof<Components.NvButton>(x => x.form),\n      template: (\n        <nv-button data-storybook-args form=\"test-form\" type=\"submit\">\n          Submit test-form\n        </nv-button>\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"]}
+{"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    // Default\n    {\n      name: 'Default',\n      template: <nv-button data-storybook-args>NV Button</nv-button>,\n    },\n    // size\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    // emphasis\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    // active\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    // danger\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    // loading\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    // disabled\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    // fluid\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    // type\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    // form\n    {\n      name: nameof<Components.NvButton>(x => x.form),\n      template: (\n        <nv-button data-storybook-args form=\"test-form\" type=\"submit\">\n          Submit test-form\n        </nv-button>\n      ),\n    },\n    // disableTabindex\n    {\n      name: nameof<Components.NvButton>(x => x.disableTabindex),\n      description:\n        \"Use this to make the button skip-able when users navigate with the keyboard. The button remains clickable but won't be reached via the Tab key.\",\n      args: {\n        disableTabindex: true,\n      },\n      template: <nv-button data-storybook-args>disableTabindex</nv-button>,\n    },\n    // LinkAsButton\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    // SlotLeadingIcon\n    {\n      name: 'SlotLeadingIcon',\n      description: 'Icon before the label.',\n      template: (\n        <nv-button data-storybook-args>\n          Leading Icon\n          <nv-icon slot=\"leading-icon\" name=\"user\"></nv-icon>\n        </nv-button>\n      ),\n    },\n    // SlotTrailingIcon\n    {\n      name: 'SlotTrailingIcon',\n      description: 'Icon after the label.',\n      template: (\n        <nv-button data-storybook-args>\n          Trailing Icon\n          <nv-icon slot=\"trailing-icon\" name=\"user\"></nv-icon>\n        </nv-button>\n      ),\n    },\n    // SlotIcons\n    {\n      name: 'SlotIcons',\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    // SlotDefault\n    {\n      name: 'SlotDefault',\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};\n\nexport default NvButtonDocs;\n"]}

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

@@ -66,13 +66,12 @@ export class NvButton {
          * @param {Event} event - The click event.
          */
         this.handleButtonClick = (event) => {
-            var _a;
             if (this.loading || this.disabled) {
                 event.preventDefault();
                 return;
             }
             if (this.type !== ButtonType.Button &&
-                (this.form || ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.form))) {
+                (this.form || this.internals?.form)) {
                 this.processFormAction();
             }
             else if (this.form && this.type === ButtonType.Button) {
@@ -85,12 +84,11 @@ export class NvButton {
          * Falls back to ElementInternals form if no explicit form ID is provided.
          */
         this.processFormAction = () => {
-            var _a, _b;
             const formElement = this.form
                 ? document.getElementById(this.form)
-                : (_a = this.internals) === null || _a === void 0 ? void 0 : _a.form;
+                : this.internals?.form;
             if (!formElement) {
-                console.warn('No form element found.', `Form ID: ${this.form || 'Not provided'}`, `Internals form:`, (_b = this.internals) === null || _b === void 0 ? void 0 : _b.form);
+                console.warn('No form element found.', `Form ID: ${this.form || 'Not provided'}`, `Internals form:`, this.internals?.form);
                 return;
             }
             switch (this.type) {

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":"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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  /**\n   * Sets the form associated with the button in case the (submit) button is not a child of a form.\n   * Matches the native HTML button 'form' attribute behavior.\n   */\n  @Prop({ reflect: true })\n  readonly form: string;\n\n  /**\n   * Use this to make the button skip-able when users navigate with the keyboard.\n   * The button remains clickable but won’t be reached via the Tab key.\n   */\n  @Prop({ reflect: true })\n  readonly disableTabindex: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles button click events, managing form actions and disabled states.\n   * Prevents default behavior when button is disabled or loading, and\n   * processes form submissions/resets when appropriate.\n   * @param {Event} event - The click event.\n   */\n  private handleButtonClick = (event: Event): void => {\n    if (this.loading || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (\n      this.type !== ButtonType.Button &&\n      (this.form || this.internals?.form)\n    ) {\n      this.processFormAction();\n    } else if (this.form && this.type === ButtonType.Button) {\n      console.warn(\n        'Button has a form id but is not of type submit or reset so no form action will be processed.',\n        `Button:`,\n        this.el,\n      );\n    }\n  };\n\n  /**\n   * Processes form-related actions by finding the associated form element\n   * and triggering the appropriate action (submit/reset) based on button type.\n   * Falls back to ElementInternals form if no explicit form ID is provided.\n   */\n  private processFormAction = (): void => {\n    const formElement = this.form\n      ? (document.getElementById(this.form) as HTMLFormElement)\n      : this.internals?.form;\n\n    if (!formElement) {\n      console.warn(\n        'No form element found.',\n        `Form ID: ${this.form || 'Not provided'}`,\n        `Internals form:`,\n        this.internals?.form,\n      );\n      return;\n    }\n\n    switch (this.type) {\n      case ButtonType.Submit:\n        formElement.requestSubmit();\n        break;\n      case ButtonType.Reset:\n        formElement.reset();\n        break;\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  //#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\n        role=\"button\"\n        tabindex={this.disableTabindex ? -1 : 0}\n        onClick={this.handleButtonClick}\n      >\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  /**\n   * Sets the form associated with the button in case the (submit) button is not a child of a form.\n   * Matches the native HTML button 'form' attribute behavior.\n   */\n  @Prop({ reflect: true })\n  readonly form: string;\n\n  /**\n   * Use this to make the button skip-able when users navigate with the keyboard.\n   * The button remains clickable but won’t be reached via the Tab key.\n   */\n  @Prop({ reflect: true })\n  readonly disableTabindex: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles button click events, managing form actions and disabled states.\n   * Prevents default behavior when button is disabled or loading, and\n   * processes form submissions/resets when appropriate.\n   * @param {Event} event - The click event.\n   */\n  private handleButtonClick = (event: Event): void => {\n    if (this.loading || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (\n      this.type !== ButtonType.Button &&\n      (this.form || this.internals?.form)\n    ) {\n      this.processFormAction();\n    } else if (this.form && this.type === ButtonType.Button) {\n      console.warn(\n        'Button has a form id but is not of type submit or reset so no form action will be processed.',\n        `Button:`,\n        this.el,\n      );\n    }\n  };\n\n  /**\n   * Processes form-related actions by finding the associated form element\n   * and triggering the appropriate action (submit/reset) based on button type.\n   * Falls back to ElementInternals form if no explicit form ID is provided.\n   */\n  private processFormAction = (): void => {\n    const formElement = this.form\n      ? (document.getElementById(this.form) as HTMLFormElement)\n      : this.internals?.form;\n\n    if (!formElement) {\n      console.warn(\n        'No form element found.',\n        `Form ID: ${this.form || 'Not provided'}`,\n        `Internals form:`,\n        this.internals?.form,\n      );\n      return;\n    }\n\n    switch (this.type) {\n      case ButtonType.Submit:\n        formElement.requestSubmit();\n        break;\n      case ButtonType.Reset:\n        formElement.reset();\n        break;\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  //#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\n        role=\"button\"\n        tabindex={this.disableTabindex ? -1 : 0}\n        onClick={this.handleButtonClick}\n      >\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"]}