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

package/dist/components/nv-base.js

@@ -0,0 +1,89 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-632bedb8.js';
+
+const classes = {
+    'w-full': 'w-full',
+    'wFull': 'w-full',
+    'is-active': 'is-active',
+    'is-selected': 'is-selected',
+};
+const NvBaseComponent = /*@__PURE__*/ proxyCustomElement(class NvBaseComponent extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.applyClassesOnInitialRender();
+    }
+    componentDidLoad() {
+        this.mutationObserver = new MutationObserver(mutations => {
+            console.log(mutations);
+            mutations.forEach(mutation => {
+                if (mutation.type === 'attributes') {
+                    const target = mutation.target;
+                    Object.keys(classes).forEach(attributeName => {
+                        if (target.hasAttribute(attributeName)) {
+                            target.classList.add(classes[attributeName]);
+                        }
+                        else {
+                            target.classList.remove(classes[attributeName]);
+                        }
+                    });
+                }
+            });
+        });
+        this.observeElements();
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region METHODS
+    applyClassesOnInitialRender() {
+        Object.keys(classes).forEach(attributeName => {
+            const elements = this.el.querySelectorAll(`[${attributeName}]`);
+            elements.forEach(element => {
+                element.classList.add(classes[attributeName]);
+            });
+        });
+    }
+    observeElements() {
+        this.mutationObserver.observe(this.el, {
+            attributes: true,
+            attributeFilter: Object.keys(classes),
+            subtree: true,
+        });
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: 'b337eb1cfbe80ce8cefdb00a9d0d1fbb153869ba', style: { display: 'block' } }, h("slot", { key: '575c8605510de2b97bf202809492dd5e2ba4a285' })));
+    }
+    get el() { return this; }
+}, [4, "nv-base"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-base"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-base":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvBaseComponent);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const NvBase = NvBaseComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { NvBase, defineCustomElement };
+
+//# sourceMappingURL=nv-base.js.map

package/dist/components/nv-base.js.map

