@nova-design-system/nova-webcomponents 3.0.0-beta.17

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-avatar.docs.js","sourceRoot":"","sources":["../../../src/components/nv-avatar/nv-avatar.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 NvAvatarDocs: NovaDocs<Components.NvAvatar> = {\n  component: 'nv-avatar',\n  subcomponents: ['nv-icon'],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-avatar data-storybook-args></nv-avatar>,\n    },\n    {\n      name: nameof<Components.NvAvatar>(x => x.size),\n      template: (\n        <div data-class=\"flex gap-4 items-center\">\n          <nv-avatar data-storybook-args initials=\"xs\" size=\"xs\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"sm\" size=\"sm\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"md\" size=\"md\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"lg\" size=\"lg\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"xl\" size=\"xl\"></nv-avatar>\n          <nv-avatar data-storybook-args size=\"xs\"></nv-avatar>\n          <nv-avatar data-storybook-args size=\"sm\"></nv-avatar>\n          <nv-avatar data-storybook-args size=\"md\"></nv-avatar>\n          <nv-avatar data-storybook-args size=\"lg\"></nv-avatar>\n          <nv-avatar data-storybook-args size=\"xl\"></nv-avatar>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvAvatar>(x => x.color),\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-avatar data-storybook-args initials=\"1\" color=\"1\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"2\" color=\"2\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"3\" color=\"3\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"4\" color=\"4\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"5\" color=\"5\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"6\" color=\"6\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"7\" color=\"7\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"8\" color=\"8\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"9\" color=\"9\"></nv-avatar>\n          <nv-avatar data-storybook-args initials=\"10\" color=\"10\"></nv-avatar>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvAvatar>(x => x.initials),\n      args: { initials: 'AB' },\n      template: <nv-avatar data-storybook-args></nv-avatar>,\n    },\n    {\n      name: nameof<Components.NvAvatar>(x => x.alt),\n      args: { alt: 'User profile picture', src: 'https://picsum.photos/200' },\n      template: <nv-avatar data-storybook-args></nv-avatar>,\n    },\n    {\n      name: nameof<Components.NvAvatar>(x => x.src),\n      args: { src: 'https://picsum.photos/200' },\n      template: <nv-avatar data-storybook-args></nv-avatar>,\n    },\n    {\n      name: 'SlotIcon',\n      description: 'Add an icon to the avatar using the slot',\n      template: (\n        <nv-avatar data-storybook-args>\n          <nv-icon slot=\"icon\" name=\"calendar\"></nv-icon>\n        </nv-avatar>\n      ),\n    },\n  ],\n};\n\nexport default NvAvatarDocs;\n"]}

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

@@ -0,0 +1,311 @@
+import { Host, h } from "@stencil/core";
+import clsx from "clsx";
+import { SemanticSizes } from "../../utils/constants";
+/**
+ * @slot icon - if you want to add an icon to the avatar, use this slot with an svg or nv-icon
+ */
+export class NvAvatar {
+    constructor() {
+        this.xsmall = undefined;
+        this.small = undefined;
+        this.medium = undefined;
+        this.large = undefined;
+        this.xlarge = undefined;
+        this.text = undefined;
+        this.url = undefined;
+        this.alt = undefined;
+        this.src = undefined;
+        this.initials = undefined;
+        this.size = 'md';
+        this.color = '1';
+    }
+    componentWillRender() {
+        if (this.xsmall) {
+            this.size = SemanticSizes.ExtraSmall;
+        }
+        if (this.small) {
+            this.size = SemanticSizes.Small;
+        }
+        if (this.medium) {
+            this.size = SemanticSizes.Medium;
+        }
+        if (this.large) {
+            this.size = SemanticSizes.Large;
+        }
+        if (this.xlarge) {
+            this.size = SemanticSizes.ExtraLarge;
+        }
+        if (this.text) {
+            this.initials = this.text;
+        }
+        if (this.url) {
+            this.src = this.url;
+        }
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Makes sure the initials are trimmed to 2 letters.
+     * @param {string} initials - The initials to be trimmed.
+     * @returns {string} The trimmed initials.
+     */
+    trimInitials(initials) {
+        return initials.trim().substring(0, 2);
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '8cd1fe9e804aa11e821c0983c28eefdbe2275235', class: clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (h("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (h("slot", { name: "icon" }, h("nv-icon", { name: "user" })))));
+    }
+    static get is() { return "nv-avatar"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-avatar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "xsmall": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "use size instead."
+                        }],
+                    "text": "Set size to ExtraSmall to the avatar."
+                },
+                "attribute": "xsmall",
+                "reflect": false
+            },
+            "small": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "use size instead."
+                        }],
+                    "text": "Set size to Small to the avatar."
+                },
+                "attribute": "small",
+                "reflect": false
+            },
+            "medium": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "use size instead."
+                        }],
+                    "text": "Set size to Medium to the avatar."
+                },
+                "attribute": "medium",
+                "reflect": false
+            },
+            "large": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "use size instead."
+                        }],
+                    "text": "Set size to Large to the avatar."
+                },
+                "attribute": "large",
+                "reflect": false
+            },
+            "xlarge": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "use size instead."
+                        }],
+                    "text": "Set size to ExtraLarge to the avatar."
+                },
+                "attribute": "xlarge",
+                "reflect": false
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "use initials instead."
+                        }],
+                    "text": "Set initials to the avatar."
+                },
+                "attribute": "text",
+                "reflect": false
+            },
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "use src instead."
+                        }],
+                    "text": "Set src to the avatar."
+                },
+                "attribute": "url",
+                "reflect": false
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If and image is provided, add an alt tag to describe it."
+                },
+                "attribute": "alt",
+                "reflect": true
+            },
+            "src": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Will insert an image into the avatar."
+                },
+                "attribute": "src",
+                "reflect": true
+            },
+            "initials": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initials of the avatar. Usually use two letters\nWhen filled with the src parameter, the text will not be rendered."
+                },
+                "attribute": "initials",
+                "reflect": true
+            },
+            "size": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "`${SemanticSizes}`",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "SemanticSizes": {
+                            "location": "import",
+                            "path": "../../utils/constants",
+                            "id": "src/utils/constants.ts::SemanticSizes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define the size of the avatar. You can use t-shirt sizes."
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'md'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "You can apply different colors on the Avatar.\nUse a string number between 1 and 10."
+                },
+                "attribute": "color",
+                "reflect": true,
+                "defaultValue": "'1'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=nv-avatar.js.map

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

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

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

