npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.11.0 → 3.12.0 - Mend

@nova-design-system/nova-webcomponents 3.11.0 → 3.12.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 (314) hide show

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

@@ -6,7 +6,7 @@ const index = require('./index-c56424e5.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-form-field-border-default);background:var(--components-form-field-background-default)}nv-toggle .input-container input[type=checkbox]::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-switch-dot);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-form-field-border-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-background-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-border-focus)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-form-field-background-disabled);border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-form-shape-foreground-disabled)}nv-toggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:450;line-height:var(--form-description-line-height)}nv-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}";
+const nvToggleCss = "nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle label{align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-toggle label.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-form-field-border-default);background:var(--components-form-field-background-default)}nv-toggle .input-container input[type=checkbox]::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-switch-dot);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-form-field-border-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-background-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-border-focus)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-form-field-background-disabled);border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-form-shape-foreground-disabled)}nv-toggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:450;line-height:var(--form-description-line-height)}nv-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}";
 const NvToggleStyle0 = nvToggleCss;
 const NvToggle = class {

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,mpHAAmpH,CAAC;AACxqH,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-form-field-border-default);\n background: var(--components-form-field-background-default);\n\n &::after {\n content: '';\n display: block;\n width: var(--form-toggle-switch-dot-default);\n height: var(--form-toggle-switch-dot-default);\n background-color: var(--components-form-shape-foreground-switch-dot);\n border-radius: var(--radius-rounded-full);\n position: absolute;\n top: 50%;\n left: 25%;\n transform: translate(-50%, -50%);\n }\n\n &:hover {\n border-color: var(--components-form-field-border-hover);\n }\n\n &:focus {\n border-color: var(--components-form-field-border-default);\n }\n\n @include focus-ring();\n\n &:checked {\n background: var(--components-form-field-background-checked);\n border-color: var(--components-form-field-background-checked);\n\n &::after {\n content: '';\n display: block;\n width: var(--form-toggle-switch-dot-default);\n height: var(--form-toggle-switch-dot-default);\n background-color: var(--components-form-shape-foreground-default);\n border-radius: var(--radius-rounded-full);\n position: absolute;\n top: 50%;\n left: 75%;\n transform: translate(-50%, -50%);\n }\n\n &:focus {\n background: var(--components-form-field-background-checked);\n border-color: var(--components-form-field-border-focus);\n }\n }\n\n &:disabled:not([readonly]) {\n box-shadow: unset;\n background: var(--components-form-field-background-disabled);\n border-color: var(--components-form-field-border-default);\n\n &:checked {\n &::after {\n background-color: var(--components-form-shape-foreground-disabled);\n }\n }\n }\n}\n\nnv-toggle {\n @include root-styles();\n\n &.label-placement-before {\n @include label-before-styles();\n }\n\n &[disabled] {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n // opacity: var(--components-form-opacity-disabled); Error: Invalid value for --components-form-opacity-disabled (expected a <number> but got \"50px\")\n opacity: 0.5;\n }\n label {\n @include label-styles();\n\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n }\n\n .input-container {\n @include input-container-styles();\n\n input[type=\"checkbox\"] {\n @include input-styles();\n }\n }\n\n .description {\n @include description-styles();\n }\n\n .text-container {\n @include text-container-styles();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Watch,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/*\n @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n /\n@Component({\n tag: 'nv-toggle',\n styleUrl: 'nv-toggle.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvToggle {\n @Element() el!: HTMLNvToggleElement;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the radio button’s input element and the for attribute of\n * the associated label. If no ID is provided, a random one will be\n * automatically generated to ensure unique identification, facilitating\n * proper label association and accessibility.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n The name attribute for the toggle input, used to reference the form data\n * after submission.\n /\n @Prop({ reflect: true })\n readonly name?: string;\n\n /\n The value attribute of the toggle input, representing the value sent on\n * form submission when the toggle is checked.\n /\n @Prop({ reflect: true })\n readonly value?: string;\n\n /* The label displayed next to the toggle./\n @Prop({ reflect: true })\n readonly label?: string;\n\n /\n Determines the position of the label relative to the toggle, either\n * 'start' (before) or 'end' (after).\n /\n @Prop({ reflect: true })\n readonly labelPlacement: `${LabelPlacement}`;\n\n /\n Hides the label visually while still keeping it available for screen\n * readers.\n /\n @Prop({ reflect: true })\n readonly hideLabel: boolean = false;\n\n /\n A description providing additional context or information about the\n * toggle.\n /\n @Prop({ reflect: true })\n readonly description?: string;\n\n /* Indicates whether the toggle is checked or not. /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /* Disables the toggle, preventing user interaction. /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Sets the toggle to read-only, preventing user changes but still allowing\n * focus and selection of text.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emits when the checked state changes.\n * @bind checked\n /\n @Event()\n checkedChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Watches for changes to the checked state and emits the new value.\n * @param {boolean} checked - The new value of the checked state.\n /\n @Watch('checked')\n onCheckedChanged(checked: boolean) {\n this.checkedChanged.emit(checked);\n }\n\n /\n Listens for the change event on the toggle input element and updates the checked state.\n * the checked state of the host elements.\n * @param {Event} event - The change event.\n /\n @Listen('change')\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n\n if (target.type === 'checkbox' && target.id === this.inputId) {\n if (this.readonly \|\| this.disabled) {\n event.preventDefault();\n return;\n }\n\n this.checked = target.checked;\n }\n }\n\n //#endregion WATCHERS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(\n this.labelPlacement === 'before' && 'label-placement-before',\n )}\n >\n <div class=\"input-container\">\n <input\n type=\"checkbox\"\n id={this.inputId}\n name={this.name}\n autocomplete=\"off\"\n value={this.value}\n checked={Boolean(this.checked)}\n disabled={this.disabled \|\| this.readonly}\n readonly={this.readonly}\n />\n </div>\n\n <div class=\"text-container\">\n {(this.label \|\| this.el.querySelector('[slot=\"label\"]')) && (\n <label\n htmlFor={this.inputId}\n class={clsx(this.hideLabel && 'visually-hidden')}\n >\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n {(this.description \|\|\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-toggle.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,WAAW,GAAG,uoHAAuoH,CAAC;AAC5pH,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-form-field-border-default);\n background: var(--components-form-field-background-default);\n\n &::after {\n content: '';\n display: block;\n width: var(--form-toggle-switch-dot-default);\n height: var(--form-toggle-switch-dot-default);\n background-color: var(--components-form-shape-foreground-switch-dot);\n border-radius: var(--radius-rounded-full);\n position: absolute;\n top: 50%;\n left: 25%;\n transform: translate(-50%, -50%);\n }\n\n &:hover {\n border-color: var(--components-form-field-border-hover);\n }\n\n &:focus {\n border-color: var(--components-form-field-border-default);\n }\n\n @include focus-ring();\n\n &:checked {\n background: var(--components-form-field-background-checked);\n border-color: var(--components-form-field-background-checked);\n\n &::after {\n content: '';\n display: block;\n width: var(--form-toggle-switch-dot-default);\n height: var(--form-toggle-switch-dot-default);\n background-color: var(--components-form-shape-foreground-default);\n border-radius: var(--radius-rounded-full);\n position: absolute;\n top: 50%;\n left: 75%;\n transform: translate(-50%, -50%);\n }\n\n &:focus {\n background: var(--components-form-field-background-checked);\n border-color: var(--components-form-field-border-focus);\n }\n }\n\n &:disabled:not([readonly]) {\n box-shadow: unset;\n background: var(--components-form-field-background-disabled);\n border-color: var(--components-form-field-border-default);\n\n &:checked {\n &::after {\n background-color: var(--components-form-shape-foreground-disabled);\n }\n }\n }\n}\n\nnv-toggle {\n @include root-styles();\n\n &.label-placement-before {\n @include label-before-styles();\n }\n\n &[disabled] {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n // opacity: var(--components-form-opacity-disabled); Error: Invalid value for --components-form-opacity-disabled (expected a <number> but got \"50px\")\n opacity: 0.5;\n }\n label {\n @include label-styles();\n\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n }\n\n .input-container {\n @include input-container-styles();\n\n input[type=\"checkbox\"] {\n @include input-styles();\n }\n }\n\n .description {\n @include description-styles();\n }\n\n .text-container {\n @include text-container-styles();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Watch,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/*\n @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n /\n@Component({\n tag: 'nv-toggle',\n styleUrl: 'nv-toggle.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvToggle {\n @Element() el!: HTMLNvToggleElement;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the radio button’s input element and the for attribute of\n * the associated label. If no ID is provided, a random one will be\n * automatically generated to ensure unique identification, facilitating\n * proper label association and accessibility.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n The name attribute for the toggle input, used to reference the form data\n * after submission.\n /\n @Prop({ reflect: true })\n readonly name?: string;\n\n /\n The value attribute of the toggle input, representing the value sent on\n * form submission when the toggle is checked.\n /\n @Prop({ reflect: true })\n readonly value?: string;\n\n /* The label displayed next to the toggle./\n @Prop({ reflect: true })\n readonly label?: string;\n\n /\n Determines the position of the label relative to the toggle, either\n * 'start' (before) or 'end' (after).\n /\n @Prop({ reflect: true })\n readonly labelPlacement: `${LabelPlacement}`;\n\n /\n Hides the label visually while still keeping it available for screen\n * readers.\n /\n @Prop({ reflect: true })\n readonly hideLabel: boolean = false;\n\n /\n A description providing additional context or information about the\n * toggle.\n /\n @Prop({ reflect: true })\n readonly description?: string;\n\n /* Indicates whether the toggle is checked or not. /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /* Disables the toggle, preventing user interaction. /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Sets the toggle to read-only, preventing user changes but still allowing\n * focus and selection of text.\n /\n @Prop({ reflect: true })\n readonly readonly: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emits when the checked state changes.\n * @bind checked\n /\n @Event()\n checkedChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Watches for changes to the checked state and emits the new value.\n * @param {boolean} checked - The new value of the checked state.\n /\n @Watch('checked')\n onCheckedChanged(checked: boolean) {\n this.checkedChanged.emit(checked);\n }\n\n /\n Listens for the change event on the toggle input element and updates the checked state.\n * the checked state of the host elements.\n * @param {Event} event - The change event.\n /\n @Listen('change')\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n\n if (target.type === 'checkbox' && target.id === this.inputId) {\n if (this.readonly \|\| this.disabled) {\n event.preventDefault();\n return;\n }\n\n this.checked = target.checked;\n }\n }\n\n //#endregion WATCHERS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(\n this.labelPlacement === 'before' && 'label-placement-before',\n )}\n >\n <div class=\"input-container\">\n <input\n type=\"checkbox\"\n id={this.inputId}\n name={this.name}\n autocomplete=\"off\"\n value={this.value}\n checked={Boolean(this.checked)}\n disabled={this.disabled \|\| this.readonly}\n readonly={this.readonly}\n />\n </div>\n\n <div class=\"text-container\">\n {(this.label \|\| this.el.querySelector('[slot=\"label\"]')) && (\n <label\n htmlFor={this.inputId}\n class={clsx(this.hideLabel && 'visually-hidden')}\n >\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n {(this.description \|\|\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c56424e5.js');
-const nvTogglebuttonCss = "nv-togglebutton{display:inline-flex;justify-content:center;align-items:center}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);z-index:111}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);z-index:111}nv-togglebutton[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=low][active]:not([active=false]),nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}";
+const nvTogglebuttonCss = "nv-togglebutton{display:inline-flex;justify-content:center;align-items:center}nv-togglebutton:focus-visible,nv-togglebutton:has(:focus-visible){z-index:1}nv-togglebutton[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);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;
 const NvTogglebutton = class {

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

	@@ -1 +1 @@
1	- {"file":"nv-togglebutton.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,~~2oJAA2oJ,~~CAAC;~~AACtqJ~~,6BAAe,iBAAiB;;MCUnB,cAAc;IAL3B;;;;;;;;;;QAeW,SAAI,GAA0B,IAAI,CAAC;;;;QAanC,aAAQ,GAAY,KAAK,CAAC;;;;;QAO1B,WAAM,GAAY,KAAK,CAAC;;;;QAMxB,aAAQ,GAA8B,MAAM,CAAC;;;;QAM9C,gBAAW,GAAG;YACpB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;gBAChB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;aACpB,CAAC,CAAC;SACJ,CAAC;KAiCH;;;;IAbC,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,kBACE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,IAEzBD,oEAAa,CACR,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/nv-togglebutton/styles/nv-togglebutton.scss?tag=nv-togglebutton","src/components/nv-togglebutton/nv-togglebutton.tsx"],"sourcesContent":["@use \"./mixins\" as ;\n\nnv-togglebutton {\n @include root-styles();\n\n @each $size in $sizes {\n &[size=\"#{$size}\"] {\n @include button-size-styles($size);\n @include togglegroup-button-size-styles($size);\n }\n }\n\n &[emphasis=\"high\"] {\n @include button-emphasis-styles('low');\n &[active]:not([active=\"false\"]) {\n @include button-active-styles('low');\n }\n }\n &[emphasis=\"low\"] {\n @include button-emphasis-styles('lower');\n &[active]:not([active=\"false\"]), &:active {\n @include button-hover-styles('lower');\n }\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ToggleButtonEmphasis, ToggleButtonSize } from '../../utils/constants';\n\n/\n @slot default - Child content of the toggle button.\n /\n@Component({\n tag: 'nv-togglebutton',\n styleUrl: 'styles/nv-togglebutton.scss',\n shadow: false,\n})\nexport class NvTogglebutton {\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Determines how large or small the togglebutton appears, allowing for\n * customization of the togglebutton's dimensions to fit different design\n * specifications and user needs.\n /\n @Prop({ reflect: true })\n readonly size: `${ToggleButtonSize}` = 'md';\n\n /\n The value to associated with the button when selected in a\n * Togglebuttongroup.\n /\n @Prop({ reflect: true })\n readonly value: string;\n\n /\n Prevents all interaction, rendering the toggle in a non-interactive state.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Whether the button is active or not. Will not toggle automatically but\n * needs to be controlled externally.\n /\n @Prop({ reflect: true })\n readonly active: boolean = false;\n\n /\n Make it more or less visually prominent to users.\n /\n @Prop({ reflect: true })\n readonly emphasis: `${ToggleButtonEmphasis}` = 'high';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n private handleClick = () => {\n if (this.disabled) return;\n\n this.toggled.emit({\n value: this.value,\n active: this.active,\n });\n };\n\n //#endregion METHODS\n /************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the button is toggled.\n /\n @Event({ eventName: 'toggled' })\n toggled: EventEmitter<{\n /* The value associated with the button. /\n value: string;\n /* If the button is active when clicked. /\n active: boolean;\n }>;\n\n //#endregion EVENTS\n /***************************************************************************/\n //#region RENDER\n render() {\n return (\n <Host\n role=\"button\"\n tabindex=\"0\"\n aria-pressed={String(this.active)}\n onClick={this.handleClick}\n >\n <slot></slot>\n </Host>\n );\n }\n // #endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-togglebutton.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,+rJAA+rJ,CAAC;AAC1tJ,6BAAe,iBAAiB;;MCUnB,cAAc;IAL3B;;;;;;;;;;QAeW,SAAI,GAA0B,IAAI,CAAC;;;;QAanC,aAAQ,GAAY,KAAK,CAAC;;;;;QAO1B,WAAM,GAAY,KAAK,CAAC;;;;QAMxB,aAAQ,GAA8B,MAAM,CAAC;;;;QAM9C,gBAAW,GAAG;YACpB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;gBAChB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;aACpB,CAAC,CAAC;SACJ,CAAC;KAiCH;;;;IAbC,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,kBACE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,IAEzBD,oEAAa,CACR,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/nv-togglebutton/styles/nv-togglebutton.scss?tag=nv-togglebutton","src/components/nv-togglebutton/nv-togglebutton.tsx"],"sourcesContent":["@use \"./mixins\" as ;\n\nnv-togglebutton {\n @include root-styles();\n\n @each $size in $sizes {\n &[size=\"#{$size}\"] {\n @include button-size-styles($size);\n @include togglegroup-button-size-styles($size);\n }\n }\n\n &[emphasis=\"high\"] {\n @include button-emphasis-styles('low');\n &[active]:not([active=\"false\"]) {\n @include button-active-styles('low');\n }\n }\n &[emphasis=\"low\"] {\n @include button-emphasis-styles('lower');\n &[active]:not([active=\"false\"]), &:active {\n @include button-hover-styles('lower');\n }\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ToggleButtonEmphasis, ToggleButtonSize } from '../../utils/constants';\n\n/\n @slot default - Child content of the toggle button.\n /\n@Component({\n tag: 'nv-togglebutton',\n styleUrl: 'styles/nv-togglebutton.scss',\n shadow: false,\n})\nexport class NvTogglebutton {\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Determines how large or small the togglebutton appears, allowing for\n * customization of the togglebutton's dimensions to fit different design\n * specifications and user needs.\n /\n @Prop({ reflect: true })\n readonly size: `${ToggleButtonSize}` = 'md';\n\n /\n The value to associated with the button when selected in a\n * Togglebuttongroup.\n /\n @Prop({ reflect: true })\n readonly value: string;\n\n /\n Prevents all interaction, rendering the toggle in a non-interactive state.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Whether the button is active or not. Will not toggle automatically but\n * needs to be controlled externally.\n /\n @Prop({ reflect: true })\n readonly active: boolean = false;\n\n /\n Make it more or less visually prominent to users.\n /\n @Prop({ reflect: true })\n readonly emphasis: `${ToggleButtonEmphasis}` = 'high';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n private handleClick = () => {\n if (this.disabled) return;\n\n this.toggled.emit({\n value: this.value,\n active: this.active,\n });\n };\n\n //#endregion METHODS\n /************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the button is toggled.\n /\n @Event({ eventName: 'toggled' })\n toggled: EventEmitter<{\n /* The value associated with the button. /\n value: string;\n /* If the button is active when clicked. /\n active: boolean;\n }>;\n\n //#endregion EVENTS\n /***************************************************************************/\n //#region RENDER\n render() {\n return (\n <Host\n role=\"button\"\n tabindex=\"0\"\n aria-pressed={String(this.active)}\n onClick={this.handleClick}\n >\n <slot></slot>\n </Host>\n );\n }\n // #endregion RENDER\n}\n"],"version":3}

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

@@ -20,9 +20,18 @@ const NvTooltip = class {
         /**
          * Controls how long (in milliseconds) the tooltip waits to show after you
          * hover over or focus on an element. If you move away before the delay is up,
-         * the tooltip won’t appear.
+         * the tooltip won't appear.
          */
         this.enterDelay = 0;
+        /**
+         * Sets the positioning strategy for the tooltip. Options include:
+         * - `absolute`: Positions the tooltip relative to the trigger element
+         *   (default).
+         * - `fixed`: Positions the tooltip relative to the viewport, useful when you
+         *   need the tooltip to break out of overflow hidden containers, it will not
+         *   scroll inside a scroll container due to the fixed positioning.
+         */
+        this.strategy = 'absolute';
     }
     //#endregion EVENTS
     /****************************************************************************/
@@ -37,7 +46,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'd4ee448b0dddf4229d3d845d86758a1e794c35e8' }, index.h("slot", { key: '5d24c99b18925e44a8dedd868922227339638e73' }), index.h("nv-popover", { key: '4ee6f08994042689a628c238905484b1aa9de555', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'e8ac1f3f739f3b12172884e298494dede993b888', slot: "content" }, this.message), index.h("slot", { key: '96c2e3f5d9b72f5311ebe89e8ebe18274b2bfb13', name: "content" }))));
+        return (index.h(index.Host, { key: '02f95c0f1f41fe11785859fc8f1bf585cbe35af5' }, index.h("slot", { key: '338049b6a5ce354b5ddcba1f183488e2f6b2116e' }), index.h("nv-popover", { key: 'f2e82343908d4e59a3ecf93f791c2756f29714ae', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'ee35eff1233d1d03accdff3260b6d71ef0815d47', slot: "content" }, this.message), index.h("slot", { key: '1a5cdc8a671ea9f3f84cb0414579b9a85a183630', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };

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

	@@ -1 +1 @@
1	- {"file":"nv-tooltip.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,4yBAA4yB,CAAC;AACl0B,wBAAe,YAAY;;MCmBd,SAAS;IALtB;;;;;;;;QAiCW,cAAS,GAAc,QAAQ,CAAC;;;;;;QAQhC,eAAU,GAAW,CAAC,CAAC;~~KAiDjC~~;;;;~~IAhCC~~,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,cAAc;YACtB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK;gBAC3D,OAAO,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;aAC5C,CAAC,CAAC;KACN;;;;IAMD,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,oEAAa,EAEbA,yEACE,WAAW,EAAC,OAAO,EACnB,QAAQ,QACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,IAAI,CAAC,UAAU,IAE3BA,gEAAG,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK,EACpCA,mEAAM,IAAI,EAAC,SAAS,GAAQ,CACjB,CACR,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/nv-tooltip/nv-tooltip.scss?tag=nv-tooltip","src/components/nv-tooltip/nv-tooltip.tsx"],"sourcesContent":["@mixin root-styles() {\n display: inline-block;\n position: relative;\n user-select: none;\n &:has([fluid]:not([fluid='false'])) {\n display: block;\n }\n}\n\n@mixin tooltip-styles() {\n background: var(--components-tooltip-background);\n color: var(--components-tooltip-text);\n font-weight: var(--font-weight-medium-emphasis);\n padding: var(--tooltip-padding-y) var(--tooltip-padding-x);\n font-size: var(--tooltip-font-size);\n border-radius: var(--tooltip-radius);\n border: none;\n box-shadow:\n 0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1)\n var(--shadow-spread-lg-1) var(--shadow-color-opacity-1),\n 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2)\n var(--shadow-spread-lg-2) var(--shadow-color-opacity-2);\n}\n\n@mixin arrow-styles() {\n background: var(--components-tooltip-background);\n box-shadow: none;\n border: none;\n}\n\nnv-tooltip {\n @include root-styles();\n\n nv-popover > [data-scope='popover'] {\n @include tooltip-styles();\n\n [data-scope='arrow'] {\n @include arrow-styles();\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\n\n/*\n @slot default - Content to be placed as the trigger.\n * @slot content - Content to be placed within the popover. Use for custom html, will render under the message.\n /\n@Component({\n tag: 'nv-tooltip',\n styleUrl: 'nv-tooltip.scss',\n shadow: false,\n})\nexport class NvTooltip {\n @Element() el: HTMLNvTooltipElement;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * @internal\n * Accepts a reference to the DOM element acting as the popover trigger. This\n * should be used when the slot for the trigger is not defined.\n /\n @Prop({ reflect: false, mutable: true })\n triggerElement: Element;\n\n /\n A string representing the text to be displayed inside the tooltip. This\n * content is shown when the tooltip is activated by the user, such as on\n * hover or focus events.\n /\n @Prop({ reflect: true })\n readonly message: string;\n\n /\n Decides where the tooltip shows up next to the element it’s linked to\n * (above, below, to the sides). If there isn’t enough room, it will adjust\n * it's position on the axis to fit on the screen, so users can always see it.\n /\n @Prop({ reflect: true })\n readonly placement: Placement = 'bottom';\n\n /\n Controls how long (in milliseconds) the tooltip waits to show after you\n * hover over or focus on an element. If you move away before the delay is up,\n * the tooltip won’t appear.\n /\n @Prop({ reflect: true })\n readonly enterDelay: number = 0;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the tooltip is opened or closed. Bubbles up from the popover\n * element.\n /\n @Event()\n openChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (!this.triggerElement)\n this.triggerElement = Array.from(this.el.children).find(child => {\n return child.getAttribute('slot') === null;\n });\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n <slot></slot>\n\n <nv-popover\n triggerMode=\"hover\"\n hasArrow\n placement={this.placement}\n triggerElement={this.triggerElement}\n groupName={'tooltip'}\n enterDelay={this.enterDelay}\n >\n <p slot=\"content\">{this.message}</p>\n <slot name=\"content\"></slot>\n </nv-popover>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-tooltip.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,4yBAA4yB,CAAC;AACl0B,wBAAe,YAAY;;MCmBd,SAAS;IALtB;;;;;;;;QAiCW,cAAS,GAAc,QAAQ,CAAC;;;;;;QAQhC,eAAU,GAAW,CAAC,CAAC;;;;;;;;;QAWvB,aAAQ,GAAa,UAAU,CAAC;KAkD1C;;;;IAjCC,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,cAAc;YACtB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK;gBAC3D,OAAO,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;aAC5C,CAAC,CAAC;KACN;;;;IAMD,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,oEAAa,EAEbA,yEACE,WAAW,EAAC,OAAO,EACnB,QAAQ,QACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,IAAI,CAAC,UAAU,IAE3BA,gEAAG,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK,EACpCA,mEAAM,IAAI,EAAC,SAAS,GAAQ,CACjB,CACR,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/nv-tooltip/nv-tooltip.scss?tag=nv-tooltip","src/components/nv-tooltip/nv-tooltip.tsx"],"sourcesContent":["@mixin root-styles() {\n display: inline-block;\n position: relative;\n user-select: none;\n &:has([fluid]:not([fluid='false'])) {\n display: block;\n }\n}\n\n@mixin tooltip-styles() {\n background: var(--components-tooltip-background);\n color: var(--components-tooltip-text);\n font-weight: var(--font-weight-medium-emphasis);\n padding: var(--tooltip-padding-y) var(--tooltip-padding-x);\n font-size: var(--tooltip-font-size);\n border-radius: var(--tooltip-radius);\n border: none;\n box-shadow:\n 0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1)\n var(--shadow-spread-lg-1) var(--shadow-color-opacity-1),\n 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2)\n var(--shadow-spread-lg-2) var(--shadow-color-opacity-2);\n}\n\n@mixin arrow-styles() {\n background: var(--components-tooltip-background);\n box-shadow: none;\n border: none;\n}\n\nnv-tooltip {\n @include root-styles();\n\n nv-popover > [data-scope='popover'] {\n @include tooltip-styles();\n\n [data-scope='arrow'] {\n @include arrow-styles();\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport type { Placement, Strategy } from '@floating-ui/dom';\n\n/*\n @slot default - Content to be placed as the trigger.\n * @slot content - Content to be placed within the popover. Use for custom html, will render under the message.\n /\n@Component({\n tag: 'nv-tooltip',\n styleUrl: 'nv-tooltip.scss',\n shadow: false,\n})\nexport class NvTooltip {\n @Element() el: HTMLNvTooltipElement;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * @internal\n * Accepts a reference to the DOM element acting as the popover trigger. This\n * should be used when the slot for the trigger is not defined.\n /\n @Prop({ reflect: false, mutable: true })\n triggerElement: Element;\n\n /\n A string representing the text to be displayed inside the tooltip. This\n * content is shown when the tooltip is activated by the user, such as on\n * hover or focus events.\n /\n @Prop({ reflect: true })\n readonly message: string;\n\n /\n Decides where the tooltip shows up next to the element it’s linked to\n * (above, below, to the sides). If there isn’t enough room, it will adjust\n * it's position on the axis to fit on the screen, so users can always see it.\n /\n @Prop({ reflect: true })\n readonly placement: Placement = 'bottom';\n\n /\n Controls how long (in milliseconds) the tooltip waits to show after you\n * hover over or focus on an element. If you move away before the delay is up,\n * the tooltip won't appear.\n /\n @Prop({ reflect: true })\n readonly enterDelay: number = 0;\n\n /\n Sets the positioning strategy for the tooltip. Options include:\n * - `absolute`: Positions the tooltip relative to the trigger element\n * (default).\n * - `fixed`: Positions the tooltip relative to the viewport, useful when you\n * need the tooltip to break out of overflow hidden containers, it will not\n * scroll inside a scroll container due to the fixed positioning.\n /\n @Prop({ reflect: true })\n readonly strategy: Strategy = 'absolute';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the tooltip is opened or closed. Bubbles up from the popover\n * element.\n /\n @Event()\n openChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n if (!this.triggerElement)\n this.triggerElement = Array.from(this.el.children).find(child => {\n return child.getAttribute('slot') === null;\n });\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n <slot></slot>\n\n <nv-popover\n triggerMode=\"hover\"\n hasArrow\n placement={this.placement}\n strategy={this.strategy}\n triggerElement={this.triggerElement}\n groupName={'tooltip'}\n enterDelay={this.enterDelay}\n >\n <p slot=\"content\">{this.message}</p>\n <slot name=\"content\"></slot>\n </nv-popover>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

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

@@ -25,7 +25,6 @@ nv-alert.feedback-information > .close:focus, nv-alert.feedback-information > .c
 nv-alert.feedback-information > .close:focus-visible, nv-alert.feedback-information > .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);
   outline-offset: calc(var(--focus-outline-offset) * 1);
-  z-index: 111;
 }
 nv-alert.feedback-warning {
   background-color: var(--components-alert-warning-background);
@@ -37,7 +36,6 @@ nv-alert.feedback-warning > .close:focus, nv-alert.feedback-warning > .close:foc
 nv-alert.feedback-warning > .close:focus-visible, nv-alert.feedback-warning > .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);
   outline-offset: calc(var(--focus-outline-offset) * 1);
-  z-index: 111;
 }
 nv-alert.feedback-error {
   background-color: var(--components-alert-error-background);
@@ -49,7 +47,6 @@ nv-alert.feedback-error > .close:focus, nv-alert.feedback-error > .close:focus-w
 nv-alert.feedback-error > .close:focus-visible, nv-alert.feedback-error > .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);
   outline-offset: calc(var(--focus-outline-offset) * 1);
-  z-index: 111;
 }
 nv-alert.feedback-success {
   background-color: var(--components-alert-success-background);
@@ -61,7 +58,6 @@ nv-alert.feedback-success > .close:focus, nv-alert.feedback-success > .close:foc
 nv-alert.feedback-success > .close:focus-visible, nv-alert.feedback-success > .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);
   outline-offset: calc(var(--focus-outline-offset) * 1);
