@nova-design-system/nova-webcomponents 3.0.0-beta.28 → 3.0.0-beta.29

package/dist/collection/components/nv-avatar/nv-avatar.js

@@ -6,17 +6,14 @@ import { SemanticSizes } from "../../utils/constants";
  */
 export class NvAvatar {
     constructor() {
-        this.xsmall = undefined;
-        this.small = undefined;
-        this.medium = undefined;
-        this.large = undefined;
-        this.xlarge = undefined;
-        this.text = undefined;
-        this.url = undefined;
-        this.alt = undefined;
-        this.src = undefined;
-        this.initials = undefined;
+        /**
+         * Define the size of the avatar. You can use t-shirt sizes.
+         */
         this.size = 'md';
+        /**
+         * You can apply different colors on the Avatar.
+         * Use a string number between 1 and 10.
+         */
         this.color = '1';
     }
     componentWillRender() {
@@ -89,6 +86,8 @@ export class NvAvatar {
                         }],
                     "text": "Set size to ExtraSmall to the avatar."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "xsmall",
                 "reflect": false
             },
@@ -109,6 +108,8 @@ export class NvAvatar {
                         }],
                     "text": "Set size to Small to the avatar."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "small",
                 "reflect": false
             },
@@ -129,6 +130,8 @@ export class NvAvatar {
                         }],
                     "text": "Set size to Medium to the avatar."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "medium",
                 "reflect": false
             },
@@ -149,6 +152,8 @@ export class NvAvatar {
                         }],
                     "text": "Set size to Large to the avatar."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "large",
                 "reflect": false
             },
@@ -169,6 +174,8 @@ export class NvAvatar {
                         }],
                     "text": "Set size to ExtraLarge to the avatar."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "xlarge",
                 "reflect": false
             },
@@ -189,6 +196,8 @@ export class NvAvatar {
                         }],
                     "text": "Set initials to the avatar."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "text",
                 "reflect": false
             },
@@ -209,6 +218,8 @@ export class NvAvatar {
                         }],
                     "text": "Set src to the avatar."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "url",
                 "reflect": false
             },
@@ -226,6 +237,8 @@ export class NvAvatar {
                     "tags": [],
                     "text": "If and image is provided, add an alt tag to describe it."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "alt",
                 "reflect": true
             },
@@ -243,6 +256,8 @@ export class NvAvatar {
                     "tags": [],
                     "text": "Will insert an image into the avatar."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "src",
                 "reflect": true
             },
@@ -260,6 +275,8 @@ export class NvAvatar {
                     "tags": [],
                     "text": "Initials of the avatar. Usually use two letters\nWhen filled with the src parameter, the text will not be rendered."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "initials",
                 "reflect": true
             },
