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

package/dist/cjs/nv-datagridbody.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c50face0.js');
+const index = require('./index-ddc37f87.js');
 
 const nvDatagridbodyCss = "";
 const NvDatagridbodyStyle0 = nvDatagridbodyCss;
@@ -14,7 +14,7 @@ const NvDatagridbody = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'c24bf0e6d18d00b39b6e0382b0268ee24e6e7567' }, index.h("tbody", { key: '1fae4b6126134317bd2dc7d4819ed861e8915761' }, index.h("slot", { key: 'a6a537e6ed6c8b831da5294c1bce7010038b6291' }))));
+        return (index.h(index.Host, { key: 'fdb910bb7b6388d4d0f8d61a18822e8334534a18' }, index.h("tbody", { key: 'f19bd351d639a4d9a94d27647e977d14d6cacf7e' }, index.h("slot", { key: '376ae58f100a27adefaec863497479d814af8124' }))));
     }
 };
 NvDatagridbody.style = NvDatagridbodyStyle0;

package/dist/cjs/nv-datagridcolumn.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c50face0.js');
+const index = require('./index-ddc37f87.js');
 
 const nvDatagridcolumnCss = "";
 const NvDatagridcolumnStyle0 = nvDatagridcolumnCss;
@@ -10,14 +10,12 @@ const NvDatagridcolumnStyle0 = nvDatagridcolumnCss;
 const NvDatagridcolumn = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.header = undefined;
-        this.accessor = undefined;
     }
     //#endregion PROPERTIES
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '4607ea5be4f54aec289b09e40f980aaf33c304c7' }, index.h("th", { key: '5a24f302d8b01c8ed44fb3c015d9701967d2833f' }, index.h("slot", { key: '272e390027621eb09b17baa1529fbdaba40eb74a' }))));
+        return (index.h(index.Host, { key: '2982f199f488077a91812c214b0e881a0e32e1ec' }, index.h("th", { key: 'cc46a9eb1aa232a8068308d7e7175aed89f007c1' }, index.h("slot", { key: 'bd1f13adfd55b1c4ae8dab30d7aea33c9079f3e0' }))));
     }
 };
 NvDatagridcolumn.style = NvDatagridcolumnStyle0;

package/dist/cjs/nv-datagridcolumn.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"nv-datagridcolumn.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,EAAE,CAAC;AAC/B,+BAAe,mBAAmB;;MCSrB,gBAAgB;;;;;;;;;IAoB3B,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,mEACEA,oEAAa,CACV,CACA,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/nv-datagridcolumn/nv-datagridcolumn.scss?tag=nv-datagridcolumn","src/components/nv-datagridcolumn/nv-datagridcolumn.tsx"],"sourcesContent":["// No need for the moment\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * @slot default - Use this slot to insert HTML into the data grid column.\n */\n@Component({\n  tag: 'nv-datagridcolumn',\n  styleUrl: 'nv-datagridcolumn.scss',\n  shadow: false,\n})\nexport class NvDatagridcolumn {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Defines the header of the column.\n   */\n  @Prop()\n  readonly header: string;\n\n  /**\n   * Defines the accessor of the column.\n   */\n  @Prop()\n  readonly accessor: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <th>\n          <slot></slot>\n        </th>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"],"version":3}
+{"file":"nv-datagridcolumn.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,EAAE,CAAC;AAC/B,+BAAe,mBAAmB;;MCSrB,gBAAgB;;;;;;;IAoB3B,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,mEACEA,oEAAa,CACV,CACA,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/nv-datagridcolumn/nv-datagridcolumn.scss?tag=nv-datagridcolumn","src/components/nv-datagridcolumn/nv-datagridcolumn.tsx"],"sourcesContent":["// No need for the moment\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * @slot default - Use this slot to insert HTML into the data grid column.\n */\n@Component({\n  tag: 'nv-datagridcolumn',\n  styleUrl: 'nv-datagridcolumn.scss',\n  shadow: false,\n})\nexport class NvDatagridcolumn {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Defines the header of the column.\n   */\n  @Prop()\n  readonly header: string;\n\n  /**\n   * Defines the accessor of the column.\n   */\n  @Prop()\n  readonly accessor: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <th>\n          <slot></slot>\n        </th>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"],"version":3}

