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

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

@@ -0,0 +1,259 @@
+/* Variants */
+nv-icon {
+  display: inline-block;
+  width: fit-content;
+  height: fit-content;
+  color: inherit;
+}
+nv-icon > .nv-icon-xs {
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  stroke-width: 1.2px;
+}
+nv-icon > .nv-icon-sm {
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+  stroke-width: 1.5px;
+}
+nv-icon > .nv-icon-md {
+  width: var(--spacing-5);
+  height: var(--spacing-5);
+  stroke-width: 1.6px;
+}
+nv-icon > .nv-icon-lg {
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+  stroke-width: 1.8px;
+}
+nv-icon > .nv-icon-xl {
+  width: var(--spacing-7);
+  height: var(--spacing-7);
+  stroke-width: 1.9px;
+}
+
+/* Variants */
+/* Define maps for size-related variables */
+/* Define maps for emphasis-related variables */
+nv-button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-style: normal;
+  font-weight: var(--font-weight-medium-emphasis);
+  font-family: "TT Norms Pro", sans-serif;
+  transition: background-color 150ms ease-out;
+  user-select: none;
+  cursor: pointer;
+  height: fit-content;
+  width: fit-content;
+}
+nv-button[size=xs] {
+  padding: var(--button-xs-padding-y) var(--button-xs-padding-x);
+  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-button[size=xs] nv-icon > svg {
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  stroke-width: 1.2px;
+}
+nv-button[size=sm] {
+  padding: var(--button-sm-padding-y) var(--button-sm-padding-x);
+  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-button[size=sm] nv-icon > svg {
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+  stroke-width: 1.5px;
+}
+nv-button[size=md] {
+  padding: var(--button-md-padding-y) var(--button-md-padding-x);
+  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-button[size=md] nv-icon > svg {
+  width: var(--spacing-5);
+  height: var(--spacing-5);
+  stroke-width: 1.6px;
+}
+nv-button[size=lg] {
+  padding: var(--button-lg-padding-y) var(--button-lg-padding-x);
+  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-button[size=lg] nv-icon > svg {
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+  stroke-width: 1.8px;
+}
+nv-button[emphasis=high] {
+  background: var(--components-button-high-background);
+  border: 1px solid var(--components-button-high-border);
+  color: var(--components-button-high-text);
+}
+nv-button[emphasis=high]:hover {
+  background: var(--components-button-high-background-hover);
+  border: 1px solid var(--components-button-high-border);
+  color: var(--components-button-high-text-hover);
+}
+nv-button[emphasis=high]:focus, nv-button[emphasis=high]:focus-within {
+  outline: none;
+}
+nv-button[emphasis=high]:focus-visible, nv-button[emphasis=high]:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-focus-brand);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+}
+nv-button[emphasis=high]:disabled:not([disabled=false]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+nv-button[emphasis=high][danger]:not([danger=false]) {
+  background: var(--components-button-high-background);
+  border: 1px solid var(--components-button-high-border);
+  color: var(--components-button-high-text);
+}
+nv-button[emphasis=high][danger]:not([danger=false]):hover {
+  background: var(--components-button-high-background-hover);
+  border: 1px solid var(--components-button-high-border);
+  color: var(--components-button-high-text-hover);
+}
+nv-button[emphasis=high][danger]:not([danger=false]):focus, nv-button[emphasis=high][danger]:not([danger=false]):focus-within {
+  outline: none;
+}
+nv-button[emphasis=high][danger]:not([danger=false]):focus-visible, nv-button[emphasis=high][danger]:not([danger=false]):has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-focus-destructive);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+}
+nv-button[emphasis=medium] {
+  background: var(--components-button-medium-background);
+  border: 1px solid var(--components-button-medium-border);
+  color: var(--components-button-medium-text);
+}
+nv-button[emphasis=medium]:hover {
+  background: var(--components-button-medium-background-hover);
+  border: 1px solid var(--components-button-medium-border);
+  color: var(--components-button-medium-text-hover);
+}
+nv-button[emphasis=medium]:focus, nv-button[emphasis=medium]:focus-within {
+  outline: none;
+}
+nv-button[emphasis=medium]:focus-visible, nv-button[emphasis=medium]:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-focus-brand);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+}
+nv-button[emphasis=medium]:disabled:not([disabled=false]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+nv-button[emphasis=medium][danger]:not([danger=false]) {
+  background: var(--components-button-medium-background);
+  border: 1px solid var(--components-button-medium-border);
+  color: var(--components-button-medium-text);
+}
+nv-button[emphasis=medium][danger]:not([danger=false]):hover {
+  background: var(--components-button-medium-background-hover);
+  border: 1px solid var(--components-button-medium-border);
+  color: var(--components-button-medium-text-hover);
+}
+nv-button[emphasis=medium][danger]:not([danger=false]):focus, nv-button[emphasis=medium][danger]:not([danger=false]):focus-within {
+  outline: none;
+}
+nv-button[emphasis=medium][danger]:not([danger=false]):focus-visible, nv-button[emphasis=medium][danger]:not([danger=false]):has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-focus-destructive);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+}
+nv-button[emphasis=low] {
+  background: var(--components-button-low-background);
+  border: 1px solid var(--components-button-low-border);
+  color: var(--components-button-low-text);
+}
+nv-button[emphasis=low]:hover {
+  background: var(--components-button-low-background-hover);
+  border: 1px solid var(--components-button-low-border);
+  color: var(--components-button-low-text-hover);
+}
+nv-button[emphasis=low]:focus, nv-button[emphasis=low]:focus-within {
+  outline: none;
+}
+nv-button[emphasis=low]:focus-visible, nv-button[emphasis=low]:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-focus-brand);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+}
+nv-button[emphasis=low]:disabled:not([disabled=false]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+nv-button[emphasis=low][danger]:not([danger=false]) {
+  background: var(--components-button-low-background);
+  border: 1px solid var(--components-button-low-border);
+  color: var(--components-button-low-text);
+}
+nv-button[emphasis=low][danger]:not([danger=false]):hover {
+  background: var(--components-button-low-background-hover);
+  border: 1px solid var(--components-button-low-border);
+  color: var(--components-button-low-text-hover);
+}
+nv-button[emphasis=low][danger]:not([danger=false]):focus, nv-button[emphasis=low][danger]:not([danger=false]):focus-within {
+  outline: none;
+}
+nv-button[emphasis=low][danger]:not([danger=false]):focus-visible, nv-button[emphasis=low][danger]:not([danger=false]):has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-focus-destructive);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+}
+nv-button[emphasis=lower] {
+  background: var(--components-button-lower-background);
+  border: 1px solid var(--components-button-lower-border);
+  color: var(--components-button-lower-text);
+}
+nv-button[emphasis=lower]:hover {
+  background: var(--components-button-lower-background-hover);
+  border: 1px solid var(--components-button-lower-border);
+  color: var(--components-button-lower-text-hover);
+}
+nv-button[emphasis=lower]:focus, nv-button[emphasis=lower]:focus-within {
+  outline: none;
+}
+nv-button[emphasis=lower]:focus-visible, nv-button[emphasis=lower]:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-focus-brand);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+}
+nv-button[emphasis=lower]:disabled:not([disabled=false]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+nv-button[emphasis=lower][danger]:not([danger=false]) {
+  background: var(--components-button-lower-background);
+  border: 1px solid var(--components-button-lower-border);
+  color: var(--components-button-lower-text);
+}
+nv-button[emphasis=lower][danger]:not([danger=false]):hover {
+  background: var(--components-button-lower-background-hover);
+  border: 1px solid var(--components-button-lower-border);
+  color: var(--components-button-lower-text-hover);
+}
+nv-button[emphasis=lower][danger]:not([danger=false]):focus, nv-button[emphasis=lower][danger]:not([danger=false]):focus-within {
+  outline: none;
+}
+nv-button[emphasis=lower][danger]:not([danger=false]):focus-visible, nv-button[emphasis=lower][danger]:not([danger=false]):has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-focus-destructive);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+}
+nv-button[fluid]:not([fluid=false]) {
+  width: 100%;
+}
+nv-button[loading]:not([loading=false]) [slot=leading-icon] {
+  display: none;
+}

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