@@ -283,6 +300,8 @@ export class NvAvatar {
                     "tags": [],
                     "text": "Define the size of the avatar. You can use t-shirt sizes."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": true,
                 "defaultValue": "'md'"
@@ -301,6 +320,8 @@ export class NvAvatar {
                     "tags": [],
                     "text": "You can apply different colors on the Avatar.\nUse a string number between 1 and 10."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "color",
                 "reflect": true,
                 "defaultValue": "'1'"

package/dist/collection/components/nv-avatar/nv-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-avatar.js","sourceRoot":"","sources":["../../../src/components/nv-avatar/nv-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD;;GAEG;AAMH,MAAM,OAAO,QAAQ;;;;;;;;;;;;oBAyGQ,IAAI;qBAON,GAAG;;IA1D5B,mBAAmB;QACjB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,UAAU,CAAC;QACvC,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC;QAClC,CAAC;QACD,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,MAAM,CAAC;QACnC,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC;QAClC,CAAC;QACD,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,UAAU,CAAC;QACvC,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;QAC5B,CAAC;QACD,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QACtB,CAAC;IACH,CAAC;IAsCD,uBAAuB;IACvB,8EAA8E;IAC9E,iBAAiB;IAEjB;;;;OAIG;IACK,YAAY,CAAC,QAAgB;QACnC,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACzC,CAAC;IAED,oBAAoB;IACpB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,EAAE,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE,CAAC,gBACpD,IAAI,CAAC,GAAG,IAEnB,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CACV,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CACtC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAClB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CACjC,CAAC,CAAC,CAAC,CACF,YAAM,IAAI,EAAC,MAAM;YACf,eAAS,IAAI,EAAC,MAAM,GAAG,CAClB,CACR,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { SemanticSizes } from '../../utils/constants';\n\n/**\n * @slot icon - if you want to add an icon to the avatar, use this slot with an svg or nv-icon\n */\n@Component({\n  tag: 'nv-avatar',\n  styleUrl: 'nv-avatar.scss',\n  shadow: false,\n})\nexport class NvAvatar {\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Set size to ExtraSmall to the avatar.\n   * @deprecated use size instead.\n   */\n  @Prop()\n  readonly xsmall: boolean;\n\n  /**\n   * Set size to Small to the avatar.\n   * @deprecated use size instead.\n   */\n  @Prop()\n  readonly small: boolean;\n\n  /**\n   * Set size to Medium to the avatar.\n   * @deprecated use size instead.\n   */\n  @Prop()\n  readonly medium: boolean;\n\n  /**\n   * Set size to Large to the avatar.\n   * @deprecated use size instead.\n   */\n  @Prop()\n  readonly large: boolean;\n\n  /**\n   * Set size to ExtraLarge to the avatar.\n   * @deprecated use size instead.\n   */\n  @Prop()\n  readonly xlarge: boolean;\n\n  /**\n   * Set initials to the avatar.\n   * @deprecated use initials instead.\n   */\n\n  @Prop()\n  readonly text: string;\n\n  /**\n   * Set src to the avatar.\n   * @deprecated use src instead.\n   */\n  @Prop()\n  readonly url: string;\n\n  componentWillRender() {\n    if (this.xsmall) {\n      this.size = SemanticSizes.ExtraSmall;\n    }\n    if (this.small) {\n      this.size = SemanticSizes.Small;\n    }\n    if (this.medium) {\n      this.size = SemanticSizes.Medium;\n    }\n    if (this.large) {\n      this.size = SemanticSizes.Large;\n    }\n    if (this.xlarge) {\n      this.size = SemanticSizes.ExtraLarge;\n    }\n    if (this.text) {\n      this.initials = this.text;\n    }\n    if (this.url) {\n      this.src = this.url;\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * If and image is provided, add an alt tag to describe it.\n   */\n  @Prop({ reflect: true })\n  readonly alt: string;\n\n  /**\n   * Will insert an image into the avatar.\n   */\n  @Prop({ reflect: true, mutable: true })\n  src: string;\n\n  /**\n   * Initials of the avatar. Usually use two letters\n   * When filled with the src parameter, the text will not be rendered.\n   */\n  @Prop({ reflect: true, mutable: true })\n  initials: string;\n\n  /**\n   * Define the size of the avatar. You can use t-shirt sizes.\n   */\n  @Prop({ reflect: true, mutable: true })\n  size: `${SemanticSizes}` = 'md';\n\n  /**\n   * You can apply different colors on the Avatar.\n   * Use a string number between 1 and 10.\n   */\n  @Prop({ reflect: true })\n  readonly color: string = '1';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Makes sure the initials are trimmed to 2 letters.\n   * @param {string} initials - The initials to be trimmed.\n   * @returns {string} The trimmed initials.\n   */\n  private trimInitials(initials: string): string {\n    return initials.trim().substring(0, 2);\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(`avatar-${this.size}`, `avatar-color-${this.color}`)}\n        aria-label={this.alt}\n      >\n        {this.src ? (\n          <img src={this.src} alt={this.alt} />\n        ) : this.initials ? (\n          this.trimInitials(this.initials)\n        ) : (\n          <slot name=\"icon\">\n            <nv-icon name=\"user\" />\n          </slot>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}
+{"version":3,"file":"nv-avatar.js","sourceRoot":"","sources":["../../../src/components/nv-avatar/nv-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD;;GAEG;AAMH,MAAM,OAAO,QAAQ;IALrB;QA0GE;;WAEG;QAEH,SAAI,GAAuB,IAAI,CAAC;QAEhC;;;WAGG;QAEM,UAAK,GAAW,GAAG,CAAC;KAuC9B;IAjGC,mBAAmB;QACjB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,UAAU,CAAC;QACvC,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC;QAClC,CAAC;QACD,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,MAAM,CAAC;QACnC,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC;QAClC,CAAC;QACD,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,UAAU,CAAC;QACvC,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;QAC5B,CAAC;QACD,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QACtB,CAAC;IACH,CAAC;IAsCD,uBAAuB;IACvB,8EAA8E;IAC9E,iBAAiB;IAEjB;;;;OAIG;IACK,YAAY,CAAC,QAAgB;QACnC,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACzC,CAAC;IAED,oBAAoB;IACpB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,EAAE,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE,CAAC,gBACpD,IAAI,CAAC,GAAG,IAEnB,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CACV,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CACtC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAClB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CACjC,CAAC,CAAC,CAAC,CACF,YAAM,IAAI,EAAC,MAAM;YACf,eAAS,IAAI,EAAC,MAAM,GAAG,CAClB,CACR,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { SemanticSizes } from '../../utils/constants';\n\n/**\n * @slot icon - if you want to add an icon to the avatar, use this slot with an svg or nv-icon\n */\n@Component({\n  tag: 'nv-avatar',\n  styleUrl: 'nv-avatar.scss',\n  shadow: false,\n})\nexport class NvAvatar {\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Set size to ExtraSmall to the avatar.\n   * @deprecated use size instead.\n   */\n  @Prop()\n  readonly xsmall: boolean;\n\n  /**\n   * Set size to Small to the avatar.\n   * @deprecated use size instead.\n   */\n  @Prop()\n  readonly small: boolean;\n\n  /**\n   * Set size to Medium to the avatar.\n   * @deprecated use size instead.\n   */\n  @Prop()\n  readonly medium: boolean;\n\n  /**\n   * Set size to Large to the avatar.\n   * @deprecated use size instead.\n   */\n  @Prop()\n  readonly large: boolean;\n\n  /**\n   * Set size to ExtraLarge to the avatar.\n   * @deprecated use size instead.\n   */\n  @Prop()\n  readonly xlarge: boolean;\n\n  /**\n   * Set initials to the avatar.\n   * @deprecated use initials instead.\n   */\n\n  @Prop()\n  readonly text: string;\n\n  /**\n   * Set src to the avatar.\n   * @deprecated use src instead.\n   */\n  @Prop()\n  readonly url: string;\n\n  componentWillRender() {\n    if (this.xsmall) {\n      this.size = SemanticSizes.ExtraSmall;\n    }\n    if (this.small) {\n      this.size = SemanticSizes.Small;\n    }\n    if (this.medium) {\n      this.size = SemanticSizes.Medium;\n    }\n    if (this.large) {\n      this.size = SemanticSizes.Large;\n    }\n    if (this.xlarge) {\n      this.size = SemanticSizes.ExtraLarge;\n    }\n    if (this.text) {\n      this.initials = this.text;\n    }\n    if (this.url) {\n      this.src = this.url;\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * If and image is provided, add an alt tag to describe it.\n   */\n  @Prop({ reflect: true })\n  readonly alt: string;\n\n  /**\n   * Will insert an image into the avatar.\n   */\n  @Prop({ reflect: true, mutable: true })\n  src: string;\n\n  /**\n   * Initials of the avatar. Usually use two letters\n   * When filled with the src parameter, the text will not be rendered.\n   */\n  @Prop({ reflect: true, mutable: true })\n  initials: string;\n\n  /**\n   * Define the size of the avatar. You can use t-shirt sizes.\n   */\n  @Prop({ reflect: true, mutable: true })\n  size: `${SemanticSizes}` = 'md';\n\n  /**\n   * You can apply different colors on the Avatar.\n   * Use a string number between 1 and 10.\n   */\n  @Prop({ reflect: true })\n  readonly color: string = '1';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Makes sure the initials are trimmed to 2 letters.\n   * @param {string} initials - The initials to be trimmed.\n   * @returns {string} The trimmed initials.\n   */\n  private trimInitials(initials: string): string {\n    return initials.trim().substring(0, 2);\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(`avatar-${this.size}`, `avatar-color-${this.color}`)}\n        aria-label={this.alt}\n      >\n        {this.src ? (\n          <img src={this.src} alt={this.alt} />\n        ) : this.initials ? (\n          this.trimInitials(this.initials)\n        ) : (\n          <slot name=\"icon\">\n            <nv-icon name=\"user\" />\n          </slot>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

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

@@ -131,6 +131,76 @@ nv-badge.badge-5 .close:focus-visible, nv-badge.badge-5 .close:has(:focus-visibl
 nv-badge.badge-5 nv-icon {
   color: var(--color-rainbow-5-content);
 }
+nv-badge.badge-6 {
+  color: var(--color-rainbow-6-content);
+  background-color: var(--color-rainbow-6-background);
+}
+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: var(--focus-outline-stroke) 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-content);
+}
+nv-badge.badge-7 {
+  color: var(--color-rainbow-7-content);
+  background-color: var(--color-rainbow-7-background);
+}
+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: var(--focus-outline-stroke) 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-content);
+}
+nv-badge.badge-8 {
+  color: var(--color-rainbow-8-content);
+  background-color: var(--color-rainbow-8-background);
+}
+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: var(--focus-outline-stroke) 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-content);
+}
+nv-badge.badge-9 {
+  color: var(--color-rainbow-9-content);
+  background-color: var(--color-rainbow-9-background);
+}
+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: var(--focus-outline-stroke) 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-content);
+}
+nv-badge.badge-10 {
+  color: var(--color-rainbow-10-content);
+  background-color: var(--color-rainbow-10-background);
+}
+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: var(--focus-outline-stroke) 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-content);
+}
 nv-badge span {
   font-size: var(--font-size-xs);
   line-height: var(--line-height-xs) !important;

package/dist/collection/components/nv-badge/nv-badge.docs.js

@@ -20,7 +20,7 @@ const NvBadgeDocs = {
         },
         {
             name: nameof(x => x.color),
-            template: (h("div", { "data-class": "flex gap-4" }, h("nv-badge", { "data-storybook-args": true, color: "1", label: "Badge color 1" }), h("nv-badge", { "data-storybook-args": true, color: "2", label: "Badge color 2" }), h("nv-badge", { "data-storybook-args": true, color: "3", label: "Badge color 3" }), h("nv-badge", { "data-storybook-args": true, color: "4", label: "Badge color 4" }), h("nv-badge", { "data-storybook-args": true, color: "5", label: "Badge color 5" }))),
+            template: (h("div", { "data-class": "flex gap-4" }, h("nv-badge", { "data-storybook-args": true, color: "1", label: "Badge color 1" }), h("nv-badge", { "data-storybook-args": true, color: "2", label: "Badge color 2" }), h("nv-badge", { "data-storybook-args": true, color: "3", label: "Badge color 3" }), h("nv-badge", { "data-storybook-args": true, color: "4", label: "Badge color 4" }), h("nv-badge", { "data-storybook-args": true, color: "5", label: "Badge color 5" }), h("nv-badge", { "data-storybook-args": true, color: "6", label: "Badge color 6" }), h("nv-badge", { "data-storybook-args": true, color: "7", label: "Badge color 7" }), h("nv-badge", { "data-storybook-args": true, color: "8", label: "Badge color 8" }), h("nv-badge", { "data-storybook-args": true, color: "9", label: "Badge color 9" }), h("nv-badge", { "data-storybook-args": true, color: "10", label: "Badge color 10" }))),
         },
         {
             name: nameof(x => x.leadIcon),

package/dist/collection/components/nv-badge/nv-badge.docs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-badge.docs.js","sourceRoot":"","sources":["../../../src/components/nv-badge/nv-badge.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,WAAW,GAAiC;IAChD,SAAS,EAAE,UAAU;IACrB,aAAa,EAAE,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,IAAI,EAAE;gBACJ,KAAK,EAAE,OAAO;aACf;YACD,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;YAC9C,IAAI,EAAE;gBACJ,KAAK,EAAE,aAAa;aACrB;YACD,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;YAC9C,QAAQ,EAAE,CACR,yBAAgB,YAAY;gBAC1B,6CAEE,KAAK,EAAC,GAAG,EACT,KAAK,EAAC,eAAe,GACX;gBACZ,6CAEE,KAAK,EAAC,GAAG,EACT,KAAK,EAAC,eAAe,GACX;gBACZ,6CAEE,KAAK,EAAC,GAAG,EACT,KAAK,EAAC,eAAe,GACX;gBACZ,6CAEE,KAAK,EAAC,GAAG,EACT,KAAK,EAAC,eAAe,GACX;gBACZ,6CAEE,KAAK,EAAC,GAAG,EACT,KAAK,EAAC,eAAe,GACX,CACR,CACP;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;YACjD,IAAI,EAAE;gBACJ,QAAQ,EAAE,MAAM;gBAChB,KAAK,EAAE,iBAAiB;aACzB;YACD,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,iBAAiB;YACvB,WAAW,EAAE,qBAAqB;YAClC,IAAI,EAAE;gBACJ,KAAK,EAAE,iBAAiB;aACzB;YACD,QAAQ,EAAE,CACR;gBACE,eAAS,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAW,CAC1C,CACZ;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;YACpD,WAAW,EAAE,8BAA8B;YAC3C,IAAI,EAAE;gBACJ,WAAW,EAAE,IAAI;gBACjB,KAAK,EAAE,mBAAmB;aAC3B;YACD,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;YAC/C,WAAW,EAAE,0BAA0B;YACvC,IAAI,EAAE;gBACJ,MAAM,EAAE,IAAI;gBACZ,KAAK,EAAE,cAAc;aACtB;YACD,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;YACzD,WAAW,EAAE,gCAAgC;YAC7C,IAAI,EAAE;gBACJ,gBAAgB,EAAE,IAAI;gBACtB,WAAW,EAAE,IAAI;gBACjB,KAAK,EAAE,0BAA0B;aAClC;YACD,QAAQ,EAAE,8CAAyC;SACpD;KACF;CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvBadgeDocs: NovaDocs<Components.NvBadge> = {\n  component: 'nv-badge',\n  subcomponents: ['nv-icon'],\n  stories: [\n    {\n      name: 'Default',\n      args: {\n        label: 'Label',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.label),\n      args: {\n        label: 'Badge Label',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.color),\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-badge\n            data-storybook-args\n            color=\"1\"\n            label=\"Badge color 1\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"2\"\n            label=\"Badge color 2\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"3\"\n            label=\"Badge color 3\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"4\"\n            label=\"Badge color 4\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"5\"\n            label=\"Badge color 5\"\n          ></nv-badge>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.leadIcon),\n      args: {\n        leadIcon: 'user',\n        label: 'Badge with Icon',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: 'LeadingIconSlot',\n      description: 'Badge with an icon.',\n      args: {\n        label: 'Badge with Icon',\n      },\n      template: (\n        <nv-badge data-storybook-args>\n          <nv-icon slot=\"leading-icon\" name=\"user\"></nv-icon>\n        </nv-badge>\n      ),\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.dismissible),\n      description: 'Badge with a dismiss button.',\n      args: {\n        dismissible: true,\n        label: 'Dismissible Badge',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.hidden),\n      description: 'Badge with hidden state.',\n      args: {\n        hidden: true,\n        label: 'Hidden Badge',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.preventAutoClose),\n      description: 'Badge with prevent auto close.',\n      args: {\n        preventAutoClose: true,\n        dismissible: true,\n        label: 'Prevent Auto Close Badge',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n  ],\n};\n\nexport default NvBadgeDocs;\n"]}
+{"version":3,"file":"nv-badge.docs.js","sourceRoot":"","sources":["../../../src/components/nv-badge/nv-badge.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvBadgeDocs: NovaDocs<Components.NvBadge> = {\n  component: 'nv-badge',\n  subcomponents: ['nv-icon'],\n  stories: [\n    {\n      name: 'Default',\n      args: {\n        label: 'Label',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.label),\n      args: {\n        label: 'Badge Label',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.color),\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-badge\n            data-storybook-args\n            color=\"1\"\n            label=\"Badge color 1\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"2\"\n            label=\"Badge color 2\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"3\"\n            label=\"Badge color 3\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"4\"\n            label=\"Badge color 4\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"5\"\n            label=\"Badge color 5\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"6\"\n            label=\"Badge color 6\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"7\"\n            label=\"Badge color 7\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"8\"\n            label=\"Badge color 8\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"9\"\n            label=\"Badge color 9\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"10\"\n            label=\"Badge color 10\"\n          ></nv-badge>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.leadIcon),\n      args: {\n        leadIcon: 'user',\n        label: 'Badge with Icon',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: 'LeadingIconSlot',\n      description: 'Badge with an icon.',\n      args: {\n        label: 'Badge with Icon',\n      },\n      template: (\n        <nv-badge data-storybook-args>\n          <nv-icon slot=\"leading-icon\" name=\"user\"></nv-icon>\n        </nv-badge>\n      ),\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.dismissible),\n      description: 'Badge with a dismiss button.',\n      args: {\n        dismissible: true,\n        label: 'Dismissible Badge',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.hidden),\n      description: 'Badge with hidden state.',\n      args: {\n        hidden: true,\n        label: 'Hidden Badge',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.preventAutoClose),\n      description: 'Badge with prevent auto close.',\n      args: {\n        preventAutoClose: true,\n        dismissible: true,\n        label: 'Prevent Auto Close Badge',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n  ],\n};\n\nexport default NvBadgeDocs;\n"]}

package/dist/collection/components/nv-badge/nv-badge.js

@@ -6,6 +6,42 @@ import { useFade, useCollapse, timeline } from "../../animations";
  */
 export class NvBadge {
     constructor() {
+        /****************************************************************************/
+        //#region DEPRECATED
+        /**
+         * Whether the badge is dismissible.
+         * @deprecated use dismissible instead.
+         */
+        this.dismissal = false;
+        //#endregion DEPRECATED
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * The color of the badge. Use a string between 1 to 10
+         */
+        this.color = '1';
+        /**
+         * Main content of the badge.
+         */
+        this.label = null;
+        /**
+         * The lead icon of the badge.
+         */
+        this.leadIcon = null;
+        /**
+         * Whether the badge is dismissible.
+         */
+        this.dismissible = false;
+        /**
+         * Controls the visibility of the badge. Will animate with fade and collapse.
+         */
+        this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
+        this._isHidden = this.hidden;
+        /**
+         * When true, the alert does not automatically close upon dismissing.
+         * Useful for externally controlled component behavior.
+         */
+        this.preventAutoClose = false;
         //#endregion LIFECYCLE
         /****************************************************************************/
         //#region METHODS
@@ -19,16 +55,6 @@ export class NvBadge {
             }
             this.closeClicked.emit(originalEvent);
         };
-        this.dismissal = false;
-        this.icon = undefined;
-        this.iconLocation = undefined;
-        this.color = '1';
-        this.label = null;
-        this.leadIcon = null;
-        this.dismissible = false;
-        this.hidden = false;
-        this._isHidden = this.hidden;
-        this.preventAutoClose = false;
     }
     //#endregion EVENTS
     /****************************************************************************/
@@ -89,11 +115,11 @@ export class NvBadge {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '230bec882e7425786c0a57434b1d6fde7a5d19bc', class: clsx(`badge-${this.color}`, {
+        return (h(Host, { key: '18d3a28777aa74117ccc68aa0c889ea716b90d56', class: clsx(`badge-${this.color}`, {
                 'has-close': this.dismissible,
                 'with-gap': this.dismissible || this.label,
                 'visually-hidden': this._isHidden,
-            }) }, h("slot", { key: 'cfeeaed354a34cbe1eaf1caeed9456b630a07265', name: "leading-icon" }, this.leadIcon && (h("nv-icon", { key: '10031f4f26339860458f1413b171916cbc97f98f', slot: "leading-icon", name: this.leadIcon, size: "sm" }))), this.label && h("span", { key: '8d165b104e3952c61084f1473d31ce1a05404966' }, this.label), this.dismissible && (h("button", { key: '8320177e0ac7f8c4f5d09b6c947d81d0eddadb4f', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: '3298bd640cb7bb62923e5f1e650944afc01a7385', name: "x", size: "sm" })))));
+            }) }, h("slot", { key: '87ac2dd4ae3ba521d1a6b15394d79c85c1899102', name: "leading-icon" }, this.leadIcon && (h("nv-icon", { key: '22fbc091fe0c861e9a6ce12e5ba1b8d0e83ca7da', slot: "leading-icon", name: this.leadIcon, size: "sm" }))), this.label && h("span", { key: '040559657d6a337b2cd3ce265d2e99cdd0245324' }, this.label), this.dismissible && (h("button", { key: 'd0f992bdf748be5bf63d7a3e9864f96cad4dfae7', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: '60915e33efb355a5e2820507fe2365ba4e602c26', name: "x", size: "sm" })))));
     }
     static get is() { return "nv-badge"; }
     static get originalStyleUrls() {
@@ -125,6 +151,8 @@ export class NvBadge {
                         }],
                     "text": "Whether the badge is dismissible."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "dismissal",
                 "reflect": false,
                 "defaultValue": "false"
