@nova-design-system/nova-webcomponents 3.0.0-beta.36 → 3.0.0-beta.37

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

@@ -0,0 +1,267 @@
+import { h, Host, Fragment, } from "@stencil/core";
+/**
+ * @slot default - Custom content for the dialog footer. When provided, the default buttons will not be rendered.
+ */
+export class NvDialogfooter {
+    constructor() {
+        this.hasSlot = false;
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Disables the confirm button, preventing user interaction.
+         */
+        this.disabled = false;
+        /**
+         * Controls the visibility of the cancel button. When true, the cancel button is
+         * hidden.
+         */
+        this.undismissable = false;
+        /**
+         * Sets the leading icon for the submit button.
+         */
+        this.leadingIcon = '';
+        /**
+         * Sets the trailing icon for the submit button.
+         */
+        this.trailingIcon = '';
+        /**
+         * Sets the danger state for the submit button.
+         */
+        this.danger = false;
+        /**
+         * Sets the label for the cancel button.
+         */
+        this.cancelLabel = 'Cancel';
+        /**
+         * Sets the label for the submit button.
+         */
+        this.submitLabel = 'Submit';
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * Handles the submit action when the submit button is clicked.
+         * @param {Event} event - The click event.
+         */
+        this.handleConfirm = (event) => {
+            event.stopPropagation();
+            this.nvDialogConfirmed.emit();
+        };
+        /**
+         * Handles the cancel action when the cancel button is clicked. This will close the dialog.
+         * @param {Event} event - The click event.
+         */
+        this.handleCancel = (event) => {
+            event.stopPropagation();
+            this.nvDialogCanceled.emit();
+        };
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        // Check if there are any child elements that don't have a slot attribute
+        this.hasSlot = Array.from(this.el.childNodes).some(node => {
+            return (node.nodeType === Node.ELEMENT_NODE &&
+                !node.hasAttribute('slot'));
+        });
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: 'd8e7012231c3afdd987561eaf19568012a13c28b' }, !this.hasSlot ? (h(Fragment, null, !this.undismissable && (h("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), h("nv-button", { onClick: this.handleConfirm, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", type: "submit" }, this.leadingIcon && (h("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.submitLabel, this.trailingIcon && (h("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (h("slot", null))));
+    }
+    static get is() { return "nv-dialogfooter"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-dialogfooter.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-dialogfooter.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the confirm button, preventing user interaction."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "undismissable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the visibility of the cancel button. When true, the cancel button is\nhidden."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "undismissable",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "leadingIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the leading icon for the submit button."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "leading-icon",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "trailingIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the trailing icon for the submit button."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "trailing-icon",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "danger": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the danger state for the submit button."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "danger",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "cancelLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the label for the cancel button."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "cancel-label",
+                "reflect": true,
+                "defaultValue": "'Cancel'"
+            },
+            "submitLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the label for the submit button."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "submit-label",
+                "reflect": true,
+                "defaultValue": "'Submit'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "nvDialogCanceled",
+                "name": "nvDialogCanceled",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the cancel button is clicked. This will close the dialog."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "nvDialogConfirmed",
+                "name": "nvDialogConfirmed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the submit button is clicked. This allows to handle the submit action and potential data capture before closing the dialog."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=nv-dialogfooter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-dialogfooter.js","sourceRoot":"","sources":["../../../src/components/nv-dialogfooter/nv-dialogfooter.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  AttachInternals,\n  Component,\n  h,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Fragment,\n  Element,\n} from '@stencil/core';\n\n/**\n * @slot default - Custom content for the dialog footer. When provided, the default buttons will not be rendered.\n */\n@Component({\n  tag: 'nv-dialogfooter',\n  styleUrl: 'nv-dialogfooter.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvDialogfooter {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvDialogfooterElement;\n  private hasSlot = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Disables the confirm button, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Controls the visibility of the cancel button. When true, the cancel button is\n   * hidden.\n   */\n  @Prop({ reflect: true })\n  readonly undismissable: boolean = false;\n\n  /**\n   * Sets the leading icon for the submit button.\n   */\n  @Prop({ reflect: true })\n  readonly leadingIcon: string = '';\n\n  /**\n   * Sets the trailing icon for the submit button.\n   */\n  @Prop({ reflect: true })\n  readonly trailingIcon: string = '';\n\n  /**\n   * Sets the danger state for the submit button.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\n\n  /**\n   * Sets the label for the cancel button.\n   */\n  @Prop({ reflect: true })\n  readonly cancelLabel: string = 'Cancel';\n\n  /**\n   * Sets the label for the submit button.\n   */\n  @Prop({ reflect: true })\n  readonly submitLabel: string = 'Submit';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the cancel button is clicked. This will close the dialog.\n   */\n  @Event()\n  public nvDialogCanceled: EventEmitter<void>;\n\n  /**\n   * Emitted when the submit button is clicked. This allows to handle the submit action and potential data capture before closing the dialog.\n   */\n  @Event()\n  public nvDialogConfirmed: EventEmitter<void>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the submit action when the submit button is clicked.\n   * @param {Event} event - The click event.\n   */\n\n  private handleConfirm = (event: Event) => {\n    event.stopPropagation();\n    this.nvDialogConfirmed.emit();\n  };\n\n  /**\n   * Handles the cancel action when the cancel button is clicked. This will close the dialog.\n   * @param {Event} event - The click event.\n   */\n  private handleCancel = (event: Event) => {\n    event.stopPropagation();\n    this.nvDialogCanceled.emit();\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    // Check if there are any child elements that don't have a slot attribute\n    this.hasSlot = Array.from(this.el.childNodes).some(node => {\n      return (\n        node.nodeType === Node.ELEMENT_NODE &&\n        !(node as Element).hasAttribute('slot')\n      );\n    });\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {!this.hasSlot ? (\n          <Fragment>\n            {!this.undismissable && (\n              <nv-button onClick={this.handleCancel} emphasis=\"low\" size=\"sm\">\n                {this.cancelLabel}\n              </nv-button>\n            )}\n            <nv-button\n              onClick={this.handleConfirm}\n              disabled={this.disabled}\n              danger={this.danger}\n              size=\"sm\"\n              emphasis=\"high\"\n              type=\"submit\"\n            >\n              {this.leadingIcon && (\n                <nv-icon\n                  slot=\"leading-icon\"\n                  name={this.leadingIcon}\n                  size=\"sm\"\n                />\n              )}\n              {this.submitLabel}\n              {this.trailingIcon && (\n                <nv-icon\n                  slot=\"trailing-icon\"\n                  name={this.trailingIcon}\n                  size=\"sm\"\n                />\n              )}\n            </nv-button>\n          </Fragment>\n        ) : (\n          <slot></slot>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

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

@@ -0,0 +1,25 @@
+nv-dialogheader {
+  padding: var(--dialog-header-padding-top) var(--dialog-header-padding-x) var(--dialog-header-padding-bottom) var(--dialog-header-padding-x);
+  justify-content: space-between;
+  align-items: flex-start;
+  align-self: stretch;
+}
+nv-dialogheader .heading {
+  color: var(--color-content-high-text);
+  /* heading/xs/medium */
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--font-size-lg);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--leading-px-6); /* 133.333% */
+  letter-spacing: var(--letter-spacing-heading-xs);
+}
+nv-dialogheader .subheading {
+  color: var(--color-content-low-text);
+  /* text/sm/regular */
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--font-size-sm);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--line-height-sm); /* 142.857% */
+}

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

@@ -0,0 +1,6 @@
+const NvDialogheaderDocs = {
+    component: 'nv-dialogheader',
+    skip: true,
+};
+export default NvDialogheaderDocs;
+//# sourceMappingURL=nv-dialogheader.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-dialogheader.docs.js","sourceRoot":"","sources":["../../../src/components/nv-dialogheader/nv-dialogheader.docs.tsx"],"names":[],"mappings":"AAGA,MAAM,kBAAkB,GAAwC;IAC9D,SAAS,EAAE,iBAAiB;IAC5B,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvDialogheaderDocs: NovaDocs<Components.NvDialogheader> = {\n  component: 'nv-dialogheader',\n  skip: true,\n};\n\nexport default NvDialogheaderDocs;\n"]}

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

@@ -0,0 +1,87 @@
+import { Host, h, Fragment } from "@stencil/core";
+/**
+ * @slot default - Custom content for the dialog header. When provided, the default header will not be rendered.
+ */
+export class NvDialogheader {
+    constructor() {
+        this.hasSlot = false;
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the heading text for the dialog.
+         */
+        this.heading = 'Dialog Title';
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        // Check if there are any child elements that don't have a slot attribute
+        this.hasSlot = Array.from(this.el.childNodes).some(node => {
+            return (node.nodeType === Node.ELEMENT_NODE &&
+                !node.hasAttribute('slot'));
+        });
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '57c18e06633951d2d82006d5b28cf863e9414bf4' }, !this.hasSlot ? (h(Fragment, null, h("div", { class: "heading" }, this.heading), h("div", { class: "subheading" }, this.subheading))) : (h("slot", null))));
+    }
+    static get is() { return "nv-dialogheader"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-dialogheader.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-dialogheader.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the heading text for the dialog."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "heading",
+                "reflect": true,
+                "defaultValue": "'Dialog Title'"
+            },
+            "subheading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the subheading text for the dialog."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "subheading",
+                "reflect": true
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=nv-dialogheader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-dialogheader.js","sourceRoot":"","sources":["../../../src/components/nv-dialogheader/nv-dialogheader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE5E;;GAEG;AAMH,MAAM,OAAO,cAAc;IAL3B;QAOU,YAAO,GAAG,KAAK,CAAC;QAExB,8EAA8E;QAC9E,oBAAoB;QAEpB;;WAEG;QAEM,YAAO,GAAW,cAAc,CAAC;KA0C3C;IAlCC,uBAAuB;IACvB,8EAA8E;IAC9E,mBAAmB;IAEnB,iBAAiB;QACf,yEAAyE;QACzE,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACxD,OAAO,CACL,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;gBACnC,CAAE,IAAgB,CAAC,YAAY,CAAC,MAAM,CAAC,CACxC,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IAED,sBAAsB;IACtB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACf,EAAC,QAAQ;YACP,WAAK,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAO;YACzC,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,UAAU,CAAO,CACtC,CACZ,CAAC,CAAC,CAAC,CACF,eAAa,CACd,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","sourcesContent":["import { Component, Host, Prop, h, Element, Fragment } from '@stencil/core';\n\n/**\n * @slot default - Custom content for the dialog header. When provided, the default header will not be rendered.\n */\n@Component({\n  tag: 'nv-dialogheader',\n  styleUrl: 'nv-dialogheader.scss',\n  shadow: false,\n})\nexport class NvDialogheader {\n  @Element() el: HTMLNvDialogheaderElement;\n  private hasSlot = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the heading text for the dialog.\n   */\n  @Prop({ reflect: true })\n  readonly heading: string = 'Dialog Title';\n\n  /**\n   * Sets the subheading text for the dialog.\n   */\n  @Prop({ reflect: true })\n  readonly subheading: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    // Check if there are any child elements that don't have a slot attribute\n    this.hasSlot = Array.from(this.el.childNodes).some(node => {\n      return (\n        node.nodeType === Node.ELEMENT_NODE &&\n        !(node as Element).hasAttribute('slot')\n      );\n    });\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {!this.hasSlot ? (\n          <Fragment>\n            <div class=\"heading\">{this.heading}</div>\n            <div class=\"subheading\">{this.subheading}</div>\n          </Fragment>\n        ) : (\n          <slot></slot>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

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

@@ -76,7 +76,7 @@ nv-fieldcheckbox .input-container input[type=checkbox]:focus, nv-fieldcheckbox .
   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: calc(var(--focus-outline-stroke) * 1) 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 {

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

@@ -33,6 +33,7 @@ export class NvFieldcheckbox {
         /**
          * Signals that there is an error associated with the checkbox, which can
          * trigger visual cues.
+         * @validator error
          */
         this.error = false;
         /**
@@ -59,27 +60,9 @@ export class NvFieldcheckbox {
          */
         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);
-    }
+    //#region LISTENERS
     /**
      * Listens for the change event on the checkbox input element and updates the
      * checked state.
@@ -98,19 +81,45 @@ export class NvFieldcheckbox {
             this.checked = target.checked;
         }
     }
+    //#endregion LISTENERS
+    /****************************************************************************/
+    //#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);
+    }
     //#endregion WATCHERS
     /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillRender() {
+        if (this.message) {
+            this.description = this.message;
+        }
+        if (this.labelBefore) {
+            this.labelPlacement = 'before';
+        }
+        if (this.validation) {
+            this.errorDescription = this.validation;
+            this.error = true;
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'dee6fd99a2e97591189c8a6bdce3c8909b4ceb97', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("div", { key: 'dd6ab7f4cddd11c89cc15249290fe43d83a669ab', class: "input-container" }, 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 => {
+        return (h(Host, { key: 'e2cfa1c1852963dd0a7cfeb0c8922e863838d306', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("div", { key: '3404c7fa3a6291ca44c46df97c4c0e5f8841c183', class: "input-container" }, h("input", { key: 'd1e19cb0980c42895e75cfe02682b9247068fac1', 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: 'ac87b7d83e5731da6ce8f9990a1d55bd247cb750', class: "icon" }, this.checked && !this.indeterminate && (h("slot", { key: '911e69045129dc8755fea438570858f338a18ad3', name: "checked-icon" }, h("svg", { key: 'de2e547ac9ab00c52ee9c924fdb4e24cf0321158', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: '10dc26b32951b18a6bd29482349894bf1ca87bd8', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (h("slot", { key: '7e957be646aa6a96f94e0cf70b5ef88b8037e07e', name: "indeterminate-icon" }, h("svg", { key: 'd132aabc77f0dcf5c67377a60004b72307cf61ba', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: '353c950a9d8d14c32e276e393c9314374d10337f', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: 'a14fc39e16a9dcee74e722a361fcc8df63fad5d6', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '13a9fee6f1c4aea8735eca27f36944d6c26cf7f2', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: 'dbbce25b8f65d2b12d10e419f94ae56ef2d0c355', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '3647cdaa6a4ec2cacab7b2c1fe731e3454746648', class: "description" }, h("slot", { key: '19dff40045f22c6403029731a0a628455b831c5c', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'dd78ae62d1a1cd6c2a9b41d32740321cb1f36f2a', hidden: !this.error, class: "error-description" }, h("slot", { key: '1e4d1c10387aaea37c87111c43c84cd204ca1619', name: "error-description" }, this.errorDescription))))));
+            } }), h("span", { key: '36763dc1a6895f1f3cfa67bad6beaf9df75c0e42', class: "icon" }, this.checked && !this.indeterminate && (h("slot", { key: '8991155af383d94aceaaa692c0e14113867bff11', name: "checked-icon" }, h("svg", { key: '9103f809481495676417216201952a7ceab2a104', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: '1e22abf1f34fc5dfa40d63da1d193f0de2a64a19', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (h("slot", { key: '69b67227f1061b43990c6d730c2f50e4c409bbc7', name: "indeterminate-icon" }, h("svg", { key: 'e5ea7ec7309102b980d3a6d8b77b5250c3efbbb7', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: '594493f97b46bb4c652d2fbc7f851eb913ce81b3', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: '93862e8b1ae3be930ac05ea53ba51128e4dd3810', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '21b5023d3a84695b17cbfc19d9aab8f56ec380b5', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '52ed9dfe69a442aeea95406e8520ba3ad457f712', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '4151d56507a8f7daa87820eeb161209ccd5cec37', class: "description" }, h("slot", { key: 'a511f6cada8055b9b731a86a3f6dfff2aca48953', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '0f0ac4c183fa4c78074b4a7dc0c05ceb7737bbe9', hidden: !this.error, class: "error-description" }, h("slot", { key: '2de4e9fec5258eb70e3169612c3ee2667dd59f7b', name: "error-description" }, this.errorDescription))))));
     }
     static get is() { return "nv-fieldcheckbox"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["nv-fieldcheckbox.scss"]
@@ -158,7 +167,7 @@ export class NvFieldcheckbox {
                 "docs": {
                     "tags": [{
                             "name": "deprecated",
-                            "text": "Use `errorDescription` instead."
+                            "text": "Use `errorDescription` and set the error prop instead."
                         }],
                     "text": "The text for the validation message."
                 },
@@ -271,13 +280,13 @@ export class NvFieldcheckbox {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "`${FieldLabelPlacement}`",
+                    "original": "`${LabelPlacement}`",
                     "resolved": "\"after\" | \"before\"",
                     "references": {
-                        "FieldLabelPlacement": {
+                        "LabelPlacement": {
                             "location": "import",
                             "path": "../../utils/constants",
-                            "id": "src/utils/constants.ts::FieldLabelPlacement"
+                            "id": "src/utils/constants.ts::LabelPlacement"
                         }
                     }
                 },
@@ -333,7 +342,7 @@ export class NvFieldcheckbox {
             },
             "error": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -342,7 +351,10 @@ export class NvFieldcheckbox {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "validator",
+                            "text": "error"
+                        }],
                     "text": "Signals that there is an error associated with the checkbox, which can\ntrigger visual cues."
                 },
                 "getter": false,
@@ -362,7 +374,10 @@ export class NvFieldcheckbox {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "validator",
+                            "text": "message"
+                        }],
                     "text": "A description that appears when there is an error related to the checkbox."
                 },
                 "getter": false,

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

@@ -1 +1 @@
-{"version":3,"file":"nv-fieldcheckbox.js","sourceRoot":"","sources":["../../../src/components/nv-fieldcheckbox/nv-fieldcheckbox.tsx"],"names":[],"mappings":"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","sourcesContent":["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.js","sourceRoot":"","sources":["../../../src/components/nv-fieldcheckbox/nv-fieldcheckbox.tsx"],"names":[],"mappings":"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","sourcesContent":["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 LabelPlacement } 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  formAssociated: true,\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` and set the error prop 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  //#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: `${LabelPlacement}`;\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   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the checkbox.\n   * @validator message\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 LISTENERS\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 LISTENERS\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  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\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      this.error = true;\n    }\n  }\n\n  //#endregion LIFECYCLE\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"]}