@nova-design-system/nova-webcomponents 3.5.0 → 3.7.0

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

@@ -0,0 +1,163 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a1936cd0.js';
+
+const nvAccordionCss = "nv-accordion{display:block;border:var(--spacing-px) solid var(--color-content-low-border);border-radius:var(--radius-rounded-lg)}nv-accordion .nv-accordion__footer{padding:var(--spacing-3);background:var(--color-level-05-background);border-radius:0 0 var(--radius-rounded-lg) var(--radius-rounded-lg);margin-top:calc(var(--spacing-px) * -1);border-top:var(--spacing-px) solid var(--color-content-low-border)}nv-accordion .nv-accordion__footer:empty{display:none}";
+const NvAccordionStyle0 = nvAccordionCss;
+
+const NvAccordion = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.openChanged = createEvent(this, "openChanged", 7);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Data to display as a list of items (title, subtitle, content).
+         */
+        this.data = [];
+        /**
+         * Expansion mode: 'accordion' (single open) or 'multi' (multiple open)
+         */
+        this.mode = 'accordion';
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region STATE
+        /**
+         * Internal index of open items (not exposed)
+         */
+        this.internalOpenIndexes = [];
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Opens an item by its index (Public API)
+     * @param {number} index Index of the item to open
+     */
+    async open(index) {
+        this.toggleItem(index, true);
+    }
+    /**
+     * Closes an item by its index (Public API)
+     * @param {number} index Index of the item to close
+     */
+    async close(index) {
+        this.toggleItem(index, false);
+    }
+    /**
+     * Toggles an item's state (internal)
+     * @param {number} index Item index
+     * @param {boolean} [forceOpen] Force open (true) or close (false)
+     */
+    toggleItem(index, forceOpen) {
+        let openIndexes = this.openIndexes !== undefined
+            ? [...this.openIndexes]
+            : [...(this.internalOpenIndexes || [])];
+        const isOpen = openIndexes.includes(index);
+        if (this.mode === 'accordion') {
+            openIndexes = forceOpen === false || isOpen ? [] : [index];
+        }
+        else {
+            if (forceOpen === false) {
+                openIndexes = openIndexes.filter(i => i !== index);
+            }
+            else if (!isOpen) {
+                openIndexes.push(index);
+            }
+        }
+        this.internalOpenIndexes = openIndexes;
+        this.openChanged.emit({ openIndexes });
+        if (this.openIndexes !== undefined) {
+            this.openIndexes =
+                this.mode === 'accordion'
+                    ? [openIndexes[0]].filter(x => x !== undefined)
+                    : [...openIndexes];
+        }
+        // Update child elements state - for both data and slot usage
+        this.updateChildrenState();
+    }
+    /**
+     * Updates the open state of child elements based on internalOpenIndexes
+     */
+    async updateChildrenState() {
+        // Force a re-render by updating the state
+        this.internalOpenIndexes = [...(this.internalOpenIndexes || [])];
+    }
+    /**
+     * Listens to itemToggle events from nv-accordion-item elements
+     * @param {CustomEvent<boolean>} event Event emitted by nv-accordion-item
+     */
+    onItemToggle(event) {
+        // Find the index of the item that emitted the event
+        const items = Array.from(this.el.querySelectorAll('nv-accordion-item'));
+        const targetItem = event.target;
+        const index = items.indexOf(targetItem);
+        if (index !== -1) {
+            // If the event comes from an item that is opening, handle accordion mode
+            if (event.detail === true) {
+                if (this.mode === 'accordion') {
+                    // Close all other items
+                    items.forEach((item, i) => {
+                        if (i !== index && item.open) {
+                            item.open = false;
+                        }
+                    });
+                    this.internalOpenIndexes = [index];
+                }
+                else {
+                    // Add index to internalOpenIndexes if not already present
+                    if (!this.internalOpenIndexes.includes(index)) {
+                        this.internalOpenIndexes = [...this.internalOpenIndexes, index];
+                    }
+                }
+            }
+            else {
+                // If the item is closing, remove it from internalOpenIndexes
+                this.internalOpenIndexes = this.internalOpenIndexes.filter(i => i !== index);
+            }
+            // Emit openChanged event
+            this.openChanged.emit({ openIndexes: this.internalOpenIndexes });
+            if (this.openIndexes !== undefined) {
+                this.openIndexes =
+                    this.mode === 'accordion'
+                        ? [this.internalOpenIndexes[0]].filter(x => x !== undefined)
+                        : [...this.internalOpenIndexes];
+            }
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region WATCHERS
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        if (this.openIndexes !== undefined) {
+            this.internalOpenIndexes = [...this.openIndexes];
+        }
+    }
+    componentDidLoad() {
+        // If using direct child elements, initialize their state
+        if (!this.data || this.data.length === 0) {
+            this.updateChildrenState();
+        }
+    }
+    componentWillUpdate() {
+        if (this.openIndexes !== undefined) {
+            this.internalOpenIndexes = [...this.openIndexes];
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: 'a6cb21b274024a00e60e0d0db780f25fab6e5bc2', role: "list", class: "nv-accordion" }, this.data && this.data.length > 0 ? (this.data.map((item, i) => {
+            var _a;
+            return (h("nv-accordion-item", { key: (_a = item.id) !== null && _a !== void 0 ? _a : i, itemTitle: item.title, disabled: item.disabled, open: (this.internalOpenIndexes || []).includes(i) }, item.subtitle ? (h("div", { slot: "header" }, h("div", { class: "nv-accordion-item__header-content" }, h("span", { class: "nv-accordion-item__title" }, item.title), h("span", { class: "nv-accordion-item__subtitle" }, item.subtitle)))) : null, h("div", { slot: "content" }, item.content), item.footer && h("div", { slot: "footer" }, item.footer)));
+        })) : (h("slot", null))));
+    }
+    get el() { return getElement(this); }
+};
+NvAccordion.style = NvAccordionStyle0;
+
+export { NvAccordion as nv_accordion };
+
+//# sourceMappingURL=nv-accordion.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"nv-accordion.entry.js","mappings":"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","names":[],"sources":["src/components/nv-accordion/styles/nv-accordion.scss?tag=nv-accordion","src/components/nv-accordion/nv-accordion.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-accordion {\n  @include accordion-root();\n\n  .nv-accordion__footer {\n    @include accordion-footer();\n\n    &:empty {\n      @include accordion-footer-empty();\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Method,\n  Listen,\n  Element,\n} from '@stencil/core';\n\n/**\n * @slot default - Slot for custom content (optional, ignored if data is provided)\n */\n@Component({\n  tag: 'nv-accordion',\n  styleUrl: 'styles/nv-accordion.scss',\n  shadow: false,\n})\nexport class NvAccordion {\n  /****************************************************************************/\n  //#region PROPERTIES\n  /**\n   * Data to display as a list of items (title, subtitle, content).\n   */\n  @Prop({ reflect: false })\n  readonly data: {\n    /** Unique identifier of the item */\n    id: string;\n    /** Item title */\n    title: string;\n    /** Optional subtitle */\n    subtitle?: string;\n    /** Main content */\n    content: string;\n    /** Optional footer */\n    footer?: string;\n    /** Disabled state */\n    disabled?: boolean;\n  }[] = [];\n\n  /**\n   * Expansion mode: 'accordion' (single open) or 'multi' (multiple open)\n   */\n  @Prop({ reflect: true })\n  readonly mode: 'accordion' | 'multi' = 'accordion';\n\n  /**\n   * Index of open items (external control possible)\n   */\n  @Prop({ reflect: false, mutable: true })\n  openIndexes?: number[];\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region STATE\n  /**\n   * Internal index of open items (not exposed)\n   */\n  @State()\n  internalOpenIndexes: number[] = [];\n\n  /**\n   * Reference to host element to access children\n   */\n  @Element() el!: HTMLNvAccordionElement;\n  //#endregion STATE\n  /****************************************************************************/\n  //#region EVENTS\n  /**\n   * Event emitted when an item's open state changes\n   */\n  @Event()\n  openChanged: EventEmitter<{\n    /** Index of open items */\n    openIndexes: number[];\n  }>;\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n  /**\n   * Opens an item by its index (Public API)\n   * @param {number} index Index of the item to open\n   */\n  @Method()\n  async open(index: number) {\n    this.toggleItem(index, true);\n  }\n  /**\n   * Closes an item by its index (Public API)\n   * @param {number} index Index of the item to close\n   */\n  @Method()\n  async close(index: number) {\n    this.toggleItem(index, false);\n  }\n  /**\n   * Toggles an item's state (internal)\n   * @param {number} index Item index\n   * @param {boolean} [forceOpen] Force open (true) or close (false)\n   */\n  private toggleItem(index: number, forceOpen?: boolean) {\n    let openIndexes =\n      this.openIndexes !== undefined\n        ? [...this.openIndexes]\n        : [...(this.internalOpenIndexes || [])];\n    const isOpen = openIndexes.includes(index);\n    if (this.mode === 'accordion') {\n      openIndexes = forceOpen === false || isOpen ? [] : [index];\n    } else {\n      if (forceOpen === false) {\n        openIndexes = openIndexes.filter(i => i !== index);\n      } else if (!isOpen) {\n        openIndexes.push(index);\n      }\n    }\n    this.internalOpenIndexes = openIndexes;\n    this.openChanged.emit({ openIndexes });\n    if (this.openIndexes !== undefined) {\n      this.openIndexes =\n        this.mode === 'accordion'\n          ? [openIndexes[0]].filter(x => x !== undefined)\n          : [...openIndexes];\n    }\n\n    // Update child elements state - for both data and slot usage\n    this.updateChildrenState();\n  }\n\n  /**\n   * Updates the open state of child elements based on internalOpenIndexes\n   */\n  private async updateChildrenState() {\n    // Force a re-render by updating the state\n    this.internalOpenIndexes = [...(this.internalOpenIndexes || [])];\n  }\n\n  /**\n   * Listens to itemToggle events from nv-accordion-item elements\n   * @param {CustomEvent<boolean>} event Event emitted by nv-accordion-item\n   */\n  @Listen('itemToggle')\n  onItemToggle(event: CustomEvent<boolean>) {\n    // Find the index of the item that emitted the event\n    const items = Array.from(\n      this.el.querySelectorAll('nv-accordion-item'),\n    ) as HTMLNvAccordionItemElement[];\n    const targetItem = event.target as HTMLNvAccordionItemElement;\n    const index = items.indexOf(targetItem);\n\n    if (index !== -1) {\n      // If the event comes from an item that is opening, handle accordion mode\n      if (event.detail === true) {\n        if (this.mode === 'accordion') {\n          // Close all other items\n          items.forEach((item, i) => {\n            if (i !== index && item.open) {\n              item.open = false;\n            }\n          });\n          this.internalOpenIndexes = [index];\n        } else {\n          // Add index to internalOpenIndexes if not already present\n          if (!this.internalOpenIndexes.includes(index)) {\n            this.internalOpenIndexes = [...this.internalOpenIndexes, index];\n          }\n        }\n      } else {\n        // If the item is closing, remove it from internalOpenIndexes\n        this.internalOpenIndexes = this.internalOpenIndexes.filter(\n          i => i !== index,\n        );\n      }\n\n      // Emit openChanged event\n      this.openChanged.emit({ openIndexes: this.internalOpenIndexes });\n      if (this.openIndexes !== undefined) {\n        this.openIndexes =\n          this.mode === 'accordion'\n            ? [this.internalOpenIndexes[0]].filter(x => x !== undefined)\n            : [...this.internalOpenIndexes];\n      }\n    }\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n  componentWillLoad() {\n    if (this.openIndexes !== undefined) {\n      this.internalOpenIndexes = [...this.openIndexes];\n    }\n  }\n\n  componentDidLoad() {\n    // If using direct child elements, initialize their state\n    if (!this.data || this.data.length === 0) {\n      this.updateChildrenState();\n    }\n  }\n\n  componentWillUpdate() {\n    if (this.openIndexes !== undefined) {\n      this.internalOpenIndexes = [...this.openIndexes];\n    }\n  }\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host role=\"list\" class=\"nv-accordion\">\n        {this.data && this.data.length > 0 ? (\n          this.data.map((item, i) => (\n            <nv-accordion-item\n              key={item.id ?? i}\n              itemTitle={item.title}\n              disabled={item.disabled}\n              open={(this.internalOpenIndexes || []).includes(i)}\n            >\n              {item.subtitle ? (\n                <div slot=\"header\">\n                  <div class=\"nv-accordion-item__header-content\">\n                    <span class=\"nv-accordion-item__title\">{item.title}</span>\n                    <span class=\"nv-accordion-item__subtitle\">\n                      {item.subtitle}\n                    </span>\n                  </div>\n                </div>\n              ) : null}\n              <div slot=\"content\">{item.content}</div>\n              {item.footer && <div slot=\"footer\">{item.footer}</div>}\n            </nv-accordion-item>\n          ))\n        ) : (\n          <slot></slot>\n        )}\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"],"version":3}

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