@@ -146,6 +174,8 @@ export class NvBadge {
                         }],
                     "text": "The icon to display in the badge."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon",
                 "reflect": false
             },
@@ -166,6 +196,8 @@ export class NvBadge {
                         }],
                     "text": "The location of the icon in the badge."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon-location",
                 "reflect": true
             },
@@ -181,8 +213,10 @@ export class NvBadge {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The color of the badge. Use a string between 1 to 5"
+                    "text": "The color of the badge. Use a string between 1 to 10"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "color",
                 "reflect": true,
                 "defaultValue": "'1'"
@@ -201,6 +235,8 @@ export class NvBadge {
                     "tags": [],
                     "text": "Main content of the badge."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": true,
                 "defaultValue": "null"
@@ -219,6 +255,8 @@ export class NvBadge {
                     "tags": [],
                     "text": "The lead icon of the badge."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "lead-icon",
                 "reflect": true,
                 "defaultValue": "null"
@@ -237,6 +275,8 @@ export class NvBadge {
                     "tags": [],
                     "text": "Whether the badge is dismissible."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "dismissible",
                 "reflect": true,
                 "defaultValue": "false"
@@ -255,6 +295,8 @@ export class NvBadge {
                     "tags": [],
                     "text": "Controls the visibility of the badge. Will animate with fade and collapse."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "hidden",
                 "reflect": true,
                 "defaultValue": "false"
@@ -273,6 +315,8 @@ export class NvBadge {
                     "tags": [],
                     "text": "When true, the alert does not automatically close upon dismissing.\nUseful for externally controlled component behavior."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "prevent-auto-close",
                 "reflect": true,
                 "defaultValue": "false"

package/dist/collection/components/nv-badge/nv-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-badge.js","sourceRoot":"","sources":["../../../src/components/nv-badge/nv-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["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 */\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()\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()\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. Use a string between 1 to 5\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 = this.hidden;\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  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the badge is dismissed.\n   */\n  @Event()\n  closeClicked: EventEmitter<MouseEvent>;\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      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   * @param {MouseEvent} originalEvent - The original event.\n   */\n  private readonly handleClose = (originalEvent?: MouseEvent) => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit(originalEvent);\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        })}\n      >\n        <slot name=\"leading-icon\">\n          {this.leadIcon && (\n            <nv-icon\n              slot=\"leading-icon\"\n              name={this.leadIcon}\n              size=\"sm\"\n            ></nv-icon>\n          )}\n        </slot>\n        {this.label && <span>{this.label}</span>}\n        {this.dismissible && (\n          <button onClick={this.handleClose} class=\"close\" type=\"button\">\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}
+{"version":3,"file":"nv-badge.js","sourceRoot":"","sources":["../../../src/components/nv-badge/nv-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["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 */\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()\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()\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. Use a string between 1 to 10\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 = this.hidden;\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  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the badge is dismissed.\n   */\n  @Event()\n  closeClicked: EventEmitter<MouseEvent>;\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      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   * @param {MouseEvent} originalEvent - The original event.\n   */\n  private readonly handleClose = (originalEvent?: MouseEvent) => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit(originalEvent);\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        })}\n      >\n        <slot name=\"leading-icon\">\n          {this.leadIcon && (\n            <nv-icon\n              slot=\"leading-icon\"\n              name={this.leadIcon}\n              size=\"sm\"\n            ></nv-icon>\n          )}\n        </slot>\n        {this.label && <span>{this.label}</span>}\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"]}

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

@@ -7,6 +7,45 @@ import { ButtonSize } from "../../utils/constants";
  */
 export class NvButton {
     constructor() {
+        /****************************************************************************/
+        //#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';
+        /**
+         * 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';
         //#endregion PROPERTIES
         /****************************************************************************/
         //#region METHODS
@@ -29,13 +68,6 @@ export class NvButton {
                 (_d = (_c = this.internals) === null || _c === void 0 ? void 0 : _c.form) === null || _d === void 0 ? void 0 : _d.reset();
             }
         };
-        this.size = 'md';
-        this.emphasis = 'high';
-        this.danger = false;
-        this.loading = false;
-        this.disabled = false;
-        this.fluid = false;
-        this.type = 'button';
     }
     //#endregion METHODS
     /****************************************************************************/
@@ -100,6 +132,8 @@ export class NvButton {
                     "tags": [],
                     "text": "Determines how large or small the button appears, allowing for\ncustomization of the button's dimensions to fit different design\nspecifications and user needs."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": true,
                 "defaultValue": "'md'"
@@ -124,6 +158,8 @@ export class NvButton {
                     "tags": [],
                     "text": "Adjusts the button's emphasis to make it more or less visually prominent\nto users. Use this to draw attention to important actions or reduce focus\non less critical ones"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "emphasis",
                 "reflect": true,
                 "defaultValue": "'high'"
@@ -142,6 +178,8 @@ export class NvButton {
                     "tags": [],
                     "text": "Applies styling that visually indicates the button represents a dangerous\naction."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "danger",
                 "reflect": true,
                 "defaultValue": "false"
@@ -160,6 +198,8 @@ export class NvButton {
                     "tags": [],
                     "text": "Set this to true to show a spinner on the button, letting users know that\ntheir action is being processed. It helps improve user experience by\nindicating ongoing activities."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "loading",
                 "reflect": true,
                 "defaultValue": "false"
@@ -178,6 +218,8 @@ export class NvButton {
                     "tags": [],
                     "text": "Disables the button, preventing user interaction."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
@@ -196,6 +238,8 @@ export class NvButton {
                     "tags": [],
                     "text": "Allows the button to stretch and fill the entire width of its container."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "fluid",
                 "reflect": true,
                 "defaultValue": "false"
@@ -220,6 +264,8 @@ export class NvButton {
                     "tags": [],
                     "text": "Sets the button type to control its function in forms. Use 'submit' to send\nform data, 'reset' to clear the form, or 'button' for a standard button\nthat doesn\u2019t interact with form submission by default."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": true,
                 "defaultValue": "'button'"

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

@@ -1 +1 @@
-{"version":3,"file":"nv-button.js","sourceRoot":"","sources":["../../../src/components/nv-button/nv-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,eAAe,EACf,OAAO,EACP,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,UAAU,EAA8B,MAAM,uBAAuB,CAAC;AAE/E;;;;GAIG;AAOH,MAAM,OAAO,QAAQ;;QA0DnB,uBAAuB;QACvB,8EAA8E;QAC9E,iBAAiB;QAEjB;;;;;WAKG;QACK,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;;YACrC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;gBAC3B,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,aAAa,EAAE,CAAC;YACxC,CAAC;YACD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;gBAC1B,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,KAAK,EAAE,CAAC;YAChC,CAAC;QACH,CAAC,CAAC;oBAnE+B,IAAI;wBAQI,MAAM;sBAOpB,KAAK;uBAQb,KAAK;wBAMJ,KAAK;qBAMC,KAAK;oBAQE,QAAQ;;IA0BzC,oBAAoB;IACpB,8EAA8E;IAC9E,kBAAkB;IAGlB,mBAAmB,CAAC,OAAgB;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;IAC1B,CAAC;IAGD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;QAC/B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,qBAAqB;IACrB,8EAA8E;IAC9E,mBAAmB;IAEnB,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,sBAAsB;IACtB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW;YACvD,IAAI,CAAC,OAAO,IAAI,CACf,kEACE,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,GACvC,CACd;YAED,6DAAM,IAAI,EAAC,cAAc,GAAQ;YACjC,8DAAa;YACb,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC7B,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","sourcesContent":["import {\n  Component,\n  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: '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   * 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  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles form-related actions when the button is clicked.\n   * - Submits the form if the button type is 'submit'.\n   * - Resets the form if the button type is 'reset'.\n   * @param {Event} event - The click event.\n   */\n  private handleClick = (event: Event) => {\n    if (this.loading || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (this.type === 'submit') {\n      this.internals?.form?.requestSubmit();\n    }\n    if (this.type === 'reset') {\n      this.internals?.form?.reset();\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"button\" tabindex=\"0\" onClick={this.handleClick}>\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,"file":"nv-button.js","sourceRoot":"","sources":["../../../src/components/nv-button/nv-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,eAAe,EACf,OAAO,EACP,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,UAAU,EAA8B,MAAM,uBAAuB,CAAC;AAE/E;;;;GAIG;AAOH,MAAM,OAAO,QAAQ;IANrB;QAUE,8EAA8E;QAC9E,oBAAoB;QAEpB;;;;WAIG;QAEM,SAAI,GAAoB,IAAI,CAAC;QAEtC;;;;WAIG;QAEM,aAAQ,GAAwB,MAAM,CAAC;QAEhD;;;WAGG;QAEM,WAAM,GAAY,KAAK,CAAC;QAEjC;;;;WAIG;QAEH,YAAO,GAAY,KAAK,CAAC;QAEzB;;WAEG;QAEH,aAAQ,GAAY,KAAK,CAAC;QAE1B;;WAEG;QAEM,UAAK,GAAY,KAAK,CAAC;QAEhC;;;;WAIG;QAEM,SAAI,GAAoB,QAAQ,CAAC;QAE1C,uBAAuB;QACvB,8EAA8E;QAC9E,iBAAiB;QAEjB;;;;;WAKG;QACK,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;;YACrC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;gBAC3B,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,aAAa,EAAE,CAAC;YACxC,CAAC;YACD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;gBAC1B,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,KAAK,EAAE,CAAC;YAChC,CAAC;QACH,CAAC,CAAC;KAoDH;IAlDC,oBAAoB;IACpB,8EAA8E;IAC9E,kBAAkB;IAGlB,mBAAmB,CAAC,OAAgB;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;IAC1B,CAAC;IAGD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;QAC/B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,qBAAqB;IACrB,8EAA8E;IAC9E,mBAAmB;IAEnB,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,sBAAsB;IACtB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW;YACvD,IAAI,CAAC,OAAO,IAAI,CACf,kEACE,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,GACvC,CACd;YAED,6DAAM,IAAI,EAAC,cAAc,GAAQ;YACjC,8DAAa;YACb,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC7B,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","sourcesContent":["import {\n  Component,\n  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: '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   * 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  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles form-related actions when the button is clicked.\n   * - Submits the form if the button type is 'submit'.\n   * - Resets the form if the button type is 'reset'.\n   * @param {Event} event - The click event.\n   */\n  private handleClick = (event: Event) => {\n    if (this.loading || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (this.type === 'submit') {\n      this.internals?.form?.requestSubmit();\n    }\n    if (this.type === 'reset') {\n      this.internals?.form?.reset();\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"button\" tabindex=\"0\" onClick={this.handleClick}>\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"]}