@nova-design-system/nova-webcomponents 3.0.0-beta.17

package/dist/collection/components/nv-icon/nv-icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-icons.js","sourceRoot":"","sources":["../../../src/components/nv-icon/nv-icons.ts"],"names":[],"mappings":"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","sourcesContent":["/** Available icons */\n\nexport const iconNames = [\n  'access-point-off',\n  'access-point',\n  'accessible',\n  'activity',\n  'address-book',\n  'adjustments-horizontal',\n  'adjustments-up',\n  'adjustments',\n  'affiliate',\n  'air-conditioning',\n  'alert-circle',\n  'align-center',\n  'align-left',\n  'align-right',\n  'app-window',\n  'apps',\n  'archive',\n  'areas',\n  'arrow-back-up',\n  'arrow-back',\n  'arrow-down-left',\n  'arrow-down-right',\n  'arrow-down',\n  'arrow-forward-up',\n  'arrow-forward',\n  'arrow-left',\n  'arrow-right',\n  'arrow-up-left',\n  'arrow-up-right',\n  'arrow-up',\n  'arrows-move',\n  'aspect-ratio',\n  'atom',\n  'basket',\n  'battery-1',\n  'battery-2',\n  'battery-3',\n  'battery-4',\n  'battery-automotive',\n  'battery-charging',\n  'battery-eco',\n  'battery-off',\n  'battery',\n  'bell-off',\n  'bell-ringing',\n  'bell',\n  'bike',\n  'bluetooth-connected',\n  'bluetooth-off',\n  'bluetooth',\n  'bolt',\n  'book',\n  'bookmark-off',\n  'bookmark',\n  'bookmarks',\n  'box-align-top',\n  'box-multiple',\n  'briefcase',\n  'brightness-down',\n  'brightness-up',\n  'browser-check',\n  'browser-plus',\n  'browser-x',\n  'browser',\n  'brush',\n  'building-bank',\n  'building-factory',\n  'building-lighthouse',\n  'building-store',\n  'building',\n  'bulb-off',\n  'bulb',\n  'cake',\n  'calendar-time',\n  'calendar',\n  'camera-off',\n  'camera',\n  'car-crane',\n  'car',\n  'caravan',\n  'cash-banknote',\n  'cash',\n  'cast',\n  'cell',\n  'charging-pile',\n  'chart-arcs',\n  'chart-area-line',\n  'chart-area',\n  'chart-arrows-vertical',\n  'chart-arrows',\n  'chart-bar',\n  'chart-bubble',\n  'chart-circles',\n  'chart-donut',\n  'chart-dots',\n  'chart-line',\n  'chart-pie',\n  'chart-radar',\n  'check',\n  'checkbox',\n  'checklist',\n  'checks',\n  'chevron-down',\n  'chevron-left',\n  'chevron-right',\n  'chevron-top',\n  'circle-caret-right',\n  'circle-check',\n  'circle-x',\n  'clipboard-check',\n  'clipboard-list',\n  'clipboard-plus',\n  'clipboard-text',\n  'clipboard-x',\n  'clipboard',\n  'clock-edit',\n  'clock',\n  'cloud-data-connection',\n  'cloud-download',\n  'cloud-rain',\n  'cloud-snow',\n  'cloud-upload',\n  'cloud',\n  'color-picker',\n  'color-swatch',\n  'compass',\n  'contract',\n  'copy',\n  'cpu',\n  'crane',\n  'credit-card',\n  'crop',\n  'cross',\n  'crown',\n  'currency-bitcoin',\n  'currency-dollar',\n  'currency-ethereum',\n  'currency-euro',\n  'cut',\n  'dashboard',\n  'database',\n  'device-desktop',\n  'device-floppy',\n  'device-gamepad',\n  'device-laptop',\n  'device-mobile-rotated',\n  'device-mobile',\n  'device-tablet',\n  'device-watch',\n  'devices',\n  'dialpad',\n  'direction-horizontal',\n  'direction-sign',\n  'direction',\n  'discount',\n  'door-enter',\n  'dots-vertical',\n  'dots',\n  'download',\n  'drone',\n  'droplet-filled',\n  'droplet-half',\n  'droplet',\n  'droplets',\n  'edit',\n  'engine',\n  'external-link',\n  'eye-off',\n  'eye',\n  'face-id',\n  'feather',\n  'file-alert',\n  'file-analytics',\n  'file-check',\n  'file-code',\n  'file-download',\n  'file-export',\n  'file-horizontal',\n  'file-import',\n  'file-plus',\n  'file-search',\n  'file-text-bookmark',\n  'file-text',\n  'file-type-bmp',\n  'file-type-css',\n  'file-type-csv',\n  'file-type-doc',\n  'file-type-html',\n  'file-type-jpg',\n  'file-type-js',\n  'file-type-pdf',\n  'file-type-png',\n  'file-type-ppt',\n  'file-type-xls',\n  'file-type-xml',\n  'file-type-zip',\n  'file-upload',\n  'file-x',\n  'file-zip',\n  'file',\n  'files-off',\n  'files',\n  'filter-off',\n  'filter',\n  'fingerprint',\n  'fire-extinguisher',\n  'flag',\n  'flame',\n  'flip-horizontal',\n  'flip-vertical',\n  'folder-minus',\n  'folder-off',\n  'folder-plus',\n  'folder-x',\n  'folder',\n  'folders',\n  'frame',\n  'gas-station',\n  'gauge',\n  'gift',\n  'gps',\n  'grid-dots',\n  'grip-horizontal',\n  'grip-vertical',\n  'hand-stop',\n  'hand-waving',\n  'hash',\n  'haze',\n  'headphones-off',\n  'headphones',\n  'headset',\n  'helicopter',\n  'help',\n  'history',\n  'home',\n  'hourglass-empty',\n  'hourglass-high',\n  'hourglass-low',\n  'hourglass-off',\n  'hourglass',\n  'inbox',\n  'info-circle',\n  'keyboard-hide',\n  'keyboard-show',\n  'keyboard',\n  'layout-board-split',\n  'layout-dashboard',\n  'layout-grid',\n  'layout-sidebar-left-collapse',\n  'layout-sidebar-left-expand',\n  'layout-sidebar-right-collapse',\n  'layout-sidebar-right-expand',\n  'layout',\n  'leaf',\n  'lifebuoy',\n  'link',\n  'list-search',\n  'list',\n  'loader',\n  'location',\n  'lock-off',\n  'lock-open',\n  'lock',\n  'login',\n  'logout',\n  'mail-forward',\n  'mail-opened',\n  'mail',\n  'map-pin-off',\n  'map-pin',\n  'map',\n  'menu',\n  'message-dots',\n  'message-off',\n  'message',\n  'messages',\n  'microphone-off',\n  'microphone',\n  'minus',\n  'mist',\n  'moon',\n  'motorbike',\n  'mouse',\n  'movie',\n  'network',\n  'news',\n  'note',\n  'notebook',\n  'notes',\n  'offshore-station',\n  'package',\n  'palette',\n  'paperclip',\n  'pencil',\n  'phone-call',\n  'phone-calling',\n  'phone-check',\n  'phone-incoming',\n  'phone-off',\n  'phone-outgoing',\n  'phone',\n  'photo-off',\n  'photo',\n  'pig',\n  'pin',\n  'pinned-off',\n  'pinned',\n  'plane-off',\n  'plane',\n  'plant',\n  'player-pause',\n  'player-play',\n  'player-skip-back',\n  'player-skip-forward',\n  'player-track-next',\n  'player-track-prev',\n  'plug-connected',\n  'plug',\n  'plus',\n  'power-ac',\n  'power-dc',\n  'power',\n  'presentation-analytics',\n  'presentation',\n  'printer',\n  'propeller',\n  'puzzle-2',\n  'puzzle',\n  'pylon',\n  'qrcode',\n  'radar',\n  'radio',\n  'radioactive',\n  'receipt-dollar',\n  'receipt-euro',\n  'receipt',\n  'recharging',\n  'recycle',\n  'refresh-alert',\n  'refresh',\n  'repeat-once',\n  'repeat',\n  'replace',\n  'report-analytics',\n  'report-medical',\n  'report-search',\n  'report',\n  'ripple',\n  'rocket',\n  'rotate-2',\n  'rotate-clockwise-2',\n  'rotate-clockwise',\n  'rotate-dot',\n  'rotate',\n  'router',\n  'ruler-measure',\n  'satellite',\n  'scale',\n  'school',\n  'scissors',\n  'scooter-electric',\n  'screenshot',\n  'search',\n  'seeding',\n  'select',\n  'selector',\n  'send',\n  'server',\n  'settings',\n  'shape',\n  'share-2',\n  'share',\n  'shield-check',\n  'shield-lock',\n  'shield-off',\n  'shield-x',\n  'shield',\n  'ship',\n  'shopping-cart',\n  'slash',\n  'smart-home',\n  'snowflake',\n  'solar-panel',\n  'sort-ascending-letters',\n  'sort-ascending-numbers',\n  'sort-descending-letters',\n  'sort-descending-numbers',\n  'spacing-horizontal',\n  'spacing-vertical',\n  'speakerphone',\n  'stack',\n  'star',\n  'sun',\n  'sunrise',\n  'sunset',\n  'switch-horizontal',\n  'switch-vertical',\n  'table',\n  'tag',\n  'temperature',\n  'template',\n  'terminal',\n  'text-size',\n  'text',\n  'thumb-down',\n  'thumb-up',\n  'ticket',\n  'timeline',\n  'tir',\n  'tool',\n  'tools',\n  'train',\n  'trash-off',\n  'trash',\n  'tree',\n  'trees',\n  'truck-delivery',\n  'truck',\n  'umbrella',\n  'unlink',\n  'upload',\n  'user-circle',\n  'user-minus',\n  'user-plus',\n  'user',\n  'users',\n  'versions',\n  'video-minus',\n  'video-off',\n  'video-plus',\n  'video',\n  'volume-2',\n  'volume-3',\n  'volume',\n  'wallet',\n  'wand',\n  'waves',\n  'wifi-off',\n  'wifi',\n  'wind-direction',\n  'wind',\n  'windmill',\n  'wood',\n  'world',\n  'writing',\n  'x',\n] as const;\nexport type IconName = (typeof iconNames)[number];\n"]}

