@nysds/nys-badge 1.17.0 → 1.18.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/nys-badge.js CHANGED
@@ -1,26 +1,26 @@
1
- import { LitElement as l, unsafeCSS as d, html as c } from "lit";
2
- import { property as s } from "lit/decorators.js";
1
+ import { LitElement as l, unsafeCSS as d, html as a } from "lit";
2
+ import { property as r } from "lit/decorators.js";
3
3
  /*!
4
4
  * █▄ █ █ █ █▀▀▀█ █▀▀▄ █▀▀▀█
5
5
  * █ █ █ █▄▄▄█ ▀▀▀▄▄ █ █ ▀▀▀▄▄
6
6
  * █ ▀█ █ █▄▄▄█ █▄▄▀ █▄▄▄█
7
7
  *
8
- * Badge Component v1.17.0
8
+ * Badge Component v1.18.1
9
9
  * Part of the New York State Design System
10
10
  * Repository: https://github.com/its-hcd/nysds
11
11
  * License: MIT
12
12
  */
13
- const b = ':host{--_nys-badge-width: fit-content;--_nys-badge-height: var(--nys-size-600, 48px);--_nys-badge-radius: var(--nys-radius-round, 1776px);--_nys-badge-padding: var(--nys-space-2-px, 2px) var(--nys-space-100, 8px);--_nys-badge-gap: var(--nys-space-50, 4px);--_nys-badge-color: var(--nys-color-ink, #000000);--_nys-badge-background-color: var(--nys-color-base-weak, #f6f6f6);--_nys-badge-border-color: var(--nys-color-base, #62666a);--_nys-badge-border-width: var(--nys-border-width-sm, 1px);--_nys-badge-font-size: var(--nys-font-size-ui-sm, 14px);--_nys-badge-font-weight: var(--nys-font-weight-semibold, 600);--_nys-badge-line-height: var(--nys-font-lineheight-ui-sm, 24px);--_nys-badge-font-family: var(--nys-font-family-ui, var(--nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif));--_nys-badge-prefix-font-weight: var(--nys-font-weight-regular, 400)}:host([size=sm]){--_nys-badge-font-size: var(--nys-font-size-ui-xs, 12px);--_nys-badge-line-height: var(--nys-font-lineheight-ui-xs, 20px)}:host([intent=neutral]){--_nys-badge-background-color: var(--nys-color-base-weak, #f6f6f6);--_nys-badge-border-color: var(--nys-color-base, #62666a)}:host([intent=error]){--_nys-badge-background-color: var(--nys-color-error-weak, #f7eaea);--_nys-badge-border-color: var(--nys-color-error-strong, #721c1c)}:host([intent=success]){--_nys-badge-background-color: var(--nys-color-success-weak, #e8f1ea);--_nys-badge-border-color: var(--nys-color-success-strong, #0f3d18)}:host([intent=warning]){--_nys-badge-background-color: var(--nys-color-warning-weak, #fefae5);--_nys-badge-border-color: var(--nys-color-warning-strong, #6a5700)}:host([variant=strong]){--_nys-badge-background-color: var(--_nys-badge-border-color);--_nys-badge-color: var(--nys-color-white, #ffffff)}:host([variant=strong]) .nys-badge{--nys-icon-color: var(--nys-color-white, #ffffff)}:host([variant=strong][intent=success]){--_nys-badge-border-color: var(--nys-color-success, #1E752E)}:host([variant=strong][intent=warning]){--_nys-badge-border-color: var(--nys-color-warning, #FACE00);--_nys-badge-color: var(--nys-color-ink, #000000)}:host([variant=strong][intent=warning]) .nys-badge{--nys-icon-color: var(--nys-color-ink, #000000)}.nys-badge{display:flex;width:fit-content;align-items:center;justify-content:center;gap:var(--_nys-badge-gap);padding:var(--_nys-badge-padding);border:var(--_nys-badge-border-width) solid var(--_nys-badge-border-color);background-color:var(--_nys-badge-background-color);color:var(--_nys-badge-color);border-radius:var(--_nys-badge-radius);font-family:var(--_nys-badge-font-family);font-size:var(--_nys-badge-font-size);font-weight:var(--_nys-badge-font-weight);line-height:var(--_nys-badge-line-height);cursor:default;--nys-icon-color: var(--_nys-badge-border-color)}.nys-badge__prefix{font-weight:var(--_nys-badge-prefix-font-weight)}';
14
- var p = Object.defineProperty, h = Object.getOwnPropertyDescriptor, t = (g, e, r, a) => {
15
- for (var i = a > 1 ? void 0 : a ? h(e, r) : e, f = g.length - 1, y; f >= 0; f--)
16
- (y = g[f]) && (i = (a ? y(e, r, i) : y(i)) || i);
17
- return a && i && p(e, r, i), i;
13
+ const b = ':host{--_nys-badge-width: fit-content;--_nys-badge-height: var(--nys-size-600, 48px);--_nys-badge-radius: var(--nys-radius-round, 1776px);--_nys-badge-padding: var(--nys-space-2-px, 2px) var(--nys-space-100, 8px);--_nys-badge-gap: var(--nys-space-50, 4px);--_nys-badge-color: var(--nys-color-ink, #000000);--_nys-badge-background-color: var(--nys-color-base-weak, #f6f6f6);--_nys-badge-border-color: var(--nys-color-base, #62666a);--_nys-badge-border-width: var(--nys-border-width-sm, 1px);--_nys-badge-font-size: var(--nys-font-size-ui-sm, 14px);--_nys-badge-font-weight: var(--nys-font-weight-semibold, 600);--_nys-badge-line-height: var(--nys-font-lineheight-ui-sm, 24px);--_nys-badge-font-family: var(--nys-font-family-ui, var(--nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif));--_nys-badge-prefix-font-weight: var(--nys-font-weight-regular, 400)}:host([size=sm]){--_nys-badge-font-size: var(--nys-font-size-ui-xs, 12px);--_nys-badge-line-height: var(--nys-font-lineheight-ui-xs, 20px)}:host([intent=neutral]){--_nys-badge-background-color: var(--nys-color-base-weak, #f6f6f6);--_nys-badge-border-color: var(--nys-color-base, #62666a)}:host([intent=error]){--_nys-badge-background-color: var(--nys-color-error-weak, #f7eaea);--_nys-badge-border-color: var(--nys-color-error-strong, #721c1c)}:host([intent=success]){--_nys-badge-background-color: var(--nys-color-success-weak, #e8f1ea);--_nys-badge-border-color: var(--nys-color-success-strong, #0f3d18)}:host([intent=warning]){--_nys-badge-background-color: var(--nys-color-warning-weak, #fefae5);--_nys-badge-border-color: var(--nys-color-warning-strong, #6a5700)}:host([variant=strong]){--_nys-badge-background-color: var(--_nys-badge-border-color);--_nys-badge-color: var(--nys-color-white, #ffffff)}:host([variant=strong]) .nys-badge{--nys-icon-color: var(--nys-color-white, #ffffff)}:host([variant=strong][intent=success]){--_nys-badge-border-color: var(--nys-color-success, #1E752E)}:host([variant=strong][intent=warning]){--_nys-badge-border-color: var(--nys-color-warning, #FACE00);--_nys-badge-color: var(--nys-color-ink, #000000)}:host([variant=strong][intent=warning]) .nys-badge{--nys-icon-color: var(--nys-color-ink, #000000)}.nys-badge{position:relative;display:flex;width:fit-content;align-items:center;justify-content:center;gap:var(--_nys-badge-gap);padding:var(--_nys-badge-padding);border:var(--_nys-badge-border-width) solid var(--_nys-badge-border-color);background-color:var(--_nys-badge-background-color);color:var(--_nys-badge-color);border-radius:var(--_nys-badge-radius);font-family:var(--_nys-badge-font-family);font-size:var(--_nys-badge-font-size);font-weight:var(--_nys-badge-font-weight);line-height:var(--_nys-badge-line-height);cursor:default;--nys-icon-color: var(--_nys-badge-border-color)}.nys-badge__prefix{font-weight:var(--_nys-badge-prefix-font-weight)}.nys-badge__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}';
14
+ var p = Object.defineProperty, h = Object.getOwnPropertyDescriptor, s = (g, e, t, c) => {
15
+ for (var i = c > 1 ? void 0 : c ? h(e, t) : e, f = g.length - 1, y; f >= 0; f--)
16
+ (y = g[f]) && (i = (c ? y(e, t, i) : y(i)) || i);
17
+ return c && i && p(e, t, i), i;
18
18
  };
19
19
  let u = 0;
20
20
  var o;
21
21
  const n = (o = class extends l {
22
22
  constructor() {
23
- super(...arguments), this.id = "", this.name = "", this.size = "md", this.intent = "neutral", this.prefixLabel = "", this.label = "", this.variant = "", this._prefixIcon = "", this._suffixIcon = "";
23
+ super(...arguments), this.id = "", this.name = "", this.size = "md", this.intent = "neutral", this.prefixLabel = "", this.label = "", this.srText = "", this.variant = "", this._prefixIcon = "", this._suffixIcon = "";
24
24
  }
25
25
  get prefixIcon() {
26
26
  return this._prefixIcon;
@@ -42,8 +42,8 @@ const n = (o = class extends l {
42
42
  super.connectedCallback(), this.id || (this.id = `nys-badge-${Date.now()}-${u++}`);
43
43
  const e = this.getAttribute("prefixicon");
44
44
  e !== null && this.prefixIcon === "" && (this.prefixIcon = e);
45
- const r = this.getAttribute("suffixicon");
46
- r !== null && this.suffixIcon === "" && (this.suffixIcon = r);
45
+ const t = this.getAttribute("suffixicon");
46
+ t !== null && this.suffixIcon === "" && (this.suffixIcon = t);
47
47
  }
48
48
  /**
49
49
  * Resolves which icon should be rendered.
@@ -54,14 +54,20 @@ const n = (o = class extends l {
54
54
  return e === !0 ? o.DEFAULT_ICONS[this.intent] ?? "info" : typeof e == "string" && e.trim() !== "" ? e : null;
55
55
  }
56
56
  render() {
57
- const e = this.resolveIcon(this.prefixIcon), r = this.resolveIcon(this.suffixIcon);
58
- return c`
59
- <div class="nys-badge">
60
- ${e ? c`<nys-icon size="16" name=${e}></nys-icon>` : ""}
61
- ${this.prefixLabel ? c`<div class="nys-badge__prefix">${this.prefixLabel}</div>` : ""}
62
- <div class="nys-badge__label">${this.label}</div>
63
- ${r ? c`<nys-icon size="16" name=${r}></nys-icon>` : ""}
64
- </div>
57
+ const e = this.resolveIcon(this.prefixIcon), t = this.resolveIcon(this.suffixIcon);
58
+ return a`
59
+ <mark class="nys-badge">
60
+ ${e ? a`<nys-icon size="16" name=${e}></nys-icon>` : ""}
61
+ ${this.prefixLabel ? a`<div class="nys-badge__prefix">${this.prefixLabel}</div>` : ""}
62
+ <div class="nys-badge__label">
63
+ ${this.label}
64
+ ${this.srText ? a`<span class="nys-badge__sr-only"
65
+ >${": " + this.srText}</span
66
+ >` : ""}
67
+ </div>
68
+
69
+ ${t ? a`<nys-icon size="16" name=${t}></nys-icon>` : ""}
70
+ </mark>
65
71
  `;
66
72
  }
67
73
  }, o.styles = d(b), o.DEFAULT_ICONS = {
@@ -70,32 +76,35 @@ const n = (o = class extends l {
70
76
  success: "check_circle",
71
77
  warning: "warning"
72
78
  }, o);
73
- t([
74
- s({ type: String, reflect: !0 })
79
+ s([
80
+ r({ type: String, reflect: !0 })
75
81
  ], n.prototype, "id", 2);
76
- t([
77
- s({ type: String, reflect: !0 })
82
+ s([
83
+ r({ type: String, reflect: !0 })
78
84
  ], n.prototype, "name", 2);
79
- t([
80
- s({ type: String, reflect: !0 })
85
+ s([
86
+ r({ type: String, reflect: !0 })
81
87
  ], n.prototype, "size", 2);
82
- t([
83
- s({ type: String, reflect: !0 })
88
+ s([
89
+ r({ type: String, reflect: !0 })
84
90
  ], n.prototype, "intent", 2);
85
- t([
86
- s({ type: String })
91
+ s([
92
+ r({ type: String })
87
93
  ], n.prototype, "prefixLabel", 2);
88
- t([
89
- s({ type: String })
94
+ s([
95
+ r({ type: String })
90
96
  ], n.prototype, "label", 2);
91
- t([
92
- s({ type: String, reflect: !0 })
97
+ s([
98
+ r({ type: String })
99
+ ], n.prototype, "srText", 2);
100
+ s([
101
+ r({ type: String, reflect: !0 })
93
102
  ], n.prototype, "variant", 2);
94
- t([
95
- s({ type: String, attribute: "prefixicon" })
103
+ s([
104
+ r({ type: String, attribute: "prefixicon" })
96
105
  ], n.prototype, "prefixIcon", 1);
97
- t([
98
- s({ type: String, attribute: "suffixicon" })
106
+ s([
107
+ r({ type: String, attribute: "suffixicon" })
99
108
  ], n.prototype, "suffixIcon", 1);
100
109
  let _ = n;
101
110
  customElements.get("nys-badge") || customElements.define("nys-badge", _);
@@ -1 +1 @@
1
- {"version":3,"file":"nys-badge.js","sources":["../src/nys-badge.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-badge.scss?inline\";\n\nlet badgeIdCounter = 0;\n\n/**\n * A compact label for status, counts, or categorization. Supports semantic intents with auto-selected icons.\n *\n * Use badges to highlight metadata like status (\"Approved\"), counts (\"3 new\"), or categories.\n * Set `intent` to apply semantic meaning. Add `prefixIcon` or `suffixIcon` as boolean for default icons,\n * or pass icon name strings for custom icons.\n *\n * @summary Compact label for status, counts, or categorization with semantic styling.\n * @element nys-badge\n *\n * @example Status badge\n * ```html\n * <nys-badge intent=\"success\" label=\"Approved\" prefixIcon></nys-badge>\n * ```\n *\n * @example Count badge\n * ```html\n * <nys-badge prefixLabel=\"Messages\" label=\"12\"></nys-badge>\n * ```\n */\n\nexport class NysBadge extends LitElement {\n static styles = unsafeCSS(styles);\n\n /** Unique identifier. */\n @property({ type: String, reflect: true }) id = \"\";\n\n /** Name attribute for form association. */\n @property({ type: String, reflect: true }) name = \"\";\n\n /**\n * Badge size: `sm` (smaller text) or `md` (default).\n * @default \"md\"\n */\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n /**\n * Semantic intent affecting color: `neutral`, `error`, `success`, or `warning`.\n * @default \"neutral\"\n */\n @property({ type: String, reflect: true }) intent:\n | \"neutral\"\n | \"error\"\n | \"success\"\n | \"warning\" = \"neutral\";\n\n /** Secondary label displayed before the main label. */\n @property({ type: String }) prefixLabel = \"\";\n\n /** Primary label text displayed in the badge. */\n @property({ type: String }) label = \"\";\n\n @property({ type: String, reflect: true }) variant: \"strong\" | \"\" = \"\";\n\n // Icons (string or boolean)\n private _prefixIcon: string | boolean = \"\";\n @property({ type: String, attribute: \"prefixicon\" })\n get prefixIcon(): string | boolean {\n return this._prefixIcon;\n }\n set prefixIcon(value: string | boolean) {\n if (value === \"\" || value === null) {\n // boolean attribute without value → true\n this._prefixIcon = true;\n } else if (value === \"false\" || value === false) {\n this._prefixIcon = \"\";\n } else {\n this._prefixIcon = value;\n }\n }\n\n private _suffixIcon: string | boolean = \"\";\n @property({ type: String, attribute: \"suffixicon\" })\n get suffixIcon(): string | boolean {\n return this._suffixIcon;\n }\n set suffixIcon(value: string | boolean) {\n if (value === \"\" || value === null) {\n this._suffixIcon = true;\n } else if (value === \"false\" || value === false) {\n this._suffixIcon = \"\";\n } else {\n this._suffixIcon = value;\n }\n }\n\n /**\n * Lifecycle methods\n * --------------------------------------------------------------------------\n */\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.id) {\n this.id = `nys-badge-${Date.now()}-${badgeIdCounter++}`;\n }\n\n const attr = this.getAttribute(\"prefixicon\");\n if (attr !== null && this.prefixIcon === \"\") {\n this.prefixIcon = attr;\n }\n\n const suffixAttr = this.getAttribute(\"suffixicon\");\n if (suffixAttr !== null && this.suffixIcon === \"\") {\n this.suffixIcon = suffixAttr;\n }\n }\n\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\n\n // Map of default icons by intent\n private static readonly DEFAULT_ICONS: Record<string, string> = {\n neutral: \"info\",\n error: \"emergency_home\",\n success: \"check_circle\",\n warning: \"warning\",\n };\n\n /**\n * Resolves which icon should be rendered.\n * @param icon The icon property value (string or boolean)\n * @returns Icon name or null if no icon should be rendered\n */\n private resolveIcon(icon: string | boolean): string | null {\n if (icon === true) {\n return NysBadge.DEFAULT_ICONS[this.intent] ?? \"info\";\n }\n if (typeof icon === \"string\" && icon.trim() !== \"\") {\n return icon;\n }\n return null;\n }\n\n render() {\n const prefixIconName = this.resolveIcon(this.prefixIcon);\n const suffixIconName = this.resolveIcon(this.suffixIcon);\n\n return html`\n <div class=\"nys-badge\">\n ${prefixIconName\n ? html`<nys-icon size=\"16\" name=${prefixIconName}></nys-icon>`\n : \"\"}\n ${this.prefixLabel\n ? html`<div class=\"nys-badge__prefix\">${this.prefixLabel}</div>`\n : \"\"}\n <div class=\"nys-badge__label\">${this.label}</div>\n ${suffixIconName\n ? html`<nys-icon size=\"16\" name=${suffixIconName}></nys-icon>`\n : \"\"}\n </div>\n `;\n }\n}\n\nif (!customElements.get(\"nys-badge\")) {\n customElements.define(\"nys-badge\", NysBadge);\n}\n"],"names":["badgeIdCounter","_NysBadge","_a","LitElement","value","attr","suffixAttr","icon","prefixIconName","suffixIconName","html","unsafeCSS","styles","__decorateClass","property","NysBadge"],"mappings":"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"}
1
+ {"version":3,"file":"nys-badge.js","sources":["../src/nys-badge.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-badge.scss?inline\";\n\nlet badgeIdCounter = 0;\n\n/**\n * A compact label for status, counts, or categorization. Supports semantic intents with auto-selected icons.\n *\n * Use badges to highlight metadata like status (\"Approved\"), counts (\"3 new\"), or categories.\n * Set `intent` to apply semantic meaning. Add `prefixIcon` or `suffixIcon` as boolean for default icons,\n * or pass icon name strings for custom icons.\n *\n * @summary Compact label for status, counts, or categorization with semantic styling.\n * @element nys-badge\n *\n * @example Status badge\n * ```html\n * <nys-badge intent=\"success\" label=\"Approved\" prefixIcon></nys-badge>\n * ```\n *\n * @example Count badge\n * ```html\n * <nys-badge prefixLabel=\"Messages\" label=\"12\"></nys-badge>\n * ```\n */\n\nexport class NysBadge extends LitElement {\n static styles = unsafeCSS(styles);\n\n /** Unique identifier. */\n @property({ type: String, reflect: true }) id = \"\";\n\n /** Name attribute for form association. */\n @property({ type: String, reflect: true }) name = \"\";\n\n /**\n * Badge size: `sm` (smaller text) or `md` (default).\n * @default \"md\"\n */\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n /**\n * Semantic intent affecting color: `neutral`, `error`, `success`, or `warning`.\n * @default \"neutral\"\n */\n @property({ type: String, reflect: true }) intent:\n | \"neutral\"\n | \"error\"\n | \"success\"\n | \"warning\" = \"neutral\";\n\n /** Secondary label displayed before the main label. */\n @property({ type: String }) prefixLabel = \"\";\n\n /** Primary label text displayed in the badge. */\n @property({ type: String }) label = \"\";\n\n /** Screen reader text appended after the label for additional context. */\n @property({ type: String }) srText = \"\";\n\n @property({ type: String, reflect: true }) variant: \"strong\" | \"\" = \"\";\n\n // Icons (string or boolean)\n private _prefixIcon: string | boolean = \"\";\n @property({ type: String, attribute: \"prefixicon\" })\n get prefixIcon(): string | boolean {\n return this._prefixIcon;\n }\n set prefixIcon(value: string | boolean) {\n if (value === \"\" || value === null) {\n // boolean attribute without value → true\n this._prefixIcon = true;\n } else if (value === \"false\" || value === false) {\n this._prefixIcon = \"\";\n } else {\n this._prefixIcon = value;\n }\n }\n\n private _suffixIcon: string | boolean = \"\";\n @property({ type: String, attribute: \"suffixicon\" })\n get suffixIcon(): string | boolean {\n return this._suffixIcon;\n }\n set suffixIcon(value: string | boolean) {\n if (value === \"\" || value === null) {\n this._suffixIcon = true;\n } else if (value === \"false\" || value === false) {\n this._suffixIcon = \"\";\n } else {\n this._suffixIcon = value;\n }\n }\n\n /**\n * Lifecycle methods\n * --------------------------------------------------------------------------\n */\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.id) {\n this.id = `nys-badge-${Date.now()}-${badgeIdCounter++}`;\n }\n\n const attr = this.getAttribute(\"prefixicon\");\n if (attr !== null && this.prefixIcon === \"\") {\n this.prefixIcon = attr;\n }\n\n const suffixAttr = this.getAttribute(\"suffixicon\");\n if (suffixAttr !== null && this.suffixIcon === \"\") {\n this.suffixIcon = suffixAttr;\n }\n }\n\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\n\n // Map of default icons by intent\n private static readonly DEFAULT_ICONS: Record<string, string> = {\n neutral: \"info\",\n error: \"emergency_home\",\n success: \"check_circle\",\n warning: \"warning\",\n };\n\n /**\n * Resolves which icon should be rendered.\n * @param icon The icon property value (string or boolean)\n * @returns Icon name or null if no icon should be rendered\n */\n private resolveIcon(icon: string | boolean): string | null {\n if (icon === true) {\n return NysBadge.DEFAULT_ICONS[this.intent] ?? \"info\";\n }\n if (typeof icon === \"string\" && icon.trim() !== \"\") {\n return icon;\n }\n return null;\n }\n\n render() {\n const prefixIconName = this.resolveIcon(this.prefixIcon);\n const suffixIconName = this.resolveIcon(this.suffixIcon);\n\n return html`\n <mark class=\"nys-badge\">\n ${prefixIconName\n ? html`<nys-icon size=\"16\" name=${prefixIconName}></nys-icon>`\n : \"\"}\n ${this.prefixLabel\n ? html`<div class=\"nys-badge__prefix\">${this.prefixLabel}</div>`\n : \"\"}\n <div class=\"nys-badge__label\">\n ${this.label}\n ${this.srText\n ? html`<span class=\"nys-badge__sr-only\"\n >${\": \" + this.srText}</span\n >`\n : \"\"}\n </div>\n\n ${suffixIconName\n ? html`<nys-icon size=\"16\" name=${suffixIconName}></nys-icon>`\n : \"\"}\n </mark>\n `;\n }\n}\n\nif (!customElements.get(\"nys-badge\")) {\n customElements.define(\"nys-badge\", NysBadge);\n}\n"],"names":["badgeIdCounter","_NysBadge","_a","LitElement","value","attr","suffixAttr","icon","prefixIconName","suffixIconName","html","unsafeCSS","styles","__decorateClass","property","NysBadge"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nysds/nys-badge",
3
- "version": "1.17.0",
3
+ "version": "1.18.1",
4
4
  "description": "The Badge component from the NYS Design System.",
5
5
  "module": "dist/nys-badge.js",
6
6
  "types": "dist/index.d.ts",
@@ -23,7 +23,7 @@
23
23
  "lit-analyze": "lit-analyzer '**/*.ts'"
24
24
  },
25
25
  "dependencies": {
26
- "@nysds/nys-icon": "^1.17.0"
26
+ "@nysds/nys-icon": "^1.18.1"
27
27
  },
28
28
  "devDependencies": {
29
29
  "lit": "^3.3.1",