@@ -1,8 +1,10 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a1936cd0.js';
 import { c as clsx } from './clsx-297c1ffe.js';
 import { F as FeedbackColors } from './constants-4faa1fae.js';
-import { u as useCollapse, t as timeline } from './timeline.animation-1b88f052.js';
-import { u as useFade } from './fade.animation-2a077983.js';
+import { u as useCollapse } from './collapse.animation-16e3af45.js';
+import { u as useFade } from './fade.animation-71e8e34c.js';
+import './stylefire.es-74da334a.js';
+import { t as timeline } from './timeline.animation-adf35ecb.js';
 
 const nvAlertCss = "nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:\"TT Norms Pro\", \"Montserrat\", sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.hidden{display:none !important}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}";
 const NvAlertStyle0 = nvAlertCss;
@@ -158,7 +160,7 @@ const NvAlert = class {
     //#region RENDER
     render() {
         var _a;
-        return (h(Host, { key: '8c775b0d81d4f6f82421b667925e1ceafead5b2d', role: "alert", class: clsx('root', `feedback-${this.feedback}`) }, h("nv-icon", { key: 'e42f28e360d600c9863fb7f11eab2a1c501bb6ce', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), h("div", { key: '87f7d65ea812afda0ce6ba6ace6e443dd53263da', class: "content" }, this.heading && h("p", { key: '8150784a2663d47410fd6b92ca678f756f086f28', class: "heading" }, this.heading), this.message && h("p", { key: '27f029f2ded81f82e260dc0f2087d46ba5cd7e62', class: "message" }, this.message), h("slot", { key: '3256f379c6d7ea5dab9d284b9229ceffb55e7443' })), this.dismissible && (h("button", { key: '6b7f333b26ab17c2c523a3c9933599176a9152c0', class: "close", type: "button", onClick: this.handleDismiss }, h("nv-icon", { key: 'badcf4153b6add49042b91415e010f662a042e61', name: "x", size: "sm" })))));
+        return (h(Host, { key: 'f0e75ac2c38aced1dcf76cb1d5f03becefbee71d', role: "alert", class: clsx('root', `feedback-${this.feedback}`) }, h("nv-icon", { key: '19f7fcf452d62277ab436acd20c285f44fbaecd4', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), h("div", { key: '8e656ffd0bce63bd33d92b97df21389af265e182', class: "content" }, this.heading && h("p", { key: '0aa928e8ee8605d735f890bc67128563ce3ad379', class: "heading" }, this.heading), this.message && h("p", { key: '690d9928646d25a636b2bb04eb65eee40c402f52', class: "message" }, this.message), h("slot", { key: '86309f093688dbb81ff805f1c9137b200541e905' })), this.dismissible && (h("button", { key: '387695ff1e23a7e289cf58c51042ccc561d451ad', class: "close", type: "button", onClick: this.handleDismiss }, h("nv-icon", { key: '788b99b4c56fc8c936a67ac48d2db37fdcca7631', name: "x", size: "sm" })))));
     }
     get ref() { return getElement(this); }
     static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"nv-alert.entry.js","mappings":"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","names":[],"sources":["src/components/nv-alert/nv-alert.scss?tag=nv-alert","src/components/nv-alert/nv-alert.tsx"],"sourcesContent":["@use \"sass:map\";\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$alert-feedback: (\"information\", \"warning\", \"error\", \"success\", \"neutral\");\n\n/* Define maps for feedback-related variables */\n$components-alert-background: (\n  \"information\": var(--components-alert-information-background),\n  \"warning\": var(--components-alert-warning-background),\n  \"error\": var(--components-alert-error-background),\n  \"success\": var(--components-alert-success-background),\n  \"neutral\": var(--components-alert-neutral-background)\n);\n\n$components-alert-border: (\n  \"information\": var(--components-alert-information-border),\n  \"warning\": var(--components-alert-warning-border),\n  \"error\": var(--components-alert-error-border),\n  \"success\": var(--components-alert-success-border),\n  \"neutral\": var(--components-alert-neutral-border)\n);\n\n$components-alert-icon: (\n  \"information\": var(--components-alert-information-icon),\n  \"warning\": var(--components-alert-warning-icon),\n  \"error\": var(--components-alert-error-icon),\n  \"success\": var(--components-alert-success-icon),\n  \"neutral\": var(--components-alert-neutral-icon)\n);\n\n@mixin root-styles() {\n  display: flex !important; // override the display: none in [hidden] css\n  align-items: flex-start;\n  position: relative;\n  gap: var(--alert-gap-x);\n  border-radius: var(--alert-radius);\n  font-family: \"TT Norms Pro\", \"Montserrat\", sans-serif;\n}\n\n@mixin content-styles() {\n  display: flex;\n  padding: var(--alert-padding);\n  padding-left: 0;\n  flex-direction: column;\n  gap: var(--alert-gap-y);\n}\n\n@mixin feedback-color($feedback-type) {\n  background-color: map.get($components-alert-background, $feedback-type);\n  border: 1px solid map.get($components-alert-border, $feedback-type) !important;\n}\n\n@mixin icon-color($feedback-type) {\n  color: map.get($components-alert-icon, $feedback-type);\n}\n\n@mixin icon-position {\n  margin-left: var(--alert-icon-position-x);\n  margin-top: var(--alert-icon-position-y);\n}\n\nnv-alert {\n  @include root-styles();\n\n  & > nv-icon {\n    @include icon-position();\n  }\n\n  &.hidden {\n    display: none!important;\n  }\n\n  @each $feedback in $alert-feedback {\n    &.feedback-#{$feedback} {\n      @include feedback-color($feedback);\n      & > .close {\n        @include focus-ring(map.get($components-alert-border, $feedback));\n      }\n    }\n  }\n\n  @each $feedback in $alert-feedback {\n    & > nv-icon.icon-#{$feedback} {\n      @include icon-color($feedback);\n    }\n  }\n\n  & > .content {\n    @include content-styles();\n\n    & > .heading {\n      color: var(--components-alert-content-title);\n      font-size: var(--alert-heading-font-size);\n      line-height: var(--alert-heading-line-height);\n      font-weight: var(--alert-heading-font-weight);\n    }\n    & > .message {\n      color: var(--components-alert-content-description);\n      font-size: var(--alert-message-font-size);\n      line-height: var(--alert-message-line-height);\n    }\n  }\n  & > .close {\n    border-radius: var(--alert-radius);\n    position: absolute;\n    display: flex;\n    top: var(--alert-icon-position-y);\n    right: var(--alert-icon-position-x);\n    padding: 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n  DeprecatedSemanticColors,\n  FeedbackColors,\n} from '../../utils/constants';\nimport { useCollapse, useFade, timeline } from '../../animations';\n\n/**\n * @slot default - Use this slot to insert HTML into the alert content.\n */\n@Component({\n  tag: 'nv-alert',\n  styleUrl: 'nv-alert.scss',\n  shadow: false,\n})\nexport class NvAlert {\n  @Element() ref: HTMLNvAlertElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Defines color of the alert.\n   * @deprecated use feedback instead.\n   */\n  @Prop({ reflect: true })\n  readonly color: `${DeprecatedSemanticColors}`;\n\n  componentWillRender() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Specifies the alert type which determines the color and default icon.\n   */\n  @Prop({ reflect: true, mutable: true })\n  feedback: `${FeedbackColors}` = 'information';\n\n  /**\n   * Main content of the alert. For more complex content, use the default slot\n   * instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Short and concise text for the alert title.\n   */\n  @Prop({ reflect: true })\n  readonly heading: string;\n\n  /**\n   * Icon associated with the alert, defaults vary based on the feedback type.\n   */\n  @Prop({ reflect: true })\n  readonly icon: string;\n\n  /**\n   * Allows the alert to be dismissed via a close button (x). The alert is not\n   * dismissible unless explicitly enabled.\n   */\n  @Prop({ reflect: true })\n  readonly dismissible: boolean = false;\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   * Controls the visibility of the alert. 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\n  /**\n   * When true, the alert will not animate when it is hidden or shown.\n   */\n  @Prop({ reflect: true })\n  readonly hasNoAnimations: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   * @bind hidden\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the close button is clicked.\n   */\n  @Event()\n  closeClicked: EventEmitter<void>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Used for 2 way binding with the hidden property.\n   * Triggers open and close animations.\n   * @param {boolean} hidden - The visibility state of the alert.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n\n    await this.updateVisibility(hidden);\n    this.hiddenChangedComplete.emit(hidden);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the dismissal of the alert, considering the preventAutoClose prop.\n   * Passes the original event from the close button to the close event detail.\n   * @param {MouseEvent} originalEvent - The original event from the close button.\n   */\n  private handleDismiss = () => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit();\n  };\n\n  /**\n   * By default an icon is linked to the feedback type\n   * @returns {string} - The default icon name.\n   */\n  private getDefaultIcon = () => {\n    switch (this.feedback) {\n      case FeedbackColors.Warning:\n        return 'alert-circle';\n      case FeedbackColors.Information:\n        return 'info-circle';\n      case FeedbackColors.Success:\n        return 'circle-check';\n      case FeedbackColors.Error:\n        return 'alert-circle';\n      case FeedbackColors.Neutral:\n        return 'help';\n      default:\n        return 'info-circle';\n    }\n  };\n\n  /**\n   * Updates the visibility state of the alert with optional animations\n   * @param {boolean} hidden - Whether the alert should be hidden\n   */\n  private async updateVisibility(hidden: boolean) {\n    if (this.hasNoAnimations) {\n      this.toggleHiddenClass(hidden);\n      return;\n    }\n\n    const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n    if (hidden) {\n      await timeline(fadeOut, collapse).start();\n      this.toggleHiddenClass(true);\n    } else {\n      this.toggleHiddenClass(false);\n      await timeline(expand, fadeIn).start();\n    }\n  }\n\n  /**\n   * Toggles the 'hidden' class on the element\n   * @param {boolean} hidden - Whether to add or remove the hidden class\n   */\n  private toggleHiddenClass(hidden: boolean) {\n    this.ref.classList.toggle('hidden', hidden);\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\n    }\n\n    if (this.hidden) {\n      this.ref.classList.add('hidden');\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"alert\" class={clsx('root', `feedback-${this.feedback}`)}>\n        <nv-icon\n          name={this.icon ?? this.getDefaultIcon()}\n          class={`icon-${this.feedback}`}\n          size=\"md\"\n        ></nv-icon>\n\n        <div class=\"content\">\n          {this.heading && <p class=\"heading\">{this.heading}</p>}\n\n          {this.message && <p class=\"message\">{this.message}</p>}\n\n          <slot></slot>\n        </div>\n\n        {this.dismissible && (\n          <button class=\"close\" type=\"button\" onClick={this.handleDismiss}>\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"nv-alert.entry.js","mappings":";;;;;;;;AAAA,MAAM,UAAU,GAAG,myHAAmyH,CAAC;AACvzH,sBAAe,UAAU;;MCyBZ,OAAO;IALpB;;;;;;;;;;;QA4CE,aAAQ,GAAwB,aAAa,CAAC;;;;;QA0BrC,gBAAW,GAAY,KAAK,CAAC;;;;;QAO7B,qBAAgB,GAAY,KAAK,CAAC;;;;QAM3C,WAAM,GAAY,KAAK,CAAC;;;;QAMf,oBAAe,GAAY,KAAK,CAAC;;;;;;;;;QAoDlC,kBAAa,GAAG;YACtB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;gBAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;aACpB;YAED,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;SAC1B,CAAC;;;;;QAMM,mBAAc,GAAG;YACvB,QAAQ,IAAI,CAAC,QAAQ;gBACnB,KAAK,cAAc,CAAC,OAAO;oBACzB,OAAO,cAAc,CAAC;gBACxB,KAAK,cAAc,CAAC,WAAW;oBAC7B,OAAO,aAAa,CAAC;gBACvB,KAAK,cAAc,CAAC,OAAO;oBACzB,OAAO,cAAc,CAAC;gBACxB,KAAK,cAAc,CAAC,KAAK;oBACvB,OAAO,cAAc,CAAC;gBACxB,KAAK,cAAc,CAAC,OAAO;oBACzB,OAAO,MAAM,CAAC;gBAChB;oBACE,OAAO,aAAa,CAAC;aACxB;SACF,CAAC;KAyFH;IA/OC,mBAAmB;QACjB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,QAAQ,IAAI,CAAC,KAAK;gBAChB,KAAK,SAAqC;oBACxC,IAAI,CAAC,QAAQ,GAAG,SAA2B,CAAC;oBAC5C,MAAM;gBACR,KAAK,WAAuC;oBAC1C,IAAI,CAAC,QAAQ,GAAG,aAA+B,CAAC;oBAChD,MAAM;gBACR,KAAK,SAAqC;oBACxC,IAAI,CAAC,QAAQ,GAAG,aAA+B,CAAC;oBAChD,MAAM;gBACR;oBACE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAuB,CAAC;aAChD;SACF;KACF;;;;;;;;;IA2FD,MAAM,kBAAkB,CAAC,MAAe;QACtC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAEhC,MAAM,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;QACpC,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACzC;;;;;IA4CO,MAAM,gBAAgB,CAAC,MAAe;QAC5C,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;YAC/B,OAAO;SACR;QAED,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;QACjE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;QAEtE,IAAI,MAAM,EAAE;YACV,MAAM,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;YAC1C,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;SAC9B;aAAM;YACL,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;YAC9B,MAAM,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC;SACxC;KACF;;;;;IAMO,iBAAiB,CAAC,MAAe;QACvC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;KAC7C;;;;IAMD,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,QAAQ,IAAI,CAAC,KAAK;gBAChB,KAAK,SAAqC;oBACxC,IAAI,CAAC,QAAQ,GAAG,SAA2B,CAAC;oBAC5C,MAAM;gBACR,KAAK,WAAuC;oBAC1C,IAAI,CAAC,QAAQ,GAAG,aAA+B,CAAC;oBAChD,MAAM;gBACR,KAAK,SAAqC;oBACxC,IAAI,CAAC,QAAQ,GAAG,aAA+B,CAAC;oBAChD,MAAM;gBACR;oBACE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAuB,CAAC;aAChD;SACF;QAED,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;SAClC;KACF;;;;IAMD,MAAM;;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,YAAY,IAAI,CAAC,QAAQ,EAAE,CAAC,IACjE,gEACE,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,IAAI,CAAC,cAAc,EAAE,EACxC,KAAK,EAAE,QAAQ,IAAI,CAAC,QAAQ,EAAE,EAC9B,IAAI,EAAC,IAAI,GACA,EAEX,4DAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,IAAI,0DAAG,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK,EAErD,IAAI,CAAC,OAAO,IAAI,0DAAG,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK,EAEtD,8DAAa,CACT,EAEL,IAAI,CAAC,WAAW,KACf,+DAAQ,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IAC7D,gEAAS,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,GAAG,CACvB,CACV,CACI,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/nv-alert/nv-alert.scss?tag=nv-alert","src/components/nv-alert/nv-alert.tsx"],"sourcesContent":["@use \"sass:map\";\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$alert-feedback: (\"information\", \"warning\", \"error\", \"success\", \"neutral\");\n\n/* Define maps for feedback-related variables */\n$components-alert-background: (\n  \"information\": var(--components-alert-information-background),\n  \"warning\": var(--components-alert-warning-background),\n  \"error\": var(--components-alert-error-background),\n  \"success\": var(--components-alert-success-background),\n  \"neutral\": var(--components-alert-neutral-background)\n);\n\n$components-alert-border: (\n  \"information\": var(--components-alert-information-border),\n  \"warning\": var(--components-alert-warning-border),\n  \"error\": var(--components-alert-error-border),\n  \"success\": var(--components-alert-success-border),\n  \"neutral\": var(--components-alert-neutral-border)\n);\n\n$components-alert-icon: (\n  \"information\": var(--components-alert-information-icon),\n  \"warning\": var(--components-alert-warning-icon),\n  \"error\": var(--components-alert-error-icon),\n  \"success\": var(--components-alert-success-icon),\n  \"neutral\": var(--components-alert-neutral-icon)\n);\n\n@mixin root-styles() {\n  display: flex !important; // override the display: none in [hidden] css\n  align-items: flex-start;\n  position: relative;\n  gap: var(--alert-gap-x);\n  border-radius: var(--alert-radius);\n  font-family: \"TT Norms Pro\", \"Montserrat\", sans-serif;\n}\n\n@mixin content-styles() {\n  display: flex;\n  padding: var(--alert-padding);\n  padding-left: 0;\n  flex-direction: column;\n  gap: var(--alert-gap-y);\n}\n\n@mixin feedback-color($feedback-type) {\n  background-color: map.get($components-alert-background, $feedback-type);\n  border: 1px solid map.get($components-alert-border, $feedback-type) !important;\n}\n\n@mixin icon-color($feedback-type) {\n  color: map.get($components-alert-icon, $feedback-type);\n}\n\n@mixin icon-position {\n  margin-left: var(--alert-icon-position-x);\n  margin-top: var(--alert-icon-position-y);\n}\n\nnv-alert {\n  @include root-styles();\n\n  & > nv-icon {\n    @include icon-position();\n  }\n\n  &.hidden {\n    display: none!important;\n  }\n\n  @each $feedback in $alert-feedback {\n    &.feedback-#{$feedback} {\n      @include feedback-color($feedback);\n      & > .close {\n        @include focus-ring(map.get($components-alert-border, $feedback));\n      }\n    }\n  }\n\n  @each $feedback in $alert-feedback {\n    & > nv-icon.icon-#{$feedback} {\n      @include icon-color($feedback);\n    }\n  }\n\n  & > .content {\n    @include content-styles();\n\n    & > .heading {\n      color: var(--components-alert-content-title);\n      font-size: var(--alert-heading-font-size);\n      line-height: var(--alert-heading-line-height);\n      font-weight: var(--alert-heading-font-weight);\n    }\n    & > .message {\n      color: var(--components-alert-content-description);\n      font-size: var(--alert-message-font-size);\n      line-height: var(--alert-message-line-height);\n    }\n  }\n  & > .close {\n    border-radius: var(--alert-radius);\n    position: absolute;\n    display: flex;\n    top: var(--alert-icon-position-y);\n    right: var(--alert-icon-position-x);\n    padding: 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n  DeprecatedSemanticColors,\n  FeedbackColors,\n} from '../../utils/constants';\nimport { useCollapse, useFade, timeline } from '../../animations';\n\n/**\n * @slot default - Use this slot to insert HTML into the alert content.\n */\n@Component({\n  tag: 'nv-alert',\n  styleUrl: 'nv-alert.scss',\n  shadow: false,\n})\nexport class NvAlert {\n  @Element() ref: HTMLNvAlertElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Defines color of the alert.\n   * @deprecated use feedback instead.\n   */\n  @Prop({ reflect: true })\n  readonly color: `${DeprecatedSemanticColors}`;\n\n  componentWillRender() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Specifies the alert type which determines the color and default icon.\n   */\n  @Prop({ reflect: true, mutable: true })\n  feedback: `${FeedbackColors}` = 'information';\n\n  /**\n   * Main content of the alert. For more complex content, use the default slot\n   * instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Short and concise text for the alert title.\n   */\n  @Prop({ reflect: true })\n  readonly heading: string;\n\n  /**\n   * Icon associated with the alert, defaults vary based on the feedback type.\n   */\n  @Prop({ reflect: true })\n  readonly icon: string;\n\n  /**\n   * Allows the alert to be dismissed via a close button (x). The alert is not\n   * dismissible unless explicitly enabled.\n   */\n  @Prop({ reflect: true })\n  readonly dismissible: boolean = false;\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   * Controls the visibility of the alert. 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\n  /**\n   * When true, the alert will not animate when it is hidden or shown.\n   */\n  @Prop({ reflect: true })\n  readonly hasNoAnimations: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   * @bind hidden\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the close button is clicked.\n   */\n  @Event()\n  closeClicked: EventEmitter<void>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Used for 2 way binding with the hidden property.\n   * Triggers open and close animations.\n   * @param {boolean} hidden - The visibility state of the alert.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n\n    await this.updateVisibility(hidden);\n    this.hiddenChangedComplete.emit(hidden);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the dismissal of the alert, considering the preventAutoClose prop.\n   * Passes the original event from the close button to the close event detail.\n   * @param {MouseEvent} originalEvent - The original event from the close button.\n   */\n  private handleDismiss = () => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit();\n  };\n\n  /**\n   * By default an icon is linked to the feedback type\n   * @returns {string} - The default icon name.\n   */\n  private getDefaultIcon = () => {\n    switch (this.feedback) {\n      case FeedbackColors.Warning:\n        return 'alert-circle';\n      case FeedbackColors.Information:\n        return 'info-circle';\n      case FeedbackColors.Success:\n        return 'circle-check';\n      case FeedbackColors.Error:\n        return 'alert-circle';\n      case FeedbackColors.Neutral:\n        return 'help';\n      default:\n        return 'info-circle';\n    }\n  };\n\n  /**\n   * Updates the visibility state of the alert with optional animations\n   * @param {boolean} hidden - Whether the alert should be hidden\n   */\n  private async updateVisibility(hidden: boolean) {\n    if (this.hasNoAnimations) {\n      this.toggleHiddenClass(hidden);\n      return;\n    }\n\n    const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n    if (hidden) {\n      await timeline(fadeOut, collapse).start();\n      this.toggleHiddenClass(true);\n    } else {\n      this.toggleHiddenClass(false);\n      await timeline(expand, fadeIn).start();\n    }\n  }\n\n  /**\n   * Toggles the 'hidden' class on the element\n   * @param {boolean} hidden - Whether to add or remove the hidden class\n   */\n  private toggleHiddenClass(hidden: boolean) {\n    this.ref.classList.toggle('hidden', hidden);\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\n    }\n\n    if (this.hidden) {\n      this.ref.classList.add('hidden');\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"alert\" class={clsx('root', `feedback-${this.feedback}`)}>\n        <nv-icon\n          name={this.icon ?? this.getDefaultIcon()}\n          class={`icon-${this.feedback}`}\n          size=\"md\"\n        ></nv-icon>\n\n        <div class=\"content\">\n          {this.heading && <p class=\"heading\">{this.heading}</p>}\n\n          {this.message && <p class=\"message\">{this.message}</p>}\n\n          <slot></slot>\n        </div>\n\n        {this.dismissible && (\n          <button class=\"close\" type=\"button\" onClick={this.handleDismiss}>\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

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

@@ -56,7 +56,7 @@ const NvAvatar = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'aa00ea05df513c899c6ed43fd0307178e98b6145', class: clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (h("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (h("slot", { name: "icon" }, h("nv-icon", { name: "user" })))));
+        return (h(Host, { key: '127d470eb9121f611f9e18f029ab9ef15a4a49df', class: clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (h("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (h("slot", { name: "icon" }, h("nv-icon", { name: "user" })))));
     }
 };
 NvAvatar.style = NvAvatarStyle0;

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

@@ -1,7 +1,9 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a1936cd0.js';
 import { c as clsx } from './clsx-297c1ffe.js';
-import { u as useCollapse, t as timeline } from './timeline.animation-1b88f052.js';
-import { u as useFade } from './fade.animation-2a077983.js';
+import { u as useCollapse } from './collapse.animation-16e3af45.js';
+import { u as useFade } from './fade.animation-71e8e34c.js';
+import './stylefire.es-74da334a.js';
+import { t as timeline } from './timeline.animation-adf35ecb.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)}";
 const NvBadgeStyle0 = nvBadgeCss;
@@ -129,12 +131,12 @@ const NvBadge = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'cde39aa20bdbc6529d317a1f9f0c04f7bf79112e', class: clsx(`badge-${this.color}`, {
+        return (h(Host, { key: '435c5bb1f565c8bd95cca5c6828157c80f60aa39', class: clsx(`badge-${this.color}`, {
                 'has-close': this.dismissible,
                 'with-gap': this.dismissible || this.label,
                 'visually-hidden': this._isHidden,
                 'is-icon-only': this.isIconOnly,
-            }) }, h("slot", { key: 'cd0ebe919619431f096fe87e6e9412cbed88e467', name: "leading-icon" }, this.leadIcon && h("nv-icon", { key: 'b010613a9ffe4b9ae027e128ba519c43d4211d7d', name: this.leadIcon, size: "sm" })), h("span", { key: '5035aa8d35272f716442731b9493483835e083c6', class: clsx({ 'visually-hidden': this.isIconOnly }) }, this.label, h("slot", { key: '81a475c0081911d8b4606450ecdf085a4f7e2853' })), this.dismissible && (h("button", { key: '402fe040a11cae0974ffa911b81f781230fd0516', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: '6f32fa2ae87170963c22bd35cebcf18500426570', name: "x", size: "sm" })))));
+            }) }, h("slot", { key: '271dc833471e026af5088f48227639682e661e97', name: "leading-icon" }, this.leadIcon && h("nv-icon", { key: 'e578eabf4c5a09e61e28c3839b943804acdf88e8', name: this.leadIcon, size: "sm" })), h("span", { key: '24d16a21b2b4499be712f9b747c9ab63c5e6ca0c', class: clsx({ 'visually-hidden': this.isIconOnly }) }, this.label, h("slot", { key: '3e3827620e6ade8be256ce7dd0b8bb949f36f2d5' })), this.dismissible && (h("button", { key: '90ed9ec1b71815554b963b0eafeb5536578700cf', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: 'df426e5d88c2bf02e7aa83c179c05db4795f03db', name: "x", size: "sm" })))));
     }
     get ref() { return getElement(this); }
     static get watchers() { return {
@@ -191,7 +193,7 @@ const NvFielddropdownitemcheck = class {
         };
     }
     render() {
-        return (h(Host, { key: '7230c0b30bfd5be59114e025748708663f2f16ec', onClick: this.handleClick }, h("nv-fieldcheckbox", { key: 'f71e4add967442b397b6c36dff1653a2bd0ad91d', checked: this.checked, name: this.label || this.value, label: this.label || this.value, "label-placement": "after", description: this.description, disabled: this.disabled, tabindex: "-1", role: "option", onCheckedChanged: this.onFieldcheckboxChanged })));
+        return (h(Host, { key: '82abe79dd061f60e380f033027f799121769f89e', onClick: this.handleClick }, h("nv-fieldcheckbox", { key: '505181c56faacb09e55c428d91287d96e1c3b72a', checked: this.checked, name: this.label || this.value, label: this.label || this.value, "label-placement": "after", description: this.description, disabled: this.disabled, tabindex: "-1", role: "option", onCheckedChanged: this.onFieldcheckboxChanged }, h("slot", { key: '95a53b7d4ec735fd3256505b57e2a497b475f511' }), h("slot", { key: '137d5e2b3046417bbc90c0bd2dd10b846d1dfd53', name: "main" }), h("slot", { key: '47d4a73e401186b7bc7a18aaad82018f0ccc1e2f', name: "label" }), h("slot", { key: 'ff5c752d386c282635a97ad2bcb8858571aff7e9', name: "description" }))));
     }
     get el() { return getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"nv-badge.nv-fielddropdownitemcheck.entry.js","mappings":"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","names":[],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.tsx","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.scss?tag=nv-fielddropdownitemcheck","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../nv-icon/styles/mixins' as icon;\n@use '../../styles/utils' as utils;\n@import '../../styles/focus-ring';\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-ring(\n      if(\n        str-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          type-of($color-key) == 'string' and not (str-length($color-key) <= 2)\n            and not\n            str-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() ref: 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()\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()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\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.ref, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.ref, { 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.ref);\n      const { setFadeOut } = useFade(this.ref);\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","nv-fielddropdownitemcheck {\n  slot-fb,\n  span {\n    all: unset;\n  }\n\n  cursor: pointer;\n  display: flex;\n  padding: var(--list-dropdown-item-padding-y)  var(--list-dropdown-item-padding-x);\n  border-radius: var(--list-dropdown-item-radius);\n\n  &:hover {\n    background-color: var(--components-list-dropdown-item-background-hover);\n  }\n}","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n} from '@stencil/core';\n\n@Component({\n  tag: 'nv-fielddropdownitemcheck',\n  styleUrl: 'nv-fielddropdownitemcheck.scss',\n  shadow: false,\n})\nexport class NvFielddropdownitemcheck {\n  @Element() el: HTMLNvFielddropdownitemcheckElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Indicates whether the checkbox is selected.\n   */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /**\n   * The value associated with this item.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * The label displayed alongside the checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * A description providing additional context or information about the\n   * checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly description?: string;\n\n  /**\n   * The group this item belongs to, if applicable.\n   */\n  @Prop({ reflect: true })\n  readonly group?: string;\n\n  /**\n   * Disables the item, preventing any user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when the checkbox is toggled.\n   * It provides details about the current state of the item.\n   */\n  @Event()\n  itemChecked: EventEmitter<{\n    /**\n     * The value associated with this item\n     */\n    value: string | undefined;\n    /**\n     * Whether the checkbox is currently checked\n     */\n    checked: boolean;\n    /**\n     * The group this item belongs to, if any\n     */\n    group?: string | undefined;\n  }>;\n\n  /**\n   * when the child <nv-fieldcheckbox> change its `checked` state,\n   * update `this.checked` and emit `itemChecked`.\n   * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.\n   */\n  private onFieldcheckboxChanged = (event: CustomEvent<boolean>) => {\n    if (this.disabled) return;\n    // NvFieldcheckbox has emitted checkedChanged\n    this.checked = event.detail; // get the new state\n    this.itemChecked.emit({\n      value: this.value,\n      checked: this.checked,\n      group: this.group,\n    });\n  };\n\n  /** Make sure the checkbox is checked when clicked anywhere in the item. */\n  private handleClick = () => {\n    if (this.disabled) return;\n    if (this.el.querySelector('input').checked) {\n      this.checked = false;\n    } else {\n      this.checked = true;\n    }\n  };\n\n  render() {\n    return (\n      <Host onClick={this.handleClick}>\n        <nv-fieldcheckbox\n          checked={this.checked}\n          name={this.label || this.value}\n          label={this.label || this.value}\n          label-placement=\"after\"\n          description={this.description}\n          disabled={this.disabled}\n          tabindex=\"-1\"\n          role=\"option\"\n          onCheckedChanged={this.onFieldcheckboxChanged}\n        ></nv-fieldcheckbox>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nv-badge.nv-fielddropdownitemcheck.entry.js","mappings":"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","names":[],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.tsx","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.scss?tag=nv-fielddropdownitemcheck","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../nv-icon/styles/mixins' as icon;\n@use '../../styles/utils' as utils;\n@import '../../styles/focus-ring';\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-ring(\n      if(\n        str-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          type-of($color-key) == 'string' and not (str-length($color-key) <= 2)\n            and not\n            str-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() ref: 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()\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()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\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.ref, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.ref, { 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.ref);\n      const { setFadeOut } = useFade(this.ref);\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","nv-fielddropdownitemcheck {\n  slot-fb,\n  span {\n    all: unset;\n  }\n\n  cursor: pointer;\n  display: flex;\n  padding: var(--list-dropdown-item-padding-y)  var(--list-dropdown-item-padding-x);\n  border-radius: var(--list-dropdown-item-radius);\n\n  &:hover {\n    background-color: var(--components-list-dropdown-item-background-hover);\n  }\n}","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n} from '@stencil/core';\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 */\n@Component({\n  tag: 'nv-fielddropdownitemcheck',\n  styleUrl: 'nv-fielddropdownitemcheck.scss',\n  shadow: false,\n})\nexport class NvFielddropdownitemcheck {\n  @Element() el: HTMLNvFielddropdownitemcheckElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Indicates whether the checkbox is selected.\n   */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /**\n   * The value associated with this item.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * The label displayed alongside the checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * A description providing additional context or information about the\n   * checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly description?: string;\n\n  /**\n   * The group this item belongs to, if applicable.\n   */\n  @Prop({ reflect: true })\n  readonly group?: string;\n\n  /**\n   * Disables the item, preventing any user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when the checkbox is toggled.\n   * It provides details about the current state of the item.\n   */\n  @Event()\n  itemChecked: EventEmitter<{\n    /**\n     * The value associated with this item\n     */\n    value: string | undefined;\n    /**\n     * Whether the checkbox is currently checked\n     */\n    checked: boolean;\n    /**\n     * The group this item belongs to, if any\n     */\n    group?: string | undefined;\n  }>;\n\n  /**\n   * when the child <nv-fieldcheckbox> change its `checked` state,\n   * update `this.checked` and emit `itemChecked`.\n   * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.\n   */\n  private onFieldcheckboxChanged = (event: CustomEvent<boolean>) => {\n    if (this.disabled) return;\n    // NvFieldcheckbox has emitted checkedChanged\n    this.checked = event.detail; // get the new state\n    this.itemChecked.emit({\n      value: this.value,\n      checked: this.checked,\n      group: this.group,\n    });\n  };\n\n  /** Make sure the checkbox is checked when clicked anywhere in the item. */\n  private handleClick = () => {\n    if (this.disabled) return;\n    if (this.el.querySelector('input').checked) {\n      this.checked = false;\n    } else {\n      this.checked = true;\n    }\n  };\n\n  render() {\n    return (\n      <Host onClick={this.handleClick}>\n        <nv-fieldcheckbox\n          checked={this.checked}\n          name={this.label || this.value}\n          label={this.label || this.value}\n          label-placement=\"after\"\n          description={this.description}\n          disabled={this.disabled}\n          tabindex=\"-1\"\n          role=\"option\"\n          onCheckedChanged={this.onFieldcheckboxChanged}\n        >\n          <slot></slot>\n          <slot name=\"main\"></slot>\n          <slot name=\"label\"></slot>\n          <slot name=\"description\"></slot>\n        </nv-fieldcheckbox>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -33,7 +33,7 @@ const NvBreadcrumb = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '50f858dc015ef2cd51f54a08fa53ec88ee42ac41', role: "listitem", "aria-current": this.current ? 'location' : undefined, class: clsx({ 'visually-hidden': this.current }) }, this.type === 'collapsed' ? (h("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (h("slot", null)), this.tooltip && (h("nv-tooltip", { key: '1df40faa4a483d4abf8895def5db87696cf0d08e', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (h("nv-popover", { key: '90174908cdcf1b3e1f8a8a82a01cfa505311c930', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, h("ul", { key: '72282abd41c80bb8edf0c6b19506be32bf5ed688', slot: "content" }, h("slot", { key: '4b9c325c0d27162c4856796f6a7d7c9b39edf993' })))), h("span", { key: '62316fc8efc09067a0a64d4e90e76d57b329ee81', "data-scope": "separator" }, "/")));
+        return (h(Host, { key: 'b0cfdee987585488bd49734900ee421b081e6df4', role: "listitem", "aria-current": this.current ? 'location' : undefined, class: clsx({ 'visually-hidden': this.current }) }, this.type === 'collapsed' ? (h("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (h("slot", null)), this.tooltip && (h("nv-tooltip", { key: '970d9552c3f81bffd86889fc2ff169f73810507b', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (h("nv-popover", { key: '1b14ce172db49aaeb199d6801978f96204ba05a1', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, h("ul", { key: 'b984309f9290bb4bcfed796200ffaad6e52a2b93', slot: "content" }, h("slot", { key: '189408f75e689b98b4cf9397074dbaefaecece9a' })))), h("span", { key: '62a4bed098620043b69f1e7dcf51db7de035f5fc', "data-scope": "separator" }, "/")));
     }
     get el() { return getElement(this); }
 };

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

@@ -9,7 +9,7 @@ const NvBreadcrumbs = class {
     }
     //#region RENDER
     render() {
-        return (h(Host, { key: '19ad2bb41f4254a98a571cbadb50ba5ed7d29f62', role: "navigation", "aria-label": "breadcrumbs" }, h("ol", { key: '11b77f0f11c6b1dc2ce5ab3f4f7b23e8ec728b61' }, h("slot", { key: 'c0c683f93c6874aa5f84fb735d13c1b5eabcd951' }))));
+        return (h(Host, { key: '4337fe5161c0ce444001e1b92221f3adac26e4bf', role: "navigation", "aria-label": "breadcrumbs" }, h("ol", { key: '00d470eadfe879be525a4a4b7ec3368601a0697c' }, h("slot", { key: '2d012f152b49f33f399aa14dfb18a4c39265128c' }))));
     }
 };
 NvBreadcrumbs.style = NvBreadcrumbsStyle0;

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

@@ -147,7 +147,7 @@ const NvButton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'f8b20f9052d71f93eaf03f98550a7237225cadf2', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (h("nv-loader", { key: 'c1cefa72ee24dad9ce16bbfe1f51e6cec6dc7fbc', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), h("slot", { key: '36a311494e45ebc23b1133923a676d58e87f3800', name: "leading-icon" }), h("slot", { key: 'f6fea826cda9a09f7152f4e30cc6981c89e73ebe' }), h("slot", { key: 'd59c23ff85ea7efc16c69c5adbeb0e91786f1f68', name: "trailing-icon" })));
+        return (h(Host, { key: '54c0b3351f4d8a180058a03e61a562882fb98498', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (h("nv-loader", { key: '21315e4af4111bcf47c67e65a9a58a1d7121a43e', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), h("slot", { key: 'f37683ddaa2c11c5b7accfc99429c930f5a3dcf6', name: "leading-icon" }), h("slot", { key: 'd17ebe7505d9027c6c58f930a8ea9b097561cead' }), h("slot", { key: '2cd6c9756cc7540417041adf5830b734291b2ab5', name: "trailing-icon" })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }