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

package/dist/components/nv-avatar.js

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-0caa4741.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-d506ae63.js';
 import { c as clsx } from './p-8a1a6e56.js';
 import { S as SemanticSizes } from './p-a15ddd42.js';
-import { d as defineCustomElement$2 } from './p-39e93e5b.js';
+import { d as defineCustomElement$2 } from './p-d70df149.js';
 
 const nvAvatarCss = "nv-icon{display:inline-block;width:fit-content;height:fit-content;color:inherit}nv-icon>.nv-icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-icon>.nv-icon-sm{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-icon>.nv-icon-md{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-icon>.nv-icon-lg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-icon>.nv-icon-xl{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}nv-avatar{align-items:center !important;background-color:var(--components-avatar-background-1);border-radius:var(--radius-rounded-full) !important;display:flex !important;flex-shrink:0 !important;font-family:\"TT Norms Pro\", sans-serif;font-style:normal;font-weight:var(--font-weight-medium-emphasis);justify-content:center !important;leading-trim:both;line-height:1 !important;text-align:center;text-edge:cap;text-transform:uppercase}nv-avatar.avatar-color-1{background-color:var(--components-avatar-background-1);color:var(--components-avatar-content-1)}nv-avatar.avatar-color-2{background-color:var(--components-avatar-background-2);color:var(--components-avatar-content-2)}nv-avatar.avatar-color-3{background-color:var(--components-avatar-background-3);color:var(--components-avatar-content-3)}nv-avatar.avatar-color-4{background-color:var(--components-avatar-background-4);color:var(--components-avatar-content-4)}nv-avatar.avatar-color-5{background-color:var(--components-avatar-background-5);color:var(--components-avatar-content-5)}nv-avatar.avatar-color-6{background-color:var(--components-avatar-background-6);color:var(--components-avatar-content-6)}nv-avatar.avatar-color-7{background-color:var(--components-avatar-background-7);color:var(--components-avatar-content-7)}nv-avatar.avatar-color-8{background-color:var(--components-avatar-background-8);color:var(--components-avatar-content-8)}nv-avatar.avatar-color-9{background-color:var(--components-avatar-background-9);color:var(--components-avatar-content-9)}nv-avatar.avatar-color-10{background-color:var(--components-avatar-background-10);color:var(--components-avatar-content-10)}nv-avatar img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:50%}nv-avatar.avatar-xs{width:var(--avatar-xs-size);height:var(--avatar-xs-size);font-size:var(--avatar-xs-font-size);line-height:var(--avatar-xs-font-size)}nv-avatar.avatar-xs nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-avatar.avatar-sm{width:var(--avatar-sm-size);height:var(--avatar-sm-size);font-size:var(--avatar-sm-font-size);line-height:var(--avatar-sm-font-size)}nv-avatar.avatar-sm nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-avatar.avatar-md{width:var(--avatar-md-size);height:var(--avatar-md-size);font-size:var(--avatar-md-font-size);line-height:var(--avatar-md-font-size)}nv-avatar.avatar-md nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-avatar.avatar-lg{width:var(--avatar-lg-size);height:var(--avatar-lg-size);font-size:var(--avatar-lg-font-size);line-height:var(--avatar-lg-font-size)}nv-avatar.avatar-lg nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-avatar.avatar-xl{width:var(--avatar-xl-size);height:var(--avatar-xl-size);font-size:var(--avatar-xl-font-size);line-height:var(--avatar-xl-font-size)}nv-avatar.avatar-xl nv-icon>svg{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}";
 const NvAvatarStyle0 = nvAvatarCss;