package/dist/collection/components/nv-icon/test/nv-icon.test.js

@@ -0,0 +1,25 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { NvIcon } from "../nv-icon";
+import { iconNames } from "../nv-icons";
+global.fetch = jest.fn(() => Promise.resolve({
+    blob: () => Promise.resolve(new Blob(['<svg></svg>'], { type: 'image/svg+xml' })),
+}));
+describe('nv-icon', () => {
+    test.each(iconNames)('renders icon %s correctly', async (iconName) => {
+        const page = await newSpecPage({
+            components: [NvIcon],
+            html: `<nv-icon name="${iconName}"></nv-icon>`,
+        });
+        const element = page.root;
+        expect(element).toBeTruthy();
+        const svg = element.querySelector('svg');
+        expect(svg).toBeTruthy();
+        const use = svg.querySelector('use');
+        expect(use).toBeTruthy();
+        const href = use.getAttribute('href');
+        expect(href).toContain(`#${iconName}`);
+        const ariaLabel = element.getAttribute('aria-label');
+        expect(ariaLabel).toBe(`${iconName}-icon`);
+    });
+});
+//# sourceMappingURL=nv-icon.test.js.map

package/dist/collection/components/nv-icon/test/nv-icon.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-icon.test.js","sourceRoot":"","sources":["../../../../src/components/nv-icon/test/nv-icon.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAC1B,OAAO,CAAC,OAAO,CAAC;IACd,IAAI,EAAE,GAAG,EAAE,CACT,OAAO,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC,aAAa,CAAC,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC;CACxE,CAAC,CACU,CAAC;AAEf,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACvB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,2BAA2B,EAAE,KAAK,EAAC,QAAQ,EAAC,EAAE;QACjE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,kBAAkB,QAAQ,cAAc;SAC/C,CAAC,CAAC;QAEH,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;QAC1B,MAAM,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,CAAC;QAE7B,MAAM,GAAG,GAAG,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACzC,MAAM,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,CAAC;QAEzB,MAAM,GAAG,GAAG,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACrC,MAAM,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,CAAC;QAEzB,MAAM,IAAI,GAAG,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACtC,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,IAAI,QAAQ,EAAE,CAAC,CAAC;QAEvC,MAAM,SAAS,GAAG,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QACrD,MAAM,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,QAAQ,OAAO,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { NvIcon } from '../nv-icon';\n\nimport { iconNames } from '../nv-icons';\n\nglobal.fetch = jest.fn(() =>\n  Promise.resolve({\n    blob: () =>\n      Promise.resolve(new Blob(['<svg></svg>'], { type: 'image/svg+xml' })),\n  }),\n) as jest.Mock;\n\ndescribe('nv-icon', () => {\n  test.each(iconNames)('renders icon %s correctly', async iconName => {\n    const page = await newSpecPage({\n      components: [NvIcon],\n      html: `<nv-icon name=\"${iconName}\"></nv-icon>`,\n    });\n\n    const element = page.root;\n    expect(element).toBeTruthy();\n\n    const svg = element.querySelector('svg');\n    expect(svg).toBeTruthy();\n\n    const use = svg.querySelector('use');\n    expect(use).toBeTruthy();\n\n    const href = use.getAttribute('href');\n    expect(href).toContain(`#${iconName}`);\n\n    const ariaLabel = element.getAttribute('aria-label');\n    expect(ariaLabel).toBe(`${iconName}-icon`);\n  });\n});\n"]}

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