package/dist/cjs/nv-datagriddatacell.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c50face0.js');
+const index = require('./index-ddc37f87.js');
 
 const nvDatagriddatacellCss = "";
 const NvDatagriddatacellStyle0 = nvDatagriddatacellCss;
@@ -10,13 +10,12 @@ const NvDatagriddatacellStyle0 = nvDatagriddatacellCss;
 const NvDatagriddatacell = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.accessor = undefined;
     }
     //#endregion PROPERTIES
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'bf3caf31ee31fdba6254c1907883474a84610dda' }, index.h("td", { key: '709febb6ab666afd3841c7d0086f889309f31fbd' }, index.h("slot", { key: 'c309eda6f57527a3ca1bba68983521121944a156' }))));
+        return (index.h(index.Host, { key: 'dbdf7fa0353e84e702ddd082fe466f89492f48e1' }, index.h("td", { key: '3d3d8ae038cb5a6bf3404fe7178003529790fc10' }, index.h("slot", { key: 'b8585f6517d053f90be59fe7e492771114911496' }))));
     }
 };
 NvDatagriddatacell.style = NvDatagriddatacellStyle0;

package/dist/cjs/nv-datagriddatacell.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"nv-datagriddatacell.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,qBAAqB,GAAG,EAAE,CAAC;AACjC,iCAAe,qBAAqB;;MCSvB,kBAAkB;;;;;;;;IAgB7B,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,mEACEA,oEAAa,CACV,CACA,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/nv-datagriddatacell/nv-datagriddatacell.scss?tag=nv-datagriddatacell","src/components/nv-datagriddatacell/nv-datagriddatacell.tsx"],"sourcesContent":["// No need for the moment\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * @slot default - Use this slot to insert HTML into the data grid data cell.\n */\n@Component({\n  tag: 'nv-datagriddatacell',\n  styleUrl: 'nv-datagriddatacell.scss',\n  shadow: false,\n})\nexport class NvDatagriddatacell {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Contains a string that identifies a cell in a table. It is used with the\n   * headers attribute to associate data cells with header cells in complex tables.\n   * @example 'col1'\n   */\n  @Prop()\n  readonly accessor: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <td>\n          <slot></slot>\n        </td>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"],"version":3}
+{"file":"nv-datagriddatacell.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,qBAAqB,GAAG,EAAE,CAAC;AACjC,iCAAe,qBAAqB;;MCSvB,kBAAkB;;;;;;;IAgB7B,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,mEACEA,oEAAa,CACV,CACA,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/nv-datagriddatacell/nv-datagriddatacell.scss?tag=nv-datagriddatacell","src/components/nv-datagriddatacell/nv-datagriddatacell.tsx"],"sourcesContent":["// No need for the moment\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * @slot default - Use this slot to insert HTML into the data grid data cell.\n */\n@Component({\n  tag: 'nv-datagriddatacell',\n  styleUrl: 'nv-datagriddatacell.scss',\n  shadow: false,\n})\nexport class NvDatagriddatacell {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Contains a string that identifies a cell in a table. It is used with the\n   * headers attribute to associate data cells with header cells in complex tables.\n   * @example 'col1'\n   */\n  @Prop()\n  readonly accessor: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <td>\n          <slot></slot>\n        </td>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"],"version":3}

package/dist/cjs/nv-datagridhead.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c50face0.js');
+const index = require('./index-ddc37f87.js');
 
 const nvDatagridheadCss = "";
 const NvDatagridheadStyle0 = nvDatagridheadCss;
@@ -14,7 +14,7 @@ const NvDatagridhead = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '272ab6e598f1edfc53fd99372acd64c3834c0fd0' }, index.h("thead", { key: '66d5e24d5d0757be7b0190bc4c156e476e0f748e' }, index.h("slot", { key: 'b41ac2580003d1df53595d66837ed51d597bee8c' }))));
+        return (index.h(index.Host, { key: 'e56a8e78a9034ce2cd2eda97ee074662b533ace9' }, index.h("thead", { key: '0a32742beaf23f214bbf3f03f9de5bab748573cd' }, index.h("slot", { key: '0beabbfbadee2af0caa07f31fb681d24fe6da240' }))));
     }
 };
 NvDatagridhead.style = NvDatagridheadStyle0;