@@ -10,14 +10,17 @@ const NvAvatar$1 = /*@__PURE__*/ proxyCustomElement(class NvAvatar extends H {
     constructor() {
         super();
         this.__registerHost();
-        /**
-         * Define the size of the avatar. You can use t-shirt sizes.
-         */
+        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;
         this.size = 'md';
-        /**
-         * You can apply different colors on the Avatar.
-         * Use a string number between 1 and 10.
-         */
         this.color = '1';
     }
     componentWillRender() {

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

@@ -1 +1 @@
-{"file":"nv-avatar.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,u7GAAu7G,CAAC;AAC58G,uBAAe,WAAW;;MCYbA,UAAQ;IALrB;;;;;;QA8GE,SAAI,GAAuB,IAAI,CAAC;;;;;QAOvB,UAAK,GAAW,GAAG,CAAC;KAuC9B;IAjGC,mBAAmB;QACjB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,UAAU,CAAC;SACtC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC;SACjC;QACD,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,MAAM,CAAC;SAClC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC;SACjC;QACD,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,UAAU,CAAC;SACtC;QACD,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;SAC3B;QACD,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;SACrB;KACF;;;;;;;;;IA+CO,YAAY,CAAC,QAAgB;QACnC,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;KACxC;;;;IAMD,MAAM;QACJ,QACE,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,IACP,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,IACnC,IAAI,CAAC,QAAQ,IACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,KAEhC,YAAM,IAAI,EAAC,MAAM,IACf,eAAS,IAAI,EAAC,MAAM,GAAG,CAClB,CACR,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvAvatar"],"sources":["src/components/nv-avatar/nv-avatar.scss?tag=nv-avatar","src/components/nv-avatar/nv-avatar.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"../nv-icon/nv-icon.scss\" as icon;\n\n/* Variants */\n$avatar-sizes: (\"xs\", \"sm\", \"md\", \"lg\", \"xl\");\n$avatar-colors: (\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"10\");\n\n/* Define maps for size-related variables */\n$avatar-size: (\n  \"xs\": var(--avatar-xs-size),\n  \"sm\": var(--avatar-sm-size),\n  \"md\": var(--avatar-md-size),\n  \"lg\": var(--avatar-lg-size),\n  \"xl\": var(--avatar-xl-size)\n);\n\n$avatar-font-size: (\n  \"xs\": var(--avatar-xs-font-size),\n  \"sm\": var(--avatar-sm-font-size),\n  \"md\": var(--avatar-md-font-size),\n  \"lg\": var(--avatar-lg-font-size),\n  \"xl\": var(--avatar-xl-font-size)\n);\n\n/* Define maps for color-related variables */\n$avatar-color-background: (\n  \"1\": var(--components-avatar-background-1),\n  \"2\": var(--components-avatar-background-2),\n  \"3\": var(--components-avatar-background-3),\n  \"4\": var(--components-avatar-background-4),\n  \"5\": var(--components-avatar-background-5),\n  \"6\": var(--components-avatar-background-6),\n  \"7\": var(--components-avatar-background-7),\n  \"8\": var(--components-avatar-background-8),\n  \"9\": var(--components-avatar-background-9),\n  \"10\": var(--components-avatar-background-10)\n);\n\n$avatar-color-content: (\n  \"1\": var(--components-avatar-content-1),\n  \"2\": var(--components-avatar-content-2),\n  \"3\": var(--components-avatar-content-3),\n  \"4\": var(--components-avatar-content-4),\n  \"5\": var(--components-avatar-content-5),\n  \"6\": var(--components-avatar-content-6),\n  \"7\": var(--components-avatar-content-7),\n  \"8\": var(--components-avatar-content-8),\n  \"9\": var(--components-avatar-content-9),\n  \"10\": var(--components-avatar-content-10)\n);\n\n@mixin avatar-base-styles() {\n  align-items: center !important;\n  background-color: var(--components-avatar-background-1);\n  border-radius: var(--radius-rounded-full) !important;\n  display: flex !important;\n  flex-shrink: 0 !important;\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-style: normal;\n  font-weight: var(--font-weight-medium-emphasis);\n  justify-content: center !important;\n  leading-trim: both;\n  line-height: 1 !important;\n  text-align: center;\n  text-edge: cap;\n  text-transform: uppercase;\n}\n\n@mixin avatar-color($avatar-number) {\n  background-color: map.get($avatar-color-background, $avatar-number);\n  color: map.get($avatar-color-content, $avatar-number);\n}\n\n@mixin avatar-image-styles() {\n  height: 100%;\n  width: 100%;\n  object-fit: cover;\n  object-position: center;\n  border-radius: 50%;\n}\n\n@mixin avatar-size-styles($size) {\n  width: map.get($avatar-size, $size);\n  height: map.get($avatar-size, $size);\n  font-size: map.get($avatar-font-size, $size);\n  line-height: map.get($avatar-font-size, $size);\n\n  nv-icon > svg {\n    @include icon.icon-size-and-stroke(\n      map.get(map.get(icon.$icon-config, $size), size),\n      map.get(map.get(icon.$icon-config, $size), stroke)\n    );\n  }\n}\n\nnv-avatar {\n  @include avatar-base-styles();\n\n  @each $color in $avatar-colors {\n    &.avatar-color-#{$color} {\n      @include avatar-color($color);\n    }\n  }\n\n  img {\n    @include avatar-image-styles();\n  }\n\n  @each $size in $avatar-sizes {\n    &.avatar-#{$size} {\n      @include avatar-size-styles($size);\n    }\n  }\n}\n","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","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,u7GAAu7G,CAAC;AAC58G,uBAAe,WAAW;;MCYbA,UAAQ;;;;;;;;;;;;;;oBAyGQ,IAAI;qBAON,GAAG;;IA1D5B,mBAAmB;QACjB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,UAAU,CAAC;SACtC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC;SACjC;QACD,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,MAAM,CAAC;SAClC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC;SACjC;QACD,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,UAAU,CAAC;SACtC;QACD,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;SAC3B;QACD,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;SACrB;KACF;;;;;;;;;IA+CO,YAAY,CAAC,QAAgB;QACnC,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;KACxC;;;;IAMD,MAAM;QACJ,QACE,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,IACP,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,IACnC,IAAI,CAAC,QAAQ,IACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,KAEhC,YAAM,IAAI,EAAC,MAAM,IACf,eAAS,IAAI,EAAC,MAAM,GAAG,CAClB,CACR,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvAvatar"],"sources":["src/components/nv-avatar/nv-avatar.scss?tag=nv-avatar","src/components/nv-avatar/nv-avatar.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"../nv-icon/nv-icon.scss\" as icon;\n\n/* Variants */\n$avatar-sizes: (\"xs\", \"sm\", \"md\", \"lg\", \"xl\");\n$avatar-colors: (\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"10\");\n\n/* Define maps for size-related variables */\n$avatar-size: (\n  \"xs\": var(--avatar-xs-size),\n  \"sm\": var(--avatar-sm-size),\n  \"md\": var(--avatar-md-size),\n  \"lg\": var(--avatar-lg-size),\n  \"xl\": var(--avatar-xl-size)\n);\n\n$avatar-font-size: (\n  \"xs\": var(--avatar-xs-font-size),\n  \"sm\": var(--avatar-sm-font-size),\n  \"md\": var(--avatar-md-font-size),\n  \"lg\": var(--avatar-lg-font-size),\n  \"xl\": var(--avatar-xl-font-size)\n);\n\n/* Define maps for color-related variables */\n$avatar-color-background: (\n  \"1\": var(--components-avatar-background-1),\n  \"2\": var(--components-avatar-background-2),\n  \"3\": var(--components-avatar-background-3),\n  \"4\": var(--components-avatar-background-4),\n  \"5\": var(--components-avatar-background-5),\n  \"6\": var(--components-avatar-background-6),\n  \"7\": var(--components-avatar-background-7),\n  \"8\": var(--components-avatar-background-8),\n  \"9\": var(--components-avatar-background-9),\n  \"10\": var(--components-avatar-background-10)\n);\n\n$avatar-color-content: (\n  \"1\": var(--components-avatar-content-1),\n  \"2\": var(--components-avatar-content-2),\n  \"3\": var(--components-avatar-content-3),\n  \"4\": var(--components-avatar-content-4),\n  \"5\": var(--components-avatar-content-5),\n  \"6\": var(--components-avatar-content-6),\n  \"7\": var(--components-avatar-content-7),\n  \"8\": var(--components-avatar-content-8),\n  \"9\": var(--components-avatar-content-9),\n  \"10\": var(--components-avatar-content-10)\n);\n\n@mixin avatar-base-styles() {\n  align-items: center !important;\n  background-color: var(--components-avatar-background-1);\n  border-radius: var(--radius-rounded-full) !important;\n  display: flex !important;\n  flex-shrink: 0 !important;\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-style: normal;\n  font-weight: var(--font-weight-medium-emphasis);\n  justify-content: center !important;\n  leading-trim: both;\n  line-height: 1 !important;\n  text-align: center;\n  text-edge: cap;\n  text-transform: uppercase;\n}\n\n@mixin avatar-color($avatar-number) {\n  background-color: map.get($avatar-color-background, $avatar-number);\n  color: map.get($avatar-color-content, $avatar-number);\n}\n\n@mixin avatar-image-styles() {\n  height: 100%;\n  width: 100%;\n  object-fit: cover;\n  object-position: center;\n  border-radius: 50%;\n}\n\n@mixin avatar-size-styles($size) {\n  width: map.get($avatar-size, $size);\n  height: map.get($avatar-size, $size);\n  font-size: map.get($avatar-font-size, $size);\n  line-height: map.get($avatar-font-size, $size);\n\n  nv-icon > svg {\n    @include icon.icon-size-and-stroke(\n      map.get(map.get(icon.$icon-config, $size), size),\n      map.get(map.get(icon.$icon-config, $size), stroke)\n    );\n  }\n}\n\nnv-avatar {\n  @include avatar-base-styles();\n\n  @each $color in $avatar-colors {\n    &.avatar-color-#{$color} {\n      @include avatar-color($color);\n    }\n  }\n\n  img {\n    @include avatar-image-styles();\n  }\n\n  @each $size in $avatar-sizes {\n    &.avatar-#{$size} {\n      @include avatar-size-styles($size);\n    }\n  }\n}\n","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}

package/dist/components/nv-badge.js

@@ -1,176 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-0caa4741.js';
-import { c as clsx } from './p-8a1a6e56.js';
-import { u as useCollapse, t as timeline } from './p-42301d8f.js';
-import { u as useFade } from './p-1daca48a.js';
-import { d as defineCustomElement$2 } from './p-39e93e5b.js';
-
-const nvBadgeCss = "nv-icon{display:inline-block;width:fit-content;height:fit-content;color:inherit}nv-icon>.nv-icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-icon>.nv-icon-sm{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-icon>.nv-icon-md{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-icon>.nv-icon-lg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-icon>.nv-icon-xl{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}nv-badge{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content}nv-badge.with-gap{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content;gap:var(--badge-gap-x)}nv-badge:not(.with-gap){padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content}nv-badge.badge-1{color:var(--color-rainbow-1-content);background-color:var(--color-rainbow-1-background)}nv-badge.badge-1 .close:focus,nv-badge.badge-1 .close:focus-within{outline:none}nv-badge.badge-1 .close:focus-visible,nv-badge.badge-1 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-1-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-1 nv-icon{color:var(--color-rainbow-1-content)}nv-badge.badge-2{color:var(--color-rainbow-2-content);background-color:var(--color-rainbow-2-background)}nv-badge.badge-2 .close:focus,nv-badge.badge-2 .close:focus-within{outline:none}nv-badge.badge-2 .close:focus-visible,nv-badge.badge-2 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-2-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-2 nv-icon{color:var(--color-rainbow-2-content)}nv-badge.badge-3{color:var(--color-rainbow-3-content);background-color:var(--color-rainbow-3-background)}nv-badge.badge-3 .close:focus,nv-badge.badge-3 .close:focus-within{outline:none}nv-badge.badge-3 .close:focus-visible,nv-badge.badge-3 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-3-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-3 nv-icon{color:var(--color-rainbow-3-content)}nv-badge.badge-4{color:var(--color-rainbow-4-content);background-color:var(--color-rainbow-4-background)}nv-badge.badge-4 .close:focus,nv-badge.badge-4 .close:focus-within{outline:none}nv-badge.badge-4 .close:focus-visible,nv-badge.badge-4 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-4-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-4 nv-icon{color:var(--color-rainbow-4-content)}nv-badge.badge-5{color:var(--color-rainbow-5-content);background-color:var(--color-rainbow-5-background)}nv-badge.badge-5 .close:focus,nv-badge.badge-5 .close:focus-within{outline:none}nv-badge.badge-5 .close:focus-visible,nv-badge.badge-5 .close:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-rainbow-5-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-5 nv-icon{color:var(--color-rainbow-5-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}nv-badge nv-icon>svg.icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-sm{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-md{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-lg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-xl{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge .close{padding:0;line-height:0;border:none;background:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;aspect-ratio:1/1;border-radius:var(--radius-rounded-full)}";
-const NvBadgeStyle0 = nvBadgeCss;
-
-const NvBadge$1 = /*@__PURE__*/ proxyCustomElement(class NvBadge extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.closeClicked = createEvent(this, "closeClicked", 7);
-        this.hiddenChanged = createEvent(this, "hiddenChanged", 7);
-        this.hiddenChangedComplete = createEvent(this, "hiddenChangedComplete", 7);
-        /****************************************************************************/
-        //#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
-        /**
-         * Handles the close button click.
-         * @param {MouseEvent} originalEvent - The original event.
-         */
-        this.handleClose = (originalEvent) => {
-            if (!this.preventAutoClose) {
-                this.hidden = true;
-            }
-            this.closeClicked.emit(originalEvent);
-        };
-    }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region WATCHERS
-    /**
-     * Handles the dismissal prop change.
-     * @param {boolean} dismissal - The new dismissal value.
-     */
-    handleDismissalChange(dismissal) {
-        this.dismissible = dismissal;
-    }
-    /**
-     * Handles the icon prop change.
-     * @param {string} icon - The new icon value.
-     */
-    handleIconChange(icon) {
-        this.leadIcon = icon;
-    }
-    /**
-     * Handles the hidden prop change.
-     * @param {boolean} hidden - The new hidden value.
-     */
-    async handleHiddenChange(hidden) {
-        this.hiddenChanged.emit(hidden);
-        if (this._isHidden === true)
-            this._isHidden = hidden;
-        const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });
-        const { collapse, expand } = useCollapse(this.ref, { duration: 150 });
-        if (hidden === true)
-            await timeline(fadeOut, collapse).start();
-        if (hidden === false)
-            await timeline(expand, fadeIn).start();
-        this.hiddenChangedComplete.emit(hidden);
-        if (this._isHidden === false)
-            this._isHidden = hidden;
-    }
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    /**
-     * Component will load.
-     */
-    componentWillLoad() {
-        if (this.dismissal) {
-            this.dismissible = this.dismissal;
-        }
-        if (this.icon != null && this.icon != '') {
-            this.leadIcon = this.icon;
-        }
-        if (this.hidden) {
-            const { setCollapsed } = useCollapse(this.ref);
-            const { setFadeOut } = useFade(this.ref);
-            setCollapsed();
-            setFadeOut();
-        }
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        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: '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" })))));
-    }
-    get ref() { return this; }
-    static get watchers() { return {
-        "dismissal": ["handleDismissalChange"],
-        "icon": ["handleIconChange"],
-        "hidden": ["handleHiddenChange"]
-    }; }
-    static get style() { return NvBadgeStyle0; }
-}, [4, "nv-badge", {
-        "dismissal": [4],
-        "icon": [1],
-        "iconLocation": [513, "icon-location"],
-        "color": [513],
-        "label": [513],
-        "leadIcon": [1537, "lead-icon"],
-        "dismissible": [1540],
-        "hidden": [1540],
-        "preventAutoClose": [516, "prevent-auto-close"],
-        "_isHidden": [32]
-    }, undefined, {
-        "dismissal": ["handleDismissalChange"],
-        "icon": ["handleIconChange"],
-        "hidden": ["handleHiddenChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["nv-badge", "nv-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "nv-badge":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, NvBadge$1);
-            }
-            break;
-        case "nv-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
+import { N as NvBadge$1, d as defineCustomElement$1 } from './p-a4802979.js';
 
 const NvBadge = NvBadge$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"nv-badge.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,w4MAAw4M,CAAC;AAC55M,sBAAe,UAAU;;MCqBZA,SAAO;IALpB;;;;;;;;;;;;QAgBW,cAAS,GAAY,KAAK,CAAC;;;;;;;QAwB3B,UAAK,GAAY,GAAG,CAAC;;;;QAMrB,UAAK,GAAmB,IAAI,CAAC;;;;QAMtC,aAAQ,GAAmB,IAAI,CAAC;;;;QAMhC,gBAAW,GAAY,KAAK,CAAC;;;;QAM7B,WAAM,GAAY,KAAK,CAAC;QAEhB,cAAS,GAAY,IAAI,CAAC,MAAM,CAAC;;;;;QAOhC,qBAAgB,GAAY,KAAK,CAAC;;;;;;;;QAoG1B,gBAAW,GAAG,CAAC,aAA0B;YACxD,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;gBAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;aACpB;YAED,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SACvC,CAAC;KAmCH;;;;;;;;IA3GC,qBAAqB,CAAC,SAAkB;QACtC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;KAC9B;;;;;IAOD,gBAAgB,CAAC,IAAY;QAC3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;KACtB;;;;;IAOD,MAAM,kBAAkB,CAAC,MAAe;QACtC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI;YAAE,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;QAErD,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;QACjE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;QAEtE,IAAI,MAAM,KAAK,IAAI;YAAE,MAAM,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;QAC/D,IAAI,MAAM,KAAK,KAAK;YAAE,MAAM,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC;QAE7D,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAExC,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK;YAAE,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;KACvD;;;;;;;IASD,iBAAiB;QACf,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC;SACnC;QAED,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE;YACxC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;SAC3B;QAED,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,MAAM,EAAE,YAAY,EAAE,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC/C,MAAM,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAEzC,YAAY,EAAE,CAAC;YACf,UAAU,EAAE,CAAC;SACd;KACF;;;;IAsBD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,EAAE;gBACjC,WAAW,EAAE,IAAI,CAAC,WAAW;gBAC7B,UAAU,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK;gBAC1C,iBAAiB,EAAE,IAAI,CAAC,SAAS;aAClC,CAAC,IAEF,6DAAM,IAAI,EAAC,cAAc,IACtB,IAAI,CAAC,QAAQ,KACZ,gEACE,IAAI,EAAC,cAAc,EACnB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,IAAI,EAAC,IAAI,GACA,CACZ,CACI,EACN,IAAI,CAAC,KAAK,IAAI,+DAAO,IAAI,CAAC,KAAK,CAAQ,EACvC,IAAI,CAAC,WAAW,KACf,+DAAQ,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,IAC5D,gEAAS,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,GAAG,CACvB,CACV,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvBadge"],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"../nv-icon/nv-icon.scss\" as icon;\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$badge-colors: (\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"10\");\n\n/* Define maps for color-related variables */\n$color-rainbow-content: (\n  \"1\": var(--color-rainbow-1-content),\n  \"2\": var(--color-rainbow-2-content),\n  \"3\": var(--color-rainbow-3-content),\n  \"4\": var(--color-rainbow-4-content),\n  \"5\": var(--color-rainbow-5-content),\n  \"6\": var(--color-rainbow-6-content),\n  \"7\": var(--color-rainbow-7-content),\n  \"8\": var(--color-rainbow-8-content),\n  \"9\": var(--color-rainbow-9-content),\n  \"10\": var(--color-rainbow-10-content)\n);\n\n$color-rainbow-background: (\n  \"1\": var(--color-rainbow-1-background),\n  \"2\": var(--color-rainbow-2-background),\n  \"3\": var(--color-rainbow-3-background),\n  \"4\": var(--color-rainbow-4-background),\n  \"5\": var(--color-rainbow-5-background),\n  \"6\": var(--color-rainbow-6-background),\n  \"7\": var(--color-rainbow-7-background),\n  \"8\": var(--color-rainbow-8-background),\n  \"9\": var(--color-rainbow-9-background),\n  \"10\": var(--color-rainbow-10-background)\n);\n\n@mixin root-styles() {\n  padding: var(--badge-padding-y) var(--badge-padding-x);\n  display: inline-flex !important; // override the display: none in [hidden] css\n  vertical-align: middle;\n  align-items: center;\n  border-radius: var(--radius-rounded-full);\n  height: fit-content;\n  width: fit-content;\n}\n\n@mixin root-styles-with-gap() {\n  @include root-styles();\n  gap: var(--badge-gap-x);\n}\n\n@mixin badge-color($badge-number) {\n  color: map.get($color-rainbow-content, $badge-number);\n  background-color: map.get($color-rainbow-background, $badge-number);\n  .close {\n    @include focus-ring(var(--color-rainbow-#{$badge-number}-content), 0.2);\n  }\n}\n\n@mixin icon-color($badge-number) {\n  color: map.get($color-rainbow-content, $badge-number);\n}\n\n@mixin type-settings($font-size, $line-height) {\n  font-size: var(--font-size-xs);\n  line-height: var(--line-height-xs) !important;\n}\n\nnv-badge {\n  @include root-styles();\n\n  //gap styles\n  &.with-gap {\n    @include root-styles-with-gap();\n  }\n\n  &:not(.with-gap) {\n    @include root-styles();\n  }\n\n  // color styles\n  @each $i in $badge-colors {\n    &.badge-#{$i} {\n      @include badge-color($i);\n      nv-icon {\n        @include icon-color($i);\n      }\n    }\n  }\n\n  //label styles\n  & span {\n    @include type-settings(xs, xs);\n  }\n\n  // nv-icon styles\n  & nv-icon > svg {\n    @each $size, $config in icon.$icon-config {\n      &.icon-#{$size} {\n        @include icon.icon-size-and-stroke(\n          map.get(map.get(icon.$icon-config, \"xs\"), size),\n          map.get(map.get(icon.$icon-config, \"xs\"), stroke)\n        );\n      }\n    }\n  }\n\n  .close {\n    padding: 0;\n    line-height: 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n    color: inherit;\n    display: inline-flex;\n    align-items: center;\n    aspect-ratio: 1/1;\n    border-radius: var(--radius-rounded-full);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n  State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/**\n * @slot leading-icon - Icon before the label.\n */\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"],"version":3}
