@nova-design-system/nova-webcomponents 3.23.0 → 3.24.0

package/dist/components/nv-tableheader.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-C63Xpg9a.js';
-import { d as defineCustomElement$4 } from './p-CBOuqJTb.js';
-import { d as defineCustomElement$3 } from './p-DaiLIZ8f.js';
-import { d as defineCustomElement$2 } from './p-DzUXTCUy.js';
+import { d as defineCustomElement$4 } from './p-nfYynlVq.js';
+import { d as defineCustomElement$3 } from './p-DvapDVBj.js';
+import { d as defineCustomElement$2 } from './p-COnt5ux_.js';
 
 const nvTableheaderCss = "nv-tableheader{display:inline-flex;width:100%;align-items:center;gap:var(--spacing-2)}nv-tableheader:focus-visible:focus,nv-tableheader:focus-visible:focus-within{outline:none}nv-tableheader:focus-visible:focus-visible,nv-tableheader:focus-visible:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-tableheader:focus-visible{border-radius:var(--radius-rounded-sm)}nv-tableheader nv-iconbutton{transition:transform 120ms ease, opacity 120ms ease}nv-tableheader nv-iconbutton svg{transition:transform 240ms ease}nv-tableheader nv-iconbutton.is-none{opacity:0.5}nv-tableheader nv-iconbutton.is-desc svg{transform:rotate(180deg)}";
 
