@nova-design-system/nova-webcomponents 3.0.0 → 3.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"nv-alert.js","sourceRoot":"","sources":["../../../src/components/nv-alert/nv-alert.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} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n  DeprecatedSemanticColors,\n  FeedbackColors,\n} from '../../utils/constants';\nimport { useCollapse, useFade, timeline } from '../../animations';\n\n/**\n * @slot default - Use this slot to insert HTML into the alert content.\n */\n@Component({\n  tag: 'nv-alert',\n  styleUrl: 'nv-alert.scss',\n  shadow: false,\n})\nexport class NvAlert {\n  @Element() ref: HTMLNvAlertElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Defines color of the alert.\n   * @deprecated use feedback instead.\n   */\n  @Prop({ reflect: true })\n  readonly color: `${DeprecatedSemanticColors}`;\n\n  componentWillRender() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Specifies the alert type which determines the color and default icon.\n   */\n  @Prop({ reflect: true, mutable: true })\n  feedback: `${FeedbackColors}` = 'information';\n\n  /**\n   * Main content of the alert. For more complex content, use the default slot\n   * instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Short and concise text for the alert title.\n   */\n  @Prop({ reflect: true })\n  readonly heading: string;\n\n  /**\n   * Icon associated with the alert, defaults vary based on the feedback type.\n   */\n  @Prop({ reflect: true })\n  readonly icon: string;\n\n  /**\n   * Allows the alert to be dismissed via a close button (x). The alert is not\n   * dismissible unless explicitly enabled.\n   */\n  @Prop({ reflect: true })\n  readonly dismissible: boolean = false;\n\n  /**\n   * When true, the alert does not automatically close upon dismissing.\n   * Useful for externally controlled component behavior.\n   */\n  @Prop({ reflect: true })\n  readonly preventAutoClose: boolean = false;\n\n  /**\n   * Controls the visibility of the alert. Will animate with fade and collapse.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n\n  /**\n   * When true, the alert will not animate when it is hidden or shown.\n   */\n  @Prop({ reflect: true })\n  readonly hasNoAnimations: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   * @bind hidden\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the close button is clicked.\n   */\n  @Event()\n  closeClicked: EventEmitter<MouseEvent>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Used for 2 way binding with the hidden property.\n   * Triggers open and close animations.\n   * @param {boolean} hidden - The visibility state of the alert.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n\n    await this.updateVisibility(hidden);\n    this.hiddenChangedComplete.emit(hidden);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the dismissal of the alert, considering the preventAutoClose prop.\n   * Passes the original event from the close button to the close event detail.\n   * @param {MouseEvent} originalEvent - The original event from the close button.\n   */\n  private handleDismiss = (originalEvent?: MouseEvent) => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit(originalEvent);\n  };\n\n  /**\n   * By default an icon is linked to the feedback type\n   * @returns {string} - The default icon name.\n   */\n  private getDefaultIcon = () => {\n    switch (this.feedback) {\n      case FeedbackColors.Warning:\n        return 'alert-circle';\n      case FeedbackColors.Information:\n        return 'info-circle';\n      case FeedbackColors.Success:\n        return 'circle-check';\n      case FeedbackColors.Error:\n        return 'alert-circle';\n      case FeedbackColors.Neutral:\n        return 'help';\n      default:\n        return 'info-circle';\n    }\n  };\n\n  /**\n   * Updates the visibility state of the alert with optional animations\n   * @param {boolean} hidden - Whether the alert should be hidden\n   */\n  private async updateVisibility(hidden: boolean) {\n    if (this.hasNoAnimations) {\n      this.toggleHiddenClass(hidden);\n      return;\n    }\n\n    const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n    if (hidden) {\n      await timeline(fadeOut, collapse).start();\n      this.toggleHiddenClass(true);\n    } else {\n      this.toggleHiddenClass(false);\n      await timeline(expand, fadeIn).start();\n    }\n  }\n\n  /**\n   * Toggles the 'hidden' class on the element\n   * @param {boolean} hidden - Whether to add or remove the hidden class\n   */\n  private toggleHiddenClass(hidden: boolean) {\n    this.ref.classList.toggle('hidden', hidden);\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\n    }\n\n    if (this.hidden) {\n      this.ref.classList.add('hidden');\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"alert\" class={clsx('root', `feedback-${this.feedback}`)}>\n        <nv-icon\n          name={this.icon ?? this.getDefaultIcon()}\n          class={`icon-${this.feedback}`}\n          size=\"md\"\n        ></nv-icon>\n\n        <div class=\"content\">\n          {this.heading && <p class=\"heading\">{this.heading}</p>}\n\n          {this.message && <p class=\"message\">{this.message}</p>}\n\n          <slot></slot>\n        </div>\n\n        {this.dismissible && (\n          <button class=\"close\" type=\"button\" onClick={this.handleDismiss}>\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}
+{"version":3,"file":"nv-alert.js","sourceRoot":"","sources":["../../../src/components/nv-alert/nv-alert.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} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n  DeprecatedSemanticColors,\n  FeedbackColors,\n} from '../../utils/constants';\nimport { useCollapse, useFade, timeline } from '../../animations';\n\n/**\n * @slot default - Use this slot to insert HTML into the alert content.\n */\n@Component({\n  tag: 'nv-alert',\n  styleUrl: 'nv-alert.scss',\n  shadow: false,\n})\nexport class NvAlert {\n  @Element() ref: HTMLNvAlertElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Defines color of the alert.\n   * @deprecated use feedback instead.\n   */\n  @Prop({ reflect: true })\n  readonly color: `${DeprecatedSemanticColors}`;\n\n  componentWillRender() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Specifies the alert type which determines the color and default icon.\n   */\n  @Prop({ reflect: true, mutable: true })\n  feedback: `${FeedbackColors}` = 'information';\n\n  /**\n   * Main content of the alert. For more complex content, use the default slot\n   * instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Short and concise text for the alert title.\n   */\n  @Prop({ reflect: true })\n  readonly heading: string;\n\n  /**\n   * Icon associated with the alert, defaults vary based on the feedback type.\n   */\n  @Prop({ reflect: true })\n  readonly icon: string;\n\n  /**\n   * Allows the alert to be dismissed via a close button (x). The alert is not\n   * dismissible unless explicitly enabled.\n   */\n  @Prop({ reflect: true })\n  readonly dismissible: boolean = false;\n\n  /**\n   * When true, the alert does not automatically close upon dismissing.\n   * Useful for externally controlled component behavior.\n   */\n  @Prop({ reflect: true })\n  readonly preventAutoClose: boolean = false;\n\n  /**\n   * Controls the visibility of the alert. Will animate with fade and collapse.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n\n  /**\n   * When true, the alert will not animate when it is hidden or shown.\n   */\n  @Prop({ reflect: true })\n  readonly hasNoAnimations: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   * @bind hidden\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the close button is clicked.\n   */\n  @Event()\n  closeClicked: EventEmitter<void>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Used for 2 way binding with the hidden property.\n   * Triggers open and close animations.\n   * @param {boolean} hidden - The visibility state of the alert.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n\n    await this.updateVisibility(hidden);\n    this.hiddenChangedComplete.emit(hidden);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the dismissal of the alert, considering the preventAutoClose prop.\n   * Passes the original event from the close button to the close event detail.\n   * @param {MouseEvent} originalEvent - The original event from the close button.\n   */\n  private handleDismiss = () => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit();\n  };\n\n  /**\n   * By default an icon is linked to the feedback type\n   * @returns {string} - The default icon name.\n   */\n  private getDefaultIcon = () => {\n    switch (this.feedback) {\n      case FeedbackColors.Warning:\n        return 'alert-circle';\n      case FeedbackColors.Information:\n        return 'info-circle';\n      case FeedbackColors.Success:\n        return 'circle-check';\n      case FeedbackColors.Error:\n        return 'alert-circle';\n      case FeedbackColors.Neutral:\n        return 'help';\n      default:\n        return 'info-circle';\n    }\n  };\n\n  /**\n   * Updates the visibility state of the alert with optional animations\n   * @param {boolean} hidden - Whether the alert should be hidden\n   */\n  private async updateVisibility(hidden: boolean) {\n    if (this.hasNoAnimations) {\n      this.toggleHiddenClass(hidden);\n      return;\n    }\n\n    const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n    if (hidden) {\n      await timeline(fadeOut, collapse).start();\n      this.toggleHiddenClass(true);\n    } else {\n      this.toggleHiddenClass(false);\n      await timeline(expand, fadeIn).start();\n    }\n  }\n\n  /**\n   * Toggles the 'hidden' class on the element\n   * @param {boolean} hidden - Whether to add or remove the hidden class\n   */\n  private toggleHiddenClass(hidden: boolean) {\n    this.ref.classList.toggle('hidden', hidden);\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\n    }\n\n    if (this.hidden) {\n      this.ref.classList.add('hidden');\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"alert\" class={clsx('root', `feedback-${this.feedback}`)}>\n        <nv-icon\n          name={this.icon ?? this.getDefaultIcon()}\n          class={`icon-${this.feedback}`}\n          size=\"md\"\n        ></nv-icon>\n\n        <div class=\"content\">\n          {this.heading && <p class=\"heading\">{this.heading}</p>}\n\n          {this.message && <p class=\"message\">{this.message}</p>}\n\n          <slot></slot>\n        </div>\n\n        {this.dismissible && (\n          <button class=\"close\" type=\"button\" onClick={this.handleDismiss}>\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

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

@@ -3,6 +3,7 @@
 nv-badge {
   padding: var(--badge-padding-y) var(--badge-padding-x);
   display: inline-flex !important;
+  gap: var(--badge-gap-x);
   vertical-align: middle;
   align-items: center;
   border-radius: var(--radius-rounded-full);
@@ -11,9 +12,14 @@ nv-badge {
   height: fit-content;
   width: fit-content;
 }
+nv-badge.is-icon-only {
+  padding: var(--badge-padding-y) var(--badge-padding-icon-only-x);
+  gap: var(--badge-gap-icon-only-x);
+}
 nv-badge.with-gap {
   padding: var(--badge-padding-y) var(--badge-padding-x);
   display: inline-flex !important;
+  gap: var(--badge-gap-x);
   vertical-align: middle;
   align-items: center;
   border-radius: var(--radius-rounded-full);
@@ -21,7 +27,10 @@ nv-badge.with-gap {
   border-width: 0.5px;
   height: fit-content;
   width: fit-content;
-  gap: var(--badge-gap-x);
+}
+nv-badge.with-gap.is-icon-only {
+  padding: var(--badge-padding-y) var(--badge-padding-icon-only-x);
+  gap: var(--badge-gap-icon-only-x);
 }
 nv-badge.visually-hidden {
   position: absolute;
@@ -37,6 +46,7 @@ nv-badge.visually-hidden {
 nv-badge:not(.with-gap) {
   padding: var(--badge-padding-y) var(--badge-padding-x);
   display: inline-flex !important;
+  gap: var(--badge-gap-x);
   vertical-align: middle;
   align-items: center;
   border-radius: var(--radius-rounded-full);
@@ -45,6 +55,10 @@ nv-badge:not(.with-gap) {
   height: fit-content;
   width: fit-content;
 }
+nv-badge:not(.with-gap).is-icon-only {
+  padding: var(--badge-padding-y) var(--badge-padding-icon-only-x);
+  gap: var(--badge-gap-icon-only-x);
+}
 nv-badge.badge-1 {
   color: var(--color-rainbow-1-text);
   background-color: var(--color-rainbow-1-background);
@@ -195,9 +209,175 @@ nv-badge.badge-10 .close:focus-visible, nv-badge.badge-10 .close:has(:focus-visi
 nv-badge.badge-10 nv-icon {
   color: var(--color-rainbow-10-icon);
 }
+nv-badge.badge-error {
+  color: var(--color-feedback-error-low-text);
+  background-color: var(--color-feedback-error-low-background);
+  border-color: var(--color-feedback-error-low-border);
+}
+nv-badge.badge-error .close:focus, nv-badge.badge-error .close:focus-within {
+  outline: none;
+}
+nv-badge.badge-error .close:focus-visible, nv-badge.badge-error .close:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-error-low-content, var(--color-feedback-error-low-text));
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-badge.badge-error nv-icon {
+  color: var(--color-feedback-error-low-icon);
+}
+nv-badge.badge-information {
+  color: var(--color-feedback-information-low-text);
+  background-color: var(--color-feedback-information-low-background);
+  border-color: var(--color-feedback-information-low-border);
+}
+nv-badge.badge-information .close:focus, nv-badge.badge-information .close:focus-within {
+  outline: none;
+}
+nv-badge.badge-information .close:focus-visible, nv-badge.badge-information .close:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-information-low-content, var(--color-feedback-information-low-text));
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-badge.badge-information nv-icon {
+  color: var(--color-feedback-information-low-icon);
+}
+nv-badge.badge-neutral {
+  color: var(--color-feedback-neutral-low-text);
+  background-color: var(--color-feedback-neutral-low-background);
+  border-color: var(--color-feedback-neutral-low-border);
+}
+nv-badge.badge-neutral .close:focus, nv-badge.badge-neutral .close:focus-within {
+  outline: none;
+}
+nv-badge.badge-neutral .close:focus-visible, nv-badge.badge-neutral .close:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-neutral-low-content, var(--color-feedback-neutral-low-text));
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-badge.badge-neutral nv-icon {
+  color: var(--color-feedback-neutral-low-icon);
+}
+nv-badge.badge-success {
+  color: var(--color-feedback-success-low-text);
+  background-color: var(--color-feedback-success-low-background);
+  border-color: var(--color-feedback-success-low-border);
+}
+nv-badge.badge-success .close:focus, nv-badge.badge-success .close:focus-within {
+  outline: none;
+}
+nv-badge.badge-success .close:focus-visible, nv-badge.badge-success .close:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-success-low-content, var(--color-feedback-success-low-text));
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-badge.badge-success nv-icon {
+  color: var(--color-feedback-success-low-icon);
+}
+nv-badge.badge-warning {
+  color: var(--color-feedback-warning-low-text);
+  background-color: var(--color-feedback-warning-low-background);
+  border-color: var(--color-feedback-warning-low-border);
+}
+nv-badge.badge-warning .close:focus, nv-badge.badge-warning .close:focus-within {
+  outline: none;
+}
+nv-badge.badge-warning .close:focus-visible, nv-badge.badge-warning .close:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-warning-low-content, var(--color-feedback-warning-low-text));
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-badge.badge-warning nv-icon {
+  color: var(--color-feedback-warning-low-icon);
+}
+nv-badge.badge-amber {
+  color: var(--color-rainbow-1-text);
+  background-color: var(--color-rainbow-1-background);
+  border-color: var(--color-rainbow-1-border);
+}
+nv-badge.badge-amber .close:focus, nv-badge.badge-amber .close:focus-within {
+  outline: none;
+}
+nv-badge.badge-amber .close:focus-visible, nv-badge.badge-amber .close:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-amber-content, var(--color-rainbow-1-text));
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-badge.badge-amber nv-icon {
+  color: var(--color-rainbow-1-icon);
+}
+nv-badge.badge-orange {
+  color: var(--color-rainbow-2-text);
+  background-color: var(--color-rainbow-2-background);
+  border-color: var(--color-rainbow-2-border);
+}
+nv-badge.badge-orange .close:focus, nv-badge.badge-orange .close:focus-within {
+  outline: none;
+}
+nv-badge.badge-orange .close:focus-visible, nv-badge.badge-orange .close:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-orange-content, var(--color-rainbow-2-text));
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-badge.badge-orange nv-icon {
+  color: var(--color-rainbow-2-icon);
+}
+nv-badge.badge-turquoise {
+  color: var(--color-rainbow-5-text);
+  background-color: var(--color-rainbow-5-background);
+  border-color: var(--color-rainbow-5-border);
+}
+nv-badge.badge-turquoise .close:focus, nv-badge.badge-turquoise .close:focus-within {
+  outline: none;
+}
+nv-badge.badge-turquoise .close:focus-visible, nv-badge.badge-turquoise .close:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-turquoise-content, var(--color-rainbow-5-text));
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-badge.badge-turquoise nv-icon {
+  color: var(--color-rainbow-5-icon);
+}
+nv-badge.badge-crimson {
+  color: var(--color-rainbow-6-text);
+  background-color: var(--color-rainbow-6-background);
+  border-color: var(--color-rainbow-6-border);
+}
+nv-badge.badge-crimson .close:focus, nv-badge.badge-crimson .close:focus-within {
+  outline: none;
+}
+nv-badge.badge-crimson .close:focus-visible, nv-badge.badge-crimson .close:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-crimson-content, var(--color-rainbow-6-text));
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-badge.badge-crimson nv-icon {
+  color: var(--color-rainbow-6-icon);
+}
+nv-badge.badge-lime {
+  color: var(--color-rainbow-9-text);
+  background-color: var(--color-rainbow-9-background);
+  border-color: var(--color-rainbow-9-border);
+}
+nv-badge.badge-lime .close:focus, nv-badge.badge-lime .close:focus-within {
+  outline: none;
+}
+nv-badge.badge-lime .close:focus-visible, nv-badge.badge-lime .close:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-lime-content, var(--color-rainbow-9-text));
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-badge.badge-lime nv-icon {
+  color: var(--color-rainbow-9-icon);
+}
+nv-badge.badge-petrol {
+  color: var(--color-rainbow-8-text);
+  background-color: var(--color-rainbow-8-background);
+  border-color: var(--color-rainbow-8-border);
+}
+nv-badge.badge-petrol .close:focus, nv-badge.badge-petrol .close:focus-within {
+  outline: none;
+}
+nv-badge.badge-petrol .close:focus-visible, nv-badge.badge-petrol .close:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-petrol-content, var(--color-rainbow-8-text));
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-badge.badge-petrol nv-icon {
+  color: var(--color-rainbow-8-icon);
+}
 nv-badge span {
   font-size: var(--font-size-xs);
   line-height: var(--line-height-xs) !important;
+  text-align: center;
 }
 nv-badge nv-icon > svg.icon-xs {
   width: var(--spacing-3);

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

@@ -20,7 +20,17 @@ 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" }), 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" }))),
+            template: (h("div", null, h("div", { "data-class": "text-warning mb-4" }, h("strong", null, "DEPRECATED:"), " Numeric colors (1-10) are deprecated. Use status colors or named colors instead."), 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: 'Status Colors',
+            description: 'Badge with status-based colors',
+            template: (h("div", { "data-class": "flex gap-4" }, h("nv-badge", { "data-storybook-args": true, color: "error", label: "Error" }), h("nv-badge", { "data-storybook-args": true, color: "information", label: "Information" }), h("nv-badge", { "data-storybook-args": true, color: "neutral", label: "Neutral" }), h("nv-badge", { "data-storybook-args": true, color: "success", label: "Success" }), h("nv-badge", { "data-storybook-args": true, color: "warning", label: "Warning" }))),
+        },
+        {
+            name: 'Named Colors',
+            description: 'Badge with named colors',
+            template: (h("div", { "data-class": "flex gap-4" }, h("nv-badge", { "data-storybook-args": true, color: "amber", label: "Amber" }), h("nv-badge", { "data-storybook-args": true, color: "orange", label: "Orange" }), h("nv-badge", { "data-storybook-args": true, color: "turquoise", label: "Turquoise" }), h("nv-badge", { "data-storybook-args": true, color: "crimson", label: "Crimson" }), h("nv-badge", { "data-storybook-args": true, color: "lime", label: "Lime" }), h("nv-badge", { "data-storybook-args": true, color: "petrol", label: "Petrol" }))),
         },
         {
             name: nameof(x => x.leadIcon),
@@ -66,6 +76,15 @@ const NvBadgeDocs = {
             },
             template: h("nv-badge", { "data-storybook-args": true }),
         },
+        {
+            name: 'Icon Only',
+            description: 'Badge with Icon Only',
+            args: {
+                isIconOnly: true,
+                leadIcon: 'user',
+            },
+            template: (h("div", { "data-class": "flex gap-4" }, h("nv-badge", { "data-storybook-args": true, color: "amber" }), h("nv-badge", { "data-storybook-args": true, color: "orange" }), h("nv-badge", { "data-storybook-args": true, color: "turquoise" }), h("nv-badge", { "data-storybook-args": true, color: "crimson" }), h("nv-badge", { "data-storybook-args": true, color: "lime" }), h("nv-badge", { "data-storybook-args": true, color: "petrol" }))),
+        },
     ],
 };
 export default NvBadgeDocs;

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;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;gBACZ,6CAEE,KAAK,EAAC,IAAI,EACV,KAAK,EAAC,gBAAgB,GACZ,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          <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"]}
+{"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>\n          <div data-class=\"text-warning mb-4\">\n            <strong>DEPRECATED:</strong> Numeric colors (1-10) are deprecated.\n            Use status colors or named colors instead.\n          </div>\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        </div>\n      ),\n    },\n    {\n      name: 'Status Colors',\n      description: 'Badge with status-based colors',\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-badge data-storybook-args color=\"error\" label=\"Error\"></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"information\"\n            label=\"Information\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"neutral\"\n            label=\"Neutral\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"success\"\n            label=\"Success\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"warning\"\n            label=\"Warning\"\n          ></nv-badge>\n        </div>\n      ),\n    },\n    {\n      name: 'Named Colors',\n      description: 'Badge with named colors',\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-badge data-storybook-args color=\"amber\" label=\"Amber\"></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"orange\"\n            label=\"Orange\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"turquoise\"\n            label=\"Turquoise\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"crimson\"\n            label=\"Crimson\"\n          ></nv-badge>\n          <nv-badge data-storybook-args color=\"lime\" label=\"Lime\"></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"petrol\"\n            label=\"Petrol\"\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      name: 'Icon Only',\n      description: 'Badge with Icon Only',\n      args: {\n        isIconOnly: true,\n        leadIcon: 'user',\n      },\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-badge data-storybook-args color=\"amber\"></nv-badge>\n          <nv-badge data-storybook-args color=\"orange\"></nv-badge>\n          <nv-badge data-storybook-args color=\"turquoise\"></nv-badge>\n          <nv-badge data-storybook-args color=\"crimson\"></nv-badge>\n          <nv-badge data-storybook-args color=\"lime\"></nv-badge>\n          <nv-badge data-storybook-args color=\"petrol\"></nv-badge>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvBadgeDocs;\n"]}

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

