@nysds/nys-badge 1.20.0 → 1.21.0

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.
Files changed (4) hide show
  1. package/dist/nys-badge.d.ts +31 -15
  2. package/dist/nys-badge.js +76 -57
  3. package/dist/nys-badge.js.map +1 -1
  4. package/package.json +3 -3
package/dist/nys-badge.d.ts CHANGED
@@ -15,9 +15,14 @@ import "@nysds/nys-icon";
15
15
  * <nys-badge label="Basic badge"></nys-badge>
16
16
  * ```
17
17
  *
18
- * @example Error Intent
18
+ * @example Info Intent
19
19
  * ```html
20
- * <nys-badge label="Error" intent="error" prefixIcon></nys-badge>
20
+ * <nys-badge label="Info" intent="info" prefixIcon></nys-badge>
21
+ * ```
22
+ *
23
+ * @example Success Intent
24
+ * ```html
25
+ * <nys-badge label="Success" intent="success" prefixIcon></nys-badge>
21
26
  * ```
22
27
  *
23
28
  * @example Warning Intent
@@ -25,29 +30,39 @@ import "@nysds/nys-icon";
25
30
  * <nys-badge label="Warning" intent="warning" prefixIcon></nys-badge>
26
31
  * ```
27
32
  *
28
- * @example Success Intent
33
+ * @example Danger Intent
29
34
  * ```html
30
- * <nys-badge label="Success" intent="success" prefixIcon></nys-badge>
35
+ * <nys-badge label="Danger" intent="danger" prefixIcon></nys-badge>
31
36
  * ```
32
37
  *
33
- * @example Strong Neutral
38
+ * @example Emergency Intent
34
39
  * ```html
35
- * <nys-badge variant="strong" label="Neutral" prefixIcon></nys-badge>
40
+ * <nys-badge label="Emergency" intent="emergency" prefixIcon></nys-badge>
36
41
  * ```
37
42
  *
38
- * @example Strong Error
43
+ * @example Strong Base
39
44
  * ```html
40
- * <nys-badge variant="strong" label="Error" intent="error" prefixIcon></nys-badge>
45
+ * <nys-badge strong label="Base" prefixIcon></nys-badge>
41
46
  * ```
42
47
  *
43
- * @example Strong Warning
48
+ * @example Strong Info
44
49
  * ```html
45
- * <nys-badge variant="strong" label="Warning" intent="warning" prefixIcon></nys-badge>
50
+ * <nys-badge strong label="Info" intent="info" prefixIcon></nys-badge>
46
51
  * ```
47
52
  *
48
53
  * @example Strong Success
49
54
  * ```html
50
- * <nys-badge variant="strong" label="Success" intent="success" prefixIcon></nys-badge>
55
+ * <nys-badge strong label="Success" intent="success" prefixIcon></nys-badge>
56
+ * ```
57
+ *
58
+ * @example Strong Warning
59
+ * ```html
60
+ * <nys-badge strong label="Warning" intent="warning" prefixIcon></nys-badge>
61
+ * ```
62
+ *
63
+ * @example Strong Danger
64
+ * ```html
65
+ * <nys-badge strong label="Danger" intent="danger" prefixIcon></nys-badge>
51
66
  * ```
52
67
  *
53
68
  * @example Custom Prefix Icon