@@ -0,0 +1 @@
+{"file":"nv-base.js","mappings":";;AAEA,MAAM,OAAO,GAA2B;IACtC,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,QAAQ;IACjB,WAAW,EAAE,WAAW;IACxB,aAAa,EAAE,aAAa;CAC7B,CAAC;MAUW,eAAe;;;;;;;IAQ1B,iBAAiB;QACf,IAAI,CAAC,2BAA2B,EAAE,CAAC;KACpC;IAED,gBAAgB;QACd,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,SAAS;YACpD,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;YACvB,SAAS,CAAC,OAAO,CAAC,QAAQ;gBACxB,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,EAAE;oBAClC,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAqB,CAAC;oBAE9C,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,aAAa;wBACxC,IAAI,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE;4BACtC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;yBAC9C;6BAAM;4BACL,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;yBACjD;qBACF,CAAC,CAAC;iBACJ;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;SACpC;KACF;;;;IAMO,2BAA2B;QACjC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,aAAa;YACxC,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,IAAI,aAAa,GAAG,CAAC,CAAC;YAChE,QAAQ,CAAC,OAAO,CAAC,OAAO;gBACtB,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;aAC/C,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;IAEO,eAAe;QACrB,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YACrC,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;YACrC,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAC/B,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-base/nv-base.tsx"],"sourcesContent":["import { Component, Element, h, Host } from '@stencil/core';\n\nconst classes: Record<string, string> = {\n  'w-full': 'w-full',\n  'wFull': 'w-full',\n  'is-active': 'is-active',\n  'is-selected': 'is-selected',\n};\n\n/**\n * @slot default - render children\n * @deprecated This is only to help with the migration from v2 to v3. It will be removed in the next major release.\n */\n@Component({\n  tag: 'nv-base',\n  shadow: false,\n})\nexport class NvBaseComponent {\n  @Element() el: HTMLNvBaseElement;\n\n  private mutationObserver: MutationObserver;\n\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.applyClassesOnInitialRender();\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(mutations => {\n      console.log(mutations);\n      mutations.forEach(mutation => {\n        if (mutation.type === 'attributes') {\n          const target = mutation.target as HTMLElement;\n\n          Object.keys(classes).forEach(attributeName => {\n            if (target.hasAttribute(attributeName)) {\n              target.classList.add(classes[attributeName]);\n            } else {\n              target.classList.remove(classes[attributeName]);\n            }\n          });\n        }\n      });\n    });\n    this.observeElements();\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  private applyClassesOnInitialRender() {\n    Object.keys(classes).forEach(attributeName => {\n      const elements = this.el.querySelectorAll(`[${attributeName}]`);\n      elements.forEach(element => {\n        element.classList.add(classes[attributeName]);\n      });\n    });\n  }\n\n  private observeElements() {\n    this.mutationObserver.observe(this.el, {\n      attributes: true,\n      attributeFilter: Object.keys(classes),\n      subtree: true,\n    });\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host style={{ display: 'block' }}>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NvButton extends Components.NvButton, HTMLElement {}
+export const NvButton: {
+    prototype: NvButton;
+    new (): NvButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nv-button.js

@@ -0,0 +1,116 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-632bedb8.js';
+import { B as ButtonSize } from './p-a15ddd42.js';
+import { d as defineCustomElement$2 } from './p-8da6d9a3.js';
+
+const nvButtonCss = "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}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}";
+const NvButtonStyle0 = nvButtonCss;
+
+const NvButton$1 = /*@__PURE__*/ proxyCustomElement(class NvButton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.internals = this.attachInternals();
+        //#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 formAssociated() { return true; }
+    get el() { return this; }
+    static get watchers() { return {
+        "loading": ["handleLoadingChange"],
+        "disabled": ["handleDisabledChange"]
+    }; }
+    static get style() { return NvButtonStyle0; }
+}, [68, "nv-button", {
+        "size": [513],
+        "emphasis": [513],
+        "danger": [516],
+        "loading": [1540],
+        "disabled": [1540],
+        "fluid": [516],
+        "type": [513]
+    }, undefined, {
+        "loading": ["handleLoadingChange"],
+        "disabled": ["handleDisabledChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-button", "nv-loader"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvButton$1);
+            }
+            break;
+        case "nv-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const NvButton = NvButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NvButton, defineCustomElement };
+
+//# sourceMappingURL=nv-button.js.map

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

@@ -0,0 +1 @@
+{"file":"nv-button.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,w3QAAw3Q,CAAC;AAC74Q,uBAAe,WAAW;;MCsBbA,UAAQ;;;;;;;;;;;;;;QAoEX,gBAAW,GAAG,CAAC,KAAY;;YACjC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;gBAC1B,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,aAAa,EAAE,CAAC;aACvC;YACD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;gBACzB,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,KAAK,EAAE,CAAC;aAC/B;SACF,CAAC;oBAnE+B,IAAI;wBAQI,MAAM;sBAOpB,KAAK;uBAQb,KAAK;wBAMJ,KAAK;qBAMC,KAAK;oBAQE,QAAQ;;;;;IA+BzC,mBAAmB,CAAC,OAAgB;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;KACzB;IAGD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;SAC9B;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAC1B;KACF;;;;IAMD,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;SAC9B;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACvD,IAAI,CAAC,OAAO,KACX,kEACE,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,GAAG,IAAI,GAAG,IAAI,GACvC,CACd,EAED,6DAAM,IAAI,EAAC,cAAc,GAAQ,EACjC,8DAAa,EACb,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC7B,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvButton"],"sources":["src/components/nv-button/nv-button.scss?tag=nv-button","src/components/nv-button/nv-button.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"../nv-icon/nv-icon.scss\" as icon;\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$button-sizes: (\"xs\", \"sm\", \"md\", \"lg\");\n$button-emphasis: (\"high\", \"medium\", \"low\", \"lower\");\n\n/* Define maps for size-related variables */\n$button-padding-y: (\n  \"xs\": var(--button-xs-padding-y),\n  \"sm\": var(--button-sm-padding-y),\n  \"md\": var(--button-md-padding-y),\n  \"lg\": var(--button-lg-padding-y)\n);\n\n$button-padding-x: (\n  \"xs\": var(--button-xs-padding-x),\n  \"sm\": var(--button-sm-padding-x),\n  \"md\": var(--button-md-padding-x),\n  \"lg\": var(--button-lg-padding-x)\n);\n\n$button-gap: (\n  \"xs\": var(--button-xs-gap),\n  \"sm\": var(--button-sm-gap),\n  \"md\": var(--button-md-gap),\n  \"lg\": var(--button-lg-gap)\n);\n\n$button-border-radius: (\n  \"xs\": var(--button-xs-border-radius),\n  \"sm\": var(--button-sm-border-radius),\n  \"md\": var(--button-md-border-radius),\n  \"lg\": var(--button-lg-border-radius)\n);\n\n$button-line-height: (\n  \"xs\": var(--button-xs-line-height),\n  \"sm\": var(--button-sm-line-height),\n  \"md\": var(--button-md-line-height),\n  \"lg\": var(--button-lg-line-height)\n);\n\n$button-font-size: (\n  \"xs\": var(--button-xs-font-size),\n  \"sm\": var(--button-sm-font-size),\n  \"md\": var(--button-md-font-size),\n  \"lg\": var(--button-lg-font-size)\n);\n\n/* Define maps for emphasis-related variables */\n$components-button-background: (\n  \"high\": var(--components-button-high-background),\n  \"medium\": var(--components-button-medium-background),\n  \"low\": var(--components-button-low-background),\n  \"lower\": var(--components-button-lower-background)\n);\n\n$components-button-border: (\n  \"high\": var(--components-button-high-border),\n  \"medium\": var(--components-button-medium-border),\n  \"low\": var(--components-button-low-border),\n  \"lower\": var(--components-button-lower-border)\n);\n\n$components-button-text: (\n  \"high\": var(--components-button-high-text),\n  \"medium\": var(--components-button-medium-text),\n  \"low\": var(--components-button-low-text),\n  \"lower\": var(--components-button-lower-text)\n);\n\n$components-button-background-hover: (\n  \"high\": var(--components-button-high-background-hover),\n  \"medium\": var(--components-button-medium-background-hover),\n  \"low\": var(--components-button-low-background-hover),\n  \"lower\": var(--components-button-lower-background-hover)\n);\n\n$components-button-text-hover: (\n  \"high\": var(--components-button-high-text-hover),\n  \"medium\": var(--components-button-medium-text-hover),\n  \"low\": var(--components-button-low-text-hover),\n  \"lower\": var(--components-button-lower-text-hover)\n);\n\n@mixin root-styles() {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  font-style: normal;\n  font-weight: var(--font-weight-medium-emphasis);\n  font-family: \"TT Norms Pro\", sans-serif;\n  transition: background-color 150ms ease-out;\n  user-select: none;\n  cursor: pointer;\n  height: fit-content;\n  width: fit-content;\n}\n\n@mixin size-styles($size) {\n  padding: map.get($button-padding-y, $size) map.get($button-padding-x, $size);\n  gap: map.get($button-gap, $size);\n  border-radius: map.get($button-border-radius, $size);\n  line-height: map.get($button-line-height, $size);\n  font-size: map.get($button-font-size, $size);\n\n  & nv-icon > svg {\n    @include icon.icon-size-and-stroke(\n      map.get(map.get(icon.$icon-config, $size), size),\n      map.get(map.get(icon.$icon-config, $size), stroke)\n    );\n  }\n}\n\n@mixin emphasis-styles($emphasis) {\n  background: map.get($components-button-background, $emphasis);\n  border: 1px solid map.get($components-button-border, $emphasis);\n  color: map.get($components-button-text, $emphasis);\n\n  &:hover {\n    background: map.get($components-button-background-hover, $emphasis);\n    border: 1px solid map.get($components-button-border, $emphasis);\n    color: map.get($components-button-text-hover, $emphasis);\n  }\n\n  @include focus-ring();\n\n  &:disabled:not([disabled=\"false\"]) {\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n}\n\n@mixin danger-styles($emphasis) {\n  background: map.get($components-button-background, $emphasis);\n  border: 1px solid map.get($components-button-border, $emphasis);\n  color: map.get($components-button-text, $emphasis);\n\n  &:hover {\n    background: map.get($components-button-background-hover, $emphasis);\n    border: 1px solid map.get($components-button-border, $emphasis);\n    color: map.get($components-button-text-hover, $emphasis);\n  }\n\n  @include focus-ring(var(--color-focus-destructive));\n}\n\n@mixin fluid-styles() {\n  width: 100%;\n}\n\nnv-button {\n  @include root-styles();\n\n  @each $size in $button-sizes {\n    &[size=\"#{$size}\"] {\n      @include size-styles($size);\n    }\n  }\n\n  @each $emphasis in $button-emphasis {\n    &[emphasis=\"#{$emphasis}\"] {\n      @include emphasis-styles($emphasis);\n\n      &[danger]:not([danger=\"false\"]) {\n        @include danger-styles($emphasis);\n      }\n    }\n  }\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include fluid-styles();\n  }\n\n  &[loading]:not([loading=\"false\"]) {\n    [slot=\"leading-icon\"] {\n      display: none;\n    }\n  }\n}\n","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"],"version":3}

package/dist/components/nv-col.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NvCol extends Components.NvCol, HTMLElement {}
+export const NvCol: {
+    prototype: NvCol;
+    new (): NvCol;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nv-col.js

@@ -0,0 +1,57 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-632bedb8.js';
+import { c as clsx } from './p-8a1a6e56.js';
+
+const nvColCss = "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)}";
+const NvColStyle0 = nvColCss;
+
+const NvCol$1 = /*@__PURE__*/ proxyCustomElement(class NvCol extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.size = undefined;
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Get the column size class.
+     * @returns {string | undefined} The column size class.
+     */
+    getColSize() {
+        if (this.size) {
+            if (this.size < 1 || this.size > 12)
+                return;
+            return `w-${this.size}/12`;
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: 'e0caccedd19c02c1854eb48f89302405e2cb0f46', class: clsx(this.getColSize()) }, h("slot", { key: 'a8d672a55a70d6ee551e9ac9e7366455f76aa1e5' })));
+    }
+    static get style() { return NvColStyle0; }
+}, [4, "nv-col", {
+        "size": [514]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-col"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-col":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvCol$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const NvCol = NvCol$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NvCol, defineCustomElement };
+
+//# sourceMappingURL=nv-col.js.map

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

@@ -0,0 +1 @@
+{"file":"nv-col.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,8oBAA8oB,CAAC;AAChqB,oBAAe,QAAQ;;MCUVA,OAAK;;;;;;;;;;;;;IAkBR,UAAU;QAChB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,IAAI,CAAC,IAAI,GAAG,EAAE;gBAAE,OAAO;YAC5C,OAAO,KAAK,IAAI,CAAC,IAAI,KAAK,CAAC;SAC5B;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,IAClC,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvCol"],"sources":["src/components/nv-col/nv-col.scss?tag=nv-col","src/components/nv-col/nv-col.tsx"],"sourcesContent":["@function calculate-width($columns) {\n  $total-columns: 12;\n  @return calc(100% * #{$columns} / #{$total-columns});\n}\n\nnv-col {\n  display: block;\n  flex: 1 1 0%;\n  padding-left: calc(var(--spacing-4) / 2);\n  padding-right: calc(var(--spacing-4) / 2);\n\n  &[class*=\"w-\"] {\n    flex: none;\n  }\n\n  @for $i from 1 through 12 {\n    &.w-#{$i}\\/12 {\n      width: calculate-width($i);\n    }\n  }\n}","import { Component, Host, Prop, h } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * @slot default - The column content.\n */\n@Component({\n  tag: 'nv-col',\n  styleUrl: './nv-col.scss',\n  shadow: false,\n})\nexport class NvCol {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Defines the column size based on a 12 column grid system.\n   */\n  @Prop({ reflect: true })\n  readonly size: number;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Get the column size class.\n   * @returns {string | undefined} The column size class.\n   */\n  private getColSize() {\n    if (this.size) {\n      if (this.size < 1 || this.size > 12) return;\n      return `w-${this.size}/12`;\n    }\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host class={clsx(this.getColSize())}>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-fieldcheckbox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NvFieldcheckbox extends Components.NvFieldcheckbox, HTMLElement {}
+export const NvFieldcheckbox: {
+    prototype: NvFieldcheckbox;
+    new (): NvFieldcheckbox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nv-fieldcheckbox.js

@@ -0,0 +1,128 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-632bedb8.js';
+import { c as clsx } from './p-8a1a6e56.js';
+import { v as v4 } from './p-f5ff676c.js';
+
+const nvFieldcheckboxCss = "nv-fieldcheckbox{--nv-fieldcheckbox-border-default:var(--components-form-field-border-default);--nv-fieldcheckbox-border-hover:var(--components-form-field-border-hover);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-default);--nv-fieldcheckbox-background-default:var(--components-form-field-background-default);--nv-fieldcheckbox-background-checked:var(--components-form-field-background-checked);--nv-fieldcheckbox-background-disabled:var(--components-form-field-background-disabled);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-brand);--nv-fieldcheckbox-color-checked:var(--components-form-shape-foreground-default);--nv-fieldcheckbox-color-disabled:var(--components-form-shape-foreground-disabled);--nv-fieldcheckbox-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-fieldcheckbox:not([disabled],[readonly]) input,nv-fieldcheckbox:not([disabled],[readonly]) label{cursor:pointer}nv-fieldcheckbox.error .input-container{--nv-fieldcheckbox-border-default:var(--components-form-field-border-error);--nv-fieldcheckbox-border-hover:var(--nv-fieldcheckbox-border-default);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-error);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-destructive);--nv-fieldcheckbox-color-disabled:var(--components-form-shape-foreground-disabled-error);--nv-fieldcheckbox-background-checked:var(--components-form-field-background-error);--nv-fieldcheckbox-outline-color:var(--color-focus-destructive)}nv-fieldcheckbox.label-placement-before{flex-direction:row-reverse}nv-fieldcheckbox[disabled]{opacity:0.5}nv-fieldcheckbox label{align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}nv-fieldcheckbox .input-container{position:relative;color:var(--nv-fieldcheckbox-color-checked)}nv-fieldcheckbox .input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-fieldcheckbox-color-disabled)}nv-fieldcheckbox .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-fieldcheckbox-border-default);background:var(--nv-fieldcheckbox-background-default)}nv-fieldcheckbox .input-container input[type=checkbox]:hover{border-color:var(--nv-fieldcheckbox-border-hover)}nv-fieldcheckbox .input-container input[type=checkbox]:focus{border-color:var(--nv-fieldcheckbox-border-focus)}nv-fieldcheckbox .input-container input[type=checkbox]:focus,nv-fieldcheckbox .input-container input[type=checkbox]:focus-within{outline:none}nv-fieldcheckbox .input-container input[type=checkbox]:focus-visible,nv-fieldcheckbox .input-container input[type=checkbox]:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--nv-fieldcheckbox-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldcheckbox .input-container input[type=checkbox]:checked,nv-fieldcheckbox .input-container input[type=checkbox]:indeterminate{background:var(--nv-fieldcheckbox-background-checked);border-color:var(--nv-fieldcheckbox-background-checked)}nv-fieldcheckbox .input-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-fieldcheckbox-background-disabled);border-color:var(--nv-fieldcheckbox-border-default)}nv-fieldcheckbox .input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox .input-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-fieldcheckbox .input-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}nv-fieldcheckbox .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height)}nv-fieldcheckbox .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldcheckbox .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}";
+const NvFieldcheckboxStyle0 = nvFieldcheckboxCss;
+
+const NvFieldcheckbox$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldcheckbox extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.checkedChanged = createEvent(this, "checkedChanged", 7);
+        this.message = undefined;
+        this.validation = undefined;
+        this.labelBefore = false;
+        this.inputId = v4();
+        this.name = undefined;
+        this.value = undefined;
+        this.label = undefined;
+        this.labelPlacement = undefined;
+        this.hideLabel = false;
+        this.description = undefined;
+        this.error = false;
+        this.errorDescription = undefined;
+        this.checked = false;
+        this.indeterminate = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+    }
+    componentWillRender() {
+        if (this.message) {
+            this.description = this.message;
+        }
+        if (this.labelBefore) {
+            this.labelPlacement = 'before';
+        }
+        if (this.validation) {
+            this.errorDescription = this.validation;
+        }
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * Watches for changes to the checked state and emits the new value.
+     * @param {boolean} checked - The new value of the checked state.
+     */
+    onCheckedChanged(checked) {
+        this.checkedChanged.emit(checked);
+    }
+    /**
+     * Listens for the change event on the checkbox input element and updates the
+     * checked state.
+     * @param {Event} event - The change event.
+     */
+    handleChange(event) {
+        const target = event.target;
+        if (target.type === 'checkbox' && target.id === this.inputId) {
+            if (this.readonly || this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            if (this.indeterminate) {
+                this.indeterminate = false;
+            }
+            this.checked = target.checked;
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: 'b927465541957ac5e40c6af190757ac44cf4a104', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("div", { key: 'a8a14a21f274f0ad1ebaecb4af0b6eeee73ad0bd', class: "input-container" }, h("input", { key: '1ca6af28c329360b9b919a65516b1f1573669881', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
+                if (el) {
+                    el.indeterminate = this.indeterminate;
+                }
+            } }), h("span", { key: 'ebdf5ba1086be1fed6c4364557c8c78c1b226333', class: "icon" }, this.checked && !this.indeterminate && (h("slot", { key: '5722e106a2945a670ff93a49203f41dafafc230b', name: "checked-icon" }, h("svg", { key: 'ba9707c495766d7909f2f234f122a5eb1dd975a5', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: 'dea34c4e8dd9857321c1f5625fbb3d5b02aa42ca', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (h("slot", { key: 'd833f4c34381f2579a09049239b467e77f90ac45', name: "indeterminate-icon" }, h("svg", { key: 'c0555c3edaa8eaa841b36d90f2bbd7cee458007d', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: 'c5f4f39e6a4ae2bead864a3945a5f7b6b737f724', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: '986f1a08c34f548675cf6d9872514445a36a07af', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '8a4925c138bc779af8df218c7a4bfaa290e71142', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '514f59b77e90d090b2459aaa65ffdab6e56158fc', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '569e7989c59ffed32610f88a01e75074520884c0', class: "description" }, h("slot", { key: '53eb9d3836b74e99e27a7b0ae6b4e91e6d4b16c6', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'ab1b17a3b93ec09021d16ece7d37bce578d20dcb', hidden: !this.error, class: "error-description" }, h("slot", { key: '7c183b11c038a45b8f5e4a78f268fefe1512b1eb', name: "error-description" }, this.errorDescription))))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "checked": ["onCheckedChanged"]
+    }; }
+    static get style() { return NvFieldcheckboxStyle0; }
+}, [4, "nv-fieldcheckbox", {
+        "message": [1],
+        "validation": [1],
+        "labelBefore": [4, "label-before"],
+        "inputId": [513, "input-id"],
+        "name": [513],
+        "value": [513],
+        "label": [513],
+        "labelPlacement": [1537, "label-placement"],
+        "hideLabel": [516, "hide-label"],
+        "description": [1537],
+        "error": [516],
+        "errorDescription": [1537, "error-description"],
+        "checked": [1540],
+        "indeterminate": [1540],
+        "disabled": [516],
+        "readonly": [516],
+        "required": [516]
+    }, [[0, "change", "handleChange"]], {
+        "checked": ["onCheckedChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-fieldcheckbox"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-fieldcheckbox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvFieldcheckbox$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const NvFieldcheckbox = NvFieldcheckbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NvFieldcheckbox, defineCustomElement };
+
+//# sourceMappingURL=nv-fieldcheckbox.js.map

package/dist/components/nv-fieldcheckbox.js.map

@@ -0,0 +1 @@
+{"file":"nv-fieldcheckbox.js","mappings":"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","names":["NvFieldcheckbox","uuidv4"],"sources":["src/components/nv-fieldcheckbox/nv-fieldcheckbox.scss?tag=nv-fieldcheckbox","src/components/nv-fieldcheckbox/nv-fieldcheckbox.tsx"],"sourcesContent":["@import \"../../styles/focus-ring\";\n\n@mixin fieldcheckbox-variables() {\n  --nv-fieldcheckbox-border-default: var(--components-form-field-border-default);\n  --nv-fieldcheckbox-border-hover: var(--components-form-field-border-hover);\n  --nv-fieldcheckbox-border-focus: var(--components-form-field-border-default);\n  --nv-fieldcheckbox-background-default: var(--components-form-field-background-default);\n  --nv-fieldcheckbox-background-checked: var(--components-form-field-background-checked);\n  --nv-fieldcheckbox-background-disabled: var(--components-form-field-background-disabled);\n  --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-brand);\n  --nv-fieldcheckbox-color-checked: var(--components-form-shape-foreground-default);\n  --nv-fieldcheckbox-color-disabled: var(--components-form-shape-foreground-disabled);\n  --nv-fieldcheckbox-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldcheckbox-error-variables() {\n  --nv-fieldcheckbox-border-default: var(--components-form-field-border-error);\n  --nv-fieldcheckbox-border-hover: var(--nv-fieldcheckbox-border-default);\n  --nv-fieldcheckbox-border-focus: var(--components-form-field-border-error);\n  --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-destructive);\n  --nv-fieldcheckbox-color-disabled: var(--components-form-shape-foreground-disabled-error);\n  --nv-fieldcheckbox-background-checked: var(--components-form-field-background-error);\n  --nv-fieldcheckbox-outline-color: var(--color-focus-destructive);\n}\n\n@mixin root-styles() {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--form-gap-x);\n  position: relative;\n\n  &:not([disabled], [readonly]) {\n    input,\n    label {\n      cursor: pointer;\n    }\n  }\n}\n\n@mixin label-before-styles() {\n  flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: var(--form-label-font-weight);\n  line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  font-weight: var(--form-description-font-weight);\n  line-height: var(--form-description-line-height);\n}\n\n@mixin error-description-styles() {\n  @include description-styles();\n\n  color: var(--components-form-text-description-error);\n}\n\n@mixin text-container-styles() {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n  position: relative;\n  color: var(--nv-fieldcheckbox-color-checked);\n\n  input[type=checkbox][readonly] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n\n  &:has(input[type=\"checkbox\"]:disabled:not([readonly])) {\n    color: var(--nv-fieldcheckbox-color-disabled);\n  }\n}\n\n@mixin input-styles() {\n  appearance: none;\n  position: relative;\n  display: flex;\n  width: var(--form-checkbox-size);\n  height: var(--form-checkbox-size);\n  flex-direction: column;\n  align-items: flex-start;\n  border-radius: var(--form-checkbox-radius);\n  border-width: var(--form-checkbox-border-width);\n  border-style: solid;\n  border-color: var(--nv-fieldcheckbox-border-default);\n  background: var(--nv-fieldcheckbox-background-default);\n\n  &:hover {\n    border-color: var(--nv-fieldcheckbox-border-hover);\n  }\n\n  &:focus {\n    border-color: var(--nv-fieldcheckbox-border-focus);\n  }\n\n  @include focus-ring(var(--nv-fieldcheckbox-outline-color));\n\n  &:checked,\n  &:indeterminate {\n    background: var(--nv-fieldcheckbox-background-checked);\n    border-color: var(--nv-fieldcheckbox-background-checked);\n  }\n\n  &:disabled:not([readonly]) {\n    background: var(--nv-fieldcheckbox-background-disabled);\n    border-color: var(--nv-fieldcheckbox-border-default);\n  }\n\n  &[readonly] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n}\n\n@mixin icon-styles() {\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    width: var(--form-checkbox-icon-size);\n    height: var(--form-checkbox-icon-size);\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: var(--form-checkbox-icon-stroke);\n    flex-shrink: 0;\n  }\n}\n\nnv-fieldcheckbox {\n  @include fieldcheckbox-variables();\n  @include root-styles();\n\n  &.error .input-container {\n    @include fieldcheckbox-error-variables();\n  }\n\n  &.label-placement-before {\n    @include label-before-styles();\n  }\n  &[disabled] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n  label {\n    @include label-styles();\n  }\n\n  .input-container {\n    @include input-container-styles();\n\n    input[type=\"checkbox\"] {\n      @include input-styles();\n    }\n\n    .icon {\n      @include icon-styles();\n    }\n  }\n\n  .description {\n    @include description-styles();\n  }\n\n  .error-description {\n    @include error-description-styles();\n  }\n\n  .text-container {\n    @include text-container-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type FieldLabelPlacement } from '../../utils/constants';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n * @slot checked-icon - Content to be placed as the checked icon, will override the checkedIcon prop.\n * @slot indeterminate-icon - Content to be placed as the indeterminate icon, will override the indeterminateIcon prop.\n */\n@Component({\n  tag: 'nv-fieldcheckbox',\n  styleUrl: 'nv-fieldcheckbox.scss',\n  shadow: false,\n})\nexport class NvFieldcheckbox {\n  @Element() el!: HTMLNvFieldcheckboxElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message define a 'hint ' message for the Field.\n   * @deprecated Use `description` instead.\n   * */\n  @Prop()\n  readonly message?: string;\n\n  /**\n   * The text for the validation message.\n   * @deprecated Use `errorDescription` instead.\n   * */\n  @Prop()\n  readonly validation?: string;\n\n  /**\n   * When true, the label will be placed before the checkbox.\n   * @deprecated Use `labelPlacement = end` instead.\n   * */\n  @Prop()\n  readonly labelBefore?: boolean = false;\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.labelBefore) {\n      this.labelPlacement = 'before';\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * The name attribute for the checkbox input, used to reference the form data\n   * after submission.\n   */\n  @Prop({ reflect: true })\n  readonly name?: string;\n\n  /**\n   * The value attribute of the checkbox input, representing the value sent on\n   * form submission when the checkbox is checked. When the form is submitted,\n   * the data will consist of a name=value pair.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * The label displayed next to the checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * Determines the position of the label relative to the checkbox, either\n   * 'start' (before) or 'end' (after).\n   */\n  @Prop({ reflect: true, mutable: true })\n  labelPlacement: `${FieldLabelPlacement}`;\n\n  /**\n   * Hides the label visually while still keeping it available for screen\n   * readers.\n   */\n  @Prop({ reflect: true })\n  readonly hideLabel: boolean = false;\n\n  /**\n   * A description providing additional context or information about the\n   * checkbox.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description?: string;\n\n  /**\n   * Signals that there is an error associated with the checkbox, which can\n   * trigger visual cues.\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the checkbox.\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription?: string;\n\n  /**\n   * Indicates whether the checkbox is checked or not.\n   */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /**\n   * Indicates whether the checkbox is in an indeterminate state, typically used\n   * for hierarchical checkboxes.\n   */\n  @Prop({ reflect: true, mutable: true })\n  indeterminate: boolean = false;\n\n  /**\n   * Disables the checkbox, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the checkbox to read-only, preventing user changes but still allowing\n   * focus and selection of text.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the checkbox as required, indicating that it must be checked for\n   * form submission.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event()\n  checkedChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  onCheckedChanged(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  /**\n   * Listens for the change event on the checkbox input element and updates the\n   * checked state.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target.type === 'checkbox' && target.id === this.inputId) {\n      if (this.readonly || this.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      if (this.indeterminate) {\n        this.indeterminate = false;\n      }\n\n      this.checked = target.checked;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n          this.error && 'error',\n        )}\n      >\n        <div class=\"input-container\">\n          <input\n            type=\"checkbox\"\n            id={this.inputId}\n            name={this.name}\n            autocomplete=\"off\"\n            value={this.value}\n            checked={Boolean(this.checked)}\n            disabled={this.disabled || this.readonly}\n            readonly={this.readonly && !this.required}\n            required={this.required}\n            indeterminate={this.indeterminate}\n            ref={el => {\n              if (el) {\n                el.indeterminate = this.indeterminate;\n              }\n            }}\n          />\n          <span class=\"icon\">\n            {this.checked && !this.indeterminate && (\n              <slot name=\"checked-icon\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M11.6667 3.5L5.25004 9.91667L2.33337 7\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </slot>\n            )}\n            {this.indeterminate && (\n              <slot name=\"indeterminate-icon\">\n                <svg\n                  class=\"indeterminate-svg\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M2.9165 7H11.0832\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </slot>\n            )}\n          </span>\n        </div>\n\n        <div class=\"text-container\">\n          {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n            <label\n              htmlFor={this.inputId}\n              class={clsx(this.hideLabel && 'visually-hidden')}\n            >\n              <slot name=\"label\">{this.label}</slot>\n            </label>\n          )}\n\n          {(this.description ||\n            this.el.querySelector('[slot=\"description\"]')) && (\n            <div class=\"description\">\n              <slot name=\"description\">{this.description}</slot>\n            </div>\n          )}\n\n          {(this.errorDescription ||\n            this.el.querySelector('[slot=\"error-description\"]')) && (\n            <div hidden={!this.error} class=\"error-description\">\n              <slot name=\"error-description\">{this.errorDescription}</slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-fieldnumber.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NvFieldnumber extends Components.NvFieldnumber, HTMLElement {}
+export const NvFieldnumber: {
+    prototype: NvFieldnumber;
+    new (): NvFieldnumber;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;