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

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

@@ -6,6 +6,42 @@ import { useFade, useCollapse, timeline } from "../../animations";
  */
 export class NvBadge {
     constructor() {
+        /****************************************************************************/
+        //#region DEPRECATED
+        /**
+         * Whether the badge is dismissible.
+         * @deprecated use dismissible instead.
+         */
+        this.dismissal = false;
+        //#endregion DEPRECATED
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * The color of the badge. Use a string between 1 to 10
+         */
+        this.color = '1';
+        /**
+         * Main content of the badge.
+         */
+        this.label = null;
+        /**
+         * The lead icon of the badge.
+         */
+        this.leadIcon = null;
+        /**
+         * Whether the badge is dismissible.
+         */
+        this.dismissible = false;
+        /**
+         * Controls the visibility of the badge. Will animate with fade and collapse.
+         */
+        this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
+        this._isHidden = this.hidden;
+        /**
+         * When true, the alert does not automatically close upon dismissing.
+         * Useful for externally controlled component behavior.
+         */
+        this.preventAutoClose = false;
         //#endregion LIFECYCLE
         /****************************************************************************/
         //#region METHODS
@@ -19,16 +55,6 @@ export class NvBadge {
             }
             this.closeClicked.emit(originalEvent);
         };
-        this.dismissal = false;
-        this.icon = undefined;
-        this.iconLocation = undefined;
-        this.color = '1';
-        this.label = null;
-        this.leadIcon = null;
-        this.dismissible = false;
-        this.hidden = false;
-        this._isHidden = this.hidden;
-        this.preventAutoClose = false;
     }
     //#endregion EVENTS
     /****************************************************************************/
@@ -89,11 +115,11 @@ export class NvBadge {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '18d3a28777aa74117ccc68aa0c889ea716b90d56', class: clsx(`badge-${this.color}`, {
+        return (h(Host, { key: 'f0b9bf1d1a32c72f9d8176300d06875f0258f068', 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" })))));
+            }) }, h("slot", { key: '967f6cceadd13f1a7758696b0ddb9b77d256caac', name: "leading-icon" }, this.leadIcon && (h("nv-icon", { key: '683ccf19e6281ab8fded9e217f61a67d835a7b37', slot: "leading-icon", name: this.leadIcon, size: "sm" }))), this.label && h("span", { key: 'e01b6071da8bdc73d7708e91c67afe9bc2819095' }, this.label), this.dismissible && (h("button", { key: 'f8040e70acd910c63fa377837fc13316a321366c', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: '405cee0cdcdab3a470086ccbd3aa5b46c5e0e2ea', name: "x", size: "sm" })))));
     }
     static get is() { return "nv-badge"; }
     static get originalStyleUrls() {
@@ -125,6 +151,8 @@ export class NvBadge {
                         }],
                     "text": "Whether the badge is dismissible."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "dismissal",
                 "reflect": false,
                 "defaultValue": "false"
@@ -146,6 +174,8 @@ export class NvBadge {
                         }],
                     "text": "The icon to display in the badge."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon",
                 "reflect": false
             },
@@ -166,6 +196,8 @@ export class NvBadge {
                         }],
                     "text": "The location of the icon in the badge."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon-location",
                 "reflect": true
             },
