npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.23.0 → 3.24.0 - Mend

@nova-design-system/nova-webcomponents 3.23.0 → 3.24.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 (792) hide show

package/dist/components/p-BISctfud.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-BISctfud.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","uuidv4"],"sources":["src/components/nv-fieldcheckbox/nv-fieldcheckbox.scss?tag=nv-fieldcheckbox","src/components/nv-fieldcheckbox/nv-fieldcheckbox.tsx"],"sourcesContent":["@use \"../../styles/utils\" as utils;\n@use '../../styles/focus-ring' as focus;\n@use '../../styles/form-field' as forms;\n\n@mixin fieldcheckbox-variables() {\n --nv-fieldcheckbox-border-default: var(\n --components-form-field-border-default\n );\n --nv-fieldcheckbox-border-hover: var(--components-form-field-border-hover);\n --nv-fieldcheckbox-border-focus: var(--components-form-field-border-default);\n --nv-fieldcheckbox-background-default: var(\n --components-form-field-background-default\n );\n --nv-fieldcheckbox-background-checked: var(\n --components-form-field-background-checked\n );\n --nv-fieldcheckbox-background-disabled: var(\n --components-form-field-background-disabled\n );\n --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-brand);\n --nv-fieldcheckbox-color-checked: var(\n --components-form-shape-foreground-default\n );\n --nv-fieldcheckbox-color-disabled: var(\n --components-form-shape-foreground-disabled\n );\n --nv-fieldcheckbox-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldcheckbox-error-variables() {\n --nv-fieldcheckbox-border-default: var(--components-form-field-border-error);\n --nv-fieldcheckbox-border-hover: var(--nv-fieldcheckbox-border-default);\n --nv-fieldcheckbox-border-focus: var(--components-form-field-border-error);\n --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-destructive);\n --nv-fieldcheckbox-color-disabled: var(\n --components-form-shape-foreground-disabled-error\n );\n --nv-fieldcheckbox-background-checked: var(\n --components-form-field-background-error\n );\n --nv-fieldcheckbox-outline-color: var(--color-focus-destructive);\n}\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 text-align: left;\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(--form-label-font-weight);\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: var(--form-description-font-weight);\n line-height: var(--form-description-line-height);\n}\n\n@mixin error-description-styles() {\n @include description-styles();\n\n color: var(--components-form-text-description-error);\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(--nv-fieldcheckbox-color-checked);\n\n input[type='checkbox'][readonly] {\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: 0.5;\n }\n\n &:has(input[type='checkbox']:disabled:not([readonly])) {\n color: var(--nv-fieldcheckbox-color-disabled);\n }\n}\n\n@mixin input-styles() {\n appearance: none;\n position: relative;\n display: flex;\n width: var(--form-checkbox-size);\n height: var(--form-checkbox-size);\n flex-direction: column;\n align-items: flex-start;\n border-radius: var(--form-checkbox-radius);\n border-width: var(--form-checkbox-border-width);\n border-style: solid;\n border-color: var(--nv-fieldcheckbox-border-default);\n background: var(--nv-fieldcheckbox-background-default);\n\n &:hover {\n border-color: var(--nv-fieldcheckbox-border-hover);\n }\n\n &:focus {\n border-color: var(--nv-fieldcheckbox-border-focus);\n }\n\n @include focus.focus-ring(var(--nv-fieldcheckbox-outline-color));\n\n &:checked,\n &:indeterminate {\n background: var(--nv-fieldcheckbox-background-checked);\n border-color: var(--nv-fieldcheckbox-background-checked);\n }\n\n &:disabled:not([readonly]) {\n background: var(--nv-fieldcheckbox-background-disabled);\n border-color: var(--nv-fieldcheckbox-border-default);\n }\n\n &[readonly] {\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: 0.5;\n }\n}\n\n@mixin icon-styles() {\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n\n svg {\n width: var(--form-checkbox-icon-size);\n height: var(--form-checkbox-icon-size);\n fill: none;\n stroke: currentcolor;\n stroke-width: var(--form-checkbox-icon-stroke);\n flex-shrink: 0;\n }\n}\n\nnv-fieldcheckbox {\n @include fieldcheckbox-variables();\n @include root-styles();\n\n &.error > .input-container {\n @include fieldcheckbox-error-variables();\n }\n\n &.label-placement-before {\n @include label-before-styles();\n }\n\n &[disabled]:not([disabled='false']) {\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: 0.5;\n }\n\n > .input-container {\n @include input-container-styles();\n\n input[type='checkbox'] {\n @include input-styles();\n }\n\n .icon {\n @include icon-styles();\n }\n }\n\n &[required]:not([required='false']) > .text-container label,\n &[aria-required=\"true\"] > .text-container label {\n @include forms.form-field-label-required();\n }\n\n > .text-container {\n @include text-container-styles();\n\n label {\n @include label-styles();\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n }\n\n .description {\n @include description-styles();\n }\n\n .error-description {\n @include error-description-styles();\n }\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 default - Next to the label and description.\n * @slot main - Replaces the label and description.\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 * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n * @slot checked-icon - Content to be placed as the checked icon, will override the checkedIcon prop.\n * @slot indeterminate-icon - Content to be placed as the indeterminate icon, will override the indeterminateIcon prop.\n */\n@Component({\n tag: 'nv-fieldcheckbox',\n styleUrl: 'nv-fieldcheckbox.scss',\n formAssociated: true,\n shadow: false,\n})\nexport class NvFieldcheckbox {\n @Element() el!: HTMLNvFieldcheckboxElement;\n\n /****************************************************************************/\n //#region DEPRECATED\n\n /**\n * Message define a 'hint ' message for the Field.\n * @deprecated Use `description` instead.\n * */\n @Prop({ reflect: true })\n readonly message?: string;\n\n /**\n * The text for the validation message.\n * @deprecated Use `errorDescription` and set the error prop instead.\n * */\n @Prop({ reflect: true })\n readonly validation?: string;\n\n /**\n * When true, the label will be placed before the checkbox.\n * @deprecated Use `labelPlacement = end` instead.\n * */\n @Prop({ reflect: true })\n readonly labelBefore?: boolean = false;\n\n //#endregion DEPRECATED\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 checkbox 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 checkbox input, representing the value sent on\n * form submission when the checkbox is checked. When the form is submitted,\n * the data will consist of a name=value pair.\n */\n @Prop({ reflect: true })\n readonly value?: string;\n\n /**\n * The label displayed next to the checkbox.\n */\n @Prop({ reflect: true })\n readonly label?: string;\n\n /**\n * Determines the position of the label relative to the checkbox, either\n * 'start' (before) or 'end' (after).\n */\n @Prop({ reflect: true, mutable: true })\n 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 * checkbox.\n */\n @Prop({ reflect: true, mutable: true })\n description?: string;\n\n /**\n * Signals that there is an error associated with the checkbox, which can\n * trigger visual cues.\n * @validator error\n */\n @Prop({ reflect: true, mutable: true })\n error: boolean = false;\n\n /**\n * A description that appears when there is an error related to the checkbox.\n * @validator message\n */\n @Prop({ reflect: true, mutable: true })\n errorDescription?: string;\n\n /**\n * Indicates whether the checkbox is checked or not.\n */\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /**\n * Indicates whether the checkbox is in an indeterminate state, typically used\n * for hierarchical checkboxes.\n */\n @Prop({ reflect: true, mutable: true })\n indeterminate: boolean = false;\n\n /**\n * Disables the checkbox, preventing user interaction.\n */\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /**\n * Sets the checkbox 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 /**\n * Marks the checkbox as required, indicating that it must be checked for\n * form submission.\n * @note This uses the native HTML `required` attribute, which triggers browser validation.\n */\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /**\n * Marks the checkbox as required for accessibility purposes without triggering\n * native HTML validation. Use this when implementing custom validation logic.\n * @note When set, this uses `aria-required` instead of the native `required` attribute.\n * This allows developers to implement custom validation while maintaining accessibility.\n * @note If this prop is not explicitly set, the component will check for the HTML attribute\n * 'aria-required' directly to determine if it should be applied.\n */\n @Prop({ reflect: true, attribute: 'aria-required' })\n readonly ariaRequiredAttr: boolean = false;\n\n /**\n * Applies focus to the input field as soon as the component is mounted. This\n * is equivalent to setting the native autofocus attribute on an <input>\n * element.\n */\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: 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({ bubbles: false })\n checkedChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region LISTENERS\n\n /**\n * Listens for the change event on the checkbox input element and updates the\n * checked state.\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 if (this.indeterminate) {\n this.indeterminate = false;\n }\n\n this.checked = target.checked;\n }\n }\n\n //#endregion LISTENERS\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 //#endregion WATCHERS\n /****************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.labelBefore) {\n this.labelPlacement = 'before';\n }\n\n if (this.validation) {\n this.errorDescription = this.validation;\n this.error = true;\n }\n }\n\n //#endregion LIFECYCLE\n /****************************************************************************/\n //#region RENDER\n\n render() {\n // Check aria-required from multiple sources:\n // 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set\n // 2. JavaScript prop (when prop is explicitly set via JavaScript)\n // We use hasAttribute to determine if the attribute was explicitly set by the user,\n // since the prop now defaults to false (to maintain Blazor compatibility)\n const hasAriaRequiredAttr =\n this.el.hasAttribute('aria-required') ||\n this.el.hasAttribute('aria-required-attr');\n\n const ariaRequiredFromAttr = hasAriaRequiredAttr\n ? this.el.getAttribute('aria-required') ||\n this.el.getAttribute('aria-required-attr')\n : null;\n\n // Use aria-required if the attribute was explicitly set\n // With reflect: true, setting the prop will also set the attribute\n const useAriaRequired = hasAriaRequiredAttr;\n\n // Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)\n // If attribute doesn't exist, the prop was never set and we don't use aria-required\n const ariaRequiredAttrValue = hasAriaRequiredAttr\n ? ariaRequiredFromAttr\n : null;\n\n // Determine which attributes to use\n // If aria-required HTML attribute is present, use it (convert string to boolean)\n // If required is set and aria-required is not \"false\", use native required\n // If aria-required is \"false\", don't use native required even if required is set\n const ariaRequiredValue = useAriaRequired\n ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''\n : undefined;\n\n const useNativeRequired =\n this.required && (!useAriaRequired || ariaRequiredValue === true);\n\n return (\n <Host\n class={clsx(\n this.labelPlacement === 'before' && 'label-placement-before',\n this.error && 'error',\n )}\n >\n <div class=\"input-container\">\n <input\n type=\"checkbox\"\n id={this.inputId}\n name={this.name}\n autofocus={this.autofocus}\n autocomplete=\"off\"\n value={this.value}\n checked={Boolean(this.checked)}\n disabled={this.disabled || this.readonly}\n readonly={this.readonly && !useNativeRequired}\n required={useNativeRequired ? this.required : undefined}\n {...(ariaRequiredValue !== undefined && {\n 'aria-required': String(ariaRequiredValue),\n })}\n indeterminate={this.indeterminate}\n ref={el => {\n if (el) {\n el.indeterminate = this.indeterminate;\n }\n }}\n />\n <span class=\"icon\">\n {this.checked && !this.indeterminate && (\n <slot name=\"checked-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n d=\"M11.6667 3.5L5.25004 9.91667L2.33337 7\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </slot>\n )}\n {this.indeterminate && (\n <slot name=\"indeterminate-icon\">\n <svg\n class=\"indeterminate-svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n d=\"M2.9165 7H11.0832\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </slot>\n )}\n </span>\n </div>\n\n <slot></slot>\n\n <div class=\"text-container\">\n <slot name=\"main\">\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 </slot>\n\n {(this.errorDescription ||\n this.el.querySelector('[slot=\"error-description\"]')) && (\n <div hidden={!this.error} class=\"error-description\">\n <slot name=\"error-description\">{this.errorDescription}</slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-CIyQBhTX.js → p-BVOv1zgq.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-C63Xpg9a.js';
-import { d as defineCustomElement$1 } from './p-B-3kAnun.js';
+import { d as defineCustomElement$1 } from './p-B9i3m6rk.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}";
@@ -45,7 +45,7 @@ const NvTooltip = /*@__PURE__*/ proxyCustomElement(class NvTooltip extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '380e3306103dcf66291757972a47ba1ffaf8068c' }, h("slot", { key: 'ca3481b10e2ed73751c892711f8482809a274037' }), h("nv-popover", { key: 'e89838624b171e3d1eadf764e4ab14e003225dc9', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay, onOpenChanged: e => this.openChanged.emit(e.detail) }, h("p", { key: 'c103df8cf9891fef763de2aa706dec5bb90f8346', slot: "content" }, this.message), h("slot", { key: '2e2dcc84b21ab1c46cf980a507f0b13e8350b4d6', name: "content" }))));
+        return (h(Host, { key: '3b0a7e6159b2e0a23af58ad0e8e3567f05373954' }, h("slot", { key: 'bfb982166e2f6f96c11cc745905a3c0ffd8f575e' }), h("nv-popover", { key: 'c14b0fa83f861ae828b14ab16cbd562dde6032ba', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay, onOpenChanged: e => this.openChanged.emit(e.detail) }, h("p", { key: '67701f81afc4c2e36f8ab7266aee3f2e457a4755', slot: "content" }, this.message), h("slot", { key: 'c57c2463744e2e2afc5bbd64c4838a733a77aca9', name: "content" }))));
     }
     get el() { return this; }
     static get style() { return nvTooltipCss; }