@@ -0,0 +1,56 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvButtonDocs = {
+    component: 'nv-button',
+    subcomponents: ['nv-icon'],
+    stories: [
+        {
+            name: 'Default',
+            template: h("nv-button", { "data-storybook-args": true }, "NV Button"),
+        },
+        {
+            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"))),
+        },
+        {
+            name: nameof(x => x.emphasis),
+            template: (h("div", { "data-class": "flex gap-4" }, h("nv-button", { "data-storybook-args": true, emphasis: "high" }, "emphasis: high"), h("nv-button", { "data-storybook-args": true, emphasis: "medium" }, "emphasis: medium"), h("nv-button", { "data-storybook-args": true, emphasis: "low" }, "emphasis: low"), h("nv-button", { "data-storybook-args": true, emphasis: "lower" }, "emphasis: lower"))),
+        },
+        {
+            name: nameof(x => x.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"))),
+        },
+        {
+            name: nameof(x => x.loading),
+            args: { loading: true },
+            template: h("nv-button", { "data-storybook-args": true }, "loading"),
+        },
+        {
+            name: nameof(x => x.disabled),
+            args: { disabled: true },
+            template: h("nv-button", { "data-storybook-args": true }, "disabled"),
+        },
+        {
+            name: nameof(x => x.fluid),
+            args: { fluid: true },
+            template: h("nv-button", { "data-storybook-args": true }, "fluid"),
+        },
+        {
+            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"))),
+        },
+        {
+            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: 'IconSlots',
+            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" })))),
+        },
+    ],
+};
+export default NvButtonDocs;
+//# sourceMappingURL=nv-button.docs.js.map

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

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

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

@@ -0,0 +1,241 @@
+import { Host, h, } from "@stencil/core";
+import { ButtonSize } from "../../utils/constants";
+/**
+ * @slot default - Content of the button.
+ * @slot leading-icon - Icon before the label.
+ * @slot trailing-icon - Icon after the label.
+ */
+export class NvButton {
+    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.danger = false;
+        this.loading = false;
+        this.disabled = false;
+        this.fluid = false;
+        this.type = 'button';
+    }
+    //#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: 'f3349cdf1da05ae9a11a1b213db9f4cf062f6d9d', role: "button", tabindex: "0", onClick: this.handleClick }, this.loading && (h("nv-loader", { key: 'e776853069e4a34e72a1f07065cb969a08998f19', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), h("slot", { key: '4533e74ed576e23a75ca68a58711013c4c3482cd', name: "leading-icon" }), h("slot", { key: 'ecd5b1c5e970e47144ee522d17891af2a9c8eef7' }), h("slot", { key: '275517fb22c5cbfda415d0c5b5e45f44e1d99b21', name: "trailing-icon" })));
+    }
+    static get is() { return "nv-button"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-button.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's 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'"
+            },
+            "danger": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Applies styling that visually indicates the button represents a dangerous\naction."
+                },
+                "attribute": "danger",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "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."
+                },
+                "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"
+            },
+            "fluid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows the button to stretch and fill the entire width of its container."
+                },
+                "attribute": "fluid",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "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'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "loading",
+                "methodName": "handleLoadingChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=nv-button.js.map

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

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

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