@@ -183,6 +215,8 @@ export class NvBadge {
                     "tags": [],
                     "text": "The color of the badge. Use a string between 1 to 10"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "color",
                 "reflect": true,
                 "defaultValue": "'1'"
@@ -201,6 +235,8 @@ export class NvBadge {
                     "tags": [],
                     "text": "Main content of the badge."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": true,
                 "defaultValue": "null"
@@ -219,6 +255,8 @@ export class NvBadge {
                     "tags": [],
                     "text": "The lead icon of the badge."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "lead-icon",
                 "reflect": true,
                 "defaultValue": "null"
@@ -237,6 +275,8 @@ export class NvBadge {
                     "tags": [],
                     "text": "Whether the badge is dismissible."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "dismissible",
                 "reflect": true,
                 "defaultValue": "false"
@@ -255,6 +295,8 @@ export class NvBadge {
                     "tags": [],
                     "text": "Controls the visibility of the badge. Will animate with fade and collapse."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "hidden",
                 "reflect": true,
                 "defaultValue": "false"
@@ -273,6 +315,8 @@ export class NvBadge {
                     "tags": [],
                     "text": "When true, the alert does not automatically close upon dismissing.\nUseful for externally controlled component behavior."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "prevent-auto-close",
                 "reflect": true,
                 "defaultValue": "false"

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

@@ -1 +1 @@
-{"version":3,"file":"nv-badge.js","sourceRoot":"","sources":["../../../src/components/nv-badge/nv-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EAEL,KAAK,EACL,OAAO,EACP,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAElE;;GAEG;AAMH,MAAM,OAAO,OAAO;;QAgKlB,sBAAsB;QACtB,8EAA8E;QAC9E,iBAAiB;QAEjB;;;WAGG;QACc,gBAAW,GAAG,CAAC,aAA0B,EAAE,EAAE;YAC5D,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBAC3B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACrB,CAAC;YAED,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACxC,CAAC,CAAC;yBAnK4B,KAAK;;;qBAwBT,GAAG;qBAMI,IAAI;wBAMV,IAAI;2BAMR,KAAK;sBAMV,KAAK;yBAEM,IAAI,CAAC,MAAM;gCAOH,KAAK;;IAyB1C,mBAAmB;IACnB,8EAA8E;IAC9E,kBAAkB;IAElB;;;OAGG;IAEH,qBAAqB,CAAC,SAAkB;QACtC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;IAC/B,CAAC;IAED;;;OAGG;IAEH,gBAAgB,CAAC,IAAY;QAC3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACvB,CAAC;IAED;;;OAGG;IAEH,KAAK,CAAC,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;IACxD,CAAC;IAED,qBAAqB;IACrB,8EAA8E;IAC9E,mBAAmB;IAEnB;;OAEG;IACH,iBAAiB;QACf,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC;QACpC,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE,CAAC;YACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;QAC5B,CAAC;QAED,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,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;QACf,CAAC;IACH,CAAC;IAkBD,oBAAoB;IACpB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,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;YAEF,6DAAM,IAAI,EAAC,cAAc,IACtB,IAAI,CAAC,QAAQ,IAAI,CAChB,gEACE,IAAI,EAAC,cAAc,EACnB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,IAAI,EAAC,IAAI,GACA,CACZ,CACI;YACN,IAAI,CAAC,KAAK,IAAI,+DAAO,IAAI,CAAC,KAAK,CAAQ;YACvC,IAAI,CAAC,WAAW,IAAI,CACnB,+DAAQ,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ;gBAC5D,gEAAS,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,GAAG,CACvB,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n  State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/**\n * @slot leading-icon - Icon before the label.\n */\n@Component({\n  tag: 'nv-badge',\n  styleUrl: 'nv-badge.scss',\n  shadow: false,\n})\nexport class NvBadge {\n  @Element() ref: HTMLNvBadgeElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Whether the badge is dismissible.\n   * @deprecated use dismissible instead.\n   */\n  @Prop()\n  readonly dismissal: boolean = false;\n\n  /**\n   * The icon to display in the badge.\n   * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n   */\n  @Prop()\n  readonly icon: string;\n\n  /**\n   * The location of the icon in the badge.\n   * @deprecated only leadIcon now.\n   */\n  @Prop({ reflect: true })\n  readonly iconLocation: 'left' | 'right';\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The color of the badge. Use a string between 1 to 10\n   */\n  @Prop({ reflect: true })\n  readonly color?: string = '1';\n\n  /**\n   * Main content of the badge.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string | null = null;\n\n  /**\n   * The lead icon of the badge.\n   */\n  @Prop({ reflect: true, mutable: true })\n  leadIcon?: string | null = null;\n\n  /**\n   * Whether the badge is dismissible.\n   */\n  @Prop({ reflect: true, mutable: true })\n  dismissible: boolean = false;\n\n  /**\n   * Controls the visibility of the badge. Will animate with fade and collapse.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n  @State()\n  private _isHidden: boolean = this.hidden;\n\n  /**\n   * When true, the alert does not automatically close upon dismissing.\n   * Useful for externally controlled component behavior.\n   */\n  @Prop({ reflect: true })\n  readonly preventAutoClose: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the badge is dismissed.\n   */\n  @Event()\n  closeClicked: EventEmitter<MouseEvent>;\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Handles the dismissal prop change.\n   * @param {boolean} dismissal - The new dismissal value.\n   */\n  @Watch('dismissal')\n  handleDismissalChange(dismissal: boolean) {\n    this.dismissible = dismissal;\n  }\n\n  /**\n   * Handles the icon prop change.\n   * @param {string} icon - The new icon value.\n   */\n  @Watch('icon')\n  handleIconChange(icon: string) {\n    this.leadIcon = icon;\n  }\n\n  /**\n   * Handles the hidden prop change.\n   * @param {boolean} hidden - The new hidden value.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n    if (this._isHidden === true) this._isHidden = hidden;\n\n    const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n    if (hidden === true) await timeline(fadeOut, collapse).start();\n    if (hidden === false) await timeline(expand, fadeIn).start();\n\n    this.hiddenChangedComplete.emit(hidden);\n\n    if (this._isHidden === false) this._isHidden = hidden;\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  /**\n   * Component will load.\n   */\n  componentWillLoad() {\n    if (this.dismissal) {\n      this.dismissible = this.dismissal;\n    }\n\n    if (this.icon != null && this.icon != '') {\n      this.leadIcon = this.icon;\n    }\n\n    if (this.hidden) {\n      const { setCollapsed } = useCollapse(this.ref);\n      const { setFadeOut } = useFade(this.ref);\n\n      setCollapsed();\n      setFadeOut();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the close button click.\n   * @param {MouseEvent} originalEvent - The original event.\n   */\n  private readonly handleClose = (originalEvent?: MouseEvent) => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit(originalEvent);\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(`badge-${this.color}`, {\n          'has-close': this.dismissible,\n          'with-gap': this.dismissible || this.label,\n          'visually-hidden': this._isHidden,\n        })}\n      >\n        <slot name=\"leading-icon\">\n          {this.leadIcon && (\n            <nv-icon\n              slot=\"leading-icon\"\n              name={this.leadIcon}\n              size=\"sm\"\n            ></nv-icon>\n          )}\n        </slot>\n        {this.label && <span>{this.label}</span>}\n        {this.dismissible && (\n          <button onClick={this.handleClose} class=\"close\" type=\"button\">\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}
+{"version":3,"file":"nv-badge.js","sourceRoot":"","sources":["../../../src/components/nv-badge/nv-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n  State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/**\n * @slot leading-icon - Icon before the label.\n */\n@Component({\n  tag: 'nv-badge',\n  styleUrl: 'nv-badge.scss',\n  shadow: false,\n})\nexport class NvBadge {\n  @Element() ref: HTMLNvBadgeElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Whether the badge is dismissible.\n   * @deprecated use dismissible instead.\n   */\n  @Prop()\n  readonly dismissal: boolean = false;\n\n  /**\n   * The icon to display in the badge.\n   * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n   */\n  @Prop()\n  readonly icon: string;\n\n  /**\n   * The location of the icon in the badge.\n   * @deprecated only leadIcon now.\n   */\n  @Prop({ reflect: true })\n  readonly iconLocation: 'left' | 'right';\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The color of the badge. Use a string between 1 to 10\n   */\n  @Prop({ reflect: true })\n  readonly color?: string = '1';\n\n  /**\n   * Main content of the badge.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string | null = null;\n\n  /**\n   * The lead icon of the badge.\n   */\n  @Prop({ reflect: true, mutable: true })\n  leadIcon?: string | null = null;\n\n  /**\n   * Whether the badge is dismissible.\n   */\n  @Prop({ reflect: true, mutable: true })\n  dismissible: boolean = false;\n\n  /**\n   * Controls the visibility of the badge. Will animate with fade and collapse.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n  @State()\n  private _isHidden: boolean = this.hidden;\n\n  /**\n   * When true, the alert does not automatically close upon dismissing.\n   * Useful for externally controlled component behavior.\n   */\n  @Prop({ reflect: true })\n  readonly preventAutoClose: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the badge is dismissed.\n   */\n  @Event()\n  closeClicked: EventEmitter<MouseEvent>;\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Handles the dismissal prop change.\n   * @param {boolean} dismissal - The new dismissal value.\n   */\n  @Watch('dismissal')\n  handleDismissalChange(dismissal: boolean) {\n    this.dismissible = dismissal;\n  }\n\n  /**\n   * Handles the icon prop change.\n   * @param {string} icon - The new icon value.\n   */\n  @Watch('icon')\n  handleIconChange(icon: string) {\n    this.leadIcon = icon;\n  }\n\n  /**\n   * Handles the hidden prop change.\n   * @param {boolean} hidden - The new hidden value.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n    if (this._isHidden === true) this._isHidden = hidden;\n\n    const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n    if (hidden === true) await timeline(fadeOut, collapse).start();\n    if (hidden === false) await timeline(expand, fadeIn).start();\n\n    this.hiddenChangedComplete.emit(hidden);\n\n    if (this._isHidden === false) this._isHidden = hidden;\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  /**\n   * Component will load.\n   */\n  componentWillLoad() {\n    if (this.dismissal) {\n      this.dismissible = this.dismissal;\n    }\n\n    if (this.icon != null && this.icon != '') {\n      this.leadIcon = this.icon;\n    }\n\n    if (this.hidden) {\n      const { setCollapsed } = useCollapse(this.ref);\n      const { setFadeOut } = useFade(this.ref);\n\n      setCollapsed();\n      setFadeOut();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the close button click.\n   * @param {MouseEvent} originalEvent - The original event.\n   */\n  private readonly handleClose = (originalEvent?: MouseEvent) => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit(originalEvent);\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(`badge-${this.color}`, {\n          'has-close': this.dismissible,\n          'with-gap': this.dismissible || this.label,\n          'visually-hidden': this._isHidden,\n        })}\n      >\n        <slot name=\"leading-icon\">\n          {this.leadIcon && (\n            <nv-icon\n              slot=\"leading-icon\"\n              name={this.leadIcon}\n              size=\"sm\"\n            ></nv-icon>\n          )}\n        </slot>\n        {this.label && <span>{this.label}</span>}\n        {this.dismissible && (\n          <button onClick={this.handleClose} class=\"close\" type=\"button\">\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

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

@@ -17,7 +17,6 @@ export class NvBaseComponent {
     }
     componentDidLoad() {
         this.mutationObserver = new MutationObserver(mutations => {
-            console.log(mutations);
             mutations.forEach(mutation => {
                 if (mutation.type === 'attributes') {
                     const target = mutation.target;
@@ -61,7 +60,7 @@ export class NvBaseComponent {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'b337eb1cfbe80ce8cefdb00a9d0d1fbb153869ba', style: { display: 'block' } }, h("slot", { key: '575c8605510de2b97bf202809492dd5e2ba4a285' })));
+        return (h(Host, { key: '81da4e7fd653192079ab22a607d1f525b504f3e4', style: { display: 'block' } }, h("slot", { key: 'e766e4b073b16d367c473b02c94448cf835a4921' })));
     }
     static get is() { return "nv-base"; }
     static get elementRef() { return "el"; }

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

@@ -1 +1 @@
-{"version":3,"file":"nv-base.js","sourceRoot":"","sources":["../../../src/components/nv-base/nv-base.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,OAAO,GAA2B;IACtC,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,QAAQ;IACjB,WAAW,EAAE,WAAW;IACxB,aAAa,EAAE,aAAa;CAC7B,CAAC;AAEF;;;GAGG;AAKH,MAAM,OAAO,eAAe;IAK1B,8EAA8E;IAC9E,mBAAmB;IAEnB,iBAAiB;QACf,IAAI,CAAC,2BAA2B,EAAE,CAAC;IACrC,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,SAAS,CAAC,EAAE;YACvD,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;YACvB,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;gBAC3B,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC;oBACnC,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAqB,CAAC;oBAE9C,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE;wBAC3C,IAAI,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;4BACvC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;wBAC/C,CAAC;6BAAM,CAAC;4BACN,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;wBAClD,CAAC;oBACH,CAAC,CAAC,CAAC;gBACL,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;QACrC,CAAC;IACH,CAAC;IAED,sBAAsB;IACtB,8EAA8E;IAC9E,iBAAiB;IAET,2BAA2B;QACjC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE;YAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,IAAI,aAAa,GAAG,CAAC,CAAC;YAChE,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;gBACzB,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;YAChD,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YACrC,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;YACrC,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;IACpB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;YAC/B,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;CAGF","sourcesContent":["import { Component, Element, h, Host } from '@stencil/core';\n\nconst classes: Record<string, string> = {\n  'w-full': 'w-full',\n  'wFull': 'w-full',\n  'is-active': 'is-active',\n  'is-selected': 'is-selected',\n};\n\n/**\n * @slot default - render children\n * @deprecated This is only to help with the migration from v2 to v3. It will be removed in the next major release.\n */\n@Component({\n  tag: 'nv-base',\n  shadow: false,\n})\nexport class NvBaseComponent {\n  @Element() el: HTMLNvBaseElement;\n\n  private mutationObserver: MutationObserver;\n\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.applyClassesOnInitialRender();\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(mutations => {\n      console.log(mutations);\n      mutations.forEach(mutation => {\n        if (mutation.type === 'attributes') {\n          const target = mutation.target as HTMLElement;\n\n          Object.keys(classes).forEach(attributeName => {\n            if (target.hasAttribute(attributeName)) {\n              target.classList.add(classes[attributeName]);\n            } else {\n              target.classList.remove(classes[attributeName]);\n            }\n          });\n        }\n      });\n    });\n    this.observeElements();\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  private applyClassesOnInitialRender() {\n    Object.keys(classes).forEach(attributeName => {\n      const elements = this.el.querySelectorAll(`[${attributeName}]`);\n      elements.forEach(element => {\n        element.classList.add(classes[attributeName]);\n      });\n    });\n  }\n\n  private observeElements() {\n    this.mutationObserver.observe(this.el, {\n      attributes: true,\n      attributeFilter: Object.keys(classes),\n      subtree: true,\n    });\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host style={{ display: 'block' }}>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}
+{"version":3,"file":"nv-base.js","sourceRoot":"","sources":["../../../src/components/nv-base/nv-base.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,OAAO,GAA2B;IACtC,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,QAAQ;IACjB,WAAW,EAAE,WAAW;IACxB,aAAa,EAAE,aAAa;CAC7B,CAAC;AAEF;;;GAGG;AAKH,MAAM,OAAO,eAAe;IAK1B,8EAA8E;IAC9E,mBAAmB;IAEnB,iBAAiB;QACf,IAAI,CAAC,2BAA2B,EAAE,CAAC;IACrC,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,SAAS,CAAC,EAAE;YACvD,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;gBAC3B,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC;oBACnC,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAqB,CAAC;oBAE9C,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE;wBAC3C,IAAI,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;4BACvC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;wBAC/C,CAAC;6BAAM,CAAC;4BACN,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;wBAClD,CAAC;oBACH,CAAC,CAAC,CAAC;gBACL,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;QACrC,CAAC;IACH,CAAC;IAED,sBAAsB;IACtB,8EAA8E;IAC9E,iBAAiB;IAET,2BAA2B;QACjC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE;YAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,IAAI,aAAa,GAAG,CAAC,CAAC;YAChE,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;gBACzB,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;YAChD,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YACrC,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;YACrC,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;IACpB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;YAC/B,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;CAGF","sourcesContent":["import { Component, Element, h, Host } from '@stencil/core';\n\nconst classes: Record<string, string> = {\n  'w-full': 'w-full',\n  'wFull': 'w-full',\n  'is-active': 'is-active',\n  'is-selected': 'is-selected',\n};\n\n/**\n * @slot default - render children\n * @deprecated This is only to help with the migration from v2 to v3. It will be removed in the next major release.\n */\n@Component({\n  tag: 'nv-base',\n  shadow: false,\n})\nexport class NvBaseComponent {\n  @Element() el: HTMLNvBaseElement;\n\n  private mutationObserver: MutationObserver;\n\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.applyClassesOnInitialRender();\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(mutations => {\n      mutations.forEach(mutation => {\n        if (mutation.type === 'attributes') {\n          const target = mutation.target as HTMLElement;\n\n          Object.keys(classes).forEach(attributeName => {\n            if (target.hasAttribute(attributeName)) {\n              target.classList.add(classes[attributeName]);\n            } else {\n              target.classList.remove(classes[attributeName]);\n            }\n          });\n        }\n      });\n    });\n    this.observeElements();\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  private applyClassesOnInitialRender() {\n    Object.keys(classes).forEach(attributeName => {\n      const elements = this.el.querySelectorAll(`[${attributeName}]`);\n      elements.forEach(element => {\n        element.classList.add(classes[attributeName]);\n      });\n    });\n  }\n\n  private observeElements() {\n    this.mutationObserver.observe(this.el, {\n      attributes: true,\n      attributeFilter: Object.keys(classes),\n      subtree: true,\n    });\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host style={{ display: 'block' }}>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

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

@@ -0,0 +1,14 @@
+nv-breadcrumb {
+  display: flex;
+  align-items: center;
+  color: inherit;
+  gap: var(--spacing-1);
+}
+nv-breadcrumb > a {
+  display: inline-flex;
+  align-self: center;
+  color: inherit;
+}
+nv-breadcrumb[current]:not([current=false]) {
+  color: var(--color-interaction-link-high-text);
+}

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

@@ -0,0 +1,6 @@
+const NvBreadcrumbDocs = {
+    component: 'nv-breadcrumb',
+    skip: true,
+};
+export default NvBreadcrumbDocs;
+//# sourceMappingURL=nv-breadcrumb.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-breadcrumb.docs.js","sourceRoot":"","sources":["../../../src/components/nv-breadcrumb/nv-breadcrumb.docs.tsx"],"names":[],"mappings":"AAGA,MAAM,gBAAgB,GAAsC;IAC1D,SAAS,EAAE,eAAe;IAC1B,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvBreadcrumbDocs: NovaDocs<Components.NvBreadcrumb> = {\n  component: 'nv-breadcrumb',\n  skip: true,\n};\n\nexport default NvBreadcrumbDocs;\n"]}

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

@@ -0,0 +1,111 @@
+import { Host, h, forceUpdate } from "@stencil/core";
+/**
+ * @slot default - Pass an icon, a link, or text to render the breadcrumb content.
+ * @slot separator - The separator between breadcrumb items.
+ */
+export class NvBreadcrumb {
+    constructor() {
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs
+         * in a dropdown. Use default for a single item. When passing multiple items
+         * as collapsed, make sure to wrap you links in list tags
+         */
+        this.type = 'default';
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentDidLoad() {
+        // Force a re-render to pass the popoverTrigger ref to the popovers
+        if (this.type === 'collapsed')
+            forceUpdate(this);
+    }
+    componentWillLoad() {
+        if (this.type === 'default' && this.tooltip) {
+            this.popoverTrigger = Array.from(this.el.children).find(child => child.getAttribute('slot') === null);
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '44aca9cb5e3a794ca8bae895b96c0c8bba146fa9', role: "listitem", "aria-current": this.current ? 'location' : undefined }, this.type === 'collapsed' ? (h("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (h("slot", null)), this.tooltip && (h("nv-tooltip", { key: '4a3ab4872fe69a361be4699a54ecb17175fe7a77', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (h("nv-popover", { key: '286cc8222a28f70c72e4d4496ba105c82721a2fe', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, h("ul", { key: 'c3bc55b938e5a3ec5f90f5f50aefa9fcb75463f8', slot: "content" }, h("slot", { key: '2533b6026d20fc818caa3146580b1ffd4d0aa98c' })))), h("slot", { key: '4f3c160421ca81596f7c131592b797b544f43f98', name: "separator" }, h("nv-icon", { key: 'e7bdab55acbba96b7149e929affd6b07acb13afb', name: 'chevron-right', "data-scope": "separator" }))));
+    }
+    static get is() { return "nv-breadcrumb"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-breadcrumb.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-breadcrumb.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'collapsed' | 'default'",
+                    "resolved": "\"collapsed\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs\nin a dropdown. Use default for a single item. When passing multiple items\nas collapsed, make sure to wrap you links in list tags"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": true,
+                "defaultValue": "'default'"
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Add an optional tooltip to provide extra information about the breadcrumb."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "tooltip",
+                "reflect": true
+            },
+            "current": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this to highlight the breadcrumb as the current page in your\nnavigation. It also makes the page clearer to screen readers with\naria-current=\"location\"."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "current",
+                "reflect": true
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=nv-breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-breadcrumb.js","sourceRoot":"","sources":["../../../src/components/nv-breadcrumb/nv-breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG/E;;;GAGG;AAMH,MAAM,OAAO,YAAY;IALzB;QASE,8EAA8E;QAC9E,oBAAoB;QAEpB;;;;WAIG;QAEM,SAAI,GAA4B,SAAS,CAAC;KAgFpD;IAhEC,uBAAuB;IACvB,8EAA8E;IAC9E,mBAAmB;IAEnB,gBAAgB;QACd,mEAAmE;QACnE,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW;YAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IACnD,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAC5C,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CACrD,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAC7C,CAAC;QACJ,CAAC;IACH,CAAC;IAED,sBAAsB;IACtB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;YAElD,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,CAC3B,cAAQ,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,UAAc,CAC5D,CAAC,CAAC,CAAC,CACF,eAAa,CACd;YAEA,IAAI,CAAC,OAAO,IAAI,CACf,mEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAC,KAAK,GACH,CACf;YAEA,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,CAC5B,mEACE,WAAW,EAAC,OAAO,EACnB,SAAS,EAAC,aAAa,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc;gBAEnC,2DAAI,IAAI,EAAC,SAAS;oBAChB,8DAAa,CACV,CACM,CACd;YAED,6DAAM,IAAI,EAAC,WAAW;gBACpB,gEACE,IAAI,EAAE,eAAkC,gBAC7B,WAAW,GACb,CACN,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","sourcesContent":["import { Component, Prop, Host, h, Element, forceUpdate } from '@stencil/core';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Pass an icon, a link, or text to render the breadcrumb content.\n * @slot separator - The separator between breadcrumb items.\n */\n@Component({\n  tag: 'nv-breadcrumb',\n  styleUrl: 'nv-breadcrumb.scss',\n  shadow: false,\n})\nexport class NvBreadcrumb {\n  @Element() el: HTMLNvBreadcrumbElement;\n  private popoverTrigger!: Element;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs\n   * in a dropdown. Use default for a single item. When passing multiple items\n   * as collapsed, make sure to wrap you links in list tags\n   */\n  @Prop({ reflect: true })\n  readonly type: 'collapsed' | 'default' = 'default';\n\n  /**\n   * Add an optional tooltip to provide extra information about the breadcrumb.\n   */\n  @Prop({ reflect: true })\n  readonly tooltip: string;\n\n  /**\n   * Use this to highlight the breadcrumb as the current page in your\n   * navigation. It also makes the page clearer to screen readers with\n   * aria-current=\"location\".\n   */\n  @Prop({ reflect: true })\n  readonly current: boolean;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentDidLoad() {\n    // Force a re-render to pass the popoverTrigger ref to the popovers\n    if (this.type === 'collapsed') forceUpdate(this);\n  }\n\n  componentWillLoad() {\n    if (this.type === 'default' && this.tooltip) {\n      this.popoverTrigger = Array.from(this.el.children).find(\n        child => child.getAttribute('slot') === null,\n      );\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"listitem\"\n        aria-current={this.current ? 'location' : undefined}\n      >\n        {this.type === 'collapsed' ? (\n          <button ref={el => (this.popoverTrigger = el)}>...</button>\n        ) : (\n          <slot></slot>\n        )}\n\n        {this.tooltip && (\n          <nv-tooltip\n            message={this.tooltip}\n            triggerElement={this.popoverTrigger}\n            placement=\"top\"\n          ></nv-tooltip>\n        )}\n\n        {this.type === 'collapsed' && (\n          <nv-popover\n            triggerMode=\"click\"\n            groupName=\"breadcrumbs\"\n            triggerElement={this.popoverTrigger}\n          >\n            <ul slot=\"content\">\n              <slot></slot>\n            </ul>\n          </nv-popover>\n        )}\n\n        <slot name=\"separator\">\n          <nv-icon\n            name={'chevron-right' satisfies IconName}\n            data-scope=\"separator\"\n          ></nv-icon>\n        </slot>\n      </Host>\n    );\n  }\n\n  // #endregion RENDER\n}\n"]}

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

@@ -0,0 +1,12 @@
+nv-breadcrumbs {
+  display: block;
+}
+nv-breadcrumbs > ol {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+nv-breadcrumbs nv-breadcrumb:last-child [data-scope=separator], nv-breadcrumbs nv-breadcrumb:last-child [slot=separator] {
+  display: none;
+}

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

@@ -0,0 +1,34 @@
+import { h } from "@stencil/core";
+const NvBreadcrumbsDocs = {
+    component: 'nv-breadcrumbs',
+    subcomponents: ['nv-breadcrumb', 'nv-icon'],
+    composedComponents: ['nv-breadcrumb'],
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-breadcrumbs", { "data-storybook-args": true }, h("nv-breadcrumb", null, h("nv-icon", { name: "home" })), h("nv-breadcrumb", null, h("a", { href: "#" }, "Example with link")), h("nv-breadcrumb", { current: true }, h("a", { href: "#" }, "Current page")))),
+        },
+        {
+            name: 'With tooltips',
+            description: 'A breadcrumb structure that includes tooltips for additional context. Each breadcrumb item provides a tooltip describing its function',
+            template: (h("nv-breadcrumbs", { "data-storybook-args": true, "data-class": "my-5" }, h("nv-breadcrumb", { tooltip: "Home" }, h("a", { href: "#" }, h("nv-icon", { name: "home" }))), h("nv-breadcrumb", { tooltip: "User account" }, h("a", { href: "#" }, h("nv-icon", { name: "user" }))), h("nv-breadcrumb", { current: true, tooltip: "You are here" }, h("a", { href: "#" }, "Current page")))),
+        },
+        {
+            name: 'Collapsed',
+            description: 'A breadcrumb example featuring a collapsed menu for handling long navigation paths',
+            template: (h("nv-breadcrumbs", { "data-storybook-args": true, "data-class": "mt-5 mb-20" }, h("nv-breadcrumb", null, h("a", { href: "#" }, h("nv-icon", { name: "home" }))), h("nv-breadcrumb", { type: "collapsed", tooltip: "Click to expand" }, h("li", null, h("a", { href: "#" }, "User Account")), h("li", null, h("a", { href: "#" }, "Settings")), h("li", null, h("a", { href: "#" }, "Payment"))), h("nv-breadcrumb", { current: true }, h("a", { href: "#" }, "Current page")))),
+        },
+        {
+            name: 'Custom separator',
+            description: 'A breadcrumb example featuring a custom separator icon for visual clarity',
+            template: (h("nv-breadcrumbs", { "data-storybook-args": true }, h("nv-breadcrumb", null, h("nv-icon", { name: "home" }), h("span", { slot: "separator" }, "/")), h("nv-breadcrumb", null, h("a", { href: "#" }, "Example with link"), h("span", { slot: "separator" }, "/")), h("nv-breadcrumb", { current: true }, h("a", { href: "#" }, "Current page")))),
+        },
+        {
+            name: 'Current page',
+            description: 'Toggle the breadcrumbs to show the current page the visitor is on, updates the style and aria-current attribute',
+            template: (h("nv-breadcrumbs", { "data-storybook-args": true }, h("nv-breadcrumb", null, h("a", { href: "#" }, "Home")), h("nv-breadcrumb", null, h("a", { href: "#" }, "User account")), h("nv-breadcrumb", { current: true }, h("a", { href: "#" }, "Current page")))),
+        },
+    ],
+};
+export default NvBreadcrumbsDocs;
+//# sourceMappingURL=nv-breadcrumbs.docs.js.map

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

@@ -0,0 +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,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,eAAS,IAAI,EAAC,MAAM,GAAW,CACjB;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,wBAAsB,CACnB;gBAChB,qBAAe,OAAO;oBACpB,SAAG,IAAI,EAAC,GAAG,mBAAiB,CACd,CACD,CAClB;SACF;QACD;YACE,IAAI,EAAE,eAAe;YACrB,WAAW,EACT,uIAAuI;YACzI,QAAQ,EAAE,CACR,iEAA+C,MAAM;gBACnD,qBAAe,OAAO,EAAC,MAAM;oBAC3B,SAAG,IAAI,EAAC,GAAG;wBACT,eAAS,IAAI,EAAC,MAAM,GAAW,CAC7B,CACU;gBAChB,qBAAe,OAAO,EAAC,cAAc;oBACnC,SAAG,IAAI,EAAC,GAAG;wBACT,eAAS,IAAI,EAAC,MAAM,GAAW,CAC7B,CACU;gBAChB,qBAAe,OAAO,QAAC,OAAO,EAAC,cAAc;oBAC3C,SAAG,IAAI,EAAC,GAAG,mBAAiB,CACd,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;wBACT,eAAS,IAAI,EAAC,MAAM,GAAW,CAC7B,CACU;gBAChB,qBAAe,IAAI,EAAC,WAAW,EAAC,OAAO,EAAC,iBAAiB;oBACvD;wBACE,SAAG,IAAI,EAAC,GAAG,mBAAiB,CACzB;oBACL;wBACE,SAAG,IAAI,EAAC,GAAG,eAAa,CACrB;oBACL;wBACE,SAAG,IAAI,EAAC,GAAG,cAAY,CACpB,CACS;gBAChB,qBAAe,OAAO;oBACpB,SAAG,IAAI,EAAC,GAAG,mBAAiB,CACd,CACD,CAClB;SACF;QACD;YACE,IAAI,EAAE,kBAAkB;YACxB,WAAW,EACT,2EAA2E;YAC7E,QAAQ,EAAE,CACR;gBACE;oBACE,eAAS,IAAI,EAAC,MAAM,GAAW;oBAC/B,YAAM,IAAI,EAAC,WAAW,QAAS,CACjB;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,wBAAsB;oBACjC,YAAM,IAAI,EAAC,WAAW,QAAS,CACjB;gBAChB,qBAAe,OAAO;oBACpB,SAAG,IAAI,EAAC,GAAG,mBAAiB,CACd,CACD,CAClB;SACF;QACD;YACE,IAAI,EAAE,cAAc;YACpB,WAAW,EACT,iHAAiH;YACnH,QAAQ,EAAE,CACR;gBACE;oBACE,SAAG,IAAI,EAAC,GAAG,WAAS,CACN;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,mBAAiB,CACd;gBAChB,qBAAe,OAAO;oBACpB,SAAG,IAAI,EAAC,GAAG,mBAAiB,CACd,CACD,CAClB;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            <nv-icon name=\"home\"></nv-icon>\n          </nv-breadcrumb>\n          <nv-breadcrumb>\n            <a href=\"#\">Example with link</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb current>\n            <a href=\"#\">Current page</a>\n          </nv-breadcrumb>\n        </nv-breadcrumbs>\n      ),\n    },\n    {\n      name: 'With tooltips',\n      description:\n        'A breadcrumb structure that includes tooltips for additional context. Each breadcrumb item provides a tooltip describing its function',\n      template: (\n        <nv-breadcrumbs data-storybook-args data-class=\"my-5\">\n          <nv-breadcrumb tooltip=\"Home\">\n            <a href=\"#\">\n              <nv-icon name=\"home\"></nv-icon>\n            </a>\n          </nv-breadcrumb>\n          <nv-breadcrumb tooltip=\"User account\">\n            <a href=\"#\">\n              <nv-icon name=\"user\"></nv-icon>\n            </a>\n          </nv-breadcrumb>\n          <nv-breadcrumb current tooltip=\"You are here\">\n            <a href=\"#\">Current page</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=\"#\">\n              <nv-icon name=\"home\"></nv-icon>\n            </a>\n          </nv-breadcrumb>\n          <nv-breadcrumb type=\"collapsed\" tooltip=\"Click to expand\">\n            <li>\n              <a href=\"#\">User Account</a>\n            </li>\n            <li>\n              <a href=\"#\">Settings</a>\n            </li>\n            <li>\n              <a href=\"#\">Payment</a>\n            </li>\n          </nv-breadcrumb>\n          <nv-breadcrumb current>\n            <a href=\"#\">Current page</a>\n          </nv-breadcrumb>\n        </nv-breadcrumbs>\n      ),\n    },\n    {\n      name: 'Custom separator',\n      description:\n        'A breadcrumb example featuring a custom separator icon for visual clarity',\n      template: (\n        <nv-breadcrumbs data-storybook-args>\n          <nv-breadcrumb>\n            <nv-icon name=\"home\"></nv-icon>\n            <span slot=\"separator\">/</span>\n          </nv-breadcrumb>\n          <nv-breadcrumb>\n            <a href=\"#\">Example with link</a>\n            <span slot=\"separator\">/</span>\n          </nv-breadcrumb>\n          <nv-breadcrumb current>\n            <a href=\"#\">Current page</a>\n          </nv-breadcrumb>\n        </nv-breadcrumbs>\n      ),\n    },\n    {\n      name: 'Current page',\n      description:\n        'Toggle the breadcrumbs to show the current page the visitor is on, updates the style and aria-current attribute',\n      template: (\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=\"#\">Current page</a>\n          </nv-breadcrumb>\n        </nv-breadcrumbs>\n      ),\n    },\n  ],\n};\n\nexport default NvBreadcrumbsDocs;\n"]}

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

@@ -0,0 +1,22 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot default - Child content of the component.
+ */
+export class NvBreadcrumbs {
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '5ab0f09cb86a92464ffcd06d8129543539bdcddf', role: "navigation", "aria-label": "breadcrumbs" }, h("ol", { key: 'a7624a2400d9a91ec477694bbd3600960e198981' }, h("slot", { key: '7c4102ceebe110377bf212e0695bdec6b455ea74' }))));
+    }
+    static get is() { return "nv-breadcrumbs"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-breadcrumbs.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-breadcrumbs.css"]
+        };
+    }
+}
+//# sourceMappingURL=nv-breadcrumbs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/nv-breadcrumbs/nv-breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,aAAa;IACxB,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,YAAY,gBAAY,aAAa;YAC9C;gBACE,8DAAa,CACV,CACA,CACR,CAAC;IACJ,CAAC;;;;;;;;CAGF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot default - Child content of the component.\n */\n@Component({\n  tag: 'nv-breadcrumbs',\n  styleUrl: 'nv-breadcrumbs.scss',\n  shadow: false,\n})\nexport class NvBreadcrumbs {\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"navigation\" aria-label=\"breadcrumbs\">\n        <ol>\n          <slot></slot>\n        </ol>\n      </Host>\n    );\n  }\n\n  // #endregion RENDER\n}\n"]}

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

@@ -40,6 +40,11 @@ const NvButtonDocs = {
             name: nameof(x => x.type),
             template: (h("div", { "data-class": "flex gap-4" }, h("nv-button", { "data-storybook-args": true, type: "submit" }, "submit"), h("nv-button", { "data-storybook-args": true, type: "reset" }, "reset"))),
         },
+        {
+            name: 'LinkAsButton',
+            description: 'You can use our button classes if you need to use link tags',
+            template: (h("div", { "data-class": "flex flex-col gap-4" }, h("a", { href: "#", "data-class": "nv-button" }, "Default Link"), h("div", { "data-class": "flex flex-wrap gap-4 items-center" }, h("a", { href: "#", "data-class": "nv-button size-xs" }, "Link size-xs"), h("a", { href: "#", "data-class": "nv-button size-sm" }, "Link size-sm"), h("a", { href: "#", "data-class": "nv-button size-md" }, "Link size-md"), h("a", { href: "#", "data-class": "nv-button size-lg" }, "Link size-lg")), h("div", { "data-class": "flex flex-wrap gap-4" }, h("a", { href: "#", "data-class": "nv-button emphasis-high" }, "Emphasis High"), h("a", { href: "#", "data-class": "nv-button emphasis-medium" }, "Emphasis Medium"), h("a", { href: "#", "data-class": "nv-button emphasis-low" }, "Emphasis Low"), h("a", { href: "#", "data-class": "nv-button emphasis-lower" }, "Emphasis Lower")), h("div", { "data-class": "flex flex-wrap gap-4" }, h("a", { href: "#", "data-class": "nv-button danger" }, "Default Danger"), h("a", { href: "#", "data-class": "nv-button danger emphasis-high" }, "Danger Emphasis High"), h("a", { href: "#", "data-class": "nv-button danger emphasis-medium" }, "Danger Emphasis Medium"), h("a", { href: "#", "data-class": "nv-button danger emphasis-low" }, "Danger Emphasis Low"), h("a", { href: "#", "data-class": "nv-button danger emphasis-lower" }, "Danger Emphasis Lower")))),
+        },
         {
             name: 'DefaultSlot',
             description: 'Add content to the button via the default slot.',

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

@@ -1 +1 @@
-{"version":3,"file":"nv-button.docs.js","sourceRoot":"","sources":["../../../src/components/nv-button/nv-button.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 NvButtonDocs: NovaDocs<Components.NvButton> = {\n  component: 'nv-button',\n  subcomponents: ['nv-icon'],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-button data-storybook-args>NV Button</nv-button>,\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.size),\n      template: (\n        <div data-class=\"flex gap-4 items-center\">\n          <nv-button data-storybook-args size=\"xs\">\n            size: xs\n          </nv-button>\n          <nv-button data-storybook-args size=\"sm\">\n            size: sm\n          </nv-button>\n          <nv-button data-storybook-args size=\"md\">\n            size: md\n          </nv-button>\n          <nv-button data-storybook-args size=\"lg\">\n            size: lg\n          </nv-button>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.emphasis),\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-button data-storybook-args emphasis=\"high\">\n            emphasis: high\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"medium\">\n            emphasis: medium\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"low\">\n            emphasis: low\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"lower\">\n            emphasis: lower\n          </nv-button>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.danger),\n      args: { size: 'md' },\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-button data-storybook-args emphasis=\"high\" danger>\n            high danger\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"medium\" danger>\n            medium danger\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"low\" danger>\n            low danger\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"lower\" danger>\n            lower danger\n          </nv-button>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.loading),\n      args: { loading: true },\n      template: <nv-button data-storybook-args>loading</nv-button>,\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.disabled),\n      args: { disabled: true },\n      template: <nv-button data-storybook-args>disabled</nv-button>,\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.fluid),\n      args: { fluid: true },\n      template: <nv-button data-storybook-args>fluid</nv-button>,\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.type),\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-button data-storybook-args type=\"submit\">\n            submit\n          </nv-button>\n          <nv-button data-storybook-args type=\"reset\">\n            reset\n          </nv-button>\n        </div>\n      ),\n    },\n    {\n      name: 'DefaultSlot',\n      description: 'Add content to the button via the default slot.',\n      template: (\n        <nv-button data-storybook-args>\n          <nv-icon name=\"user\"></nv-icon>\n          Default Slot\n        </nv-button>\n      ),\n    },\n    {\n      name: 'IconSlots',\n      description:\n        'Add icons to the button via the leading-icon or trailing-icon slots.',\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-button data-storybook-args>\n            Leading Icon\n            <nv-icon slot=\"leading-icon\" name=\"user\"></nv-icon>\n          </nv-button>\n          <nv-button data-storybook-args>\n            Trailing Icon\n            <nv-icon slot=\"trailing-icon\" name=\"user\"></nv-icon>\n          </nv-button>\n          <nv-button data-storybook-args>\n            Both Sides\n            <nv-icon slot=\"leading-icon\" name=\"user\"></nv-icon>\n            <nv-icon slot=\"leading-icon\" name=\"bell\"></nv-icon>\n            <nv-icon slot=\"trailing-icon\" name=\"filter\"></nv-icon>\n          </nv-button>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvButtonDocs;\n"]}
+{"version":3,"file":"nv-button.docs.js","sourceRoot":"","sources":["../../../src/components/nv-button/nv-button.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 NvButtonDocs: NovaDocs<Components.NvButton> = {\n  component: 'nv-button',\n  subcomponents: ['nv-icon'],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-button data-storybook-args>NV Button</nv-button>,\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.size),\n      template: (\n        <div data-class=\"flex gap-4 items-center\">\n          <nv-button data-storybook-args size=\"xs\">\n            size: xs\n          </nv-button>\n          <nv-button data-storybook-args size=\"sm\">\n            size: sm\n          </nv-button>\n          <nv-button data-storybook-args size=\"md\">\n            size: md\n          </nv-button>\n          <nv-button data-storybook-args size=\"lg\">\n            size: lg\n          </nv-button>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.emphasis),\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-button data-storybook-args emphasis=\"high\">\n            emphasis: high\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"medium\">\n            emphasis: medium\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"low\">\n            emphasis: low\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"lower\">\n            emphasis: lower\n          </nv-button>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.danger),\n      args: { size: 'md' },\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-button data-storybook-args emphasis=\"high\" danger>\n            high danger\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"medium\" danger>\n            medium danger\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"low\" danger>\n            low danger\n          </nv-button>\n          <nv-button data-storybook-args emphasis=\"lower\" danger>\n            lower danger\n          </nv-button>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.loading),\n      args: { loading: true },\n      template: <nv-button data-storybook-args>loading</nv-button>,\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.disabled),\n      args: { disabled: true },\n      template: <nv-button data-storybook-args>disabled</nv-button>,\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.fluid),\n      args: { fluid: true },\n      template: <nv-button data-storybook-args>fluid</nv-button>,\n    },\n    {\n      name: nameof<Components.NvButton>(x => x.type),\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-button data-storybook-args type=\"submit\">\n            submit\n          </nv-button>\n          <nv-button data-storybook-args type=\"reset\">\n            reset\n          </nv-button>\n        </div>\n      ),\n    },\n    {\n      name: 'LinkAsButton',\n      description:\n        'You can use our button classes if you need to use link tags',\n      template: (\n        <div data-class=\"flex flex-col gap-4\">\n          <a href=\"#\" data-class=\"nv-button\">\n            Default Link\n          </a>\n\n          <div data-class=\"flex flex-wrap gap-4 items-center\">\n            <a href=\"#\" data-class=\"nv-button size-xs\">\n              Link size-xs\n            </a>\n            <a href=\"#\" data-class=\"nv-button size-sm\">\n              Link size-sm\n            </a>\n            <a href=\"#\" data-class=\"nv-button size-md\">\n              Link size-md\n            </a>\n            <a href=\"#\" data-class=\"nv-button size-lg\">\n              Link size-lg\n            </a>\n          </div>\n\n          <div data-class=\"flex flex-wrap gap-4\">\n            <a href=\"#\" data-class=\"nv-button emphasis-high\">\n              Emphasis High\n            </a>\n            <a href=\"#\" data-class=\"nv-button emphasis-medium\">\n              Emphasis Medium\n            </a>\n            <a href=\"#\" data-class=\"nv-button emphasis-low\">\n              Emphasis Low\n            </a>\n            <a href=\"#\" data-class=\"nv-button emphasis-lower\">\n              Emphasis Lower\n            </a>\n          </div>\n\n          <div data-class=\"flex flex-wrap gap-4\">\n            <a href=\"#\" data-class=\"nv-button danger\">\n              Default Danger\n            </a>\n\n            <a href=\"#\" data-class=\"nv-button danger emphasis-high\">\n              Danger Emphasis High\n            </a>\n            <a href=\"#\" data-class=\"nv-button danger emphasis-medium\">\n              Danger Emphasis Medium\n            </a>\n            <a href=\"#\" data-class=\"nv-button danger emphasis-low\">\n              Danger Emphasis Low\n            </a>\n            <a href=\"#\" data-class=\"nv-button danger emphasis-lower\">\n              Danger Emphasis Lower\n            </a>\n          </div>\n        </div>\n      ),\n    },\n    {\n      name: 'DefaultSlot',\n      description: 'Add content to the button via the default slot.',\n      template: (\n        <nv-button data-storybook-args>\n          <nv-icon name=\"user\"></nv-icon>\n          Default Slot\n        </nv-button>\n      ),\n    },\n    {\n      name: 'IconSlots',\n      description:\n        'Add icons to the button via the leading-icon or trailing-icon slots.',\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-button data-storybook-args>\n            Leading Icon\n            <nv-icon slot=\"leading-icon\" name=\"user\"></nv-icon>\n          </nv-button>\n          <nv-button data-storybook-args>\n            Trailing Icon\n            <nv-icon slot=\"trailing-icon\" name=\"user\"></nv-icon>\n          </nv-button>\n          <nv-button data-storybook-args>\n            Both Sides\n            <nv-icon slot=\"leading-icon\" name=\"user\"></nv-icon>\n            <nv-icon slot=\"leading-icon\" name=\"bell\"></nv-icon>\n            <nv-icon slot=\"trailing-icon\" name=\"filter\"></nv-icon>\n          </nv-button>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvButtonDocs;\n"]}