+{"file":"nv-badge.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nv-base.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-0caa4741.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-d506ae63.js';
 
 const classes = {
     'w-full': 'w-full',

package/dist/components/nv-button.js

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-0caa4741.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-d506ae63.js';
 import { B as ButtonSize } from './p-a15ddd42.js';
-import { d as defineCustomElement$2 } from './p-3ef4ded9.js';
+import { d as defineCustomElement$2 } from './p-a1aa8970.js';
 
 const nvButtonCss = "nv-icon{display:inline-block;width:fit-content;height:fit-content;color:inherit}nv-icon>.nv-icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-icon>.nv-icon-sm{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-icon>.nv-icon-md{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-icon>.nv-icon-lg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-icon>.nv-icon-xl{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}nv-button{display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:var(--font-weight-medium-emphasis);font-family:\"TT Norms Pro\", 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);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);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);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);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]:focus,nv-button[emphasis=high]:focus-within{outline:none}nv-button[emphasis=high]:focus-visible,nv-button[emphasis=high]:has(:focus-visible){outline:var(--focus-outline-stroke) 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][danger]:not([danger=false]){background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-button[emphasis=high][danger]:not([danger=false]):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][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:var(--focus-outline-stroke) 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]:focus,nv-button[emphasis=medium]:focus-within{outline:none}nv-button[emphasis=medium]:focus-visible,nv-button[emphasis=medium]:has(:focus-visible){outline:var(--focus-outline-stroke) 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][danger]:not([danger=false]){background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-button[emphasis=medium][danger]:not([danger=false]):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][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:var(--focus-outline-stroke) 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]:focus,nv-button[emphasis=low]:focus-within{outline:none}nv-button[emphasis=low]:focus-visible,nv-button[emphasis=low]:has(:focus-visible){outline:var(--focus-outline-stroke) 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][danger]:not([danger=false]){background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-button[emphasis=low][danger]:not([danger=false]):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][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:var(--focus-outline-stroke) 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]:focus,nv-button[emphasis=lower]:focus-within{outline:none}nv-button[emphasis=lower]:focus-visible,nv-button[emphasis=lower]:has(:focus-visible){outline:var(--focus-outline-stroke) 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][danger]:not([danger=false]){background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-button[emphasis=lower][danger]:not([danger=false]):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][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:var(--focus-outline-stroke) 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;
@@ -10,45 +10,6 @@ const NvButton$1 = /*@__PURE__*/ proxyCustomElement(class NvButton extends H {
         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';
-        /**
-         * 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
@@ -71,6 +32,13 @@ const NvButton$1 = /*@__PURE__*/ proxyCustomElement(class NvButton extends H {
                 (_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
     /****************************************************************************/

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

@@ -1 +1 @@
-{"file":"nv-button.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,w3QAAw3Q,CAAC;AAC74Q,uBAAe,WAAW;;MCsBbA,UAAQ;IANrB;;;;;;;;;;;QAmBW,SAAI,GAAoB,IAAI,CAAC;;;;;;QAQ7B,aAAQ,GAAwB,MAAM,CAAC;;;;;QAOvC,WAAM,GAAY,KAAK,CAAC;;;;;;QAQjC,YAAO,GAAY,KAAK,CAAC;;;;QAMzB,aAAQ,GAAY,KAAK,CAAC;;;;QAMjB,UAAK,GAAY,KAAK,CAAC;;;;;;QAQvB,SAAI,GAAoB,QAAQ,CAAC;;;;;;;;;;QAYlC,gBAAW,GAAG,CAAC,KAAY;;YACjC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;gBAC1B,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,aAAa,EAAE,CAAC;aACvC;YACD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;gBACzB,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,KAAK,EAAE,CAAC;aAC/B;SACF,CAAC;KAoDH;;;;IA7CC,mBAAmB,CAAC,OAAgB;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;KACzB;IAGD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;SAC9B;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAC1B;KACF;;;;IAMD,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;SAC9B;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACvD,IAAI,CAAC,OAAO,KACX,kEACE,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,GAAG,IAAI,GAAG,IAAI,GACvC,CACd,EAED,6DAAM,IAAI,EAAC,cAAc,GAAQ,EACjC,8DAAa,EACb,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC7B,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvButton"],"sources":["src/components/nv-button/nv-button.scss?tag=nv-button","src/components/nv-button/nv-button.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"../nv-icon/nv-icon.scss\" as icon;\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$button-sizes: (\"xs\", \"sm\", \"md\", \"lg\");\n$button-emphasis: (\"high\", \"medium\", \"low\", \"lower\");\n\n/* Define maps for size-related variables */\n$button-padding-y: (\n  \"xs\": var(--button-xs-padding-y),\n  \"sm\": var(--button-sm-padding-y),\n  \"md\": var(--button-md-padding-y),\n  \"lg\": var(--button-lg-padding-y)\n);\n\n$button-padding-x: (\n  \"xs\": var(--button-xs-padding-x),\n  \"sm\": var(--button-sm-padding-x),\n  \"md\": var(--button-md-padding-x),\n  \"lg\": var(--button-lg-padding-x)\n);\n\n$button-gap: (\n  \"xs\": var(--button-xs-gap),\n  \"sm\": var(--button-sm-gap),\n  \"md\": var(--button-md-gap),\n  \"lg\": var(--button-lg-gap)\n);\n\n$button-border-radius: (\n  \"xs\": var(--button-xs-border-radius),\n  \"sm\": var(--button-sm-border-radius),\n  \"md\": var(--button-md-border-radius),\n  \"lg\": var(--button-lg-border-radius)\n);\n\n$button-line-height: (\n  \"xs\": var(--button-xs-line-height),\n  \"sm\": var(--button-sm-line-height),\n  \"md\": var(--button-md-line-height),\n  \"lg\": var(--button-lg-line-height)\n);\n\n$button-font-size: (\n  \"xs\": var(--button-xs-font-size),\n  \"sm\": var(--button-sm-font-size),\n  \"md\": var(--button-md-font-size),\n  \"lg\": var(--button-lg-font-size)\n);\n\n/* Define maps for emphasis-related variables */\n$components-button-background: (\n  \"high\": var(--components-button-high-background),\n  \"medium\": var(--components-button-medium-background),\n  \"low\": var(--components-button-low-background),\n  \"lower\": var(--components-button-lower-background)\n);\n\n$components-button-border: (\n  \"high\": var(--components-button-high-border),\n  \"medium\": var(--components-button-medium-border),\n  \"low\": var(--components-button-low-border),\n  \"lower\": var(--components-button-lower-border)\n);\n\n$components-button-text: (\n  \"high\": var(--components-button-high-text),\n  \"medium\": var(--components-button-medium-text),\n  \"low\": var(--components-button-low-text),\n  \"lower\": var(--components-button-lower-text)\n);\n\n$components-button-background-hover: (\n  \"high\": var(--components-button-high-background-hover),\n  \"medium\": var(--components-button-medium-background-hover),\n  \"low\": var(--components-button-low-background-hover),\n  \"lower\": var(--components-button-lower-background-hover)\n);\n\n$components-button-text-hover: (\n  \"high\": var(--components-button-high-text-hover),\n  \"medium\": var(--components-button-medium-text-hover),\n  \"low\": var(--components-button-low-text-hover),\n  \"lower\": var(--components-button-lower-text-hover)\n);\n\n@mixin root-styles() {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  font-style: normal;\n  font-weight: var(--font-weight-medium-emphasis);\n  font-family: \"TT Norms Pro\", sans-serif;\n  transition: background-color 150ms ease-out;\n  user-select: none;\n  cursor: pointer;\n  height: fit-content;\n  width: fit-content;\n}\n\n@mixin size-styles($size) {\n  padding: map.get($button-padding-y, $size) map.get($button-padding-x, $size);\n  gap: map.get($button-gap, $size);\n  border-radius: map.get($button-border-radius, $size);\n  line-height: map.get($button-line-height, $size);\n  font-size: map.get($button-font-size, $size);\n\n  & nv-icon > svg {\n    @include icon.icon-size-and-stroke(\n      map.get(map.get(icon.$icon-config, $size), size),\n      map.get(map.get(icon.$icon-config, $size), stroke)\n    );\n  }\n}\n\n@mixin emphasis-styles($emphasis) {\n  background: map.get($components-button-background, $emphasis);\n  border: 1px solid map.get($components-button-border, $emphasis);\n  color: map.get($components-button-text, $emphasis);\n\n  &:hover {\n    background: map.get($components-button-background-hover, $emphasis);\n    border: 1px solid map.get($components-button-border, $emphasis);\n    color: map.get($components-button-text-hover, $emphasis);\n  }\n\n  @include focus-ring();\n\n  &:disabled:not([disabled=\"false\"]) {\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n}\n\n@mixin danger-styles($emphasis) {\n  background: map.get($components-button-background, $emphasis);\n  border: 1px solid map.get($components-button-border, $emphasis);\n  color: map.get($components-button-text, $emphasis);\n\n  &:hover {\n    background: map.get($components-button-background-hover, $emphasis);\n    border: 1px solid map.get($components-button-border, $emphasis);\n    color: map.get($components-button-text-hover, $emphasis);\n  }\n\n  @include focus-ring(var(--color-focus-destructive));\n}\n\n@mixin fluid-styles() {\n  width: 100%;\n}\n\nnv-button {\n  @include root-styles();\n\n  @each $size in $button-sizes {\n    &[size=\"#{$size}\"] {\n      @include size-styles($size);\n    }\n  }\n\n  @each $emphasis in $button-emphasis {\n    &[emphasis=\"#{$emphasis}\"] {\n      @include emphasis-styles($emphasis);\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  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","mappings":";;;;AAAA,MAAM,WAAW,GAAG,w3QAAw3Q,CAAC;AAC74Q,uBAAe,WAAW;;MCsBbA,UAAQ;;;;;;;;;;;;;;QAoEX,gBAAW,GAAG,CAAC,KAAY;;YACjC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;gBAC1B,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,aAAa,EAAE,CAAC;aACvC;YACD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;gBACzB,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,0CAAE,KAAK,EAAE,CAAC;aAC/B;SACF,CAAC;oBAnE+B,IAAI;wBAQI,MAAM;sBAOpB,KAAK;uBAQb,KAAK;wBAMJ,KAAK;qBAMC,KAAK;oBAQE,QAAQ;;;;;IA+BzC,mBAAmB,CAAC,OAAgB;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;KACzB;IAGD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;SAC9B;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAC1B;KACF;;;;IAMD,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;SAC9B;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACvD,IAAI,CAAC,OAAO,KACX,kEACE,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,GAAG,IAAI,GAAG,IAAI,GACvC,CACd,EAED,6DAAM,IAAI,EAAC,cAAc,GAAQ,EACjC,8DAAa,EACb,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC7B,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvButton"],"sources":["src/components/nv-button/nv-button.scss?tag=nv-button","src/components/nv-button/nv-button.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"../nv-icon/nv-icon.scss\" as icon;\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$button-sizes: (\"xs\", \"sm\", \"md\", \"lg\");\n$button-emphasis: (\"high\", \"medium\", \"low\", \"lower\");\n\n/* Define maps for size-related variables */\n$button-padding-y: (\n  \"xs\": var(--button-xs-padding-y),\n  \"sm\": var(--button-sm-padding-y),\n  \"md\": var(--button-md-padding-y),\n  \"lg\": var(--button-lg-padding-y)\n);\n\n$button-padding-x: (\n  \"xs\": var(--button-xs-padding-x),\n  \"sm\": var(--button-sm-padding-x),\n  \"md\": var(--button-md-padding-x),\n  \"lg\": var(--button-lg-padding-x)\n);\n\n$button-gap: (\n  \"xs\": var(--button-xs-gap),\n  \"sm\": var(--button-sm-gap),\n  \"md\": var(--button-md-gap),\n  \"lg\": var(--button-lg-gap)\n);\n\n$button-border-radius: (\n  \"xs\": var(--button-xs-border-radius),\n  \"sm\": var(--button-sm-border-radius),\n  \"md\": var(--button-md-border-radius),\n  \"lg\": var(--button-lg-border-radius)\n);\n\n$button-line-height: (\n  \"xs\": var(--button-xs-line-height),\n  \"sm\": var(--button-sm-line-height),\n  \"md\": var(--button-md-line-height),\n  \"lg\": var(--button-lg-line-height)\n);\n\n$button-font-size: (\n  \"xs\": var(--button-xs-font-size),\n  \"sm\": var(--button-sm-font-size),\n  \"md\": var(--button-md-font-size),\n  \"lg\": var(--button-lg-font-size)\n);\n\n/* Define maps for emphasis-related variables */\n$components-button-background: (\n  \"high\": var(--components-button-high-background),\n  \"medium\": var(--components-button-medium-background),\n  \"low\": var(--components-button-low-background),\n  \"lower\": var(--components-button-lower-background)\n);\n\n$components-button-border: (\n  \"high\": var(--components-button-high-border),\n  \"medium\": var(--components-button-medium-border),\n  \"low\": var(--components-button-low-border),\n  \"lower\": var(--components-button-lower-border)\n);\n\n$components-button-text: (\n  \"high\": var(--components-button-high-text),\n  \"medium\": var(--components-button-medium-text),\n  \"low\": var(--components-button-low-text),\n  \"lower\": var(--components-button-lower-text)\n);\n\n$components-button-background-hover: (\n  \"high\": var(--components-button-high-background-hover),\n  \"medium\": var(--components-button-medium-background-hover),\n  \"low\": var(--components-button-low-background-hover),\n  \"lower\": var(--components-button-lower-background-hover)\n);\n\n$components-button-text-hover: (\n  \"high\": var(--components-button-high-text-hover),\n  \"medium\": var(--components-button-medium-text-hover),\n  \"low\": var(--components-button-low-text-hover),\n  \"lower\": var(--components-button-lower-text-hover)\n);\n\n@mixin root-styles() {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  font-style: normal;\n  font-weight: var(--font-weight-medium-emphasis);\n  font-family: \"TT Norms Pro\", sans-serif;\n  transition: background-color 150ms ease-out;\n  user-select: none;\n  cursor: pointer;\n  height: fit-content;\n  width: fit-content;\n}\n\n@mixin size-styles($size) {\n  padding: map.get($button-padding-y, $size) map.get($button-padding-x, $size);\n  gap: map.get($button-gap, $size);\n  border-radius: map.get($button-border-radius, $size);\n  line-height: map.get($button-line-height, $size);\n  font-size: map.get($button-font-size, $size);\n\n  & nv-icon > svg {\n    @include icon.icon-size-and-stroke(\n      map.get(map.get(icon.$icon-config, $size), size),\n      map.get(map.get(icon.$icon-config, $size), stroke)\n    );\n  }\n}\n\n@mixin emphasis-styles($emphasis) {\n  background: map.get($components-button-background, $emphasis);\n  border: 1px solid map.get($components-button-border, $emphasis);\n  color: map.get($components-button-text, $emphasis);\n\n  &:hover {\n    background: map.get($components-button-background-hover, $emphasis);\n    border: 1px solid map.get($components-button-border, $emphasis);\n    color: map.get($components-button-text-hover, $emphasis);\n  }\n\n  @include focus-ring();\n\n  &:disabled:not([disabled=\"false\"]) {\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n}\n\n@mixin danger-styles($emphasis) {\n  background: map.get($components-button-background, $emphasis);\n  border: 1px solid map.get($components-button-border, $emphasis);\n  color: map.get($components-button-text, $emphasis);\n\n  &:hover {\n    background: map.get($components-button-background-hover, $emphasis);\n    border: 1px solid map.get($components-button-border, $emphasis);\n    color: map.get($components-button-text-hover, $emphasis);\n  }\n\n  @include focus-ring(var(--color-focus-destructive));\n}\n\n@mixin fluid-styles() {\n  width: 100%;\n}\n\nnv-button {\n  @include root-styles();\n\n  @each $size in $button-sizes {\n    &[size=\"#{$size}\"] {\n      @include size-styles($size);\n    }\n  }\n\n  @each $emphasis in $button-emphasis {\n    &[emphasis=\"#{$emphasis}\"] {\n      @include emphasis-styles($emphasis);\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  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}

package/dist/components/nv-col.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-0caa4741.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-d506ae63.js';
 import { c as clsx } from './p-8a1a6e56.js';
 
 const nvColCss = "nv-col{display:block;flex:1 1 0%;padding-left:calc(var(--spacing-4) / 2);padding-right:calc(var(--spacing-4) / 2)}nv-col[class*=w-]{flex:none}nv-col.w-1\\/12{width:calc(100% * 1 / 12)}nv-col.w-2\\/12{width:calc(100% * 2 / 12)}nv-col.w-3\\/12{width:calc(100% * 3 / 12)}nv-col.w-4\\/12{width:calc(100% * 4 / 12)}nv-col.w-5\\/12{width:calc(100% * 5 / 12)}nv-col.w-6\\/12{width:calc(100% * 6 / 12)}nv-col.w-7\\/12{width:calc(100% * 7 / 12)}nv-col.w-8\\/12{width:calc(100% * 8 / 12)}nv-col.w-9\\/12{width:calc(100% * 9 / 12)}nv-col.w-10\\/12{width:calc(100% * 10 / 12)}nv-col.w-11\\/12{width:calc(100% * 11 / 12)}nv-col.w-12\\/12{width:calc(100% * 12 / 12)}";
@@ -8,6 +8,7 @@ const NvCol$1 = /*@__PURE__*/ proxyCustomElement(class NvCol extends H {
     constructor() {
         super();
         this.__registerHost();
+        this.size = undefined;
     }
     //#endregion PROPERTIES
     /****************************************************************************/

package/dist/components/nv-col.js.map

@@ -1 +1 @@
-{"file":"nv-col.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,8oBAA8oB,CAAC;AAChqB,oBAAe,QAAQ;;MCUVA,OAAK;;;;;;;;;;;;IAkBR,UAAU;QAChB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,IAAI,CAAC,IAAI,GAAG,EAAE;gBAAE,OAAO;YAC5C,OAAO,KAAK,IAAI,CAAC,IAAI,KAAK,CAAC;SAC5B;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,IAClC,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvCol"],"sources":["src/components/nv-col/nv-col.scss?tag=nv-col","src/components/nv-col/nv-col.tsx"],"sourcesContent":["@function calculate-width($columns) {\n  $total-columns: 12;\n  @return calc(100% * #{$columns} / #{$total-columns});\n}\n\nnv-col {\n  display: block;\n  flex: 1 1 0%;\n  padding-left: calc(var(--spacing-4) / 2);\n  padding-right: calc(var(--spacing-4) / 2);\n\n  &[class*=\"w-\"] {\n    flex: none;\n  }\n\n  @for $i from 1 through 12 {\n    &.w-#{$i}\\/12 {\n      width: calculate-width($i);\n    }\n  }\n}","import { Component, Host, Prop, h } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * @slot default - The column content.\n */\n@Component({\n  tag: 'nv-col',\n  styleUrl: './nv-col.scss',\n  shadow: false,\n})\nexport class NvCol {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Defines the column size based on a 12 column grid system.\n   */\n  @Prop({ reflect: true })\n  readonly size: number;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Get the column size class.\n   * @returns {string | undefined} The column size class.\n   */\n  private getColSize() {\n    if (this.size) {\n      if (this.size < 1 || this.size > 12) return;\n      return `w-${this.size}/12`;\n    }\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host class={clsx(this.getColSize())}>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"nv-col.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,8oBAA8oB,CAAC;AAChqB,oBAAe,QAAQ;;MCUVA,OAAK;;;;;;;;;;;;;IAkBR,UAAU;QAChB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,IAAI,CAAC,IAAI,GAAG,EAAE;gBAAE,OAAO;YAC5C,OAAO,KAAK,IAAI,CAAC,IAAI,KAAK,CAAC;SAC5B;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,IAClC,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvCol"],"sources":["src/components/nv-col/nv-col.scss?tag=nv-col","src/components/nv-col/nv-col.tsx"],"sourcesContent":["@function calculate-width($columns) {\n  $total-columns: 12;\n  @return calc(100% * #{$columns} / #{$total-columns});\n}\n\nnv-col {\n  display: block;\n  flex: 1 1 0%;\n  padding-left: calc(var(--spacing-4) / 2);\n  padding-right: calc(var(--spacing-4) / 2);\n\n  &[class*=\"w-\"] {\n    flex: none;\n  }\n\n  @for $i from 1 through 12 {\n    &.w-#{$i}\\/12 {\n      width: calculate-width($i);\n    }\n  }\n}","import { Component, Host, Prop, h } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * @slot default - The column content.\n */\n@Component({\n  tag: 'nv-col',\n  styleUrl: './nv-col.scss',\n  shadow: false,\n})\nexport class NvCol {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Defines the column size based on a 12 column grid system.\n   */\n  @Prop({ reflect: true })\n  readonly size: number;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Get the column size class.\n   * @returns {string | undefined} The column size class.\n   */\n  private getColSize() {\n    if (this.size) {\n      if (this.size < 1 || this.size > 12) return;\n      return `w-${this.size}/12`;\n    }\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host class={clsx(this.getColSize())}>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-datagrid.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-0caa4741.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-d506ae63.js';
 
 /**
    * table-core
@@ -2960,42 +2960,16 @@ const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H
     constructor() {
         super();
         this.__registerHost();
-        /****************************************************************************/
-        //#region STATES
         this.table = null;
-        this.parsedColumns = []; // Parsed array
-        this.parsedData = []; // Parsed array
+        this.parsedColumns = [];
+        this.parsedData = [];
         this.hasSlotHead = false;
         this.hasSlotBody = false;
-        //#endregion STATES
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * The columns to display in the data grid.
-         * @example
-         * [
-         *  {"header":"Name","accessor":"name"},
-         *  {"header":"Age","accessor":"age"},
-         *  {"header":"Email","accessor":"email"}
-         * ]
-         * @default []
-         */
         this.columns = [];
-        /**
-         * The data to display in the data grid.
-         * @example [{ "name": "Alice", "age": 25 }, { "name": "Bob", "age": 30 }]
-         * @default []
-         */
+        this.columnsJson = undefined;
         this.data = [];
-        /**
-         * The message to display when there is no data available.
-         * @default 'No data available'
-         */
+        this.dataJson = undefined;
         this.noDataMessage = 'No data available';
-        /**
-         * The message to display when there are no columns or data available.
-         * @default 'No data or columns available to display.'
-         */
         this.noColumnsNoDataMessage = 'No data or columns available to display.';
     }
     //#endregion PROPERTIES