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

package/dist/cjs/nv-toggle.entry-BxKZDHdI.js

@@ -0,0 +1,79 @@
+'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 nvToggleCss = "nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle 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:500;line-height:var(--form-label-line-height)}nv-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-form-field-border-default);background:var(--components-form-field-background-default)}nv-toggle .input-container input[type=checkbox]::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-switch-dot);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-form-field-border-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-background-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-border-focus)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-form-field-background-disabled);border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-form-shape-foreground-disabled)}nv-toggle .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:450;line-height:var(--form-description-line-height)}nv-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}";
+const NvToggleStyle0 = nvToggleCss;
+
+const NvToggle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.checkedChanged = index.createEvent(this, "checkedChanged");
+        /****************************************************************************/
+        //#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;
+        /** Indicates whether the toggle is checked or not. */
+        this.checked = false;
+        /** Disables the toggle, preventing user interaction. */
+        this.disabled = false;
+        /**
+         * Sets the toggle to read-only, preventing user changes but still allowing
+         * focus and selection of text.
+         */
+        this.readonly = false;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * Watches for changes to the checked state and emits the new value.
+     * @param {boolean} checked - The new value of the checked state.
+     */
+    onCheckedChanged(checked) {
+        this.checkedChanged.emit(checked);
+    }
+    /**
+     * Listens for the change event on the toggle input element and updates the checked state.
+     * the checked state of the host elements.
+     * @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;
+            }
+            this.checked = target.checked;
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '59aa4f6fba2a51afd7e2ed35396e1e906cf338e9', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '5ed63f6be69e49e93e21761e583122f3a5c73ea0', class: "input-container" }, index.h("input", { key: 'dc48775994ef9873478191bdb7ecfb11090b0298', 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 })), index.h("div", { key: '4731c95eefb7a762f868b5105c613b635be330bf', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '80b0737dc38cbee593cb15f84362cbf2d5a4fbdd', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '8c886a43d3f7e30330f6f2c23f27fd8848bb845d', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '32036ee81dd3d286950d85f7b9ce4a3e06661ed3', class: "description" }, index.h("slot", { key: '090417815292fa0b07bb21551b47630261f7f7dd', name: "description" }, this.description))))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "checked": ["onCheckedChanged"]
+    }; }
+};
+NvToggle.style = NvToggleStyle0;
+
+exports.nv_toggle = NvToggle;

package/dist/cjs/nv-toggle.entry-DYhnFucd.js

@@ -0,0 +1,79 @@
+'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 nvToggleCss = "nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle 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:500;line-height:var(--form-label-line-height)}nv-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-form-field-border-default);background:var(--components-form-field-background-default)}nv-toggle .input-container input[type=checkbox]::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-switch-dot);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-form-field-border-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-background-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-border-focus)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-form-field-background-disabled);border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-form-shape-foreground-disabled)}nv-toggle .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:450;line-height:var(--form-description-line-height)}nv-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}";
+const NvToggleStyle0 = nvToggleCss;
+
+const NvToggle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.checkedChanged = index.createEvent(this, "checkedChanged");
+        /****************************************************************************/
+        //#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;
+        /** Indicates whether the toggle is checked or not. */
+        this.checked = false;
+        /** Disables the toggle, preventing user interaction. */
+        this.disabled = false;
+        /**
+         * Sets the toggle to read-only, preventing user changes but still allowing
+         * focus and selection of text.
+         */
+        this.readonly = false;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * Watches for changes to the checked state and emits the new value.
+     * @param {boolean} checked - The new value of the checked state.
+     */
+    onCheckedChanged(checked) {
+        this.checkedChanged.emit(checked);
+    }
+    /**
+     * Listens for the change event on the toggle input element and updates the checked state.
+     * the checked state of the host elements.
+     * @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;
+            }
+            this.checked = target.checked;
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '59aa4f6fba2a51afd7e2ed35396e1e906cf338e9', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '5ed63f6be69e49e93e21761e583122f3a5c73ea0', class: "input-container" }, index.h("input", { key: 'dc48775994ef9873478191bdb7ecfb11090b0298', 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 })), index.h("div", { key: '4731c95eefb7a762f868b5105c613b635be330bf', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '80b0737dc38cbee593cb15f84362cbf2d5a4fbdd', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '8c886a43d3f7e30330f6f2c23f27fd8848bb845d', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '32036ee81dd3d286950d85f7b9ce4a3e06661ed3', class: "description" }, index.h("slot", { key: '090417815292fa0b07bb21551b47630261f7f7dd', name: "description" }, this.description))))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "checked": ["onCheckedChanged"]
+    }; }
+};
+NvToggle.style = NvToggleStyle0;
+
+exports.nv_toggle = NvToggle;

package/dist/cjs/nv-toggle.entry-PRWy57Ro.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var index = require('./index-CIcUUomJ.js');
+var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+require('react');
+
+const nvToggleCss = "nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle 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:500;line-height:var(--form-label-line-height)}nv-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-form-field-border-default);background:var(--components-form-field-background-default)}nv-toggle .input-container input[type=checkbox]::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-switch-dot);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-form-field-border-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-background-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-border-focus)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-form-field-background-disabled);border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-form-shape-foreground-disabled)}nv-toggle .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:450;line-height:var(--form-description-line-height)}nv-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}";
+const NvToggleStyle0 = nvToggleCss;
+
+const NvToggle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.checkedChanged = index.createEvent(this, "checkedChanged");
+        /****************************************************************************/
+        //#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;
+        /** Indicates whether the toggle is checked or not. */
+        this.checked = false;
+        /** Disables the toggle, preventing user interaction. */
+        this.disabled = false;
+        /**
+         * Sets the toggle to read-only, preventing user changes but still allowing
+         * focus and selection of text.
+         */
+        this.readonly = false;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * Watches for changes to the checked state and emits the new value.
+     * @param {boolean} checked - The new value of the checked state.
+     */
+    onCheckedChanged(checked) {
+        this.checkedChanged.emit(checked);
+    }
+    /**
+     * Listens for the change event on the toggle input element and updates the checked state.
+     * the checked state of the host elements.
+     * @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;
+            }
+            this.checked = target.checked;
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '6728159c0c7f622fbcc5017a116ec0dd1fe28b39', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '2155eacf39771790ca730f264f9c490f6e93794b', class: "input-container" }, index.h("input", { key: '588a638b678c7d26fd0050a54fbd86ab029c18d0', 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 })), index.h("div", { key: 'ba543a1282f8244449c3682bc43c8481d0c588dd', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'beab39ef75d445e43bf4d127ea9f0c7130bae25f', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: 'fd60c679cf1514fc2d01c39a8e13e6dc6fd3287e', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '42582783ac08557d55bf8f80fa68f2f565f7208f', class: "description" }, index.h("slot", { key: '889f7408fd401816ffb6dff0c264e265911e3b79', name: "description" }, this.description))))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "checked": ["onCheckedChanged"]
+    }; }
+};
+NvToggle.style = NvToggleStyle0;
+
+exports.nv_toggle = NvToggle;

package/dist/cjs/nv-toggle.entry-fDIAyeVX.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var index = require('./index-CEWbQ5nh.js');
+var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+require('react');
+
+const nvToggleCss = "nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle 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:500;line-height:var(--form-label-line-height)}nv-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-form-field-border-default);background:var(--components-form-field-background-default)}nv-toggle .input-container input[type=checkbox]::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-switch-dot);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-form-field-border-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-background-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-border-focus)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-form-field-background-disabled);border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-form-shape-foreground-disabled)}nv-toggle .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:450;line-height:var(--form-description-line-height)}nv-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}";
+const NvToggleStyle0 = nvToggleCss;
+
+const NvToggle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.checkedChanged = index.createEvent(this, "checkedChanged");
+        /****************************************************************************/
+        //#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;
+        /** Indicates whether the toggle is checked or not. */
+        this.checked = false;
+        /** Disables the toggle, preventing user interaction. */
+        this.disabled = false;
+        /**
+         * Sets the toggle to read-only, preventing user changes but still allowing
+         * focus and selection of text.
+         */
+        this.readonly = false;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * Watches for changes to the checked state and emits the new value.
+     * @param {boolean} checked - The new value of the checked state.
+     */
+    onCheckedChanged(checked) {
+        this.checkedChanged.emit(checked);
+    }
+    /**
+     * Listens for the change event on the toggle input element and updates the checked state.
+     * the checked state of the host elements.
+     * @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;
+            }
+            this.checked = target.checked;
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '6e18c6145fccdf7926bcc64a2414e6b41d364487', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: 'fda6ce7b087d1acef0f2afb24edbdc2566ca6cbf', class: "input-container" }, index.h("input", { key: '53569ce97f75b7a2ac0c94a702096d3f9215432a', 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 })), index.h("div", { key: '26f0a6f570b8ef4150d53a7733c832f1c5f4343d', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '5ff30cca4abfd0c2f4283eab6c7ae678653748d3', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: 'c6cc3536fa741fb89ebb24dfe455957b66edd77b', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '0b1804f9e5407f15037fb6e5c80d7b8dafee5599', class: "description" }, index.h("slot", { key: '8f1b272158ffebb03992ed8c3b115e52504ff8ce', name: "description" }, this.description))))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "checked": ["onCheckedChanged"]
+    }; }
+};
+NvToggle.style = NvToggleStyle0;
+
+exports.nv_toggle = NvToggle;

package/dist/cjs/nv-toggle.entry-yqg7e7Qc.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var index = require('./index-CtI3SivD.js');
+var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+require('react');
+
+const nvToggleCss = "nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle 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:500;line-height:var(--form-label-line-height)}nv-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-form-field-border-default);background:var(--components-form-field-background-default)}nv-toggle .input-container input[type=checkbox]::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-switch-dot);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-form-field-border-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-background-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-border-focus)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-form-field-background-disabled);border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-form-shape-foreground-disabled)}nv-toggle .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:450;line-height:var(--form-description-line-height)}nv-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}";
+const NvToggleStyle0 = nvToggleCss;
+
+const NvToggle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.checkedChanged = index.createEvent(this, "checkedChanged");
+        /****************************************************************************/
+        //#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;
+        /** Indicates whether the toggle is checked or not. */
+        this.checked = false;
+        /** Disables the toggle, preventing user interaction. */
+        this.disabled = false;
+        /**
+         * Sets the toggle to read-only, preventing user changes but still allowing
+         * focus and selection of text.
+         */
+        this.readonly = false;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * Watches for changes to the checked state and emits the new value.
+     * @param {boolean} checked - The new value of the checked state.
+     */
+    onCheckedChanged(checked) {
+        this.checkedChanged.emit(checked);
+    }
+    /**
+     * Listens for the change event on the toggle input element and updates the checked state.
+     * the checked state of the host elements.
+     * @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;
+            }
+            this.checked = target.checked;
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '6e18c6145fccdf7926bcc64a2414e6b41d364487', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: 'fda6ce7b087d1acef0f2afb24edbdc2566ca6cbf', class: "input-container" }, index.h("input", { key: '53569ce97f75b7a2ac0c94a702096d3f9215432a', 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 })), index.h("div", { key: '26f0a6f570b8ef4150d53a7733c832f1c5f4343d', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '5ff30cca4abfd0c2f4283eab6c7ae678653748d3', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: 'c6cc3536fa741fb89ebb24dfe455957b66edd77b', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '0b1804f9e5407f15037fb6e5c80d7b8dafee5599', class: "description" }, index.h("slot", { key: '8f1b272158ffebb03992ed8c3b115e52504ff8ce', name: "description" }, this.description))))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "checked": ["onCheckedChanged"]
+    }; }
+};
+NvToggle.style = NvToggleStyle0;
+
+exports.nv_toggle = NvToggle;

package/dist/cjs/nv-tooltip.entry--TVfBopp.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var index = require('./index-CDe7nrrW.js');
+require('react');
+
+const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip [data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip [data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
+const NvTooltipStyle0 = nvTooltipCss;
+
+const NvTooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Decides where the tooltip shows up next to the element it’s linked to
+         * (above, below, to the sides). If there isn’t enough room, it will adjust
+         * it's position on the axis to fit on the screen, so users can always see it.
+         */
+        this.placement = 'bottom';
+        /**
+         * Controls how long (in milliseconds) the tooltip waits to show after you
+         * hover over or focus on an element. If you move away before the delay is up,
+         * the tooltip won’t appear.
+         */
+        this.enterDelay = 0;
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        if (!this.triggerElement)
+            this.triggerElement = Array.from(this.el.children).find(child => {
+                return child.getAttribute('slot') === null;
+            });
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '42d55bd749a31fc808d6685b75b5002b10575b63' }, index.h("slot", { key: '7ccb801774290a4e47c9bf6e61994936f0cb793e' }), index.h("nv-popover", { key: '6c67ddae0787dbc9e24d239e3b34218dfa997747', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: '900d3a61fc7adb7aee3f9982d932c6e2f9889ab3', slot: "content" }, this.message), index.h("slot", { key: '3f5e490d760e723271acef897cf4e0247ca7cd44', name: "content" }))));
+    }
+    get el() { return index.getElement(this); }
+};
+NvTooltip.style = NvTooltipStyle0;
+
+exports.nv_tooltip = NvTooltip;

package/dist/cjs/nv-tooltip.entry-58RCazbO.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var index = require('./index-CEWbQ5nh.js');
+require('react');
+
+const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip [data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip [data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
+const NvTooltipStyle0 = nvTooltipCss;
+
+const NvTooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Decides where the tooltip shows up next to the element it’s linked to
+         * (above, below, to the sides). If there isn’t enough room, it will adjust
+         * it's position on the axis to fit on the screen, so users can always see it.
+         */
+        this.placement = 'bottom';
+        /**
+         * Controls how long (in milliseconds) the tooltip waits to show after you
+         * hover over or focus on an element. If you move away before the delay is up,
+         * the tooltip won’t appear.
+         */
+        this.enterDelay = 0;
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        if (!this.triggerElement)
+            this.triggerElement = Array.from(this.el.children).find(child => {
+                return child.getAttribute('slot') === null;
+            });
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '42d55bd749a31fc808d6685b75b5002b10575b63' }, index.h("slot", { key: '7ccb801774290a4e47c9bf6e61994936f0cb793e' }), index.h("nv-popover", { key: '6c67ddae0787dbc9e24d239e3b34218dfa997747', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: '900d3a61fc7adb7aee3f9982d932c6e2f9889ab3', slot: "content" }, this.message), index.h("slot", { key: '3f5e490d760e723271acef897cf4e0247ca7cd44', name: "content" }))));
+    }
+    get el() { return index.getElement(this); }
+};
+NvTooltip.style = NvTooltipStyle0;
+
+exports.nv_tooltip = NvTooltip;

package/dist/cjs/nv-tooltip.entry-BBJNnZmj.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var index = require('./index-CtI3SivD.js');
+require('react');
+
+const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip [data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip [data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
+const NvTooltipStyle0 = nvTooltipCss;
+
+const NvTooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Decides where the tooltip shows up next to the element it’s linked to
+         * (above, below, to the sides). If there isn’t enough room, it will adjust
+         * it's position on the axis to fit on the screen, so users can always see it.
+         */
+        this.placement = 'bottom';
+        /**
+         * Controls how long (in milliseconds) the tooltip waits to show after you
+         * hover over or focus on an element. If you move away before the delay is up,
+         * the tooltip won’t appear.
+         */
+        this.enterDelay = 0;
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        if (!this.triggerElement)
+            this.triggerElement = Array.from(this.el.children).find(child => {
+                return child.getAttribute('slot') === null;
+            });
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '42d55bd749a31fc808d6685b75b5002b10575b63' }, index.h("slot", { key: '7ccb801774290a4e47c9bf6e61994936f0cb793e' }), index.h("nv-popover", { key: '6c67ddae0787dbc9e24d239e3b34218dfa997747', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: '900d3a61fc7adb7aee3f9982d932c6e2f9889ab3', slot: "content" }, this.message), index.h("slot", { key: '3f5e490d760e723271acef897cf4e0247ca7cd44', name: "content" }))));
+    }
+    get el() { return index.getElement(this); }
+};
+NvTooltip.style = NvTooltipStyle0;
+
+exports.nv_tooltip = NvTooltip;

package/dist/cjs/nv-tooltip.entry-Bnu7xEl6.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var index = require('./index-BZCQTWfv.js');
+require('react');
+
+const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip [data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip [data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
+const NvTooltipStyle0 = nvTooltipCss;
+
+const NvTooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Decides where the tooltip shows up next to the element it’s linked to
+         * (above, below, to the sides). If there isn’t enough room, it will adjust
+         * it's position on the axis to fit on the screen, so users can always see it.
+         */
+        this.placement = 'bottom';
+        /**
+         * Controls how long (in milliseconds) the tooltip waits to show after you
+         * hover over or focus on an element. If you move away before the delay is up,
+         * the tooltip won’t appear.
+         */
+        this.enterDelay = 0;
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        if (!this.triggerElement)
+            this.triggerElement = Array.from(this.el.children).find(child => {
+                return child.getAttribute('slot') === null;
+            });
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'e11a19bbdd775cb54b054bd502c589d80feacb35' }, index.h("slot", { key: '9fb404ae962570d3b1f5cdd42ed8673f86eeedae' }), index.h("nv-popover", { key: 'd5114554c2e97909b25dfa7ec0d64a7d10d624ec', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: '4d675b15e413054b7bd9fd71df6f3c236c175c47', slot: "content" }, this.message), index.h("slot", { key: '2967e58a96ed6d8d4d0fecc195209c8b2f9d1353', name: "content" }))));
+    }
+    get el() { return index.getElement(this); }
+};
+NvTooltip.style = NvTooltipStyle0;
+
+exports.nv_tooltip = NvTooltip;