@@ -77,6 +77,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { NvTooltip as N, defineCustomElement as d };
-//# sourceMappingURL=p-CIyQBhTX.js.map
+//# sourceMappingURL=p-BVOv1zgq.js.map
-//# sourceMappingURL=p-CIyQBhTX.js.map
+//# sourceMappingURL=p-BVOv1zgq.js.map

package/dist/components/{p-CIyQBhTX.js.map → p-BVOv1zgq.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~CIyQBhTX~~.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,4yBAA4yB;;MCoBpzB,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AA2BE;;;;AAIG;AAEM,QAAA,IAAS,CAAA,SAAA,GAAc,QAAQ;AAExC;;;;AAIG;AAEM,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;AAE/B;;;;;;;AAOG;AAEM,QAAA,IAAQ,CAAA,QAAA,GAAa,UAAU;AAmDzC;;;;IAlCC,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,CAAC,cAAc;AACtB,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,IAAG;gBAC9D,OAAO,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI;AAC5C,aAAC,CAAC;;;;;IAON,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEb,CACE,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAW,EAAC,OAAO,EACnB,QAAQ,EACR,IAAA,EAAA,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,EAC3B,aAAa,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,EAAA,EAEnD,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK,EACpC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,GAAQ,CACjB,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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({ bubbles: false })\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 onOpenChanged={e => this.openChanged.emit(e.detail)}\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":"p-BVOv1zgq.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,4yBAA4yB;;MCoBpzB,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AA2BE;;;;AAIG;AAEM,QAAA,IAAS,CAAA,SAAA,GAAc,QAAQ;AAExC;;;;AAIG;AAEM,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;AAE/B;;;;;;;AAOG;AAEM,QAAA,IAAQ,CAAA,QAAA,GAAa,UAAU;AAmDzC;;;;IAlCC,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,CAAC,cAAc;AACtB,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,IAAG;gBAC9D,OAAO,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI;AAC5C,aAAC,CAAC;;;;;IAON,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEb,CACE,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAW,EAAC,OAAO,EACnB,QAAQ,EACR,IAAA,EAAA,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,EAC3B,aAAa,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,EAAA,EAEnD,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK,EACpC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,GAAQ,CACjB,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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({ bubbles: false })\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 onOpenChanged={e => this.openChanged.emit(e.detail)}\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/components/{p-B6EYOx_n.js → p-Bg_l3jn1.js} RENAMED Viewed

@@ -4,7 +4,7 @@ import { u as useCollapse } from './p-D1C_pu0E.js';
 import { u as useFade } from './p-9xYwU7ku.js';
 import './p-Dz1GUhVy.js';
 import { t as timeline } from './p-CgHCo_Ho.js';
-import { d as defineCustomElement$1 } from './p-CBOuqJTb.js';
+import { d as defineCustomElement$1 } from './p-nfYynlVq.js';
 const nvBadgeCss = "nv-badge{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;gap:var(--badge-gap-x);vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge.is-icon-only{padding:var(--badge-padding-y) var(--badge-padding-icon-only-x);gap:var(--badge-gap-icon-only-x)}nv-badge.with-gap{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;gap:var(--badge-gap-x);vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge.with-gap.is-icon-only{padding:var(--badge-padding-y) var(--badge-padding-icon-only-x);gap:var(--badge-gap-icon-only-x)}nv-badge.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-badge:not(.with-gap){padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;gap:var(--badge-gap-x);vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge:not(.with-gap).is-icon-only{padding:var(--badge-padding-y) var(--badge-padding-icon-only-x);gap:var(--badge-gap-icon-only-x)}nv-badge.badge-1{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background);border-color:var(--color-rainbow-1-border)}nv-badge.badge-1 .close:focus,nv-badge.badge-1 .close:focus-within{outline:none}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)}nv-badge.badge-1 nv-icon{color:var(--color-rainbow-1-icon)}nv-badge.badge-2{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background);border-color:var(--color-rainbow-2-border)}nv-badge.badge-2 .close:focus,nv-badge.badge-2 .close:focus-within{outline:none}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)}nv-badge.badge-2 nv-icon{color:var(--color-rainbow-2-icon)}nv-badge.badge-3{color:var(--color-rainbow-3-text);background-color:var(--color-rainbow-3-background);border-color:var(--color-rainbow-3-border)}nv-badge.badge-3 .close:focus,nv-badge.badge-3 .close:focus-within{outline:none}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)}nv-badge.badge-3 nv-icon{color:var(--color-rainbow-3-icon)}nv-badge.badge-4{color:var(--color-rainbow-4-text);background-color:var(--color-rainbow-4-background);border-color:var(--color-rainbow-4-border)}nv-badge.badge-4 .close:focus,nv-badge.badge-4 .close:focus-within{outline:none}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)}nv-badge.badge-4 nv-icon{color:var(--color-rainbow-4-icon)}nv-badge.badge-5{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background);border-color:var(--color-rainbow-5-border)}nv-badge.badge-5 .close:focus,nv-badge.badge-5 .close:focus-within{outline:none}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)}nv-badge.badge-5 nv-icon{color:var(--color-rainbow-5-icon)}nv-badge.badge-6{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background);border-color:var(--color-rainbow-6-border)}nv-badge.badge-6 .close:focus,nv-badge.badge-6 .close:focus-within{outline:none}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)}nv-badge.badge-6 nv-icon{color:var(--color-rainbow-6-icon)}nv-badge.badge-7{color:var(--color-rainbow-7-text);background-color:var(--color-rainbow-7-background);border-color:var(--color-rainbow-7-border)}nv-badge.badge-7 .close:focus,nv-badge.badge-7 .close:focus-within{outline:none}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)}nv-badge.badge-7 nv-icon{color:var(--color-rainbow-7-icon)}nv-badge.badge-8{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background);border-color:var(--color-rainbow-8-border)}nv-badge.badge-8 .close:focus,nv-badge.badge-8 .close:focus-within{outline:none}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)}nv-badge.badge-8 nv-icon{color:var(--color-rainbow-8-icon)}nv-badge.badge-9{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background);border-color:var(--color-rainbow-9-border)}nv-badge.badge-9 .close:focus,nv-badge.badge-9 .close:focus-within{outline:none}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)}nv-badge.badge-9 nv-icon{color:var(--color-rainbow-9-icon)}nv-badge.badge-10{color:var(--color-rainbow-10-text);background-color:var(--color-rainbow-10-background);border-color:var(--color-rainbow-10-border)}nv-badge.badge-10 .close:focus,nv-badge.badge-10 .close:focus-within{outline:none}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)}nv-badge.badge-10 nv-icon{color:var(--color-rainbow-10-icon)}nv-badge.badge-error{color:var(--color-feedback-error-low-text);background-color:var(--color-feedback-error-low-background);border-color:var(--color-feedback-error-low-border)}nv-badge.badge-error .close:focus,nv-badge.badge-error .close:focus-within{outline:none}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)}nv-badge.badge-error nv-icon{color:var(--color-feedback-error-low-icon)}nv-badge.badge-information{color:var(--color-feedback-information-low-text);background-color:var(--color-feedback-information-low-background);border-color:var(--color-feedback-information-low-border)}nv-badge.badge-information .close:focus,nv-badge.badge-information .close:focus-within{outline:none}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)}nv-badge.badge-information nv-icon{color:var(--color-feedback-information-low-icon)}nv-badge.badge-neutral{color:var(--color-feedback-neutral-low-text);background-color:var(--color-feedback-neutral-low-background);border-color:var(--color-feedback-neutral-low-border)}nv-badge.badge-neutral .close:focus,nv-badge.badge-neutral .close:focus-within{outline:none}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)}nv-badge.badge-neutral nv-icon{color:var(--color-feedback-neutral-low-icon)}nv-badge.badge-success{color:var(--color-feedback-success-low-text);background-color:var(--color-feedback-success-low-background);border-color:var(--color-feedback-success-low-border)}nv-badge.badge-success .close:focus,nv-badge.badge-success .close:focus-within{outline:none}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)}nv-badge.badge-success nv-icon{color:var(--color-feedback-success-low-icon)}nv-badge.badge-warning{color:var(--color-feedback-warning-low-text);background-color:var(--color-feedback-warning-low-background);border-color:var(--color-feedback-warning-low-border)}nv-badge.badge-warning .close:focus,nv-badge.badge-warning .close:focus-within{outline:none}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)}nv-badge.badge-warning nv-icon{color:var(--color-feedback-warning-low-icon)}nv-badge.badge-amber{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background);border-color:var(--color-rainbow-1-border)}nv-badge.badge-amber .close:focus,nv-badge.badge-amber .close:focus-within{outline:none}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)}nv-badge.badge-amber nv-icon{color:var(--color-rainbow-1-icon)}nv-badge.badge-orange{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background);border-color:var(--color-rainbow-2-border)}nv-badge.badge-orange .close:focus,nv-badge.badge-orange .close:focus-within{outline:none}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)}nv-badge.badge-orange nv-icon{color:var(--color-rainbow-2-icon)}nv-badge.badge-turquoise{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background);border-color:var(--color-rainbow-5-border)}nv-badge.badge-turquoise .close:focus,nv-badge.badge-turquoise .close:focus-within{outline:none}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)}nv-badge.badge-turquoise nv-icon{color:var(--color-rainbow-5-icon)}nv-badge.badge-crimson{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background);border-color:var(--color-rainbow-6-border)}nv-badge.badge-crimson .close:focus,nv-badge.badge-crimson .close:focus-within{outline:none}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)}nv-badge.badge-crimson nv-icon{color:var(--color-rainbow-6-icon)}nv-badge.badge-lime{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background);border-color:var(--color-rainbow-9-border)}nv-badge.badge-lime .close:focus,nv-badge.badge-lime .close:focus-within{outline:none}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)}nv-badge.badge-lime nv-icon{color:var(--color-rainbow-9-icon)}nv-badge.badge-petrol{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background);border-color:var(--color-rainbow-8-border)}nv-badge.badge-petrol .close:focus,nv-badge.badge-petrol .close:focus-within{outline:none}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)}nv-badge.badge-petrol nv-icon{color:var(--color-rainbow-8-icon)}nv-badge span{font-size:var(--font-size-xs);line-height:var(--line-height-xs) !important;text-align:center}nv-badge nv-icon>svg.icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-sm{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-md{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-lg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-xl{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge .close{padding:0;line-height:0;border:none;background:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;aspect-ratio:1/1;border-radius:var(--radius-rounded-full)}";
@@ -186,6 +186,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { NvBadge as N, defineCustomElement as d };
-//# sourceMappingURL=p-B6EYOx_n.js.map
+//# sourceMappingURL=p-Bg_l3jn1.js.map
-//# sourceMappingURL=p-B6EYOx_n.js.map
+//# sourceMappingURL=p-Bg_l3jn1.js.map

package/dist/components/{p-B6EYOx_n.js.map → p-Bg_l3jn1.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-B6EYOx_n.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:string';\n@use '../nv-icon/styles/mixins' as icon;\n@use '../../styles/utils' as utils;\n@use \"../../styles/focus-ring\" as focus;\n\n/* Variants /\n$badge-colors: (\n '1',\n '2',\n '3',\n '4',\n '5',\n '6',\n '7',\n '8',\n '9',\n '10',\n 'error',\n 'information',\n 'neutral',\n 'success',\n 'warning',\n 'amber',\n 'orange',\n 'turquoise',\n 'crimson',\n 'lime',\n 'petrol',\n);\n\n/ Define maps for color-related variables /\n$color-rainbow-text: (\n '1': var(--color-rainbow-1-text),\n '2': var(--color-rainbow-2-text),\n '3': var(--color-rainbow-3-text),\n '4': var(--color-rainbow-4-text),\n '5': var(--color-rainbow-5-text),\n '6': var(--color-rainbow-6-text),\n '7': var(--color-rainbow-7-text),\n '8': var(--color-rainbow-8-text),\n '9': var(--color-rainbow-9-text),\n '10': var(--color-rainbow-10-text),\n 'error': var(--color-feedback-error-low-text),\n 'information': var(--color-feedback-information-low-text),\n 'neutral': var(--color-feedback-neutral-low-text),\n 'success': var(--color-feedback-success-low-text),\n 'warning': var(--color-feedback-warning-low-text),\n 'amber': var(--color-rainbow-1-text),\n 'orange': var(--color-rainbow-2-text),\n 'turquoise': var(--color-rainbow-5-text),\n 'crimson': var(--color-rainbow-6-text),\n 'lime': var(--color-rainbow-9-text),\n 'petrol': var(--color-rainbow-8-text),\n);\n\n$color-rainbow-icon: (\n '1': var(--color-rainbow-1-icon),\n '2': var(--color-rainbow-2-icon),\n '3': var(--color-rainbow-3-icon),\n '4': var(--color-rainbow-4-icon),\n '5': var(--color-rainbow-5-icon),\n '6': var(--color-rainbow-6-icon),\n '7': var(--color-rainbow-7-icon),\n '8': var(--color-rainbow-8-icon),\n '9': var(--color-rainbow-9-icon),\n '10': var(--color-rainbow-10-icon),\n 'error': var(--color-feedback-error-low-icon),\n 'information': var(--color-feedback-information-low-icon),\n 'neutral': var(--color-feedback-neutral-low-icon),\n 'success': var(--color-feedback-success-low-icon),\n 'warning': var(--color-feedback-warning-low-icon),\n 'amber': var(--color-rainbow-1-icon),\n 'orange': var(--color-rainbow-2-icon),\n 'turquoise': var(--color-rainbow-5-icon),\n 'crimson': var(--color-rainbow-6-icon),\n 'lime': var(--color-rainbow-9-icon),\n 'petrol': var(--color-rainbow-8-icon),\n);\n\n$color-rainbow-background: (\n '1': var(--color-rainbow-1-background),\n '2': var(--color-rainbow-2-background),\n '3': var(--color-rainbow-3-background),\n '4': var(--color-rainbow-4-background),\n '5': var(--color-rainbow-5-background),\n '6': var(--color-rainbow-6-background),\n '7': var(--color-rainbow-7-background),\n '8': var(--color-rainbow-8-background),\n '9': var(--color-rainbow-9-background),\n '10': var(--color-rainbow-10-background),\n 'error': var(--color-feedback-error-low-background),\n 'information': var(--color-feedback-information-low-background),\n 'neutral': var(--color-feedback-neutral-low-background),\n 'success': var(--color-feedback-success-low-background),\n 'warning': var(--color-feedback-warning-low-background),\n 'amber': var(--color-rainbow-1-background),\n 'orange': var(--color-rainbow-2-background),\n 'turquoise': var(--color-rainbow-5-background),\n 'crimson': var(--color-rainbow-6-background),\n 'lime': var(--color-rainbow-9-background),\n 'petrol': var(--color-rainbow-8-background),\n);\n$color-rainbow-border: (\n '1': var(--color-rainbow-1-border),\n '2': var(--color-rainbow-2-border),\n '3': var(--color-rainbow-3-border),\n '4': var(--color-rainbow-4-border),\n '5': var(--color-rainbow-5-border),\n '6': var(--color-rainbow-6-border),\n '7': var(--color-rainbow-7-border),\n '8': var(--color-rainbow-8-border),\n '9': var(--color-rainbow-9-border),\n '10': var(--color-rainbow-10-border),\n 'error': var(--color-feedback-error-low-border),\n 'information': var(--color-feedback-information-low-border),\n 'neutral': var(--color-feedback-neutral-low-border),\n 'success': var(--color-feedback-success-low-border),\n 'warning': var(--color-feedback-warning-low-border),\n 'amber': var(--color-rainbow-1-border),\n 'orange': var(--color-rainbow-2-border),\n 'turquoise': var(--color-rainbow-5-border),\n 'crimson': var(--color-rainbow-6-border),\n 'lime': var(--color-rainbow-9-border),\n 'petrol': var(--color-rainbow-8-border),\n);\n\n@mixin root-styles() {\n padding: var(--badge-padding-y) var(--badge-padding-x);\n display: inline-flex !important; // override the display: none in [hidden] css\n gap: var(--badge-gap-x);\n vertical-align: middle;\n align-items: center;\n border-radius: var(--radius-rounded-full);\n border-style: solid;\n border-width: 0.5px;\n height: fit-content;\n width: fit-content;\n\n &.is-icon-only {\n padding: var(--badge-padding-y) var(--badge-padding-icon-only-x);\n gap: var(--badge-gap-icon-only-x);\n }\n}\n\n@mixin root-styles-with-gap() {\n @include root-styles();\n}\n\n@mixin badge-color($color-key) {\n color: map.get($color-rainbow-text, $color-key);\n background-color: map.get($color-rainbow-background, $color-key);\n border-color: map.get($color-rainbow-border, $color-key);\n .close {\n @include focus.focus-ring(\n if(\n string.index('error information neutral success warning', $color-key),\n var(\n --color-feedback-#{$color-key}-low-content,\n map.get($color-rainbow-text, $color-key)\n ),\n if(\n meta.type-of($color-key) == 'string' and not (string.length($color-key) <= 2)\n and not\n string.index('error information neutral success warning', $color-key),\n var(\n --color-#{$color-key}-content,\n map.get($color-rainbow-text, $color-key)\n ),\n var(--color-rainbow-#{$color-key}-content)\n )\n ),\n 0.2\n );\n }\n}\n\n@mixin icon-color($color-key) {\n color: map.get($color-rainbow-icon, $color-key);\n}\n\n@mixin type-settings($font-size, $line-height) {\n font-size: var(--font-size-xs);\n line-height: var(--line-height-xs) !important;\n}\n\nnv-badge {\n @include root-styles();\n\n //gap styles\n &.with-gap {\n @include root-styles-with-gap();\n }\n\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n\n &:not(.with-gap) {\n @include root-styles();\n }\n\n // color styles\n @each $i in $badge-colors {\n &.badge-#{$i} {\n @include badge-color($i);\n nv-icon {\n @include icon-color($i);\n }\n }\n }\n\n //label styles\n & span {\n @include type-settings(xs, xs);\n text-align: center;\n }\n\n // nv-icon styles\n & nv-icon > svg {\n @each $size, $config in icon.$size-variants {\n &.icon-#{$size} {\n @include icon.icon-size-and-stroke(\n map.get(map.get(icon.$size-variants, 'xs'), size),\n map.get(map.get(icon.$size-variants, 'xs'), stroke)\n );\n }\n }\n }\n\n .close {\n padding: 0;\n line-height: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: inherit;\n display: inline-flex;\n align-items: center;\n aspect-ratio: 1/1;\n border-radius: var(--radius-rounded-full);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/\n @slot leading-icon - Icon before the label.\n * @slot default - for custom content, for pure text use label instead.\n /\n@Component({\n tag: 'nv-badge',\n styleUrl: 'nv-badge.scss',\n shadow: false,\n})\nexport class NvBadge {\n @Element() el: HTMLNvBadgeElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Whether the badge is dismissible.\n * @deprecated use dismissible instead.\n /\n @Prop({ reflect: true })\n readonly dismissal: boolean = false;\n\n /\n The icon to display in the badge.\n * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n /\n @Prop({ reflect: true })\n readonly icon: string;\n\n /\n The location of the icon in the badge.\n * @deprecated only leadIcon now.\n /\n @Prop({ reflect: true })\n readonly iconLocation: 'left' \| 'right';\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * The color of the badge.\n * deprecated Use status values or named colors instead.\n * Use a string between 1 to 10\n * or one of the status values: error, information, neutral, success, warning\n * or one of the color names: amber, orange, turquoise, crimson, lime\n /\n @Prop({ reflect: true })\n readonly color?: string = '1';\n\n /\n Main content of the badge.\n /\n @Prop({ reflect: true })\n readonly label?: string \| null = null;\n\n /\n The lead icon of the badge.\n /\n @Prop({ reflect: true, mutable: true })\n leadIcon?: string \| null = null;\n\n /\n Whether the badge is dismissible.\n /\n @Prop({ reflect: true, mutable: true })\n dismissible: boolean = false;\n\n /\n Controls the visibility of the badge. Will animate with fade and collapse.\n /\n @Prop({ reflect: true, mutable: true })\n hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n @State()\n private _isHidden: boolean;\n\n /\n When true, the alert does not automatically close upon dismissing.\n * Useful for externally controlled component behavior.\n /\n @Prop({ reflect: true })\n readonly preventAutoClose: boolean = false;\n\n /\n When true, the badge will only display an icon without label.\n * The label will be visually hidden but still accessible for screen readers.\n /\n @Prop({ reflect: true })\n readonly isIconOnly?: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the badge is dismissed.\n /\n @Event({ bubbles: false })\n closeClicked: EventEmitter<void>;\n\n /\n Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n /\n @Event({ bubbles: false })\n hiddenChanged: EventEmitter<boolean>;\n\n /\n Emitted when the animations complete, detail includes the hidden value.\n /\n @Event({ bubbles: false })\n hiddenChangedComplete: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Handles the dismissal prop change.\n * @param {boolean} dismissal - The new dismissal value.\n /\n @Watch('dismissal')\n handleDismissalChange(dismissal: boolean) {\n this.dismissible = dismissal;\n }\n\n /\n Handles the icon prop change.\n * @param {string} icon - The new icon value.\n /\n @Watch('icon')\n handleIconChange(icon: string) {\n this.leadIcon = icon;\n }\n\n /\n Handles the hidden prop change.\n * @param {boolean} hidden - The new hidden value.\n /\n @Watch('hidden')\n async handleHiddenChange(hidden: boolean) {\n this.hiddenChanged.emit(hidden);\n if (this._isHidden === true) this._isHidden = hidden;\n\n const { fadeIn, fadeOut } = useFade(this.el, { duration: 150 });\n const { collapse, expand } = useCollapse(this.el, { duration: 150 });\n\n if (hidden === true) await timeline(fadeOut, collapse).start();\n if (hidden === false) await timeline(expand, fadeIn).start();\n\n this.hiddenChangedComplete.emit(hidden);\n\n if (this._isHidden === false) this._isHidden = hidden;\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region LIFECYCLE\n\n /\n * Component will load.\n /\n componentWillLoad() {\n if (this.dismissal) {\n this.dismissible = this.dismissal;\n }\n\n if (this.icon != null && this.icon != '') {\n this.leadIcon = this.icon;\n }\n\n if (this.hidden) {\n this._isHidden = true;\n const { setCollapsed } = useCollapse(this.el);\n const { setFadeOut } = useFade(this.el);\n\n setCollapsed();\n setFadeOut();\n }\n }\n\n //#endregion LIFECYCLE\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles the close button click.\n /\n private readonly handleClose = () => {\n if (!this.preventAutoClose) {\n this.hidden = true;\n }\n\n this.closeClicked.emit();\n };\n\n //#endregion METHODS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(`badge-${this.color}`, {\n 'has-close': this.dismissible,\n 'with-gap': this.dismissible \|\| this.label,\n 'visually-hidden': this._isHidden,\n 'is-icon-only': this.isIconOnly,\n })}\n >\n <slot name=\"leading-icon\">\n {this.leadIcon && <nv-icon name={this.leadIcon} size=\"sm\"></nv-icon>}\n </slot>\n\n <span class={clsx({ 'visually-hidden': this.isIconOnly })}>\n {this.label}\n <slot></slot>\n </span>\n\n {this.dismissible && (\n <button onClick={this.handleClose} class=\"close\" type=\"button\">\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"p-Bg_l3jn1.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:string';\n@use '../nv-icon/styles/mixins' as icon;\n@use '../../styles/utils' as utils;\n@use \"../../styles/focus-ring\" as focus;\n\n/* Variants /\n$badge-colors: (\n '1',\n '2',\n '3',\n '4',\n '5',\n '6',\n '7',\n '8',\n '9',\n '10',\n 'error',\n 'information',\n 'neutral',\n 'success',\n 'warning',\n 'amber',\n 'orange',\n 'turquoise',\n 'crimson',\n 'lime',\n 'petrol',\n);\n\n/ Define maps for color-related variables /\n$color-rainbow-text: (\n '1': var(--color-rainbow-1-text),\n '2': var(--color-rainbow-2-text),\n '3': var(--color-rainbow-3-text),\n '4': var(--color-rainbow-4-text),\n '5': var(--color-rainbow-5-text),\n '6': var(--color-rainbow-6-text),\n '7': var(--color-rainbow-7-text),\n '8': var(--color-rainbow-8-text),\n '9': var(--color-rainbow-9-text),\n '10': var(--color-rainbow-10-text),\n 'error': var(--color-feedback-error-low-text),\n 'information': var(--color-feedback-information-low-text),\n 'neutral': var(--color-feedback-neutral-low-text),\n 'success': var(--color-feedback-success-low-text),\n 'warning': var(--color-feedback-warning-low-text),\n 'amber': var(--color-rainbow-1-text),\n 'orange': var(--color-rainbow-2-text),\n 'turquoise': var(--color-rainbow-5-text),\n 'crimson': var(--color-rainbow-6-text),\n 'lime': var(--color-rainbow-9-text),\n 'petrol': var(--color-rainbow-8-text),\n);\n\n$color-rainbow-icon: (\n '1': var(--color-rainbow-1-icon),\n '2': var(--color-rainbow-2-icon),\n '3': var(--color-rainbow-3-icon),\n '4': var(--color-rainbow-4-icon),\n '5': var(--color-rainbow-5-icon),\n '6': var(--color-rainbow-6-icon),\n '7': var(--color-rainbow-7-icon),\n '8': var(--color-rainbow-8-icon),\n '9': var(--color-rainbow-9-icon),\n '10': var(--color-rainbow-10-icon),\n 'error': var(--color-feedback-error-low-icon),\n 'information': var(--color-feedback-information-low-icon),\n 'neutral': var(--color-feedback-neutral-low-icon),\n 'success': var(--color-feedback-success-low-icon),\n 'warning': var(--color-feedback-warning-low-icon),\n 'amber': var(--color-rainbow-1-icon),\n 'orange': var(--color-rainbow-2-icon),\n 'turquoise': var(--color-rainbow-5-icon),\n 'crimson': var(--color-rainbow-6-icon),\n 'lime': var(--color-rainbow-9-icon),\n 'petrol': var(--color-rainbow-8-icon),\n);\n\n$color-rainbow-background: (\n '1': var(--color-rainbow-1-background),\n '2': var(--color-rainbow-2-background),\n '3': var(--color-rainbow-3-background),\n '4': var(--color-rainbow-4-background),\n '5': var(--color-rainbow-5-background),\n '6': var(--color-rainbow-6-background),\n '7': var(--color-rainbow-7-background),\n '8': var(--color-rainbow-8-background),\n '9': var(--color-rainbow-9-background),\n '10': var(--color-rainbow-10-background),\n 'error': var(--color-feedback-error-low-background),\n 'information': var(--color-feedback-information-low-background),\n 'neutral': var(--color-feedback-neutral-low-background),\n 'success': var(--color-feedback-success-low-background),\n 'warning': var(--color-feedback-warning-low-background),\n 'amber': var(--color-rainbow-1-background),\n 'orange': var(--color-rainbow-2-background),\n 'turquoise': var(--color-rainbow-5-background),\n 'crimson': var(--color-rainbow-6-background),\n 'lime': var(--color-rainbow-9-background),\n 'petrol': var(--color-rainbow-8-background),\n);\n$color-rainbow-border: (\n '1': var(--color-rainbow-1-border),\n '2': var(--color-rainbow-2-border),\n '3': var(--color-rainbow-3-border),\n '4': var(--color-rainbow-4-border),\n '5': var(--color-rainbow-5-border),\n '6': var(--color-rainbow-6-border),\n '7': var(--color-rainbow-7-border),\n '8': var(--color-rainbow-8-border),\n '9': var(--color-rainbow-9-border),\n '10': var(--color-rainbow-10-border),\n 'error': var(--color-feedback-error-low-border),\n 'information': var(--color-feedback-information-low-border),\n 'neutral': var(--color-feedback-neutral-low-border),\n 'success': var(--color-feedback-success-low-border),\n 'warning': var(--color-feedback-warning-low-border),\n 'amber': var(--color-rainbow-1-border),\n 'orange': var(--color-rainbow-2-border),\n 'turquoise': var(--color-rainbow-5-border),\n 'crimson': var(--color-rainbow-6-border),\n 'lime': var(--color-rainbow-9-border),\n 'petrol': var(--color-rainbow-8-border),\n);\n\n@mixin root-styles() {\n padding: var(--badge-padding-y) var(--badge-padding-x);\n display: inline-flex !important; // override the display: none in [hidden] css\n gap: var(--badge-gap-x);\n vertical-align: middle;\n align-items: center;\n border-radius: var(--radius-rounded-full);\n border-style: solid;\n border-width: 0.5px;\n height: fit-content;\n width: fit-content;\n\n &.is-icon-only {\n padding: var(--badge-padding-y) var(--badge-padding-icon-only-x);\n gap: var(--badge-gap-icon-only-x);\n }\n}\n\n@mixin root-styles-with-gap() {\n @include root-styles();\n}\n\n@mixin badge-color($color-key) {\n color: map.get($color-rainbow-text, $color-key);\n background-color: map.get($color-rainbow-background, $color-key);\n border-color: map.get($color-rainbow-border, $color-key);\n .close {\n @include focus.focus-ring(\n if(\n string.index('error information neutral success warning', $color-key),\n var(\n --color-feedback-#{$color-key}-low-content,\n map.get($color-rainbow-text, $color-key)\n ),\n if(\n meta.type-of($color-key) == 'string' and not (string.length($color-key) <= 2)\n and not\n string.index('error information neutral success warning', $color-key),\n var(\n --color-#{$color-key}-content,\n map.get($color-rainbow-text, $color-key)\n ),\n var(--color-rainbow-#{$color-key}-content)\n )\n ),\n 0.2\n );\n }\n}\n\n@mixin icon-color($color-key) {\n color: map.get($color-rainbow-icon, $color-key);\n}\n\n@mixin type-settings($font-size, $line-height) {\n font-size: var(--font-size-xs);\n line-height: var(--line-height-xs) !important;\n}\n\nnv-badge {\n @include root-styles();\n\n //gap styles\n &.with-gap {\n @include root-styles-with-gap();\n }\n\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n\n &:not(.with-gap) {\n @include root-styles();\n }\n\n // color styles\n @each $i in $badge-colors {\n &.badge-#{$i} {\n @include badge-color($i);\n nv-icon {\n @include icon-color($i);\n }\n }\n }\n\n //label styles\n & span {\n @include type-settings(xs, xs);\n text-align: center;\n }\n\n // nv-icon styles\n & nv-icon > svg {\n @each $size, $config in icon.$size-variants {\n &.icon-#{$size} {\n @include icon.icon-size-and-stroke(\n map.get(map.get(icon.$size-variants, 'xs'), size),\n map.get(map.get(icon.$size-variants, 'xs'), stroke)\n );\n }\n }\n }\n\n .close {\n padding: 0;\n line-height: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: inherit;\n display: inline-flex;\n align-items: center;\n aspect-ratio: 1/1;\n border-radius: var(--radius-rounded-full);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/\n @slot leading-icon - Icon before the label.\n * @slot default - for custom content, for pure text use label instead.\n /\n@Component({\n tag: 'nv-badge',\n styleUrl: 'nv-badge.scss',\n shadow: false,\n})\nexport class NvBadge {\n @Element() el: HTMLNvBadgeElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Whether the badge is dismissible.\n * @deprecated use dismissible instead.\n /\n @Prop({ reflect: true })\n readonly dismissal: boolean = false;\n\n /\n The icon to display in the badge.\n * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n /\n @Prop({ reflect: true })\n readonly icon: string;\n\n /\n The location of the icon in the badge.\n * @deprecated only leadIcon now.\n /\n @Prop({ reflect: true })\n readonly iconLocation: 'left' \| 'right';\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * The color of the badge.\n * deprecated Use status values or named colors instead.\n * Use a string between 1 to 10\n * or one of the status values: error, information, neutral, success, warning\n * or one of the color names: amber, orange, turquoise, crimson, lime\n /\n @Prop({ reflect: true })\n readonly color?: string = '1';\n\n /\n Main content of the badge.\n /\n @Prop({ reflect: true })\n readonly label?: string \| null = null;\n\n /\n The lead icon of the badge.\n /\n @Prop({ reflect: true, mutable: true })\n leadIcon?: string \| null = null;\n\n /\n Whether the badge is dismissible.\n /\n @Prop({ reflect: true, mutable: true })\n dismissible: boolean = false;\n\n /\n Controls the visibility of the badge. Will animate with fade and collapse.\n /\n @Prop({ reflect: true, mutable: true })\n hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n @State()\n private _isHidden: boolean;\n\n /\n When true, the alert does not automatically close upon dismissing.\n * Useful for externally controlled component behavior.\n /\n @Prop({ reflect: true })\n readonly preventAutoClose: boolean = false;\n\n /\n When true, the badge will only display an icon without label.\n * The label will be visually hidden but still accessible for screen readers.\n /\n @Prop({ reflect: true })\n readonly isIconOnly?: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the badge is dismissed.\n /\n @Event({ bubbles: false })\n closeClicked: EventEmitter<void>;\n\n /\n Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n /\n @Event({ bubbles: false })\n hiddenChanged: EventEmitter<boolean>;\n\n /\n Emitted when the animations complete, detail includes the hidden value.\n /\n @Event({ bubbles: false })\n hiddenChangedComplete: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Handles the dismissal prop change.\n * @param {boolean} dismissal - The new dismissal value.\n /\n @Watch('dismissal')\n handleDismissalChange(dismissal: boolean) {\n this.dismissible = dismissal;\n }\n\n /\n Handles the icon prop change.\n * @param {string} icon - The new icon value.\n /\n @Watch('icon')\n handleIconChange(icon: string) {\n this.leadIcon = icon;\n }\n\n /\n Handles the hidden prop change.\n * @param {boolean} hidden - The new hidden value.\n /\n @Watch('hidden')\n async handleHiddenChange(hidden: boolean) {\n this.hiddenChanged.emit(hidden);\n if (this._isHidden === true) this._isHidden = hidden;\n\n const { fadeIn, fadeOut } = useFade(this.el, { duration: 150 });\n const { collapse, expand } = useCollapse(this.el, { duration: 150 });\n\n if (hidden === true) await timeline(fadeOut, collapse).start();\n if (hidden === false) await timeline(expand, fadeIn).start();\n\n this.hiddenChangedComplete.emit(hidden);\n\n if (this._isHidden === false) this._isHidden = hidden;\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region LIFECYCLE\n\n /\n * Component will load.\n /\n componentWillLoad() {\n if (this.dismissal) {\n this.dismissible = this.dismissal;\n }\n\n if (this.icon != null && this.icon != '') {\n this.leadIcon = this.icon;\n }\n\n if (this.hidden) {\n this._isHidden = true;\n const { setCollapsed } = useCollapse(this.el);\n const { setFadeOut } = useFade(this.el);\n\n setCollapsed();\n setFadeOut();\n }\n }\n\n //#endregion LIFECYCLE\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles the close button click.\n /\n private readonly handleClose = () => {\n if (!this.preventAutoClose) {\n this.hidden = true;\n }\n\n this.closeClicked.emit();\n };\n\n //#endregion METHODS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(`badge-${this.color}`, {\n 'has-close': this.dismissible,\n 'with-gap': this.dismissible \|\| this.label,\n 'visually-hidden': this._isHidden,\n 'is-icon-only': this.isIconOnly,\n })}\n >\n <slot name=\"leading-icon\">\n {this.leadIcon && <nv-icon name={this.leadIcon} size=\"sm\"></nv-icon>}\n </slot>\n\n <span class={clsx({ 'visually-hidden': this.isIconOnly })}>\n {this.label}\n <slot></slot>\n </span>\n\n {this.dismissible && (\n <button onClick={this.handleClose} class=\"close\" type=\"button\">\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-CBvZjfqs.js → p-C2QAWGhf.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-C63Xpg9a.js';
-import { d as defineCustomElement$1 } from './p-CBOuqJTb.js';
+import { d as defineCustomElement$1 } from './p-nfYynlVq.js';
 const nvMenuitemCss = "nv-menuitem{display:flex;align-items:center;max-width:300px;width:100vw;font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);gap:var(--menu-contextual-item-gap-x);padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);transition:background-color 150ms ease-out;cursor:pointer}nv-menuitem:hover,nv-menuitem:focus,nv-menuitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menuitem *{pointer-events:none}nv-menuitem kbd{color:var(--components-menu-contextual-item-shortcut)}nv-menuitem [data-scope=text]{margin-right:auto}nv-menuitem[disabled]:not([disabled=false]){cursor:unset;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}";
@@ -50,7 +50,7 @@ const NvMenuitem = /*@__PURE__*/ proxyCustomElement(class NvMenuitem extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '3c9a394f8af5ab7b57061ddfdd3e07b9fce17847', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && h("nv-icon", { key: '3f36901afb278a608f8eaeb423e8aca08c055187', name: this.icon }), h("slot", { key: 'a54ca41926c4f9374af669125529befc6ab454e2' }), this.label && h("span", { key: 'c83199ffd4e5559b22d06392edf5ad6c8e83cf96', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && h("kbd", { key: 'c7a052d69c1d8cd33238f9f88405596a46649e3c' }, this.shortcut), this.hasSubmenu && h("nv-icon", { key: '57de548ca08d6fb045223f242dee568a29b6270f', name: "chevron-right" })));
+        return (h(Host, { key: 'e21f532b90f018810befe6a03ef4cb75fe05aea2', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && h("nv-icon", { key: 'a63bdcae06b1311440ec95ecf002a8b9a130aea8', name: this.icon }), h("slot", { key: 'f25c0104369b8d70ce35d4bf74cf92c1bcdf66c6' }), this.label && h("span", { key: '5ab5691b53857876c8e13e91f975b41e255999da', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && h("kbd", { key: 'c93777342da74e2cba4dfbbdf6657814b3996f41' }, this.shortcut), this.hasSubmenu && h("nv-icon", { key: '87a58745651c54efb1c96841846363e377ee6fca', name: "chevron-right" })));
     }
     get el() { return this; }
     static get style() { return nvMenuitemCss; }
@@ -83,6 +83,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { NvMenuitem as N, defineCustomElement as d };
-//# sourceMappingURL=p-CBvZjfqs.js.map
+//# sourceMappingURL=p-C2QAWGhf.js.map
-//# sourceMappingURL=p-CBvZjfqs.js.map
+//# sourceMappingURL=p-C2QAWGhf.js.map

package/dist/components/{p-CBvZjfqs.js.map → p-C2QAWGhf.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~CBvZjfqs~~.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,+6BAA+6B;;MCqBx7B,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAyBE;;AAEG;AAEM,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAQlC;;AAEG;AAEM,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAyFrC;;AArDS,IAAA,oBAAoB,CAAC,KAAY,EAAA;;AAEvC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE;YACvB;;AAGF,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;AACzB,YAAA,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE;YACd,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC,UAAU;AAC5B,SAAA,CAAC;;AAIJ,IAAA,WAAW,CAAC,KAAiB,EAAA;AAC3B,QAAA,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC;;AAIlC,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;AAC9C,YAAA,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAsC;AACrE,YAAA,IACE,aAAa;gBACb,aAAa,CAAC,OAAO,KAAK,aAAa;AACvC,gBAAA,CAAC,aAAa,CAAC,YAAY,CAAC,aAAa,CAAC,EAC1C;gBACA,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;;;;;;;IASrB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,EAAA,EACvD,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAY,CAAA,EAElD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEZ,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAiB,MAAM,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,EACzD,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAM,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,QAAQ,CAAO,EAC/D,IAAI,CAAC,UAAU,IAAI,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,eAAe,EAAA,CAAW,CACvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-menuitem/nv-menuitem.scss?tag=nv-menuitem","src/components/nv-menuitem/nv-menuitem.tsx"],"sourcesContent":["@mixin root-styles() {\n display: flex;\n align-items: center;\n max-width: 300px;\n width: 100vw;\n font-size: var(--menu-contextual-item-font-size);\n font-weight: var(--menu-contextual-item-font-weight);\n color: var(--components-menu-contextual-item-content);\n border-radius: var(--menu-contextual-item-radius);\n gap: var(--menu-contextual-item-gap-x);\n padding: var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);\n transition: background-color 150ms ease-out;\n cursor: pointer;\n &:hover, &:focus, &:focus-within {\n @include focused-styles();\n }\n * {\n pointer-events: none;\n }\n}\n\n@mixin focused-styles() {\n background-color: var(--components-menu-contextual-item-background-hover);\n color: var(--components-menu-contextual-item-content-hover);\n}\n\n@mixin disabled-styles() {\n cursor: unset;\n background-color: unset;\n color: var(--components-menu-contextual-item-content-disabled);\n}\n\n@mixin text-styles() {\n margin-right: auto;\n}\n\n@mixin shortcut-styles() {\n color: var(--components-menu-contextual-item-shortcut);\n}\n\nnv-menuitem {\n @include root-styles();\n\n kbd {\n @include shortcut-styles();\n }\n\n [data-scope=\"text\"] {\n @include text-styles();\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n @include disabled-styles();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\n\nimport { IconName } from '../nv-icon/nv-icons';\n\n/*\n @slot default - Use this slot to render custom content for the menu item.\n /\n@Component({\n tag: 'nv-menuitem',\n styleUrl: 'nv-menuitem.scss',\n shadow: false,\n})\nexport class NvMenuitem {\n @Element() el: HTMLNvMenuitemElement;\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Text content for the menu item. If a more custom approach is needed, use\n * the default slot instead.\n /\n @Prop({ reflect: true })\n readonly label: string;\n\n /\n Choose the icon you want to display. This also sets the aria-label for\n * improved accessibility, helping users who rely on screen readers.\n * The icon is not displayed when the button is loading.\n /\n @Prop({ reflect: true })\n readonly icon: `${IconName}`;\n\n /\n Disables the item, preventing user interaction.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Show a shortcut key for the action represented in the menu item.\n /\n @Prop({ reflect: true })\n readonly shortcut: string;\n\n /\n If the menu item has a submenu, the a caret icon will be displayed.\n /\n @Prop({ reflect: true })\n readonly hasSubmenu: boolean = false;\n\n /\n Represents the identifier or name associated with the menu item. This value\n * will be emitted as part of the event data when the menu item is selected,\n * enabling event handlers to identify the chosen item.\n /\n @Prop({ reflect: true })\n readonly name: string;\n\n //#endregion PROPERTIES\n /**************************************************************************/\n //#region EVENTS\n\n / eslint-disable nova/event-bubbling /\n /\n Fires when the menu item is selected (click or keypress). Will include the\n * id and name of the menu item.\n /\n @Event({ bubbles: true })\n menuitemSelected: EventEmitter<{\n /\n The id of the menu item that was selected.\n /\n id?: HTMLElement['id'];\n /\n The name of the menu item that was selected.\n /\n name?: string;\n /\n Indicates if the menu item has a nested submenu.\n /\n hasSubmenu?: boolean;\n }>;\n / eslint-enable nova/event-bubbling /\n\n private handleMenuItemSelect(event: Event) {\n // If the element is disabled, stop propagation\n if (this.disabled) {\n event.stopPropagation();\n return;\n }\n\n this.menuitemSelected.emit({\n id: this.el.id,\n name: this.name,\n hasSubmenu: this.hasSubmenu,\n });\n }\n\n @Listen('click', { capture: true })\n handleClick(event: MouseEvent) {\n this.handleMenuItemSelect(event);\n }\n\n @Listen('keydown', { passive: false })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n const activeElement = document.activeElement as HTMLNvMenuitemElement;\n if (\n activeElement &&\n activeElement.tagName === 'NV-MENUITEM' &&\n !activeElement.hasAttribute('has-submenu')\n ) {\n event.preventDefault();\n this.el.click();\n }\n }\n }\n\n //#endregion EVENTS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"menuitem\" tabindex={this.disabled ? '-1' : '0'}>\n {this.icon && <nv-icon name={this.icon}></nv-icon>}\n\n <slot></slot>\n\n {this.label && <span data-scope=\"text\">{this.label}</span>}\n {this.shortcut && !this.hasSubmenu && <kbd>{this.shortcut}</kbd>}\n {this.hasSubmenu && <nv-icon name=\"chevron-right\"></nv-icon>}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"p-C2QAWGhf.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,+6BAA+6B;;MCqBx7B,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAyBE;;AAEG;AAEM,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAQlC;;AAEG;AAEM,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAyFrC;;AArDS,IAAA,oBAAoB,CAAC,KAAY,EAAA;;AAEvC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE;YACvB;;AAGF,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;AACzB,YAAA,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE;YACd,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC,UAAU;AAC5B,SAAA,CAAC;;AAIJ,IAAA,WAAW,CAAC,KAAiB,EAAA;AAC3B,QAAA,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC;;AAIlC,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;AAC9C,YAAA,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAsC;AACrE,YAAA,IACE,aAAa;gBACb,aAAa,CAAC,OAAO,KAAK,aAAa;AACvC,gBAAA,CAAC,aAAa,CAAC,YAAY,CAAC,aAAa,CAAC,EAC1C;gBACA,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;;;;;;;IASrB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,EAAA,EACvD,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAY,CAAA,EAElD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEZ,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAiB,MAAM,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,EACzD,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAM,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,QAAQ,CAAO,EAC/D,IAAI,CAAC,UAAU,IAAI,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,eAAe,EAAA,CAAW,CACvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-menuitem/nv-menuitem.scss?tag=nv-menuitem","src/components/nv-menuitem/nv-menuitem.tsx"],"sourcesContent":["@mixin root-styles() {\n display: flex;\n align-items: center;\n max-width: 300px;\n width: 100vw;\n font-size: var(--menu-contextual-item-font-size);\n font-weight: var(--menu-contextual-item-font-weight);\n color: var(--components-menu-contextual-item-content);\n border-radius: var(--menu-contextual-item-radius);\n gap: var(--menu-contextual-item-gap-x);\n padding: var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);\n transition: background-color 150ms ease-out;\n cursor: pointer;\n &:hover, &:focus, &:focus-within {\n @include focused-styles();\n }\n * {\n pointer-events: none;\n }\n}\n\n@mixin focused-styles() {\n background-color: var(--components-menu-contextual-item-background-hover);\n color: var(--components-menu-contextual-item-content-hover);\n}\n\n@mixin disabled-styles() {\n cursor: unset;\n background-color: unset;\n color: var(--components-menu-contextual-item-content-disabled);\n}\n\n@mixin text-styles() {\n margin-right: auto;\n}\n\n@mixin shortcut-styles() {\n color: var(--components-menu-contextual-item-shortcut);\n}\n\nnv-menuitem {\n @include root-styles();\n\n kbd {\n @include shortcut-styles();\n }\n\n [data-scope=\"text\"] {\n @include text-styles();\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n @include disabled-styles();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\n\nimport { IconName } from '../nv-icon/nv-icons';\n\n/*\n @slot default - Use this slot to render custom content for the menu item.\n /\n@Component({\n tag: 'nv-menuitem',\n styleUrl: 'nv-menuitem.scss',\n shadow: false,\n})\nexport class NvMenuitem {\n @Element() el: HTMLNvMenuitemElement;\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Text content for the menu item. If a more custom approach is needed, use\n * the default slot instead.\n /\n @Prop({ reflect: true })\n readonly label: string;\n\n /\n Choose the icon you want to display. This also sets the aria-label for\n * improved accessibility, helping users who rely on screen readers.\n * The icon is not displayed when the button is loading.\n /\n @Prop({ reflect: true })\n readonly icon: `${IconName}`;\n\n /\n Disables the item, preventing user interaction.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n /\n Show a shortcut key for the action represented in the menu item.\n /\n @Prop({ reflect: true })\n readonly shortcut: string;\n\n /\n If the menu item has a submenu, the a caret icon will be displayed.\n /\n @Prop({ reflect: true })\n readonly hasSubmenu: boolean = false;\n\n /\n Represents the identifier or name associated with the menu item. This value\n * will be emitted as part of the event data when the menu item is selected,\n * enabling event handlers to identify the chosen item.\n /\n @Prop({ reflect: true })\n readonly name: string;\n\n //#endregion PROPERTIES\n /**************************************************************************/\n //#region EVENTS\n\n / eslint-disable nova/event-bubbling /\n /\n Fires when the menu item is selected (click or keypress). Will include the\n * id and name of the menu item.\n /\n @Event({ bubbles: true })\n menuitemSelected: EventEmitter<{\n /\n The id of the menu item that was selected.\n /\n id?: HTMLElement['id'];\n /\n The name of the menu item that was selected.\n /\n name?: string;\n /\n Indicates if the menu item has a nested submenu.\n /\n hasSubmenu?: boolean;\n }>;\n / eslint-enable nova/event-bubbling /\n\n private handleMenuItemSelect(event: Event) {\n // If the element is disabled, stop propagation\n if (this.disabled) {\n event.stopPropagation();\n return;\n }\n\n this.menuitemSelected.emit({\n id: this.el.id,\n name: this.name,\n hasSubmenu: this.hasSubmenu,\n });\n }\n\n @Listen('click', { capture: true })\n handleClick(event: MouseEvent) {\n this.handleMenuItemSelect(event);\n }\n\n @Listen('keydown', { passive: false })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n const activeElement = document.activeElement as HTMLNvMenuitemElement;\n if (\n activeElement &&\n activeElement.tagName === 'NV-MENUITEM' &&\n !activeElement.hasAttribute('has-submenu')\n ) {\n event.preventDefault();\n this.el.click();\n }\n }\n }\n\n //#endregion EVENTS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host role=\"menuitem\" tabindex={this.disabled ? '-1' : '0'}>\n {this.icon && <nv-icon name={this.icon}></nv-icon>}\n\n <slot></slot>\n\n {this.label && <span data-scope=\"text\">{this.label}</span>}\n {this.shortcut && !this.hasSubmenu && <kbd>{this.shortcut}</kbd>}\n {this.hasSubmenu && <nv-icon name=\"chevron-right\"></nv-icon>}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-DzUXTCUy.js → p-COnt5ux_.js} RENAMED Viewed

@@ -23,7 +23,7 @@ const NvLoader = /*@__PURE__*/ proxyCustomElement(class NvLoader extends H {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (h(Host, { key: '049afa243c1ce99643408d86afa99e69c5468b8b', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (h(Host, { key: '4347ec4ee393edb5e23a60e253bae73d0f9db583', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
     static get style() { return nvLoaderCss; }
 }, [256, "nv-loader", {
@@ -46,6 +46,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { NvLoader as N, defineCustomElement as d };
-//# sourceMappingURL=p-DzUXTCUy.js.map
+//# sourceMappingURL=p-COnt5ux_.js.map
-//# sourceMappingURL=p-DzUXTCUy.js.map
+//# sourceMappingURL=p-COnt5ux_.js.map

package/dist/components/{p-DzUXTCUy.js.map → p-COnt5ux_.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~DzUXTCUy~~.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,qoHAAqoH;;MCU5oH,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AASE;;;;AAIG;AAEM,QAAA,IAAI,CAAA,IAAA,GAAuB,IAAI;AA2BzC;;;;;IAZC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,IAAI,IAAI,CAAQ,KAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,EAChC,IAAI,CAAC,KAAK,IAAI,CAAS,MAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,CACpC,EAAA,CACK;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-loader/nv-loader.scss?tag=nv-loader","src/components/nv-loader/nv-loader.tsx"],"sourcesContent":["@use \"sass:map\";\n\n/* Variants /\n$loader-sizes: (\"xs\", \"sm\", \"md\", \"lg\", \"xl\");\n$loader-color: (\"brand\", \"white\");\n\n/ Define maps for color-related variables /\n$components-loader-background: (\n \"brand\": var(--components-loader-brand-background),\n \"white\": var(--components-loader-white-background)\n);\n\n$components-loader-foreground: (\n \"brand\": var(--components-loader-brand-foreground),\n \"white\": var(--components-loader-white-foreground)\n);\n\n/ Define maps for size-related variables /\n$components-loader-size: (\n \"xs\": var(--loader-size-xs),\n \"sm\": var(--loader-size-sm),\n \"md\": var(--loader-size-md),\n \"lg\": var(--loader-size-lg),\n \"xl\": var(--loader-size-xl)\n);\n\n@mixin root-styles() {\n display: inline-block;\n position: relative;\n aspect-ratio: 1 / 1;\n border-radius: 9999px;\n color: inherit;\n}\n\n@mixin size-styles($size) {\n $loader-size: map.get($components-loader-size, $size);\n $border-size: calc($loader-size / 10);\n\n width: $loader-size;\n height: $loader-size;\n\n &::before,\n &::after {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n border-radius: inherit;\n width: 100%;\n height: 100%;\n }\n\n &::before {\n content: \" \";\n border: $border-size solid;\n opacity: 0.3;\n }\n\n &::after {\n content: \" \";\n border-top: $border-size solid transparent;\n border-left: $border-size solid transparent;\n border-right: $border-size solid transparent;\n border-bottom: $border-size solid;\n animation: rotation 1s linear infinite;\n }\n}\n\n@mixin color-styles($color) {\n &::before {\n border-color: map.get($components-loader-background, $color);\n opacity: 1;\n }\n\n &::after {\n border-bottom-color: map.get($components-loader-foreground, $color);\n }\n}\n\n@keyframes rotation {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\nnv-loader {\n @include root-styles();\n\n @each $size in $loader-sizes {\n &.size-#{$size} {\n @include size-styles($size);\n }\n }\n\n @each $color in $loader-color {\n &.color-#{$color} {\n @include color-styles($color);\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { SemanticSizes, LoaderColors } from '../../utils/constants';\n\n@Component({\n tag: 'nv-loader',\n styleUrl: 'nv-loader.scss',\n shadow: false,\n})\nexport class NvLoader {\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Choose the size of the loader to best fit your application’s needs, whether\n * it’s a small spinner for subtle loading indicators or a large one for more\n * prominent displays.\n /\n @Prop({ reflect: true })\n readonly size: `${SemanticSizes}` = 'md';\n\n /\n Choose the color of the loader. Options are primary and white to keep the\n * design consistent and ensure the loader stands out or blends in\n * appropriately with your application’s interface.\n /\n @Prop({ reflect: true })\n readonly color: `${LoaderColors}`;\n\n //#endregion PROPERTIES\n /**************************************************************************/\n //#region RENDER\n\n / <slot> empty to force rendering change */\n render() {\n return (\n <Host\n class={clsx(\n this.size && `size-${this.size}`,\n this.color && `color-${this.color}`,\n )}\n ></Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"p-COnt5ux_.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,qoHAAqoH;;MCU5oH,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AASE;;;;AAIG;AAEM,QAAA,IAAI,CAAA,IAAA,GAAuB,IAAI;AA2BzC;;;;;IAZC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,IAAI,IAAI,CAAQ,KAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,EAChC,IAAI,CAAC,KAAK,IAAI,CAAS,MAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,CACpC,EAAA,CACK;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-loader/nv-loader.scss?tag=nv-loader","src/components/nv-loader/nv-loader.tsx"],"sourcesContent":["@use \"sass:map\";\n\n/* Variants /\n$loader-sizes: (\"xs\", \"sm\", \"md\", \"lg\", \"xl\");\n$loader-color: (\"brand\", \"white\");\n\n/ Define maps for color-related variables /\n$components-loader-background: (\n \"brand\": var(--components-loader-brand-background),\n \"white\": var(--components-loader-white-background)\n);\n\n$components-loader-foreground: (\n \"brand\": var(--components-loader-brand-foreground),\n \"white\": var(--components-loader-white-foreground)\n);\n\n/ Define maps for size-related variables /\n$components-loader-size: (\n \"xs\": var(--loader-size-xs),\n \"sm\": var(--loader-size-sm),\n \"md\": var(--loader-size-md),\n \"lg\": var(--loader-size-lg),\n \"xl\": var(--loader-size-xl)\n);\n\n@mixin root-styles() {\n display: inline-block;\n position: relative;\n aspect-ratio: 1 / 1;\n border-radius: 9999px;\n color: inherit;\n}\n\n@mixin size-styles($size) {\n $loader-size: map.get($components-loader-size, $size);\n $border-size: calc($loader-size / 10);\n\n width: $loader-size;\n height: $loader-size;\n\n &::before,\n &::after {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n border-radius: inherit;\n width: 100%;\n height: 100%;\n }\n\n &::before {\n content: \" \";\n border: $border-size solid;\n opacity: 0.3;\n }\n\n &::after {\n content: \" \";\n border-top: $border-size solid transparent;\n border-left: $border-size solid transparent;\n border-right: $border-size solid transparent;\n border-bottom: $border-size solid;\n animation: rotation 1s linear infinite;\n }\n}\n\n@mixin color-styles($color) {\n &::before {\n border-color: map.get($components-loader-background, $color);\n opacity: 1;\n }\n\n &::after {\n border-bottom-color: map.get($components-loader-foreground, $color);\n }\n}\n\n@keyframes rotation {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\nnv-loader {\n @include root-styles();\n\n @each $size in $loader-sizes {\n &.size-#{$size} {\n @include size-styles($size);\n }\n }\n\n @each $color in $loader-color {\n &.color-#{$color} {\n @include color-styles($color);\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { SemanticSizes, LoaderColors } from '../../utils/constants';\n\n@Component({\n tag: 'nv-loader',\n styleUrl: 'nv-loader.scss',\n shadow: false,\n})\nexport class NvLoader {\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Choose the size of the loader to best fit your application’s needs, whether\n * it’s a small spinner for subtle loading indicators or a large one for more\n * prominent displays.\n /\n @Prop({ reflect: true })\n readonly size: `${SemanticSizes}` = 'md';\n\n /\n Choose the color of the loader. Options are primary and white to keep the\n * design consistent and ensure the loader stands out or blends in\n * appropriately with your application’s interface.\n /\n @Prop({ reflect: true })\n readonly color: `${LoaderColors}`;\n\n //#endregion PROPERTIES\n /**************************************************************************/\n //#region RENDER\n\n / <slot> empty to force rendering change */\n render() {\n return (\n <Host\n class={clsx(\n this.size && `size-${this.size}`,\n this.color && `color-${this.color}`,\n )}\n ></Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-KUIQrV3D.js → p-Cc7XnqPp.js} RENAMED Viewed

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-C63Xpg9a.js';
 import { u as useCollapse } from './p-D1C_pu0E.js';
 import './p-Dz1GUhVy.js';
-import { d as defineCustomElement$3 } from './p-CBOuqJTb.js';
-import { d as defineCustomElement$2 } from './p-DaiLIZ8f.js';
-import { d as defineCustomElement$1 } from './p-DzUXTCUy.js';
+import { d as defineCustomElement$3 } from './p-nfYynlVq.js';
+import { d as defineCustomElement$2 } from './p-DvapDVBj.js';
+import { d as defineCustomElement$1 } from './p-COnt5ux_.js';
 const nvAccordionItemCss = "nv-accordion-item{display:block;border-bottom:var(--spacing-px) solid var(--color-content-low-border)}nv-accordion-item:last-child{border-bottom:none}nv-accordion-item .nv-accordion-item__header{cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-4)}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__chevron{margin-left:var(--spacing-2);flex-shrink:0}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__header-content{display:flex;flex-direction:column;gap:var(--spacing-0-5);flex:1;min-width:0}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__title{color:var(--color-content-high-text);font-size:var(--font-size-lg);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--line-height-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__subtitle{color:var(--color-content-low-text);font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--line-height-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nv-accordion-item .nv-accordion-item__content{background:var(--color-level-10-background)}nv-accordion-item .nv-accordion-item__content .nv-accordion-item__content-inner{padding:var(--spacing-4);color:var(--color-content-low-text);font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--line-height-base);}nv-accordion-item.is-disabled{opacity:var(--opacity-disabled);pointer-events:none}nv-accordion-item.is-open .nv-accordion-item__header{border-bottom:var(--spacing-px) solid var(--color-content-low-border)}nv-accordion-item:last-child .nv-accordion-item__content{border-radius:0 0 calc(var(--radius-rounded-lg) - var(--spacing-px)) calc(var(--radius-rounded-lg) - var(--spacing-px))}";
@@ -255,6 +255,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { NvAccordionItem as N, defineCustomElement as d };
-//# sourceMappingURL=p-KUIQrV3D.js.map
+//# sourceMappingURL=p-Cc7XnqPp.js.map
-//# sourceMappingURL=p-KUIQrV3D.js.map
+//# sourceMappingURL=p-Cc7XnqPp.js.map

package/dist/components/{p-KUIQrV3D.js.map → p-Cc7XnqPp.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-KUIQrV3D.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-accordion-item/styles/nv-accordion-item.scss?tag=nv-accordion-item","src/components/nv-accordion-item/nv-accordion-item.tsx"],"sourcesContent":["@use './mixins' as ;\n\nnv-accordion-item {\n @include accordion-item-root();\n\n .nv-accordion-item__header {\n @include accordion-item-header();\n\n .nv-accordion-item__chevron {\n @include accordion-item-chevron();\n }\n\n .nv-accordion-item__header-content {\n @include accordion-item-header-content();\n }\n\n .nv-accordion-item__title {\n @include accordion-item-title();\n }\n\n .nv-accordion-item__subtitle {\n @include accordion-item-subtitle();\n }\n }\n\n .nv-accordion-item__content {\n @include accordion-item-content();\n\n .nv-accordion-item__content-inner {\n @include accordion-item-content-inner();\n }\n }\n\n // Styles for disabled items\n &.is-disabled {\n @include accordion-item-disabled();\n }\n\n // Border between header and content when item is open\n &.is-open .nv-accordion-item__header {\n border-bottom: var(--spacing-px) solid var(--color-content-low-border);\n }\n\n // ✅ Add this\n &:last-child {\n .nv-accordion-item__content {\n border-radius: 0 0 calc(var(--radius-rounded-lg) - var(--spacing-px))\n calc(var(--radius-rounded-lg) - var(--spacing-px));\n }\n }\n}\n","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 / eslint-disable nova/event-bubbling /\n /\n Event emitted on toggle (header click or programmatic change)\n /\n @Event({ bubbles: true })\n itemToggle: EventEmitter<boolean>;\n / eslint-enable nova/event-bubbling /\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"],"version":3}
1	+ {"file":"p-Cc7XnqPp.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-accordion-item/styles/nv-accordion-item.scss?tag=nv-accordion-item","src/components/nv-accordion-item/nv-accordion-item.tsx"],"sourcesContent":["@use './mixins' as ;\n\nnv-accordion-item {\n @include accordion-item-root();\n\n .nv-accordion-item__header {\n @include accordion-item-header();\n\n .nv-accordion-item__chevron {\n @include accordion-item-chevron();\n }\n\n .nv-accordion-item__header-content {\n @include accordion-item-header-content();\n }\n\n .nv-accordion-item__title {\n @include accordion-item-title();\n }\n\n .nv-accordion-item__subtitle {\n @include accordion-item-subtitle();\n }\n }\n\n .nv-accordion-item__content {\n @include accordion-item-content();\n\n .nv-accordion-item__content-inner {\n @include accordion-item-content-inner();\n }\n }\n\n // Styles for disabled items\n &.is-disabled {\n @include accordion-item-disabled();\n }\n\n // Border between header and content when item is open\n &.is-open .nv-accordion-item__header {\n border-bottom: var(--spacing-px) solid var(--color-content-low-border);\n }\n\n // ✅ Add this\n &:last-child {\n .nv-accordion-item__content {\n border-radius: 0 0 calc(var(--radius-rounded-lg) - var(--spacing-px))\n calc(var(--radius-rounded-lg) - var(--spacing-px));\n }\n }\n}\n","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 / eslint-disable nova/event-bubbling /\n /\n Event emitted on toggle (header click or programmatic change)\n /\n @Event({ bubbles: true })\n itemToggle: EventEmitter<boolean>;\n / eslint-enable nova/event-bubbling /\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"],"version":3}

package/dist/components/{p-CmwaW0q4.js → p-D02w_Ru6.js} RENAMED Viewed

@@ -1,31 +1,6 @@
 import { i as index } from './p-9xYwU7ku.js';
 import { a as animate } from './p-Dz1GUhVy.js';
-/**
- * Adds a set of event listeners to the given target.
- * @param {EventsAndListeners} events - The events and listeners to add.
- * @param {Element | Window | Document} target  - The target element or window to add the event listeners to.
- * @param {T} context - The class context to bind the event listeners to.
- */
-function addEventListeners(events, target, context) {
-    events.forEach(([event, listener]) => target.addEventListener(event, listener.bind(context)));
-}
-/**
- * Removes a set of event listeners from the given target.
- * @param {EventsAndListeners} events - The events and listeners to remove.
- * @param {Element | Window | Document} target  - The target element or window to remove the event listeners from.
- * @param {T} context - The class context to bind the event listeners to.
- */
-function removeEventListeners(events, target, context) {
-    events.forEach(([event, listener]) => target.removeEventListener(event, listener.bind(context)));
-}
-var events_utils = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    addEventListeners: addEventListeners,
-    removeEventListeners: removeEventListeners
-});
 const useGrow = (node, { duration = 200, amount = 0.8, hasFade = true } = {}) => {
     const nodeStyler = index(node);
     /**
@@ -110,7 +85,7 @@ const useGrow = (node, { duration = 200, amount = 0.8, hasFade = true } = {}) =>
     };
 };
-export { addEventListeners as a, events_utils as e, removeEventListeners as r, useGrow as u };
-//# sourceMappingURL=p-CmwaW0q4.js.map
+export { useGrow as u };
+//# sourceMappingURL=p-D02w_Ru6.js.map
-//# sourceMappingURL=p-CmwaW0q4.js.map
+//# sourceMappingURL=p-D02w_Ru6.js.map

package/dist/components/p-D02w_Ru6.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-D02w_Ru6.js","mappings":";;;AAYM,MAAA,OAAO,GAAG,CACd,IAAiB,EACjB,EAAE,QAAQ,GAAG,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,OAAO,GAAG,IAAI,EAAkB,GAAA,EAAE,KAChE;AACF,IAAA,MAAM,UAAU,GAAGA,KAAM,CAAC,IAAI,CAAC;AAE/B;;;AAGG;AACH,IAAA,SAAS,MAAM,GAAA;AACb,QAAA,OAAO,IAAI,OAAO,CAAO,OAAO,IAAG;AACjC,YAAA,OAAO,CAAC;AACN,gBAAA,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE;gBACjD,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;gBAC5B,QAAQ;AACR,gBAAA,QAAQ,CAAC,MAAM,EAAA;AACb,oBAAA,MAAM,OAAO,GAAG;wBACd,KAAK,EAAE,MAAM,CAAC,KAAK;qBACpB;oBACD,IAAI,OAAO,EAAE;AACX,wBAAA,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,OAAO;;AAErC,oBAAA,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC;iBACxB;gBACD,UAAU,GAAA;AACR,oBAAA,OAAO,EAAE;oBACT,IAAI,OAAO,EAAE;AACX,wBAAA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC;;AAEtC,oBAAA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;iBACvC;AACF,aAAA,CAAC;AACJ,SAAC,CAAC;;AAGJ;;;AAGG;AACH,IAAA,SAAS,UAAU,GAAA;QACjB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,CAAS,MAAA,EAAA,MAAM,GAAG;QACzC,IAAI,OAAO,EAAE;AACX,YAAA,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG;;;AAI5B;;;AAGG;AACH,IAAA,SAAS,SAAS,GAAA;AAChB,QAAA,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,UAAU;QACjC,IAAI,OAAO,EAAE;AACX,YAAA,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG;;;AAI5B;;;AAGG;AACH,IAAA,SAAS,OAAO,GAAA;AACd,QAAA,OAAO,IAAI,OAAO,CAAO,OAAO,IAAG;AACjC,YAAA,OAAO,CAAC;gBACN,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;AAC9B,gBAAA,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE;gBAC/C,QAAQ;AACR,gBAAA,QAAQ,CAAC,MAAM,EAAA;AACb,oBAAA,MAAM,OAAO,GAAG;wBACd,KAAK,EAAE,MAAM,CAAC,KAAK;qBACpB;oBACD,IAAI,OAAO,EAAE;AACX,wBAAA,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,OAAO;;AAErC,oBAAA,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC;iBACxB;gBACD,UAAU,GAAA;AACR,oBAAA,OAAO,EAAE;iBACV;AACF,aAAA,CAAC;AACJ,SAAC,CAAC;;IAGJ,OAAO;QACL,MAAM;QACN,OAAO;QACP,UAAU;QACV,SAAS;KACV;AACH;;;;","names":["styler"],"sources":["src/animations/grow.animation.ts"],"sourcesContent":["import { animate } from 'popmotion';\nimport styler from 'stylefire';\n\nexport type GrowOptions = {\n /** How long the animation should take in ms @default 200 */\n duration?: number;\n /** The amount to scale the element by @default 0.8 */\n amount?: number;\n /** Whether to include a fade effect in the animation @default true */\n hasFade?: boolean;\n};\n\nconst useGrow = (\n node: HTMLElement,\n { duration = 200, amount = 0.8, hasFade = true }: GrowOptions = {},\n) => {\n const nodeStyler = styler(node);\n\n /**\n * Will animate the scale and optionally the opacity to make the element grow and fade in,\n * and removes the scale and opacity style attributes once complete.\n */\n function growIn() {\n return new Promise<void>(resolve => {\n animate({\n from: { opacity: hasFade ? 0 : 1, scale: amount },\n to: { opacity: 1, scale: 1 },\n duration,\n onUpdate(latest) {\n const updates = {\n scale: latest.scale,\n };\n if (hasFade) {\n updates['opacity'] = latest.opacity;\n }\n nodeStyler.set(updates);\n },\n onComplete() {\n resolve();\n if (hasFade) {\n node.style.removeProperty('opacity');\n }\n node.style.removeProperty('transform');\n },\n });\n });\n }\n\n /**\n * Applies the growOut styles without animating, useful when the initial\n * state is hidden.\n */\n function setGrowOut() {\n node.style.transform = `scale(${amount})`;\n if (hasFade) {\n node.style.opacity = '0';\n }\n }\n\n /**\n * Applies the growIn styles without animating, useful when the initial\n * state is visible.\n */\n function setGrowIn() {\n node.style.transform = `scale(1)`;\n if (hasFade) {\n node.style.opacity = '1';\n }\n }\n\n /**\n * Will animate the scale and optionally the opacity to make the element shrink and fade out,\n * leaving the scale and opacity styles on the element.\n */\n function growOut() {\n return new Promise<void>(resolve => {\n animate({\n from: { opacity: 1, scale: 1 },\n to: { opacity: hasFade ? 0 : 1, scale: amount },\n duration,\n onUpdate(latest) {\n const updates = {\n scale: latest.scale,\n };\n if (hasFade) {\n updates['opacity'] = latest.opacity;\n }\n nodeStyler.set(updates);\n },\n onComplete() {\n resolve();\n },\n });\n });\n }\n\n return {\n growIn,\n growOut,\n setGrowOut,\n setGrowIn,\n };\n};\n\nexport { useGrow };\n"],"version":3}