@@ -0,0 +1,174 @@
+/* Variants */
+nv-icon {
+  display: inline-block;
+  width: fit-content;
+  height: fit-content;
+  color: inherit;
+}
+nv-icon > .nv-icon-xs {
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  stroke-width: 1.2px;
+}
+nv-icon > .nv-icon-sm {
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+  stroke-width: 1.5px;
+}
+nv-icon > .nv-icon-md {
+  width: var(--spacing-5);
+  height: var(--spacing-5);
+  stroke-width: 1.6px;
+}
+nv-icon > .nv-icon-lg {
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+  stroke-width: 1.8px;
+}
+nv-icon > .nv-icon-xl {
+  width: var(--spacing-7);
+  height: var(--spacing-7);
+  stroke-width: 1.9px;
+}
+
+/* Variants */
+/* Define maps for color-related variables */
+nv-badge {
+  padding: var(--badge-padding-y) var(--badge-padding-x);
+  display: inline-flex !important;
+  vertical-align: middle;
+  align-items: center;
+  border-radius: var(--radius-rounded-full);
+  height: fit-content;
+  width: fit-content;
+}
+nv-badge.with-gap {
+  padding: var(--badge-padding-y) var(--badge-padding-x);
+  display: inline-flex !important;
+  vertical-align: middle;
+  align-items: center;
+  border-radius: var(--radius-rounded-full);
+  height: fit-content;
+  width: fit-content;
+  gap: var(--badge-gap-x);
+}
+nv-badge:not(.with-gap) {
+  padding: var(--badge-padding-y) var(--badge-padding-x);
+  display: inline-flex !important;
+  vertical-align: middle;
+  align-items: center;
+  border-radius: var(--radius-rounded-full);
+  height: fit-content;
+  width: fit-content;
+}
+nv-badge.badge-1 {
+  color: var(--color-rainbow-1-content);
+  background-color: var(--color-rainbow-1-background);
+}
+nv-badge.badge-1 .close:focus, nv-badge.badge-1 .close:focus-within {
+  outline: none;
+}
+nv-badge.badge-1 .close:focus-visible, nv-badge.badge-1 .close:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-rainbow-1-content);
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-badge.badge-1 nv-icon {
+  color: var(--color-rainbow-1-content);
+}
+nv-badge.badge-2 {
+  color: var(--color-rainbow-2-content);
+  background-color: var(--color-rainbow-2-background);
+}
+nv-badge.badge-2 .close:focus, nv-badge.badge-2 .close:focus-within {
+  outline: none;
+}
+nv-badge.badge-2 .close:focus-visible, nv-badge.badge-2 .close:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-rainbow-2-content);
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-badge.badge-2 nv-icon {
+  color: var(--color-rainbow-2-content);
+}
+nv-badge.badge-3 {
+  color: var(--color-rainbow-3-content);
+  background-color: var(--color-rainbow-3-background);
+}
+nv-badge.badge-3 .close:focus, nv-badge.badge-3 .close:focus-within {
+  outline: none;
+}
+nv-badge.badge-3 .close:focus-visible, nv-badge.badge-3 .close:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-rainbow-3-content);
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-badge.badge-3 nv-icon {
+  color: var(--color-rainbow-3-content);
+}
+nv-badge.badge-4 {
+  color: var(--color-rainbow-4-content);
+  background-color: var(--color-rainbow-4-background);
+}
+nv-badge.badge-4 .close:focus, nv-badge.badge-4 .close:focus-within {
+  outline: none;
+}
+nv-badge.badge-4 .close:focus-visible, nv-badge.badge-4 .close:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-rainbow-4-content);
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-badge.badge-4 nv-icon {
+  color: var(--color-rainbow-4-content);
+}
+nv-badge.badge-5 {
+  color: var(--color-rainbow-5-content);
+  background-color: var(--color-rainbow-5-background);
+}
+nv-badge.badge-5 .close:focus, nv-badge.badge-5 .close:focus-within {
+  outline: none;
+}
+nv-badge.badge-5 .close:focus-visible, nv-badge.badge-5 .close:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-rainbow-5-content);
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-badge.badge-5 nv-icon {
+  color: var(--color-rainbow-5-content);
+}
+nv-badge span {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-xs) !important;
+}
+nv-badge nv-icon > svg.icon-xs {
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  stroke-width: 1.2px;
+}
+nv-badge nv-icon > svg.icon-sm {
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  stroke-width: 1.2px;
+}
+nv-badge nv-icon > svg.icon-md {
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  stroke-width: 1.2px;
+}
+nv-badge nv-icon > svg.icon-lg {
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  stroke-width: 1.2px;
+}
+nv-badge nv-icon > svg.icon-xl {
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  stroke-width: 1.2px;
+}
+nv-badge .close {
+  padding: 0;
+  line-height: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  aspect-ratio: 1/1;
+  border-radius: var(--radius-rounded-full);
+}

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

@@ -0,0 +1,72 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvBadgeDocs = {
+    component: 'nv-badge',
+    subcomponents: ['nv-icon'],
+    stories: [
+        {
+            name: 'Default',
+            args: {
+                label: 'Label',
+            },
+            template: h("nv-badge", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.label),
+            args: {
+                label: 'Badge Label',
+            },
+            template: h("nv-badge", { "data-storybook-args": true }),
+        },
+        {
+            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" }))),
+        },
+        {
+            name: nameof(x => x.leadIcon),
+            args: {
+                leadIcon: 'user',
+                label: 'Badge with Icon',
+            },
+            template: h("nv-badge", { "data-storybook-args": true }),
+        },
+        {
+            name: 'LeadingIconSlot',
+            description: 'Badge with an icon.',
+            args: {
+                label: 'Badge with Icon',
+            },
+            template: (h("nv-badge", { "data-storybook-args": true }, h("nv-icon", { slot: "leading-icon", name: "user" }))),
+        },
+        {
+            name: nameof(x => x.dismissible),
+            description: 'Badge with a dismiss button.',
+            args: {
+                dismissible: true,
+                label: 'Dismissible Badge',
+            },
+            template: h("nv-badge", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.hidden),
+            description: 'Badge with hidden state.',
+            args: {
+                hidden: true,
+                label: 'Hidden Badge',
+            },
+            template: h("nv-badge", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.preventAutoClose),
+            description: 'Badge with prevent auto close.',
+            args: {
+                preventAutoClose: true,
+                dismissible: true,
+                label: 'Prevent Auto Close Badge',
+            },
+            template: h("nv-badge", { "data-storybook-args": true }),
+        },
+    ],
+};
+export default NvBadgeDocs;
+//# sourceMappingURL=nv-badge.docs.js.map

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

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