-  z-index: 111;
 }
 nv-alert.feedback-neutral {
   background-color: var(--components-alert-neutral-background);
@@ -73,7 +69,6 @@ nv-alert.feedback-neutral > .close:focus, nv-alert.feedback-neutral > .close:foc
 nv-alert.feedback-neutral > .close:focus-visible, nv-alert.feedback-neutral > .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);
   outline-offset: calc(var(--focus-outline-offset) * 1);
-  z-index: 111;
 }
 nv-alert > nv-icon.icon-information {
   color: var(--components-alert-information-icon);

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

@@ -70,7 +70,6 @@ nv-badge.badge-1 .close:focus, nv-badge.badge-1 .close:focus-within {
 nv-badge.badge-1 .close:focus-visible, nv-badge.badge-1 .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-1-content);
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
-  z-index: 111;
 }
 nv-badge.badge-1 nv-icon {
   color: var(--color-rainbow-1-icon);
@@ -86,7 +85,6 @@ nv-badge.badge-2 .close:focus, nv-badge.badge-2 .close:focus-within {
 nv-badge.badge-2 .close:focus-visible, nv-badge.badge-2 .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-2-content);
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
-  z-index: 111;
 }
 nv-badge.badge-2 nv-icon {
   color: var(--color-rainbow-2-icon);
@@ -102,7 +100,6 @@ nv-badge.badge-3 .close:focus, nv-badge.badge-3 .close:focus-within {
 nv-badge.badge-3 .close:focus-visible, nv-badge.badge-3 .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-3-content);
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
-  z-index: 111;
 }
 nv-badge.badge-3 nv-icon {
   color: var(--color-rainbow-3-icon);
@@ -118,7 +115,6 @@ nv-badge.badge-4 .close:focus, nv-badge.badge-4 .close:focus-within {
 nv-badge.badge-4 .close:focus-visible, nv-badge.badge-4 .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-4-content);
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
-  z-index: 111;
 }
 nv-badge.badge-4 nv-icon {
   color: var(--color-rainbow-4-icon);
@@ -134,7 +130,6 @@ nv-badge.badge-5 .close:focus, nv-badge.badge-5 .close:focus-within {
 nv-badge.badge-5 .close:focus-visible, nv-badge.badge-5 .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-5-content);
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
-  z-index: 111;
 }
 nv-badge.badge-5 nv-icon {
   color: var(--color-rainbow-5-icon);
@@ -150,7 +145,6 @@ nv-badge.badge-6 .close:focus, nv-badge.badge-6 .close:focus-within {
 nv-badge.badge-6 .close:focus-visible, nv-badge.badge-6 .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-6-content);
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
-  z-index: 111;
 }
 nv-badge.badge-6 nv-icon {
   color: var(--color-rainbow-6-icon);
@@ -166,7 +160,6 @@ nv-badge.badge-7 .close:focus, nv-badge.badge-7 .close:focus-within {
 nv-badge.badge-7 .close:focus-visible, nv-badge.badge-7 .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-7-content);
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
-  z-index: 111;
 }
 nv-badge.badge-7 nv-icon {
   color: var(--color-rainbow-7-icon);
@@ -182,7 +175,6 @@ nv-badge.badge-8 .close:focus, nv-badge.badge-8 .close:focus-within {
 nv-badge.badge-8 .close:focus-visible, nv-badge.badge-8 .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-8-content);
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
-  z-index: 111;
 }
 nv-badge.badge-8 nv-icon {
   color: var(--color-rainbow-8-icon);
@@ -198,7 +190,6 @@ nv-badge.badge-9 .close:focus, nv-badge.badge-9 .close:focus-within {
 nv-badge.badge-9 .close:focus-visible, nv-badge.badge-9 .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-9-content);
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
-  z-index: 111;
 }
 nv-badge.badge-9 nv-icon {
   color: var(--color-rainbow-9-icon);
@@ -214,7 +205,6 @@ nv-badge.badge-10 .close:focus, nv-badge.badge-10 .close:focus-within {
 nv-badge.badge-10 .close:focus-visible, nv-badge.badge-10 .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-10-content);
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
-  z-index: 111;
 }
 nv-badge.badge-10 nv-icon {
   color: var(--color-rainbow-10-icon);
@@ -230,7 +220,6 @@ nv-badge.badge-error .close:focus, nv-badge.badge-error .close:focus-within {
 nv-badge.badge-error .close:focus-visible, nv-badge.badge-error .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-error-low-content, var(--color-feedback-error-low-text));
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
-  z-index: 111;
 }
 nv-badge.badge-error nv-icon {
   color: var(--color-feedback-error-low-icon);
@@ -246,7 +235,6 @@ nv-badge.badge-information .close:focus, nv-badge.badge-information .close:focus
 nv-badge.badge-information .close:focus-visible, nv-badge.badge-information .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-information-low-content, var(--color-feedback-information-low-text));
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
-  z-index: 111;
 }
 nv-badge.badge-information nv-icon {
   color: var(--color-feedback-information-low-icon);
@@ -262,7 +250,6 @@ nv-badge.badge-neutral .close:focus, nv-badge.badge-neutral .close:focus-within
 nv-badge.badge-neutral .close:focus-visible, nv-badge.badge-neutral .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-neutral-low-content, var(--color-feedback-neutral-low-text));
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
-  z-index: 111;
 }
 nv-badge.badge-neutral nv-icon {
   color: var(--color-feedback-neutral-low-icon);
@@ -278,7 +265,6 @@ nv-badge.badge-success .close:focus, nv-badge.badge-success .close:focus-within
 nv-badge.badge-success .close:focus-visible, nv-badge.badge-success .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-success-low-content, var(--color-feedback-success-low-text));
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
-  z-index: 111;
 }
 nv-badge.badge-success nv-icon {
   color: var(--color-feedback-success-low-icon);
@@ -294,7 +280,6 @@ nv-badge.badge-warning .close:focus, nv-badge.badge-warning .close:focus-within
 nv-badge.badge-warning .close:focus-visible, nv-badge.badge-warning .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-warning-low-content, var(--color-feedback-warning-low-text));
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
-  z-index: 111;
 }
 nv-badge.badge-warning nv-icon {
   color: var(--color-feedback-warning-low-icon);
@@ -310,7 +295,6 @@ nv-badge.badge-amber .close:focus, nv-badge.badge-amber .close:focus-within {
 nv-badge.badge-amber .close:focus-visible, nv-badge.badge-amber .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-amber-content, var(--color-rainbow-1-text));
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
-  z-index: 111;
 }
 nv-badge.badge-amber nv-icon {
   color: var(--color-rainbow-1-icon);
@@ -326,7 +310,6 @@ nv-badge.badge-orange .close:focus, nv-badge.badge-orange .close:focus-within {
 nv-badge.badge-orange .close:focus-visible, nv-badge.badge-orange .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-orange-content, var(--color-rainbow-2-text));
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
-  z-index: 111;
 }
 nv-badge.badge-orange nv-icon {
   color: var(--color-rainbow-2-icon);
@@ -342,7 +325,6 @@ nv-badge.badge-turquoise .close:focus, nv-badge.badge-turquoise .close:focus-wit
 nv-badge.badge-turquoise .close:focus-visible, nv-badge.badge-turquoise .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-turquoise-content, var(--color-rainbow-5-text));
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
-  z-index: 111;
 }
 nv-badge.badge-turquoise nv-icon {
   color: var(--color-rainbow-5-icon);
@@ -358,7 +340,6 @@ nv-badge.badge-crimson .close:focus, nv-badge.badge-crimson .close:focus-within
 nv-badge.badge-crimson .close:focus-visible, nv-badge.badge-crimson .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-crimson-content, var(--color-rainbow-6-text));
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
-  z-index: 111;
 }
 nv-badge.badge-crimson nv-icon {
   color: var(--color-rainbow-6-icon);
@@ -374,7 +355,6 @@ nv-badge.badge-lime .close:focus, nv-badge.badge-lime .close:focus-within {
 nv-badge.badge-lime .close:focus-visible, nv-badge.badge-lime .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-lime-content, var(--color-rainbow-9-text));
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
-  z-index: 111;
 }
 nv-badge.badge-lime nv-icon {
   color: var(--color-rainbow-9-icon);
@@ -390,7 +370,6 @@ nv-badge.badge-petrol .close:focus, nv-badge.badge-petrol .close:focus-within {
 nv-badge.badge-petrol .close:focus-visible, nv-badge.badge-petrol .close:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-petrol-content, var(--color-rainbow-8-text));
   outline-offset: calc(var(--focus-outline-offset) * 0.2);
-  z-index: 111;
 }
 nv-badge.badge-petrol nv-icon {
   color: var(--color-rainbow-8-icon);

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

@@ -45,7 +45,6 @@ nv-breadcrumb ul button:focus-visible,
 nv-breadcrumb ul button:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);
   outline-offset: calc(var(--focus-outline-offset) * 0.3);