package/dist/cjs/nv-datagridrow.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c50face0.js');
+const index = require('./index-ddc37f87.js');
 
 const nvDatagridrowCss = "";
 const NvDatagridrowStyle0 = nvDatagridrowCss;
@@ -14,7 +14,7 @@ const NvDatagridrow = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'f136ccd96f48d5743cc1c08c26029421af4ab2c0' }, index.h("tr", { key: '21787f1823a778ab6433cbcc5bff0596e2257485' }, index.h("slot", { key: 'edfc2d36e247097eaddfd694bf9de44f001a8219' }))));
+        return (index.h(index.Host, { key: '99a83706b411732ff2d2443794ab61bdc0a95c7e' }, index.h("tr", { key: 'd64ab8c5d39236cdbe4950c7d891f3aca9c696dc' }, index.h("slot", { key: '696117c1e59fe60e0d3de5928658ba479cfeb472' }))));
     }
 };
 NvDatagridrow.style = NvDatagridrowStyle0;

package/dist/cjs/nv-fieldcheckbox.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c50face0.js');
+const index = require('./index-ddc37f87.js');
 const clsx = require('./clsx-fc789adc.js');
 const v4 = require('./v4-7014b8b0.js');
 
@@ -13,22 +13,53 @@ const NvFieldcheckbox = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.checkedChanged = index.createEvent(this, "checkedChanged", 7);
-        this.message = undefined;
-        this.validation = undefined;
+        /**
+         * When true, the label will be placed before the checkbox.
+         * @deprecated Use `labelPlacement = end` instead.
+         * */
         this.labelBefore = false;
+        //#endregion DEPRECATED
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the ID for the radio button’s input element and the for attribute of
+         * the associated label. If no ID is provided, a random one will be
+         * automatically generated to ensure unique identification, facilitating
+         * proper label association and accessibility.
+         */
         this.inputId = v4.v4();
-        this.name = undefined;
-        this.value = undefined;
-        this.label = undefined;
-        this.labelPlacement = undefined;
+        /**
+         * Hides the label visually while still keeping it available for screen
+         * readers.
+         */
         this.hideLabel = false;
-        this.description = undefined;
+        /**
+         * Signals that there is an error associated with the checkbox, which can
+         * trigger visual cues.
+         */
         this.error = false;
-        this.errorDescription = undefined;
+        /**
+         * Indicates whether the checkbox is checked or not.
+         */
         this.checked = false;
+        /**
+         * Indicates whether the checkbox is in an indeterminate state, typically used
+         * for hierarchical checkboxes.
+         */
         this.indeterminate = false;
+        /**
+         * Disables the checkbox, preventing user interaction.
+         */
         this.disabled = false;
+        /**
+         * Sets the checkbox to read-only, preventing user changes but still allowing
+         * focus and selection of text.
+         */
         this.readonly = false;
+        /**
+         * Marks the checkbox as required, indicating that it must be checked for
+         * form submission.
+         */
         this.required = false;
     }
     componentWillRender() {
@@ -74,13 +105,13 @@ const NvFieldcheckbox = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'c87c2b3e3a4b81c9d6eb6c3784919a5fcb78e38b', class: clsx.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("div", { key: '8e43a91fec01b02dfa6b27408e1c1fd252558014', class: "input-container" }, index.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 => {
+        return (index.h(index.Host, { key: 'dee6fd99a2e97591189c8a6bdce3c8909b4ceb97', class: clsx.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("div", { key: 'dd6ab7f4cddd11c89cc15249290fe43d83a669ab', class: "input-container" }, index.h("input", { key: '1132052e8f369f16d3a0ce4698b72644975886f8', 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;
                 }
-            } }), index.h("span", { key: 'b100feee33694f72c59496f09f5ecbbf9358d7c6', class: "icon" }, this.checked && !this.indeterminate && (index.h("slot", { key: 'a5f5159aff04c111e4b944123686f00f817ecb1e', name: "checked-icon" }, index.h("svg", { key: '26a750b600fa0857ec9adf17f9d4dcd9ce0e2aad', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: 'ddf0155de05297d7ec966bdaf9633ceb1ee413d7', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (index.h("slot", { key: 'e64681ce70326348083402f7996eaf6134aaca3e', name: "indeterminate-icon" }, index.h("svg", { key: '9cfcd8118bb6f208278614711fd726fe29c9070a', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '8d88be8c4bd195982bf0024e4f67f30601ddfb80', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("div", { key: '061d18d589ef2a8efd0fb73f70d5c0a6013c497d', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '129013f8e60d1aaae82b97321c4cc26ab6229bbb', htmlFor: this.inputId, class: clsx.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: 'e134c0683e4c4c410c78d45f3537d8ed1491c67e', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '78166f4fb7d1e5dc20f13ce5b4ca567a90862493', class: "description" }, index.h("slot", { key: '6bced15913e4a22371520818343de5598c5a5e6d', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '88f4ceaef2412ce5f4bb08b19485fc27d9842792', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '96a581ce5d0e66416d24bf52219a87d3c39457d8', name: "error-description" }, this.errorDescription))))));
+            } }), index.h("span", { key: 'ac87b7d83e5731da6ce8f9990a1d55bd247cb750', class: "icon" }, this.checked && !this.indeterminate && (index.h("slot", { key: '911e69045129dc8755fea438570858f338a18ad3', name: "checked-icon" }, index.h("svg", { key: 'de2e547ac9ab00c52ee9c924fdb4e24cf0321158', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '10dc26b32951b18a6bd29482349894bf1ca87bd8', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (index.h("slot", { key: '7e957be646aa6a96f94e0cf70b5ef88b8037e07e', name: "indeterminate-icon" }, index.h("svg", { key: 'd132aabc77f0dcf5c67377a60004b72307cf61ba', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '353c950a9d8d14c32e276e393c9314374d10337f', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("div", { key: 'a14fc39e16a9dcee74e722a361fcc8df63fad5d6', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '13a9fee6f1c4aea8735eca27f36944d6c26cf7f2', htmlFor: this.inputId, class: clsx.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: 'dbbce25b8f65d2b12d10e419f94ae56ef2d0c355', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '3647cdaa6a4ec2cacab7b2c1fe731e3454746648', class: "description" }, index.h("slot", { key: '19dff40045f22c6403029731a0a628455b831c5c', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'dd78ae62d1a1cd6c2a9b41d32740321cb1f36f2a', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '1e4d1c10387aaea37c87111c43c84cd204ca1619', name: "error-description" }, this.errorDescription))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/nv-fieldcheckbox.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"nv-fieldcheckbox.entry.cjs.js","mappings":"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","names":["uuidv4","h","Host","clsx"],"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}
+{"file":"nv-fieldcheckbox.entry.cjs.js","mappings":"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","names":["uuidv4","h","Host","clsx"],"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/cjs/nv-fielddropdown.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c50face0.js');
+const index = require('./index-ddc37f87.js');
 const v4 = require('./v4-7014b8b0.js');
 
-const nvFielddropdownCss = "nv-fielddropdown{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fielddropdown[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddropdown[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddropdown label{display:flex;align-items:center;gap:var(--form-label-gap);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:500;line-height:var(--form-label-line-height)}nv-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .input-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out;display:flex;align-items:center;position:relative;width:100%;min-height:40px}nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddropdown .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;padding-right:2rem;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}nv-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddropdown .input-container .toggle-dropdown-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:2}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px}nv-fielddropdown .input-container.focus-within,nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddropdown .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fielddropdown .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fielddropdown .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;line-height:var(--form-description-line-height)}nv-fielddropdown .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;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fielddropdown hr{border:none;border-top:1px solid var(--dropdown-divider-color, #ccc);margin:0.5rem 0}.input-container.focus-within,.input-container:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}";
+const nvFielddropdownCss = "nv-fielddropdown{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fielddropdown[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddropdown[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddropdown label{display:flex;align-items:center;gap:var(--form-label-gap);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:500;line-height:var(--form-label-line-height)}nv-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{padding:var(--list-custom-padding);background-color:var(--components-list-custom-background);border:1px solid var(--components-list-custom-border);width:100%}nv-fielddropdown nv-popover [data-scope=popover] hr{color:var(--components-list-custom-separator)}nv-fielddropdown nv-popover [slot=content]{gap:var(--list-custom-gap-y);display:flex;flex-direction:column}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .input-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out;display:flex;align-items:center;position:relative;width:100%;min-height:40px}nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddropdown .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;padding-right:2rem;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}nv-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddropdown .input-container .toggle-dropdown-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:2}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px}nv-fielddropdown .input-container.focus-within,nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddropdown .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fielddropdown .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fielddropdown .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;line-height:var(--form-description-line-height)}nv-fielddropdown .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;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fielddropdown hr{border:none;height:1px;background-color:var(--components-list-custom-separator);margin:0}.input-container.focus-within,.input-container:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}";
 const NvFielddropdownStyle0 = nvFielddropdownCss;
 
 const NVFieldDropDown = class {
@@ -13,6 +13,63 @@ const NVFieldDropDown = class {
         index.registerInstance(this, hostRef);
         this.dropdownItemSelected = index.createEvent(this, "dropdownItemSelected", 7);
         this.valueChanged = index.createEvent(this, "valueChanged", 7);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the ID for the input element and the for attribute of the associated
+         * label. If no ID is provided, a random one will be automatically generated
+         * to ensure unique identification, facilitating proper label association and
+         * accessibility.
+         */
+        this.inputId = v4.v4();
+        /**
+         * State of the dropdown popover.
+         */
+        this.open = false;
+        /**
+         * The autocomplete prop helps users fill out the input field faster by
+         * suggesting entries they’ve used before, like their email or address.
+         * You can turn it on to make forms more convenient or off to ensure users
+         * always type in fresh data.
+         */
+        this.autocomplete = 'off';
+        /**
+         * Marks the input field as required, ensuring that the user must fill it out
+         * before submitting the form.
+         */
+        this.required = false;
+        /**
+         * Alters the input field’s appearance to indicate an error, helping users
+         * identify fields that need correction.
+         * @validator error
+         */
+        this.error = false;
+        /**
+         * Display the input field’s content without allowing users to change it.
+         * Users can still click on it, select, and copy the text, but they won’t be
+         * able to type or delete anything.
+         */
+        this.readonly = false;
+        /**
+         * The disabled prop lets you turn off the input field so that users can’t
+         * type in it. When disabled, the field is grayed out and won’t respond to
+         * clicks or touches.
+         */
+        this.disabled = false;
+        /**
+         * The text to display when no items match the filter.
+         */
+        this.emptyresult = 'No results found';
+        /**
+         * The text entered by the user for filtering dropdown items.
+         */
+        this.filterText = '';
+        /**
+         * Enables or disables the filtering feature for the dropdown items.
+         */
+        this.filterable = false;
+        this.isFilterable = this.filterable;
+        this.selectedValues = new Set();
         /**
          * Handle click on the input container.
          * @param {MouseEvent} event - The click event.
@@ -96,24 +153,6 @@ const NVFieldDropDown = class {
                 this.popoverElement.hide();
             }
         };
-        this.inputId = v4.v4();
-        this.label = undefined;
-        this.description = undefined;
-        this.placeholder = undefined;
-        this.name = undefined;
-        this.open = false;
-        this.autocomplete = 'off';
-        this.value = undefined;
-        this.required = false;
-        this.error = false;
-        this.errorDescription = undefined;
-        this.readonly = false;
-        this.disabled = false;
-        this.emptyresult = 'No results found';
-        this.filterText = '';
-        this.filterable = false;
-        this.isFilterable = this.filterable;
-        this.selectedValues = new Set();
     }
     handleItemSelected(event) {
         if (this.disabled || this.readonly)
@@ -144,28 +183,39 @@ const NVFieldDropDown = class {
         this.isFilterable = newValue;
         this.filterable = newValue;
     }
-    watchValueHandler() {
-        // Handle value change and update the corresponding dropdown item if it exists
-        this.setInitialSelection();
+    watchValueHandler(newValue) {
+        if (newValue) {
+            this.updateSelectedItem(newValue);
+        }
     }
     //#endregion EVENTS
     /****************************************************************************/
     //#region METHODS
+    componentWillLoad() {
+        if (this.value) {
+            // If an initial value exists, set it as selected
+            this.updateSelectedItem(this.value);
+        }
+    }
+    componentDidLoad() {
+        document.addEventListener('click', this.handleClickOutside.bind(this));
+        // Check again after complete rendering
+        if (this.value) {
+            this.updateSelectedItem(this.value);
+        }
+    }
     /**
      * Subscribe to click outside event.
      */
     connectedCallback() {
         document.addEventListener('click', this.handleClickOutside.bind(this));
-        // Handle pre-selection during component initialization
+        // First, reset the filter to ensure all elements are visible
+        this.resetFilter();
+        // Then, handle the pre-selection
         this.setInitialSelection();
-        // Apply filtering if the dropdown is filterable and there is a value
-        if (this.filterable && this.value) {
-            this.filterText = this.value.toLowerCase();
-            this.filterItems(); // Update the visibility of items
-        }
-        else {
-            // Ensure all items are visible if no filtering is applied
-            this.resetFilter();
+        // Finally, apply the filter if needed
+        if (this.filterable && this.filterText) {
+            this.filterItems();
         }
     }
     /**
@@ -180,16 +230,13 @@ const NVFieldDropDown = class {
                 item.getAttribute('value') === this.value ||
                 ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === this.value;
         });
-        // Remove 'selected' from all items first to reset the state
         items.forEach(item => {
             item.removeAttribute('selected');
             item.classList.remove('selected');
         });
         if (selectedItem) {
-            // Add the `selected` attribute and `selected` class for visual styling
             selectedItem.setAttribute('selected', 'true');
             selectedItem.classList.add('selected');
-            // Update the value and inputElement value to reflect the pre-selected item
             this.value =
                 selectedItem.getAttribute('label') ||
                     selectedItem.getAttribute('value') ||
@@ -199,6 +246,9 @@ const NVFieldDropDown = class {
                 this.inputElement.value = this.value;
             }
         }
+        else {
+            console.warn('No matching item found for value:', this.value);
+        }
     }
     /**
      * Unsubscribe from click outside event.
@@ -264,10 +314,9 @@ const NVFieldDropDown = class {
     handleClickOutside(event) {
         if (this.el.contains(event.target) ||
             (this.inputElement && this.inputElement.contains(event.target))) {
-            // If the click is inside the component or on the input, do not close the popover
             return;
         }
-        this.popoverElement.hide(); // Close the popover if the click is outside the component
+        this.popoverElement.hide();
     }
     handleKeyDown(event) {
         if (!this.open) {
@@ -323,9 +372,6 @@ const NVFieldDropDown = class {
             if (i === index) {
                 item.classList.add('highlighted');
                 item.setAttribute('tabindex', '0');
-                if (!item.checkVisibility()) {
-                    console.log('Item not focused');
-                }
                 item.focus(); // Forcer le focus ici
                 item.scrollIntoView({ block: 'nearest' });
             }
@@ -345,13 +391,45 @@ const NVFieldDropDown = class {
             console.warn('No first item found to focus');
         }
     }
+    updateSelectedItem(value) {
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
+        // Reset all items
+        items.forEach(item => {
+            item.removeAttribute('selected');
+            item.classList.remove('selected');
+        });
+        // Find the item matching the value
+        const matchingItem = items.find(item => {
+            var _a;
+            const itemLabel = item.getAttribute('label');
+            const itemValue = item.getAttribute('value');
+            const itemText = (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+            return itemLabel === value || itemValue === value || itemText === value;
+        });
+        if (matchingItem) {
+            // Mark the item as selected
+            matchingItem.setAttribute('selected', 'true');
+            matchingItem.classList.add('selected');
+            // Update the input
+            if (this.inputElement) {
+                this.inputElement.value = value;
+            }
+            // Emit the selection event
+            this.dropdownItemSelected.emit({
+                value: value,
+                label: matchingItem.getAttribute('label') || value,
+                selected: true,
+                disabled: matchingItem.hasAttribute('disabled'),
+            });
+        }
+    }
     //#endregion METHODS
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'ee220f04cb94b18afa0504938ee269c0edb1d1b5' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '9cf2035bcef627718cb0e9cda9f10d1deb829201', htmlFor: this.inputId }, index.h("slot", { key: '6fe8d6dadee22c489696fbd94067398f5b22f8a7', name: "label" }, this.label))), index.h("nv-popover", { key: 'c96697a489ceb13a600f63e1496dcc2cedf6baa7', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '0a996e770694e7521e57007f5b3a9272ef9ad485', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '41b6e77ce228cd4aedbffbb440bf375c82e05c30', name: "before-input" }), index.h("div", { key: 'ffdeba473c57672b13577a225c0b2cc436df2c12', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '14af93b626704024c44371934cc1b4b49b068ac7', name: "leading-input" }), this.isFilterable || this.disabled || this.readonly ? (index.h("input", { id: this.inputId, type: "search", ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyDown: this.handleKeyDown })) : (index.h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, index.h("span", null, this.value || this.placeholder))), index.h("nv-iconbutton", { key: '961e3b20bb234ba3c24e8e5389154245ae35fdb9', class: "toggle-dropdown-icon", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover })), index.h("slot", { key: '37f6b2288683f0b2e16e553b66e5a534a0d372f6', name: "after-input" })), index.h("slot", { key: 'd7c7ad38d9f486408858a68c1cba7e9c6ae8788f', name: "content" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '6a4d137ba434bb2d36bc74b6f4cb442274857716', class: "description" }, index.h("slot", { key: 'd2e85ddebab03a8a752c0f7558b57f35d2e30b85', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'b05d210c0e0a43ce8bd96849f7556f1accd691fb', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '7d455d5027589ccad7cdccf5ce0e0cc25a7ac7bd', name: "error-description" }, this.errorDescription)))));
+        return (index.h(index.Host, { key: '2ff0476929b58734a50c303ebb6ad308f0c41602' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '87756cac62747e76d851813426c4aa560b6a5a4e', htmlFor: this.inputId }, index.h("slot", { key: 'ae2d7374b524274e86777639cd1ad5cbc5c57404', name: "label" }, this.label))), index.h("nv-popover", { key: 'ed58d72aab9b23f25cd4ec8359ce7148a43fb22e', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'ae3e65b9274c56f012e9798f549ee62063879688', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '1fc77f160aebd9e21c8a79406ec1e829bd3c9265', name: "before-input" }), index.h("div", { key: '7502dc9df91a3b91bf1bb448e9f3cbee9f356f80', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '50acd86050d4357c8e7af3c8464ad34cb73382ad', name: "leading-input" }), this.isFilterable || this.disabled || this.readonly ? (index.h("input", { id: this.inputId, type: "search", ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyDown: this.handleKeyDown })) : (index.h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, index.h("span", null, this.value || this.placeholder))), index.h("nv-iconbutton", { key: '2f8c2773754656835583484e2fa7acc0fabcffb6', class: "toggle-dropdown-icon", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover })), index.h("slot", { key: '26d4de108aa80b931f03201adc7b2470dc9ed526', name: "after-input" })), index.h("slot", { key: 'b9a39773f100d2579b2a9e568c19fabbbabbcefe', name: "content" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '220b815bc502ff4f18fe40471139efc808f6a31b', class: "description" }, index.h("slot", { key: '6d0bfc07e3c5c5329d38e447f0c3a1974663e15b', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '0cc511a914c00de65ee9f0f2033e292b9123620c', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'f442db41fdde383abc0873bafbaabba8be1387b3', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }