@nova-design-system/nova-webcomponents 3.0.0-beta.44 → 3.0.0-beta.46

package/dist/esm/nv-row.entry.js

@@ -10,7 +10,7 @@ const NvRow = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '81e601144158d09429560e6d936454485807d92d' }, h("slot", { key: 'f58b212ba8c754db2f84bc48468db5a6ee817f59' })));
+        return (h(Host, { key: '0b27560267e6f5186ca4237658ad35f3a436b70d' }, h("slot", { key: 'b2805eb6abe9d02b57f030c91344ecf4927136d8' })));
     }
 };
 NvRow.style = NvRowStyle0;

package/dist/esm/nv-stack.entry.js

@@ -19,7 +19,7 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'cb020ed488cd43090467bbe122b83b0c714d8606', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gutter-x-${this.gutter}`, this.gutter && this.vertical && `gutter-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: 'd06069ed1efd5e81b4a32dac07c37ce884841c06' })));
+        return (h(Host, { key: '9869c0eaa423e363482bd4685dbd082dfba017f5', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gutter-x-${this.gutter}`, this.gutter && this.vertical && `gutter-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: 'd4b597ec95f71c47edf99d58d22c95a5540e904c' })));
     }
 };
 NvStack.style = NvStackStyle0;

package/dist/esm/nv-table.entry.js

@@ -311,14 +311,14 @@ const NvTable = class {
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : this.table.data;
-        return (h(Host, { key: 'a08b8c3fbb73b6201ad09ade112f30bf386e9d57' }, h("div", { key: '061f5b1e31292efce4d6c97f2377811b0f8c1551', class: "hidden" }, h("slot", { key: 'd40cc5c47598873b865bd3175e0f6db00b034a0b' })), h("slot", { key: 'e51a7bb121f10cdcf893a594cc27e46b89855403', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (h("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (h("thead", { class: "table-header" }, h("tr", null, headerGroups &&
+        return (h(Host, { key: '89d230b38e5f853a9d8246b3634d25f3add88bb0' }, h("div", { key: '130f44d0833635aec8eb1ff5db6f92f5342e39b4', class: "hidden" }, h("slot", { key: 'e68523ead80fd187bfb0fc6710aaea42e1d9c4e7' })), h("slot", { key: '087164f8a817d99091d54ed841b4faa5f01b215e', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (h("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (h("thead", { class: "table-header" }, h("tr", null, headerGroups &&
             headerGroups.map(col => {
                 return (h("th", { key: col.name }, this.renderTemplate(this.headerTemplateCache.get(col.name), {}) || col.header));
             })))), h("tbody", { class: "table-body" }, !rows || rows.length === 0 ? (h("tr", null, h("td", { colSpan: headerGroups.length || 12, class: "no-data" }, this.noDataMessage))) : (rows.map(row => (h("tr", { key: JSON.stringify(row) }, headerGroups.map(col => {
             var _a;
             return (h("td", null, this.renderTemplate(this.templateCache.get(col.name), row) ||
                 ((_a = row[col.name]) !== null && _a !== void 0 ? _a : this.fallbackValue)));
-        })))))))), h("slot", { key: '3cf2f0a8de9f52bf60dcd7a641e40e046874c164', name: "after" })));
+        })))))))), h("slot", { key: '046b1b705c5885eb2685a0e8780e6eec2f1ca50e', name: "after" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/nv-toggle.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, a as Host, g as getElement
 import { c as clsx } from './clsx-297c1ffe.js';
 import { v as v4 } from './v4-a79185f4.js';
 
-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 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 label.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}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 {
@@ -62,8 +62,8 @@ const NvToggle = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '59aa4f6fba2a51afd7e2ed35396e1e906cf338e9', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: '5ed63f6be69e49e93e21761e583122f3a5c73ea0', class: "input-container" }, 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 })), h("div", { key: '4731c95eefb7a762f868b5105c613b635be330bf', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '80b0737dc38cbee593cb15f84362cbf2d5a4fbdd', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '8c886a43d3f7e30330f6f2c23f27fd8848bb845d', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '32036ee81dd3d286950d85f7b9ce4a3e06661ed3', class: "description" }, h("slot", { key: '090417815292fa0b07bb21551b47630261f7f7dd', name: "description" }, this.description))))));
+        return (h(Host, { key: '6e18c6145fccdf7926bcc64a2414e6b41d364487', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: 'fda6ce7b087d1acef0f2afb24edbdc2566ca6cbf', class: "input-container" }, 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 })), h("div", { key: '26f0a6f570b8ef4150d53a7733c832f1c5f4343d', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '5ff30cca4abfd0c2f4283eab6c7ae678653748d3', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: 'c6cc3536fa741fb89ebb24dfe455957b66edd77b', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '0b1804f9e5407f15037fb6e5c80d7b8dafee5599', class: "description" }, h("slot", { key: '8f1b272158ffebb03992ed8c3b115e52504ff8ce', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/nv-toggle.entry.js.map

@@ -1 +1 @@
-{"file":"nv-toggle.entry.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,w+GAAw+G,CAAC;AAC7/G,uBAAe,WAAW;;MCyBb,QAAQ;IANrB;;;;;;;;;;;QAmBW,YAAO,GAAWA,EAAM,EAAE,CAAC;;;;;QAgC3B,cAAS,GAAY,KAAK,CAAC;;QAWpC,YAAO,GAAY,KAAK,CAAC;;QAIhB,aAAQ,GAAY,KAAK,CAAC;;;;;QAO1B,aAAQ,GAAY,KAAK,CAAC;KA2FpC;;;;;;;;IArEC,gBAAgB,CAAC,OAAgB;QAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACnC;;;;;;IAQD,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAEhD,IAAI,MAAM,CAAC,IAAI,KAAK,UAAU,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,EAAE;YAC5D,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAClC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;SAC/B;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,cAAc,KAAK,QAAQ,IAAI,wBAAwB,CAC7D,IAED,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,8DACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,EAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACE,EAEN,4DAAK,KAAK,EAAC,gBAAgB,IACxB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,MACrD,8DACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,iBAAiB,CAAC,IAEhD,6DAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT,EAEA,CAAC,IAAI,CAAC,WAAW;YAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,MAC7C,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;","names":["uuidv4"],"sources":["src/components/nv-toggle/nv-toggle.scss?tag=nv-toggle","src/components/nv-toggle/nv-toggle.tsx"],"sourcesContent":["@import \"../../styles/focus-ring\";\n\n@mixin root-styles() {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--form-gap-x);\n  position: relative;\n\n  &:not([disabled], [readonly]) {\n    input,\n    label {\n      cursor: pointer;\n    }\n  }\n}\n\n@mixin label-before-styles() {\n  flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  font-weight: 450;\n  line-height: var(--form-description-line-height);\n}\n\n@mixin text-container-styles() {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n  position: relative;\n  color: var(--components-form-shape-foreground-default);\n\n  &:has(input[type=\"checkbox\"]:disabled:not([readonly])) {\n    color: var(--components-form-shape-foreground-disabled);\n  }\n}\n\n@mixin input-styles() {\n  appearance: none;\n  position: relative;\n  display: flex;\n  width: var(--form-toggle-width);\n  height: var(--form-toggle-height);\n  flex-direction: column;\n  align-items: flex-start;\n  border-radius: var(--form-toggle-radius);\n  border-width: var(--form-toggle-border-width);\n  border-style: solid;\n  border-color: var(--components-form-field-border-default);\n  background: var(--components-form-field-background-default);\n\n  &::after {\n    content: '';\n    display: block;\n    width: var(--form-toggle-switch-dot-default);\n    height: var(--form-toggle-switch-dot-default);\n    background-color: var(--components-form-shape-foreground-switch-dot);\n    border-radius: var(--radius-rounded-full);\n    position: absolute;\n    top: 50%;\n    left: 25%;\n    transform: translate(-50%, -50%);\n  }\n\n  &:hover {\n    border-color: var(--components-form-field-border-hover);\n  }\n\n  &:focus {\n    border-color: var(--components-form-field-border-default);\n  }\n\n  @include focus-ring();\n\n  &:checked {\n    background: var(--components-form-field-background-checked);\n    border-color: var(--components-form-field-background-checked);\n\n    &::after {\n      content: '';\n      display: block;\n      width: var(--form-toggle-switch-dot-default);\n      height: var(--form-toggle-switch-dot-default);\n      background-color: var(--components-form-shape-foreground-default);\n      border-radius: var(--radius-rounded-full);\n      position: absolute;\n      top: 50%;\n      left: 75%;\n      transform: translate(-50%, -50%);\n    }\n\n    &:focus {\n      background: var(--components-form-field-background-checked);\n      border-color: var(--components-form-field-border-focus);\n    }\n  }\n\n  &:disabled:not([readonly]) {\n    box-shadow: unset;\n    background: var(--components-form-field-background-disabled);\n    border-color: var(--components-form-field-border-default);\n\n    &:checked {\n      &::after {\n        background-color: var(--components-form-shape-foreground-disabled);\n      }\n    }\n  }\n}\n\nnv-toggle {\n  @include root-styles();\n\n  &.label-placement-before {\n    @include label-before-styles();\n  }\n\n  &[disabled] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    // opacity: var(--components-form-opacity-disabled); Error: Invalid value for --components-form-opacity-disabled (expected a <number> but got \"50px\")\n    opacity: 0.5;\n  }\n  label {\n    @include label-styles();\n  }\n\n  .input-container {\n    @include input-container-styles();\n\n    input[type=\"checkbox\"] {\n      @include input-styles();\n    }\n  }\n\n  .description {\n    @include description-styles();\n  }\n\n  .text-container {\n    @include text-container-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type 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 */\n@Component({\n  tag: 'nv-toggle',\n  styleUrl: 'nv-toggle.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvToggle {\n  @Element() el!: HTMLNvToggleElement;\n\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 toggle 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 toggle input, representing the value sent on\n   * form submission when the toggle is checked.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /** The label displayed next to the toggle.*/\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * Determines the position of the label relative to the toggle, either\n   * 'start' (before) or 'end' (after).\n   */\n  @Prop({ reflect: true })\n  readonly 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   * toggle.\n   */\n  @Prop({ reflect: true })\n  readonly description?: string;\n\n  /** Indicates whether the toggle is checked or not. */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /** Disables the toggle, preventing user interaction. */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the toggle 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  //#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 toggle input element and updates the checked state.\n   * the checked state of the host elements.\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      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        )}\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}\n          />\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        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"nv-toggle.entry.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,uoHAAuoH,CAAC;AAC5pH,uBAAe,WAAW;;MCyBb,QAAQ;IANrB;;;;;;;;;;;QAmBW,YAAO,GAAWA,EAAM,EAAE,CAAC;;;;;QAgC3B,cAAS,GAAY,KAAK,CAAC;;QAWpC,YAAO,GAAY,KAAK,CAAC;;QAIhB,aAAQ,GAAY,KAAK,CAAC;;;;;QAO1B,aAAQ,GAAY,KAAK,CAAC;KA2FpC;;;;;;;;IArEC,gBAAgB,CAAC,OAAgB;QAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACnC;;;;;;IAQD,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAEhD,IAAI,MAAM,CAAC,IAAI,KAAK,UAAU,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,EAAE;YAC5D,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAClC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;SAC/B;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,cAAc,KAAK,QAAQ,IAAI,wBAAwB,CAC7D,IAED,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,8DACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,EAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACE,EAEN,4DAAK,KAAK,EAAC,gBAAgB,IACxB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,MACrD,8DACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,iBAAiB,CAAC,IAEhD,6DAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT,EAEA,CAAC,IAAI,CAAC,WAAW;YAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,MAC7C,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;","names":["uuidv4"],"sources":["src/components/nv-toggle/nv-toggle.scss?tag=nv-toggle","src/components/nv-toggle/nv-toggle.tsx"],"sourcesContent":["@use \"../../styles/utils\" as utils;\n@import \"../../styles/focus-ring\";\n\n@mixin root-styles() {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--form-gap-x);\n  position: relative;\n\n  &:not([disabled], [readonly]) {\n    input,\n    label {\n      cursor: pointer;\n    }\n  }\n}\n\n@mixin label-before-styles() {\n  flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  font-weight: 450;\n  line-height: var(--form-description-line-height);\n}\n\n@mixin text-container-styles() {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n  position: relative;\n  color: var(--components-form-shape-foreground-default);\n\n  &:has(input[type=\"checkbox\"]:disabled:not([readonly])) {\n    color: var(--components-form-shape-foreground-disabled);\n  }\n}\n\n@mixin input-styles() {\n  appearance: none;\n  position: relative;\n  display: flex;\n  width: var(--form-toggle-width);\n  height: var(--form-toggle-height);\n  flex-direction: column;\n  align-items: flex-start;\n  border-radius: var(--form-toggle-radius);\n  border-width: var(--form-toggle-border-width);\n  border-style: solid;\n  border-color: var(--components-form-field-border-default);\n  background: var(--components-form-field-background-default);\n\n  &::after {\n    content: '';\n    display: block;\n    width: var(--form-toggle-switch-dot-default);\n    height: var(--form-toggle-switch-dot-default);\n    background-color: var(--components-form-shape-foreground-switch-dot);\n    border-radius: var(--radius-rounded-full);\n    position: absolute;\n    top: 50%;\n    left: 25%;\n    transform: translate(-50%, -50%);\n  }\n\n  &:hover {\n    border-color: var(--components-form-field-border-hover);\n  }\n\n  &:focus {\n    border-color: var(--components-form-field-border-default);\n  }\n\n  @include focus-ring();\n\n  &:checked {\n    background: var(--components-form-field-background-checked);\n    border-color: var(--components-form-field-background-checked);\n\n    &::after {\n      content: '';\n      display: block;\n      width: var(--form-toggle-switch-dot-default);\n      height: var(--form-toggle-switch-dot-default);\n      background-color: var(--components-form-shape-foreground-default);\n      border-radius: var(--radius-rounded-full);\n      position: absolute;\n      top: 50%;\n      left: 75%;\n      transform: translate(-50%, -50%);\n    }\n\n    &:focus {\n      background: var(--components-form-field-background-checked);\n      border-color: var(--components-form-field-border-focus);\n    }\n  }\n\n  &:disabled:not([readonly]) {\n    box-shadow: unset;\n    background: var(--components-form-field-background-disabled);\n    border-color: var(--components-form-field-border-default);\n\n    &:checked {\n      &::after {\n        background-color: var(--components-form-shape-foreground-disabled);\n      }\n    }\n  }\n}\n\nnv-toggle {\n  @include root-styles();\n\n  &.label-placement-before {\n    @include label-before-styles();\n  }\n\n  &[disabled] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    // opacity: var(--components-form-opacity-disabled); Error: Invalid value for --components-form-opacity-disabled (expected a <number> but got \"50px\")\n    opacity: 0.5;\n  }\n  label {\n    @include label-styles();\n\n    &.visually-hidden {\n      @include utils.visually-hidden();\n    }\n  }\n\n  .input-container {\n    @include input-container-styles();\n\n    input[type=\"checkbox\"] {\n      @include input-styles();\n    }\n  }\n\n  .description {\n    @include description-styles();\n  }\n\n  .text-container {\n    @include text-container-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type 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 */\n@Component({\n  tag: 'nv-toggle',\n  styleUrl: 'nv-toggle.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvToggle {\n  @Element() el!: HTMLNvToggleElement;\n\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 toggle 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 toggle input, representing the value sent on\n   * form submission when the toggle is checked.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /** The label displayed next to the toggle.*/\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * Determines the position of the label relative to the toggle, either\n   * 'start' (before) or 'end' (after).\n   */\n  @Prop({ reflect: true })\n  readonly 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   * toggle.\n   */\n  @Prop({ reflect: true })\n  readonly description?: string;\n\n  /** Indicates whether the toggle is checked or not. */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /** Disables the toggle, preventing user interaction. */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the toggle 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  //#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 toggle input element and updates the checked state.\n   * the checked state of the host elements.\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      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        )}\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}\n          />\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        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/esm/nv-tooltip.entry.js

@@ -32,7 +32,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'e11a19bbdd775cb54b054bd502c589d80feacb35' }, h("slot", { key: '9fb404ae962570d3b1f5cdd42ed8673f86eeedae' }), h("nv-popover", { key: 'd5114554c2e97909b25dfa7ec0d64a7d10d624ec', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: '4d675b15e413054b7bd9fd71df6f3c236c175c47', slot: "content" }, this.message), h("slot", { key: '2967e58a96ed6d8d4d0fecc195209c8b2f9d1353', name: "content" }))));
+        return (h(Host, { key: '42d55bd749a31fc808d6685b75b5002b10575b63' }, h("slot", { key: '7ccb801774290a4e47c9bf6e61994936f0cb793e' }), h("nv-popover", { key: '6c67ddae0787dbc9e24d239e3b34218dfa997747', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: '900d3a61fc7adb7aee3f9982d932c6e2f9889ab3', slot: "content" }, this.message), h("slot", { key: '3f5e490d760e723271acef897cf4e0247ca7cd44', name: "content" }))));
     }
     get el() { return getElement(this); }
 };