-  z-index: 111;
 }
 nv-breadcrumb ul a:hover,
 nv-breadcrumb ul button:hover {
@@ -68,7 +67,6 @@ nv-breadcrumb > a:focus, nv-breadcrumb > a:focus-within, nv-breadcrumb > button:
 nv-breadcrumb > a:focus-visible, nv-breadcrumb > a:has(:focus-visible), nv-breadcrumb > button:focus-visible, nv-breadcrumb > button:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);
   outline-offset: calc(var(--focus-outline-offset) * 0.3);
-  z-index: 111;
 }
 nv-breadcrumb > a:hover, nv-breadcrumb > button:hover {
   text-decoration: underline;

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

@@ -81,7 +81,6 @@ nv-button[emphasis=high]:focus, nv-button[emphasis=high]:focus-within {
 nv-button[emphasis=high]:focus-visible, nv-button[emphasis=high]:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
   outline-offset: calc(var(--focus-outline-offset) * 1);
-  z-index: 111;
 }
 nv-button[emphasis=high]:disabled:not([disabled=false]) {
   opacity: 0.5;
@@ -109,7 +108,6 @@ nv-button[emphasis=high][danger]:not([danger=false]):focus, nv-button[emphasis=h
 nv-button[emphasis=high][danger]:not([danger=false]):focus-visible, nv-button[emphasis=high][danger]:not([danger=false]):has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);
   outline-offset: calc(var(--focus-outline-offset) * 1);
-  z-index: 111;
 }
 nv-button[emphasis=medium] {
   background: var(--components-button-medium-background);
@@ -132,7 +130,6 @@ nv-button[emphasis=medium]:focus, nv-button[emphasis=medium]:focus-within {
 nv-button[emphasis=medium]:focus-visible, nv-button[emphasis=medium]:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
   outline-offset: calc(var(--focus-outline-offset) * 1);
-  z-index: 111;
 }
 nv-button[emphasis=medium]:disabled:not([disabled=false]) {
   opacity: 0.5;
@@ -160,7 +157,6 @@ nv-button[emphasis=medium][danger]:not([danger=false]):focus, nv-button[emphasis
 nv-button[emphasis=medium][danger]:not([danger=false]):focus-visible, nv-button[emphasis=medium][danger]:not([danger=false]):has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);
   outline-offset: calc(var(--focus-outline-offset) * 1);
-  z-index: 111;
 }
 nv-button[emphasis=low] {
   background: var(--components-button-low-background);
@@ -183,7 +179,6 @@ nv-button[emphasis=low]:focus, nv-button[emphasis=low]:focus-within {
 nv-button[emphasis=low]:focus-visible, nv-button[emphasis=low]:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
   outline-offset: calc(var(--focus-outline-offset) * 1);
-  z-index: 111;
 }
 nv-button[emphasis=low]:disabled:not([disabled=false]) {
   opacity: 0.5;
@@ -211,7 +206,6 @@ nv-button[emphasis=low][danger]:not([danger=false]):focus, nv-button[emphasis=lo
 nv-button[emphasis=low][danger]:not([danger=false]):focus-visible, nv-button[emphasis=low][danger]:not([danger=false]):has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);
   outline-offset: calc(var(--focus-outline-offset) * 1);
-  z-index: 111;
 }
 nv-button[emphasis=lower] {
   background: var(--components-button-lower-background);
@@ -234,7 +228,6 @@ nv-button[emphasis=lower]:focus, nv-button[emphasis=lower]:focus-within {
 nv-button[emphasis=lower]:focus-visible, nv-button[emphasis=lower]:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
   outline-offset: calc(var(--focus-outline-offset) * 1);
-  z-index: 111;
 }
 nv-button[emphasis=lower]:disabled:not([disabled=false]) {
   opacity: 0.5;
@@ -262,7 +255,6 @@ nv-button[emphasis=lower][danger]:not([danger=false]):focus, nv-button[emphasis=
 nv-button[emphasis=lower][danger]:not([danger=false]):focus-visible, nv-button[emphasis=lower][danger]:not([danger=false]):has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);
   outline-offset: calc(var(--focus-outline-offset) * 1);
-  z-index: 111;
 }
 nv-button[fluid]:not([fluid=false]) {
   width: 100%;

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

@@ -100,7 +100,6 @@ nv-datagrid .checkbox-container input[type=checkbox]:focus, nv-datagrid .checkbo
 nv-datagrid .checkbox-container input[type=checkbox]:focus-visible, nv-datagrid .checkbox-container input[type=checkbox]:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--nv-datagrid-outline-color);
   outline-offset: calc(var(--focus-outline-offset) * 1);
-  z-index: 111;
 }
 nv-datagrid .checkbox-container input[type=checkbox]:checked, nv-datagrid .checkbox-container input[type=checkbox]:indeterminate {
   background: var(--nv-datagrid-background-checked);

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

@@ -85,7 +85,6 @@ nv-fieldcheckbox > .input-container input[type=checkbox]:focus, nv-fieldcheckbox
 nv-fieldcheckbox > .input-container input[type=checkbox]:focus-visible, nv-fieldcheckbox > .input-container input[type=checkbox]:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--nv-fieldcheckbox-outline-color);
   outline-offset: calc(var(--focus-outline-offset) * 1);
-  z-index: 111;
 }
 nv-fieldcheckbox > .input-container input[type=checkbox]:checked, nv-fieldcheckbox > .input-container input[type=checkbox]:indeterminate {
   background: var(--nv-fieldcheckbox-background-checked);

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

@@ -196,6 +196,10 @@ nv-fielddate .input-wrapper .input-container > nv-iconbutton:focus-visible {
   border-radius: var(--button-md-border-radius);
   outline-offset: -3px;
 }
+nv-fielddate .input-wrapper .input-container > nv-iconbutton:last-of-type {
+  border-top-right-radius: var(--form-field-radius);
+  border-bottom-right-radius: var(--form-field-radius);
+}
 nv-fielddate .input-wrapper .input-container nv-icon.validation {
   color: var(--nv-field-border-default);
 }

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

@@ -104,6 +104,7 @@ nv-fielddaterange nv-popover [data-scope=popover] {
   background-color: var(--components-list-dropdown-background);
   border: 1px solid var(--components-list-dropdown-border);
   width: auto;
+  z-index: 2;
 }
 nv-fielddaterange nv-popover [slot=content] {
   display: block;
@@ -203,6 +204,10 @@ nv-fielddaterange .input-wrapper .input-container > nv-iconbutton:focus-visible
   border-radius: var(--button-md-border-radius);
   outline-offset: -3px;
 }
+nv-fielddaterange .input-wrapper .input-container > nv-iconbutton:last-of-type {
+  border-top-right-radius: var(--form-field-radius);
+  border-bottom-right-radius: var(--form-field-radius);
+}
 nv-fielddaterange .input-wrapper .input-container nv-icon.validation {
   color: var(--nv-field-border-default);
 }
@@ -234,6 +239,7 @@ nv-fielddaterange .range-inputs {
   align-items: center;
   gap: 0;
   width: 100%;
+  z-index: 1;
 }
 nv-fielddaterange .range-inputs input {
   flex: 1;

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

@@ -227,6 +227,10 @@ nv-fielddropdown .input-container > nv-iconbutton:focus-visible {
   border-radius: var(--button-md-border-radius);
   outline-offset: -3px;
 }
+nv-fielddropdown .input-container > nv-iconbutton:last-of-type {
+  border-top-right-radius: var(--form-field-radius);
+  border-bottom-right-radius: var(--form-field-radius);
+}
 nv-fielddropdown .input-container nv-icon.validation {
   color: var(--nv-field-border-default);
 }

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

@@ -264,6 +264,10 @@ nv-fieldmultiselect .input-container-multiselect > nv-iconbutton:focus-visible {
   border-radius: var(--button-md-border-radius);
   outline-offset: -3px;
 }
+nv-fieldmultiselect .input-container-multiselect > nv-iconbutton:last-of-type {
+  border-top-right-radius: var(--form-field-radius);
+  border-bottom-right-radius: var(--form-field-radius);
+}
 nv-fieldmultiselect .input-container-multiselect nv-icon.validation {
   color: var(--nv-field-border-default);
 }

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

@@ -188,6 +188,10 @@ nv-fieldnumber .input-wrapper .input-container > nv-iconbutton:focus-visible {
   border-radius: var(--button-md-border-radius);
   outline-offset: -3px;
 }
+nv-fieldnumber .input-wrapper .input-container > nv-iconbutton:last-of-type {
+  border-top-right-radius: var(--form-field-radius);
+  border-bottom-right-radius: var(--form-field-radius);
+}
 nv-fieldnumber .input-wrapper .input-container .stepper {
   display: flex;
   border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);
@@ -201,6 +205,10 @@ nv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton:focus-vi
   border-radius: var(--button-md-border-radius);
   outline-offset: -3px;
 }
+nv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton:last-of-type {
+  border-top-right-radius: var(--form-field-radius);
+  border-bottom-right-radius: var(--form-field-radius);
+}
 @container field-number-input-container (width < 150px) {
   nv-fieldnumber .input-wrapper .input-container .stepper-spacer {
     display: none;

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

@@ -175,6 +175,10 @@ nv-fieldpassword .input-wrapper .input-container > nv-iconbutton:focus-visible {
   border-radius: var(--button-md-border-radius);
   outline-offset: -3px;
 }
+nv-fieldpassword .input-wrapper .input-container > nv-iconbutton:last-of-type {
+  border-top-right-radius: var(--form-field-radius);
+  border-bottom-right-radius: var(--form-field-radius);
+}
 nv-fieldpassword .input-wrapper .input-container nv-icon.validation {
   color: var(--nv-field-border-default);
 }

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

@@ -70,7 +70,6 @@ nv-fieldradio input[type=radio]:focus, nv-fieldradio input[type=radio]:focus-wit
 nv-fieldradio input[type=radio]:focus-visible, nv-fieldradio input[type=radio]:has(:focus-visible) {
   outline: calc(var(--focus-outline-stroke) * 1) solid var(--nv-fieldradio-outline-color);
   outline-offset: calc(var(--focus-outline-offset) * 1);
-  z-index: 111;
 }
 nv-fieldradio input[type=radio]:checked {
   background: var(--nv-fieldradio-background-checked);

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

@@ -98,6 +98,8 @@ nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper > .select-contain
 nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper > .select-container > select {
   height: 100%;
   box-sizing: border-box;
+  background-color: var(--color-level-05-background);
+  border-radius: var(--form-field-radius);
 }
 nv-fieldselect label {
   display: flex;
@@ -158,6 +160,10 @@ nv-fieldselect .select-wrapper .select-container > .select-icons > nv-iconbutton
   border-radius: var(--button-md-border-radius);
   outline-offset: -3px;
 }
+nv-fieldselect .select-wrapper .select-container > .select-icons > nv-iconbutton:last-of-type {
+  border-top-right-radius: var(--form-field-radius);
+  border-bottom-right-radius: var(--form-field-radius);
+}
 nv-fieldselect .select-wrapper .select-container input {
   display: flex;
   align-items: center;