@nova-design-system/nova-react 3.0.0-beta.42 → 3.0.0-beta.44

package/dist/cjs/nv-dialogfooter_2.entry-L5tHIb_T.js

@@ -0,0 +1,134 @@
+'use strict';
+
+var index = require('./index-B_VOAJzk.js');
+var constants98e2dcc2 = require('./constants-98e2dcc2-C0SBCapP.js');
+require('react');
+
+const nvDialogfooterCss = "nv-dialogfooter{display:flex;padding:var(--dialog-footer-padding-top) var(--dialog-footer-padding-x) var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);justify-content:flex-end;align-items:flex-end;gap:var(--dialog-footer-gap-y);align-self:stretch}";
+const NvDialogfooterStyle0 = nvDialogfooterCss;
+
+const NvDialogfooter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dialogCanceled = index.createEvent(this, "dialogCanceled");
+        this.dialogPrimaryClicked = index.createEvent(this, "dialogPrimaryClicked");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        this.hasSlot = false;
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Disables the primary 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 primary button.
+         */
+        this.leadingIcon = '';
+        /**
+         * Sets the trailing icon for the primary button.
+         */
+        this.trailingIcon = '';
+        /**
+         * Sets the danger state for the primary button.
+         */
+        this.danger = false;
+        /**
+         * Sets the label for the cancel button.
+         */
+        this.cancelLabel = 'Cancel';
+        /**
+         * Sets the label for the primary button.
+         */
+        this.primaryLabel = 'Primary';
+        /**
+         * Sets the type of the primary button.
+         */
+        this.primaryButtonType = constants98e2dcc2.ButtonType.Button;
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * Handles the primary action when the primary button is clicked.
+         * @param {Event} event - The click event.
+         */
+        this.handlePrimary = (event) => {
+            event.stopPropagation();
+            this.dialogPrimaryClicked.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.dialogCanceled.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 (index.h(index.Host, { key: '20d86d12b859505ed088fc21ee04d8ee1d9bbb81' }, !this.hasSlot ? (index.h(index.Fragment, null, !this.undismissable && (index.h("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), index.h("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (index.h("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (index.h("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (index.h("slot", null))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+};
+NvDialogfooter.style = NvDialogfooterStyle0;
+
+const nvDialogheaderCss = "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);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);letter-spacing:var(--letter-spacing-heading-xs)}nv-dialogheader .subheading{color:var(--color-content-low-text);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);}";
+const NvDialogheaderStyle0 = nvDialogheaderCss;
+
+const NvDialogheader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        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 (index.h(index.Host, { key: '6840a5af95a0534339bc0682d829c33d7376a79a' }, !this.hasSlot ? (index.h(index.Fragment, null, index.h("div", { class: "heading" }, this.heading), index.h("div", { class: "subheading" }, this.subheading))) : (index.h("slot", null))));
+    }
+    get el() { return index.getElement(this); }
+};
+NvDialogheader.style = NvDialogheaderStyle0;
+
+exports.nv_dialogfooter = NvDialogfooter;
+exports.nv_dialogheader = NvDialogheader;

package/dist/cjs/nv-dialogfooter_2.entry-kEa1K0n5.js

@@ -0,0 +1,134 @@
+'use strict';
+
+var index = require('./index-CEWbQ5nh.js');
+var constants98e2dcc2 = require('./constants-98e2dcc2-C0SBCapP.js');
+require('react');
+
+const nvDialogfooterCss = "nv-dialogfooter{display:flex;padding:var(--dialog-footer-padding-top) var(--dialog-footer-padding-x) var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);justify-content:flex-end;align-items:flex-end;gap:var(--dialog-footer-gap-y);align-self:stretch}";
+const NvDialogfooterStyle0 = nvDialogfooterCss;
+
+const NvDialogfooter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dialogCanceled = index.createEvent(this, "dialogCanceled");
+        this.dialogPrimaryClicked = index.createEvent(this, "dialogPrimaryClicked");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        this.hasSlot = false;
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Disables the primary 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 primary button.
+         */
+        this.leadingIcon = '';
+        /**
+         * Sets the trailing icon for the primary button.
+         */
+        this.trailingIcon = '';
+        /**
+         * Sets the danger state for the primary button.
+         */
+        this.danger = false;
+        /**
+         * Sets the label for the cancel button.
+         */
+        this.cancelLabel = 'Cancel';
+        /**
+         * Sets the label for the primary button.
+         */
+        this.primaryLabel = 'Primary';
+        /**
+         * Sets the type of the primary button.
+         */
+        this.primaryButtonType = constants98e2dcc2.ButtonType.Button;
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * Handles the primary action when the primary button is clicked.
+         * @param {Event} event - The click event.
+         */
+        this.handlePrimary = (event) => {
+            event.stopPropagation();
+            this.dialogPrimaryClicked.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.dialogCanceled.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 (index.h(index.Host, { key: '11bfb772cb942d91363b9636f0baf10d33ce6bbd' }, !this.hasSlot ? (index.h(index.Fragment, null, !this.undismissable && (index.h("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), index.h("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (index.h("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (index.h("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (index.h("slot", null))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+};
+NvDialogfooter.style = NvDialogfooterStyle0;
+
+const nvDialogheaderCss = "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);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);letter-spacing:var(--letter-spacing-heading-xs)}nv-dialogheader .subheading{color:var(--color-content-low-text);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);}";
+const NvDialogheaderStyle0 = nvDialogheaderCss;
+
+const NvDialogheader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        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 (index.h(index.Host, { key: '7658d8f0517e63b3688b938108e8c3a6df788a77' }, !this.hasSlot ? (index.h(index.Fragment, null, index.h("div", { class: "heading" }, this.heading), index.h("div", { class: "subheading" }, this.subheading))) : (index.h("slot", null))));
+    }
+    get el() { return index.getElement(this); }
+};
+NvDialogheader.style = NvDialogheaderStyle0;
+
+exports.nv_dialogfooter = NvDialogfooter;
+exports.nv_dialogheader = NvDialogheader;

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

@@ -0,0 +1,137 @@
+'use strict';
+
+var index = require('./index-B_VOAJzk.js');
+var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+require('react');
+
+const nvFieldcheckboxCss = "nv-fieldcheckbox{--nv-fieldcheckbox-border-default:var(\n    --components-form-field-border-default\n  );--nv-fieldcheckbox-border-hover:var(--components-form-field-border-hover);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-default);--nv-fieldcheckbox-background-default:var(\n    --components-form-field-background-default\n  );--nv-fieldcheckbox-background-checked:var(\n    --components-form-field-background-checked\n  );--nv-fieldcheckbox-background-disabled:var(\n    --components-form-field-background-disabled\n  );--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-brand);--nv-fieldcheckbox-color-checked:var(\n    --components-form-shape-foreground-default\n  );--nv-fieldcheckbox-color-disabled:var(\n    --components-form-shape-foreground-disabled\n  );--nv-fieldcheckbox-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-fieldcheckbox:not([disabled],[readonly]) input,nv-fieldcheckbox:not([disabled],[readonly]) label{cursor:pointer}nv-fieldcheckbox.error>.input-container{--nv-fieldcheckbox-border-default:var(--components-form-field-border-error);--nv-fieldcheckbox-border-hover:var(--nv-fieldcheckbox-border-default);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-error);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-destructive);--nv-fieldcheckbox-color-disabled:var(\n    --components-form-shape-foreground-disabled-error\n  );--nv-fieldcheckbox-background-checked:var(\n    --components-form-field-background-error\n  );--nv-fieldcheckbox-outline-color:var(--color-focus-destructive)}nv-fieldcheckbox.label-placement-before{flex-direction:row-reverse}nv-fieldcheckbox[disabled]:not([disabled=false]){opacity:0.5}nv-fieldcheckbox>.input-container{position:relative;color:var(--nv-fieldcheckbox-color-checked)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-fieldcheckbox-color-disabled)}nv-fieldcheckbox>.input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-fieldcheckbox-border-default);background:var(--nv-fieldcheckbox-background-default)}nv-fieldcheckbox>.input-container input[type=checkbox]:hover{border-color:var(--nv-fieldcheckbox-border-hover)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus{border-color:var(--nv-fieldcheckbox-border-focus)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus,nv-fieldcheckbox>.input-container input[type=checkbox]:focus-within{outline:none}nv-fieldcheckbox>.input-container input[type=checkbox]:focus-visible,nv-fieldcheckbox>.input-container input[type=checkbox]:has(:focus-visible){outline: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{background:var(--nv-fieldcheckbox-background-checked);border-color:var(--nv-fieldcheckbox-background-checked)}nv-fieldcheckbox>.input-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-fieldcheckbox-background-disabled);border-color:var(--nv-fieldcheckbox-border-default)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-fieldcheckbox>.input-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}nv-fieldcheckbox>.text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}nv-fieldcheckbox>.text-container label{align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}nv-fieldcheckbox>.text-container .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height)}nv-fieldcheckbox>.text-container .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
+const NvFieldcheckboxStyle0 = nvFieldcheckboxCss;
+
+const NvFieldcheckbox = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.checkedChanged = index.createEvent(this, "checkedChanged");
+        /**
+         * 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 = v4A79185f4.v4();
+        /**
+         * Hides the label visually while still keeping it available for screen
+         * readers.
+         */
+        this.hideLabel = false;
+        /**
+         * Signals that there is an error associated with the checkbox, which can
+         * trigger visual cues.
+         * @validator error
+         */
+        this.error = false;
+        /**
+         * 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;
+        /**
+         * Applies focus to the input field as soon as the component is mounted. This
+         * is equivalent to setting the native autofocus attribute on an <input>
+         * element.
+         */
+        this.autofocus = false;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region LISTENERS
+    /**
+     * Listens for the change event on the checkbox input element and updates the
+     * checked state.
+     * @param {Event} event - The change event.
+     */
+    handleChange(event) {
+        const target = event.target;
+        if (target.type === 'checkbox' && target.id === this.inputId) {
+            if (this.readonly || this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            if (this.indeterminate) {
+                this.indeterminate = false;
+            }
+            this.checked = target.checked;
+        }
+    }
+    //#endregion 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 (index.h(index.Host, { key: 'de53d56a14565faed09432cf9caa2ac04009a395', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("div", { key: '1b2eaf318015983b76354a0f98ca659748defaf2', class: "input-container" }, index.h("input", { key: '949928601227543717db9cec038e6f55efa618d1', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, 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: '6e969279cb7279a1fbe6c1112e77139d274eccfd', class: "icon" }, this.checked && !this.indeterminate && (index.h("slot", { key: '9655696bf7ecda02105f4ab68743800fec0c6500', name: "checked-icon" }, index.h("svg", { key: '1fe56dea643795713cc6df292757256d89a7ae11', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: 'd3ee68e0b4199591794ba39b4cc6aa4b24e61ee6', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (index.h("slot", { key: 'c598b604c2c3aec0c1d36d36ff243972b33d4f77', name: "indeterminate-icon" }, index.h("svg", { key: '38eb1768bc6e5d7b5dfdcaafbc39a7618500a1d4', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '06170fa3c62bb8793ea76ea30925d1a2b3520a77', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("div", { key: '375979126e20eea97fde15f7c3b9237880f40766', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'abe195bf795d754abd5462605440e2fa40c756e1', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '7c25e043ab0bb79cc51594336dfce76086b6c901', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '365c2da85957590b6c365b95c78309711dec1fc7', class: "description" }, index.h("slot", { key: '4f95fa143036d8f701cce9e2bd29036414426f38', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'c7db38efbfcfb30d8de8ccad513e96019ade14be', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'c0ecad03278dc4ebbb43a3b30ff00c5be5051f6e', name: "error-description" }, this.errorDescription))))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "checked": ["onCheckedChanged"]
+    }; }
+};
+NvFieldcheckbox.style = NvFieldcheckboxStyle0;
+
+exports.nv_fieldcheckbox = NvFieldcheckbox;

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

@@ -0,0 +1,137 @@
+'use strict';
+
+var index = require('./index-BZCQTWfv.js');
+var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+require('react');
+
+const nvFieldcheckboxCss = "nv-fieldcheckbox{--nv-fieldcheckbox-border-default:var(\n    --components-form-field-border-default\n  );--nv-fieldcheckbox-border-hover:var(--components-form-field-border-hover);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-default);--nv-fieldcheckbox-background-default:var(\n    --components-form-field-background-default\n  );--nv-fieldcheckbox-background-checked:var(\n    --components-form-field-background-checked\n  );--nv-fieldcheckbox-background-disabled:var(\n    --components-form-field-background-disabled\n  );--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-brand);--nv-fieldcheckbox-color-checked:var(\n    --components-form-shape-foreground-default\n  );--nv-fieldcheckbox-color-disabled:var(\n    --components-form-shape-foreground-disabled\n  );--nv-fieldcheckbox-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-fieldcheckbox:not([disabled],[readonly]) input,nv-fieldcheckbox:not([disabled],[readonly]) label{cursor:pointer}nv-fieldcheckbox.error>.input-container{--nv-fieldcheckbox-border-default:var(--components-form-field-border-error);--nv-fieldcheckbox-border-hover:var(--nv-fieldcheckbox-border-default);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-error);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-destructive);--nv-fieldcheckbox-color-disabled:var(\n    --components-form-shape-foreground-disabled-error\n  );--nv-fieldcheckbox-background-checked:var(\n    --components-form-field-background-error\n  );--nv-fieldcheckbox-outline-color:var(--color-focus-destructive)}nv-fieldcheckbox.label-placement-before{flex-direction:row-reverse}nv-fieldcheckbox[disabled]:not([disabled=false]){opacity:0.5}nv-fieldcheckbox>.input-container{position:relative;color:var(--nv-fieldcheckbox-color-checked)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-fieldcheckbox-color-disabled)}nv-fieldcheckbox>.input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-fieldcheckbox-border-default);background:var(--nv-fieldcheckbox-background-default)}nv-fieldcheckbox>.input-container input[type=checkbox]:hover{border-color:var(--nv-fieldcheckbox-border-hover)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus{border-color:var(--nv-fieldcheckbox-border-focus)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus,nv-fieldcheckbox>.input-container input[type=checkbox]:focus-within{outline:none}nv-fieldcheckbox>.input-container input[type=checkbox]:focus-visible,nv-fieldcheckbox>.input-container input[type=checkbox]:has(:focus-visible){outline: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{background:var(--nv-fieldcheckbox-background-checked);border-color:var(--nv-fieldcheckbox-background-checked)}nv-fieldcheckbox>.input-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-fieldcheckbox-background-disabled);border-color:var(--nv-fieldcheckbox-border-default)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-fieldcheckbox>.input-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}nv-fieldcheckbox>.text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}nv-fieldcheckbox>.text-container label{align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}nv-fieldcheckbox>.text-container .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height)}nv-fieldcheckbox>.text-container .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
+const NvFieldcheckboxStyle0 = nvFieldcheckboxCss;
+
+const NvFieldcheckbox = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.checkedChanged = index.createEvent(this, "checkedChanged");
+        /**
+         * 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 = v4A79185f4.v4();
+        /**
+         * Hides the label visually while still keeping it available for screen
+         * readers.
+         */
+        this.hideLabel = false;
+        /**
+         * Signals that there is an error associated with the checkbox, which can
+         * trigger visual cues.
+         * @validator error
+         */
+        this.error = false;
+        /**
+         * 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;
+        /**
+         * Applies focus to the input field as soon as the component is mounted. This
+         * is equivalent to setting the native autofocus attribute on an <input>
+         * element.
+         */
+        this.autofocus = false;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region LISTENERS
+    /**
+     * Listens for the change event on the checkbox input element and updates the
+     * checked state.
+     * @param {Event} event - The change event.
+     */
+    handleChange(event) {
+        const target = event.target;
+        if (target.type === 'checkbox' && target.id === this.inputId) {
+            if (this.readonly || this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            if (this.indeterminate) {
+                this.indeterminate = false;
+            }
+            this.checked = target.checked;
+        }
+    }
+    //#endregion 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 (index.h(index.Host, { key: 'de53d56a14565faed09432cf9caa2ac04009a395', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("div", { key: '1b2eaf318015983b76354a0f98ca659748defaf2', class: "input-container" }, index.h("input", { key: '949928601227543717db9cec038e6f55efa618d1', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, 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: '6e969279cb7279a1fbe6c1112e77139d274eccfd', class: "icon" }, this.checked && !this.indeterminate && (index.h("slot", { key: '9655696bf7ecda02105f4ab68743800fec0c6500', name: "checked-icon" }, index.h("svg", { key: '1fe56dea643795713cc6df292757256d89a7ae11', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: 'd3ee68e0b4199591794ba39b4cc6aa4b24e61ee6', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (index.h("slot", { key: 'c598b604c2c3aec0c1d36d36ff243972b33d4f77', name: "indeterminate-icon" }, index.h("svg", { key: '38eb1768bc6e5d7b5dfdcaafbc39a7618500a1d4', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '06170fa3c62bb8793ea76ea30925d1a2b3520a77', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("div", { key: '375979126e20eea97fde15f7c3b9237880f40766', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'abe195bf795d754abd5462605440e2fa40c756e1', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '7c25e043ab0bb79cc51594336dfce76086b6c901', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '365c2da85957590b6c365b95c78309711dec1fc7', class: "description" }, index.h("slot", { key: '4f95fa143036d8f701cce9e2bd29036414426f38', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'c7db38efbfcfb30d8de8ccad513e96019ade14be', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'c0ecad03278dc4ebbb43a3b30ff00c5be5051f6e', name: "error-description" }, this.errorDescription))))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "checked": ["onCheckedChanged"]
+    }; }
+};
+NvFieldcheckbox.style = NvFieldcheckboxStyle0;
+
+exports.nv_fieldcheckbox = NvFieldcheckbox;