@nova-design-system/nova-webcomponents 3.0.0-beta.28 → 3.0.0-beta.30

package/dist/components/nv-tablecolumn.js

@@ -17,7 +17,7 @@ const NvTablecolumn$1 = /*@__PURE__*/ proxyCustomElement(class NvTablecolumn ext
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '9e3e12375467e02e9e964b3f008aaee842704132' }, h("th", { key: '9e4ee5f486d53a6200bd73652d35783da9d56eae', abbr: this.abbr, colSpan: this.colspan, headers: this.headers, rowSpan: this.rowspan, scope: this.scope }, h("slot", { key: 'b59a867f3fad0e30e475f730aaaf482564969807' }))));
+        return (h(Host, { key: '9ddb6d1bacf5e5697236330936540232c6406879' }, h("th", { key: '9cc2015b34d973a6d54061a00b8bb21b1833f7d7', abbr: this.abbr, colSpan: this.colspan, headers: this.headers, rowSpan: this.rowspan, scope: this.scope }, h("slot", { key: '486abb79f2a0b1f4cd9f1f8bcb3c49c12a35eb2e' }))));
     }
     static get style() { return NvTablecolumnStyle0; }
 }, [4, "nv-tablecolumn", {

package/dist/components/nv-tabledatacell.js

@@ -15,7 +15,7 @@ const NvTabledatacell$1 = /*@__PURE__*/ proxyCustomElement(class NvTabledatacell
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '2b8dd0b288e8771055c061f42bae406e35618394' }, h("td", { key: '4c77b5ddb3e992816a9f74097b184cf0a4299a1d', colSpan: this.colspan, rowSpan: this.rowspan, headers: this.headers }, h("slot", { key: '9698292b649e85f9d1a6578ae6b6166c33594eab' }))));
+        return (h(Host, { key: 'abee360bdf041cea3cfbc658a24ba0b45b694fad' }, h("td", { key: '9da91e1495dc943dad94380b5233dac9dcc340d8', colSpan: this.colspan, rowSpan: this.rowspan, headers: this.headers }, h("slot", { key: '57cfd771f065dcc70b9686fbc03f46a86b39bdc7' }))));
     }
     static get style() { return NvTabledatacellStyle0; }
 }, [4, "nv-tabledatacell", {

package/dist/components/nv-tablehead.js

@@ -11,7 +11,7 @@ const NvTablehead$1 = /*@__PURE__*/ proxyCustomElement(class NvTablehead extends
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '664bc779e57e372c4939f34e79be34672c701b9b' }, h("thead", { key: '772dfe48aea949fa05229f036589947dcf097992' }, h("slot", { key: 'bc76551105f0f0dfb4d6639bbe5b304b5b824328' }))));
+        return (h(Host, { key: '12149e94ecec13e7cc4711cdd86dad480a6f80dc' }, h("thead", { key: '3083c897b49ac72a0758a2c78efa10b64a90a4ee' }, h("slot", { key: 'd40f3b40723b2bbed4c5c1fd800a0442ab094eea' }))));
     }
     static get style() { return NvTableheadStyle0; }
 }, [4, "nv-tablehead"]);

package/dist/components/nv-tablerow.js

@@ -11,7 +11,7 @@ const NvTablerow$1 = /*@__PURE__*/ proxyCustomElement(class NvTablerow extends H
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '2b24e970bb04d2ce5e9a95a136127fbdaa84a677' }, h("tr", { key: 'd6c6a5ca230a5282a152db23885f200c04c43be4' }, h("slot", { key: '84d7b5452772f4ff37e481fa14bd28b25cb0fd77' }))));
+        return (h(Host, { key: 'acb4cbd0903238ff07d45d556123278e9fddb800' }, h("tr", { key: 'a2d47ed6d31e1d84cfe0c055dc50c9e32de41286' }, h("slot", { key: '7bd7354523db2f45b8db3a78d32b6b26afc136ed' }))));
     }
     static get style() { return NvTablerowStyle0; }
 }, [4, "nv-tablerow"]);

package/dist/components/nv-tooltip.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-d506ae63.js';
-import { d as defineCustomElement$2 } from './p-89fb6636.js';
+import { d as defineCustomElement$2 } from './p-d5dd3def.js';
 
 const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip [data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
 const NvTooltipStyle0 = nvTooltipCss;
@@ -24,7 +24,7 @@ const NvTooltip$1 = /*@__PURE__*/ proxyCustomElement(class NvTooltip extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '590d897c7012f9020f6ac6e9f49acb840b4067ca' }, h("slot", { key: '9479477482e361a042d464311a90dc3b0babb9e5' }), h("nv-popover", { key: '89a2903946a89074201b5eb61a64b0595d831512', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: '5a6097b56440b06c33b20d5c06054f6aad9c9a42', slot: "content" }, this.message), h("slot", { key: '595f1185183da50e916b243276c38a10a84e5712', name: "content" }))));
+        return (h(Host, { key: 'f2a8c20a32c58f486c6ab3910947274c6c9307e3' }, h("slot", { key: '0dd69aa01fa88f5640128014145a3dfe27cb6a11' }), h("nv-popover", { key: 'f11b6473623a6223903c7bec2344af00c5952814', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: 'ca4426091740d7491f92aebaea090ff109a09436', slot: "content" }, this.message), h("slot", { key: '94abaf31618c29d02439493f7628c7886c7d4ec0', name: "content" }))));
     }
     get el() { return this; }
     static get style() { return NvTooltipStyle0; }

package/dist/components/p-5ce661bd.js

@@ -0,0 +1,125 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-d506ae63.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 = /*@__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: 'c87c2b3e3a4b81c9d6eb6c3784919a5fcb78e38b', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("div", { key: '8e43a91fec01b02dfa6b27408e1c1fd252558014', class: "input-container" }, h("input", { key: 'bffbfc1ac879fb70e1c7b436c3a9845150b78bca', 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: 'b100feee33694f72c59496f09f5ecbbf9358d7c6', class: "icon" }, this.checked && !this.indeterminate && (h("slot", { key: 'a5f5159aff04c111e4b944123686f00f817ecb1e', name: "checked-icon" }, h("svg", { key: '26a750b600fa0857ec9adf17f9d4dcd9ce0e2aad', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: 'ddf0155de05297d7ec966bdaf9633ceb1ee413d7', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (h("slot", { key: 'e64681ce70326348083402f7996eaf6134aaca3e', name: "indeterminate-icon" }, h("svg", { key: '9cfcd8118bb6f208278614711fd726fe29c9070a', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: '8d88be8c4bd195982bf0024e4f67f30601ddfb80', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: '061d18d589ef2a8efd0fb73f70d5c0a6013c497d', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '129013f8e60d1aaae82b97321c4cc26ab6229bbb', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: 'e134c0683e4c4c410c78d45f3537d8ed1491c67e', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '78166f4fb7d1e5dc20f13ce5b4ca567a90862493', class: "description" }, h("slot", { key: '6bced15913e4a22371520818343de5598c5a5e6d', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '88f4ceaef2412ce5f4bb08b19485fc27d9842792', hidden: !this.error, class: "error-description" }, h("slot", { key: '96a581ce5d0e66416d24bf52219a87d3c39457d8', 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() {
+    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);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { NvFieldcheckbox as N, defineCustomElement as d };
+
+//# sourceMappingURL=p-5ce661bd.js.map

package/dist/components/p-5ce661bd.js.map

@@ -0,0 +1 @@
+{"file":"p-5ce661bd.js","mappings":"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","names":["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/{p-45c63143.js → p-8bec002e.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-d506ae63.js';
 import { c as clsx } from './p-8a1a6e56.js';
-import { d as defineCustomElement$2 } from './p-689a7b38.js';
-import { d as defineCustomElement$1 } from './p-8c8cf8ea.js';
+import { d as defineCustomElement$2 } from './p-d70df149.js';
+import { d as defineCustomElement$1 } from './p-a1aa8970.js';
 
 const nvIconbuttonCss = "nv-iconbutton.root{display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:500;font-family:\"TT Norms Pro\", sans-serif;transition:background-color 150ms ease-out;height:fit-content;width:fit-content}nv-iconbutton.size-xs{padding:var(--button-xs-icon-button-padding);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size)}nv-iconbutton.size-sm{padding:var(--button-sm-icon-button-padding);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size)}nv-iconbutton.size-md{padding:var(--button-md-icon-button-padding);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size)}nv-iconbutton.size-lg{padding:var(--button-lg-icon-button-padding);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size)}nv-iconbutton.emphasis-high{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-iconbutton.emphasis-high:hover{background:var(--components-button-high-background-hover);color:var(--components-button-high-text-hover)}nv-iconbutton.emphasis-high:focus,nv-iconbutton.emphasis-high:focus-within{outline:none}nv-iconbutton.emphasis-high:focus-visible,nv-iconbutton.emphasis-high:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-high:disabled{background:var(--components-button-high-background);color:var(--components-button-high-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-high nv-icon>svg{color:var(--components-button-high-icon)}nv-iconbutton.emphasis-medium{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-iconbutton.emphasis-medium:hover{background:var(--components-button-medium-background-hover);color:var(--components-button-medium-text-hover)}nv-iconbutton.emphasis-medium:focus,nv-iconbutton.emphasis-medium:focus-within{outline:none}nv-iconbutton.emphasis-medium:focus-visible,nv-iconbutton.emphasis-medium:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-medium:disabled{background:var(--components-button-medium-background);color:var(--components-button-medium-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-medium nv-icon>svg{color:var(--components-button-medium-icon)}nv-iconbutton.emphasis-low{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-iconbutton.emphasis-low:hover{background:var(--components-button-low-background-hover);color:var(--components-button-low-text-hover)}nv-iconbutton.emphasis-low:focus,nv-iconbutton.emphasis-low:focus-within{outline:none}nv-iconbutton.emphasis-low:focus-visible,nv-iconbutton.emphasis-low:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-low:disabled{background:var(--components-button-low-background);color:var(--components-button-low-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-low nv-icon>svg{color:var(--components-button-low-icon)}nv-iconbutton.emphasis-lower{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-iconbutton.emphasis-lower:hover{background:var(--components-button-lower-background-hover);color:var(--components-button-lower-text-hover)}nv-iconbutton.emphasis-lower:focus,nv-iconbutton.emphasis-lower:focus-within{outline:none}nv-iconbutton.emphasis-lower:focus-visible,nv-iconbutton.emphasis-lower:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-lower:disabled{background:var(--components-button-lower-background);color:var(--components-button-lower-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-lower nv-icon>svg{color:var(--components-button-lower-icon)}nv-iconbutton.loading [slot=leading-icon]{display:none}nv-iconbutton.shape-rounded{border-radius:var(--radius-rounded-full)}";
 const NvIconbuttonStyle0 = nvIconbuttonCss;
@@ -69,7 +69,7 @@ const NvIconbutton = /*@__PURE__*/ proxyCustomElement(class NvIconbutton extends
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '7d785e95270a8ebcf303a345a887005774295ee6', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && h("nv-loader", { key: '028836989901ce6f625f325d368c661b31477e62', size: this.size }), !this.loading && h("nv-icon", { key: '5184638cc9dd4550c65eca5b2492806e5e77e43e', name: this.name, size: this.size }), h("slot", { key: '36ab315cb2ac6741c4debb5bfa84eb2e05e3abc8' })));
+        return (h(Host, { key: '5c4107ececbf6252efbf033882481c793aebfadb', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && h("nv-loader", { key: 'd9ba86fb063f9bf3d6d6d95949222fcd4bf07da5', size: this.size }), !this.loading && h("nv-icon", { key: '4fc7acc39c5dbb5bb668445f6427a28f767d8a0b', name: this.name, size: this.size }), h("slot", { key: '21b8444e3e4f4d5f0f4b9b12f7edc2d6ec48ea80' })));
     }
     static get formAssociated() { return true; }
     get el() { return this; }
@@ -118,4 +118,4 @@ defineCustomElement();
 
 export { NvIconbutton as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-45c63143.js.map
+//# sourceMappingURL=p-8bec002e.js.map

package/dist/components/{p-45c63143.js.map → p-8bec002e.js.map}

@@ -1 +1 @@
-{"file":"p-45c63143.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,8nJAA8nJ,CAAC;AACvpJ,2BAAe,eAAe;;MCuBjB,YAAY;;;;;;;;;;;;;;QA8Ef,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;oBA7E+B,IAAI;wBAQI,MAAM;uBAU5B,KAAK;wBAMJ,KAAK;sBAOE,KAAK;;oBAgBC,QAAQ;qBAMF,QAAQ;;;;;IA+B/C,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,qDACH,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAC,GAAG,EACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,SAAS,EAC1C,KAAK,EAAE,IAAI,CACT,MAAM,EACN,QAAQ,IAAI,CAAC,IAAI,EAAE,EACnB,YAAY,IAAI,CAAC,QAAQ,EAAE,EAC3B,IAAI,CAAC,OAAO,IAAI,SAAS,EACzB,SAAS,IAAI,CAAC,KAAK,EAAE,CACtB,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,OAAO,IAAI,kEAAW,IAAI,EAAE,IAAI,CAAC,IAAI,GAAc,EAExD,CAAC,IAAI,CAAC,OAAO,IAAI,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EAE/D,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-iconbutton/nv-iconbutton.scss?tag=nv-iconbutton","src/components/nv-iconbutton/nv-iconbutton.tsx"],"sourcesContent":["@use \"sass:map\";\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-icon-button-padding: (\n  \"xs\": var(--button-xs-icon-button-padding),\n  \"sm\": var(--button-sm-icon-button-padding),\n  \"md\": var(--button-md-icon-button-padding),\n  \"lg\": var(--button-lg-icon-button-padding)\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$components-button-icon: (\n  \"high\": var(--components-button-high-icon),\n  \"medium\": var(--components-button-medium-icon),\n  \"low\": var(--components-button-low-icon),\n  \"lower\": var(--components-button-lower-icon)\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: 500;\n  font-family: \"TT Norms Pro\", sans-serif;\n  transition: background-color 150ms ease-out;\n  height: fit-content;\n  width: fit-content;\n}\n\n@mixin size-styles($size) {\n  padding: map.get($button-icon-button-padding, $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\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    color: map.get($components-button-text-hover, $emphasis);\n  }\n\n  @include focus-ring();\n\n  &:disabled {\n    background: map.get($components-button-background, $emphasis);\n    color: map.get($components-button-text, $emphasis);\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  & nv-icon > svg {\n    color: map.get($components-button-icon, $emphasis);\n  }\n}\n\nnv-iconbutton {\n  &.root {\n    @include root-styles();\n  }\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  }\n\n  &.loading {\n    [slot=\"leading-icon\"] {\n      display: none;\n    }\n  }\n\n  &.shape-rounded {\n    border-radius: var(--radius-rounded-full);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Content of the button.\n */\n@Component({\n  tag: 'nv-iconbutton',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-iconbutton.scss',\n  scoped: false,\n})\nexport class NvIconbutton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvIconbuttonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button’s emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities. The icon is not displayed when the button\n   * is loading. Also, the button is disabled. If you want to disable the\n   * button, it is not possible. It is automatically disabled when loading.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ mutable: true, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Makes the button look active when it’s within a compatible component\n   * like a button group.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Choose the icon you want to display. This also sets the aria-label for\n   * improved accessibility, helping users who rely on screen readers.\n   * The icon is not displayed when the button is loading.\n   */\n  @Prop({ reflect: true })\n  readonly name: `${IconName}` | string;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn’t interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  /**\n   * Sets the shape of the button. Choose between square and rounded.\n   */\n  @Prop({ reflect: true })\n  readonly shape: 'square' | 'rounded' = 'square';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles form-related actions when the button is clicked.\n   * - Submits the form if the button type is 'submit'.\n   * - Resets the form if the button type is 'reset'.\n   * @param {Event} event - The click event.\n   */\n  private handleClick = (event: Event) => {\n    if (this.loading || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (this.type === 'submit') {\n      this.internals?.form?.requestSubmit();\n    }\n    if (this.type === 'reset') {\n      this.internals?.form?.reset();\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"button\"\n        type={this.type}\n        tabindex=\"0\"\n        disabled={this.disabled ? true : undefined}\n        class={clsx(\n          'root',\n          `size-${this.size}`,\n          `emphasis-${this.emphasis}`,\n          this.loading && 'loading',\n          `shape-${this.shape}`,\n        )}\n        onClick={this.handleClick}\n      >\n        {this.loading && <nv-loader size={this.size}></nv-loader>}\n\n        {!this.loading && <nv-icon name={this.name} size={this.size} />}\n\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"p-8bec002e.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,8nJAA8nJ,CAAC;AACvpJ,2BAAe,eAAe;;MCuBjB,YAAY;;;;;;;;;;;;;;QA8Ef,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;oBA7E+B,IAAI;wBAQI,MAAM;uBAU5B,KAAK;wBAMJ,KAAK;sBAOE,KAAK;;oBAgBC,QAAQ;qBAMF,QAAQ;;;;;IA+B/C,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,qDACH,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAC,GAAG,EACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,SAAS,EAC1C,KAAK,EAAE,IAAI,CACT,MAAM,EACN,QAAQ,IAAI,CAAC,IAAI,EAAE,EACnB,YAAY,IAAI,CAAC,QAAQ,EAAE,EAC3B,IAAI,CAAC,OAAO,IAAI,SAAS,EACzB,SAAS,IAAI,CAAC,KAAK,EAAE,CACtB,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,OAAO,IAAI,kEAAW,IAAI,EAAE,IAAI,CAAC,IAAI,GAAc,EAExD,CAAC,IAAI,CAAC,OAAO,IAAI,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EAE/D,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-iconbutton/nv-iconbutton.scss?tag=nv-iconbutton","src/components/nv-iconbutton/nv-iconbutton.tsx"],"sourcesContent":["@use \"sass:map\";\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-icon-button-padding: (\n  \"xs\": var(--button-xs-icon-button-padding),\n  \"sm\": var(--button-sm-icon-button-padding),\n  \"md\": var(--button-md-icon-button-padding),\n  \"lg\": var(--button-lg-icon-button-padding)\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$components-button-icon: (\n  \"high\": var(--components-button-high-icon),\n  \"medium\": var(--components-button-medium-icon),\n  \"low\": var(--components-button-low-icon),\n  \"lower\": var(--components-button-lower-icon)\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: 500;\n  font-family: \"TT Norms Pro\", sans-serif;\n  transition: background-color 150ms ease-out;\n  height: fit-content;\n  width: fit-content;\n}\n\n@mixin size-styles($size) {\n  padding: map.get($button-icon-button-padding, $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\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    color: map.get($components-button-text-hover, $emphasis);\n  }\n\n  @include focus-ring();\n\n  &:disabled {\n    background: map.get($components-button-background, $emphasis);\n    color: map.get($components-button-text, $emphasis);\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  & nv-icon > svg {\n    color: map.get($components-button-icon, $emphasis);\n  }\n}\n\nnv-iconbutton {\n  &.root {\n    @include root-styles();\n  }\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  }\n\n  &.loading {\n    [slot=\"leading-icon\"] {\n      display: none;\n    }\n  }\n\n  &.shape-rounded {\n    border-radius: var(--radius-rounded-full);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Content of the button.\n */\n@Component({\n  tag: 'nv-iconbutton',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-iconbutton.scss',\n  scoped: false,\n})\nexport class NvIconbutton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvIconbuttonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button’s emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities. The icon is not displayed when the button\n   * is loading. Also, the button is disabled. If you want to disable the\n   * button, it is not possible. It is automatically disabled when loading.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ mutable: true, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Makes the button look active when it’s within a compatible component\n   * like a button group.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Choose the icon you want to display. This also sets the aria-label for\n   * improved accessibility, helping users who rely on screen readers.\n   * The icon is not displayed when the button is loading.\n   */\n  @Prop({ reflect: true })\n  readonly name: `${IconName}` | string;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn’t interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  /**\n   * Sets the shape of the button. Choose between square and rounded.\n   */\n  @Prop({ reflect: true })\n  readonly shape: 'square' | 'rounded' = 'square';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles form-related actions when the button is clicked.\n   * - Submits the form if the button type is 'submit'.\n   * - Resets the form if the button type is 'reset'.\n   * @param {Event} event - The click event.\n   */\n  private handleClick = (event: Event) => {\n    if (this.loading || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (this.type === 'submit') {\n      this.internals?.form?.requestSubmit();\n    }\n    if (this.type === 'reset') {\n      this.internals?.form?.reset();\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"button\"\n        type={this.type}\n        tabindex=\"0\"\n        disabled={this.disabled ? true : undefined}\n        class={clsx(\n          'root',\n          `size-${this.size}`,\n          `emphasis-${this.emphasis}`,\n          this.loading && 'loading',\n          `shape-${this.shape}`,\n        )}\n        onClick={this.handleClick}\n      >\n        {this.loading && <nv-loader size={this.size}></nv-loader>}\n\n        {!this.loading && <nv-icon name={this.name} size={this.size} />}\n\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-8c8cf8ea.js → p-a1aa8970.js}

@@ -16,7 +16,7 @@ const NvLoader = /*@__PURE__*/ proxyCustomElement(class NvLoader extends H {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (h(Host, { key: '9d70fed6bfe41c8e1a87bd7eb2d83a1bb6af69ab', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (h(Host, { key: '442187ad4ad5deaa2880a67c9fddf2b2e38d517d', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
     static get style() { return NvLoaderStyle0; }
 }, [0, "nv-loader", {
@@ -40,4 +40,4 @@ defineCustomElement();
 
 export { NvLoader as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-8c8cf8ea.js.map
+//# sourceMappingURL=p-a1aa8970.js.map

package/dist/components/{p-8c8cf8ea.js.map → p-a1aa8970.js.map}

@@ -1 +1 @@
-{"file":"p-8c8cf8ea.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,qoHAAqoH,CAAC;AAC1pH,uBAAe,WAAW;;MCSb,QAAQ;;;;oBAUiB,IAAI;;;;;;;IAexC,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,IAAI,IAAI,QAAQ,IAAI,CAAC,IAAI,EAAE,EAChC,IAAI,CAAC,KAAK,IAAI,SAAS,IAAI,CAAC,KAAK,EAAE,CACpC,GACK,EACR;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-loader/nv-loader.scss?tag=nv-loader","src/components/nv-loader/nv-loader.tsx"],"sourcesContent":["@use \"sass:map\";\n\n/* Variants */\n$loader-sizes: (\"xs\", \"sm\", \"md\", \"lg\", \"xl\");\n$loader-color: (\"brand\", \"white\");\n\n/* Define maps for color-related variables */\n$components-loader-background: (\n  \"brand\": var(--components-loader-brand-background),\n  \"white\": var(--components-loader-white-background)\n);\n\n$components-loader-foreground: (\n  \"brand\": var(--components-loader-brand-foreground),\n  \"white\": var(--components-loader-white-foreground)\n);\n\n/* Define maps for size-related variables */\n$components-loader-size: (\n  \"xs\": var(--loader-size-xs),\n  \"sm\": var(--loader-size-sm),\n  \"md\": var(--loader-size-md),\n  \"lg\": var(--loader-size-lg),\n  \"xl\": var(--loader-size-xl)\n);\n\n@mixin root-styles() {\n  display: inline-block;\n  position: relative;\n  aspect-ratio: 1 / 1;\n  border-radius: 9999px;\n  color: inherit;\n}\n\n@mixin size-styles($size) {\n  $loader-size: map.get($components-loader-size, $size);\n  $border-size: calc($loader-size / 10);\n\n  width: $loader-size;\n  height: $loader-size;\n\n  &::before,\n  &::after {\n    content: \" \";\n    position: absolute;\n    top: 0;\n    left: 0;\n    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n  }\n\n  &::before {\n    content: \" \";\n    border: $border-size solid;\n    opacity: 0.3;\n  }\n\n  &::after {\n    content: \" \";\n    border-top: $border-size solid transparent;\n    border-left: $border-size solid transparent;\n    border-right: $border-size solid transparent;\n    border-bottom: $border-size solid;\n    animation: rotation 1s linear infinite;\n  }\n}\n\n@mixin color-styles($color) {\n  &::before {\n    border-color: map.get($components-loader-background, $color);\n    opacity: 1;\n  }\n\n  &::after {\n    border-bottom-color: map.get($components-loader-foreground, $color);\n  }\n}\n\n@keyframes rotation {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\nnv-loader {\n  @include root-styles();\n\n  @each $size in $loader-sizes {\n    &.size-#{$size} {\n      @include size-styles($size);\n    }\n  }\n\n  @each $color in $loader-color {\n    &.color-#{$color} {\n      @include color-styles($color);\n    }\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { SemanticSizes, LoaderColors } from '../../utils/constants';\n\n@Component({\n  tag: 'nv-loader',\n  styleUrl: 'nv-loader.scss',\n  shadow: false,\n})\nexport class NvLoader {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Choose the size of the loader to best fit your application’s needs, whether\n   * it’s a small spinner for subtle loading indicators or a large one for more\n   * prominent displays.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${SemanticSizes}` = 'md';\n\n  /**\n   * Choose the color of the loader. Options are primary and white to keep the\n   * design consistent and ensure the loader stands out or blends in\n   * appropriately with your application’s interface.\n   */\n  @Prop({ reflect: true })\n  readonly color: `${LoaderColors}`;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  /* <slot> empty to force rendering change */\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.size && `size-${this.size}`,\n          this.color && `color-${this.color}`,\n        )}\n      ></Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"p-a1aa8970.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,qoHAAqoH,CAAC;AAC1pH,uBAAe,WAAW;;MCSb,QAAQ;;;;oBAUiB,IAAI;;;;;;;IAexC,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,IAAI,IAAI,QAAQ,IAAI,CAAC,IAAI,EAAE,EAChC,IAAI,CAAC,KAAK,IAAI,SAAS,IAAI,CAAC,KAAK,EAAE,CACpC,GACK,EACR;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-loader/nv-loader.scss?tag=nv-loader","src/components/nv-loader/nv-loader.tsx"],"sourcesContent":["@use \"sass:map\";\n\n/* Variants */\n$loader-sizes: (\"xs\", \"sm\", \"md\", \"lg\", \"xl\");\n$loader-color: (\"brand\", \"white\");\n\n/* Define maps for color-related variables */\n$components-loader-background: (\n  \"brand\": var(--components-loader-brand-background),\n  \"white\": var(--components-loader-white-background)\n);\n\n$components-loader-foreground: (\n  \"brand\": var(--components-loader-brand-foreground),\n  \"white\": var(--components-loader-white-foreground)\n);\n\n/* Define maps for size-related variables */\n$components-loader-size: (\n  \"xs\": var(--loader-size-xs),\n  \"sm\": var(--loader-size-sm),\n  \"md\": var(--loader-size-md),\n  \"lg\": var(--loader-size-lg),\n  \"xl\": var(--loader-size-xl)\n);\n\n@mixin root-styles() {\n  display: inline-block;\n  position: relative;\n  aspect-ratio: 1 / 1;\n  border-radius: 9999px;\n  color: inherit;\n}\n\n@mixin size-styles($size) {\n  $loader-size: map.get($components-loader-size, $size);\n  $border-size: calc($loader-size / 10);\n\n  width: $loader-size;\n  height: $loader-size;\n\n  &::before,\n  &::after {\n    content: \" \";\n    position: absolute;\n    top: 0;\n    left: 0;\n    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n  }\n\n  &::before {\n    content: \" \";\n    border: $border-size solid;\n    opacity: 0.3;\n  }\n\n  &::after {\n    content: \" \";\n    border-top: $border-size solid transparent;\n    border-left: $border-size solid transparent;\n    border-right: $border-size solid transparent;\n    border-bottom: $border-size solid;\n    animation: rotation 1s linear infinite;\n  }\n}\n\n@mixin color-styles($color) {\n  &::before {\n    border-color: map.get($components-loader-background, $color);\n    opacity: 1;\n  }\n\n  &::after {\n    border-bottom-color: map.get($components-loader-foreground, $color);\n  }\n}\n\n@keyframes rotation {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\nnv-loader {\n  @include root-styles();\n\n  @each $size in $loader-sizes {\n    &.size-#{$size} {\n      @include size-styles($size);\n    }\n  }\n\n  @each $color in $loader-color {\n    &.color-#{$color} {\n      @include color-styles($color);\n    }\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { SemanticSizes, LoaderColors } from '../../utils/constants';\n\n@Component({\n  tag: 'nv-loader',\n  styleUrl: 'nv-loader.scss',\n  shadow: false,\n})\nexport class NvLoader {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Choose the size of the loader to best fit your application’s needs, whether\n   * it’s a small spinner for subtle loading indicators or a large one for more\n   * prominent displays.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${SemanticSizes}` = 'md';\n\n  /**\n   * Choose the color of the loader. Options are primary and white to keep the\n   * design consistent and ensure the loader stands out or blends in\n   * appropriately with your application’s interface.\n   */\n  @Prop({ reflect: true })\n  readonly color: `${LoaderColors}`;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  /* <slot> empty to force rendering change */\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.size && `size-${this.size}`,\n          this.color && `color-${this.color}`,\n        )}\n      ></Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/{esm/nv-badge.entry.js → components/p-a4802979.js}

@@ -1,14 +1,16 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-e7b35c14.js';
-import { c as clsx } from './clsx-297c1ffe.js';
-import { u as useCollapse, t as timeline } from './timeline.animation-1b88f052.js';
-import { u as useFade } from './fade.animation-2a077983.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-d506ae63.js';
+import { c as clsx } from './p-8a1a6e56.js';
+import { u as useCollapse, t as timeline } from './p-42301d8f.js';
+import { u as useFade } from './p-1daca48a.js';
+import { d as defineCustomElement$1 } from './p-d70df149.js';
 
-const nvBadgeCss = "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-badge{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content}nv-badge.with-gap{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content;gap:var(--badge-gap-x)}nv-badge:not(.with-gap){padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content}nv-badge.badge-1{color:var(--color-rainbow-1-content);background-color:var(--color-rainbow-1-background)}nv-badge.badge-1 .close:focus,nv-badge.badge-1 .close:focus-within{outline:none}nv-badge.badge-1 .close:focus-visible,nv-badge.badge-1 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-1-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-1 nv-icon{color:var(--color-rainbow-1-content)}nv-badge.badge-2{color:var(--color-rainbow-2-content);background-color:var(--color-rainbow-2-background)}nv-badge.badge-2 .close:focus,nv-badge.badge-2 .close:focus-within{outline:none}nv-badge.badge-2 .close:focus-visible,nv-badge.badge-2 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-2-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-2 nv-icon{color:var(--color-rainbow-2-content)}nv-badge.badge-3{color:var(--color-rainbow-3-content);background-color:var(--color-rainbow-3-background)}nv-badge.badge-3 .close:focus,nv-badge.badge-3 .close:focus-within{outline:none}nv-badge.badge-3 .close:focus-visible,nv-badge.badge-3 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-3-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-3 nv-icon{color:var(--color-rainbow-3-content)}nv-badge.badge-4{color:var(--color-rainbow-4-content);background-color:var(--color-rainbow-4-background)}nv-badge.badge-4 .close:focus,nv-badge.badge-4 .close:focus-within{outline:none}nv-badge.badge-4 .close:focus-visible,nv-badge.badge-4 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-4-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-4 nv-icon{color:var(--color-rainbow-4-content)}nv-badge.badge-5{color:var(--color-rainbow-5-content);background-color:var(--color-rainbow-5-background)}nv-badge.badge-5 .close:focus,nv-badge.badge-5 .close:focus-within{outline:none}nv-badge.badge-5 .close:focus-visible,nv-badge.badge-5 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-5-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-5 nv-icon{color:var(--color-rainbow-5-content)}nv-badge span{font-size:var(--font-size-xs);line-height:var(--line-height-xs) !important}nv-badge nv-icon>svg.icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-sm{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-md{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-lg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-xl{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge .close{padding:0;line-height:0;border:none;background:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;aspect-ratio:1/1;border-radius:var(--radius-rounded-full)}";
+const nvBadgeCss = "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-badge{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content}nv-badge.with-gap{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content;gap:var(--badge-gap-x)}nv-badge:not(.with-gap){padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content}nv-badge.badge-1{color:var(--color-rainbow-1-content);background-color:var(--color-rainbow-1-background)}nv-badge.badge-1 .close:focus,nv-badge.badge-1 .close:focus-within{outline:none}nv-badge.badge-1 .close:focus-visible,nv-badge.badge-1 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-1-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-1 nv-icon{color:var(--color-rainbow-1-content)}nv-badge.badge-2{color:var(--color-rainbow-2-content);background-color:var(--color-rainbow-2-background)}nv-badge.badge-2 .close:focus,nv-badge.badge-2 .close:focus-within{outline:none}nv-badge.badge-2 .close:focus-visible,nv-badge.badge-2 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-2-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-2 nv-icon{color:var(--color-rainbow-2-content)}nv-badge.badge-3{color:var(--color-rainbow-3-content);background-color:var(--color-rainbow-3-background)}nv-badge.badge-3 .close:focus,nv-badge.badge-3 .close:focus-within{outline:none}nv-badge.badge-3 .close:focus-visible,nv-badge.badge-3 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-3-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-3 nv-icon{color:var(--color-rainbow-3-content)}nv-badge.badge-4{color:var(--color-rainbow-4-content);background-color:var(--color-rainbow-4-background)}nv-badge.badge-4 .close:focus,nv-badge.badge-4 .close:focus-within{outline:none}nv-badge.badge-4 .close:focus-visible,nv-badge.badge-4 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-4-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-4 nv-icon{color:var(--color-rainbow-4-content)}nv-badge.badge-5{color:var(--color-rainbow-5-content);background-color:var(--color-rainbow-5-background)}nv-badge.badge-5 .close:focus,nv-badge.badge-5 .close:focus-within{outline:none}nv-badge.badge-5 .close:focus-visible,nv-badge.badge-5 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-5-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-5 nv-icon{color:var(--color-rainbow-5-content)}nv-badge.badge-6{color:var(--color-rainbow-6-content);background-color:var(--color-rainbow-6-background)}nv-badge.badge-6 .close:focus,nv-badge.badge-6 .close:focus-within{outline:none}nv-badge.badge-6 .close:focus-visible,nv-badge.badge-6 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-6-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-6 nv-icon{color:var(--color-rainbow-6-content)}nv-badge.badge-7{color:var(--color-rainbow-7-content);background-color:var(--color-rainbow-7-background)}nv-badge.badge-7 .close:focus,nv-badge.badge-7 .close:focus-within{outline:none}nv-badge.badge-7 .close:focus-visible,nv-badge.badge-7 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-7-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-7 nv-icon{color:var(--color-rainbow-7-content)}nv-badge.badge-8{color:var(--color-rainbow-8-content);background-color:var(--color-rainbow-8-background)}nv-badge.badge-8 .close:focus,nv-badge.badge-8 .close:focus-within{outline:none}nv-badge.badge-8 .close:focus-visible,nv-badge.badge-8 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-8-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-8 nv-icon{color:var(--color-rainbow-8-content)}nv-badge.badge-9{color:var(--color-rainbow-9-content);background-color:var(--color-rainbow-9-background)}nv-badge.badge-9 .close:focus,nv-badge.badge-9 .close:focus-within{outline:none}nv-badge.badge-9 .close:focus-visible,nv-badge.badge-9 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-9-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-9 nv-icon{color:var(--color-rainbow-9-content)}nv-badge.badge-10{color:var(--color-rainbow-10-content);background-color:var(--color-rainbow-10-background)}nv-badge.badge-10 .close:focus,nv-badge.badge-10 .close:focus-within{outline:none}nv-badge.badge-10 .close:focus-visible,nv-badge.badge-10 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-10-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-10 nv-icon{color:var(--color-rainbow-10-content)}nv-badge span{font-size:var(--font-size-xs);line-height:var(--line-height-xs) !important}nv-badge nv-icon>svg.icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-sm{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-md{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-lg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-xl{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge .close{padding:0;line-height:0;border:none;background:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;aspect-ratio:1/1;border-radius:var(--radius-rounded-full)}";
 const NvBadgeStyle0 = nvBadgeCss;
 
-const NvBadge = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const NvBadge = /*@__PURE__*/ proxyCustomElement(class NvBadge extends H {
+    constructor() {
+        super();
+        this.__registerHost();
         this.closeClicked = createEvent(this, "closeClicked", 7);
         this.hiddenChanged = createEvent(this, "hiddenChanged", 7);
         this.hiddenChangedComplete = createEvent(this, "hiddenChangedComplete", 7);
@@ -95,21 +97,55 @@ const NvBadge = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '230bec882e7425786c0a57434b1d6fde7a5d19bc', class: clsx(`badge-${this.color}`, {
+        return (h(Host, { key: '18d3a28777aa74117ccc68aa0c889ea716b90d56', class: clsx(`badge-${this.color}`, {
                 'has-close': this.dismissible,
                 'with-gap': this.dismissible || this.label,
                 'visually-hidden': this._isHidden,
-            }) }, h("slot", { key: 'cfeeaed354a34cbe1eaf1caeed9456b630a07265', name: "leading-icon" }, this.leadIcon && (h("nv-icon", { key: '10031f4f26339860458f1413b171916cbc97f98f', slot: "leading-icon", name: this.leadIcon, size: "sm" }))), this.label && h("span", { key: '8d165b104e3952c61084f1473d31ce1a05404966' }, this.label), this.dismissible && (h("button", { key: '8320177e0ac7f8c4f5d09b6c947d81d0eddadb4f', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: '3298bd640cb7bb62923e5f1e650944afc01a7385', name: "x", size: "sm" })))));
+            }) }, h("slot", { key: '87ac2dd4ae3ba521d1a6b15394d79c85c1899102', name: "leading-icon" }, this.leadIcon && (h("nv-icon", { key: '22fbc091fe0c861e9a6ce12e5ba1b8d0e83ca7da', slot: "leading-icon", name: this.leadIcon, size: "sm" }))), this.label && h("span", { key: '040559657d6a337b2cd3ce265d2e99cdd0245324' }, this.label), this.dismissible && (h("button", { key: 'd0f992bdf748be5bf63d7a3e9864f96cad4dfae7', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: '60915e33efb355a5e2820507fe2365ba4e602c26', name: "x", size: "sm" })))));
     }
-    get ref() { return getElement(this); }
+    get ref() { return this; }
     static get watchers() { return {
         "dismissal": ["handleDismissalChange"],
         "icon": ["handleIconChange"],
         "hidden": ["handleHiddenChange"]
     }; }
-};
-NvBadge.style = NvBadgeStyle0;
+    static get style() { return NvBadgeStyle0; }
+}, [4, "nv-badge", {
+        "dismissal": [4],
+        "icon": [1],
+        "iconLocation": [513, "icon-location"],
+        "color": [513],
+        "label": [513],
+        "leadIcon": [1537, "lead-icon"],
+        "dismissible": [1540],
+        "hidden": [1540],
+        "preventAutoClose": [516, "prevent-auto-close"],
+        "_isHidden": [32]
+    }, undefined, {
+        "dismissal": ["handleDismissalChange"],
+        "icon": ["handleIconChange"],
+        "hidden": ["handleHiddenChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-badge", "nv-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-badge":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvBadge);
+            }
+            break;
+        case "nv-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
 
-export { NvBadge as nv_badge };
+export { NvBadge as N, defineCustomElement as d };
 
-//# sourceMappingURL=nv-badge.entry.js.map
+//# sourceMappingURL=p-a4802979.js.map

package/dist/components/p-a4802979.js.map

@@ -0,0 +1 @@
+{"file":"p-a4802979.js","mappings":"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","names":[],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"../nv-icon/nv-icon.scss\" as icon;\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$badge-colors: (\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"10\");\n\n/* Define maps for color-related variables */\n$color-rainbow-content: (\n  \"1\": var(--color-rainbow-1-content),\n  \"2\": var(--color-rainbow-2-content),\n  \"3\": var(--color-rainbow-3-content),\n  \"4\": var(--color-rainbow-4-content),\n  \"5\": var(--color-rainbow-5-content),\n  \"6\": var(--color-rainbow-6-content),\n  \"7\": var(--color-rainbow-7-content),\n  \"8\": var(--color-rainbow-8-content),\n  \"9\": var(--color-rainbow-9-content),\n  \"10\": var(--color-rainbow-10-content)\n);\n\n$color-rainbow-background: (\n  \"1\": var(--color-rainbow-1-background),\n  \"2\": var(--color-rainbow-2-background),\n  \"3\": var(--color-rainbow-3-background),\n  \"4\": var(--color-rainbow-4-background),\n  \"5\": var(--color-rainbow-5-background),\n  \"6\": var(--color-rainbow-6-background),\n  \"7\": var(--color-rainbow-7-background),\n  \"8\": var(--color-rainbow-8-background),\n  \"9\": var(--color-rainbow-9-background),\n  \"10\": var(--color-rainbow-10-background)\n);\n\n@mixin root-styles() {\n  padding: var(--badge-padding-y) var(--badge-padding-x);\n  display: inline-flex !important; // override the display: none in [hidden] css\n  vertical-align: middle;\n  align-items: center;\n  border-radius: var(--radius-rounded-full);\n  height: fit-content;\n  width: fit-content;\n}\n\n@mixin root-styles-with-gap() {\n  @include root-styles();\n  gap: var(--badge-gap-x);\n}\n\n@mixin badge-color($badge-number) {\n  color: map.get($color-rainbow-content, $badge-number);\n  background-color: map.get($color-rainbow-background, $badge-number);\n  .close {\n    @include focus-ring(var(--color-rainbow-#{$badge-number}-content), 0.2);\n  }\n}\n\n@mixin icon-color($badge-number) {\n  color: map.get($color-rainbow-content, $badge-number);\n}\n\n@mixin type-settings($font-size, $line-height) {\n  font-size: var(--font-size-xs);\n  line-height: var(--line-height-xs) !important;\n}\n\nnv-badge {\n  @include root-styles();\n\n  //gap styles\n  &.with-gap {\n    @include root-styles-with-gap();\n  }\n\n  &:not(.with-gap) {\n    @include root-styles();\n  }\n\n  // color styles\n  @each $i in $badge-colors {\n    &.badge-#{$i} {\n      @include badge-color($i);\n      nv-icon {\n        @include icon-color($i);\n      }\n    }\n  }\n\n  //label styles\n  & span {\n    @include type-settings(xs, xs);\n  }\n\n  // nv-icon styles\n  & nv-icon > svg {\n    @each $size, $config in icon.$icon-config {\n      &.icon-#{$size} {\n        @include icon.icon-size-and-stroke(\n          map.get(map.get(icon.$icon-config, \"xs\"), size),\n          map.get(map.get(icon.$icon-config, \"xs\"), stroke)\n        );\n      }\n    }\n  }\n\n  .close {\n    padding: 0;\n    line-height: 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n    color: inherit;\n    display: inline-flex;\n    align-items: center;\n    aspect-ratio: 1/1;\n    border-radius: var(--radius-rounded-full);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n  State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/**\n * @slot leading-icon - Icon before the label.\n */\n@Component({\n  tag: 'nv-badge',\n  styleUrl: 'nv-badge.scss',\n  shadow: false,\n})\nexport class NvBadge {\n  @Element() ref: HTMLNvBadgeElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Whether the badge is dismissible.\n   * @deprecated use dismissible instead.\n   */\n  @Prop()\n  readonly dismissal: boolean = false;\n\n  /**\n   * The icon to display in the badge.\n   * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n   */\n  @Prop()\n  readonly icon: string;\n\n  /**\n   * The location of the icon in the badge.\n   * @deprecated only leadIcon now.\n   */\n  @Prop({ reflect: true })\n  readonly iconLocation: 'left' | 'right';\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The color of the badge. Use a string between 1 to 10\n   */\n  @Prop({ reflect: true })\n  readonly color?: string = '1';\n\n  /**\n   * Main content of the badge.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string | null = null;\n\n  /**\n   * The lead icon of the badge.\n   */\n  @Prop({ reflect: true, mutable: true })\n  leadIcon?: string | null = null;\n\n  /**\n   * Whether the badge is dismissible.\n   */\n  @Prop({ reflect: true, mutable: true })\n  dismissible: boolean = false;\n\n  /**\n   * Controls the visibility of the badge. Will animate with fade and collapse.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n  @State()\n  private _isHidden: boolean = this.hidden;\n\n  /**\n   * When true, the alert does not automatically close upon dismissing.\n   * Useful for externally controlled component behavior.\n   */\n  @Prop({ reflect: true })\n  readonly preventAutoClose: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the badge is dismissed.\n   */\n  @Event()\n  closeClicked: EventEmitter<MouseEvent>;\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Handles the dismissal prop change.\n   * @param {boolean} dismissal - The new dismissal value.\n   */\n  @Watch('dismissal')\n  handleDismissalChange(dismissal: boolean) {\n    this.dismissible = dismissal;\n  }\n\n  /**\n   * Handles the icon prop change.\n   * @param {string} icon - The new icon value.\n   */\n  @Watch('icon')\n  handleIconChange(icon: string) {\n    this.leadIcon = icon;\n  }\n\n  /**\n   * Handles the hidden prop change.\n   * @param {boolean} hidden - The new hidden value.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n    if (this._isHidden === true) this._isHidden = hidden;\n\n    const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n    if (hidden === true) await timeline(fadeOut, collapse).start();\n    if (hidden === false) await timeline(expand, fadeIn).start();\n\n    this.hiddenChangedComplete.emit(hidden);\n\n    if (this._isHidden === false) this._isHidden = hidden;\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  /**\n   * Component will load.\n   */\n  componentWillLoad() {\n    if (this.dismissal) {\n      this.dismissible = this.dismissal;\n    }\n\n    if (this.icon != null && this.icon != '') {\n      this.leadIcon = this.icon;\n    }\n\n    if (this.hidden) {\n      const { setCollapsed } = useCollapse(this.ref);\n      const { setFadeOut } = useFade(this.ref);\n\n      setCollapsed();\n      setFadeOut();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the close button click.\n   * @param {MouseEvent} originalEvent - The original event.\n   */\n  private readonly handleClose = (originalEvent?: MouseEvent) => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit(originalEvent);\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(`badge-${this.color}`, {\n          'has-close': this.dismissible,\n          'with-gap': this.dismissible || this.label,\n          'visually-hidden': this._isHidden,\n        })}\n      >\n        <slot name=\"leading-icon\">\n          {this.leadIcon && (\n            <nv-icon\n              slot=\"leading-icon\"\n              name={this.leadIcon}\n              size=\"sm\"\n            ></nv-icon>\n          )}\n        </slot>\n        {this.label && <span>{this.label}</span>}\n        {this.dismissible && (\n          <button onClick={this.handleClose} class=\"close\" type=\"button\">\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-45405075.js → p-b12abc99.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-d506ae63.js';
-import { d as defineCustomElement$1 } from './p-689a7b38.js';
+import { d as defineCustomElement$1 } from './p-d70df149.js';
 
 const nvFielddropdownitemCss = "nv-fielddropdownitem{display:flex;align-items:center;justify-content:space-between;max-width:300px;width:100%;padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem.selected{background-color:var(--components-menu-contextual-item-background-selected);color:var(--components-menu-contextual-item-content-selected)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem .selection-icon{padding-left:10px;color:var(--components-menu-contextual-item-icon-selected);align-self:center}:root{--components-menu-contextual-item-background-selected:#f5f6f7;--components-menu-contextual-item-content-selected:#171f22;--components-menu-contextual-item-icon-selected:#007f00;--components-menu-contextual-item-background-hover:#f5f6f7;--components-menu-contextual-item-content-hover:#171f22}";
 const NvFielddropdownitemStyle0 = nvFielddropdownitemCss;
@@ -81,4 +81,4 @@ defineCustomElement();
 
 export { NvFielddropdownitem as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-45405075.js.map
+//# sourceMappingURL=p-b12abc99.js.map

package/dist/components/{p-45405075.js.map → p-b12abc99.js.map}

@@ -1 +1 @@
-{"file":"p-45405075.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,0hDAA0hD,CAAC;AAC1jD,kCAAe,sBAAsB;;MCmBxB,mBAAmB;;;;;QAwCtB,gBAAW,GAAG;YACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,IAAI,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;gBACjC,IAAI,CAAC,SAAS,EAAE;oBACd,SAAS;wBACP,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC;6BAC3B,GAAG,CAAC,IAAI,cAAI,OAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,EAAE,CAAA,EAAA,CAAC;6BACrC,MAAM,CAAC,IAAI,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;6BACvC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;iBACtB;gBAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;gBAE/B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;oBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,KAAK,EAAE,SAAS;oBAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB,CAAC,CAAC;aACJ;SACF,CAAC;wBAlD2B,KAAK;wBAMd,KAAK;;;;;;;;;;;;IAuDjB,yBAAyB,CAAC,KAAgC;QAChE,OAAO,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;KAC5C;;;;IAMD,MAAM;QACJ,MAAM,iBAAiB,GAAG,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAErE,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,EACpC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAEjC,iBAAiB,IAChB,eAAa,KAEb,WAAK,KAAK,EAAC,YAAY,IACrB,0BAAiB,MAAM,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC1C,IAAI,CAAC,QAAQ,KACZ,eACE,IAAI,EAAC,OAAO,iBACA,MAAM,EAClB,KAAK,EAAC,gBAAgB,GACb,CACZ,CACG,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-fielddropdownitem/nv-fielddropdownitem.scss?tag=nv-fielddropdownitem","src/components/nv-fielddropdownitem/nv-fielddropdownitem.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fielddropdownitem {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  max-width: 300px;\n  width: 100%;\n  padding: var(--menu-contextual-item-padding-y)\n    var(--menu-contextual-item-padding-x); //var(--components-list-custom-padding-y) var(--components-list-custom-padding-x);\n  font-size: var(--menu-contextual-item-font-size);\n  font-weight: var(--menu-contextual-item-font-weight);\n  color: var(--components-menu-contextual-item-content);\n  border-radius: var(--menu-contextual-item-radius);\n  transition: background-color 150ms ease-out, color 150ms ease-out;\n  cursor: pointer;\n\n  &:hover,\n  &:focus,\n  &:focus-within {\n    background-color: var(--components-menu-contextual-item-background-hover);\n    color: var(--components-menu-contextual-item-content-hover);\n  }\n\n  &.selected {\n    background-color: var(\n      --components-menu-contextual-item-background-selected\n    );\n    color: var(--components-menu-contextual-item-content-selected);\n  }\n\n  &[disabled]:not([disabled='false']) {\n    cursor: not-allowed;\n    background-color: unset;\n    color: var(--components-menu-contextual-item-content-disabled);\n  }\n\n  [data-scope='text'] {\n    flex-grow: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .selection-icon {\n    padding-left: 10px;\n    color: var(--components-menu-contextual-item-icon-selected);\n    align-self: center;\n  }\n}\n\n:root {\n  --components-menu-contextual-item-background-selected: #f5f6f7; // Couleur de fond pour l'élément sélectionné\n  --components-menu-contextual-item-content-selected: #171f22; // Couleur du texte pour l'élément sélectionné\n  --components-menu-contextual-item-icon-selected: #007f00; // Couleur de l'icône (coche) pour l'élément sélectionné\n  --components-menu-contextual-item-background-hover: #f5f6f7; // Couleur de fond lors du hover\n  --components-menu-contextual-item-content-hover: #171f22; // Couleur du texte lors du hover\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n} from '@stencil/core';\nimport { DropdownItemSelectedEventDetail } from './DropdownItemSelectedEventDetail';\n\n/**\n * @slot default - The content to be displayed inside the dropdown item.\n */\n\n@Component({\n  tag: 'nv-fielddropdownitem',\n  styleUrl: 'nv-fielddropdownitem.scss',\n  shadow: false,\n})\nexport class NvFielddropdownitem {\n  @Element() el: HTMLNvFielddropdownitemElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Disables the item, preventing any user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Indicates if the item is selected.\n   */\n  @Prop({ reflect: true, mutable: true })\n  selected: boolean = false;\n\n  /**\n   * Value associated with the item.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * Label used as the value for the default layout.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when an item is clicked.\n   */\n  @Event()\n  itemSelected: EventEmitter<DropdownItemSelectedEventDetail>;\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      let itemValue = this.value || '';\n      if (!itemValue) {\n        itemValue =\n          Array.from(this.el.childNodes)\n            .map(node => node.textContent?.trim())\n            .filter(text => text && text.length > 0)\n            .join(' ') || '';\n      }\n\n      this.selected = !this.selected; // Toggle the selected state\n\n      this.itemSelected.emit({\n        label: this.label,\n        value: itemValue,\n        selected: this.selected,\n        disabled: this.disabled,\n      });\n    }\n  };\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Utility function to check if a string is null, empty, or contains only whitespace.\n   * @param {string | null | undefined} input - The string to check.\n   * @returns {boolean} - Returns true if the string is null, empty, or contains only whitespace; otherwise, false.\n   */\n  private isNullOrEmptyOrWhitespace(input: string | null | undefined): boolean {\n    return !input || input.trim().length === 0;\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    const showDefaultLayout = this.isNullOrEmptyOrWhitespace(this.label);\n\n    return (\n      <Host\n        role=\"menuitem\"\n        tabindex={this.disabled ? '-1' : '0'}\n        onClick={this.handleClick}\n        class={{ selected: this.selected }}\n      >\n        {showDefaultLayout ? (\n          <slot></slot>\n        ) : (\n          <div class=\"flex gap-2\">\n            <span data-scope=\"text\">{this.label}</span>\n            {this.selected && (\n              <nv-icon\n                name=\"check\"\n                aria-hidden=\"true\"\n                class=\"selection-icon\"\n              ></nv-icon>\n            )}\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"p-b12abc99.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,0hDAA0hD,CAAC;AAC1jD,kCAAe,sBAAsB;;MCmBxB,mBAAmB;;;;;QAwCtB,gBAAW,GAAG;YACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,IAAI,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;gBACjC,IAAI,CAAC,SAAS,EAAE;oBACd,SAAS;wBACP,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC;6BAC3B,GAAG,CAAC,IAAI,cAAI,OAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,EAAE,CAAA,EAAA,CAAC;6BACrC,MAAM,CAAC,IAAI,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;6BACvC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;iBACtB;gBAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;gBAE/B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;oBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,KAAK,EAAE,SAAS;oBAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB,CAAC,CAAC;aACJ;SACF,CAAC;wBAlD2B,KAAK;wBAMd,KAAK;;;;;;;;;;;;IAuDjB,yBAAyB,CAAC,KAAgC;QAChE,OAAO,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;KAC5C;;;;IAMD,MAAM;QACJ,MAAM,iBAAiB,GAAG,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAErE,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,EACpC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAEjC,iBAAiB,IAChB,eAAa,KAEb,WAAK,KAAK,EAAC,YAAY,IACrB,0BAAiB,MAAM,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC1C,IAAI,CAAC,QAAQ,KACZ,eACE,IAAI,EAAC,OAAO,iBACA,MAAM,EAClB,KAAK,EAAC,gBAAgB,GACb,CACZ,CACG,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-fielddropdownitem/nv-fielddropdownitem.scss?tag=nv-fielddropdownitem","src/components/nv-fielddropdownitem/nv-fielddropdownitem.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fielddropdownitem {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  max-width: 300px;\n  width: 100%;\n  padding: var(--menu-contextual-item-padding-y)\n    var(--menu-contextual-item-padding-x); //var(--components-list-custom-padding-y) var(--components-list-custom-padding-x);\n  font-size: var(--menu-contextual-item-font-size);\n  font-weight: var(--menu-contextual-item-font-weight);\n  color: var(--components-menu-contextual-item-content);\n  border-radius: var(--menu-contextual-item-radius);\n  transition: background-color 150ms ease-out, color 150ms ease-out;\n  cursor: pointer;\n\n  &:hover,\n  &:focus,\n  &:focus-within {\n    background-color: var(--components-menu-contextual-item-background-hover);\n    color: var(--components-menu-contextual-item-content-hover);\n  }\n\n  &.selected {\n    background-color: var(\n      --components-menu-contextual-item-background-selected\n    );\n    color: var(--components-menu-contextual-item-content-selected);\n  }\n\n  &[disabled]:not([disabled='false']) {\n    cursor: not-allowed;\n    background-color: unset;\n    color: var(--components-menu-contextual-item-content-disabled);\n  }\n\n  [data-scope='text'] {\n    flex-grow: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .selection-icon {\n    padding-left: 10px;\n    color: var(--components-menu-contextual-item-icon-selected);\n    align-self: center;\n  }\n}\n\n:root {\n  --components-menu-contextual-item-background-selected: #f5f6f7; // Couleur de fond pour l'élément sélectionné\n  --components-menu-contextual-item-content-selected: #171f22; // Couleur du texte pour l'élément sélectionné\n  --components-menu-contextual-item-icon-selected: #007f00; // Couleur de l'icône (coche) pour l'élément sélectionné\n  --components-menu-contextual-item-background-hover: #f5f6f7; // Couleur de fond lors du hover\n  --components-menu-contextual-item-content-hover: #171f22; // Couleur du texte lors du hover\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n} from '@stencil/core';\nimport { DropdownItemSelectedEventDetail } from './DropdownItemSelectedEventDetail';\n\n/**\n * @slot default - The content to be displayed inside the dropdown item.\n */\n\n@Component({\n  tag: 'nv-fielddropdownitem',\n  styleUrl: 'nv-fielddropdownitem.scss',\n  shadow: false,\n})\nexport class NvFielddropdownitem {\n  @Element() el: HTMLNvFielddropdownitemElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Disables the item, preventing any user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Indicates if the item is selected.\n   */\n  @Prop({ reflect: true, mutable: true })\n  selected: boolean = false;\n\n  /**\n   * Value associated with the item.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * Label used as the value for the default layout.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when an item is clicked.\n   */\n  @Event()\n  itemSelected: EventEmitter<DropdownItemSelectedEventDetail>;\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      let itemValue = this.value || '';\n      if (!itemValue) {\n        itemValue =\n          Array.from(this.el.childNodes)\n            .map(node => node.textContent?.trim())\n            .filter(text => text && text.length > 0)\n            .join(' ') || '';\n      }\n\n      this.selected = !this.selected; // Toggle the selected state\n\n      this.itemSelected.emit({\n        label: this.label,\n        value: itemValue,\n        selected: this.selected,\n        disabled: this.disabled,\n      });\n    }\n  };\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Utility function to check if a string is null, empty, or contains only whitespace.\n   * @param {string | null | undefined} input - The string to check.\n   * @returns {boolean} - Returns true if the string is null, empty, or contains only whitespace; otherwise, false.\n   */\n  private isNullOrEmptyOrWhitespace(input: string | null | undefined): boolean {\n    return !input || input.trim().length === 0;\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    const showDefaultLayout = this.isNullOrEmptyOrWhitespace(this.label);\n\n    return (\n      <Host\n        role=\"menuitem\"\n        tabindex={this.disabled ? '-1' : '0'}\n        onClick={this.handleClick}\n        class={{ selected: this.selected }}\n      >\n        {showDefaultLayout ? (\n          <slot></slot>\n        ) : (\n          <div class=\"flex gap-2\">\n            <span data-scope=\"text\">{this.label}</span>\n            {this.selected && (\n              <nv-icon\n                name=\"check\"\n                aria-hidden=\"true\"\n                class=\"selection-icon\"\n              ></nv-icon>\n            )}\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-89fb6636.js → p-d5dd3def.js}

@@ -2310,7 +2310,7 @@ const NvPopover = /*@__PURE__*/ proxyCustomElement(class NvPopover extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'ee70da5a68b34bf289f79b6d18ffac777f8d807f' }, h("slot", { key: '64bd478a06c4ccf9f656a9ea617bbe39d2ce78d8', name: "trigger" }), h("div", { key: '5d024ffd7c1e00f8f476164da19d231edafa96ec', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: '63116e165f54dc018dfee0a8b56eeda96523f16f', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '6a7a400135aaea61ed5f1b0cb492ab962598ad16', name: "content" }))));
+        return (h(Host, { key: 'a09380cf6451740b99cbebca902cb02f44b458a2' }, h("slot", { key: '661c16225a71d26ab295b5efe139ebc507f9e261', name: "trigger" }), h("div", { key: '7dafdc5529822fb262bb52bf27a9353bf9040c05', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: 'ec295857667a455e2511d0a2848e9847f275dc21', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '17723fe92077d5b88c584a4202f4995ad7a7149a', name: "content" }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -2352,4 +2352,4 @@ defineCustomElement();
 
 export { NvPopover as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-89fb6636.js.map
+//# sourceMappingURL=p-d5dd3def.js.map