@@ -82,17 +97,18 @@ export declare class NysBadge extends NysElement {
82
97
  */
83
98
  size: "sm" | "md";
84
99
  /**
85
- * Semantic intent affecting color: `neutral`, `error`, `success`, or `warning`.
86
- * @default "neutral"
100
+ * Semantic intent affecting color: `base`, `info`, `success`, `warning` `danger`, `emergency`. `error` has been deprecated and support will be removed in a future release. Use `danger` instead
101
+ * @default "info"
87
102
  */
88
- intent: "neutral" | "error" | "success" | "warning";
103
+ intent: "base" | "info" | "success" | "warning" | "danger" | "error" | "emergency";
89
104
  /** Secondary label displayed before the main label. */
90
105
  prefixLabel: string;
91
106
  /** Primary label text displayed in the badge. */
92
107
  label: string;
93
108
  /** Screen reader text appended after the label for additional context. */
94
109
  srText: string;
95
- variant: "strong" | "";
110
+ /** Strong visual intent with bolder text and background. */
111
+ strong: boolean;
96
112
  private _prefixIcon;
97
113
  get prefixIcon(): string | boolean;
98
114
  set prefixIcon(value: string | boolean);
package/dist/nys-badge.js CHANGED
@@ -1,4 +1,4 @@
1
- import { LitElement as g, unsafeCSS as d, html as f } from "lit";
1
+ import { LitElement as l, unsafeCSS as d, html as f } from "lit";
2
2
  import { property as t } from "lit/decorators.js";
3
3
  import "@nysds/nys-icon";
4
4
  /*!
@@ -6,43 +6,44 @@ import "@nysds/nys-icon";
6
6
  * █ █ █ █▄▄▄█ ▀▀▀▄▄ █ █ ▀▀▀▄▄
7
7
  * █ ▀█ █ █▄▄▄█ █▄▄▀ █▄▄▄█
8
8
  *
9
- * Badge Component v1.20.0
9
+ * Badge Component v1.21.0
10
10
  * Part of the New York State Design System
11
11
  * Repository: https://github.com/its-hcd/nysds
12
12
  * License: MIT
13
13
  */
14
14
  /*!
15
- * New York State Design System v1.20.0
15
+ * New York State Design System v1.21.0
16
16
  * Description: A design system for New York State's digital products.
17
17
  * Repository: https://github.com/its-hcd/nysds
18
18
  * License: MIT
19
19
  */
20
- let b = 0;
21
- function p(c) {
22
- return `${c}-${Date.now()}-${b++}`;
20
+ var b = 0;
21
+ function h(n) {
22
+ return `${n}-${Date.now()}-${b++}`;
23
23
  }
24
- const h = (c) => {
25
- class e extends c {
24
+ var p = (n) => {
25
+ class e extends n {
26
26
  get idPrefix() {
27
27
  return this.localName || "nys-element";
28
28
  }
29
29
  ensureId() {
30
- this.id || (this.id = p(this.idPrefix));
30
+ this.id || (this.id = h(this.idPrefix));
31
31
  }
32
32
  connectedCallback() {
33
33
  super.connectedCallback(), this.ensureId();
34
34
  }
35
35
  }
36
36
  return e;
37
- }, u = /* @__PURE__ */ h(g), _ = ':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)}.nys-badge__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}';
38
- var x = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (c, e, r, i) => {
39
- for (var a = i > 1 ? void 0 : i ? v(e, r) : e, l = c.length - 1, y; l >= 0; l--)
40
- (y = c[l]) && (a = (i ? y(e, r, a) : y(a)) || a);
41
- return i && a && x(e, r, a), a;
42
- }, s;
43
- const n = (s = class extends u {
37
+ }, u = /* @__PURE__ */ p(l);
38
+ const _ = ':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=base]){--_nys-badge-background-color: var(--nys-color-base-weak, #f6f6f6);--_nys-badge-border-color: var(--nys-color-base, #62666a)}:host([intent=danger]),:host([intent=error]){--_nys-badge-background-color: var(--nys-color-danger-weak, #f7eaea);--_nys-badge-border-color: var(--nys-color-danger-strong, #721c1c)}:host([intent=emergency]){--_nys-badge-background-color: var(--nys-color-emergency, #721c1c);--_nys-badge-border-color: var(--nys-color-danger-strong, #721c1c);--_nys-badge-color: var(--nys-color-white, #ffffff)}:host([intent=emergency]) .nys-badge{--nys-icon-color: var(--nys-color-white, #ffffff)}:host([intent=info]){--_nys-badge-background-color: var(--nys-color-info-weak, #e5effa);--_nys-badge-border-color: var(--nys-color-info-strong, #002971)}: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([strong]){--_nys-badge-background-color: var(--_nys-badge-border-color);--_nys-badge-color: var(--nys-color-white, #ffffff)}:host([strong]) .nys-badge{--nys-icon-color: var(--nys-color-white, #ffffff)}:host([strong][intent=info]){--_nys-badge-border-color: var(--nys-color-info, #004dd1)}:host([strong][intent=success]){--_nys-badge-border-color: var(--nys-color-success, #1e752e)}:host([strong][intent=danger]),:host([strong][intent=error]){--_nys-badge-border-color: var(--nys-color-danger, #b52c2c)}:host([strong][intent=emergency]){--_nys-badge-border-color: var(--nys-color-emergency, #721c1c)}:host([strong][intent=warning]){--_nys-badge-border-color: var(--nys-color-warning, #face00);--_nys-badge-color: var(--nys-color-ink, #000000)}:host([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)}.nys-badge__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}';
39
+ var v = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (n, e, s, a) => {
40
+ for (var c = a > 1 ? void 0 : a ? x(e, s) : e, g = n.length - 1, y; g >= 0; g--)
41
+ (y = n[g]) && (c = (a ? y(e, s, c) : y(c)) || c);
42
+ return a && c && v(e, s, c), c;
43
+ }, o;
44
+ const r = (o = class extends u {
44
45
  constructor() {
45
- super(...arguments), this.id = "", this.name = "", this.size = "md", this.intent = "neutral", this.prefixLabel = "", this.label = "", this.srText = "", this.variant = "", this._prefixIcon = "", this._suffixIcon = "";
46
+ super(...arguments), this.id = "", this.name = "", this.size = "md", this.intent = "base", this.prefixLabel = "", this.label = "", this.srText = "", this.strong = !1, this._prefixIcon = "", this._suffixIcon = "";
46
47
  }
47
48
  get prefixIcon() {
48
49
  return this._prefixIcon;
@@ -64,15 +65,15 @@ const n = (s = class extends u {
64
65
  super.connectedCallback();
65
66
  const e = this.getAttribute("prefixicon");
66
67
  e !== null && this.prefixIcon === "" && (this.prefixIcon = e);
67
- const r = this.getAttribute("suffixicon");
68
- r !== null && this.suffixIcon === "" && (this.suffixIcon = r);
68
+ const s = this.getAttribute("suffixicon");
69
+ s !== null && this.suffixIcon === "" && (this.suffixIcon = s);
69
70
  }
70
71
  /**
71
72
  * Resolves the screen-reader-only text describing the badge's semantic intent.
72
73
  * Returns null when no intent description should be announced.
73
74
  */
74
75
  resolveIntentSrText() {
75
- return this.srText ? null : s.INTENT_SR_TEXT[this.intent] ?? null;
76
+ return this.srText ? null : o.INTENT_SR_TEXT[this.intent] ?? null;
76
77
  }
77
78
  /**
78
79
  * Resolves which icon should be rendered.
@@ -80,17 +81,17 @@ const n = (s = class extends u {
80
81
  * @returns Icon name or null if no icon should be rendered
81
82
  */
82
83
  resolveIcon(e) {
83
- return e === !0 ? s.DEFAULT_ICONS[this.intent] ?? "info" : typeof e == "string" && e.trim() !== "" ? e : null;
84
+ return e === !0 ? o.DEFAULT_ICONS[this.intent] ?? "info" : typeof e == "string" && e.trim() !== "" ? e : null;
84
85
  }
85
86
  render() {
86
- const e = this.resolveIcon(this.prefixIcon), r = this.resolveIcon(this.suffixIcon), i = this.resolveIntentSrText();
87
+ const e = this.resolveIcon(this.prefixIcon), s = this.resolveIcon(this.suffixIcon), a = this.resolveIntentSrText();
87
88
  return f`
88
89
  <mark class="nys-badge">
89
90
  ${e ? f`<nys-icon size="16" name=${e}></nys-icon>` : ""}
90
91
  ${this.prefixLabel ? f`<div class="nys-badge__prefix">${this.prefixLabel}</div>` : ""}
91
92
  <div class="nys-badge__label">
92
- ${i ? f`<span class="nys-badge__sr-only"
93
- >${i + ": "}</span
93
+ ${a ? f`<span class="nys-badge__sr-only"
94
+ >${a + ": "}</span
94
95
  >` : ""}
95
96
  ${this.label}
96
97
  ${this.srText ? f`<span class="nys-badge__sr-only"
@@ -98,51 +99,69 @@ const n = (s = class extends u {
98
99
  >` : ""}
99
100
  </div>
100
101
 
101
- ${r ? f`<nys-icon size="16" name=${r}></nys-icon>` : ""}
102
+ ${s ? f`<nys-icon size="16" name=${s}></nys-icon>` : ""}
102
103
  </mark>
103
104
  `;
104
105
  }
105
- }, s.styles = d(_), s.DEFAULT_ICONS = {
106
- neutral: "info",
107
- error: "emergency_home",
106
+ }, o.styles = d(_), o.DEFAULT_ICONS = {
107
+ base: "info",
108
+ info: "info",
108
109
  success: "check_circle",
109
- warning: "warning"
110
- }, s.INTENT_SR_TEXT = {
111
- error: "Error",
110
+ warning: "warning",
111
+ danger: "error",
112
+ error: "error",
113
+ emergency: "emergency_home"
114
+ }, o.INTENT_SR_TEXT = {
115
+ info: "Info",
112
116
  success: "Success",
113
- warning: "Warning"
114
- }, s);
115
- o([
116
- t({ type: String, reflect: !0 })
117
- ], n.prototype, "id", 2);
118
- o([
119
- t({ type: String, reflect: !0 })
120
- ], n.prototype, "name", 2);
121
- o([
117
+ warning: "Warning",
118
+ danger: "Danger",
119
+ error: "Danger",
120
+ emergency: "Emergency"
121
+ }, o);
122
+ i([
123
+ t({
124
+ type: String,
125
+ reflect: !0,
126
+ converter: {
127
+ toAttribute: (n) => n || void 0
128
+ }
129
+ })
130
+ ], r.prototype, "id", 2);
131
+ i([
132
+ t({
133
+ type: String,
134
+ reflect: !0,
135
+ converter: {
136
+ toAttribute: (n) => n || void 0
137
+ }
138
+ })
139
+ ], r.prototype, "name", 2);
140
+ i([
122
141
  t({ type: String, reflect: !0 })
123
- ], n.prototype, "size", 2);
124
- o([
142
+ ], r.prototype, "size", 2);
143
+ i([
125
144
  t({ type: String, reflect: !0 })
126
- ], n.prototype, "intent", 2);
127
- o([
145
+ ], r.prototype, "intent", 2);
146
+ i([
128
147
  t({ type: String })
129
- ], n.prototype, "prefixLabel", 2);
130
- o([
148
+ ], r.prototype, "prefixLabel", 2);
149
+ i([
131
150
  t({ type: String })
132
- ], n.prototype, "label", 2);
133
- o([
151
+ ], r.prototype, "label", 2);
152
+ i([
134
153
  t({ type: String })
135
- ], n.prototype, "srText", 2);
136
- o([
137
- t({ type: String, reflect: !0 })
138
- ], n.prototype, "variant", 2);
139
- o([
154
+ ], r.prototype, "srText", 2);
155
+ i([
156
+ t({ type: Boolean, reflect: !0 })
157
+ ], r.prototype, "strong", 2);
158
+ i([
140
159
  t({ type: String, attribute: "prefixicon" })
141
- ], n.prototype, "prefixIcon", 1);
142
- o([
160
+ ], r.prototype, "prefixIcon", 1);
161
+ i([
143
162
  t({ type: String, attribute: "suffixicon" })
144
- ], n.prototype, "suffixIcon", 1);
145
- let m = n;
163
+ ], r.prototype, "suffixIcon", 1);
164
+ let m = r;
146
165
  customElements.get("nys-badge") || customElements.define("nys-badge", m);
147
166
  export {
148
167
  m as NysBadge
package/dist/nys-badge.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nys-badge.js","sources":["../../internals/dist/index.js","../src/nys-badge.ts"],"sourcesContent":["import { LitElement as u } from \"lit\";\n/*!\n * New York State Design System v1.20.0\n * Description: A design system for New York State's digital products.\n * Repository: https://github.com/its-hcd/nysds\n * License: MIT\n */\nlet y = 0;\nfunction f(e) {\n return `${e}-${Date.now()}-${y++}`;\n}\nconst p = {\n labelledby: \"ariaLabelledByElements\",\n describedby: \"ariaDescribedByElements\"\n}, A = {\n labelledby: \"ariaLabel\",\n describedby: \"ariaDescription\"\n};\nfunction R(e) {\n return \"ariaDescribedByElements\" in e;\n}\nfunction _(e) {\n return e === \"errormessage\" ? \"aria-errormessage\" : `aria-${e}`;\n}\nfunction d(e) {\n return e.filter((t) => !!t);\n}\nfunction E(e) {\n return e.map((t) => (t.id || (t.id = f(\"nys-ref\")), t.id));\n}\nfunction V(e, t, n) {\n const i = d(n), r = _(t);\n i.length ? e.setAttribute(r, E(i).join(\" \")) : e.removeAttribute(r);\n}\nfunction x(e, t, n, i, r) {\n const s = d(i), a = p[n], l = t;\n if (a && R(t)) {\n l[a] = s.length ? s : null;\n return;\n }\n const o = A[n];\n if (!o) return;\n const c = r ?? (s.length ? s.map((m) => m.textContent?.trim() ?? \"\").filter(Boolean).join(\" \") : \"\");\n o in l ? l[o] = c || null : c ? e.setAttribute(\n n === \"labelledby\" ? \"aria-label\" : \"aria-description\",\n c\n ) : e.removeAttribute(\n n === \"labelledby\" ? \"aria-label\" : \"aria-description\"\n );\n}\nconst g = {\n labelledby: \"ariaLabelledByElements\",\n describedby: \"ariaDescribedByElements\"\n}, C = {\n labelledby: \"aria-label\",\n describedby: \"aria-description\"\n};\nfunction L(e, t, n) {\n const i = d(n), r = g[t], s = C[t], a = e;\n if (r && r in e && (a[r] = i.length ? i : null), !s) return;\n const l = i.map((o) => o.textContent?.trim() ?? \"\").filter(Boolean).join(\" \");\n l ? e.setAttribute(s, l) : e.removeAttribute(s);\n}\nconst b = (e) => {\n class t extends e {\n get idPrefix() {\n return this.localName || \"nys-element\";\n }\n ensureId() {\n this.id || (this.id = f(this.idPrefix));\n }\n connectedCallback() {\n super.connectedCallback(), this.ensureId();\n }\n }\n return t;\n}, P = /* @__PURE__ */ b(u), h = (e) => {\n class t extends b(e) {\n constructor() {\n super(...arguments), this.__internals = null;\n }\n get internals() {\n if (this.__internals) return this.__internals;\n if (typeof this.attachInternals == \"function\")\n try {\n this.__internals = this.attachInternals();\n } catch {\n this.__internals = null;\n }\n return this.__internals;\n }\n get defaultRole() {\n return null;\n }\n setHostAria(i, r) {\n const s = this.internals;\n if (s && i in s) {\n s[i] = r;\n return;\n }\n const a = v(i);\n r === null ? this.removeAttribute(a) : this.setAttribute(a, r);\n }\n reflectDefaultSemantics() {\n const i = this.defaultRole;\n i && this.setHostAria(\"role\", i);\n }\n connectedCallback() {\n super.connectedCallback(), this.reflectDefaultSemantics();\n }\n }\n return t;\n};\nfunction v(e) {\n if (e === \"role\") return \"role\";\n const t = e.replace(/^aria/, \"\");\n return \"aria-\" + t.charAt(0).toLowerCase() + t.slice(1);\n}\nconst T = /* @__PURE__ */ h(u), I = (e) => {\n const n = class n extends h(e) {\n setFormValue(r) {\n this.internals?.setFormValue(r ?? null);\n }\n setValidityFromState(r, s, a) {\n const l = this.internals;\n if (!l) return;\n const o = Object.values(r).some(Boolean);\n o ? l.setValidity(r, s ?? \"Invalid value\", a) : l.setValidity({}), this.setHostAria(\"ariaInvalid\", o ? \"true\" : \"false\");\n }\n clearValidity() {\n this.internals?.setValidity({}), this.setHostAria(\"ariaInvalid\", \"false\");\n }\n checkValidity() {\n return this.internals?.checkValidity() ?? !0;\n }\n reportValidity() {\n return this.internals?.reportValidity() ?? !0;\n }\n formResetCallback() {\n this.clearValidity();\n }\n };\n n.formAssociated = !0;\n let t = n;\n return t;\n}, w = /* @__PURE__ */ I(u);\nfunction O(e) {\n const t = e.tagName.toLowerCase(), n = /* @__PURE__ */ new Set(), i = (r) => {\n r.querySelectorAll(\"*\").forEach((s) => {\n const a = s.tagName.toLowerCase();\n a.startsWith(\"nys-\") && a !== t && !customElements.get(a) && n.add(a), s.shadowRoot && i(s.shadowRoot);\n });\n };\n return e.shadowRoot && i(e.shadowRoot), i(e), [...n].sort();\n}\nexport {\n I as FormControlMixin,\n b as IdentifiedMixin,\n P as NysElement,\n w as NysFormControlElement,\n T as NysReflectsAriaElement,\n h as ReflectsAriaMixin,\n V as associateControl,\n L as associateControlRefs,\n x as associateHost,\n O as findUnregisteredChildren,\n f as generateId,\n R as supportsElementRefs\n};\n//# sourceMappingURL=index.js.map\n","import { html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { NysElement } from \"@nysds/internals\";\n// This element is rendered inside this component's shadow DOM (prefix/suffix\n// icons), so it must be registered whenever nys-badge is used. Importing it\n// here (intentional side effect) guarantees it always renders.\nimport \"@nysds/nys-icon\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-badge.scss?inline\";\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 Basic\n * ```html\n * <nys-badge label=\"Basic badge\"></nys-badge>\n * ```\n *\n * @example Error Intent\n * ```html\n * <nys-badge label=\"Error\" intent=\"error\" prefixIcon></nys-badge>\n * ```\n *\n * @example Warning Intent\n * ```html\n * <nys-badge label=\"Warning\" intent=\"warning\" prefixIcon></nys-badge>\n * ```\n *\n * @example Success Intent\n * ```html\n * <nys-badge label=\"Success\" intent=\"success\" prefixIcon></nys-badge>\n * ```\n *\n * @example Strong Neutral\n * ```html\n * <nys-badge variant=\"strong\" label=\"Neutral\" prefixIcon></nys-badge>\n * ```\n *\n * @example Strong Error\n * ```html\n * <nys-badge variant=\"strong\" label=\"Error\" intent=\"error\" prefixIcon></nys-badge>\n * ```\n *\n * @example Strong Warning\n * ```html\n * <nys-badge variant=\"strong\" label=\"Warning\" intent=\"warning\" prefixIcon></nys-badge>\n * ```\n *\n * @example Strong Success\n * ```html\n * <nys-badge variant=\"strong\" label=\"Success\" intent=\"success\" prefixIcon></nys-badge>\n * ```\n *\n * @example Custom Prefix Icon\n * ```html\n * <nys-badge label=\"Custom prefixIcon\" prefixIcon=\"check\"></nys-badge>\n * ```\n *\n * @example Custom Suffix Icon\n * ```html\n * <nys-badge label=\"Custom suffixIcon\" suffixIcon=\"check\"></nys-badge>\n * ```\n *\n * @example Size Small\n * ```html\n * <nys-badge label=\"Small\" size=\"sm\"></nys-badge>\n * ```\n *\n * @example Screen reader text\n * ```html\n * <nys-badge intent=\"warning\" label=\"Caution\" prefixIcon srText=\"concern\"></nys-badge>\n * ```\n */\n\nexport class NysBadge extends NysElement {\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() (NysElement) auto-assigns an id when\n // one is not provided, preserving the \"nys-badge-<ts>-<n>\" shape. A badge is\n // static, non-interactive label content, so no host role is reflected\n // (defaultRole stays null).\n super.connectedCallback();\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 // WCAG 1.4.1 (Use of Color): intent is otherwise conveyed only by color and a\n // decorative (aria-hidden) icon. Provide a screen-reader-only text alternative\n // so the semantic meaning is not color-only. Skipped for \"neutral\" (no\n // semantic meaning) and when the author supplies their own srText override.\n private static readonly INTENT_SR_TEXT: Record<string, string> = {\n error: \"Error\",\n success: \"Success\",\n warning: \"Warning\",\n };\n\n /**\n * Resolves the screen-reader-only text describing the badge's semantic intent.\n * Returns null when no intent description should be announced.\n */\n private resolveIntentSrText(): string | null {\n if (this.srText) return null; // author-provided text takes precedence\n return NysBadge.INTENT_SR_TEXT[this.intent] ?? null;\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 const intentSrText = this.resolveIntentSrText();\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 ${intentSrText\n ? html`<span class=\"nys-badge__sr-only\"\n >${intentSrText + \": \"}</span\n >`\n : \"\"}\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":["LitElement","unsafeCSS","html","property","y","f","e","b","t","P","u","_NysBadge","_a","NysElement","value","attr","suffixAttr","icon","prefixIconName","suffixIconName","intentSrText","styles","__decorateClass","NysBadge"],"mappings":"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"}
1
+ {"version":3,"file":"nys-badge.js","sources":["../../internals/dist/index.js","../src/nys-badge.ts"],"sourcesContent":["import { LitElement as u } from \"lit\";\n/*!\n * New York State Design System v1.21.0\n * Description: A design system for New York State's digital products.\n * Repository: https://github.com/its-hcd/nysds\n * License: MIT\n */\nvar y = 0;\nfunction f(e) {\n return `${e}-${Date.now()}-${y++}`;\n}\nvar p = {\n labelledby: \"ariaLabelledByElements\",\n describedby: \"ariaDescribedByElements\"\n}, v = {\n labelledby: \"ariaLabel\",\n describedby: \"ariaDescription\"\n};\nfunction A(e) {\n return \"ariaDescribedByElements\" in e;\n}\nfunction R(e) {\n return e === \"errormessage\" ? \"aria-errormessage\" : `aria-${e}`;\n}\nfunction d(e) {\n return e.filter((r) => !!r);\n}\nfunction _(e) {\n return e.map((r) => (r.id || (r.id = f(\"nys-ref\")), r.id));\n}\nfunction V(e, r, a) {\n const t = d(a), n = R(r);\n t.length ? e.setAttribute(n, _(t).join(\" \")) : e.removeAttribute(n);\n}\nfunction x(e, r, a, t, n) {\n const i = d(t), s = p[a], l = r;\n if (s && A(r)) {\n l[s] = i.length ? i : null;\n return;\n }\n const o = v[a];\n if (!o) return;\n const c = n ?? (i.length ? i.map((m) => m.textContent?.trim() ?? \"\").filter(Boolean).join(\" \") : \"\");\n o in l ? l[o] = c || null : c ? e.setAttribute(a === \"labelledby\" ? \"aria-label\" : \"aria-description\", c) : e.removeAttribute(a === \"labelledby\" ? \"aria-label\" : \"aria-description\");\n}\nvar E = {\n labelledby: \"ariaLabelledByElements\",\n describedby: \"ariaDescribedByElements\"\n}, C = {\n labelledby: \"aria-label\",\n describedby: \"aria-description\"\n};\nfunction L(e, r, a) {\n const t = d(a), n = E[r], i = C[r], s = e;\n if (n && n in e && (s[n] = t.length ? t : null), !i) return;\n const l = t.map((o) => o.textContent?.trim() ?? \"\").filter(Boolean).join(\" \");\n l ? e.setAttribute(i, l) : e.removeAttribute(i);\n}\nvar b = (e) => {\n class r extends e {\n get idPrefix() {\n return this.localName || \"nys-element\";\n }\n ensureId() {\n this.id || (this.id = f(this.idPrefix));\n }\n connectedCallback() {\n super.connectedCallback(), this.ensureId();\n }\n }\n return r;\n}, P = /* @__PURE__ */ b(u), h = (e) => {\n class r extends b(e) {\n constructor(...t) {\n super(...t), this.__internals = null;\n }\n get internals() {\n if (this.__internals) return this.__internals;\n if (typeof this.attachInternals == \"function\") try {\n this.__internals = this.attachInternals();\n } catch {\n this.__internals = null;\n }\n return this.__internals;\n }\n get defaultRole() {\n return null;\n }\n setHostAria(t, n) {\n const i = this.internals;\n if (i && t in i) {\n i[t] = n;\n return;\n }\n const s = g(t);\n n === null ? this.removeAttribute(s) : this.setAttribute(s, n);\n }\n reflectDefaultSemantics() {\n const t = this.defaultRole;\n t && this.setHostAria(\"role\", t);\n }\n connectedCallback() {\n super.connectedCallback(), this.reflectDefaultSemantics();\n }\n }\n return r;\n};\nfunction g(e) {\n if (e === \"role\") return \"role\";\n const r = e.replace(/^aria/, \"\");\n return \"aria-\" + r.charAt(0).toLowerCase() + r.slice(1);\n}\nvar T = /* @__PURE__ */ h(u), I = (e) => {\n class r extends h(e) {\n static {\n this.formAssociated = !0;\n }\n setFormValue(t) {\n this.internals?.setFormValue(t ?? null);\n }\n setValidityFromState(t, n, i) {\n const s = this.internals;\n if (!s) return;\n const l = Object.values(t).some(Boolean);\n l ? s.setValidity(t, n ?? \"Invalid value\", i) : s.setValidity({}), this.setHostAria(\"ariaInvalid\", l ? \"true\" : \"false\");\n }\n clearValidity() {\n this.internals?.setValidity({}), this.setHostAria(\"ariaInvalid\", \"false\");\n }\n checkValidity() {\n return this.internals?.checkValidity() ?? !0;\n }\n reportValidity() {\n return this.internals?.reportValidity() ?? !0;\n }\n formResetCallback() {\n this.clearValidity();\n }\n }\n return r;\n}, w = /* @__PURE__ */ I(u);\nfunction O(e) {\n const r = e.tagName.toLowerCase(), a = /* @__PURE__ */ new Set(), t = (n) => {\n n.querySelectorAll(\"*\").forEach((i) => {\n const s = i.tagName.toLowerCase();\n s.startsWith(\"nys-\") && s !== r && !customElements.get(s) && a.add(s), i.shadowRoot && t(i.shadowRoot);\n });\n };\n return e.shadowRoot && t(e.shadowRoot), t(e), [...a].sort();\n}\nexport {\n I as FormControlMixin,\n b as IdentifiedMixin,\n P as NysElement,\n w as NysFormControlElement,\n T as NysReflectsAriaElement,\n h as ReflectsAriaMixin,\n V as associateControl,\n L as associateControlRefs,\n x as associateHost,\n O as findUnregisteredChildren,\n f as generateId,\n A as supportsElementRefs\n};\n\n//# sourceMappingURL=index.js.map","import { html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { NysElement } from \"@nysds/internals\";\n// This element is rendered inside this component's shadow DOM (prefix/suffix\n// icons), so it must be registered whenever nys-badge is used. Importing it\n// here (intentional side effect) guarantees it always renders.\nimport \"@nysds/nys-icon\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-badge.scss?inline\";\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 Basic\n * ```html\n * <nys-badge label=\"Basic badge\"></nys-badge>\n * ```\n *\n * @example Info Intent\n * ```html\n * <nys-badge label=\"Info\" intent=\"info\" prefixIcon></nys-badge>\n * ```\n *\n * @example Success Intent\n * ```html\n * <nys-badge label=\"Success\" intent=\"success\" prefixIcon></nys-badge>\n * ```\n *\n * @example Warning Intent\n * ```html\n * <nys-badge label=\"Warning\" intent=\"warning\" prefixIcon></nys-badge>\n * ```\n *\n * @example Danger Intent\n * ```html\n * <nys-badge label=\"Danger\" intent=\"danger\" prefixIcon></nys-badge>\n * ```\n *\n * @example Emergency Intent\n * ```html\n * <nys-badge label=\"Emergency\" intent=\"emergency\" prefixIcon></nys-badge>\n * ```\n *\n * @example Strong Base\n * ```html\n * <nys-badge strong label=\"Base\" prefixIcon></nys-badge>\n * ```\n *\n * @example Strong Info\n * ```html\n * <nys-badge strong label=\"Info\" intent=\"info\" prefixIcon></nys-badge>\n * ```\n *\n * @example Strong Success\n * ```html\n * <nys-badge strong label=\"Success\" intent=\"success\" prefixIcon></nys-badge>\n * ```\n *\n * @example Strong Warning\n * ```html\n * <nys-badge strong label=\"Warning\" intent=\"warning\" prefixIcon></nys-badge>\n * ```\n *\n * @example Strong Danger\n * ```html\n * <nys-badge strong label=\"Danger\" intent=\"danger\" prefixIcon></nys-badge>\n * ```\n *\n * @example Custom Prefix Icon\n * ```html\n * <nys-badge label=\"Custom prefixIcon\" prefixIcon=\"check\"></nys-badge>\n * ```\n *\n * @example Custom Suffix Icon\n * ```html\n * <nys-badge label=\"Custom suffixIcon\" suffixIcon=\"check\"></nys-badge>\n * ```\n *\n * @example Size Small\n * ```html\n * <nys-badge label=\"Small\" size=\"sm\"></nys-badge>\n * ```\n *\n * @example Screen reader text\n * ```html\n * <nys-badge intent=\"warning\" label=\"Caution\" prefixIcon srText=\"concern\"></nys-badge>\n * ```\n */\n\nexport class NysBadge extends NysElement {\n static styles = unsafeCSS(styles);\n\n /** Unique identifier. */\n @property({\n type: String,\n reflect: true,\n converter: {\n toAttribute: (value: string) => (value ? value : undefined),\n },\n })\n id = \"\";\n\n /** Name attribute for form association. */\n @property({\n type: String,\n reflect: true,\n converter: {\n toAttribute: (value: string) => (value ? value : undefined),\n },\n })\n 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: `base`, `info`, `success`, `warning` `danger`, `emergency`. `error` has been deprecated and support will be removed in a future release. Use `danger` instead\n * @default \"info\"\n */\n @property({ type: String, reflect: true }) intent:\n | \"base\"\n | \"info\"\n | \"success\"\n | \"warning\"\n | \"danger\"\n | \"error\"\n | \"emergency\" = \"base\";\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 /** Strong visual intent with bolder text and background. */\n @property({ type: Boolean, reflect: true }) strong = false;\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() (NysElement) auto-assigns an id when\n // one is not provided, preserving the \"nys-badge-<ts>-<n>\" shape. A badge is\n // static, non-interactive label content, so no host role is reflected\n // (defaultRole stays null).\n super.connectedCallback();\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 base: \"info\",\n info: \"info\",\n success: \"check_circle\",\n warning: \"warning\",\n danger: \"error\",\n error: \"error\",\n emergency: \"emergency_home\",\n };\n\n // WCAG 1.4.1 (Use of Color): intent is otherwise conveyed only by color and a\n // decorative (aria-hidden) icon. Provide a screen-reader-only text alternative\n // so the semantic meaning is not color-only. Skipped for \"base\" (no\n // semantic meaning) and when the author supplies their own srText override.\n private static readonly INTENT_SR_TEXT: Record<string, string> = {\n info: \"Info\",\n success: \"Success\",\n warning: \"Warning\",\n danger: \"Danger\",\n error: \"Danger\",\n emergency: \"Emergency\",\n };\n\n /**\n * Resolves the screen-reader-only text describing the badge's semantic intent.\n * Returns null when no intent description should be announced.\n */\n private resolveIntentSrText(): string | null {\n if (this.srText) return null; // author-provided text takes precedence\n return NysBadge.INTENT_SR_TEXT[this.intent] ?? null;\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 const intentSrText = this.resolveIntentSrText();\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 ${intentSrText\n ? html`<span class=\"nys-badge__sr-only\"\n >${intentSrText + \": \"}</span\n >`\n : \"\"}\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":["LitElement","unsafeCSS","html","property","y","f","e","b","r","P","u","_NysBadge","_a","NysElement","value","attr","suffixAttr","icon","prefixIconName","suffixIconName","intentSrText","styles","__decorateClass","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.20.0",
3
+ "version": "1.21.0",
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,10 +23,10 @@
23
23
  "lit-analyze": "lit-analyzer '**/*.ts'"
24
24
  },
25
25
  "dependencies": {
26
- "@nysds/nys-icon": "^1.20.0"
26
+ "@nysds/nys-icon": "^1.21.0"
27
27
  },
28
28
  "devDependencies": {
29
- "@nysds/internals": "^1.20.0",
29
+ "@nysds/internals": "^1.21.0",
30
30
  "lit": "^3.3.1",
31
31
  "typescript": "^5.9.3",
32
32
  "vite": "^7.3.1"