@nova-design-system/nova-webcomponents 3.20.0 → 3.21.1-beta.0

package/dist/components/p-82c9b7cc.js

@@ -0,0 +1,96 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-5829b9f7.js';
+
+const nvNotificationBulletCss = "nv-notification-bullet{display:inline-flex;align-items:center;position:relative;}nv-notification-bullet .nv-notification-bullet{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sidebar-primary-notification-bullet-size);max-width:var(--sidebar-primary-notification-bullet-size);min-height:var(--sidebar-primary-notification-bullet-size);max-height:var(--sidebar-primary-notification-bullet-size);padding:0 var(--spacing-1);border-radius:var(--radius-rounded-full);font-size:var(--sidebar-primary-notification-bullet-font-size);font-weight:var(--sidebar-primary-notification-bullet-font-weight);white-space:nowrap;flex-shrink:0}nv-notification-bullet.nv-notification-bullet-brand .nv-notification-bullet.nv-notification-bullet-high{background-color:var(--color-brand-500);color:var(--color-feedback-error-high-contrast-title)}nv-notification-bullet.nv-notification-bullet-brand .nv-notification-bullet.nv-notification-bullet-low{background-color:var(--color-brand-50);color:var(--color-brand-600);border:1px solid var(--color-brand-600)}nv-notification-bullet.nv-notification-bullet-neutral .nv-notification-bullet.nv-notification-bullet-high{background-color:var(--color-interaction-container-neutral-background);color:var(--color-interaction-container-neutral-text)}nv-notification-bullet.nv-notification-bullet-neutral .nv-notification-bullet.nv-notification-bullet-low{background-color:var(--color-interaction-container-neutral-background);color:var(--color-interaction-container-neutral-text)}nv-notification-bullet.nv-notification-bullet-with-cross-border::before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:calc(var(--sidebar-primary-notification-bullet-size) * 1.5);height:calc(var(--sidebar-primary-notification-bullet-size) * 1.5);border-radius:var(--radius-rounded-full);background-color:var(--nv-component-background, var(--nv-sidebarnavitem-background, var(--color-interaction-container-neutral-background)));z-index:-1;pointer-events:none}nv-sidebar[collapsed] nv-notification-bullet.nv-notification-bullet-with-cross-border::before{width:calc(var(--sidebar-primary-notification-bullet-size-reduced) * 1.5);height:calc(var(--sidebar-primary-notification-bullet-size-reduced) * 1.5)}nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-with-border{}nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-reduced,nv-sidebar[collapsed] nv-notification-bullet .nv-notification-bullet{min-width:var(--sidebar-primary-notification-bullet-size-reduced);max-width:var(--sidebar-primary-notification-bullet-size-reduced);min-height:var(--sidebar-primary-notification-bullet-size-reduced);max-height:var(--sidebar-primary-notification-bullet-size-reduced);padding:0;font-size:0;}nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-reduced.nv-notification-bullet-with-border,nv-sidebar[collapsed] nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-with-border{}";
+const NvNotificationBulletStyle0 = nvNotificationBulletCss;
+
+const NvNotificationBullet = /*@__PURE__*/ proxyCustomElement(class NvNotificationBullet extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * Determines the size of the notification bullet.
+         * - default: Normal size with text visible
+         * - reduced: Smaller size, text hidden (just a dot)
+         */
+        this.size = 'default';
+        /**
+         * Allows to add a border to add contrast on background.
+         */
+        this.contrastingBorder = false;
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    getIntention() {
+        if (this.intention) {
+            return this.intention;
+        }
+        // Inherit from parent nv-sidebar
+        const sidebar = this.el.closest('nv-sidebar');
+        if (sidebar) {
+            const sidebarIntention = sidebar.getAttribute('notification-intention');
+            if (sidebarIntention === 'neutral' || sidebarIntention === 'brand') {
+                return sidebarIntention;
+            }
+        }
+        return 'brand'; // Default fallback
+    }
+    getEmphasis() {
+        if (this.emphasis) {
+            return this.emphasis;
+        }
+        // Inherit from parent nv-sidebar
+        const sidebar = this.el.closest('nv-sidebar');
+        if (sidebar) {
+            const sidebarEmphasis = sidebar.getAttribute('notification-emphasis');
+            if (sidebarEmphasis === 'high' || sidebarEmphasis === 'low') {
+                return sidebarEmphasis;
+            }
+        }
+        return 'high'; // Default fallback
+    }
+    //#region RENDER
+    render() {
+        var _a;
+        const displayCount = (_a = this.count) !== null && _a !== void 0 ? _a : 0;
+        const displayText = displayCount > 99 ? '99+' : String(displayCount);
+        if (displayCount <= 0) {
+            return null;
+        }
+        const sizeClass = this.size === 'reduced' ? 'nv-notification-bullet-reduced' : '';
+        const intention = this.getIntention();
+        const emphasis = this.getEmphasis();
+        const intentionClass = `nv-notification-bullet-${intention}`;
+        const emphasisClass = `nv-notification-bullet-${emphasis}`;
+        const borderClass = this.contrastingBorder
+            ? 'nv-notification-bullet-with-border'
+            : '';
+        return (h(Host, { class: `${intentionClass} ${borderClass ? 'nv-notification-bullet-with-cross-border' : ''}` }, h("span", { class: `nv-notification-bullet ${emphasisClass} ${sizeClass} ${borderClass}`, "aria-label": `${displayCount} notifications` }, displayText)));
+    }
+    get el() { return this; }
+    static get style() { return NvNotificationBulletStyle0; }
+}, [0, "nv-notification-bullet", {
+        "count": [514],
+        "intention": [513],
+        "emphasis": [513],
+        "size": [513],
+        "contrastingBorder": [516, "contrasting-border"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-notification-bullet"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-notification-bullet":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvNotificationBullet);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { NvNotificationBullet as N, defineCustomElement as d };
+
+//# sourceMappingURL=p-82c9b7cc.js.map

package/dist/components/p-82c9b7cc.js.map

@@ -0,0 +1 @@
+{"file":"p-82c9b7cc.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,47FAA47F,CAAC;AAC79F,mCAAe,uBAAuB;;MCWzB,oBAAoB;IALjC;;;;;;;;QA2CW,SAAI,GAA0B,SAAS,CAAC;;;;QAMxC,sBAAiB,GAAY,KAAK,CAAC;KAoE7C;;;;IAhES,YAAY;QAClB,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,OAAO,IAAI,CAAC,SAAS,CAAC;SACvB;;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAC9C,IAAI,OAAO,EAAE;YACX,MAAM,gBAAgB,GAAG,OAAO,CAAC,YAAY,CAAC,wBAAwB,CAAC,CAAC;YACxE,IAAI,gBAAgB,KAAK,SAAS,IAAI,gBAAgB,KAAK,OAAO,EAAE;gBAClE,OAAO,gBAAgB,CAAC;aACzB;SACF;QACD,OAAO,OAAO,CAAC;KAChB;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAC,QAAQ,CAAC;SACtB;;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAC9C,IAAI,OAAO,EAAE;YACX,MAAM,eAAe,GAAG,OAAO,CAAC,YAAY,CAAC,uBAAuB,CAAC,CAAC;YACtE,IAAI,eAAe,KAAK,MAAM,IAAI,eAAe,KAAK,KAAK,EAAE;gBAC3D,OAAO,eAAe,CAAC;aACxB;SACF;QACD,OAAO,MAAM,CAAC;KACf;;IAED,MAAM;;QACJ,MAAM,YAAY,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,CAAC,CAAC;QACrC,MAAM,WAAW,GAAG,YAAY,GAAG,EAAE,GAAG,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;QAErE,IAAI,YAAY,IAAI,CAAC,EAAE;YACrB,OAAO,IAAI,CAAC;SACb;QAED,MAAM,SAAS,GACb,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,gCAAgC,GAAG,EAAE,CAAC;QAClE,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QACtC,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QACpC,MAAM,cAAc,GAAG,0BAA0B,SAAS,EAAE,CAAC;QAC7D,MAAM,aAAa,GAAG,0BAA0B,QAAQ,EAAE,CAAC;QAC3D,MAAM,WAAW,GAAG,IAAI,CAAC,iBAAiB;cACtC,oCAAoC;cACpC,EAAE,CAAC;QAEP,QACE,EAAC,IAAI,IACH,KAAK,EAAE,GAAG,cAAc,IACtB,WAAW,GAAG,0CAA0C,GAAG,EAC7D,EAAE,IAEF,YACE,KAAK,EAAE,0BAA0B,aAAa,IAAI,SAAS,IAAI,WAAW,EAAE,gBAChE,GAAG,YAAY,gBAAgB,IAE1C,WAAW,CACP,CACF,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-notification-bullet/styles/nv-notification-bullet.scss?tag=nv-notification-bullet","src/components/nv-notification-bullet/nv-notification-bullet.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-notification-bullet {\n  display: inline-flex;\n  align-items: center;\n  position: relative; // Needed for cross-border pseudo-element positioning\n\n  /* Base notification bullet styles */\n  .nv-notification-bullet {\n    @include bullet-base-styles();\n  }\n\n  /* Intention: brand */\n  &.nv-notification-bullet-brand {\n    .nv-notification-bullet {\n      &.nv-notification-bullet-high {\n        @include bullet-brand-high();\n      }\n      &.nv-notification-bullet-low {\n        @include bullet-brand-low();\n      }\n    }\n  }\n\n  /* Intention: neutral */\n  &.nv-notification-bullet-neutral {\n    .nv-notification-bullet {\n      &.nv-notification-bullet-high {\n        @include bullet-neutral-high();\n      }\n      &.nv-notification-bullet-low {\n        @include bullet-neutral-low();\n      }\n    }\n  }\n\n  /* Contrasting border (cross-border backdrop) - creates a larger circle behind the bullet */\n  /* The cross-border intelligently inherits the background color from the parent (nv-sidebarnavitem-trigger) */\n  &.nv-notification-bullet-with-cross-border::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: calc(var(--sidebar-primary-notification-bullet-size) * 1.5);\n    height: calc(var(--sidebar-primary-notification-bullet-size) * 1.5);\n    border-radius: var(--radius-rounded-full);\n    /* Intelligently inherits background color from parent via CSS variable */\n    /* Supports multiple parent types: --nv-component-background (generic) or --nv-sidebarnavitem-background (sidebar specific) */\n    background-color: var(--nv-component-background, var(--nv-sidebarnavitem-background, var(--color-interaction-container-neutral-background)));\n    z-index: -1;\n    pointer-events: none;\n  }\n  \n  /* Cross-border for reduced size (when sidebar is collapsed) */\n  nv-sidebar[collapsed] &.nv-notification-bullet-with-cross-border::before {\n    width: calc(var(--sidebar-primary-notification-bullet-size-reduced) * 1.5);\n    height: calc(var(--sidebar-primary-notification-bullet-size-reduced) * 1.5);\n  }\n  \n  /* Apply cross-border mixin (empty now, but kept for structure) */\n  .nv-notification-bullet.nv-notification-bullet-with-border {\n    @include bullet-with-border();\n  }\n\n  /* Size: reduced */\n  .nv-notification-bullet.nv-notification-bullet-reduced,\n  /* When inside a collapsed sidebar, use reduced size automatically */\n  nv-sidebar[collapsed] & .nv-notification-bullet {\n    @include bullet-styles-reduced();\n    \n    /* Apply reduced cross-border backdrop when size is reduced */\n    &.nv-notification-bullet-with-border {\n      @include bullet-with-border-reduced();\n    }\n  }\n}\n\n","import { Component, Host, Prop, Element, h } from '@stencil/core';\n\n/**\n * Notification bullet component for displaying notification counts in the sidebar.\n * Automatically adapts its size when the sidebar is collapsed.\n * Inherits intention and emphasis from parent nv-sidebar if not explicitly set.\n */\n@Component({\n  tag: 'nv-notification-bullet',\n  styleUrl: 'styles/nv-notification-bullet.scss',\n  shadow: false,\n})\nexport class NvNotificationBullet {\n  @Element() el: HTMLNvNotificationBulletElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n  /**\n   * The number of notifications to display.\n   * If 0 or not provided, the component will not be visible.\n   */\n  @Prop({ reflect: true })\n  readonly count?: number;\n\n  /**\n   * Determines the type of the notification.\n   * - neutral: Uses neutral colors (gray)\n   * - brand: Uses brand colors (orange/teal depending on theme)\n   * If not set, inherits from parent nv-sidebar's notificationIntention prop.\n   * @deprecated Use notificationIntention prop on nv-sidebar instead. This prop is kept for backward compatibility but will be removed in a future version.\n   */\n  @Prop({ reflect: true })\n  readonly intention?: 'neutral' | 'brand';\n\n  /**\n   * Determines the emphasis and importance of the notification.\n   * - high: More prominent appearance\n   * - low: Less prominent appearance\n   * If not set, inherits from parent nv-sidebar's notificationEmphasis prop.\n   * @deprecated Use notificationEmphasis prop on nv-sidebar instead. This prop is kept for backward compatibility but will be removed in a future version.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis?: 'high' | 'low';\n\n  /**\n   * Determines the size of the notification bullet.\n   * - default: Normal size with text visible\n   * - reduced: Smaller size, text hidden (just a dot)\n   */\n  @Prop({ reflect: true })\n  readonly size: 'default' | 'reduced' = 'default';\n\n  /**\n   * Allows to add a border to add contrast on background.\n   */\n  @Prop({ reflect: true })\n  readonly contrastingBorder: boolean = false;\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n  private getIntention(): 'neutral' | 'brand' {\n    if (this.intention) {\n      return this.intention;\n    }\n    // Inherit from parent nv-sidebar\n    const sidebar = this.el.closest('nv-sidebar');\n    if (sidebar) {\n      const sidebarIntention = sidebar.getAttribute('notification-intention');\n      if (sidebarIntention === 'neutral' || sidebarIntention === 'brand') {\n        return sidebarIntention;\n      }\n    }\n    return 'brand'; // Default fallback\n  }\n\n  private getEmphasis(): 'high' | 'low' {\n    if (this.emphasis) {\n      return this.emphasis;\n    }\n    // Inherit from parent nv-sidebar\n    const sidebar = this.el.closest('nv-sidebar');\n    if (sidebar) {\n      const sidebarEmphasis = sidebar.getAttribute('notification-emphasis');\n      if (sidebarEmphasis === 'high' || sidebarEmphasis === 'low') {\n        return sidebarEmphasis;\n      }\n    }\n    return 'high'; // Default fallback\n  }\n  //#region RENDER\n  render() {\n    const displayCount = this.count ?? 0;\n    const displayText = displayCount > 99 ? '99+' : String(displayCount);\n\n    if (displayCount <= 0) {\n      return null;\n    }\n\n    const sizeClass =\n      this.size === 'reduced' ? 'nv-notification-bullet-reduced' : '';\n    const intention = this.getIntention();\n    const emphasis = this.getEmphasis();\n    const intentionClass = `nv-notification-bullet-${intention}`;\n    const emphasisClass = `nv-notification-bullet-${emphasis}`;\n    const borderClass = this.contrastingBorder\n      ? 'nv-notification-bullet-with-border'\n      : '';\n\n    return (\n      <Host\n        class={`${intentionClass} ${\n          borderClass ? 'nv-notification-bullet-with-cross-border' : ''\n        }`}\n      >\n        <span\n          class={`nv-notification-bullet ${emphasisClass} ${sizeClass} ${borderClass}`}\n          aria-label={`${displayCount} notifications`}\n        >\n          {displayText}\n        </span>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-60083982.js → p-94ad267c.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-5829b9f7.js';
 import { b as ButtonType } from './p-51602221.js';
-import { d as defineCustomElement$3 } from './p-e1b2eba2.js';
-import { d as defineCustomElement$2 } from './p-946a047c.js';
-import { d as defineCustomElement$1 } from './p-222136c2.js';
+import { d as defineCustomElement$3 } from './p-af663ff5.js';
+import { d as defineCustomElement$2 } from './p-743b3452.js';
+import { d as defineCustomElement$1 } from './p-996438a2.js';
 
 const nvDialogfooterCss = "nv-dialogfooter{display:flex;padding:var(--dialog-footer-padding-top) var(--dialog-footer-padding-x) var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);justify-content:flex-end;align-items:flex-end;gap:var(--dialog-footer-gap-y);align-self:stretch}";
 const NvDialogfooterStyle0 = nvDialogfooterCss;
@@ -87,7 +87,7 @@ const NvDialogfooter = /*@__PURE__*/ proxyCustomElement(class NvDialogfooter ext
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '0868c3af73f89219eee7c006b4ddca47c6da29b0' }, !this.hasSlot ? (h(Fragment, null, !this.undismissable && (h("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), h("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (h("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (h("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (h("slot", null))));
+        return (h(Host, { key: '908abbe8e2e9aa215641dd056c70dc16f36c3ac3' }, !this.hasSlot ? (h(Fragment, null, !this.undismissable && (h("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), h("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (h("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (h("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (h("slot", null))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }
@@ -135,4 +135,4 @@ defineCustomElement();
 
 export { NvDialogfooter as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-60083982.js.map
+//# sourceMappingURL=p-94ad267c.js.map

package/dist/components/{p-60083982.js.map → p-94ad267c.js.map}

@@ -1 +1 @@
-{"file":"p-60083982.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,0QAA0Q,CAAC;AACrS,6BAAe,iBAAiB;;MCqBnB,cAAc;IAN3B;;;;;;QASU,YAAO,GAAG,KAAK,CAAC;;;;;;QASf,aAAQ,GAAY,KAAK,CAAC;;;;;QAO1B,kBAAa,GAAY,KAAK,CAAC;;;;QAM/B,gBAAW,GAAW,EAAE,CAAC;;;;QAMzB,iBAAY,GAAW,EAAE,CAAC;;;;QAM1B,WAAM,GAAY,KAAK,CAAC;;;;QAMxB,gBAAW,GAAW,QAAQ,CAAC;;;;QAM/B,iBAAY,GAAW,SAAS,CAAC;;;;;;;;QA0ClC,kBAAa,GAAG,CAAC,KAAY;YACnC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,CAAC;SAClC,CAAC;;;;;QAMM,iBAAY,GAAG,CAAC,KAAY;YAClC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;SAC5B,CAAC;KAwEH;;;;IAlEC,iBAAiB;;QAEf,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI;YACrD,QACE,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;gBACnC,CAAE,IAAgB,CAAC,YAAY,CAAC,MAAM,CAAC,EACvC;SACH,CAAC,CAAC;KACJ;IAED,gBAAgB;;QAEd,IAAI,CAAC,iBAAiB;YACpB,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,IAAI;kBAC/B,UAAU,CAAC,MAAM;kBACjB,UAAU,CAAC,MAAM,CAAC;KACzB;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,CAAC,IAAI,CAAC,OAAO,IACZ,EAAC,QAAQ,QACN,CAAC,IAAI,CAAC,aAAa,KAClB,iBAAW,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAC,KAAK,EAAC,IAAI,EAAC,IAAI,IAC5D,IAAI,CAAC,WAAW,CACP,CACb,EACD,iBACE,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,iBAAiB,IAE3B,IAAI,CAAC,WAAW,KACf,eACE,IAAI,EAAC,cAAc,EACnB,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,IAAI,EAAC,IAAI,GACT,CACH,EACA,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,YAAY,KAChB,eACE,IAAI,EAAC,eAAe,EACpB,IAAI,EAAE,IAAI,CAAC,YAAY,EACvB,IAAI,EAAC,IAAI,GACT,CACH,CACS,CACH,KAEX,eAAa,CACd,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-dialogfooter/nv-dialogfooter.scss?tag=nv-dialogfooter","src/components/nv-dialogfooter/nv-dialogfooter.tsx"],"sourcesContent":["nv-dialogfooter {\n  display: flex;\n  padding: var(--dialog-footer-padding-top) var(--dialog-footer-padding-x)\n    var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);\n\n  justify-content: flex-end;\n  align-items: flex-end;\n  gap: var(--dialog-footer-gap-y);\n  align-self: stretch;\n}\n","import {\n  AttachInternals,\n  Component,\n  h,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Fragment,\n  Element,\n} from '@stencil/core';\nimport { ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Custom content for the dialog footer. When provided, the default buttons will not be rendered.\n */\n@Component({\n  tag: 'nv-dialogfooter',\n  styleUrl: 'nv-dialogfooter.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvDialogfooter {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvDialogfooterElement;\n  private hasSlot = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Disables the primary button, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Controls the visibility of the cancel button. When true, the cancel button is\n   * hidden.\n   */\n  @Prop({ reflect: true })\n  readonly undismissable: boolean = false;\n\n  /**\n   * Sets the leading icon for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly leadingIcon: string = '';\n\n  /**\n   * Sets the trailing icon for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly trailingIcon: string = '';\n\n  /**\n   * Sets the danger state for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\n\n  /**\n   * Sets the label for the cancel button.\n   */\n  @Prop({ reflect: true })\n  readonly cancelLabel: string = 'Cancel';\n\n  /**\n   * Sets the label for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly primaryLabel: string = 'Primary';\n\n  /**\n   * Sets the type of the primary button. If using a form, this will default to\n   * 'submit' if nothing passed.\n   */\n  @Prop({ reflect: true, mutable: true })\n  primaryButtonType: `${ButtonType}`;\n\n  /**\n   * A form inside the dialog can be submitted through the dialog footer by\n   * giving the form an id and passing that id to the form attribute.\n   */\n  @Prop({ reflect: true })\n  readonly form: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the cancel button is clicked. This will close the dialog.\n   */\n  @Event()\n  dialogCanceled: EventEmitter<void>;\n\n  /**\n   * Emitted when the primary button is clicked. This allows to handle the\n   * primary action and potential data capture before closing the dialog.\n   */\n  @Event()\n  dialogPrimaryClicked: EventEmitter<void>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the primary action when the primary button is clicked.\n   * @param {Event} event - The click event.\n   */\n\n  private handlePrimary = (event: Event) => {\n    event.stopPropagation();\n    this.dialogPrimaryClicked.emit();\n  };\n\n  /**\n   * Handles the cancel action when the cancel button is clicked. This will close the dialog.\n   * @param {Event} event - The click event.\n   */\n  private handleCancel = (event: Event) => {\n    event.stopPropagation();\n    this.dialogCanceled.emit();\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    // Check if there are any child elements that don't have a slot attribute\n    this.hasSlot = Array.from(this.el.childNodes).some(node => {\n      return (\n        node.nodeType === Node.ELEMENT_NODE &&\n        !(node as Element).hasAttribute('slot')\n      );\n    });\n  }\n\n  componentDidLoad() {\n    // Set the default button type based on the form property\n    this.primaryButtonType =\n      this.primaryButtonType || this.form\n        ? ButtonType.Submit\n        : ButtonType.Button;\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {!this.hasSlot ? (\n          <Fragment>\n            {!this.undismissable && (\n              <nv-button onClick={this.handleCancel} emphasis=\"low\" size=\"sm\">\n                {this.cancelLabel}\n              </nv-button>\n            )}\n            <nv-button\n              onClick={this.handlePrimary}\n              disabled={this.disabled}\n              danger={this.danger}\n              size=\"sm\"\n              emphasis=\"high\"\n              form={this.form}\n              type={this.primaryButtonType}\n            >\n              {this.leadingIcon && (\n                <nv-icon\n                  slot=\"leading-icon\"\n                  name={this.leadingIcon}\n                  size=\"sm\"\n                />\n              )}\n              {this.primaryLabel}\n              {this.trailingIcon && (\n                <nv-icon\n                  slot=\"trailing-icon\"\n                  name={this.trailingIcon}\n                  size=\"sm\"\n                />\n              )}\n            </nv-button>\n          </Fragment>\n        ) : (\n          <slot></slot>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"p-94ad267c.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,0QAA0Q,CAAC;AACrS,6BAAe,iBAAiB;;MCqBnB,cAAc;IAN3B;;;;;;QASU,YAAO,GAAG,KAAK,CAAC;;;;;;QASf,aAAQ,GAAY,KAAK,CAAC;;;;;QAO1B,kBAAa,GAAY,KAAK,CAAC;;;;QAM/B,gBAAW,GAAW,EAAE,CAAC;;;;QAMzB,iBAAY,GAAW,EAAE,CAAC;;;;QAM1B,WAAM,GAAY,KAAK,CAAC;;;;QAMxB,gBAAW,GAAW,QAAQ,CAAC;;;;QAM/B,iBAAY,GAAW,SAAS,CAAC;;;;;;;;QA0ClC,kBAAa,GAAG,CAAC,KAAY;YACnC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,CAAC;SAClC,CAAC;;;;;QAMM,iBAAY,GAAG,CAAC,KAAY;YAClC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;SAC5B,CAAC;KAwEH;;;;IAlEC,iBAAiB;;QAEf,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI;YACrD,QACE,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;gBACnC,CAAE,IAAgB,CAAC,YAAY,CAAC,MAAM,CAAC,EACvC;SACH,CAAC,CAAC;KACJ;IAED,gBAAgB;;QAEd,IAAI,CAAC,iBAAiB;YACpB,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,IAAI;kBAC/B,UAAU,CAAC,MAAM;kBACjB,UAAU,CAAC,MAAM,CAAC;KACzB;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,CAAC,IAAI,CAAC,OAAO,IACZ,EAAC,QAAQ,QACN,CAAC,IAAI,CAAC,aAAa,KAClB,iBAAW,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAC,KAAK,EAAC,IAAI,EAAC,IAAI,IAC5D,IAAI,CAAC,WAAW,CACP,CACb,EACD,iBACE,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,iBAAiB,IAE3B,IAAI,CAAC,WAAW,KACf,eACE,IAAI,EAAC,cAAc,EACnB,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,IAAI,EAAC,IAAI,GACT,CACH,EACA,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,YAAY,KAChB,eACE,IAAI,EAAC,eAAe,EACpB,IAAI,EAAE,IAAI,CAAC,YAAY,EACvB,IAAI,EAAC,IAAI,GACT,CACH,CACS,CACH,KAEX,eAAa,CACd,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-dialogfooter/nv-dialogfooter.scss?tag=nv-dialogfooter","src/components/nv-dialogfooter/nv-dialogfooter.tsx"],"sourcesContent":["nv-dialogfooter {\n  display: flex;\n  padding: var(--dialog-footer-padding-top) var(--dialog-footer-padding-x)\n    var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);\n\n  justify-content: flex-end;\n  align-items: flex-end;\n  gap: var(--dialog-footer-gap-y);\n  align-self: stretch;\n}\n","import {\n  AttachInternals,\n  Component,\n  h,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Fragment,\n  Element,\n} from '@stencil/core';\nimport { ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Custom content for the dialog footer. When provided, the default buttons will not be rendered.\n */\n@Component({\n  tag: 'nv-dialogfooter',\n  styleUrl: 'nv-dialogfooter.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvDialogfooter {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvDialogfooterElement;\n  private hasSlot = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Disables the primary button, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Controls the visibility of the cancel button. When true, the cancel button is\n   * hidden.\n   */\n  @Prop({ reflect: true })\n  readonly undismissable: boolean = false;\n\n  /**\n   * Sets the leading icon for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly leadingIcon: string = '';\n\n  /**\n   * Sets the trailing icon for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly trailingIcon: string = '';\n\n  /**\n   * Sets the danger state for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\n\n  /**\n   * Sets the label for the cancel button.\n   */\n  @Prop({ reflect: true })\n  readonly cancelLabel: string = 'Cancel';\n\n  /**\n   * Sets the label for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly primaryLabel: string = 'Primary';\n\n  /**\n   * Sets the type of the primary button. If using a form, this will default to\n   * 'submit' if nothing passed.\n   */\n  @Prop({ reflect: true, mutable: true })\n  primaryButtonType: `${ButtonType}`;\n\n  /**\n   * A form inside the dialog can be submitted through the dialog footer by\n   * giving the form an id and passing that id to the form attribute.\n   */\n  @Prop({ reflect: true })\n  readonly form: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the cancel button is clicked. This will close the dialog.\n   */\n  @Event()\n  dialogCanceled: EventEmitter<void>;\n\n  /**\n   * Emitted when the primary button is clicked. This allows to handle the\n   * primary action and potential data capture before closing the dialog.\n   */\n  @Event()\n  dialogPrimaryClicked: EventEmitter<void>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the primary action when the primary button is clicked.\n   * @param {Event} event - The click event.\n   */\n\n  private handlePrimary = (event: Event) => {\n    event.stopPropagation();\n    this.dialogPrimaryClicked.emit();\n  };\n\n  /**\n   * Handles the cancel action when the cancel button is clicked. This will close the dialog.\n   * @param {Event} event - The click event.\n   */\n  private handleCancel = (event: Event) => {\n    event.stopPropagation();\n    this.dialogCanceled.emit();\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    // Check if there are any child elements that don't have a slot attribute\n    this.hasSlot = Array.from(this.el.childNodes).some(node => {\n      return (\n        node.nodeType === Node.ELEMENT_NODE &&\n        !(node as Element).hasAttribute('slot')\n      );\n    });\n  }\n\n  componentDidLoad() {\n    // Set the default button type based on the form property\n    this.primaryButtonType =\n      this.primaryButtonType || this.form\n        ? ButtonType.Submit\n        : ButtonType.Button;\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {!this.hasSlot ? (\n          <Fragment>\n            {!this.undismissable && (\n              <nv-button onClick={this.handleCancel} emphasis=\"low\" size=\"sm\">\n                {this.cancelLabel}\n              </nv-button>\n            )}\n            <nv-button\n              onClick={this.handlePrimary}\n              disabled={this.disabled}\n              danger={this.danger}\n              size=\"sm\"\n              emphasis=\"high\"\n              form={this.form}\n              type={this.primaryButtonType}\n            >\n              {this.leadingIcon && (\n                <nv-icon\n                  slot=\"leading-icon\"\n                  name={this.leadingIcon}\n                  size=\"sm\"\n                />\n              )}\n              {this.primaryLabel}\n              {this.trailingIcon && (\n                <nv-icon\n                  slot=\"trailing-icon\"\n                  name={this.trailingIcon}\n                  size=\"sm\"\n                />\n              )}\n            </nv-button>\n          </Fragment>\n        ) : (\n          <slot></slot>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-222136c2.js → p-996438a2.js}

@@ -22,7 +22,7 @@ const NvLoader = /*@__PURE__*/ proxyCustomElement(class NvLoader extends H {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (h(Host, { key: 'b90db971210fb08781098cefaf8832bd5692a09e', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (h(Host, { key: '049afa243c1ce99643408d86afa99e69c5468b8b', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
     static get style() { return NvLoaderStyle0; }
 }, [0, "nv-loader", {
@@ -46,4 +46,4 @@ defineCustomElement();
 
 export { NvLoader as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-222136c2.js.map
+//# sourceMappingURL=p-996438a2.js.map

package/dist/components/{p-222136c2.js.map → p-996438a2.js.map}

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

package/dist/components/{p-4697bd56.js → p-996ed843.js}

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

package/dist/components/p-996ed843.js.map

@@ -0,0 +1 @@
+{"file":"p-996ed843.js","mappings":"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","names":["styler"],"sources":["src/utils/events.utils.ts","src/animations/grow.animation.ts"],"sourcesContent":["export type EventsAndListeners = [string, EventListener][];\n\n/**\n * Adds a set of event listeners to the given target.\n * @param {EventsAndListeners} events - The events and listeners to add.\n * @param {Element | Window | Document} target  - The target element or window to add the event listeners to.\n * @param {T} context - The class context to bind the event listeners to.\n */\nexport function addEventListeners<T>(\n  events: EventsAndListeners,\n  target: Element | Window | Document,\n  context: T,\n) {\n  events.forEach(([event, listener]) =>\n    target.addEventListener(event, listener.bind(context)),\n  );\n}\n\n/**\n * Removes a set of event listeners from the given target.\n * @param {EventsAndListeners} events - The events and listeners to remove.\n * @param {Element | Window | Document} target  - The target element or window to remove the event listeners from.\n * @param {T} context - The class context to bind the event listeners to.\n */\nexport function removeEventListeners<T>(\n  events: EventsAndListeners,\n  target: Element | Window | Document,\n  context: T,\n) {\n  events.forEach(([event, listener]) =>\n    target.removeEventListener(event, listener.bind(context)),\n  );\n}\n","import { animate } from 'popmotion';\nimport styler from 'stylefire';\n\nexport type GrowOptions = {\n  /** How long the animation should take in ms @default 200 */\n  duration?: number;\n  /** The amount to scale the element by @default 0.8 */\n  amount?: number;\n  /** Whether to include a fade effect in the animation @default true */\n  hasFade?: boolean;\n};\n\nconst useGrow = (\n  node: HTMLElement,\n  { duration = 200, amount = 0.8, hasFade = true }: GrowOptions = {},\n) => {\n  const nodeStyler = styler(node);\n\n  /**\n   * Will animate the scale and optionally the opacity to make the element grow and fade in,\n   * and removes the scale and opacity style attributes once complete.\n   */\n  function growIn() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { opacity: hasFade ? 0 : 1, scale: amount },\n        to: { opacity: 1, scale: 1 },\n        duration,\n        onUpdate(latest) {\n          const updates = {\n            scale: latest.scale,\n          };\n          if (hasFade) {\n            updates['opacity'] = latest.opacity;\n          }\n          nodeStyler.set(updates);\n        },\n        onComplete() {\n          resolve();\n          if (hasFade) {\n            node.style.removeProperty('opacity');\n          }\n          node.style.removeProperty('transform');\n        },\n      });\n    });\n  }\n\n  /**\n   * Applies the growOut styles without animating, useful when the initial\n   * state is hidden.\n   */\n  function setGrowOut() {\n    node.style.transform = `scale(${amount})`;\n    if (hasFade) {\n      node.style.opacity = '0';\n    }\n  }\n\n  /**\n   * Applies the growIn styles without animating, useful when the initial\n   * state is visible.\n   */\n  function setGrowIn() {\n    node.style.transform = `scale(1)`;\n    if (hasFade) {\n      node.style.opacity = '1';\n    }\n  }\n\n  /**\n   * Will animate the scale and optionally the opacity to make the element shrink and fade out,\n   * leaving the scale and opacity styles on the element.\n   */\n  function growOut() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { opacity: 1, scale: 1 },\n        to: { opacity: hasFade ? 0 : 1, scale: amount },\n        duration,\n        onUpdate(latest) {\n          const updates = {\n            scale: latest.scale,\n          };\n          if (hasFade) {\n            updates['opacity'] = latest.opacity;\n          }\n          nodeStyler.set(updates);\n        },\n        onComplete() {\n          resolve();\n        },\n      });\n    });\n  }\n\n  return {\n    growIn,\n    growOut,\n    setGrowOut,\n    setGrowIn,\n  };\n};\n\nexport { useGrow };\n"],"version":3}

package/dist/components/p-af663ff5.js

@@ -0,0 +1,191 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-5829b9f7.js';
+import { b as ButtonType, B as ButtonSize } from './p-51602221.js';
+import { d as defineCustomElement$1 } from './p-996438a2.js';
+
+const nvButtonCss = "nv-button{text-decoration:none;display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:var(--font-weight-medium-emphasis);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;transition:background-color 150ms ease-out;user-select:none;cursor:pointer;height:fit-content;width:fit-content}nv-button[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);height:var(--button-xs-height);font-size:var(--button-xs-font-size)}nv-button[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-button[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);height:var(--button-sm-height);font-size:var(--button-sm-font-size)}nv-button[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-button[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);height:var(--button-md-height);font-size:var(--button-md-font-size)}nv-button[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-button[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);height:var(--button-lg-height);font-size:var(--button-lg-font-size)}nv-button[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-button[emphasis=high]{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-button[emphasis=high]:hover{background:var(--components-button-high-background-hover);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text-hover)}nv-button[emphasis=high]:active{background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high]:focus,nv-button[emphasis=high]:focus-within{outline:none}nv-button[emphasis=high]:focus-visible,nv-button[emphasis=high]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=high][active]:not([active=false]){background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high][danger]:not([danger=false]){background:var(--components-button-destructive-high-background);border:1px solid transparent;color:var(--components-button-destructive-high-text)}nv-button[emphasis=high][danger]:not([danger=false]):hover{background:var(--components-button-destructive-high-background-hover);border:1px solid transparent;color:var(--components-button-destructive-high-text-hover)}nv-button[emphasis=high][danger]:not([danger=false]):focus,nv-button[emphasis=high][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=high][danger]:not([danger=false]):focus-visible,nv-button[emphasis=high][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=medium]{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-button[emphasis=medium]:hover{background:var(--components-button-medium-background-hover);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text-hover)}nv-button[emphasis=medium]:active{background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium]:focus,nv-button[emphasis=medium]:focus-within{outline:none}nv-button[emphasis=medium]:focus-visible,nv-button[emphasis=medium]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=medium]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=medium][active]:not([active=false]){background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium][danger]:not([danger=false]){background:var(--components-button-destructive-medium-background);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text)}nv-button[emphasis=medium][danger]:not([danger=false]):hover{background:var(--components-button-destructive-medium-background-hover);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text-hover)}nv-button[emphasis=medium][danger]:not([danger=false]):focus,nv-button[emphasis=medium][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=medium][danger]:not([danger=false]):focus-visible,nv-button[emphasis=medium][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=low]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-button[emphasis=low]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-button[emphasis=low]:active{background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-button[emphasis=low]:focus,nv-button[emphasis=low]:focus-within{outline:none}nv-button[emphasis=low]:focus-visible,nv-button[emphasis=low]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=low][active]:not([active=false]){background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-button[emphasis=low][danger]:not([danger=false]){background:var(--components-button-destructive-low-background);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text)}nv-button[emphasis=low][danger]:not([danger=false]):hover{background:var(--components-button-destructive-low-background-hover);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text-hover)}nv-button[emphasis=low][danger]:not([danger=false]):focus,nv-button[emphasis=low][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=low][danger]:not([danger=false]):focus-visible,nv-button[emphasis=low][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=lower]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-button[emphasis=lower]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-button[emphasis=lower]:active{background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-button[emphasis=lower]:focus,nv-button[emphasis=lower]:focus-within{outline:none}nv-button[emphasis=lower]:focus-visible,nv-button[emphasis=lower]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=lower]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=lower][active]:not([active=false]){background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-button[emphasis=lower][danger]:not([danger=false]){background:var(--components-button-destructive-lower-background);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text)}nv-button[emphasis=lower][danger]:not([danger=false]):hover{background:var(--components-button-destructive-lower-background-hover);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text-hover)}nv-button[emphasis=lower][danger]:not([danger=false]):focus,nv-button[emphasis=lower][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=lower][danger]:not([danger=false]):focus-visible,nv-button[emphasis=lower][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[fluid]:not([fluid=false]){width:100%}nv-button[loading]:not([loading=false]) [slot=leading-icon]{display:none}";
+const NvButtonStyle0 = nvButtonCss;
+
+const NvButton = /*@__PURE__*/ proxyCustomElement(class NvButton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.internals = this.attachInternals();
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Determines how large or small the button appears, allowing for
+         * customization of the button's dimensions to fit different design
+         * specifications and user needs.
+         */
+        this.size = 'md';
+        /**
+         * Adjusts the button's emphasis to make it more or less visually prominent
+         * to users. Use this to draw attention to important actions or reduce focus
+         * on less critical ones
+         */
+        this.emphasis = 'high';
+        /**
+         * Use this prop to highlight the button when it represents the current page
+         * or active selection. This helps users understand their navigation context.
+         */
+        this.active = false;
+        /**
+         * Applies styling that visually indicates the button represents a dangerous
+         * action.
+         */
+        this.danger = false;
+        /**
+         * Set this to true to show a spinner on the button, letting users know that
+         * their action is being processed. It helps improve user experience by
+         * indicating ongoing activities.
+         */
+        this.loading = false;
+        /**
+         * Disables the button, preventing user interaction.
+         */
+        this.disabled = false;
+        /**
+         * Allows the button to stretch and fill the entire width of its container.
+         */
+        this.fluid = false;
+        /**
+         * Sets the button type to control its function in forms. Use 'submit' to send
+         * form data, 'reset' to clear the form, or 'button' for a standard button
+         * that doesn't interact with form submission by default.
+         */
+        this.type = 'button';
+        /**
+         * Use this to make the button skip-able when users navigate with the keyboard.
+         * The button remains clickable but won’t be reached via the Tab key.
+         */
+        this.disableTabindex = false;
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * Handles button click events, managing form actions and disabled states.
+         * Prevents default behavior when button is disabled or loading, and
+         * processes form submissions/resets when appropriate.
+         * @param {Event} event - The click event.
+         */
+        this.handleButtonClick = (event) => {
+            var _a;
+            if (this.loading || this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            if (this.type !== ButtonType.Button &&
+                (this.form || ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.form))) {
+                this.processFormAction();
+            }
+            else if (this.form && this.type === ButtonType.Button) {
+                console.warn('Button has a form id but is not of type submit or reset so no form action will be processed.', `Button:`, this.el);
+            }
+        };
+        /**
+         * Processes form-related actions by finding the associated form element
+         * and triggering the appropriate action (submit/reset) based on button type.
+         * Falls back to ElementInternals form if no explicit form ID is provided.
+         */
+        this.processFormAction = () => {
+            var _a, _b;
+            const formElement = this.form
+                ? document.getElementById(this.form)
+                : (_a = this.internals) === null || _a === void 0 ? void 0 : _a.form;
+            if (!formElement) {
+                console.warn('No form element found.', `Form ID: ${this.form || 'Not provided'}`, `Internals form:`, (_b = this.internals) === null || _b === void 0 ? void 0 : _b.form);
+                return;
+            }
+            switch (this.type) {
+                case ButtonType.Submit:
+                    formElement.requestSubmit();
+                    break;
+                case ButtonType.Reset:
+                    formElement.reset();
+                    break;
+            }
+        };
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region EVENTS
+    handleKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.el.click();
+        }
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    handleLoadingChange(loading) {
+        this.loading = loading;
+        this.disabled = loading;
+    }
+    handleDisabledChange(disabled) {
+        if (this.loading) {
+            this.disabled = this.loading;
+        }
+        else {
+            this.disabled = disabled;
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        if (this.loading) {
+            this.disabled = this.loading;
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '785b6127926d695ddaaff1a1f740102abd5132bb', role: "button", tabindex: this.disableTabindex ? -1 : 0, onClick: this.handleButtonClick }, this.loading && (h("nv-loader", { key: 'b361e4ac45cc1612723d6a67f866b8cdce3c4abc', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), h("slot", { key: 'b23c877bd95ae0a02c89c83e4e3d5f0178d646a5', name: "leading-icon" }), h("slot", { key: '7c95b1f28a64e7bb5ca02abf2190dfda62d1c758' }), h("slot", { key: 'f1cd34ea21393b78bc2f5140364d47b9e70f505c', name: "trailing-icon" })));
+    }
+    static get formAssociated() { return true; }
+    get el() { return this; }
+    static get watchers() { return {
+        "loading": ["handleLoadingChange"],
+        "disabled": ["handleDisabledChange"]
+    }; }
+    static get style() { return NvButtonStyle0; }
+}, [68, "nv-button", {
+        "size": [513],
+        "emphasis": [513],
+        "active": [516],
+        "danger": [516],
+        "loading": [1540],
+        "disabled": [1540],
+        "fluid": [516],
+        "type": [513],
+        "form": [513],
+        "disableTabindex": [516, "disable-tabindex"]
+    }, [[0, "keydown", "handleKeyDown"]], {
+        "loading": ["handleLoadingChange"],
+        "disabled": ["handleDisabledChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-button", "nv-loader"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvButton);
+            }
+            break;
+        case "nv-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { NvButton as N, defineCustomElement as d };
+
+//# sourceMappingURL=p-af663ff5.js.map

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

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

package/dist/components/{p-49205084.js → p-bcf9d309.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5829b9f7.js';
-import { d as defineCustomElement$1 } from './p-946a047c.js';
+import { d as defineCustomElement$1 } from './p-743b3452.js';
 import { v as v4 } from './p-f5ff676c.js';
 
 const nvFieldtextCss = "nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldtext{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldtext[fluid]:not([fluid=false]){max-width:unset}nv-fieldtext[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtext[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldtext[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtext[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldtext>label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-fieldtext>.input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtext>.input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtext>.input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtext>.input-wrapper .input-container:focus-within,nv-fieldtext>.input-wrapper .input-container:focus-within:hover,nv-fieldtext>.input-wrapper .input-container:focus,nv-fieldtext>.input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtext>.input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtext>.input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtext>.input-wrapper .input-container>[slot=leading-input]{display:block;margin-left:var(--form-field-padding-x)}nv-fieldtext>.input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);width:100%;}nv-fieldtext>.input-wrapper .input-container input:focus{outline:none}nv-fieldtext>.input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fieldtext>.input-wrapper .input-container input[type=password]::-ms-clear,nv-fieldtext>.input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldtext>.input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default);margin-right:var(--form-gap-x)}nv-fieldtext>.input-wrapper .input-container>[slot=trailing-input]{display:block;margin-right:var(--form-field-padding-x)}nv-fieldtext>.description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtext>.error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
@@ -110,9 +110,9 @@ const NvFieldtext = /*@__PURE__*/ proxyCustomElement(class NvFieldtext extends H
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '59c03a594971eab5cb8ae4bf7b5342899bba4336' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'a36f03b76cee03be0fe2608fd40a88455818a83b', htmlFor: this.inputId }, h("slot", { key: '284a3f6f9efaed1ee7a40675fd377bdbe3d08d9e', name: "label" }, this.label))), h("div", { key: '963b853f5de42058d1cdced00c7bdc38f4583000', class: "input-wrapper" }, h("slot", { key: 'dce7ea85a9ae76c923ea3dc732d93614b94ba391', name: "before-input" }), h("div", { key: 'eac7b8e1d85f9623287f839cdc7ef3133c9c75d8', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'db3ab29c4a0767ffc8f8c1368085052769bdc4cc', name: "leading-input" }), h("input", { key: 'd4759f1dd7bab6da0a4486cf326cb55c61fcb750', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), h("slot", { key: 'e8950b2b41ce5e350e39084c3d6936a1a11960e4', name: "trailing-input" }), this.error && (h("nv-icon", { key: '83eb974690dfd69858877ba434e4dd30802208c8', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '2b8e37bd41e2b98ae17a249379528dd6e1773e6e', name: "circle-check", class: "validation", size: "md" }))), h("slot", { key: '72e5ae030d15c61409095f4067436ee890d21a1e', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '54a353743334cf7d96597a543d0e2a7c52833a31', class: "description" }, h("slot", { key: '70dd9595b638f0dc56db6ecb24a93fcca629a2d3', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '47a26240ae8875cedb50b95d0ad41dab762af6d3', hidden: !this.error, class: "error-description" }, h("slot", { key: '0c84a7c46128a5c0960b5e2ecfda94f76ef9d7d7', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '0446a4e7617f7a0dd1d617411f13f7ed9ab457e7' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '3fa66b23875eac14db7a52deb0fb8134cda4747b', htmlFor: this.inputId }, h("slot", { key: 'd2d145a273fe7790f6551a4f42564c438c659cbf', name: "label" }, this.label))), h("div", { key: 'b6ca6d9125460402ac1cfc0ed5f57b6db3214edf', class: "input-wrapper" }, h("slot", { key: '33331c013dd5d981136518045a8a460c3ab96070', name: "before-input" }), h("div", { key: '405dc274db9b87fd82f50ecf8653414deb7b1206', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '4b85c02e7c7f7f655c76cac3997d7b4377c9d4b4', name: "leading-input" }), h("input", { key: 'f6e083e97ab21e487bb28190a008469ffa282048', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), h("slot", { key: '019627575fed51776eeb964dafe85c9a0e2e8efe', name: "trailing-input" }), this.error && (h("nv-icon", { key: '0a2952a550e1a3cdc54a97968d8746914ce492d8', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '874f24d0c3522b8d6a2f65069b68d04dba8fae61', name: "circle-check", class: "validation", size: "md" }))), h("slot", { key: '38f43d5e912df5adaf8587b8efb9d44cccadec50', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'c681d56939dc0068fc12842699e74f87d9446fe7', class: "description" }, h("slot", { key: '6b2f715fb44a46efbc3cfb98709173804472499e', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'f5354afc7bfacec7f7ff58e331e9011bb43da399', hidden: !this.error, class: "error-description" }, h("slot", { key: 'e127f81bf4a9205c94a461fd1555c07783b489a3', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }
@@ -164,4 +164,4 @@ defineCustomElement();
 
 export { NvFieldtext as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-49205084.js.map
+//# sourceMappingURL=p-bcf9d309.js.map