@@ -32,7 +32,7 @@ const NvTableheader$1 = /*@__PURE__*/ proxyCustomElement(class NvTableheader ext
     cycleSortDirection(e) {
         if (!this.sortable)
             return;
-        e === null || e === void 0 ? void 0 : e.preventDefault();
+        e?.preventDefault();
         const next = {
             none: 'asc',
             asc: 'desc',
@@ -63,7 +63,7 @@ const NvTableheader$1 = /*@__PURE__*/ proxyCustomElement(class NvTableheader ext
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '89ea12419a6f07d3b945a2dec3ca40a169d1bf85', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, h("slot", { key: '447c9f44b779cb7003209c3965127433e33f1ea9' }), this.sortable && (h("span", { key: 'bb4d1545d83b5fd2ce0b6860cdabbe22fe0f8ed0', class: "sort-icon-wrap", "aria-hidden": "true" }, h("nv-iconbutton", { key: '03b14162d5a1f2e8cccc5fa2e49af9cdd247d4e7', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
+        return (h(Host, { key: 'ae56ba389e554b3b555a1f29dba6a2c434e4a0ea', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, h("slot", { key: '55efe6331ebcbde6b9b37f7d8dec610e444dc4b1' }), this.sortable && (h("span", { key: 'ecde17447218e6d462504cb10bdc8b95266ce402', class: "sort-icon-wrap", "aria-hidden": "true" }, h("nv-iconbutton", { key: 'c6e18e4149d2805cb16d5a79ec29db85a656b42c', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
             // prevent mousedown from selecting text
             onMouseDown: (e) => e.preventDefault(), class: {
                 'is-none': this.sortDirection === 'none',

package/dist/components/nv-tableheader.js.map

@@ -1 +1 @@
-{"file":"nv-tableheader.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,ytBAAytB;;MCUruBA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AASE;;;;AAIG;AAEM,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElC;;;AAGG;AAEH,QAAA,IAAa,CAAA,aAAA,GAA4B,MAAM;AA2FhD;;;;AArFS,IAAA,kBAAkB,CAAC,CAAS,EAAA;QAClC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;AACpB,QAAA,CAAC,aAAD,CAAC,KAAA,MAAA,GAAA,MAAA,GAAD,CAAC,CAAE,cAAc,EAAE;AAEnB,QAAA,MAAM,IAAI,GAAG;AACX,YAAA,IAAI,EAAE,KAAK;AACX,YAAA,GAAG,EAAE,MAAM;AACX,YAAA,IAAI,EAAE,MAAM;SACJ;QAEV,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;QAC7C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;;AAG5C,IAAA,aAAa,CAAC,KAAoB,EAAA;QACxC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;AACpB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,kBAAkB,EAAE;;;AAI7B,IAAA,IAAI,QAAQ,GAAA;AACV,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,GAAG,EAAE,WAAW;AAChB,YAAA,IAAI,EAAE,YAAY;SACV;QAEV,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,OAAO,CAAC,IAAI;AACvC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC;;;;;IAwBpC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,cAAc,eACR,IAAI,CAAC,QAAQ,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,SAAS,EACvC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EACxC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,EAE3C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEZ,IAAI,CAAC,QAAQ,KACZ,6DAAM,KAAK,EAAC,gBAAgB,EAAA,aAAA,EAAa,MAAM,EAAA,EAC7C,CACE,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,eAAe,EACf,IAAA,EAAA,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,GAAG,OAAO,GAAG,KAAK;;AAEzD,YAAA,WAAW,EAAE,CAAC,CAAa,KAAK,CAAC,CAAC,cAAc,EAAE,EAClD,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM;AACxC,gBAAA,SAAS,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM;AACzC,aAAA,EAAA,CACD,CACG,CACR,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvTableheader","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-tableheader/nv-tableheader.scss?tag=nv-tableheader","src/components/nv-tableheader/nv-tableheader.tsx"],"sourcesContent":["// include focus ring\n@use \"../../styles/focus-ring\" as focus;\n\n@mixin root-styles() {\n  display: inline-flex;\n  width: 100%;\n  align-items: center;\n  gap: var(--spacing-2);\n}\n\n@mixin focus-styles() {\n  @include focus.focus-ring();\n  border-radius: var(--radius-rounded-sm);\n}\n\n@mixin nv-icon-styles() {\n  transition: transform 120ms ease, opacity 120ms ease;\n  svg {\n    transition: transform 240ms ease;\n  }\n  &.is-none { opacity: .5; }\n  &.is-desc {\n    svg {\n      transform: rotate(180deg);\n    }\n  }\n}\n\nnv-tableheader {\n  @include root-styles();\n\n  &:focus-visible {\n    @include focus-styles();\n  }\n\n  nv-iconbutton {\n    @include nv-icon-styles();\n  }\n}","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n/**\n * @slot default - Child content of the component.\n */\n@Component({\n  tag: 'nv-tableheader',\n  styleUrl: 'nv-tableheader.scss',\n  shadow: false,\n})\nexport class NvTableheader {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Will render the header as sortable with the corresponding icon button.\n   * Allows the header to be tabbed, and trigger sorting via click or keyboard\n   * navigation\n   */\n  @Prop({ reflect: true })\n  readonly sortable: boolean = false;\n\n  /**\n   * The current sort direction of the header. Will be 'none' if the header is\n   * not sortable or if the sort direction is not set.\n   */\n  @Prop({ reflect: true, mutable: true })\n  sortDirection: 'none' | 'asc' | 'desc' = 'none';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  private cycleSortDirection(e?: Event) {\n    if (!this.sortable) return;\n    e?.preventDefault();\n\n    const next = {\n      none: 'asc',\n      asc: 'desc',\n      desc: 'none',\n    } as const;\n\n    this.sortDirection = next[this.sortDirection];\n    this.sortDirectionChanged.emit(this.sortDirection);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (!this.sortable) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.cycleSortDirection();\n    }\n  }\n\n  get ariaSort() {\n    const sortMap = {\n      none: 'none',\n      asc: 'ascending',\n      desc: 'descending',\n    } as const;\n\n    if (!this.sortable) return sortMap.none;\n    return sortMap[this.sortDirection];\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when the sort direction changes. Payload is the new sort\n   * direction.\n   */\n  @Event({ bubbles: false })\n  sortDirectionChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"columnheader\"\n        aria-sort={this.ariaSort}\n        tabindex={this.sortable ? 0 : undefined}\n        onKeyDown={this.handleKeyDown.bind(this)}\n        onClick={this.cycleSortDirection.bind(this)}\n      >\n        <slot></slot>\n\n        {this.sortable && (\n          <span class=\"sort-icon-wrap\" aria-hidden=\"true\">\n            <nv-iconbutton\n              disableTabindex\n              name=\"arrow-up\"\n              size=\"xs\"\n              emphasis={this.sortDirection === 'none' ? 'lower' : 'low'}\n              // prevent mousedown from selecting text\n              onMouseDown={(e: MouseEvent) => e.preventDefault()}\n              class={{\n                'is-none': this.sortDirection === 'none',\n                'is-desc': this.sortDirection === 'desc',\n              }}\n            />\n          </span>\n        )}\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"],"version":3}
+{"file":"nv-tableheader.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,ytBAAytB;;MCUruBA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AASE;;;;AAIG;AAEM,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElC;;;AAGG;AAEH,QAAA,IAAa,CAAA,aAAA,GAA4B,MAAM;AA2FhD;;;;AArFS,IAAA,kBAAkB,CAAC,CAAS,EAAA;QAClC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;QACpB,CAAC,EAAE,cAAc,EAAE;AAEnB,QAAA,MAAM,IAAI,GAAG;AACX,YAAA,IAAI,EAAE,KAAK;AACX,YAAA,GAAG,EAAE,MAAM;AACX,YAAA,IAAI,EAAE,MAAM;SACJ;QAEV,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;QAC7C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;;AAG5C,IAAA,aAAa,CAAC,KAAoB,EAAA;QACxC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;AACpB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,kBAAkB,EAAE;;;AAI7B,IAAA,IAAI,QAAQ,GAAA;AACV,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,GAAG,EAAE,WAAW;AAChB,YAAA,IAAI,EAAE,YAAY;SACV;QAEV,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,OAAO,CAAC,IAAI;AACvC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC;;;;;IAwBpC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,cAAc,eACR,IAAI,CAAC,QAAQ,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,SAAS,EACvC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EACxC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,EAE3C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEZ,IAAI,CAAC,QAAQ,KACZ,6DAAM,KAAK,EAAC,gBAAgB,EAAA,aAAA,EAAa,MAAM,EAAA,EAC7C,CACE,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,eAAe,EACf,IAAA,EAAA,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,GAAG,OAAO,GAAG,KAAK;;AAEzD,YAAA,WAAW,EAAE,CAAC,CAAa,KAAK,CAAC,CAAC,cAAc,EAAE,EAClD,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM;AACxC,gBAAA,SAAS,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM;AACzC,aAAA,EAAA,CACD,CACG,CACR,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvTableheader","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-tableheader/nv-tableheader.scss?tag=nv-tableheader","src/components/nv-tableheader/nv-tableheader.tsx"],"sourcesContent":["// include focus ring\n@use \"../../styles/focus-ring\" as focus;\n\n@mixin root-styles() {\n  display: inline-flex;\n  width: 100%;\n  align-items: center;\n  gap: var(--spacing-2);\n}\n\n@mixin focus-styles() {\n  @include focus.focus-ring();\n  border-radius: var(--radius-rounded-sm);\n}\n\n@mixin nv-icon-styles() {\n  transition: transform 120ms ease, opacity 120ms ease;\n  svg {\n    transition: transform 240ms ease;\n  }\n  &.is-none { opacity: .5; }\n  &.is-desc {\n    svg {\n      transform: rotate(180deg);\n    }\n  }\n}\n\nnv-tableheader {\n  @include root-styles();\n\n  &:focus-visible {\n    @include focus-styles();\n  }\n\n  nv-iconbutton {\n    @include nv-icon-styles();\n  }\n}","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n/**\n * @slot default - Child content of the component.\n */\n@Component({\n  tag: 'nv-tableheader',\n  styleUrl: 'nv-tableheader.scss',\n  shadow: false,\n})\nexport class NvTableheader {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Will render the header as sortable with the corresponding icon button.\n   * Allows the header to be tabbed, and trigger sorting via click or keyboard\n   * navigation\n   */\n  @Prop({ reflect: true })\n  readonly sortable: boolean = false;\n\n  /**\n   * The current sort direction of the header. Will be 'none' if the header is\n   * not sortable or if the sort direction is not set.\n   */\n  @Prop({ reflect: true, mutable: true })\n  sortDirection: 'none' | 'asc' | 'desc' = 'none';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  private cycleSortDirection(e?: Event) {\n    if (!this.sortable) return;\n    e?.preventDefault();\n\n    const next = {\n      none: 'asc',\n      asc: 'desc',\n      desc: 'none',\n    } as const;\n\n    this.sortDirection = next[this.sortDirection];\n    this.sortDirectionChanged.emit(this.sortDirection);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (!this.sortable) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.cycleSortDirection();\n    }\n  }\n\n  get ariaSort() {\n    const sortMap = {\n      none: 'none',\n      asc: 'ascending',\n      desc: 'descending',\n    } as const;\n\n    if (!this.sortable) return sortMap.none;\n    return sortMap[this.sortDirection];\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when the sort direction changes. Payload is the new sort\n   * direction.\n   */\n  @Event({ bubbles: false })\n  sortDirectionChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"columnheader\"\n        aria-sort={this.ariaSort}\n        tabindex={this.sortable ? 0 : undefined}\n        onKeyDown={this.handleKeyDown.bind(this)}\n        onClick={this.cycleSortDirection.bind(this)}\n      >\n        <slot></slot>\n\n        {this.sortable && (\n          <span class=\"sort-icon-wrap\" aria-hidden=\"true\">\n            <nv-iconbutton\n              disableTabindex\n              name=\"arrow-up\"\n              size=\"xs\"\n              emphasis={this.sortDirection === 'none' ? 'lower' : 'low'}\n              // prevent mousedown from selecting text\n              onMouseDown={(e: MouseEvent) => e.preventDefault()}\n              class={{\n                'is-none': this.sortDirection === 'none',\n                'is-desc': this.sortDirection === 'desc',\n              }}\n            />\n          </span>\n        )}\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-toggle.js

@@ -64,8 +64,8 @@ const NvToggle$1 = /*@__PURE__*/ proxyCustomElement(class NvToggle extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'afeeed468bea015c59cdab86f85ee3b0145f8b11', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: 'fd56a2b878f063549315f5b48fe1eb7b249a3503', class: "input-container" }, h("input", { key: '8e0a260d2c80bb303ff9b1f1921290060ef5c92c', 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: '906d8bd545bffcc8f2e4deee3f760ae1366aa8b2', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'fa2e7120d3f8f0dedd7ef953a7648aa1dca80ec4', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '598eb4b920bbc37c6dba5862e65221b586714728', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'fb4769f30a05fe2e953759990ff8922ebc906452', class: "description" }, h("slot", { key: '1e847c839e147d3a9aff41296e5d1d84266be9f5', name: "description" }, this.description))))));
+        return (h(Host, { key: 'bf104d1513a3cf741c6b42ab48554c40d19263d1', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: '8c7e9684887e0d454a69101fb83f290d26236841', class: "input-container" }, h("input", { key: '5771d8999e03247600a2b98d0eae985ff0345e28', 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: '8c95821037235c2eab053bce5bb7a0dc15173ea4', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '36c1d110f4c9151e1d05c665546f01f323999b15', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '4fe3f5fab8c1a20480c9eba085221afc36caae73', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '63dc983d3b09327f57bd62feb7a25865f90390a7', class: "description" }, h("slot", { key: 'e85b616e8bf1301e53f62a2c4e1ea87675b1dcff', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }

package/dist/components/nv-togglebutton.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-C63Xpg9a.js';
 
-const nvTogglebuttonCss = "nv-togglebutton{display:inline-flex;justify-content:center;align-items:center}nv-togglebutton:focus-visible,nv-togglebutton:has(:focus-visible){z-index:1}nv-togglebutton[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);height:var(--button-xs-height);font-size:var(--button-xs-font-size)}nv-togglebutton[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-togglebutton[size=xs]{padding-top:calc(var(--togglegroup-xs-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-xs-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-xs-button-radius));border-width:0}nv-togglebutton[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);height:var(--button-sm-height);font-size:var(--button-sm-font-size)}nv-togglebutton[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-togglebutton[size=sm]{padding-top:calc(var(--togglegroup-sm-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-sm-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-sm-button-radius));border-width:0}nv-togglebutton[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);height:var(--button-md-height);font-size:var(--button-md-font-size)}nv-togglebutton[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-togglebutton[size=md]{padding-top:calc(var(--togglegroup-md-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-md-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-md-button-radius));border-width:0}nv-togglebutton[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);height:var(--button-lg-height);font-size:var(--button-lg-font-size)}nv-togglebutton[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-togglebutton[size=lg]{padding-top:calc(var(--togglegroup-lg-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-lg-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-lg-button-radius));border-width:0}nv-togglebutton[emphasis=high]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-togglebutton[emphasis=high]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-togglebutton[emphasis=high]:active{background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=high]:focus,nv-togglebutton[emphasis=high]:focus-within{outline:none}nv-togglebutton[emphasis=high]:focus-visible,nv-togglebutton[emphasis=high]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-togglebutton[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=high][active]:not([active=false]){background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=low]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-togglebutton[emphasis=low]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-togglebutton[emphasis=low]:focus,nv-togglebutton[emphasis=low]:focus-within{outline:none}nv-togglebutton[emphasis=low]:focus-visible,nv-togglebutton[emphasis=low]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-togglebutton[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=low][active]:not([active=false]),nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}";
+const nvTogglebuttonCss = "nv-togglebutton{display:inline-flex;justify-content:center;align-items:center}nv-togglebutton:focus-visible,nv-togglebutton:has(:focus-visible){z-index:1}nv-togglebutton[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);height:var(--button-xs-height);font-size:var(--button-xs-font-size)}nv-togglebutton[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-togglebutton[size=xs]{padding-top:calc(var(--togglegroup-xs-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-xs-button-padding-y) - var(--togglegroup-stroke));border-radius:var(--togglegroup-xs-button-radius);height:calc((var(--togglegroup-xs-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);height:var(--button-sm-height);font-size:var(--button-sm-font-size)}nv-togglebutton[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-togglebutton[size=sm]{padding-top:calc(var(--togglegroup-sm-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-sm-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-sm-button-radius) + 1px);height:calc((var(--togglegroup-sm-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);height:var(--button-md-height);font-size:var(--button-md-font-size)}nv-togglebutton[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-togglebutton[size=md]{padding-top:calc(var(--togglegroup-md-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-md-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-md-button-radius) + 1px);height:calc((var(--togglegroup-md-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);height:var(--button-lg-height);font-size:var(--button-lg-font-size)}nv-togglebutton[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-togglebutton[size=lg]{padding-top:calc(var(--togglegroup-lg-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-lg-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-lg-button-radius) + 1px);height:calc((var(--togglegroup-lg-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[emphasis=high]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-togglebutton[emphasis=high]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-togglebutton[emphasis=high]:active{background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=high]:focus,nv-togglebutton[emphasis=high]:focus-within{outline:none}nv-togglebutton[emphasis=high]:focus-visible,nv-togglebutton[emphasis=high]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-togglebutton[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=high][active]:not([active=false]){background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=low]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-togglebutton[emphasis=low]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-togglebutton[emphasis=low]:focus,nv-togglebutton[emphasis=low]:focus-within{outline:none}nv-togglebutton[emphasis=low]:focus-visible,nv-togglebutton[emphasis=low]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-togglebutton[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=low][active]:not([active=false]),nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}";
 
 const NvTogglebutton$1 = /*@__PURE__*/ proxyCustomElement(class NvTogglebutton extends H {
     constructor(registerHost) {
@@ -56,7 +56,7 @@ const NvTogglebutton$1 = /*@__PURE__*/ proxyCustomElement(class NvTogglebutton e
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '0285637cb14c292c67d767dc83b72f52c5368269', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, h("slot", { key: 'a84f303e76070b99ff2c01e5ec400f2e78503b19' })));
+        return (h(Host, { key: 'af68f5f4887be35f48bb74f15f597e7fe575b3fd', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, h("slot", { key: '624ab0edc86bf9b5686f3f99097adf82ea972764' })));
     }
     get el() { return this; }
     static get style() { return nvTogglebuttonCss; }

package/dist/components/nv-togglebutton.js.map

@@ -1 +1 @@
-{"file":"nv-togglebutton.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,+5JAA+5J;;MCoB56JA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AAWE;;;;AAIG;AAEM,QAAA,IAAI,CAAA,IAAA,GAA0B,IAAI;AAS3C;;AAEG;AAEM,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElC;;;AAGG;AAEM,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEhC;;AAEG;AAEM,QAAA,IAAQ,CAAA,QAAA,GAA8B,MAAM;;;;AAM7C,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;YACzB,IAAI,IAAI,CAAC,QAAQ;gBAAE;AAEnB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;gBAChB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;AACpB,aAAA,CAAC;AACJ,SAAC;AAgDF;;;;AAzCC,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;;;;;;;IAyBnB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,kBACE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAEzB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvTogglebutton","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-togglebutton/styles/nv-togglebutton.scss?tag=nv-togglebutton","src/components/nv-togglebutton/nv-togglebutton.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-togglebutton {\n  @include root-styles();\n\n  @each $size in $sizes {\n    &[size=\"#{$size}\"] {\n        @include button-size-styles($size);\n        @include togglegroup-button-size-styles($size);\n    }\n  }\n\n  &[emphasis=\"high\"] {\n    @include button-emphasis-styles('low');\n    &[active]:not([active=\"false\"]) {\n      @include button-active-styles('low');\n    }\n  }\n  &[emphasis=\"low\"] {\n    @include button-emphasis-styles('lower');\n    &[active]:not([active=\"false\"]), &:active {\n      @include button-hover-styles('lower');\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  Element,\n  Listen,\n  EventEmitter,\n} from '@stencil/core';\nimport { ToggleButtonEmphasis, ToggleButtonSize } from '../../utils/constants';\n\n/**\n * @slot default - Child content of the toggle button.\n */\n@Component({\n  tag: 'nv-togglebutton',\n  styleUrl: 'styles/nv-togglebutton.scss',\n  shadow: false,\n})\nexport class NvTogglebutton {\n  @Element() el: HTMLNvTogglebuttonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the togglebutton appears, allowing for\n   * customization of the togglebutton's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ToggleButtonSize}` = 'md';\n\n  /**\n   * The value to associated with the button when selected in a\n   * Togglebuttongroup.\n   */\n  @Prop({ reflect: true })\n  readonly value: string;\n\n  /**\n   * Prevents all interaction, rendering the toggle in a non-interactive state.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Whether the button is active or not. Will not toggle automatically but\n   * needs to be controlled externally.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Make it more or less visually prominent to users.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ToggleButtonEmphasis}` = 'high';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleClick = () => {\n    if (this.disabled) return;\n\n    this.toggled.emit({\n      value: this.value,\n      active: this.active,\n    });\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LISTENERS\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.el.click();\n    }\n  }\n\n  //#endregion LISTENERS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /* eslint-disable nova/event-bubbling */\n  /**\n   * Emitted when the button is toggled. Will bubble up so that the\n   * nv-togglebuttongroup can update the state.\n   */\n  @Event({ eventName: 'toggled', bubbles: true })\n  toggled: EventEmitter<{\n    /** The value associated with the button. */\n    value: string;\n    /** If the button is active when clicked. */\n    active: boolean;\n  }>;\n  /* eslint-enable nova/event-bubbling */\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host\n        role=\"button\"\n        tabindex=\"0\"\n        aria-pressed={String(this.active)}\n        onClick={this.handleClick}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"],"version":3}
+{"file":"nv-togglebutton.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,+4KAA+4K;;MCoB55KA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AAWE;;;;AAIG;AAEM,QAAA,IAAI,CAAA,IAAA,GAA0B,IAAI;AAS3C;;AAEG;AAEM,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElC;;;AAGG;AAEM,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEhC;;AAEG;AAEM,QAAA,IAAQ,CAAA,QAAA,GAA8B,MAAM;;;;AAM7C,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;YACzB,IAAI,IAAI,CAAC,QAAQ;gBAAE;AAEnB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;gBAChB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;AACpB,aAAA,CAAC;AACJ,SAAC;AAgDF;;;;AAzCC,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;;;;;;;IAyBnB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,kBACE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAEzB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvTogglebutton","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-togglebutton/styles/nv-togglebutton.scss?tag=nv-togglebutton","src/components/nv-togglebutton/nv-togglebutton.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-togglebutton {\n  @include root-styles();\n\n  @each $size in $sizes {\n    &[size=\"#{$size}\"] {\n        @include button-size-styles($size);\n        @include togglegroup-button-size-styles($size);\n    }\n  }\n\n  &[emphasis=\"high\"] {\n    @include button-emphasis-styles('low');\n    &[active]:not([active=\"false\"]) {\n      @include button-active-styles('low');\n    }\n  }\n  &[emphasis=\"low\"] {\n    @include button-emphasis-styles('lower');\n    &[active]:not([active=\"false\"]), &:active {\n      @include button-hover-styles('lower');\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  Element,\n  Listen,\n  EventEmitter,\n} from '@stencil/core';\nimport { ToggleButtonEmphasis, ToggleButtonSize } from '../../utils/constants';\n\n/**\n * @slot default - Child content of the toggle button.\n */\n@Component({\n  tag: 'nv-togglebutton',\n  styleUrl: 'styles/nv-togglebutton.scss',\n  shadow: false,\n})\nexport class NvTogglebutton {\n  @Element() el: HTMLNvTogglebuttonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the togglebutton appears, allowing for\n   * customization of the togglebutton's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ToggleButtonSize}` = 'md';\n\n  /**\n   * The value to associated with the button when selected in a\n   * Togglebuttongroup.\n   */\n  @Prop({ reflect: true })\n  readonly value: string;\n\n  /**\n   * Prevents all interaction, rendering the toggle in a non-interactive state.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Whether the button is active or not. Will not toggle automatically but\n   * needs to be controlled externally.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Make it more or less visually prominent to users.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ToggleButtonEmphasis}` = 'high';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleClick = () => {\n    if (this.disabled) return;\n\n    this.toggled.emit({\n      value: this.value,\n      active: this.active,\n    });\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LISTENERS\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.el.click();\n    }\n  }\n\n  //#endregion LISTENERS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /* eslint-disable nova/event-bubbling */\n  /**\n   * Emitted when the button is toggled. Will bubble up so that the\n   * nv-togglebuttongroup can update the state.\n   */\n  @Event({ eventName: 'toggled', bubbles: true })\n  toggled: EventEmitter<{\n    /** The value associated with the button. */\n    value: string;\n    /** If the button is active when clicked. */\n    active: boolean;\n  }>;\n  /* eslint-enable nova/event-bubbling */\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host\n        role=\"button\"\n        tabindex=\"0\"\n        aria-pressed={String(this.active)}\n        onClick={this.handleClick}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-togglebuttongroup.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-C63Xpg9a.js';
 
-const nvTogglebuttongroupCss = "nv-togglebuttongroup{display:flex;gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius);width:fit-content;padding:var(--togglegroup-lg-gap)}nv-togglebuttongroup[emphasis=high]{border:1px solid var(--components-togglegroup-high-border)}nv-togglebuttongroup[emphasis=low]{border:1px solid var(--components-togglegroup-low-border)}nv-togglebuttongroup[size=xs]{padding:calc(var(--togglegroup-xs-padding) - 1px);gap:var(--togglegroup-xs-gap);border-radius:var(--togglegroup-xs-radius)}nv-togglebuttongroup[size=sm]{padding:calc(var(--togglegroup-sm-padding) - 1px);gap:var(--togglegroup-sm-gap);border-radius:var(--togglegroup-sm-radius)}nv-togglebuttongroup[size=md]{padding:calc(var(--togglegroup-md-padding) - 1px);gap:var(--togglegroup-md-gap);border-radius:var(--togglegroup-md-radius)}nv-togglebuttongroup[size=lg]{padding:calc(var(--togglegroup-lg-padding) - 1px);gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius)}";
+const nvTogglebuttongroupCss = "nv-togglebuttongroup{display:flex;gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius);width:fit-content;padding:var(--togglegroup-lg-gap)}nv-togglebuttongroup[emphasis=high]{border:1px solid var(--components-togglegroup-high-border)}nv-togglebuttongroup[emphasis=low]{border:1px solid var(--components-togglegroup-low-border)}nv-togglebuttongroup[size=xs]{padding:calc(var(--togglegroup-xs-padding) - 1px);gap:var(--togglegroup-xs-gap);border-radius:var(--togglegroup-xs-radius);height:var(--togglegroup-xs-height)}nv-togglebuttongroup[size=sm]{padding:calc(var(--togglegroup-sm-padding) - 1px);gap:var(--togglegroup-sm-gap);border-radius:var(--togglegroup-sm-radius);height:var(--togglegroup-sm-height)}nv-togglebuttongroup[size=md]{padding:calc(var(--togglegroup-md-padding) - 1px);gap:var(--togglegroup-md-gap);border-radius:var(--togglegroup-md-radius);height:var(--togglegroup-md-height)}nv-togglebuttongroup[size=lg]{padding:calc(var(--togglegroup-lg-padding) - 1px);gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius);height:var(--togglegroup-lg-height)}";
 
 const NvTogglebuttongroup$1 = /*@__PURE__*/ proxyCustomElement(class NvTogglebuttongroup extends H {
     constructor(registerHost) {
@@ -36,11 +36,10 @@ const NvTogglebuttongroup$1 = /*@__PURE__*/ proxyCustomElement(class NvTogglebut
          */
         this.setActiveToggleButtons = () => {
             this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {
-                var _a;
                 const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);
                 if (!btn)
                     return;
-                btn.active = ((_a = this.value) !== null && _a !== void 0 ? _a : []).includes(btn.value);
+                btn.active = (this.value ?? []).includes(btn.value);
             });
         };
         /**
@@ -157,7 +156,7 @@ const NvTogglebuttongroup$1 = /*@__PURE__*/ proxyCustomElement(class NvTogglebut
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '0ed4a7f3ddaaebf6747e8f0798913cca4117f2cb' }, h("slot", { key: '8ea87065c312f52a1f23873d19724d57147e80b2' })));
+        return (h(Host, { key: '2d4f46a06045c84018b0a5c296b2eb19c2803d7a' }, h("slot", { key: '4f387071fe030057df13c6b3ff5e6f480fcd339b' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/nv-togglebuttongroup.js.map

@@ -1 +1 @@
-{"file":"nv-togglebuttongroup.js","mappings":"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","names":["NvTogglebuttongroup","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-togglebuttongroup/styles/nv-togglebuttongroup.scss?tag=nv-togglebuttongroup","src/components/nv-togglebuttongroup/nv-togglebuttongroup.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-togglebuttongroup {\n  @include root-styles();\n\n  &[emphasis=\"high\"] {\n    @include high-emphasis-styles();\n  }\n  &[emphasis=\"low\"] {\n    @include low-emphasis-styles();\n  }\n  @each $size in $sizes {\n    &[size=\"#{$size}\"] {\n      @include size-styles($size);\n      \n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Watch,\n  Element,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { ToggleButtonEmphasis, ToggleButtonSize } from '../../utils/constants';\n\n/**\n * @slot default - Child content of the component, pass the nv-togglebutton components here.\n */\n@Component({\n  tag: 'nv-togglebuttongroup',\n  styleUrl: 'styles/nv-togglebuttongroup.scss',\n  shadow: false,\n})\nexport class NvTogglebuttongroup {\n  @Element() el!: HTMLNvTogglebuttongroupElement;\n  private mutationObserver: MutationObserver;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The active toggle buttons in the group. Is an array of one string when in\n   * exclusive mode, and an array of strings when in non-exclusive mode.\n   */\n  @Prop({ reflect: false, mutable: true })\n  value: string[];\n\n  /**\n   * Activates single-selection mode so only one button can be active at a time.\n   */\n  @Prop({ reflect: true })\n  readonly exclusive: boolean = false;\n\n  /**\n   * Ensures at least one toggle stays selected at all times.\n   */\n  @Prop({ reflect: true })\n  readonly enforceValue: boolean = false;\n\n  /**\n   * Make it more or less visually prominent to users.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ToggleButtonEmphasis}` = 'high';\n\n  /**\n   * Determines how large or small the togglebutton appears, allowing for\n   * customization of the togglebutton's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ToggleButtonSize}` = 'md';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Sets the active state of all toggle buttons depending on the value of the\n   * group.\n   */\n  private setActiveToggleButtons = () => {\n    this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n      const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n      if (!btn) return;\n      btn.active = (this.value ?? []).includes(btn.value);\n    });\n  };\n\n  /**\n   * Sets the emphasis of all toggle buttons to the same value.\n   */\n  private setEmphasisToggleButtons = () => {\n    this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n      const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n      if (!btn) return;\n      btn.emphasis = this.emphasis;\n    });\n  };\n\n  /**\n   * Sets the size of all toggle buttons to the same value.\n   */\n  private setSizeToggleButtons = () => {\n    this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n      const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n      if (!btn) return;\n      btn.size = this.size;\n    });\n  };\n\n  /**\n   * Sets up the MutationObserver to watch for changes in child elements\n   */\n  private setupMutationObserver = (): void => {\n    this.mutationObserver = new MutationObserver(mutations => {\n      mutations.forEach(mutation => {\n        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {\n          this.setEmphasisToggleButtons();\n          this.setSizeToggleButtons();\n        }\n      });\n    });\n\n    this.mutationObserver.observe(this.el, {\n      childList: true,\n      subtree: true,\n    });\n  };\n\n  /**\n   * Narrow Type used locally to interact with nv-togglebutton child elements.\n   * @param {Element} element - The element to check.\n   * @returns {(HTMLElement & {\n   *   active: boolean;\n   *   value: string;\n   *   emphasis: `${ToggleButtonEmphasis}`;\n   *   size: `${ToggleButtonSize}`;\n   * }) | null} The element as a toggle button, or null if it is not a toggle button.\n   */\n  private static asToggleButton(element: Element):\n    | (HTMLElement & {\n        /**\n         * Whether the button is active or not. Will not toggle automatically but\n         * needs to be controlled externally.\n         */\n        active: boolean;\n        /**\n         * The value to associated with the button when selected in a\n         * Togglebuttongroup.\n         */\n        value: string;\n        /**\n         * Make it more or less visually prominent to users.\n         */\n        emphasis: `${ToggleButtonEmphasis}`;\n        /**\n         * Determines how large or small the togglebutton appears, allowing for\n         * customization of the togglebutton's dimensions to fit different design\n         * specifications and user needs.\n         */\n        size: `${ToggleButtonSize}`;\n      })\n    | null {\n    return element instanceof HTMLElement\n      ? (element as unknown as HTMLElement & {\n          /**\n           * Whether the button is active or not. Will not toggle automatically but\n           * needs to be controlled externally.\n           */\n          active: boolean;\n          /**\n           * The value to associated with the button when selected in a\n           * Togglebuttongroup.\n           */\n          value: string;\n          /**\n           * Make it more or less visually prominent to users.\n           */\n          emphasis: `${ToggleButtonEmphasis}`;\n          /**\n           * Determines how large or small the togglebutton appears, allowing for\n           * customization of the togglebutton's dimensions to fit different design\n           * specifications and user needs.\n           */\n          size: `${ToggleButtonSize}`;\n        })\n      : null;\n  }\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('value')\n  onValueChanged(newValue: typeof this.value) {\n    this.setActiveToggleButtons();\n    this.valueChanged.emit(newValue);\n  }\n\n  @Watch('emphasis')\n  onEmphasisChanged() {\n    this.setEmphasisToggleButtons();\n  }\n\n  @Watch('size')\n  onSizeChanged() {\n    this.setSizeToggleButtons();\n  }\n\n  /* eslint-disable nova/native-event-listener */\n  @Listen('toggled')\n  onToggled(event: CustomEvent<HTMLNvTogglebuttonElementEventMap['toggled']>) {\n    event.stopPropagation();\n\n    const valueSet = new Set(this.value);\n\n    if (this.exclusive && this.enforceValue) {\n      this.value = [event.detail.value];\n      return;\n    }\n\n    if (this.exclusive) {\n      if (valueSet.has(event.detail.value)) {\n        this.value = [];\n      } else {\n        this.value = [event.detail.value];\n      }\n      return;\n    }\n\n    toggle: if (event.detail.active) {\n      if (this.enforceValue && valueSet.size === 1) break toggle;\n      valueSet.delete(event.detail.value);\n    } else {\n      valueSet.add(event.detail.value);\n    }\n    this.value = [...valueSet];\n  }\n  /* eslint-enable nova/native-event-listener */\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.setActiveToggleButtons();\n    this.setEmphasisToggleButtons();\n    this.setSizeToggleButtons();\n    this.setupMutationObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the selected toggle buttons change.\n   * @bind value\n   */\n  @Event({ bubbles: false })\n  valueChanged: EventEmitter<string[]>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  // #endregion RENDER\n}\n"],"version":3}
+{"file":"nv-togglebuttongroup.js","mappings":"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","names":["NvTogglebuttongroup","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-togglebuttongroup/styles/nv-togglebuttongroup.scss?tag=nv-togglebuttongroup","src/components/nv-togglebuttongroup/nv-togglebuttongroup.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-togglebuttongroup {\n  @include root-styles();\n\n  &[emphasis=\"high\"] {\n    @include high-emphasis-styles();\n  }\n  &[emphasis=\"low\"] {\n    @include low-emphasis-styles();\n  }\n  @each $size in $sizes {\n    &[size=\"#{$size}\"] {\n      @include size-styles($size);\n      \n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Watch,\n  Element,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { ToggleButtonEmphasis, ToggleButtonSize } from '../../utils/constants';\n\n/**\n * @slot default - Child content of the component, pass the nv-togglebutton components here.\n */\n@Component({\n  tag: 'nv-togglebuttongroup',\n  styleUrl: 'styles/nv-togglebuttongroup.scss',\n  shadow: false,\n})\nexport class NvTogglebuttongroup {\n  @Element() el!: HTMLNvTogglebuttongroupElement;\n  private mutationObserver: MutationObserver;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The active toggle buttons in the group. Is an array of one string when in\n   * exclusive mode, and an array of strings when in non-exclusive mode.\n   */\n  @Prop({ reflect: false, mutable: true })\n  value: string[];\n\n  /**\n   * Activates single-selection mode so only one button can be active at a time.\n   */\n  @Prop({ reflect: true })\n  readonly exclusive: boolean = false;\n\n  /**\n   * Ensures at least one toggle stays selected at all times.\n   */\n  @Prop({ reflect: true })\n  readonly enforceValue: boolean = false;\n\n  /**\n   * Make it more or less visually prominent to users.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ToggleButtonEmphasis}` = 'high';\n\n  /**\n   * Determines how large or small the togglebutton appears, allowing for\n   * customization of the togglebutton's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ToggleButtonSize}` = 'md';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Sets the active state of all toggle buttons depending on the value of the\n   * group.\n   */\n  private setActiveToggleButtons = () => {\n    this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n      const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n      if (!btn) return;\n      btn.active = (this.value ?? []).includes(btn.value);\n    });\n  };\n\n  /**\n   * Sets the emphasis of all toggle buttons to the same value.\n   */\n  private setEmphasisToggleButtons = () => {\n    this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n      const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n      if (!btn) return;\n      btn.emphasis = this.emphasis;\n    });\n  };\n\n  /**\n   * Sets the size of all toggle buttons to the same value.\n   */\n  private setSizeToggleButtons = () => {\n    this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n      const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n      if (!btn) return;\n      btn.size = this.size;\n    });\n  };\n\n  /**\n   * Sets up the MutationObserver to watch for changes in child elements\n   */\n  private setupMutationObserver = (): void => {\n    this.mutationObserver = new MutationObserver(mutations => {\n      mutations.forEach(mutation => {\n        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {\n          this.setEmphasisToggleButtons();\n          this.setSizeToggleButtons();\n        }\n      });\n    });\n\n    this.mutationObserver.observe(this.el, {\n      childList: true,\n      subtree: true,\n    });\n  };\n\n  /**\n   * Narrow Type used locally to interact with nv-togglebutton child elements.\n   * @param {Element} element - The element to check.\n   * @returns {(HTMLElement & {\n   *   active: boolean;\n   *   value: string;\n   *   emphasis: `${ToggleButtonEmphasis}`;\n   *   size: `${ToggleButtonSize}`;\n   * }) | null} The element as a toggle button, or null if it is not a toggle button.\n   */\n  private static asToggleButton(element: Element):\n    | (HTMLElement & {\n        /**\n         * Whether the button is active or not. Will not toggle automatically but\n         * needs to be controlled externally.\n         */\n        active: boolean;\n        /**\n         * The value to associated with the button when selected in a\n         * Togglebuttongroup.\n         */\n        value: string;\n        /**\n         * Make it more or less visually prominent to users.\n         */\n        emphasis: `${ToggleButtonEmphasis}`;\n        /**\n         * Determines how large or small the togglebutton appears, allowing for\n         * customization of the togglebutton's dimensions to fit different design\n         * specifications and user needs.\n         */\n        size: `${ToggleButtonSize}`;\n      })\n    | null {\n    return element instanceof HTMLElement\n      ? (element as unknown as HTMLElement & {\n          /**\n           * Whether the button is active or not. Will not toggle automatically but\n           * needs to be controlled externally.\n           */\n          active: boolean;\n          /**\n           * The value to associated with the button when selected in a\n           * Togglebuttongroup.\n           */\n          value: string;\n          /**\n           * Make it more or less visually prominent to users.\n           */\n          emphasis: `${ToggleButtonEmphasis}`;\n          /**\n           * Determines how large or small the togglebutton appears, allowing for\n           * customization of the togglebutton's dimensions to fit different design\n           * specifications and user needs.\n           */\n          size: `${ToggleButtonSize}`;\n        })\n      : null;\n  }\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('value')\n  onValueChanged(newValue: typeof this.value) {\n    this.setActiveToggleButtons();\n    this.valueChanged.emit(newValue);\n  }\n\n  @Watch('emphasis')\n  onEmphasisChanged() {\n    this.setEmphasisToggleButtons();\n  }\n\n  @Watch('size')\n  onSizeChanged() {\n    this.setSizeToggleButtons();\n  }\n\n  /* eslint-disable nova/native-event-listener */\n  @Listen('toggled')\n  onToggled(event: CustomEvent<HTMLNvTogglebuttonElementEventMap['toggled']>) {\n    event.stopPropagation();\n\n    const valueSet = new Set(this.value);\n\n    if (this.exclusive && this.enforceValue) {\n      this.value = [event.detail.value];\n      return;\n    }\n\n    if (this.exclusive) {\n      if (valueSet.has(event.detail.value)) {\n        this.value = [];\n      } else {\n        this.value = [event.detail.value];\n      }\n      return;\n    }\n\n    toggle: if (event.detail.active) {\n      if (this.enforceValue && valueSet.size === 1) break toggle;\n      valueSet.delete(event.detail.value);\n    } else {\n      valueSet.add(event.detail.value);\n    }\n    this.value = [...valueSet];\n  }\n  /* eslint-enable nova/native-event-listener */\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.setActiveToggleButtons();\n    this.setEmphasisToggleButtons();\n    this.setSizeToggleButtons();\n    this.setupMutationObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the selected toggle buttons change.\n   * @bind value\n   */\n  @Event({ bubbles: false })\n  valueChanged: EventEmitter<string[]>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  // #endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-tooltip.js

@@ -1,4 +1,4 @@
-import { N as NvTooltip$1, d as defineCustomElement$1 } from './p-CIyQBhTX.js';
+import { N as NvTooltip$1, d as defineCustomElement$1 } from './p-BVOv1zgq.js';
 
 const NvTooltip = NvTooltip$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/{p-D1i2OAGe.js → p-B45HbBWe.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-C63Xpg9a.js';
 import { b as ButtonType, B as ButtonSize } from './p-BReL3Lsa.js';
-import { d as defineCustomElement$1 } from './p-DzUXTCUy.js';
+import { d as defineCustomElement$1 } from './p-COnt5ux_.js';
 
 const nvButtonCss = "nv-button{text-decoration:none;display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:var(--font-weight-medium-emphasis);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;transition:background-color 150ms ease-out;user-select:none;cursor:pointer;height:fit-content;width:fit-content}nv-button[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);height:var(--button-xs-height);font-size:var(--button-xs-font-size)}nv-button[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-button[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);height:var(--button-sm-height);font-size:var(--button-sm-font-size)}nv-button[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-button[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);height:var(--button-md-height);font-size:var(--button-md-font-size)}nv-button[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-button[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);height:var(--button-lg-height);font-size:var(--button-lg-font-size)}nv-button[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-button[emphasis=high]{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-button[emphasis=high]:hover{background:var(--components-button-high-background-hover);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text-hover)}nv-button[emphasis=high]:active{background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high]:focus,nv-button[emphasis=high]:focus-within{outline:none}nv-button[emphasis=high]:focus-visible,nv-button[emphasis=high]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=high][active]:not([active=false]){background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high][danger]:not([danger=false]){background:var(--components-button-destructive-high-background);border:1px solid transparent;color:var(--components-button-destructive-high-text)}nv-button[emphasis=high][danger]:not([danger=false]):hover{background:var(--components-button-destructive-high-background-hover);border:1px solid transparent;color:var(--components-button-destructive-high-text-hover)}nv-button[emphasis=high][danger]:not([danger=false]):focus,nv-button[emphasis=high][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=high][danger]:not([danger=false]):focus-visible,nv-button[emphasis=high][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=medium]{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-button[emphasis=medium]:hover{background:var(--components-button-medium-background-hover);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text-hover)}nv-button[emphasis=medium]:active{background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium]:focus,nv-button[emphasis=medium]:focus-within{outline:none}nv-button[emphasis=medium]:focus-visible,nv-button[emphasis=medium]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=medium]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=medium][active]:not([active=false]){background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium][danger]:not([danger=false]){background:var(--components-button-destructive-medium-background);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text)}nv-button[emphasis=medium][danger]:not([danger=false]):hover{background:var(--components-button-destructive-medium-background-hover);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text-hover)}nv-button[emphasis=medium][danger]:not([danger=false]):focus,nv-button[emphasis=medium][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=medium][danger]:not([danger=false]):focus-visible,nv-button[emphasis=medium][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=low]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-button[emphasis=low]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-button[emphasis=low]:active{background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-button[emphasis=low]:focus,nv-button[emphasis=low]:focus-within{outline:none}nv-button[emphasis=low]:focus-visible,nv-button[emphasis=low]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=low][active]:not([active=false]){background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-button[emphasis=low][danger]:not([danger=false]){background:var(--components-button-destructive-low-background);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text)}nv-button[emphasis=low][danger]:not([danger=false]):hover{background:var(--components-button-destructive-low-background-hover);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text-hover)}nv-button[emphasis=low][danger]:not([danger=false]):focus,nv-button[emphasis=low][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=low][danger]:not([danger=false]):focus-visible,nv-button[emphasis=low][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=lower]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-button[emphasis=lower]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-button[emphasis=lower]:active{background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-button[emphasis=lower]:focus,nv-button[emphasis=lower]:focus-within{outline:none}nv-button[emphasis=lower]:focus-visible,nv-button[emphasis=lower]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=lower]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=lower][active]:not([active=false]){background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-button[emphasis=lower][danger]:not([danger=false]){background:var(--components-button-destructive-lower-background);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text)}nv-button[emphasis=lower][danger]:not([danger=false]):hover{background:var(--components-button-destructive-lower-background-hover);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text-hover)}nv-button[emphasis=lower][danger]:not([danger=false]):focus,nv-button[emphasis=lower][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=lower][danger]:not([danger=false]):focus-visible,nv-button[emphasis=lower][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[fluid]:not([fluid=false]){width:100%}nv-button[loading]:not([loading=false]) [slot=leading-icon]{display:none}";
 
@@ -70,13 +70,12 @@ const NvButton = /*@__PURE__*/ proxyCustomElement(class NvButton extends H {
          * @param {Event} event - The click event.
          */
         this.handleButtonClick = (event) => {
-            var _a;
             if (this.loading || this.disabled) {
                 event.preventDefault();
                 return;
             }
             if (this.type !== ButtonType.Button &&
-                (this.form || ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.form))) {
+                (this.form || this.internals?.form)) {
                 this.processFormAction();
             }
             else if (this.form && this.type === ButtonType.Button) {
@@ -89,12 +88,11 @@ const NvButton = /*@__PURE__*/ proxyCustomElement(class NvButton extends H {
          * Falls back to ElementInternals form if no explicit form ID is provided.
          */
         this.processFormAction = () => {
-            var _a, _b;
             const formElement = this.form
                 ? document.getElementById(this.form)
-                : (_a = this.internals) === null || _a === void 0 ? void 0 : _a.form;
+                : this.internals?.form;
             if (!formElement) {
-                console.warn('No form element found.', `Form ID: ${this.form || 'Not provided'}`, `Internals form:`, (_b = this.internals) === null || _b === void 0 ? void 0 : _b.form);
+                console.warn('No form element found.', `Form ID: ${this.form || 'Not provided'}`, `Internals form:`, this.internals?.form);
                 return;
             }
             switch (this.type) {
@@ -188,6 +186,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { NvButton as N, defineCustomElement as d };
-//# sourceMappingURL=p-D1i2OAGe.js.map
+//# sourceMappingURL=p-B45HbBWe.js.map
 
-//# sourceMappingURL=p-D1i2OAGe.js.map
+//# sourceMappingURL=p-B45HbBWe.js.map

package/dist/components/p-B45HbBWe.js.map

@@ -0,0 +1 @@
+{"file":"p-B45HbBWe.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-button/styles/nv-button.scss?tag=nv-button","src/components/nv-button/nv-button.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\n// Make sure to update nv-button class in the tailwind-components.scss file when\n// you add new styles or change the structure here.\nnv-button {\n  @include root-styles();\n\n  @each $size in $sizes {\n    &[size=\"#{$size}\"] {\n      @include size-styles($size);\n    }\n  }\n\n  @each $emphasis in $emphases {\n    &[emphasis=\"#{$emphasis}\"] {\n      @include emphasis-styles($emphasis);\n\n      &[active]:not([active=\"false\"]) {\n        @include active-styles($emphasis);\n      }\n\n      &[danger]:not([danger=\"false\"]) {\n        @include danger-styles($emphasis);\n      }\n    }\n  }\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include fluid-styles();\n  }\n\n  &[loading]:not([loading=\"false\"]) {\n    [slot=\"leading-icon\"] {\n      display: none;\n    }\n  }\n}\n","import {\n  Component,\n  Listen,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n} from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Content of the button.\n * @slot leading-icon - Icon before the label.\n * @slot trailing-icon - Icon after the label.\n */\n@Component({\n  tag: 'nv-button',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'styles/nv-button.scss',\n})\nexport class NvButton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvButtonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button's emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Use this prop to highlight the button when it represents the current page\n   * or active selection. This helps users understand their navigation context.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Applies styling that visually indicates the button represents a dangerous\n   * action.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ reflect: true, mutable: true })\n  disabled: boolean = false;\n\n  /**\n   * Allows the button to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn't interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  /**\n   * Sets the form associated with the button in case the (submit) button is not a child of a form.\n   * Matches the native HTML button 'form' attribute behavior.\n   */\n  @Prop({ reflect: true })\n  readonly form: string;\n\n  /**\n   * Use this to make the button skip-able when users navigate with the keyboard.\n   * The button remains clickable but won’t be reached via the Tab key.\n   */\n  @Prop({ reflect: true })\n  readonly disableTabindex: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles button click events, managing form actions and disabled states.\n   * Prevents default behavior when button is disabled or loading, and\n   * processes form submissions/resets when appropriate.\n   * @param {Event} event - The click event.\n   */\n  private handleButtonClick = (event: Event): void => {\n    if (this.loading || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (\n      this.type !== ButtonType.Button &&\n      (this.form || this.internals?.form)\n    ) {\n      this.processFormAction();\n    } else if (this.form && this.type === ButtonType.Button) {\n      console.warn(\n        'Button has a form id but is not of type submit or reset so no form action will be processed.',\n        `Button:`,\n        this.el,\n      );\n    }\n  };\n\n  /**\n   * Processes form-related actions by finding the associated form element\n   * and triggering the appropriate action (submit/reset) based on button type.\n   * Falls back to ElementInternals form if no explicit form ID is provided.\n   */\n  private processFormAction = (): void => {\n    const formElement = this.form\n      ? (document.getElementById(this.form) as HTMLFormElement)\n      : this.internals?.form;\n\n    if (!formElement) {\n      console.warn(\n        'No form element found.',\n        `Form ID: ${this.form || 'Not provided'}`,\n        `Internals form:`,\n        this.internals?.form,\n      );\n      return;\n    }\n\n    switch (this.type) {\n      case ButtonType.Submit:\n        formElement.requestSubmit();\n        break;\n      case ButtonType.Reset:\n        formElement.reset();\n        break;\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.el.click();\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"button\"\n        tabindex={this.disableTabindex ? -1 : 0}\n        onClick={this.handleButtonClick}\n      >\n        {this.loading && (\n          <nv-loader\n            size={this.size === ButtonSize.Large ? 'sm' : 'xs'}\n          ></nv-loader>\n        )}\n\n        <slot name=\"leading-icon\"></slot>\n        <slot></slot>\n        <slot name=\"trailing-icon\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/p-B6GgGra-.js

@@ -0,0 +1,29 @@
+/**
+ * Adds a set of event listeners to the given target.
+ * @param {EventsAndListeners} events - The events and listeners to add.
+ * @param {Element | Window | Document} target  - The target element or window to add the event listeners to.
+ * @param {T} context - The class context to bind the event listeners to.
+ */
+function addEventListeners(events, target, context) {
+    events.forEach(([event, listener]) => target.addEventListener(event, listener.bind(context)));
+}
+/**
+ * Removes a set of event listeners from the given target.
+ * @param {EventsAndListeners} events - The events and listeners to remove.
+ * @param {Element | Window | Document} target  - The target element or window to remove the event listeners from.
+ * @param {T} context - The class context to bind the event listeners to.
+ */
+function removeEventListeners(events, target, context) {
+    events.forEach(([event, listener]) => target.removeEventListener(event, listener.bind(context)));
+}
+
+var events_utils = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    addEventListeners: addEventListeners,
+    removeEventListeners: removeEventListeners
+});
+
+export { addEventListeners as a, events_utils as e, removeEventListeners as r };
+//# sourceMappingURL=p-B6GgGra-.js.map
+
+//# sourceMappingURL=p-B6GgGra-.js.map

package/dist/components/p-B6GgGra-.js.map

@@ -0,0 +1 @@
+{"file":"p-B6GgGra-.js","mappings":"AAEA;;;;;AAKG;SACa,iBAAiB,CAC/B,MAA0B,EAC1B,MAAmC,EACnC,OAAU,EAAA;IAEV,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,QAAQ,CAAC,KAC/B,MAAM,CAAC,gBAAgB,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CACvD;AACH;AAEA;;;;;AAKG;SACa,oBAAoB,CAClC,MAA0B,EAC1B,MAAmC,EACnC,OAAU,EAAA;IAEV,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,QAAQ,CAAC,KAC/B,MAAM,CAAC,mBAAmB,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAC1D;AACH;;;;;;;;;;","names":[],"sources":["src/utils/events.utils.ts"],"sourcesContent":["export type EventsAndListeners = [string, EventListener][];\n\n/**\n * Adds a set of event listeners to the given target.\n * @param {EventsAndListeners} events - The events and listeners to add.\n * @param {Element | Window | Document} target  - The target element or window to add the event listeners to.\n * @param {T} context - The class context to bind the event listeners to.\n */\nexport function addEventListeners<T>(\n  events: EventsAndListeners,\n  target: Element | Window | Document,\n  context: T,\n) {\n  events.forEach(([event, listener]) =>\n    target.addEventListener(event, listener.bind(context)),\n  );\n}\n\n/**\n * Removes a set of event listeners from the given target.\n * @param {EventsAndListeners} events - The events and listeners to remove.\n * @param {Element | Window | Document} target  - The target element or window to remove the event listeners from.\n * @param {T} context - The class context to bind the event listeners to.\n */\nexport function removeEventListeners<T>(\n  events: EventsAndListeners,\n  target: Element | Window | Document,\n  context: T,\n) {\n  events.forEach(([event, listener]) =>\n    target.removeEventListener(event, listener.bind(context)),\n  );\n}\n"],"version":3}

package/dist/components/{p-Dk8ekxr_.js → p-B7VlEQVW.js}

@@ -409,8 +409,7 @@ const WeekNumbers = props => {
         return () => handleWeekClick(week);
     };
     return (h("div", { class: "week-numbers" }, h("div", { class: "week-header" }, localizedWeekText), weeks.map((week, weekIndex) => {
-        var _a;
-        const firstDayWithDate = ((_a = week.find(d => d.date)) === null || _a === void 0 ? void 0 : _a.date) || new Date();
+        const firstDayWithDate = week.find(d => d.date)?.date || new Date();
         const weekNumber = getWeekNumber(firstDayWithDate);
         const isClickable = selectionType === 'range';
         return (h("div", { class: `week-number ${isClickable ? 'clickable' : ''}`, onClick: createWeekHandler(week), key: `week-${weekIndex}`, role: isClickable ? 'button' : undefined, tabindex: isClickable ? 0 : undefined }, weekNumber));
@@ -644,7 +643,7 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
                 }
                 else {
                     // Handle malformed dates gracefully - reset state
-                    console.warn(`Invalid date range format: ${values === null || values === void 0 ? void 0 : values[0]}, ${values === null || values === void 0 ? void 0 : values[1]}`);
+                    console.warn(`Invalid date range format: ${values?.[0]}, ${values?.[1]}`);
                     this.startDate = null;
                     this.endDate = null;
                     if (!this.showActions) {
@@ -922,26 +921,17 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
         this.handleMonthChange = (event, calendarOffset = 0) => {
             const select = event.target;
             const selectedMonth = parseInt(select.value, 10);
-            const newDate = new Date(this.currentDate);
-            // Date for the calendar being changed
-            const targetCalendarDate = new Date(newDate.toUTCString());
+            // Calculate the current displayed year for this specific calendar
+            const targetCalendarDate = new Date(this.currentDate);
+            targetCalendarDate.setUTCDate(1);
             targetCalendarDate.setUTCMonth(targetCalendarDate.getUTCMonth() + calendarOffset);
-            const currentMonth = targetCalendarDate.getUTCMonth();
-            let monthDiff = selectedMonth - currentMonth;
-            // Smartly adjust for year change
-            if (monthDiff > 6) {
-                // e.g. from Jan to Dec, go back 1 month
-                monthDiff -= 12;
-            }
-            if (monthDiff < -6) {
-                // e.g. from Dec to Jan, go forward 1 month
-                monthDiff += 12;
-            }
-            // Apply the diff to the original `currentDate`
-            const finalDate = new Date(this.currentDate);
-            // Avoid day-of-month rollover when moving to shorter months.
-            finalDate.setUTCDate(1);
-            finalDate.setUTCMonth(finalDate.getUTCMonth() + monthDiff);
+            const currentYear = targetCalendarDate.getUTCFullYear();
+            // Create a new date with the selected month, keeping the SAME year
+            // This ensures the year never changes when selecting a month
+            const newTargetDate = new Date(Date.UTC(currentYear, selectedMonth, 1));
+            // Calculate what currentDate should be by subtracting the offset
+            const finalDate = new Date(newTargetDate);
+            finalDate.setUTCMonth(finalDate.getUTCMonth() - calendarOffset);
             this.currentDate = finalDate;
         };
         /**
@@ -1420,8 +1410,8 @@ const NvCalendar = /*@__PURE__*/ proxyCustomElement(class NvCalendar extends H {
      * @slot default - Child content of the component.
      */
     render() {
-        return (h(Host, { key: '9a2df275a214bedb084034e2936cd12ba2024300' }, h("div", { key: '400094ae82785980d16040b659e9a1b04d8c0de8', class: "datepicker-root" }, h("div", { key: '9e38e04428b64b4185555491c970a09326beceb8', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: '29e6968fad93c8d822beabf37bdd7840cd90eb62', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), ((this.hasShortcuts && this.shortcutsPlacement === 'bottom') ||
-            this.hasActions) && (h("div", { key: '4a49e27c472dff679cd8e6ea1db3fcd16e164522', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: '4482d2bbd341cacd8b1c529d3be054e8a33fd515' })));
+        return (h(Host, { key: '18793334c6b01685f8c42acb0709bb3b35a1d466' }, h("div", { key: '2fa622b5027d4fc94732e0826fac044056e8bca1', class: "datepicker-root" }, h("div", { key: '4c88d823b5a720d3529bc199014b5e498ba1a701', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: 'e6be82fb79db589171e4db2beb640fb005dd603f', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), ((this.hasShortcuts && this.shortcutsPlacement === 'bottom') ||
+            this.hasActions) && (h("div", { key: '5991593c0ae9128c3dfea099db2864a37105c9a4', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: '5e92296fdc3732ea7f241a5ce381e0234330e7a3' })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -1480,6 +1470,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { NvCalendar as N, defineCustomElement as d, getDefaultExportFromCjs as g };
-//# sourceMappingURL=p-Dk8ekxr_.js.map
+//# sourceMappingURL=p-B7VlEQVW.js.map
 
-//# sourceMappingURL=p-Dk8ekxr_.js.map
+//# sourceMappingURL=p-B7VlEQVW.js.map