@@ -18,7 +18,11 @@ export class NvBadge {
         /****************************************************************************/
         //#region PROPERTIES
         /**
-         * The color of the badge. Use a string between 1 to 10
+         * The color of the badge.
+         * deprecated Use status values or named colors instead.
+         * Use a string between 1 to 10
+         * or one of the status values: error, information, neutral, success, warning
+         * or one of the color names: amber, orange, turquoise, crimson, lime
          */
         this.color = '1';
         /**
@@ -42,18 +46,22 @@ export class NvBadge {
          * Useful for externally controlled component behavior.
          */
         this.preventAutoClose = false;
+        /**
+         * When true, the badge will only display an icon without label.
+         * The label will be visually hidden but still accessible for screen readers.
+         */
+        this.isIconOnly = false;
         //#endregion LIFECYCLE
         /****************************************************************************/
         //#region METHODS
         /**
          * Handles the close button click.
-         * @param {MouseEvent} originalEvent - The original event.
          */
-        this.handleClose = (originalEvent) => {
+        this.handleClose = () => {
             if (!this.preventAutoClose) {
                 this.hidden = true;
             }
-            this.closeClicked.emit(originalEvent);
+            this.closeClicked.emit();
         };
     }
     //#endregion EVENTS
@@ -116,11 +124,12 @@ export class NvBadge {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '8d97eed4a84f2f913e4f8cd64d08c806d9724f33', class: clsx(`badge-${this.color}`, {
+        return (h(Host, { key: 'cde39aa20bdbc6529d317a1f9f0c04f7bf79112e', class: clsx(`badge-${this.color}`, {
                 'has-close': this.dismissible,
                 'with-gap': this.dismissible || this.label,
                 'visually-hidden': this._isHidden,
-            }) }, h("slot", { key: '34c2c387727e6b68d37fe2b2ac68c82799356e3d', name: "leading-icon" }, this.leadIcon && h("nv-icon", { key: '0c23dd58e48fce39d7935549c6289f87f1fb66af', name: this.leadIcon, size: "sm" })), h("slot", { key: '7485f570aa3cf519b030bedfa8ccf6a6d37d2c1b' }, this.label && h("span", { key: 'eb7afa0eb52582c6d782d2383dfe2eeb41a9649b' }, this.label)), this.dismissible && (h("button", { key: 'bc07eed3e1328a8009cb2c8add026a7f8a5335da', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: 'ab0b2c6224f4b8b147e8158856acbf1ab987b392', name: "x", size: "sm" })))));
+                'is-icon-only': this.isIconOnly,
+            }) }, h("slot", { key: 'cd0ebe919619431f096fe87e6e9412cbed88e467', name: "leading-icon" }, this.leadIcon && h("nv-icon", { key: 'b010613a9ffe4b9ae027e128ba519c43d4211d7d', name: this.leadIcon, size: "sm" })), h("span", { key: '5035aa8d35272f716442731b9493483835e083c6', class: clsx({ 'visually-hidden': this.isIconOnly }) }, this.label, h("slot", { key: '81a475c0081911d8b4606450ecdf085a4f7e2853' })), this.dismissible && (h("button", { key: '402fe040a11cae0974ffa911b81f781230fd0516', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: '6f32fa2ae87170963c22bd35cebcf18500426570', name: "x", size: "sm" })))));
     }
     static get is() { return "nv-badge"; }
     static get originalStyleUrls() {
@@ -214,7 +223,7 @@ export class NvBadge {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The color of the badge. Use a string between 1 to 10"
+                    "text": "The color of the badge.\ndeprecated Use status values or named colors instead.\nUse a string between 1 to 10\nor one of the status values: error, information, neutral, success, warning\nor one of the color names: amber, orange, turquoise, crimson, lime"
                 },
                 "getter": false,
                 "setter": false,
@@ -321,6 +330,26 @@ export class NvBadge {
                 "attribute": "prevent-auto-close",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "isIconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the badge will only display an icon without label.\nThe label will be visually hidden but still accessible for screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-icon-only",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }
@@ -341,14 +370,9 @@ export class NvBadge {
                     "text": "Emitted when the badge is dismissed."
                 },
                 "complexType": {
-                    "original": "MouseEvent",
-                    "resolved": "MouseEvent",
-                    "references": {
-                        "MouseEvent": {
-                            "location": "global",
-                            "id": "global::MouseEvent"
-                        }
-                    }
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
                 }
             }, {
                 "method": "hiddenChanged",

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 * @slot default - for custom content, for pure text use label instead.\n */\n@Component({\n  tag: 'nv-badge',\n  styleUrl: 'nv-badge.scss',\n  shadow: false,\n})\nexport class NvBadge {\n  @Element() ref: HTMLNvBadgeElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Whether the badge is dismissible.\n   * @deprecated use dismissible instead.\n   */\n  @Prop({ reflect: true })\n  readonly dismissal: boolean = false;\n\n  /**\n   * The icon to display in the badge.\n   * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n   */\n  @Prop({ reflect: true })\n  readonly icon: string;\n\n  /**\n   * The location of the icon in the badge.\n   * @deprecated only leadIcon now.\n   */\n  @Prop({ reflect: true })\n  readonly iconLocation: 'left' | 'right';\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The color of the badge. 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;\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      this._isHidden = true;\n      const { setCollapsed } = useCollapse(this.ref);\n      const { setFadeOut } = useFade(this.ref);\n\n      setCollapsed();\n      setFadeOut();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the close button click.\n   * @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 && <nv-icon name={this.leadIcon} size=\"sm\"></nv-icon>}\n        </slot>\n\n        <slot>{this.label && <span>{this.label}</span>}</slot>\n\n        {this.dismissible && (\n          <button onClick={this.handleClose} class=\"close\" type=\"button\">\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}
+{"version":3,"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 * @slot default - for custom content, for pure text use label instead.\n */\n@Component({\n  tag: 'nv-badge',\n  styleUrl: 'nv-badge.scss',\n  shadow: false,\n})\nexport class NvBadge {\n  @Element() ref: HTMLNvBadgeElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Whether the badge is dismissible.\n   * @deprecated use dismissible instead.\n   */\n  @Prop({ reflect: true })\n  readonly dismissal: boolean = false;\n\n  /**\n   * The icon to display in the badge.\n   * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n   */\n  @Prop({ reflect: true })\n  readonly icon: string;\n\n  /**\n   * The location of the icon in the badge.\n   * @deprecated only leadIcon now.\n   */\n  @Prop({ reflect: true })\n  readonly iconLocation: 'left' | 'right';\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The color of the badge.\n   * deprecated Use status values or named colors instead.\n   * Use a string between 1 to 10\n   * or one of the status values: error, information, neutral, success, warning\n   * or one of the color names: amber, orange, turquoise, crimson, lime\n   */\n  @Prop({ reflect: true })\n  readonly color?: string = '1';\n\n  /**\n   * Main content of the badge.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string | null = null;\n\n  /**\n   * The lead icon of the badge.\n   */\n  @Prop({ reflect: true, mutable: true })\n  leadIcon?: string | null = null;\n\n  /**\n   * Whether the badge is dismissible.\n   */\n  @Prop({ reflect: true, mutable: true })\n  dismissible: boolean = false;\n\n  /**\n   * Controls the visibility of the badge. Will animate with fade and collapse.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n  @State()\n  private _isHidden: boolean;\n\n  /**\n   * When true, the alert does not automatically close upon dismissing.\n   * Useful for externally controlled component behavior.\n   */\n  @Prop({ reflect: true })\n  readonly preventAutoClose: boolean = false;\n\n  /**\n   * When true, the badge will only display an icon without label.\n   * The label will be visually hidden but still accessible for screen readers.\n   */\n  @Prop({ reflect: true })\n  readonly isIconOnly?: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the badge is dismissed.\n   */\n  @Event()\n  closeClicked: EventEmitter<void>;\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Handles the dismissal prop change.\n   * @param {boolean} dismissal - The new dismissal value.\n   */\n  @Watch('dismissal')\n  handleDismissalChange(dismissal: boolean) {\n    this.dismissible = dismissal;\n  }\n\n  /**\n   * Handles the icon prop change.\n   * @param {string} icon - The new icon value.\n   */\n  @Watch('icon')\n  handleIconChange(icon: string) {\n    this.leadIcon = icon;\n  }\n\n  /**\n   * Handles the hidden prop change.\n   * @param {boolean} hidden - The new hidden value.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n    if (this._isHidden === true) this._isHidden = hidden;\n\n    const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n    if (hidden === true) await timeline(fadeOut, collapse).start();\n    if (hidden === false) await timeline(expand, fadeIn).start();\n\n    this.hiddenChangedComplete.emit(hidden);\n\n    if (this._isHidden === false) this._isHidden = hidden;\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  /**\n   * Component will load.\n   */\n  componentWillLoad() {\n    if (this.dismissal) {\n      this.dismissible = this.dismissal;\n    }\n\n    if (this.icon != null && this.icon != '') {\n      this.leadIcon = this.icon;\n    }\n\n    if (this.hidden) {\n      this._isHidden = true;\n      const { setCollapsed } = useCollapse(this.ref);\n      const { setFadeOut } = useFade(this.ref);\n\n      setCollapsed();\n      setFadeOut();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the close button click.\n   */\n  private readonly handleClose = () => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit();\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(`badge-${this.color}`, {\n          'has-close': this.dismissible,\n          'with-gap': this.dismissible || this.label,\n          'visually-hidden': this._isHidden,\n          'is-icon-only': this.isIconOnly,\n        })}\n      >\n        <slot name=\"leading-icon\">\n          {this.leadIcon && <nv-icon name={this.leadIcon} size=\"sm\"></nv-icon>}\n        </slot>\n\n        <span class={clsx({ 'visually-hidden': this.isIconOnly })}>\n          {this.label}\n          <slot></slot>\n        </span>\n\n        {this.dismissible && (\n          <button onClick={this.handleClose} class=\"close\" type=\"button\">\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

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

@@ -1,7 +1,6 @@
 import { h } from "@stencil/core";
 const NvBreadcrumbsDocs = {
     component: 'nv-breadcrumbs',
-    badge: 'new',
     subcomponents: ['nv-breadcrumb', 'nv-icon'],
     composedComponents: ['nv-breadcrumb'],
     stories: [

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

@@ -1 +1 @@
-{"version":3,"file":"nv-breadcrumbs.docs.js","sourceRoot":"","sources":["../../../src/components/nv-breadcrumbs/nv-breadcrumbs.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAIlC,MAAM,iBAAiB,GAAuC;IAC5D,SAAS,EAAE,gBAAgB;IAC3B,KAAK,EAAE,KAAK;IACZ,aAAa,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC;IAC3C,kBAAkB,EAAE,CAAC,eAAe,CAAC;IACrC,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,CACR;gBACE;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB,qBAAe,OAAO;oBACpB,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACD,CAClB;SACF;QACD;YACE,IAAI,EAAE,WAAW;YACjB,WAAW,EACT,oFAAoF;YACtF,QAAQ,EAAE,CACR,iEAA+C,YAAY;gBACzD;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB,qBAAe,IAAI,EAAC,WAAW,EAAC,OAAO,EAAC,iBAAiB;oBACvD;wBACE;4BACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACb;oBACL;wBACE;4BACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACb;oBACL;wBACE;4BACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACb,CACS;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB,qBAAe,OAAO;oBACpB,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACD,CAClB;SACF;QACD;YACE,IAAI,EAAE,cAAc;YACpB,WAAW,EACT,+HAA+H;YACjI,QAAQ,EAAE,CACR;gBACE;oBACE;wBACE,SAAG,IAAI,EAAC,GAAG,WAAS,CACN;oBAChB;wBACE,SAAG,IAAI,EAAC,GAAG,mBAAiB,CACd;oBAChB,qBAAe,OAAO;wBACpB,SAAG,IAAI,EAAC,GAAG,oBAAkB,CACf,CACD;gBAEjB,wBAAe,MAAM,oBAAmB,CACpC,CACP;SACF;KACF;CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvBreadcrumbsDocs: NovaDocs<Components.NvBreadcrumbs> = {\n  component: 'nv-breadcrumbs',\n  badge: 'new',\n  subcomponents: ['nv-breadcrumb', 'nv-icon'],\n  composedComponents: ['nv-breadcrumb'],\n  stories: [\n    {\n      name: 'Default',\n      template: (\n        <nv-breadcrumbs data-storybook-args>\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb current>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n        </nv-breadcrumbs>\n      ),\n    },\n    {\n      name: 'Collapsed',\n      description:\n        'A breadcrumb example featuring a collapsed menu for handling long navigation paths',\n      template: (\n        <nv-breadcrumbs data-storybook-args data-class=\"mt-5 mb-20\">\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb type=\"collapsed\" tooltip=\"Click to expand\">\n            <li>\n              <nv-breadcrumb>\n                <a href=\"#\">Breadcrumb</a>\n              </nv-breadcrumb>\n            </li>\n            <li>\n              <nv-breadcrumb>\n                <a href=\"#\">Breadcrumb</a>\n              </nv-breadcrumb>\n            </li>\n            <li>\n              <nv-breadcrumb>\n                <a href=\"#\">Breadcrumb</a>\n              </nv-breadcrumb>\n            </li>\n          </nv-breadcrumb>\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb current>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n        </nv-breadcrumbs>\n      ),\n    },\n    {\n      name: 'Current page',\n      description:\n        'Hides the breadcrumb and sets the aria-current attribute, use this on the last breadcrumb, and include a header for the page.',\n      template: (\n        <div>\n          <nv-breadcrumbs data-storybook-args>\n            <nv-breadcrumb>\n              <a href=\"#\">Home</a>\n            </nv-breadcrumb>\n            <nv-breadcrumb>\n              <a href=\"#\">User account</a>\n            </nv-breadcrumb>\n            <nv-breadcrumb current>\n              <a href=\"#\">Authorization</a>\n            </nv-breadcrumb>\n          </nv-breadcrumbs>\n\n          <h2 data-class=\"mt-2\">Authorization</h2>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvBreadcrumbsDocs;\n"]}
+{"version":3,"file":"nv-breadcrumbs.docs.js","sourceRoot":"","sources":["../../../src/components/nv-breadcrumbs/nv-breadcrumbs.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAIlC,MAAM,iBAAiB,GAAuC;IAC5D,SAAS,EAAE,gBAAgB;IAC3B,aAAa,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC;IAC3C,kBAAkB,EAAE,CAAC,eAAe,CAAC;IACrC,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,CACR;gBACE;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB,qBAAe,OAAO;oBACpB,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACD,CAClB;SACF;QACD;YACE,IAAI,EAAE,WAAW;YACjB,WAAW,EACT,oFAAoF;YACtF,QAAQ,EAAE,CACR,iEAA+C,YAAY;gBACzD;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB,qBAAe,IAAI,EAAC,WAAW,EAAC,OAAO,EAAC,iBAAiB;oBACvD;wBACE;4BACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACb;oBACL;wBACE;4BACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACb;oBACL;wBACE;4BACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACb,CACS;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB,qBAAe,OAAO;oBACpB,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACD,CAClB;SACF;QACD;YACE,IAAI,EAAE,cAAc;YACpB,WAAW,EACT,+HAA+H;YACjI,QAAQ,EAAE,CACR;gBACE;oBACE;wBACE,SAAG,IAAI,EAAC,GAAG,WAAS,CACN;oBAChB;wBACE,SAAG,IAAI,EAAC,GAAG,mBAAiB,CACd;oBAChB,qBAAe,OAAO;wBACpB,SAAG,IAAI,EAAC,GAAG,oBAAkB,CACf,CACD;gBAEjB,wBAAe,MAAM,oBAAmB,CACpC,CACP;SACF;KACF;CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvBreadcrumbsDocs: NovaDocs<Components.NvBreadcrumbs> = {\n  component: 'nv-breadcrumbs',\n  subcomponents: ['nv-breadcrumb', 'nv-icon'],\n  composedComponents: ['nv-breadcrumb'],\n  stories: [\n    {\n      name: 'Default',\n      template: (\n        <nv-breadcrumbs data-storybook-args>\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb current>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n        </nv-breadcrumbs>\n      ),\n    },\n    {\n      name: 'Collapsed',\n      description:\n        'A breadcrumb example featuring a collapsed menu for handling long navigation paths',\n      template: (\n        <nv-breadcrumbs data-storybook-args data-class=\"mt-5 mb-20\">\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb type=\"collapsed\" tooltip=\"Click to expand\">\n            <li>\n              <nv-breadcrumb>\n                <a href=\"#\">Breadcrumb</a>\n              </nv-breadcrumb>\n            </li>\n            <li>\n              <nv-breadcrumb>\n                <a href=\"#\">Breadcrumb</a>\n              </nv-breadcrumb>\n            </li>\n            <li>\n              <nv-breadcrumb>\n                <a href=\"#\">Breadcrumb</a>\n              </nv-breadcrumb>\n            </li>\n          </nv-breadcrumb>\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb current>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n        </nv-breadcrumbs>\n      ),\n    },\n    {\n      name: 'Current page',\n      description:\n        'Hides the breadcrumb and sets the aria-current attribute, use this on the last breadcrumb, and include a header for the page.',\n      template: (\n        <div>\n          <nv-breadcrumbs data-storybook-args>\n            <nv-breadcrumb>\n              <a href=\"#\">Home</a>\n            </nv-breadcrumb>\n            <nv-breadcrumb>\n              <a href=\"#\">User account</a>\n            </nv-breadcrumb>\n            <nv-breadcrumb current>\n              <a href=\"#\">Authorization</a>\n            </nv-breadcrumb>\n          </nv-breadcrumbs>\n\n          <h2 data-class=\"mt-2\">Authorization</h2>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvBreadcrumbsDocs;\n"]}

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

@@ -1,3 +1,10 @@
+/**
+ * Scrollbar mixin for the Nova Design System
+ * This mixin provides consistent scrollbar styling for components
+ * 
+ * Usage:
+ * @include scrollbar();
+ */
 nv-calendar {
   display: block;
 }
@@ -42,6 +49,18 @@ nv-calendar {
   width: auto;
   overflow-x: hidden;
 }
+.datepicker-wrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.datepicker-wrapper::-webkit-scrollbar-track {
+  background-color: var(--color-level-10-background);
+  border-radius: 9999px;
+}
+.datepicker-wrapper::-webkit-scrollbar-thumb {
+  background-color: var(--color-gray-200);
+  border-radius: 9999px;
+}
 
 .datepicker-wrapper.single {
   justify-content: center;
@@ -219,10 +238,14 @@ nv-calendar {
   color: var(--components-calendar-cell-text-selected);
 }
 .day.outside-month.in-range {
-  opacity: 1 !important;
+  opacity: 0.5 !important;
   background-color: var(--components-calendar-cell-background-in-range);
   color: var(--components-calendar-cell-text-in-range);
 }
+.day.outside-month.in-range:hover {
+  opacity: 0.7 !important;
+  background-color: var(--components-calendar-cell-background-in-range);
+}
 .day.in-range {
   background: var(--components-calendar-cell-background-in-range);
   color: var(--components-calendar-cell-text-in-range);
@@ -264,9 +287,9 @@ nv-calendar {
   border-bottom-left-radius: 0 !important;
 }
 .day.outside-month.range-start, .day.outside-month.range-end {
+  opacity: 1 !important;
   background: var(--components-calendar-cell-background-selected) !important;
   color: var(--components-calendar-cell-text-selected);
-  opacity: 1 !important;
 }
 .day.is-today {
   font-weight: 700;