@@ -0,0 +1,45 @@
+nv-col {
+  display: block;
+  flex: 1 1 0%;
+  padding-left: calc(var(--spacing-4) / 2);
+  padding-right: calc(var(--spacing-4) / 2);
+}
+nv-col[class*=w-] {
+  flex: none;
+}
+nv-col.w-1\/12 {
+  width: calc(100% * 1 / 12);
+}
+nv-col.w-2\/12 {
+  width: calc(100% * 2 / 12);
+}
+nv-col.w-3\/12 {
+  width: calc(100% * 3 / 12);
+}
+nv-col.w-4\/12 {
+  width: calc(100% * 4 / 12);
+}
+nv-col.w-5\/12 {
+  width: calc(100% * 5 / 12);
+}
+nv-col.w-6\/12 {
+  width: calc(100% * 6 / 12);
+}
+nv-col.w-7\/12 {
+  width: calc(100% * 7 / 12);
+}
+nv-col.w-8\/12 {
+  width: calc(100% * 8 / 12);
+}
+nv-col.w-9\/12 {
+  width: calc(100% * 9 / 12);
+}
+nv-col.w-10\/12 {
+  width: calc(100% * 10 / 12);
+}
+nv-col.w-11\/12 {
+  width: calc(100% * 11 / 12);
+}
+nv-col.w-12\/12 {
+  width: calc(100% * 12 / 12);
+}

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

@@ -0,0 +1,18 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvColDocs = {
+    component: 'nv-col',
+    subcomponents: ['nv-row'],
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-row", null, h("nv-col", { "data-storybook-args": true }, "Child Content"))),
+        },
+        {
+            name: nameof(x => x.size),
+            template: (h("nv-row", null, h("nv-col", { "data-storybook-args": true, size: 3 }, "Col size 3"), h("nv-col", { "data-storybook-args": true, size: 6 }, "Col size 6"), h("nv-col", { "data-storybook-args": true, size: 3 }, "Col size 3"))),
+        },
+    ],
+};
+export default NvColDocs;
+//# sourceMappingURL=nv-col.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-col.docs.js","sourceRoot":"","sources":["../../../src/components/nv-col/nv-col.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,SAAS,GAA+B;IAC5C,SAAS,EAAE,QAAQ;IACnB,aAAa,EAAE,CAAC,QAAQ,CAAC;IACzB,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,CACR;gBACE,6DAAkD,CAC3C,CACV;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAC3C,QAAQ,EAAE,CACR;gBACE,2CAA4B,IAAI,EAAE,CAAC,iBAE1B;gBACT,2CAA4B,IAAI,EAAE,CAAC,iBAE1B;gBACT,2CAA4B,IAAI,EAAE,CAAC,iBAE1B,CACF,CACV;SACF;KACF;CACF,CAAC;AAEF,eAAe,SAAS,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 NvColDocs: NovaDocs<Components.NvCol> = {\n  component: 'nv-col',\n  subcomponents: ['nv-row'],\n  stories: [\n    {\n      name: 'Default',\n      template: (\n        <nv-row>\n          <nv-col data-storybook-args>Child Content</nv-col>\n        </nv-row>\n      ),\n    },\n    {\n      name: nameof<Components.NvCol>(x => x.size),\n      template: (\n        <nv-row>\n          <nv-col data-storybook-args size={3}>\n            Col size 3\n          </nv-col>\n          <nv-col data-storybook-args size={6}>\n            Col size 6\n          </nv-col>\n          <nv-col data-storybook-args size={3}>\n            Col size 3\n          </nv-col>\n        </nv-row>\n      ),\n    },\n  ],\n};\n\nexport default NvColDocs;\n"]}