@@ -0,0 +1,152 @@
+/* Variants */
+/* Define maps for size-related variables */
+/* Define maps for emphasis-related variables */
+nv-iconbutton.root {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-style: normal;
+  font-weight: 500;
+  font-family: "TT Norms Pro", sans-serif;
+  transition: background-color 150ms ease-out;
+  height: fit-content;
+  width: fit-content;
+}
+nv-iconbutton.size-xs {
+  padding: var(--button-xs-icon-button-padding);
+  gap: var(--button-xs-gap);
+  border-radius: var(--button-xs-border-radius);
+  line-height: var(--button-xs-line-height);
+  font-size: var(--button-xs-font-size);
+}
+nv-iconbutton.size-sm {
+  padding: var(--button-sm-icon-button-padding);
+  gap: var(--button-sm-gap);
+  border-radius: var(--button-sm-border-radius);
+  line-height: var(--button-sm-line-height);
+  font-size: var(--button-sm-font-size);
+}
+nv-iconbutton.size-md {
+  padding: var(--button-md-icon-button-padding);
+  gap: var(--button-md-gap);
+  border-radius: var(--button-md-border-radius);
+  line-height: var(--button-md-line-height);
+  font-size: var(--button-md-font-size);
+}
+nv-iconbutton.size-lg {
+  padding: var(--button-lg-icon-button-padding);
+  gap: var(--button-lg-gap);
+  border-radius: var(--button-lg-border-radius);
+  line-height: var(--button-lg-line-height);
+  font-size: var(--button-lg-font-size);
+}
+nv-iconbutton.emphasis-high {
+  background: var(--components-button-high-background);
+  border: 1px solid var(--components-button-high-border);
+  color: var(--components-button-high-text);
+}
+nv-iconbutton.emphasis-high:hover {
+  background: var(--components-button-high-background-hover);
+  color: var(--components-button-high-text-hover);
+}
+nv-iconbutton.emphasis-high:focus, nv-iconbutton.emphasis-high:focus-within {
+  outline: none;
+}
+nv-iconbutton.emphasis-high:focus-visible, nv-iconbutton.emphasis-high:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-focus-brand);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+}
+nv-iconbutton.emphasis-high:disabled {
+  background: var(--components-button-high-background);
+  color: var(--components-button-high-text);
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+nv-iconbutton.emphasis-high nv-icon > svg {
+  color: var(--components-button-high-icon);
+}
+nv-iconbutton.emphasis-medium {
+  background: var(--components-button-medium-background);
+  border: 1px solid var(--components-button-medium-border);
+  color: var(--components-button-medium-text);
+}
+nv-iconbutton.emphasis-medium:hover {
+  background: var(--components-button-medium-background-hover);
+  color: var(--components-button-medium-text-hover);
+}
+nv-iconbutton.emphasis-medium:focus, nv-iconbutton.emphasis-medium:focus-within {
+  outline: none;
+}
+nv-iconbutton.emphasis-medium:focus-visible, nv-iconbutton.emphasis-medium:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-focus-brand);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+}
+nv-iconbutton.emphasis-medium:disabled {
+  background: var(--components-button-medium-background);
+  color: var(--components-button-medium-text);
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+nv-iconbutton.emphasis-medium nv-icon > svg {
+  color: var(--components-button-medium-icon);
+}
+nv-iconbutton.emphasis-low {
+  background: var(--components-button-low-background);
+  border: 1px solid var(--components-button-low-border);
+  color: var(--components-button-low-text);
+}
+nv-iconbutton.emphasis-low:hover {
+  background: var(--components-button-low-background-hover);
+  color: var(--components-button-low-text-hover);
+}
+nv-iconbutton.emphasis-low:focus, nv-iconbutton.emphasis-low:focus-within {
+  outline: none;
+}
+nv-iconbutton.emphasis-low:focus-visible, nv-iconbutton.emphasis-low:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-focus-brand);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+}
+nv-iconbutton.emphasis-low:disabled {
+  background: var(--components-button-low-background);
+  color: var(--components-button-low-text);
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+nv-iconbutton.emphasis-low nv-icon > svg {
+  color: var(--components-button-low-icon);
+}
+nv-iconbutton.emphasis-lower {
+  background: var(--components-button-lower-background);
+  border: 1px solid var(--components-button-lower-border);
+  color: var(--components-button-lower-text);
+}
+nv-iconbutton.emphasis-lower:hover {
+  background: var(--components-button-lower-background-hover);
+  color: var(--components-button-lower-text-hover);
+}
+nv-iconbutton.emphasis-lower:focus, nv-iconbutton.emphasis-lower:focus-within {
+  outline: none;
+}
+nv-iconbutton.emphasis-lower:focus-visible, nv-iconbutton.emphasis-lower:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-focus-brand);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+}
+nv-iconbutton.emphasis-lower:disabled {
+  background: var(--components-button-lower-background);
+  color: var(--components-button-lower-text);
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+nv-iconbutton.emphasis-lower nv-icon > svg {
+  color: var(--components-button-lower-icon);
+}
+nv-iconbutton.loading [slot=leading-icon] {
+  display: none;
+}
+nv-iconbutton.shape-rounded {
+  border-radius: var(--radius-rounded-full);
+}

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

@@ -0,0 +1,61 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvIconbuttonDocs = {
+    component: 'nv-iconbutton',
+    stories: [
+        {
+            name: 'Default',
+            args: { name: 'user' },
+            template: h("nv-iconbutton", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.name),
+            description: 'Choose the icon you want to display.',
+            args: { name: 'user' },
+            template: h("nv-iconbutton", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.size),
+            args: { name: 'user' },
+            template: (h("div", null, h("div", { "data-class": "flex gap-4 items-center" }, h("nv-iconbutton", { "data-storybook-args": true, size: "xs" }), h("nv-iconbutton", { "data-storybook-args": true, size: "sm" }), h("nv-iconbutton", { "data-storybook-args": true, size: "md" }), h("nv-iconbutton", { "data-storybook-args": true, size: "lg" })), h("div", { "data-class": "flex gap-4 items-center" }, h("nv-iconbutton", { "data-storybook-args": true, size: "xs", shape: "rounded" }), h("nv-iconbutton", { "data-storybook-args": true, size: "sm", shape: "rounded" }), h("nv-iconbutton", { "data-storybook-args": true, size: "md", shape: "rounded" }), h("nv-iconbutton", { "data-storybook-args": true, size: "lg", shape: "rounded" })))),
+        },
+        {
+            name: nameof(x => x.emphasis),
+            args: { name: 'user' },
+            template: (h("div", null, h("div", { "data-class": "flex gap-4" }, h("nv-iconbutton", { "data-storybook-args": true, emphasis: "high" }), h("nv-iconbutton", { "data-storybook-args": true, emphasis: "medium" }), h("nv-iconbutton", { "data-storybook-args": true, emphasis: "low" }), h("nv-iconbutton", { "data-storybook-args": true, emphasis: "lower" })), h("div", { "data-class": "flex gap-4" }, h("nv-iconbutton", { "data-storybook-args": true, emphasis: "high", shape: "rounded" }), h("nv-iconbutton", { "data-storybook-args": true, emphasis: "medium", shape: "rounded" }), h("nv-iconbutton", { "data-storybook-args": true, emphasis: "low", shape: "rounded" }), h("nv-iconbutton", { "data-storybook-args": true, emphasis: "lower", shape: "rounded" })))),
+        },
+        {
+            name: nameof(x => x.loading),
+            args: { name: 'user', loading: true },
+            template: h("nv-iconbutton", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.disabled),
+            args: { name: 'user', disabled: true },
+            template: (h("div", null, h("nv-iconbutton", { "data-storybook-args": true }), h("nv-iconbutton", { "data-storybook-args": true, shape: "rounded" }))),
+        },
+        {
+            name: nameof(x => x.active),
+            args: { name: 'user', active: true },
+            template: h("nv-iconbutton", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.type),
+            args: { name: 'user' },
+            template: (h("div", { "data-class": "flex gap-4" }, h("nv-iconbutton", { "data-storybook-args": true, type: "submit" }), h("nv-iconbutton", { "data-storybook-args": true, type: "reset" }))),
+        },
+        {
+            name: nameof(x => x.shape),
+            args: { name: 'user' },
+            template: (h("div", { "data-class": "flex gap-4" }, h("nv-iconbutton", { "data-storybook-args": true, shape: "square" }), h("nv-iconbutton", { "data-storybook-args": true, shape: "rounded" }))),
+        },
+        {
+            name: 'DefaultSlot',
+            description: 'Add content inside the icon button.',
+            args: { name: 'user' },
+            template: (h("nv-iconbutton", { "data-storybook-args": true }, h("span", null, "Default Slot"))),
+        },
+    ],
+};
+export default NvIconbuttonDocs;
+//# sourceMappingURL=nv-iconbutton.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-iconbutton.docs.js","sourceRoot":"","sources":["../../../src/components/nv-iconbutton/nv-iconbutton.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 NvIconbuttonDocs: NovaDocs<Components.NvIconbutton> = {\n  component: 'nv-iconbutton',\n  stories: [\n    {\n      name: 'Default',\n      args: { name: 'user' },\n      template: <nv-iconbutton data-storybook-args></nv-iconbutton>,\n    },\n    {\n      name: nameof<Components.NvIconbutton>(x => x.name),\n      description: 'Choose the icon you want to display.',\n      args: { name: 'user' },\n      template: <nv-iconbutton data-storybook-args></nv-iconbutton>,\n    },\n    {\n      name: nameof<Components.NvIconbutton>(x => x.size),\n      args: { name: 'user' },\n      template: (\n        <div>\n          <div data-class=\"flex gap-4 items-center\">\n            <nv-iconbutton data-storybook-args size=\"xs\"></nv-iconbutton>\n            <nv-iconbutton data-storybook-args size=\"sm\"></nv-iconbutton>\n            <nv-iconbutton data-storybook-args size=\"md\"></nv-iconbutton>\n            <nv-iconbutton data-storybook-args size=\"lg\"></nv-iconbutton>\n          </div>\n          <div data-class=\"flex gap-4 items-center\">\n            <nv-iconbutton\n              data-storybook-args\n              size=\"xs\"\n              shape=\"rounded\"\n            ></nv-iconbutton>\n            <nv-iconbutton\n              data-storybook-args\n              size=\"sm\"\n              shape=\"rounded\"\n            ></nv-iconbutton>\n            <nv-iconbutton\n              data-storybook-args\n              size=\"md\"\n              shape=\"rounded\"\n            ></nv-iconbutton>\n            <nv-iconbutton\n              data-storybook-args\n              size=\"lg\"\n              shape=\"rounded\"\n            ></nv-iconbutton>\n          </div>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvIconbutton>(x => x.emphasis),\n      args: { name: 'user' },\n      template: (\n        <div>\n          <div data-class=\"flex gap-4\">\n            <nv-iconbutton data-storybook-args emphasis=\"high\"></nv-iconbutton>\n            <nv-iconbutton\n              data-storybook-args\n              emphasis=\"medium\"\n            ></nv-iconbutton>\n            <nv-iconbutton data-storybook-args emphasis=\"low\"></nv-iconbutton>\n            <nv-iconbutton data-storybook-args emphasis=\"lower\"></nv-iconbutton>\n          </div>\n          <div data-class=\"flex gap-4\">\n            <nv-iconbutton\n              data-storybook-args\n              emphasis=\"high\"\n              shape=\"rounded\"\n            ></nv-iconbutton>\n            <nv-iconbutton\n              data-storybook-args\n              emphasis=\"medium\"\n              shape=\"rounded\"\n            ></nv-iconbutton>\n            <nv-iconbutton\n              data-storybook-args\n              emphasis=\"low\"\n              shape=\"rounded\"\n            ></nv-iconbutton>\n            <nv-iconbutton\n              data-storybook-args\n              emphasis=\"lower\"\n              shape=\"rounded\"\n            ></nv-iconbutton>\n          </div>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvIconbutton>(x => x.loading),\n      args: { name: 'user', loading: true },\n      template: <nv-iconbutton data-storybook-args></nv-iconbutton>,\n    },\n    {\n      name: nameof<Components.NvIconbutton>(x => x.disabled),\n      args: { name: 'user', disabled: true },\n      template: (\n        <div>\n          <nv-iconbutton data-storybook-args></nv-iconbutton>\n          <nv-iconbutton data-storybook-args shape=\"rounded\"></nv-iconbutton>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvIconbutton>(x => x.active),\n      args: { name: 'user', active: true },\n      template: <nv-iconbutton data-storybook-args></nv-iconbutton>,\n    },\n    {\n      name: nameof<Components.NvIconbutton>(x => x.type),\n      args: { name: 'user' },\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-iconbutton data-storybook-args type=\"submit\"></nv-iconbutton>\n          <nv-iconbutton data-storybook-args type=\"reset\"></nv-iconbutton>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvIconbutton>(x => x.shape),\n      args: { name: 'user' },\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-iconbutton data-storybook-args shape=\"square\"></nv-iconbutton>\n          <nv-iconbutton data-storybook-args shape=\"rounded\"></nv-iconbutton>\n        </div>\n      ),\n    },\n    {\n      name: 'DefaultSlot',\n      description: 'Add content inside the icon button.',\n      args: { name: 'user' },\n      template: (\n        <nv-iconbutton data-storybook-args>\n          <span>Default Slot</span>\n        </nv-iconbutton>\n      ),\n    },\n  ],\n};\n\nexport default NvIconbuttonDocs;\n"]}

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

@@ -0,0 +1,263 @@
+import { Host, h, } from "@stencil/core";
+import clsx from "clsx";
+/**
+ * @slot default - Content of the button.
+ */
+export class NvIconbutton {
+    constructor() {
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * Handles form-related actions when the button is clicked.
+         * - Submits the form if the button type is 'submit'.
+         * - Resets the form if the button type is 'reset'.
+         * @param {Event} event - The click event.
+         */
+        this.handleClick = (event) => {
+            var _a, _b, _c, _d;
+            if (this.loading || this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            if (this.type === 'submit') {
+                (_b = (_a = this.internals) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.requestSubmit();
+            }
+            if (this.type === 'reset') {
+                (_d = (_c = this.internals) === null || _c === void 0 ? void 0 : _c.form) === null || _d === void 0 ? void 0 : _d.reset();
+            }
+        };
+        this.size = 'md';
+        this.emphasis = 'high';
+        this.loading = false;
+        this.disabled = false;
+        this.active = false;
+        this.name = undefined;
+        this.type = 'button';
+        this.shape = 'square';
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region WATCHERS
+    handleLoadingChange(loading) {
+        this.loading = loading;
+        this.disabled = loading;
+    }
+    handleDisabledChange(disabled) {
+        if (this.loading) {
+            this.disabled = this.loading;
+        }
+        else {
+            this.disabled = disabled;
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        if (this.loading) {
+            this.disabled = this.loading;
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '3ca84b14312db9e4fff85fac71fbb0cc7ae7db44', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && h("nv-loader", { key: 'bfb6c6ee4dbfa56595b704f436120c3ae18f4fc4', size: this.size }), !this.loading && h("nv-icon", { key: '7e87da2f6d233289bbce12416bf0d39b647f43f3', name: this.name, size: this.size }), h("slot", { key: '43972e79cf4efb921cbc9714110b13590144a268' })));
+    }
+    static get is() { return "nv-iconbutton"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-iconbutton.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-iconbutton.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`${ButtonSize}`",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
+                    "references": {
+                        "ButtonSize": {
+                            "location": "import",
+                            "path": "../../utils/constants",
+                            "id": "src/utils/constants.ts::ButtonSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines how large or small the button appears, allowing for\ncustomization of the button's dimensions to fit different design\nspecifications and user needs."
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'md'"
+            },
+            "emphasis": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`${ButtonEmphasis}`",
+                    "resolved": "\"high\" | \"low\" | \"lower\" | \"medium\"",
+                    "references": {
+                        "ButtonEmphasis": {
+                            "location": "import",
+                            "path": "../../utils/constants",
+                            "id": "src/utils/constants.ts::ButtonEmphasis"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adjusts the button\u2019s emphasis to make it more or less visually prominent\nto users. Use this to draw attention to important actions or reduce focus\non less critical ones."
+                },
+                "attribute": "emphasis",
+                "reflect": true,
+                "defaultValue": "'high'"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set this to true to show a spinner on the button, letting users know that\ntheir action is being processed. It helps improve user experience by\nindicating ongoing activities. The icon is not displayed when the button\nis loading. Also, the button is disabled. If you want to disable the\nbutton, it is not possible. It is automatically disabled when loading."
+                },
+                "attribute": "loading",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the button, preventing user interaction."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the button look active when it\u2019s within a compatible component\nlike a button group."
+                },
+                "attribute": "active",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`${IconName}` | string",
+                    "resolved": "string",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../nv-icon/nv-icons",
+                            "id": "src/components/nv-icon/nv-icons.ts::IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Choose the icon you want to display. This also sets the aria-label for\nimproved accessibility, helping users who rely on screen readers.\nThe icon is not displayed when the button is loading."
+                },
+                "attribute": "name",
+                "reflect": true
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`${ButtonType}`",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {
+                        "ButtonType": {
+                            "location": "import",
+                            "path": "../../utils/constants",
+                            "id": "src/utils/constants.ts::ButtonType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the button type to control its function in forms. Use 'submit' to send\nform data, 'reset' to clear the form, or 'button' for a standard button\nthat doesn\u2019t interact with form submission by default."
+                },
+                "attribute": "type",
+                "reflect": true,
+                "defaultValue": "'button'"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'square' | 'rounded'",
+                    "resolved": "\"rounded\" | \"square\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the shape of the button. Choose between square and rounded."
+                },
+                "attribute": "shape",
+                "reflect": true,
+                "defaultValue": "'square'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "loading",
+                "methodName": "handleLoadingChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=nv-iconbutton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-iconbutton.js","sourceRoot":"","sources":["../../../src/components/nv-iconbutton/nv-iconbutton.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,eAAe,EACf,OAAO,EACP,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,IAAI,MAAM,MAAM,CAAC;AAKxB;;GAEG;AAQH,MAAM,OAAO,YAAY;;QAmEvB,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;oBA7E+B,IAAI;wBAQI,MAAM;uBAU5B,KAAK;wBAMJ,KAAK;sBAOE,KAAK;;oBAgBC,QAAQ;qBAMF,QAAQ;;IA0B/C,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,qDACH,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAC,GAAG,EACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC1C,KAAK,EAAE,IAAI,CACT,MAAM,EACN,QAAQ,IAAI,CAAC,IAAI,EAAE,EACnB,YAAY,IAAI,CAAC,QAAQ,EAAE,EAC3B,IAAI,CAAC,OAAO,IAAI,SAAS,EACzB,SAAS,IAAI,CAAC,KAAK,EAAE,CACtB,EACD,OAAO,EAAE,IAAI,CAAC,WAAW;YAExB,IAAI,CAAC,OAAO,IAAI,kEAAW,IAAI,EAAE,IAAI,CAAC,IAAI,GAAc;YAExD,CAAC,IAAI,CAAC,OAAO,IAAI,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;YAE/D,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Content of the button.\n */\n@Component({\n  tag: 'nv-iconbutton',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-iconbutton.scss',\n  scoped: false,\n})\nexport class NvIconbutton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvIconbuttonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\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   * 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. The icon is not displayed when the button\n   * is loading. Also, the button is disabled. If you want to disable the\n   * button, it is not possible. It is automatically disabled when loading.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ mutable: true, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Makes the button look active when it’s within a compatible component\n   * like a button group.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Choose the icon you want to display. This also sets the aria-label for\n   * improved accessibility, helping users who rely on screen readers.\n   * The icon is not displayed when the button is loading.\n   */\n  @Prop({ reflect: true })\n  readonly name: `${IconName}` | string;\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 shape of the button. Choose between square and rounded.\n   */\n  @Prop({ reflect: true })\n  readonly shape: 'square' | 'rounded' = 'square';\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\n        role=\"button\"\n        type={this.type}\n        tabindex=\"0\"\n        disabled={this.disabled ? true : undefined}\n        class={clsx(\n          'root',\n          `size-${this.size}`,\n          `emphasis-${this.emphasis}`,\n          this.loading && 'loading',\n          `shape-${this.shape}`,\n        )}\n        onClick={this.handleClick}\n      >\n        {this.loading && <nv-loader size={this.size}></nv-loader>}\n\n        {!this.loading && <nv-icon name={this.name} size={this.size} />}\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}