npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.15.0 → 3.17.0 - Mend

@nova-design-system/nova-webcomponents 3.15.0 → 3.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (554) hide show

package/dist/cjs/nv-toggle.cjs.entry.js CHANGED Viewed

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c56424e5.js');
+const index = require('./index-93d3b2f8.js');
 const clsx = require('./clsx-fc789adc.js');
 const v4 = require('./v4-7014b8b0.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 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-toggle-border-default);background:var(--components-toggle-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-toggle-shape-default);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-toggle-border-hover)}nv-toggle .input-container input[type=checkbox]:hover::after{background-color:var(--components-toggle-shape-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-toggle-border-default)}nv-toggle .input-container input[type=checkbox]:focus::after{background-color:var(--components-toggle-shape-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-toggle-background-default-checked);border-color:var(--components-toggle-border-default-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-toggle-shape-default-checked);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-toggle-background-default-checked);border-color:var(--components-toggle-border-default-checked)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-toggle-background-disabled);border-color:var(--components-toggle-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked{background:var(--components-toggle-background-disabled-checked);border-color:var(--components-toggle-border-disabled-checked)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-toggle-shape-disabled-checked)}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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);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-toggle-border-default);background:var(--components-toggle-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-toggle-shape-default);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-toggle-border-hover)}nv-toggle .input-container input[type=checkbox]:hover::after{background-color:var(--components-toggle-shape-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-toggle-border-default)}nv-toggle .input-container input[type=checkbox]:focus::after{background-color:var(--components-toggle-shape-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-toggle-background-default-checked);border-color:var(--components-toggle-border-default-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-toggle-shape-default-checked);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-toggle-background-default-checked);border-color:var(--components-toggle-border-default-checked)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-toggle-background-disabled);border-color:var(--components-toggle-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked{background:var(--components-toggle-background-disabled-checked);border-color:var(--components-toggle-border-disabled-checked)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-toggle-shape-disabled-checked)}nv-toggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), 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 {

package/dist/cjs/nv-toggle.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-toggle.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,WAAW,GAAG,siIAAsiI,CAAC;AAC3jI,uBAAe,WAAW;;MCyBb,QAAQ;IANrB;;;;;;;;;;;QAmBW,YAAO,GAAWA,KAAM,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,QACEC,QAACC,UAAI,qDACH,KAAK,EAAEC,SAAI,CACT,IAAI,CAAC,cAAc,KAAK,QAAQ,IAAI,wBAAwB,CAC7D,IAEDF,kEAAK,KAAK,EAAC,iBAAiB,IAC1BA,oEACE,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,EAENA,kEAAK,KAAK,EAAC,gBAAgB,IACxB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,MACrDA,oEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAEE,SAAI,CAAC,IAAI,CAAC,SAAS,IAAI,iBAAiB,CAAC,IAEhDF,mEAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT,EAEA,CAAC,IAAI,CAAC,WAAW;YAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,MAC7CA,kEAAK,KAAK,EAAC,aAAa,IACtBA,mEAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;","names":["uuidv4","h","Host","clsx"],"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-toggle-border-default);\n background: var(--components-toggle-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-toggle-shape-default);\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-toggle-border-hover); \n \n &::after {\n background-color: var(--components-toggle-shape-hover);\n }\n }\n\n &:focus {\n border-color: var(--components-toggle-border-default);\n\n &::after {\n background-color: var(--components-toggle-shape-default);\n }\n }\n\n @include focus-ring();\n\n &:checked {\n background: var(--components-toggle-background-default-checked);\n border-color: var(--components-toggle-border-default-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-toggle-shape-default-checked);\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-toggle-background-default-checked);\n border-color: var(--components-toggle-border-default-checked);\n }\n }\n\n &:disabled:not([readonly]) {\n box-shadow: unset;\n background: var(--components-toggle-background-disabled);\n border-color: var(--components-toggle-border-default);\n\n &:checked {\n background: var(--components-toggle-background-disabled-checked);\n border-color: var(--components-toggle-border-disabled-checked);\n &::after {\n background-color: var(--components-toggle-shape-disabled-checked);\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}
1	+ {"file":"nv-toggle.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,WAAW,GAAG,mpIAAmpI,CAAC;AACxqI,uBAAe,WAAW;;MCyBb,QAAQ;IANrB;;;;;;;;;;;QAmBW,YAAO,GAAWA,KAAM,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,QACEC,QAACC,UAAI,qDACH,KAAK,EAAEC,SAAI,CACT,IAAI,CAAC,cAAc,KAAK,QAAQ,IAAI,wBAAwB,CAC7D,IAEDF,kEAAK,KAAK,EAAC,iBAAiB,IAC1BA,oEACE,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,EAENA,kEAAK,KAAK,EAAC,gBAAgB,IACxB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,MACrDA,oEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAEE,SAAI,CAAC,IAAI,CAAC,SAAS,IAAI,iBAAiB,CAAC,IAEhDF,mEAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT,EAEA,CAAC,IAAI,CAAC,WAAW;YAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,MAC7CA,kEAAK,KAAK,EAAC,aAAa,IACtBA,mEAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;","names":["uuidv4","h","Host","clsx"],"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: var(--font-family-default), var(--font-family-fallback), sans-serif;\n font-size: var(--form-label-font-size);\n font-style: normal;\n font-weight: var(--font-weight-medium-emphasis);\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: var(--font-family-default), var(--font-family-fallback), 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-toggle-border-default);\n background: var(--components-toggle-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-toggle-shape-default);\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-toggle-border-hover); \n \n &::after {\n background-color: var(--components-toggle-shape-hover);\n }\n }\n\n &:focus {\n border-color: var(--components-toggle-border-default);\n\n &::after {\n background-color: var(--components-toggle-shape-default);\n }\n }\n\n @include focus-ring();\n\n &:checked {\n background: var(--components-toggle-background-default-checked);\n border-color: var(--components-toggle-border-default-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-toggle-shape-default-checked);\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-toggle-background-default-checked);\n border-color: var(--components-toggle-border-default-checked);\n }\n }\n\n &:disabled:not([readonly]) {\n box-shadow: unset;\n background: var(--components-toggle-background-disabled);\n border-color: var(--components-toggle-border-default);\n\n &:checked {\n background: var(--components-toggle-background-disabled-checked);\n border-color: var(--components-toggle-border-disabled-checked);\n &::after {\n background-color: var(--components-toggle-shape-disabled-checked);\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/cjs/nv-togglebutton.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c56424e5.js');
+const index = require('./index-93d3b2f8.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);font-size:var(--button-xs-font-size);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=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}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);font-size:var(--button-sm-font-size);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=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}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);font-size:var(--button-md-font-size);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=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}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);font-size:var(--button-lg-font-size);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[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}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 NvTogglebuttonStyle0 = nvTogglebuttonCss;

package/dist/cjs/nv-togglebuttongroup.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c56424e5.js');
+const index = require('./index-93d3b2f8.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 NvTogglebuttongroupStyle0 = nvTogglebuttongroupCss;
@@ -156,7 +156,7 @@ const NvTogglebuttongroup = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'edb5b3bb7651b482cd02625038e36cdb35743453' }, index.h("slot", { key: '2b0bc4891b885ecf7febdce7062fc02b120ec939' })));
+        return (index.h(index.Host, { key: '7aad0160ae8e093765ba42649293e27d7b93ab75' }, index.h("slot", { key: '39364122a5e65b1a454bd782a5daacc7edfee8b0' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/nv-togglebuttongroup.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-togglebuttongroup.entry.cjs.js","mappings":"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","names":["h","Host"],"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 @deprecated [EXPERIMENTAL]\n * @experimental This component is still in development and subject to change in future releases.\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 @Listen('toggled')\n onToggled(event: CustomEvent<HTMLNvTogglebuttonElementEventMap['toggled']>) {\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\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()\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}
1	+ {"file":"nv-togglebuttongroup.entry.cjs.js","mappings":"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","names":["h","Host"],"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 @Listen('toggled')\n onToggled(event: CustomEvent<HTMLNvTogglebuttonElementEventMap['toggled']>) {\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\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()\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/cjs/nv-tooltip.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c56424e5.js');
+const index = require('./index-93d3b2f8.js');
 const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative;user-select:none}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip nv-popover>[data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip nv-popover>[data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
 const NvTooltipStyle0 = nvTooltipCss;

package/dist/collection/collection-manifest.json CHANGED Viewed

@@ -40,9 +40,9 @@
     "components/nv-notificationcontainer/nv-notificationcontainer.js",
     "components/nv-popover/nv-popover.js",
     "components/nv-row/nv-row.js",
+    "components/nv-split/nv-split.js",
     "components/nv-stack/nv-stack.js",
     "components/nv-table/nv-table.js",
-    "components/nv-tablecolumn/nv-tablecolumn.js",
     "components/nv-toggle/nv-toggle.js",
     "components/nv-togglebutton/nv-togglebutton.js",
     "components/nv-togglebuttongroup/nv-togglebuttongroup.js",

package/dist/collection/components/nv-accordion/nv-accordion.js CHANGED Viewed

@@ -50,7 +50,7 @@ export class NvAccordion {
         const item = items[index];
         if (!item || item.disabled) {
             console.warn('[toggleItem] Item not found or disabled:', index);
-            this.openChanged.emit({ openIndexes: [...(this.openIndexes || [])] });
+            this.openIndexesChanged.emit([...(this.openIndexes || [])]);
             return;
         }
         let openIndexes = [...(this.openIndexes || [])];
@@ -78,7 +78,7 @@ export class NvAccordion {
         this.openIndexes = [...openIndexes];
         this.updateChildrenState();
         this.updatingFromInternal = false;
-        this.openChanged.emit({ openIndexes: [...openIndexes] });
+        this.openIndexesChanged.emit([...openIndexes]);
     }
     /**
      * Updates the open state of child elements based on openIndexes
@@ -145,7 +145,7 @@ export class NvAccordion {
                 this.updatingFromInternal = true;
                 this.openIndexes = [...childOpenIndexes];
                 this.updatingFromInternal = false;
-                this.openChanged.emit({ openIndexes: [...this.openIndexes] });
+                this.openIndexesChanged.emit([...this.openIndexes]);
             }
         }
         // Ensure children are in sync with current openIndexes state
@@ -156,7 +156,7 @@ export class NvAccordion {
     //#region RENDER
     render() {
         var _a;
-        return (h(Host, { key: 'b5c36f19bcbd0d06e9d924ae6f9630b8b6cae05a', role: "list", class: "nv-accordion" }, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) ? (this.data.map((item, i) => {
+        return (h(Host, { key: 'b7fa476c7830d6c5715ce53e42ad37253942e0e1', role: "list", class: "nv-accordion" }, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) ? (this.data.map((item, i) => {
             var _a;
             return (h("nv-accordion-item", { key: (_a = item.id) !== null && _a !== void 0 ? _a : i, itemTitle: item.title, disabled: item.disabled, open: (this.openIndexes || []).includes(i), mode: this.mode }, item.subtitle ? (h("div", { slot: "header" }, h("div", { class: "nv-accordion-item__header-content" }, h("span", { class: "nv-accordion-item__title" }, item.title), h("span", { class: "nv-accordion-item__subtitle" }, item.subtitle)))) : null, h("div", { slot: "content" }, item.content), item.footer && h("div", { slot: "footer" }, item.footer)));
         })) : (h("slot", null))));
@@ -239,18 +239,21 @@ export class NvAccordion {
     }
     static get events() {
         return [{
-                "method": "openChanged",
-                "name": "openChanged",
+                "method": "openIndexesChanged",
+                "name": "openIndexesChanged",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "bind",
+                            "text": "openIndexes"
+                        }],
                     "text": "Event emitted when an item's open state changes"
                 },
                 "complexType": {
-                    "original": "{\n    /** Index of open items */\n    openIndexes: number[];\n  }",
-                    "resolved": "{ openIndexes: number[]; }",
+                    "original": "number[]",
+                    "resolved": "number[]",
                     "references": {}
                 }
             }];

package/dist/collection/components/nv-accordion/nv-accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-accordion.js","sourceRoot":"","sources":["../../../src/components/nv-accordion/nv-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Method,\n Listen,\n Element,\n forceUpdate,\n Watch,\n} from '@stencil/core';\n\n/*\n @slot default - Slot for custom content (optional, ignored if data is provided)\n /\n@Component({\n tag: 'nv-accordion',\n styleUrl: 'styles/nv-accordion.scss',\n shadow: false,\n})\nexport class NvAccordion {\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Data to display as a list of items (title, subtitle, content).\n /\n @Prop({ reflect: false })\n readonly data: {\n /* Unique identifier of the item /\n id: string;\n /* Item title /\n title: string;\n /* Optional subtitle /\n subtitle?: string;\n /* Main content /\n content: string;\n /* Optional footer /\n footer?: string;\n /* Disabled state /\n disabled?: boolean;\n }[] = [];\n\n /\n Expansion mode: 'accordion' (single open) or 'multi' (multiple open)\n /\n @Prop({ reflect: true })\n readonly mode: 'accordion' \| 'multi' = 'accordion';\n\n /\n Index of open items (external control possible)\n /\n @Prop({ reflect: false, mutable: true })\n openIndexes?: number[] = [];\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region STATE\n\n @State()\n private updatingFromInternal: boolean = false;\n\n /\n * Reference to host element to access children\n /\n @Element() el!: HTMLNvAccordionElement;\n\n //#endregion STATE\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Event emitted when an item's open state changes\n /\n @Event()\n openChanged: EventEmitter<{\n /* Index of open items /\n openIndexes: number[];\n }>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region METHODS\n\n /\n * Opens an item by its index (Public API)\n * @param {number} index Index of the item to open\n /\n @Method()\n async open(index: number) {\n this.toggleItem(index, true);\n }\n\n /\n Closes an item by its index (Public API)\n * @param {number} index Index of the item to close\n /\n @Method()\n async close(index: number) {\n this.toggleItem(index, false);\n }\n\n /\n Toggles an item's state (internal)\n * @param {number} index Item index\n * @param {boolean} [forceOpen] Force open (true) or close (false)\n /\n private toggleItem(index: number, forceOpen?: boolean) {\n const items = Array.from(\n this.el.querySelectorAll('nv-accordion-item'),\n ) as HTMLNvAccordionItemElement[];\n const item = items[index];\n\n if (!item \|\| item.disabled) {\n console.warn('[toggleItem] Item not found or disabled:', index);\n this.openChanged.emit({ openIndexes: [...(this.openIndexes \|\| [])] });\n return;\n }\n\n let openIndexes = [...(this.openIndexes \|\| [])];\n const isOpen = openIndexes.includes(index);\n\n if (this.mode === 'accordion') {\n openIndexes =\n forceOpen === false \|\| (forceOpen === undefined && isOpen)\n ? []\n : [index];\n } else {\n if (forceOpen === false) {\n openIndexes = openIndexes.filter(i => i !== index);\n } else if (forceOpen === true && !isOpen) {\n openIndexes.push(index);\n } else if (forceOpen === undefined) {\n openIndexes = isOpen\n ? openIndexes.filter(i => i !== index)\n : [...openIndexes, index];\n }\n }\n\n this.updatingFromInternal = true;\n this.openIndexes = [...openIndexes];\n this.updateChildrenState();\n this.updatingFromInternal = false;\n\n this.openChanged.emit({ openIndexes: [...openIndexes] });\n }\n\n /\n Updates the open state of child elements based on openIndexes\n /\n private async updateChildrenState() {\n const items = Array.from(\n this.el.querySelectorAll('nv-accordion-item'),\n ) as HTMLNvAccordionItemElement[];\n\n items.forEach((item, i) => {\n const shouldBeOpen = (this.openIndexes \|\| []).includes(i);\n item.open = shouldBeOpen;\n item.mode = this.mode;\n item.setAttribute('aria-expanded', shouldBeOpen ? 'true' : 'false');\n forceUpdate(item);\n });\n }\n\n /\n Listens to itemToggle events from nv-accordion-item elements\n * @param {CustomEvent<boolean>} event Event emitted by nv-accordion-item\n /\n @Listen('itemToggle')\n onItemToggle(event: CustomEvent<boolean>) {\n if (this.updatingFromInternal) {\n return;\n }\n\n const items = Array.from(\n this.el.querySelectorAll('nv-accordion-item'),\n ) as HTMLNvAccordionItemElement[];\n const targetItem = event.target as HTMLNvAccordionItemElement;\n const index = items.indexOf(targetItem);\n\n if (index !== -1) {\n this.toggleItem(index, event.detail);\n } else {\n console.warn('[onItemToggle] Target item not found in items list');\n }\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('openIndexes')\n onOpenIndexesChange(\n newValue: number[] \| undefined,\n oldValue: number[] \| undefined,\n ) {\n if (\n !this.updatingFromInternal &&\n newValue !== undefined &&\n newValue !== oldValue\n ) {\n this.updateChildrenState();\n }\n }\n\n @Watch('mode')\n onModeChange() {\n this.updateChildrenState();\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (this.openIndexes === undefined) {\n this.openIndexes = [];\n }\n }\n\n async componentDidLoad() {\n const items = Array.from(\n this.el.querySelectorAll('nv-accordion-item'),\n ) as HTMLNvAccordionItemElement[];\n\n // Only initialize openIndexes from child items if no data is provided and openIndexes is not explicitly set\n if (\n !this.data?.length &&\n (!this.openIndexes \|\| this.openIndexes.length === 0)\n ) {\n const childOpenIndexes = items\n .map((item, i) => (item.hasAttribute('open') \|\| item.open ? i : -1))\n .filter(i => i !== -1);\n\n if (childOpenIndexes.length > 0) {\n this.updatingFromInternal = true;\n this.openIndexes = [...childOpenIndexes];\n this.updatingFromInternal = false;\n\n this.openChanged.emit({ openIndexes: [...this.openIndexes] });\n }\n }\n\n // Ensure children are in sync with current openIndexes state\n await this.updateChildrenState();\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"list\" class=\"nv-accordion\">\n {this.data?.length ? (\n this.data.map((item, i) => (\n <nv-accordion-item\n key={item.id ?? i}\n itemTitle={item.title}\n disabled={item.disabled}\n open={(this.openIndexes \|\| []).includes(i)}\n mode={this.mode}\n >\n {item.subtitle ? (\n <div slot=\"header\">\n <div class=\"nv-accordion-item__header-content\">\n <span class=\"nv-accordion-item__title\">{item.title}</span>\n <span class=\"nv-accordion-item__subtitle\">\n {item.subtitle}\n </span>\n </div>\n </div>\n ) : null}\n <div slot=\"content\">{item.content}</div>\n {item.footer && <div slot=\"footer\">{item.footer}</div>}\n </nv-accordion-item>\n ))\n ) : (\n <slot></slot>\n )}\n </Host>\n );\n }\n\n // #endregion RENDER\n}\n"]}
1	+ {"version":3,"file":"nv-accordion.js","sourceRoot":"","sources":["../../../src/components/nv-accordion/nv-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Method,\n Listen,\n Element,\n forceUpdate,\n Watch,\n} from '@stencil/core';\n\n/*\n @slot default - Slot for custom content (optional, ignored if data is provided)\n /\n@Component({\n tag: 'nv-accordion',\n styleUrl: 'styles/nv-accordion.scss',\n shadow: false,\n})\nexport class NvAccordion {\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Data to display as a list of items (title, subtitle, content).\n /\n @Prop({ reflect: false })\n readonly data: {\n /* Unique identifier of the item /\n id: string;\n /* Item title /\n title: string;\n /* Optional subtitle /\n subtitle?: string;\n /* Main content /\n content: string;\n /* Optional footer /\n footer?: string;\n /* Disabled state /\n disabled?: boolean;\n }[] = [];\n\n /\n Expansion mode: 'accordion' (single open) or 'multi' (multiple open)\n /\n @Prop({ reflect: true })\n readonly mode: 'accordion' \| 'multi' = 'accordion';\n\n /\n Index of open items (external control possible)\n /\n @Prop({ reflect: false, mutable: true })\n openIndexes?: number[] = [];\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region STATE\n\n @State()\n private updatingFromInternal: boolean = false;\n\n /\n * Reference to host element to access children\n /\n @Element() el!: HTMLNvAccordionElement;\n\n //#endregion STATE\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Event emitted when an item's open state changes\n * @bind openIndexes\n /\n @Event()\n openIndexesChanged: EventEmitter<number[]>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region METHODS\n\n /\n * Opens an item by its index (Public API)\n * @param {number} index Index of the item to open\n /\n @Method()\n async open(index: number) {\n this.toggleItem(index, true);\n }\n\n /\n Closes an item by its index (Public API)\n * @param {number} index Index of the item to close\n /\n @Method()\n async close(index: number) {\n this.toggleItem(index, false);\n }\n\n /\n Toggles an item's state (internal)\n * @param {number} index Item index\n * @param {boolean} [forceOpen] Force open (true) or close (false)\n /\n private toggleItem(index: number, forceOpen?: boolean) {\n const items = Array.from(\n this.el.querySelectorAll('nv-accordion-item'),\n ) as HTMLNvAccordionItemElement[];\n const item = items[index];\n\n if (!item \|\| item.disabled) {\n console.warn('[toggleItem] Item not found or disabled:', index);\n this.openIndexesChanged.emit([...(this.openIndexes \|\| [])]);\n return;\n }\n\n let openIndexes = [...(this.openIndexes \|\| [])];\n const isOpen = openIndexes.includes(index);\n\n if (this.mode === 'accordion') {\n openIndexes =\n forceOpen === false \|\| (forceOpen === undefined && isOpen)\n ? []\n : [index];\n } else {\n if (forceOpen === false) {\n openIndexes = openIndexes.filter(i => i !== index);\n } else if (forceOpen === true && !isOpen) {\n openIndexes.push(index);\n } else if (forceOpen === undefined) {\n openIndexes = isOpen\n ? openIndexes.filter(i => i !== index)\n : [...openIndexes, index];\n }\n }\n\n this.updatingFromInternal = true;\n this.openIndexes = [...openIndexes];\n this.updateChildrenState();\n this.updatingFromInternal = false;\n\n this.openIndexesChanged.emit([...openIndexes]);\n }\n\n /\n Updates the open state of child elements based on openIndexes\n /\n private async updateChildrenState() {\n const items = Array.from(\n this.el.querySelectorAll('nv-accordion-item'),\n ) as HTMLNvAccordionItemElement[];\n\n items.forEach((item, i) => {\n const shouldBeOpen = (this.openIndexes \|\| []).includes(i);\n item.open = shouldBeOpen;\n item.mode = this.mode;\n item.setAttribute('aria-expanded', shouldBeOpen ? 'true' : 'false');\n forceUpdate(item);\n });\n }\n\n /\n Listens to itemToggle events from nv-accordion-item elements\n * @param {CustomEvent<boolean>} event Event emitted by nv-accordion-item\n /\n @Listen('itemToggle')\n onItemToggle(event: CustomEvent<boolean>) {\n if (this.updatingFromInternal) {\n return;\n }\n\n const items = Array.from(\n this.el.querySelectorAll('nv-accordion-item'),\n ) as HTMLNvAccordionItemElement[];\n const targetItem = event.target as HTMLNvAccordionItemElement;\n const index = items.indexOf(targetItem);\n\n if (index !== -1) {\n this.toggleItem(index, event.detail);\n } else {\n console.warn('[onItemToggle] Target item not found in items list');\n }\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('openIndexes')\n onOpenIndexesChange(\n newValue: number[] \| undefined,\n oldValue: number[] \| undefined,\n ) {\n if (\n !this.updatingFromInternal &&\n newValue !== undefined &&\n newValue !== oldValue\n ) {\n this.updateChildrenState();\n }\n }\n\n @Watch('mode')\n onModeChange() {\n this.updateChildrenState();\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (this.openIndexes === undefined) {\n this.openIndexes = [];\n }\n }\n\n async componentDidLoad() {\n const items = Array.from(\n this.el.querySelectorAll('nv-accordion-item'),\n ) as HTMLNvAccordionItemElement[];\n\n // Only initialize openIndexes from child items if no data is provided and openIndexes is not explicitly set\n if (\n !this.data?.length &&\n (!this.openIndexes \|\| this.openIndexes.length === 0)\n ) {\n const childOpenIndexes = items\n .map((item, i) => (item.hasAttribute('open') \|\| item.open ? i : -1))\n .filter(i => i !== -1);\n\n if (childOpenIndexes.length > 0) {\n this.updatingFromInternal = true;\n this.openIndexes = [...childOpenIndexes];\n this.updatingFromInternal = false;\n\n this.openIndexesChanged.emit([...this.openIndexes]);\n }\n }\n\n // Ensure children are in sync with current openIndexes state\n await this.updateChildrenState();\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"list\" class=\"nv-accordion\">\n {this.data?.length ? (\n this.data.map((item, i) => (\n <nv-accordion-item\n key={item.id ?? i}\n itemTitle={item.title}\n disabled={item.disabled}\n open={(this.openIndexes \|\| []).includes(i)}\n mode={this.mode}\n >\n {item.subtitle ? (\n <div slot=\"header\">\n <div class=\"nv-accordion-item__header-content\">\n <span class=\"nv-accordion-item__title\">{item.title}</span>\n <span class=\"nv-accordion-item__subtitle\">\n {item.subtitle}\n </span>\n </div>\n </div>\n ) : null}\n <div slot=\"content\">{item.content}</div>\n {item.footer && <div slot=\"footer\">{item.footer}</div>}\n </nv-accordion-item>\n ))\n ) : (\n <slot></slot>\n )}\n </Host>\n );\n }\n\n // #endregion RENDER\n}\n"]}

package/dist/collection/components/nv-accordion-item/nv-accordion-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-accordion-item.js","sourceRoot":"","sources":["../../../src/components/nv-accordion-item/nv-accordion-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Method,\n State,\n Element,\n Watch,\n} from '@stencil/core';\nimport { useCollapse } from '../../animations';\n\n/*\n Accordion item element for nv-accordion.\n \n @slot header - Custom header (replaces itemTitle/subtitle)\n * @slot content - Main content (expandable area)\n /\n@Component({\n tag: 'nv-accordion-item',\n styleUrl: 'styles/nv-accordion-item.scss',\n shadow: false,\n})\nexport class NvAccordionItem {\n @Element() el!: HTMLNvAccordionItemElement;\n private contentRef?: HTMLDivElement;\n private mutationObserver?: MutationObserver;\n private isToggling: boolean = false;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Item title (displayed if header slot is absent)\n /\n @Prop({ reflect: true })\n readonly itemTitle?: string;\n\n /\n Item subtitle (displayed if header slot is absent)\n /\n @Prop({ reflect: true })\n readonly subtitle?: string;\n\n /\n Open or closed\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /\n Disables the item\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Maximum content height (in px, optional). If not defined, auto height.\n /\n @Prop({ reflect: true })\n readonly maxContentHeight?: number;\n\n /\n Parent expansion mode (accordion or multi)\n /\n @Prop({ reflect: true })\n readonly mode?: 'accordion' \| 'multi' = 'accordion';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Event emitted on toggle (header click or programmatic change)\n /\n @Event()\n itemToggle: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region STATE\n\n /\n * Internal state for open/close rendering\n /\n @State()\n currentOpenState: boolean = false;\n\n /\n Controls if the panel has been initialized for animations\n /\n @State()\n isInitialized: boolean = false;\n\n /\n Animation in progress\n /\n @State()\n isAnimating: boolean = false;\n\n //#endregion STATE\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('open')\n async onOpenChanged(newValue: boolean, oldValue: boolean) {\n if (this.disabled) {\n console.warn('[onOpenChanged] Item is disabled, forcing closed state');\n this.currentOpenState = false;\n this.open = false;\n return;\n }\n\n this.currentOpenState = newValue;\n\n const isInitialRender = oldValue === undefined;\n if (!isInitialRender) {\n if (newValue === false && !this.isToggling) {\n this.itemToggle.emit(newValue);\n } else if (newValue && !this.isToggling) {\n this.itemToggle.emit(newValue);\n }\n await this.updateVisibility(newValue);\n }\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region ANIMATIONS\n\n /\n * Updates the visibility state with Nova animation system\n * @param {boolean} open - Whether the accordion item should be open\n /\n private async updateVisibility(open: boolean) {\n if (!this.contentRef) {\n console.error('[updateVisibility] No contentRef available');\n return;\n }\n\n this.isAnimating = true;\n\n const { collapse, expand } = useCollapse(this.contentRef, {\n duration: 200,\n });\n\n if (open) {\n await expand();\n } else {\n await collapse();\n }\n\n this.isAnimating = false;\n }\n\n //#endregion ANIMATIONS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.currentOpenState = this.open;\n }\n\n componentDidLoad() {\n if (this.contentRef) {\n setTimeout(() => {\n const { setExpanded, setCollapsed } = useCollapse(this.contentRef!, {\n duration: 200,\n });\n\n if (this.open) {\n setExpanded();\n this.currentOpenState = true;\n } else {\n setCollapsed();\n this.currentOpenState = false;\n }\n this.isInitialized = true;\n }, 0);\n }\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region METHODS\n\n /\n * Toggle open/close (Public API)\n /\n @Method()\n async toggle() {\n if (!this.disabled && !this.isAnimating) {\n this.isToggling = true;\n const newOpen = !this.open;\n\n this.open = newOpen;\n this.itemToggle.emit(newOpen);\n\n this.isToggling = false;\n } else {\n console.warn('[toggle] Ignored toggle (disabled or animating)');\n }\n }\n\n /\n Handler for header click\n /\n private handleHeaderClick = () => {\n this.toggle();\n };\n\n /\n Handler for iconbutton click\n * @param {Event} e - Click event\n /\n private handleIconClick = (e: Event) => {\n e.stopPropagation();\n this.toggle();\n };\n\n /\n Handler for keyboard events on iconbutton\n * @param {KeyboardEvent} e - Keyboard event\n /\n private handleHeaderKeyDown = (e: KeyboardEvent) => {\n if (this.disabled) {\n console.warn('[handleHeaderKeyDown] Ignored (disabled)');\n return;\n }\n\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n this.toggle();\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (!this.open) {\n this.isToggling = true;\n this.open = true;\n this.itemToggle.emit(true);\n this.isToggling = false;\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (this.open) {\n this.isToggling = true;\n this.open = false;\n this.itemToggle.emit(false);\n this.isToggling = false;\n }\n break;\n }\n };\n\n /\n Get the chevron icon name based on open state\n * @returns {string} The icon name to display in the chevron button\n /\n private get chevronIconName(): string {\n const name = this.open ? 'chevron-top' : 'chevron-down';\n return name;\n }\n\n //#endregion METHODS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={{\n 'nv-accordion-item': true,\n 'is-open': this.currentOpenState,\n 'is-disabled': this.disabled,\n 'is-animating': this.isAnimating,\n }}\n role=\"listitem\"\n aria-expanded={this.currentOpenState ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n >\n <div\n class=\"nv-accordion-item__header\"\n onClick={this.handleHeaderClick}\n aria-controls=\"content\"\n >\n <slot name=\"header\">\n <div class=\"nv-accordion-item__header-content\">\n {this.itemTitle && (\n <span class=\"nv-accordion-item__title\">{this.itemTitle}</span>\n )}\n {this.subtitle && (\n <span class=\"nv-accordion-item__subtitle\">{this.subtitle}</span>\n )}\n </div>\n </slot>\n <nv-iconbutton\n emphasis=\"low\"\n size=\"sm\"\n shape=\"square\"\n name={this.chevronIconName}\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleIconClick}\n onKeyDown={this.handleHeaderKeyDown}\n aria-controls=\"content\"\n aria-label={\n this.currentOpenState ? 'Close the section' : 'Open the section'\n }\n ></nv-iconbutton>\n </div>\n\n <div\n id=\"content\"\n class=\"nv-accordion-item__content\"\n ref={el => (this.contentRef = el as HTMLDivElement)}\n >\n <div class=\"nv-accordion-item__content-inner\">\n <slot name=\"content\" />\n </div>\n </div>\n </Host>\n );\n }\n\n // #endregion RENDER\n}\n"]}
1	+ {"version":3,"file":"nv-accordion-item.js","sourceRoot":"","sources":["../../../src/components/nv-accordion-item/nv-accordion-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Method,\n State,\n Element,\n Watch,\n} from '@stencil/core';\nimport { useCollapse } from '../../animations';\n\n/*\n Accordion item element for nv-accordion.\n \n @slot header - Custom header (replaces itemTitle/subtitle)\n * @slot content - Main content (expandable area)\n /\n@Component({\n tag: 'nv-accordion-item',\n styleUrl: 'styles/nv-accordion-item.scss',\n shadow: false,\n})\nexport class NvAccordionItem {\n @Element() el!: HTMLNvAccordionItemElement;\n private contentRef?: HTMLDivElement;\n private mutationObserver?: MutationObserver;\n private isToggling: boolean = false;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Item title (displayed if header slot is absent)\n /\n @Prop({ reflect: true })\n readonly itemTitle?: string;\n\n /\n Item subtitle (displayed if header slot is absent)\n /\n @Prop({ reflect: true })\n readonly subtitle?: string;\n\n /\n Open or closed\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /\n Disables the item\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Maximum content height (in px, optional). If not defined, auto height.\n /\n @Prop({ reflect: true })\n readonly maxContentHeight?: number;\n\n /\n Parent expansion mode (accordion or multi)\n /\n @Prop({ reflect: true })\n readonly mode?: 'accordion' \| 'multi' = 'accordion';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Event emitted on toggle (header click or programmatic change)\n /\n @Event()\n itemToggle: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region STATE\n\n /\n * Internal state for open/close rendering\n /\n @State()\n currentOpenState: boolean = false;\n\n /\n Controls if the panel has been initialized for animations\n /\n @State()\n isInitialized: boolean = false;\n\n /\n Animation in progress\n /\n @State()\n isAnimating: boolean = false;\n\n //#endregion STATE\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('open')\n async onOpenChanged(newValue: boolean, oldValue: boolean) {\n if (this.disabled) {\n console.warn('[onOpenChanged] Item is disabled, forcing closed state');\n this.currentOpenState = false;\n this.open = false;\n return;\n }\n\n this.currentOpenState = newValue;\n\n const isInitialRender = oldValue === undefined;\n if (!isInitialRender) {\n if (newValue === false && !this.isToggling) {\n this.itemToggle.emit(newValue);\n } else if (newValue && !this.isToggling) {\n this.itemToggle.emit(newValue);\n }\n await this.updateVisibility(newValue);\n }\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region ANIMATIONS\n\n /\n * Updates the visibility state with Nova animation system\n * @param {boolean} open - Whether the accordion item should be open\n /\n private async updateVisibility(open: boolean) {\n if (!this.contentRef) {\n console.error('[updateVisibility] No contentRef available');\n return;\n }\n\n this.isAnimating = true;\n\n const { collapse, expand } = useCollapse(this.contentRef, {\n duration: 200,\n });\n\n if (open) {\n await expand();\n } else {\n await collapse();\n }\n\n this.isAnimating = false;\n }\n\n //#endregion ANIMATIONS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.currentOpenState = this.open;\n }\n\n componentDidLoad() {\n if (this.contentRef) {\n setTimeout(() => {\n const { setExpanded, setCollapsed } = useCollapse(this.contentRef!, {\n duration: 200,\n });\n\n if (this.open) {\n setExpanded();\n this.currentOpenState = true;\n } else {\n setCollapsed();\n this.currentOpenState = false;\n }\n this.isInitialized = true;\n }, 0);\n }\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region METHODS\n\n /\n * Toggle open/close (Public API)\n /\n @Method()\n async toggle() {\n if (!this.disabled && !this.isAnimating) {\n this.isToggling = true;\n const newOpen = !this.open;\n\n this.open = newOpen;\n this.itemToggle.emit(newOpen);\n\n this.isToggling = false;\n } else {\n console.warn('[toggle] Ignored toggle (disabled or animating)');\n }\n }\n\n /\n Handler for header click\n /\n private handleHeaderClick = () => {\n this.toggle();\n };\n\n /\n Handler for iconbutton click\n * @param {Event} e - Click event\n /\n private handleIconClick = (e: Event) => {\n e.stopPropagation();\n this.toggle();\n };\n\n /\n Handler for keyboard events on iconbutton\n * @param {KeyboardEvent} e - Keyboard event\n /\n private handleHeaderKeyDown = (e: KeyboardEvent) => {\n if (this.disabled) {\n console.warn('[handleHeaderKeyDown] Ignored (disabled)');\n return;\n }\n\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n this.toggle();\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (!this.open) {\n this.isToggling = true;\n this.open = true;\n this.itemToggle.emit(true);\n this.isToggling = false;\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (this.open) {\n this.isToggling = true;\n this.open = false;\n this.itemToggle.emit(false);\n this.isToggling = false;\n }\n break;\n }\n };\n\n /\n Get the chevron icon name based on open state\n * @returns {string} The icon name to display in the chevron button\n /\n private get chevronIconName(): string {\n const name = this.open ? 'chevron-top' : 'chevron-down';\n return name;\n }\n\n //#endregion METHODS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={{\n 'nv-accordion-item': true,\n 'is-open': this.currentOpenState,\n 'is-disabled': this.disabled,\n 'is-animating': this.isAnimating,\n }}\n role=\"listitem\"\n aria-expanded={this.currentOpenState ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n >\n <div\n class=\"nv-accordion-item__header\"\n onClick={this.handleHeaderClick}\n aria-controls=\"content\"\n >\n <slot name=\"header\">\n <div class=\"nv-accordion-item__header-content\">\n {this.itemTitle && (\n <span class=\"nv-accordion-item__title\">{this.itemTitle}</span>\n )}\n {this.subtitle && (\n <span class=\"nv-accordion-item__subtitle\">{this.subtitle}</span>\n )}\n </div>\n </slot>\n <nv-iconbutton\n emphasis=\"low\"\n size=\"sm\"\n shape=\"square\"\n name={this.chevronIconName}\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleIconClick}\n onKeyDown={this.handleHeaderKeyDown}\n aria-controls=\"content\"\n aria-label={\n this.currentOpenState ? 'Close the section' : 'Open the section'\n }\n ></nv-iconbutton>\n </div>\n\n <div\n id=\"content\"\n class=\"nv-accordion-item__content\"\n ref={el => (this.contentRef = el as HTMLDivElement)}\n >\n <div class=\"nv-accordion-item__content-inner\">\n <slot name=\"content\" />\n </div>\n </div>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"]}

package/dist/collection/components/nv-accordion-item/styles/nv-accordion-item.css CHANGED Viewed

@@ -54,7 +54,7 @@ nv-accordion-item .nv-accordion-item__content .nv-accordion-item__content-inner
   /* text/md/medium */
   font-size: var(--font-size-md);
   font-style: normal;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium-emphasis);
   line-height: var(--line-height-base); /* 150% */
 }
 nv-accordion-item.is-disabled {

package/dist/collection/components/nv-alert/nv-alert.css CHANGED Viewed

@@ -6,7 +6,7 @@ nv-alert {
   position: relative;
   gap: var(--alert-gap-x);
   border-radius: var(--alert-radius);
-  font-family: "TT Norms Pro", "Montserrat", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
 }
 nv-alert > nv-icon {
   margin-left: var(--alert-icon-position-x);

package/dist/collection/components/nv-avatar/nv-avatar.css CHANGED Viewed

@@ -7,7 +7,7 @@ nv-avatar {
   border-radius: var(--radius-rounded-full) !important;
   display: flex !important;
   flex-shrink: 0 !important;
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-style: normal;
   font-weight: var(--font-weight-medium-emphasis);
   justify-content: center !important;

package/dist/collection/components/nv-breadcrumb/nv-breadcrumb.css CHANGED Viewed

@@ -4,7 +4,7 @@ nv-breadcrumb {
   color: var(--components-breadcrumb-text);
   font-size: var(--font-size-sm);
   font-style: normal;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium-emphasis);
   line-height: var(--line-height-sm);
 }
 nv-breadcrumb.visually-hidden {

package/dist/collection/components/nv-button/nv-button.js CHANGED Viewed

@@ -107,12 +107,6 @@ export class NvButton {
             this.el.click();
         }
     }
-    handleTouchStart(event) {
-        if (event.touches.length > 1)
-            return;
-        event.preventDefault();
-        this.el.click();
-    }
     //#endregion EVENTS
     /****************************************************************************/
     //#region WATCHERS
@@ -140,7 +134,7 @@ export class NvButton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '54c0b3351f4d8a180058a03e61a562882fb98498', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (h("nv-loader", { key: '21315e4af4111bcf47c67e65a9a58a1d7121a43e', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), h("slot", { key: 'f37683ddaa2c11c5b7accfc99429c930f5a3dcf6', name: "leading-icon" }), h("slot", { key: 'd17ebe7505d9027c6c58f930a8ea9b097561cead' }), h("slot", { key: '2cd6c9756cc7540417041adf5830b734291b2ab5', name: "trailing-icon" })));
+        return (h(Host, { key: '42488f71ad33233c839cd70b3ea57aee50b143b3', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (h("nv-loader", { key: 'a30c71eebb8f0476bcca5acbc8e7ac7f6377740c', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), h("slot", { key: '4bbcee81ef7236ae35471c649971c122e4b468f3', name: "leading-icon" }), h("slot", { key: '82203f6aed911e61aef2438bba3b3e664ffb9f76' }), h("slot", { key: 'c97a5ce78c15556b8c1a91a4d06eb6bc9a9cd255', name: "trailing-icon" })));
     }
     static get is() { return "nv-button"; }
     static get formAssociated() { return true; }
@@ -372,12 +366,6 @@ export class NvButton {
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "touchstart",
-                "method": "handleTouchStart",
-                "target": undefined,
-                "capture": false,
-                "passive": false
             }];
     }
     static get attachInternalsMemberName() { return "internals"; }

package/dist/collection/components/nv-button/nv-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-button.js","sourceRoot":"","sources":["../../../src/components/nv-button/nv-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,MAAM,EACN,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,eAAe,EACf,OAAO,EACP,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,UAAU,EAAkB,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAE/E;;;;GAIG;AAOH,MAAM,OAAO,QAAQ;IANrB;QAUE,8EAA8E;QAC9E,oBAAoB;QAEpB;;;;WAIG;QAEM,SAAI,GAAoB,IAAI,CAAC;QAEtC;;;;WAIG;QAEM,aAAQ,GAAwB,MAAM,CAAC;QAEhD;;;WAGG;QAEM,WAAM,GAAY,KAAK,CAAC;QAEjC;;;WAGG;QAEM,WAAM,GAAY,KAAK,CAAC;QAEjC;;;;WAIG;QAEH,YAAO,GAAY,KAAK,CAAC;QAEzB;;WAEG;QAEH,aAAQ,GAAY,KAAK,CAAC;QAE1B;;WAEG;QAEM,UAAK,GAAY,KAAK,CAAC;QAEhC;;;;WAIG;QAEM,SAAI,GAAoB,QAAQ,CAAC;QAS1C,uBAAuB;QACvB,8EAA8E;QAC9E,iBAAiB;QAEjB;;;;;WAKG;QACK,sBAAiB,GAAG,CAAC,KAAY,EAAQ,EAAE;;YACjD,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YAED,IACE,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,MAAM;gBAC/B,CAAC,IAAI,CAAC,IAAI,KAAI,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,CAAA,CAAC,EACnC,CAAC;gBACD,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,CAAC;iBAAM,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,MAAM,EAAE,CAAC;gBACxD,OAAO,CAAC,IAAI,CACV,8FAA8F,EAC9F,SAAS,EACT,IAAI,CAAC,EAAE,CACR,CAAC;YACJ,CAAC;QACH,CAAC,CAAC;QAEF;;;;WAIG;QACK,sBAAiB,GAAG,GAAS,EAAE;;YACrC,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI;gBAC3B,CAAC,CAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAqB;gBACzD,CAAC,CAAC,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,CAAC;YAEzB,IAAI,CAAC,WAAW,EAAE,CAAC;gBACjB,OAAO,CAAC,IAAI,CACV,wBAAwB,EACxB,YAAY,IAAI,CAAC,IAAI,IAAI,cAAc,EAAE,EACzC,iBAAiB,EACjB,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,CACrB,CAAC;gBACF,OAAO;YACT,CAAC;YAED,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;gBAClB,KAAK,UAAU,CAAC,MAAM;oBACpB,WAAW,CAAC,aAAa,EAAE,CAAC;oBAC5B,MAAM;gBACR,KAAK,UAAU,CAAC,KAAK;oBACnB,WAAW,CAAC,KAAK,EAAE,CAAC;oBACpB,MAAM;YACV,CAAC;QACH,CAAC,CAAC;~~KAuEH~~;~~IArEC~~,oBAAoB;IACpB,8EAA8E;IAC9E,gBAAgB;IAGhB,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;QAClB,CAAC;IACH,CAAC;~~IAGD,gBAAgB,CAAC,KAAiB;QAChC,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;YAAE,OAAO;QACrC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;IAClB,CAAC;~~IAED,mBAAmB;IACnB,8EAA8E;IAC9E,kBAAkB;IAGlB,mBAAmB,CAAC,OAAgB;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;IAC1B,CAAC;IAGD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;QAC/B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,qBAAqB;IACrB,8EAA8E;IAC9E,mBAAmB;IAEnB,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,sBAAsB;IACtB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB;YAC7D,IAAI,CAAC,OAAO,IAAI,CACf,kEACE,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,GACvC,CACd;YAED,6DAAM,IAAI,EAAC,cAAc,GAAQ;YACjC,8DAAa;YACb,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC7B,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","sourcesContent":["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 //#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 ~~@Listen('touchstart', { passive: false })\n handleTouchStart(event: TouchEvent) {\n if (event.touches.length > 1) return;\n event.preventDefault();\n this.el.click();\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 role=\"button\" tabindex=\"0\" onClick={this.handleButtonClick}>\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"]}
1	+ {"version":3,"file":"nv-button.js","sourceRoot":"","sources":["../../../src/components/nv-button/nv-button.tsx"],"names":[],"mappings":"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","sourcesContent":["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 //#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 role=\"button\" tabindex=\"0\" onClick={this.handleButtonClick}>\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"]}

package/dist/collection/components/nv-button/styles/nv-button.css CHANGED Viewed

@@ -5,7 +5,7 @@ nv-button {
   align-items: center;
   font-style: normal;
   font-weight: var(--font-weight-medium-emphasis);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   transition: background-color 150ms ease-out;
   user-select: none;
   cursor: pointer;

package/dist/collection/components/nv-datagrid/nv-datagrid.css CHANGED Viewed

@@ -37,7 +37,7 @@ nv-datagrid th {
   height: var(--spacing-12);
   padding: var(--spacing-3) var(--spacing-4);
   font-size: var(--font-size-md);
-  font-weight: 700;
+  font-weight: var(--font-weight-high-emphasis);
   color: var(--components-datagrid-header-text);
 }
 nv-datagrid td {
@@ -46,7 +46,7 @@ nv-datagrid td {
   max-height: var(--spacing-14);
   padding: var(--spacing-2) var(--spacing-4);
   font-size: var(--font-size-md);
-  font-weight: 400;
+  font-weight: var(--font-weight-low-emphasis);
   color: var(--components-datagrid-body-text);
   white-space: nowrap;
   text-overflow: ellipsis;

package/dist/collection/components/nv-dialog/nv-dialog.css CHANGED Viewed

@@ -48,10 +48,10 @@ dialog .content .content-body {
   padding: var(--dialog-body-padding-y) var(--dialog-body-padding-x);
   scrollbar-gutter: stable both-edges;
   /* text/md/regular */
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--font-size-md);
   font-style: normal;
-  font-weight: 400;
+  font-weight: var(--font-weight-low-emphasis);
   line-height: var(--line-height-base); /* 150% */
   color: var(--color-content-medium-text);
 }