@nysds/nys-checkbox 1.11.2 → 1.11.4

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.
@@ -1,923 +1,15 @@
1
- import { css as de, LitElement as re, html as P } from "lit";
2
- /*!
3
- * ▒█▄░▒█ ▒█░░▒█ ▒█▀▀▀█ ▒█▀▀▄ ▒█▀▀▀█
4
- * ▒█▒█▒█ ▒█▄▄▄█ ░▀▀▀▄▄ ▒█░▒█ ░▀▀▀▄▄
5
- * ▒█░░▀█ ░░▒█░░ ▒█▄▄▄█ ▒█▄▄▀ ▒█▄▄▄█
6
- *
7
- * Checkbox
8
- * Part of the New York State Design System
9
- * Repository: https://github.com/its-hcd/nysds
10
- * License: MIT
11
- */
12
- /**
13
- * @license
14
- * Copyright 2019 Google LLC
15
- * SPDX-License-Identifier: BSD-3-Clause
16
- */
17
- const I = globalThis, B = I.ShadowRoot && (I.ShadyCSS === void 0 || I.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, ie = Symbol(), G = /* @__PURE__ */ new WeakMap();
18
- let be = class {
19
- constructor(e, t, s) {
20
- if (this._$cssResult$ = !0, s !== ie) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
21
- this.cssText = e, this.t = t;
22
- }
23
- get styleSheet() {
24
- let e = this.o;
25
- const t = this.t;
26
- if (B && e === void 0) {
27
- const s = t !== void 0 && t.length === 1;
28
- s && (e = G.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), s && G.set(t, e));
29
- }
30
- return e;
31
- }
32
- toString() {
33
- return this.cssText;
34
- }
35
- };
36
- const ue = (r) => new be(typeof r == "string" ? r : r + "", void 0, ie), pe = (r, e) => {
37
- if (B) r.adoptedStyleSheets = e.map(((t) => t instanceof CSSStyleSheet ? t : t.styleSheet));
38
- else for (const t of e) {
39
- const s = document.createElement("style"), o = I.litNonce;
40
- o !== void 0 && s.setAttribute("nonce", o), s.textContent = t.cssText, r.appendChild(s);
41
- }
42
- }, K = B ? (r) => r : (r) => r instanceof CSSStyleSheet ? ((e) => {
43
- let t = "";
44
- for (const s of e.cssRules) t += s.cssText;
45
- return ue(t);
46
- })(r) : r;
47
- /**
48
- * @license
49
- * Copyright 2017 Google LLC
50
- * SPDX-License-Identifier: BSD-3-Clause
51
- */
52
- const { is: ye, defineProperty: _e, getOwnPropertyDescriptor: ke, getOwnPropertyNames: fe, getOwnPropertySymbols: ve, getPrototypeOf: xe } = Object, N = globalThis, J = N.trustedTypes, ge = J ? J.emptyScript : "", me = N.reactiveElementPolyfillSupport, q = (r, e) => r, R = { toAttribute(r, e) {
53
- switch (e) {
54
- case Boolean:
55
- r = r ? ge : null;
56
- break;
57
- case Object:
58
- case Array:
59
- r = r == null ? r : JSON.stringify(r);
60
- }
61
- return r;
62
- }, fromAttribute(r, e) {
63
- let t = r;
64
- switch (e) {
65
- case Boolean:
66
- t = r !== null;
67
- break;
68
- case Number:
69
- t = r === null ? null : Number(r);
70
- break;
71
- case Object:
72
- case Array:
73
- try {
74
- t = JSON.parse(r);
75
- } catch {
76
- t = null;
77
- }
78
- }
79
- return t;
80
- } }, F = (r, e) => !ye(r, e), Y = { attribute: !0, type: String, converter: R, reflect: !1, useDefault: !1, hasChanged: F };
81
- Symbol.metadata ??= Symbol("metadata"), N.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
82
- class S extends HTMLElement {
83
- static addInitializer(e) {
84
- this._$Ei(), (this.l ??= []).push(e);
85
- }
86
- static get observedAttributes() {
87
- return this.finalize(), this._$Eh && [...this._$Eh.keys()];
88
- }
89
- static createProperty(e, t = Y) {
90
- if (t.state && (t.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((t = Object.create(t)).wrapped = !0), this.elementProperties.set(e, t), !t.noAccessor) {
91
- const s = Symbol(), o = this.getPropertyDescriptor(e, s, t);
92
- o !== void 0 && _e(this.prototype, e, o);
93
- }
94
- }
95
- static getPropertyDescriptor(e, t, s) {
96
- const { get: o, set: i } = ke(this.prototype, e) ?? { get() {
97
- return this[t];
98
- }, set(c) {
99
- this[t] = c;
100
- } };
101
- return { get: o, set(c) {
102
- const h = o?.call(this);
103
- i?.call(this, c), this.requestUpdate(e, h, s);
104
- }, configurable: !0, enumerable: !0 };
105
- }
106
- static getPropertyOptions(e) {
107
- return this.elementProperties.get(e) ?? Y;
108
- }
109
- static _$Ei() {
110
- if (this.hasOwnProperty(q("elementProperties"))) return;
111
- const e = xe(this);
112
- e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
113
- }
114
- static finalize() {
115
- if (this.hasOwnProperty(q("finalized"))) return;
116
- if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(q("properties"))) {
117
- const t = this.properties, s = [...fe(t), ...ve(t)];
118
- for (const o of s) this.createProperty(o, t[o]);
119
- }
120
- const e = this[Symbol.metadata];
121
- if (e !== null) {
122
- const t = litPropertyMetadata.get(e);
123
- if (t !== void 0) for (const [s, o] of t) this.elementProperties.set(s, o);
124
- }
125
- this._$Eh = /* @__PURE__ */ new Map();
126
- for (const [t, s] of this.elementProperties) {
127
- const o = this._$Eu(t, s);
128
- o !== void 0 && this._$Eh.set(o, t);
129
- }
130
- this.elementStyles = this.finalizeStyles(this.styles);
131
- }
132
- static finalizeStyles(e) {
133
- const t = [];
134
- if (Array.isArray(e)) {
135
- const s = new Set(e.flat(1 / 0).reverse());
136
- for (const o of s) t.unshift(K(o));
137
- } else e !== void 0 && t.push(K(e));
138
- return t;
139
- }
140
- static _$Eu(e, t) {
141
- const s = t.attribute;
142
- return s === !1 ? void 0 : typeof s == "string" ? s : typeof e == "string" ? e.toLowerCase() : void 0;
143
- }
144
- constructor() {
145
- super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
146
- }
147
- _$Ev() {
148
- this._$ES = new Promise(((e) => this.enableUpdating = e)), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(((e) => e(this)));
149
- }
150
- addController(e) {
151
- (this._$EO ??= /* @__PURE__ */ new Set()).add(e), this.renderRoot !== void 0 && this.isConnected && e.hostConnected?.();
152
- }
153
- removeController(e) {
154
- this._$EO?.delete(e);
155
- }
156
- _$E_() {
157
- const e = /* @__PURE__ */ new Map(), t = this.constructor.elementProperties;
158
- for (const s of t.keys()) this.hasOwnProperty(s) && (e.set(s, this[s]), delete this[s]);
159
- e.size > 0 && (this._$Ep = e);
160
- }
161
- createRenderRoot() {
162
- const e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
163
- return pe(e, this.constructor.elementStyles), e;
164
- }
165
- connectedCallback() {
166
- this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach(((e) => e.hostConnected?.()));
167
- }
168
- enableUpdating(e) {
169
- }
170
- disconnectedCallback() {
171
- this._$EO?.forEach(((e) => e.hostDisconnected?.()));
172
- }
173
- attributeChangedCallback(e, t, s) {
174
- this._$AK(e, s);
175
- }
176
- _$ET(e, t) {
177
- const s = this.constructor.elementProperties.get(e), o = this.constructor._$Eu(e, s);
178
- if (o !== void 0 && s.reflect === !0) {
179
- const i = (s.converter?.toAttribute !== void 0 ? s.converter : R).toAttribute(t, s.type);
180
- this._$Em = e, i == null ? this.removeAttribute(o) : this.setAttribute(o, i), this._$Em = null;
181
- }
182
- }
183
- _$AK(e, t) {
184
- const s = this.constructor, o = s._$Eh.get(e);
185
- if (o !== void 0 && this._$Em !== o) {
186
- const i = s.getPropertyOptions(o), c = typeof i.converter == "function" ? { fromAttribute: i.converter } : i.converter?.fromAttribute !== void 0 ? i.converter : R;
187
- this._$Em = o;
188
- const h = c.fromAttribute(t, i.type);
189
- this[o] = h ?? this._$Ej?.get(o) ?? h, this._$Em = null;
190
- }
191
- }
192
- requestUpdate(e, t, s) {
193
- if (e !== void 0) {
194
- const o = this.constructor, i = this[e];
195
- if (s ??= o.getPropertyOptions(e), !((s.hasChanged ?? F)(i, t) || s.useDefault && s.reflect && i === this._$Ej?.get(e) && !this.hasAttribute(o._$Eu(e, s)))) return;
196
- this.C(e, t, s);
197
- }
198
- this.isUpdatePending === !1 && (this._$ES = this._$EP());
199
- }
200
- C(e, t, { useDefault: s, reflect: o, wrapped: i }, c) {
201
- s && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(e) && (this._$Ej.set(e, c ?? t ?? this[e]), i !== !0 || c !== void 0) || (this._$AL.has(e) || (this.hasUpdated || s || (t = void 0), this._$AL.set(e, t)), o === !0 && this._$Em !== e && (this._$Eq ??= /* @__PURE__ */ new Set()).add(e));
202
- }
203
- async _$EP() {
204
- this.isUpdatePending = !0;
205
- try {
206
- await this._$ES;
207
- } catch (t) {
208
- Promise.reject(t);
209
- }
210
- const e = this.scheduleUpdate();
211
- return e != null && await e, !this.isUpdatePending;
212
- }
213
- scheduleUpdate() {
214
- return this.performUpdate();
215
- }
216
- performUpdate() {
217
- if (!this.isUpdatePending) return;
218
- if (!this.hasUpdated) {
219
- if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
220
- for (const [o, i] of this._$Ep) this[o] = i;
221
- this._$Ep = void 0;
222
- }
223
- const s = this.constructor.elementProperties;
224
- if (s.size > 0) for (const [o, i] of s) {
225
- const { wrapped: c } = i, h = this[o];
226
- c !== !0 || this._$AL.has(o) || h === void 0 || this.C(o, void 0, i, h);
227
- }
228
- }
229
- let e = !1;
230
- const t = this._$AL;
231
- try {
232
- e = this.shouldUpdate(t), e ? (this.willUpdate(t), this._$EO?.forEach(((s) => s.hostUpdate?.())), this.update(t)) : this._$EM();
233
- } catch (s) {
234
- throw e = !1, this._$EM(), s;
235
- }
236
- e && this._$AE(t);
237
- }
238
- willUpdate(e) {
239
- }
240
- _$AE(e) {
241
- this._$EO?.forEach(((t) => t.hostUpdated?.())), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(e)), this.updated(e);
242
- }
243
- _$EM() {
244
- this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
245
- }
246
- get updateComplete() {
247
- return this.getUpdateComplete();
248
- }
249
- getUpdateComplete() {
250
- return this._$ES;
251
- }
252
- shouldUpdate(e) {
253
- return !0;
254
- }
255
- update(e) {
256
- this._$Eq &&= this._$Eq.forEach(((t) => this._$ET(t, this[t]))), this._$EM();
257
- }
258
- updated(e) {
259
- }
260
- firstUpdated(e) {
261
- }
262
- }
263
- S.elementStyles = [], S.shadowRootOptions = { mode: "open" }, S[q("elementProperties")] = /* @__PURE__ */ new Map(), S[q("finalized")] = /* @__PURE__ */ new Map(), me?.({ ReactiveElement: S }), (N.reactiveElementVersions ??= []).push("2.1.1");
264
- /**
265
- * @license
266
- * Copyright 2017 Google LLC
267
- * SPDX-License-Identifier: BSD-3-Clause
268
- */
269
- const $e = { attribute: !0, type: String, converter: R, reflect: !1, hasChanged: F }, Ae = (r = $e, e, t) => {
270
- const { kind: s, metadata: o } = t;
271
- let i = globalThis.litPropertyMetadata.get(o);
272
- if (i === void 0 && globalThis.litPropertyMetadata.set(o, i = /* @__PURE__ */ new Map()), s === "setter" && ((r = Object.create(r)).wrapped = !0), i.set(t.name, r), s === "accessor") {
273
- const { name: c } = t;
274
- return { set(h) {
275
- const n = e.get.call(this);
276
- e.set.call(this, h), this.requestUpdate(c, n, r);
277
- }, init(h) {
278
- return h !== void 0 && this.C(c, void 0, r, h), h;
279
- } };
280
- }
281
- if (s === "setter") {
282
- const { name: c } = t;
283
- return function(h) {
284
- const n = this[c];
285
- e.call(this, h), this.requestUpdate(c, n, r);
286
- };
287
- }
288
- throw Error("Unsupported decorator location: " + s);
289
- };
290
- function a(r) {
291
- return (e, t) => typeof t == "object" ? Ae(r, e, t) : ((s, o, i) => {
292
- const c = o.hasOwnProperty(i);
293
- return o.constructor.createProperty(i, s), c ? Object.getOwnPropertyDescriptor(o, i) : void 0;
294
- })(r, e, t);
295
- }
296
- /**
297
- * @license
298
- * Copyright 2017 Google LLC
299
- * SPDX-License-Identifier: BSD-3-Clause
300
- */
301
- function Ee(r) {
302
- return a({ ...r, state: !0, attribute: !1 });
303
- }
304
- /**
305
- * @license
306
- * Copyright 2017 Google LLC
307
- * SPDX-License-Identifier: BSD-3-Clause
308
- */
309
- const W = globalThis, H = W.trustedTypes, Q = H ? H.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, ce = "$lit$", m = `lit$${Math.random().toFixed(9).slice(2)}$`, ne = "?" + m, we = `<${ne}>`, E = document, D = () => E.createComment(""), M = (r) => r === null || typeof r != "object" && typeof r != "function", Z = Array.isArray, Se = (r) => Z(r) || typeof r?.[Symbol.iterator] == "function", j = `[
310
- \f\r]`, C = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, X = /-->/g, ee = />/g, $ = RegExp(`>|${j}(?:([^\\s"'>=/]+)(${j}*=${j}*(?:[^
311
- \f\r"'\`<>=]|("|')|))|$)`, "g"), te = /'/g, se = /"/g, he = /^(?:script|style|textarea|title)$/i, z = Symbol.for("lit-noChange"), b = Symbol.for("lit-nothing"), oe = /* @__PURE__ */ new WeakMap(), A = E.createTreeWalker(E, 129);
312
- function ae(r, e) {
313
- if (!Z(r) || !r.hasOwnProperty("raw")) throw Error("invalid template strings array");
314
- return Q !== void 0 ? Q.createHTML(e) : e;
315
- }
316
- const Ce = (r, e) => {
317
- const t = r.length - 1, s = [];
318
- let o, i = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", c = C;
319
- for (let h = 0; h < t; h++) {
320
- const n = r[h];
321
- let d, u, l = -1, f = 0;
322
- for (; f < n.length && (c.lastIndex = f, u = c.exec(n), u !== null); ) f = c.lastIndex, c === C ? u[1] === "!--" ? c = X : u[1] !== void 0 ? c = ee : u[2] !== void 0 ? (he.test(u[2]) && (o = RegExp("</" + u[2], "g")), c = $) : u[3] !== void 0 && (c = $) : c === $ ? u[0] === ">" ? (c = o ?? C, l = -1) : u[1] === void 0 ? l = -2 : (l = c.lastIndex - u[2].length, d = u[1], c = u[3] === void 0 ? $ : u[3] === '"' ? se : te) : c === se || c === te ? c = $ : c === X || c === ee ? c = C : (c = $, o = void 0);
323
- const g = c === $ && r[h + 1].startsWith("/>") ? " " : "";
324
- i += c === C ? n + we : l >= 0 ? (s.push(d), n.slice(0, l) + ce + n.slice(l) + m + g) : n + m + (l === -2 ? h : g);
325
- }
326
- return [ae(r, i + (r[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), s];
1
+ import { LitElement as p, unsafeCSS as v, html as k } from "lit";
2
+ import { property as t, state as g } from "lit/decorators.js";
3
+ import { ifDefined as x } from "lit/directives/if-defined.js";
4
+ const _ = ':host{--_nys-checkbox-size: var(--nys-size-400, 32px);--_nys-checkbox-border-radius: var(--nys-radius-md, 4px);--_nys-checkbox-border-width: var(--nys-border-width-md, 2px);--_nys-checkbox-outline-color: var(--nys-color-focus, #004dd1);--_nys-checkbox-outline-width: var(--nys-border-width-md, 2px);--_nys-checkbox-outline-offset: var(--nys-space-2px, 2px);--_nys-checkbox-gap: var(--nys-space-150, 12px);--_nys-checkboxgroup-gap: var(--nys-space-200, 16px);--_nys-checkbox-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-checkbox-font-size: var(--nys-font-size-ui-md, 16px);--_nys-checkbox-font-weight: var(--nys-font-weight-regular, 400);--_nys-checkbox-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-checkbox-color: var( --nys-color-ink, var(--nys-color-neutral-900, #1b1b1b) );--_nys-checkbox-background-color: var(--nys-color-ink-reverse, #ffffff);--_nys-checkbox-border-color: var(--nys-color-neutral-600, #62666a);--_nys-checkbox-background-color--hover: var( --nys-color-neutral-50, #ededed );--_nys-checkbox-border-color--hover: var(--nys-color-ink, #1b1b1b);--_nys-checkbox-background-color--active: var( --nys-color-neutral-100, #d0d0ce );--_nys-checkbox-border-color--active: var(--nys-color-ink, #1b1b1b);--_nys-checkbox-background-color--checked: var(--nys-color-theme, #154973);--_nys-checkbox-border-color--checked: var(--nys-color-theme, #154973);--_nys-checkbox-background-color--checked--hover: var( --nys-color-theme-strong, #0e324f );--_nys-checkbox-border-color--checked--hover: var( --nys-color-theme-strong, #0e324f );--_nys-checkbox-background-color--checked--active: var( --nys-color-theme-stronger, #081b2b );--_nys-checkbox-border-color--checked--active: var( --nys-color-theme-stronger, #081b2b );--_nys-checkbox-background-color--disabled: var( --nys-color-ink-reverse, #f0f0f0 );--_nys-checkbox-border-color--disabled: var( --nys-color-neutral-400, #757575 );--_nys-checkbox-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-checkbox-background-color--checked--disabled: var( --nys-color-neutral-100, #d0d0ce );--_nys-checkbox-border-color--checked--disabled: var( --nys-color-neutral-100, #d0d0ce )}:host([size=sm]){--_nys-checkbox-size: var(--nys-size-300, 24px);--_nys-checkbox-border-radius: var(--nys-radius-sm, 2px);--_nys-checkboxgroup-gap: var(--nys-space-100, 8px);--_nys-checkbox-gap: var(--nys-space-100, 8px)}:host([size=md]){--_nys-checkbox-size: var(--nys-size-400, 32px);--_nys-checkbox-border-radius: var(--nys-radius-md, 4px)}:host([tile]){--_nys-checkbox-border-width--tile: var(--nys-border-width-sm, 1px);--_nys-checkbox-border-radius--tile: var(--nys-radius-md, 4px);--_nys-checkbox-border-color--tile: var(--nys-color-neutral-100, #d0d0ce);--_nys-checkbox-background-color--tile: var( --nys-color-ink-reverse, #ffffff );--_nys-checkbox-padding--x--tile: var(--nys-space-250, 20px);--_nys-checkbox-padding--y--tile: var(--nys-space-200, 16px);--_nys-checkbox-border-color--tile--hover: var( --nys-color-neutral-700, #4a4d4f );--_nys-checkbox-background-color--tile--hover: var( --nys-color-ink-reverse, #ffffff );--_nys-checkbox-border-color--tile--active: var( --nys-color-neutral-900, #1b1b1b );--_nys-checkbox-background-color--tile--active: var( --nys-color-ink-reverse, #ffffff );--_nys-checkbox-border-color--tile--checked: var( --nys-color-theme-mid, #457aa5 );--_nys-checkbox-background-color--tile--checked: var( --nys-color-theme-faint, #f7fafd );--_nys-checkbox-background-color--tile--disabled: var( --nys-color-ink-reverse, #f0f0f0 );--_nys-checkbox-border-color--tile--disabled: var( --nys-color-neutral-100, #d0d0ce )}:host([tile][size=sm]){--_nys-checkbox-padding--x--tile: var(--nys-space-200, 16px);--_nys-checkbox-padding--y--tile: var(--nys-space-150, 12px)}:host([tile][showError]){--_nys-checkbox-border-color--tile: var(--nys-color-danger, #b52c2c);--_nys-checkbox-border-color--tile--hover: var(--nys-color-danger, #b52c2c);--_nys-checkbox-border-color--tile--active: var( --nys-color-danger, #b52c2c );--_nys-checkbox-border-color--tile--checked: var( --nys-color-danger, #b52c2c )}#single-error-message{--_nys-errormessage-margin-top: var(--nys-space-50, 4px)}.nys-checkboxgroup{display:flex;flex-direction:column;gap:var(--nys-space-200, 16px);font-family:var(--_nys-checkbox-font-family);font-size:var(--_nys-checkbox-font-size);line-height:var(--_nys-checkbox-line-height)}.nys-checkboxgroup__content{display:flex;flex-direction:column;gap:var(--_nys-checkboxgroup-gap)}.nys-checkbox{display:flex;font-family:var(--_nys-checkbox-font-family);font-size:var(--_nys-checkbox-font-size);line-height:var(--_nys-checkbox-line-height);border-radius:var(--_nys-checkbox-border-radius--tile);border:var(--_nys-checkbox-border-width--tile) solid var(--_nys-checkbox-border-color--tile);background:var(--_nys-checkbox-background-color--tile);padding:var(--_nys-checkbox-padding--y--tile) var(--_nys-checkbox-padding--x--tile);gap:var(--_nys-checkbox-gap)}.nys-checkbox__checkboxwrapper{position:relative;display:flex;justify-content:center;align-items:center;max-height:var(--_nys-checkbox-size)}.nys-checkbox__icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;color:#fff}.nys-checkbox__checkbox{appearance:none;background-repeat:no-repeat;background-position:center;width:var(--_nys-checkbox-size);min-width:var(--_nys-checkbox-size);min-height:var(--_nys-checkbox-size);height:var(--_nys-checkbox-size);max-width:var(--_nys-checkbox-size);max-height:var(--_nys-checkbox-size);border:solid var(--_nys-checkbox-border-width) var(--_nys-checkbox-border-color);background-color:var(--_nys-checkbox-background-color);border-radius:var(--_nys-checkbox-border-radius);outline-offset:var(--_nys-checkbox-outline-offset);outline:none}.nys-checkbox:hover,.nys-checkbox:hover *{cursor:pointer}.nys-checkbox__checkbox:not(:disabled):checked{background-color:var(--_nys-checkbox-background-color--checked);border-color:var(--_nys-checkbox-border-color--checked)}:host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:not(:disabled):checked){border-color:var(--_nys-checkbox-border-color--tile--checked);background-color:var(--_nys-checkbox-background-color--tile--checked)}.nys-checkbox__checkbox:disabled:checked{background-color:var(--_nys-checkbox-background-color--checked--disabled);border-color:var(--_nys-checkbox-border-color--checked--disabled)}:host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:disabled:checked){border-color:var(--_nys-checkbox-border-color--tile--disabled);background-color:var(--_nys-checkbox-background-color--tile--disabled)}.nys-checkbox__checkbox:disabled{background-color:var(--_nys-checkbox-background-color--disabled);border-color:var(--_nys-checkbox-border-color--disabled);cursor:not-allowed}.nys-checkbox:has(.nys-checkbox__checkbox:disabled) *{color:var(--_nys-checkbox-color--disabled);cursor:not-allowed;--_nys-label-cursor: not-allowed;--_nys-label-color: var(--_nys-checkbox-color--disabled)}:host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:disabled){background-color:var(--_nys-checkbox-background-color--disabled);border-color:var(--_nys-checkbox-border-color--disabled);cursor:not-allowed}.nys-checkbox__checkbox:hover:not(:disabled):not(:checked){background-color:var(--_nys-checkbox-background-color--hover);border-color:var(--_nys-checkbox-border-color--hover)}:host([tile]) .nys-checkbox:hover:has(.nys-checkbox__checkbox:not(:disabled):not(:checked)){border-color:var(--_nys-checkbox-border-color--tile--hover);background-color:var(--_nys-checkbox-background-color--tile--hover);outline:solid var(--_nys-checkbox-border-width--tile) var(--_nys-checkbox-border-color--tile--hover)}.nys-checkbox__checkbox:hover:not(:disabled):checked{border-color:var(--_nys-checkbox-border-color--checked--hover);background-color:var(--_nys-checkbox-background-color--checked--hover)}:host([tile]) .nys-checkbox:hover:has(.nys-checkbox__checkbox:not(:disabled):checked){outline:solid var(--_nys-checkbox-border-width--tile) var(--_nys-checkbox-border-color--tile--checked)}.nys-checkbox__checkbox:active:not(:disabled):not(:checked){background-color:var(--_nys-checkbox-background-color--active);border-color:var(--_nys-checkbox-border-color--active)}:host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:active:not(:disabled):not(:checked)){border-color:var(--_nys-checkbox-border-color--tile--active);background-color:var(--_nys-checkbox-background-color--tile--active);outline:solid var(--_nys-checkbox-border-width--tile) var(--_nys-checkbox-border-color--tile--active)}.nys-checkbox__checkbox:active:not(:disabled):checked{border-color:var(--_nys-checkbox-border-color--checked--active);background-color:var(--_nys-checkbox-background-color--checked--active)}:host(:not([tile])) .nys-checkbox__checkbox:focus{outline:solid var(--_nys-checkbox-outline-width) var(--_nys-checkbox-outline-color)}:host([tile]) .nys-checkbox:has(*:focus){outline:solid var(--_nys-checkbox-border-width--tile) var(--_nys-checkbox-outline-color)!important;border-color:var(--_nys-checkbox-outline-color)!important}:host(:not([tile])) .nys-checkbox>nys-label{--_nys-label-font-weight: var(--_nys-checkbox-font-weight)}:host([tile]) .nys-checkbox>nys-label{--_nys-description-font-style: normal}.nys-checkbox__required{color:var(--nys-color-danger, #b52c2c)}.nys-checkbox__requiredwrapper{display:flex;gap:3px}fieldset{all:unset;display:contents}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}';
5
+ var m = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (y, e, o, r) => {
6
+ for (var s = r > 1 ? void 0 : r ? w(e, o) : e, h = y.length - 1, c; h >= 0; h--)
7
+ (c = y[h]) && (s = (r ? c(e, o, s) : c(s)) || s);
8
+ return r && s && m(e, o, s), s;
327
9
  };
328
- class O {
329
- constructor({ strings: e, _$litType$: t }, s) {
330
- let o;
331
- this.parts = [];
332
- let i = 0, c = 0;
333
- const h = e.length - 1, n = this.parts, [d, u] = Ce(e, t);
334
- if (this.el = O.createElement(d, s), A.currentNode = this.el.content, t === 2 || t === 3) {
335
- const l = this.el.content.firstChild;
336
- l.replaceWith(...l.childNodes);
337
- }
338
- for (; (o = A.nextNode()) !== null && n.length < h; ) {
339
- if (o.nodeType === 1) {
340
- if (o.hasAttributes()) for (const l of o.getAttributeNames()) if (l.endsWith(ce)) {
341
- const f = u[c++], g = o.getAttribute(l).split(m), T = /([.?@])?(.*)/.exec(f);
342
- n.push({ type: 1, index: i, name: T[2], strings: g, ctor: T[1] === "." ? qe : T[1] === "?" ? Me : T[1] === "@" ? ze : L }), o.removeAttribute(l);
343
- } else l.startsWith(m) && (n.push({ type: 6, index: i }), o.removeAttribute(l));
344
- if (he.test(o.tagName)) {
345
- const l = o.textContent.split(m), f = l.length - 1;
346
- if (f > 0) {
347
- o.textContent = H ? H.emptyScript : "";
348
- for (let g = 0; g < f; g++) o.append(l[g], D()), A.nextNode(), n.push({ type: 2, index: ++i });
349
- o.append(l[f], D());
350
- }
351
- }
352
- } else if (o.nodeType === 8) if (o.data === ne) n.push({ type: 2, index: i });
353
- else {
354
- let l = -1;
355
- for (; (l = o.data.indexOf(m, l + 1)) !== -1; ) n.push({ type: 7, index: i }), l += m.length - 1;
356
- }
357
- i++;
358
- }
359
- }
360
- static createElement(e, t) {
361
- const s = E.createElement("template");
362
- return s.innerHTML = e, s;
363
- }
364
- }
365
- function w(r, e, t = r, s) {
366
- if (e === z) return e;
367
- let o = s !== void 0 ? t._$Co?.[s] : t._$Cl;
368
- const i = M(e) ? void 0 : e._$litDirective$;
369
- return o?.constructor !== i && (o?._$AO?.(!1), i === void 0 ? o = void 0 : (o = new i(r), o._$AT(r, t, s)), s !== void 0 ? (t._$Co ??= [])[s] = o : t._$Cl = o), o !== void 0 && (e = w(r, o._$AS(r, e.values), o, s)), e;
370
- }
371
- class Pe {
372
- constructor(e, t) {
373
- this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = t;
374
- }
375
- get parentNode() {
376
- return this._$AM.parentNode;
377
- }
378
- get _$AU() {
379
- return this._$AM._$AU;
380
- }
381
- u(e) {
382
- const { el: { content: t }, parts: s } = this._$AD, o = (e?.creationScope ?? E).importNode(t, !0);
383
- A.currentNode = o;
384
- let i = A.nextNode(), c = 0, h = 0, n = s[0];
385
- for (; n !== void 0; ) {
386
- if (c === n.index) {
387
- let d;
388
- n.type === 2 ? d = new V(i, i.nextSibling, this, e) : n.type === 1 ? d = new n.ctor(i, n.name, n.strings, this, e) : n.type === 6 && (d = new Oe(i, this, e)), this._$AV.push(d), n = s[++h];
389
- }
390
- c !== n?.index && (i = A.nextNode(), c++);
391
- }
392
- return A.currentNode = E, o;
393
- }
394
- p(e) {
395
- let t = 0;
396
- for (const s of this._$AV) s !== void 0 && (s.strings !== void 0 ? (s._$AI(e, s, t), t += s.strings.length - 2) : s._$AI(e[t])), t++;
397
- }
398
- }
399
- class V {
400
- get _$AU() {
401
- return this._$AM?._$AU ?? this._$Cv;
402
- }
403
- constructor(e, t, s, o) {
404
- this.type = 2, this._$AH = b, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = s, this.options = o, this._$Cv = o?.isConnected ?? !0;
405
- }
406
- get parentNode() {
407
- let e = this._$AA.parentNode;
408
- const t = this._$AM;
409
- return t !== void 0 && e?.nodeType === 11 && (e = t.parentNode), e;
410
- }
411
- get startNode() {
412
- return this._$AA;
413
- }
414
- get endNode() {
415
- return this._$AB;
416
- }
417
- _$AI(e, t = this) {
418
- e = w(this, e, t), M(e) ? e === b || e == null || e === "" ? (this._$AH !== b && this._$AR(), this._$AH = b) : e !== this._$AH && e !== z && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Se(e) ? this.k(e) : this._(e);
419
- }
420
- O(e) {
421
- return this._$AA.parentNode.insertBefore(e, this._$AB);
422
- }
423
- T(e) {
424
- this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
425
- }
426
- _(e) {
427
- this._$AH !== b && M(this._$AH) ? this._$AA.nextSibling.data = e : this.T(E.createTextNode(e)), this._$AH = e;
428
- }
429
- $(e) {
430
- const { values: t, _$litType$: s } = e, o = typeof s == "number" ? this._$AC(e) : (s.el === void 0 && (s.el = O.createElement(ae(s.h, s.h[0]), this.options)), s);
431
- if (this._$AH?._$AD === o) this._$AH.p(t);
432
- else {
433
- const i = new Pe(o, this), c = i.u(this.options);
434
- i.p(t), this.T(c), this._$AH = i;
435
- }
436
- }
437
- _$AC(e) {
438
- let t = oe.get(e.strings);
439
- return t === void 0 && oe.set(e.strings, t = new O(e)), t;
440
- }
441
- k(e) {
442
- Z(this._$AH) || (this._$AH = [], this._$AR());
443
- const t = this._$AH;
444
- let s, o = 0;
445
- for (const i of e) o === t.length ? t.push(s = new V(this.O(D()), this.O(D()), this, this.options)) : s = t[o], s._$AI(i), o++;
446
- o < t.length && (this._$AR(s && s._$AB.nextSibling, o), t.length = o);
447
- }
448
- _$AR(e = this._$AA.nextSibling, t) {
449
- for (this._$AP?.(!1, !0, t); e !== this._$AB; ) {
450
- const s = e.nextSibling;
451
- e.remove(), e = s;
452
- }
453
- }
454
- setConnected(e) {
455
- this._$AM === void 0 && (this._$Cv = e, this._$AP?.(e));
456
- }
457
- }
458
- class L {
459
- get tagName() {
460
- return this.element.tagName;
461
- }
462
- get _$AU() {
463
- return this._$AM._$AU;
464
- }
465
- constructor(e, t, s, o, i) {
466
- this.type = 1, this._$AH = b, this._$AN = void 0, this.element = e, this.name = t, this._$AM = o, this.options = i, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = b;
467
- }
468
- _$AI(e, t = this, s, o) {
469
- const i = this.strings;
470
- let c = !1;
471
- if (i === void 0) e = w(this, e, t, 0), c = !M(e) || e !== this._$AH && e !== z, c && (this._$AH = e);
472
- else {
473
- const h = e;
474
- let n, d;
475
- for (e = i[0], n = 0; n < i.length - 1; n++) d = w(this, h[s + n], t, n), d === z && (d = this._$AH[n]), c ||= !M(d) || d !== this._$AH[n], d === b ? e = b : e !== b && (e += (d ?? "") + i[n + 1]), this._$AH[n] = d;
476
- }
477
- c && !o && this.j(e);
478
- }
479
- j(e) {
480
- e === b ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
481
- }
482
- }
483
- class qe extends L {
484
- constructor() {
485
- super(...arguments), this.type = 3;
486
- }
487
- j(e) {
488
- this.element[this.name] = e === b ? void 0 : e;
489
- }
490
- }
491
- class Me extends L {
492
- constructor() {
493
- super(...arguments), this.type = 4;
494
- }
495
- j(e) {
496
- this.element.toggleAttribute(this.name, !!e && e !== b);
497
- }
498
- }
499
- class ze extends L {
500
- constructor(e, t, s, o, i) {
501
- super(e, t, s, o, i), this.type = 5;
502
- }
503
- _$AI(e, t = this) {
504
- if ((e = w(this, e, t, 0) ?? b) === z) return;
505
- const s = this._$AH, o = e === b && s !== b || e.capture !== s.capture || e.once !== s.once || e.passive !== s.passive, i = e !== b && (s === b || o);
506
- o && this.element.removeEventListener(this.name, this, s), i && this.element.addEventListener(this.name, this, e), this._$AH = e;
507
- }
508
- handleEvent(e) {
509
- typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, e) : this._$AH.handleEvent(e);
510
- }
511
- }
512
- class Oe {
513
- constructor(e, t, s) {
514
- this.element = e, this.type = 6, this._$AN = void 0, this._$AM = t, this.options = s;
515
- }
516
- get _$AU() {
517
- return this._$AM._$AU;
518
- }
519
- _$AI(e) {
520
- w(this, e);
521
- }
522
- }
523
- const Te = W.litHtmlPolyfillSupport;
524
- Te?.(O, V), (W.litHtmlVersions ??= []).push("3.3.1");
525
- /**
526
- * @license
527
- * Copyright 2018 Google LLC
528
- * SPDX-License-Identifier: BSD-3-Clause
529
- */
530
- const U = (r) => r ?? b, le = de`
531
- :host {
532
- /* Anything that can be overridden should be defined here */
533
-
534
- /* Global Checkbox Styles */
535
- --_nys-checkbox-size: var(--nys-size-400, 32px);
536
- --_nys-checkbox-border-radius: var(--nys-radius-md, 4px);
537
- --_nys-checkbox-border-width: var(--nys-border-width-md, 2px);
538
- --_nys-checkbox-outline-color: var(--nys-color-focus, #004dd1);
539
- --_nys-checkbox-outline-width: var(--nys-border-width-md, 2px);
540
- --_nys-checkbox-outline-offset: var(--nys-space-2px, 2px);
541
- /* space between checkbox and it's label */
542
- --_nys-checkbox-gap: var(--nys-space-150, 12px);
543
- /* space between checkboxes */
544
- --_nys-checkboxgroup-gap: var(--nys-space-200, 16px);
545
-
546
- /* Typography */
547
- --_nys-checkbox-font-family: var(
548
- --nys-font-family-ui,
549
- var(
550
- --nys-font-family-sans,
551
- "Proxima Nova",
552
- "Helvetica Neue",
553
- "Helvetica",
554
- "Arial",
555
- sans-serif
556
- )
557
- );
558
- --_nys-checkbox-font-size: var(--nys-font-size-ui-md, 16px);
559
- --_nys-checkbox-font-weight: var(--nys-font-weight-regular, 400);
560
- --_nys-checkbox-line-height: var(--nys-font-lineheight-ui-md, 24px);
561
-
562
- /* Global Checkbox Colors */
563
- --_nys-checkbox-color: var(
564
- --nys-color-ink,
565
- var(--nys-color-neutral-900, #1b1b1b)
566
- );
567
-
568
- /* Default (Empty) */
569
- --_nys-checkbox-background-color: var(--nys-color-ink-reverse, #ffffff);
570
- --_nys-checkbox-border-color: var(--nys-color-neutral-600, #62666a);
571
- /* Empty + Hovered */
572
- --_nys-checkbox-background-color--hover: var(
573
- --nys-color-neutral-50,
574
- #ededed
575
- );
576
- --_nys-checkbox-border-color--hover: var(--nys-color-ink, #1b1b1b);
577
- /* Empty + Pressed */
578
- --_nys-checkbox-background-color--active: var(
579
- --nys-color-neutral-100,
580
- #d0d0ce
581
- );
582
- --_nys-checkbox-border-color--active: var(--nys-color-ink, #1b1b1b);
583
- /* Checked */
584
- --_nys-checkbox-background-color--checked: var(--nys-color-theme, #154973);
585
- --_nys-checkbox-border-color--checked: var(--nys-color-theme, #154973);
586
- /* Checked + Hovered */
587
- --_nys-checkbox-background-color--checked--hover: var(
588
- --nys-color-theme-strong,
589
- #0e324f
590
- );
591
- --_nys-checkbox-border-color--checked--hover: var(
592
- --nys-color-theme-strong,
593
- #0e324f
594
- );
595
- /* Checked + Pressed */
596
- --_nys-checkbox-background-color--checked--active: var(
597
- --nys-color-theme-stronger,
598
- #081b2b
599
- );
600
- --_nys-checkbox-border-color--checked--active: var(
601
- --nys-color-theme-stronger,
602
- #081b2b
603
- );
604
- /* Disabled */
605
- --_nys-checkbox-background-color--disabled: var(
606
- --nys-color-ink-reverse,
607
- #f0f0f0
608
- );
609
- --_nys-checkbox-border-color--disabled: var(
610
- --nys-color-neutral-400,
611
- #757575
612
- );
613
- --_nys-checkbox-color--disabled: var(--nys-color-text-disabled, #bec0c1);
614
- /* Disabled Checked */
615
- --_nys-checkbox-background-color--checked--disabled: var(
616
- --nys-color-neutral-100,
617
- #d0d0ce
618
- );
619
- --_nys-checkbox-border-color--checked--disabled: var(
620
- --nys-color-neutral-100,
621
- #d0d0ce
622
- );
623
- }
624
-
625
- /* Small Variant */
626
- :host([size="sm"]) {
627
- --_nys-checkbox-size: var(--nys-size-300, 24px);
628
- --_nys-checkbox-border-radius: var(--nys-radius-sm, 2px);
629
- --_nys-checkboxgroup-gap: var(--nys-space-100, 8px);
630
- --_nys-checkbox-gap: var(--nys-space-100, 8px);
631
- }
632
- /* Medium Variant */
633
- :host([size="md"]) {
634
- --_nys-checkbox-size: var(--nys-size-400, 32px);
635
- --_nys-checkbox-border-radius: var(--nys-radius-md, 4px);
636
- }
637
-
638
- /* Tile Variant */
639
- :host([tile]) {
640
- --_nys-checkbox-border-width--tile: var(--nys-border-width-sm, 1px);
641
- --_nys-checkbox-border-radius--tile: var(--nys-radius-md, 4px);
642
- --_nys-checkbox-border-color--tile: var(--nys-color-neutral-100, #d0d0ce);
643
- --_nys-checkbox-background-color--tile: var(
644
- --nys-color-ink-reverse,
645
- #ffffff
646
- );
647
- --_nys-checkbox-padding--x--tile: var(--nys-space-250, 20px);
648
- --_nys-checkbox-padding--y--tile: var(--nys-space-200, 16px);
649
- /* Hover */
650
- --_nys-checkbox-border-color--tile--hover: var(
651
- --nys-color-neutral-700,
652
- #4a4d4f
653
- );
654
- --_nys-checkbox-background-color--tile--hover: var(
655
- --nys-color-ink-reverse,
656
- #ffffff
657
- );
658
- /* Pressed */
659
- --_nys-checkbox-border-color--tile--active: var(
660
- --nys-color-neutral-900,
661
- #1b1b1b
662
- );
663
- --_nys-checkbox-background-color--tile--active: var(
664
- --nys-color-ink-reverse,
665
- #ffffff
666
- );
667
- /* Checked */
668
- --_nys-checkbox-border-color--tile--checked: var(
669
- --nys-color-theme-mid,
670
- #457aa5
671
- );
672
- --_nys-checkbox-background-color--tile--checked: var(
673
- --nys-color-theme-faint,
674
- #f7fafd
675
- );
676
- /* Disabled */
677
- --_nys-checkbox-background-color--tile--disabled: var(
678
- --nys-color-ink-reverse,
679
- #f0f0f0
680
- );
681
- --_nys-checkbox-border-color--tile--disabled: var(
682
- --nys-color-neutral-100,
683
- #d0d0ce
684
- );
685
- }
686
-
687
- :host([tile][size="sm"]) {
688
- --_nys-checkbox-padding--x--tile: var(--nys-space-200, 16px);
689
- --_nys-checkbox-padding--y--tile: var(--nys-space-150, 12px);
690
- }
691
-
692
- :host([tile][showError]) {
693
- --_nys-checkbox-border-color--tile: var(--nys-color-danger, #b52c2c);
694
- --_nys-checkbox-border-color--tile--hover: var(--nys-color-danger, #b52c2c);
695
- --_nys-checkbox-border-color--tile--active: var(
696
- --nys-color-danger,
697
- #b52c2c
698
- );
699
- --_nys-checkbox-border-color--tile--checked: var(
700
- --nys-color-danger,
701
- #b52c2c
702
- );
703
- }
704
-
705
- #single-error-message {
706
- --_nys-errormessage-margin-top: var(--nys-space-50, 4px);
707
- }
708
-
709
- .nys-checkboxgroup {
710
- display: flex;
711
- flex-direction: column;
712
- gap: var(--nys-space-200, 16px);
713
- font-family: var(--_nys-checkbox-font-family);
714
- font-size: var(--_nys-checkbox-font-size);
715
- line-height: var(--_nys-checkbox-line-height);
716
- }
717
-
718
- .nys-checkboxgroup__content {
719
- display: flex;
720
- flex-direction: column;
721
- gap: var(--_nys-checkboxgroup-gap);
722
- }
723
-
724
- .nys-checkbox {
725
- display: flex;
726
- font-family: var(--_nys-checkbox-font-family);
727
- font-size: var(--_nys-checkbox-font-size);
728
- line-height: var(--_nys-checkbox-line-height);
729
-
730
- /* Tile */
731
- border-radius: var(--_nys-checkbox-border-radius--tile);
732
- border: var(--_nys-checkbox-border-width--tile) solid
733
- var(--_nys-checkbox-border-color--tile);
734
- background: var(--_nys-checkbox-background-color--tile);
735
- padding: var(--_nys-checkbox-padding--y--tile)
736
- var(--_nys-checkbox-padding--x--tile);
737
- gap: var(--_nys-checkbox-gap);
738
- }
739
-
740
- /* wraps the native checkbox and it's icon */
741
- .nys-checkbox__checkboxwrapper {
742
- position: relative;
743
- display: flex;
744
- justify-content: center;
745
- align-items: center;
746
- max-height: var(--_nys-checkbox-size);
747
- }
748
-
749
- .nys-checkbox__icon {
750
- position: absolute;
751
- top: 50%;
752
- left: 50%;
753
- transform: translate(-50%, -50%); /* Centering the icon visually */
754
- pointer-events: none;
755
- color: white;
756
- }
757
-
758
- .nys-checkbox__checkbox {
759
- appearance: none;
760
- background-repeat: no-repeat;
761
- background-position: center;
762
- width: var(--_nys-checkbox-size);
763
- min-width: var(--_nys-checkbox-size);
764
- min-height: var(--_nys-checkbox-size);
765
- height: var(--_nys-checkbox-size);
766
- max-width: var(--_nys-checkbox-size);
767
- max-height: var(--_nys-checkbox-size);
768
- border: solid var(--_nys-checkbox-border-width)
769
- var(--_nys-checkbox-border-color);
770
- background-color: var(--_nys-checkbox-background-color);
771
- border-radius: var(--_nys-checkbox-border-radius);
772
- outline-offset: var(--_nys-checkbox-outline-offset);
773
- outline: none;
774
- }
775
-
776
- /* Pointer cursor for unchecked checkbox */
777
- .nys-checkbox:hover,
778
- .nys-checkbox:hover * {
779
- cursor: pointer;
780
- }
781
-
782
- /* Checked */
783
- .nys-checkbox__checkbox:not(:disabled):checked {
784
- background-color: var(--_nys-checkbox-background-color--checked);
785
- border-color: var(--_nys-checkbox-border-color--checked);
786
- }
787
- :host([tile])
788
- .nys-checkbox:has(.nys-checkbox__checkbox:not(:disabled):checked) {
789
- border-color: var(--_nys-checkbox-border-color--tile--checked);
790
- background-color: var(--_nys-checkbox-background-color--tile--checked);
791
- }
792
-
793
- /* Checked + Disabled */
794
- .nys-checkbox__checkbox:disabled:checked {
795
- background-color: var(--_nys-checkbox-background-color--checked--disabled);
796
- border-color: var(--_nys-checkbox-border-color--checked--disabled);
797
- }
798
- :host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:disabled:checked) {
799
- border-color: var(--_nys-checkbox-border-color--tile--disabled);
800
- background-color: var(--_nys-checkbox-background-color--tile--disabled);
801
- }
802
-
803
- /* Disabled */
804
- .nys-checkbox__checkbox:disabled {
805
- background-color: var(--_nys-checkbox-background-color--disabled);
806
- border-color: var(--_nys-checkbox-border-color--disabled);
807
- cursor: not-allowed;
808
- }
809
- .nys-checkbox:has(.nys-checkbox__checkbox:disabled) * {
810
- color: var(--_nys-checkbox-color--disabled);
811
- cursor: not-allowed;
812
- --_nys-label-cursor: not-allowed;
813
- --_nys-label-color: var(--_nys-checkbox-color--disabled);
814
- }
815
- :host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:disabled) {
816
- background-color: var(--_nys-checkbox-background-color--disabled);
817
- border-color: var(--_nys-checkbox-border-color--disabled);
818
- cursor: not-allowed;
819
- }
820
-
821
- /* Hover - not checked */
822
- .nys-checkbox__checkbox:hover:not(:disabled):not(:checked) {
823
- background-color: var(--_nys-checkbox-background-color--hover);
824
- border-color: var(--_nys-checkbox-border-color--hover);
825
- }
826
- :host([tile])
827
- .nys-checkbox:hover:has(
828
- .nys-checkbox__checkbox:not(:disabled):not(:checked)
829
- ) {
830
- border-color: var(--_nys-checkbox-border-color--tile--hover);
831
- background-color: var(--_nys-checkbox-background-color--tile--hover);
832
- outline: solid var(--_nys-checkbox-border-width--tile)
833
- var(--_nys-checkbox-border-color--tile--hover);
834
- }
835
-
836
- /* Hover + Checked */
837
- .nys-checkbox__checkbox:hover:not(:disabled):checked {
838
- border-color: var(--_nys-checkbox-border-color--checked--hover);
839
- background-color: var(--_nys-checkbox-background-color--checked--hover);
840
- }
841
- :host([tile])
842
- .nys-checkbox:hover:has(.nys-checkbox__checkbox:not(:disabled):checked) {
843
- outline: solid var(--_nys-checkbox-border-width--tile)
844
- var(--_nys-checkbox-border-color--tile--checked);
845
- }
846
-
847
- /* Pressed - not checked */
848
- .nys-checkbox__checkbox:active:not(:disabled):not(:checked) {
849
- background-color: var(--_nys-checkbox-background-color--active);
850
- border-color: var(--_nys-checkbox-border-color--active);
851
- }
852
- :host([tile])
853
- .nys-checkbox:has(
854
- .nys-checkbox__checkbox:active:not(:disabled):not(:checked)
855
- ) {
856
- border-color: var(--_nys-checkbox-border-color--tile--active);
857
- background-color: var(--_nys-checkbox-background-color--tile--active);
858
- outline: solid var(--_nys-checkbox-border-width--tile)
859
- var(--_nys-checkbox-border-color--tile--active);
860
- }
861
-
862
- /* Pressed + Checked */
863
- .nys-checkbox__checkbox:active:not(:disabled):checked {
864
- border-color: var(--_nys-checkbox-border-color--checked--active);
865
- background-color: var(--_nys-checkbox-background-color--checked--active);
866
- }
867
-
868
- /* Focused */
869
- :host(:not([tile])) .nys-checkbox__checkbox:focus {
870
- outline: solid var(--_nys-checkbox-outline-width)
871
- var(--_nys-checkbox-outline-color);
872
- }
873
- :host([tile]) .nys-checkbox:has(*:focus) {
874
- outline: solid var(--_nys-checkbox-border-width--tile)
875
- var(--_nys-checkbox-outline-color) !important;
876
- border-color: var(--_nys-checkbox-outline-color) !important;
877
- }
878
-
879
- :host(:not([tile])) .nys-checkbox > nys-label {
880
- --_nys-label-font-weight: var(--_nys-checkbox-font-weight);
881
- }
882
-
883
- :host([tile]) .nys-checkbox > nys-label {
884
- --_nys-description-font-style: normal;
885
- }
886
-
887
- /* Required */
888
- .nys-checkbox__required {
889
- color: var(--nys-color-danger, #b52c2c);
890
- }
891
-
892
- .nys-checkbox__requiredwrapper {
893
- display: flex;
894
- gap: 3px;
895
- }
896
-
897
- /* Screen readers ONLY */
898
- fieldset {
899
- all: unset;
900
- display: contents;
901
- }
902
-
903
- .sr-only {
904
- position: absolute;
905
- width: 1px;
906
- height: 1px;
907
- padding: 0;
908
- margin: -1px;
909
- overflow: hidden;
910
- border: 0;
911
- }
912
- `;
913
- var Ue = Object.defineProperty, Ie = Object.getOwnPropertyDescriptor, k = (r, e, t, s) => {
914
- for (var o = s > 1 ? void 0 : s ? Ie(e, t) : e, i = r.length - 1, c; i >= 0; i--)
915
- (c = r[i]) && (o = (s ? c(e, t, o) : c(o)) || o);
916
- return s && o && Ue(e, t, o), o;
917
- };
918
- let Re = 0;
919
- var v;
920
- const y = (v = class extends re {
10
+ let E = 0;
11
+ var d;
12
+ const n = (d = class extends p {
921
13
  // allows use of elementInternals' API
922
14
  constructor() {
923
15
  super(), this.id = "", this.name = "", this.required = !1, this.optional = !1, this.showError = !1, this.errorMessage = "", this.label = "", this.description = "", this.tile = !1, this._tooltip = "", this.inverted = !1, this.form = null, this._slottedDescriptionText = "", this._size = "md", this._internals = this.attachInternals();
@@ -926,13 +18,13 @@ const y = (v = class extends re {
926
18
  return this._size;
927
19
  }
928
20
  set size(e) {
929
- this._size = v.VALID_SIZES.includes(
21
+ this._size = d.VALID_SIZES.includes(
930
22
  e
931
23
  ) ? e : "md";
932
24
  }
933
25
  // Generate a unique ID if one is not provided
934
26
  connectedCallback() {
935
- super.connectedCallback(), this.id || (this.id = `nys-checkbox-${Date.now()}-${Re++}`), this.addEventListener("nys-change", this._handleCheckboxChange), this.addEventListener("invalid", this._handleInvalid);
27
+ super.connectedCallback(), this.id || (this.id = `nys-checkbox-${Date.now()}-${E++}`), this.addEventListener("nys-change", this._handleCheckboxChange), this.addEventListener("invalid", this._handleInvalid);
936
28
  }
937
29
  disconnectedCallback() {
938
30
  super.disconnectedCallback(), this.removeEventListener("nys-change", this._handleCheckboxChange), this.removeEventListener("invalid", this._handleInvalid);
@@ -945,94 +37,94 @@ const y = (v = class extends re {
945
37
  }
946
38
  /********************** Functions **********************/
947
39
  _setGroupExist() {
948
- this.querySelectorAll("nys-checkbox").forEach((t) => {
949
- t.groupExist = !0;
40
+ this.querySelectorAll("nys-checkbox").forEach((o) => {
41
+ o.groupExist = !0;
950
42
  });
951
43
  }
952
44
  // Initial update on checkbox required attribute
953
45
  async _setupCheckboxRequired() {
954
- const e = this.querySelector("nys-checkbox"), t = this.errorMessage || "This field is required", s = e ? await e.getInputElement() : null;
46
+ const e = this.querySelector("nys-checkbox"), o = this.errorMessage || "This field is required", r = e ? await e.getInputElement() : null;
955
47
  this._internals.setValidity(
956
48
  { valueMissing: !0 },
957
- t,
958
- s || this
49
+ o,
50
+ r || this
959
51
  );
960
52
  }
961
53
  // Updates the required attribute of each checkbox in the group
962
54
  async _manageRequire() {
963
55
  if (this.required) {
964
- const e = this.errorMessage || "Please select at least one option.", t = this.querySelector("nys-checkbox"), s = t ? await t.getInputElement().catch(() => null) : null, o = this.querySelectorAll("nys-checkbox");
965
- Array.from(o).some(
56
+ const e = this.errorMessage || "Please select at least one option.", o = this.querySelector("nys-checkbox"), r = o ? await o.getInputElement().catch(() => null) : null, s = this.querySelectorAll("nys-checkbox");
57
+ Array.from(s).some(
966
58
  (c) => c.checked
967
59
  ) ? (this._internals.setValidity({}), this.showError = !1) : (this._internals.setValidity(
968
60
  { valueMissing: !0 },
969
61
  e,
970
- s || this
62
+ r || this
971
63
  ), this.showError = !0);
972
64
  }
973
65
  }
974
66
  // Updates the size of each checkbox in the group
975
67
  _updateCheckboxSize() {
976
- this.querySelectorAll("nys-checkbox").forEach((t) => {
977
- t.setAttribute("size", this.size);
68
+ this.querySelectorAll("nys-checkbox").forEach((o) => {
69
+ o.setAttribute("size", this.size);
978
70
  });
979
71
  }
980
72
  _updateCheckboxTile() {
981
- this.querySelectorAll("nys-checkbox").forEach((t) => {
982
- this.tile ? t.toggleAttribute("tile", !0) : t.removeAttribute("tile");
73
+ this.querySelectorAll("nys-checkbox").forEach((o) => {
74
+ this.tile ? o.toggleAttribute("tile", !0) : o.removeAttribute("tile");
983
75
  });
984
76
  }
985
77
  _updateCheckboxInvert() {
986
- this.querySelectorAll("nys-checkbox").forEach((t) => {
987
- this.inverted ? t.toggleAttribute("inverted", !0) : t.removeAttribute("inverted");
78
+ this.querySelectorAll("nys-checkbox").forEach((o) => {
79
+ this.inverted ? o.toggleAttribute("inverted", !0) : o.removeAttribute("inverted");
988
80
  });
989
81
  }
990
82
  _updateCheckboxShowError() {
991
- this.querySelectorAll("nys-checkbox").forEach((t) => {
992
- this.showError ? t.setAttribute("showError", "") : t.removeAttribute("showError");
83
+ this.querySelectorAll("nys-checkbox").forEach((o) => {
84
+ this.showError ? o.setAttribute("showError", "") : o.removeAttribute("showError");
993
85
  });
994
86
  }
995
87
  _updateCheckboxForm() {
996
- this.querySelectorAll("nys-checkbox").forEach((t) => {
997
- this.showError && this.form !== null ? t.setAttribute("form", this.form) : t.removeAttribute("form");
88
+ this.querySelectorAll("nys-checkbox").forEach((o) => {
89
+ this.showError && this.form !== null ? o.setAttribute("form", this.form) : o.removeAttribute("form");
998
90
  });
999
91
  }
1000
92
  // Get the slotted text contents so native VO can attempt to announce it within the legend in the fieldset
1001
93
  _getSlotDescriptionForAria() {
1002
- const t = this.shadowRoot?.querySelector(
94
+ const o = this.shadowRoot?.querySelector(
1003
95
  'slot[name="description"]'
1004
96
  )?.assignedNodes({ flatten: !0 }) || [];
1005
- this._slottedDescriptionText = t.map((s) => s.textContent?.trim()).filter(Boolean).join(", ");
97
+ this._slottedDescriptionText = o.map((r) => r.textContent?.trim()).filter(Boolean).join(", ");
1006
98
  }
1007
99
  async _handleInvalid(e) {
1008
100
  e.preventDefault(), this.showError = !0, this._manageRequire();
1009
- const t = this.querySelector("nys-checkbox"), s = t ? await t.getInputElement() : null;
1010
- if (s) {
1011
- const o = this._internals.form;
1012
- o ? Array.from(o.elements).find((h) => {
1013
- if (h.tagName.toLowerCase() === "nys-checkboxgroup") {
101
+ const o = this.querySelector("nys-checkbox"), r = o ? await o.getInputElement() : null;
102
+ if (r) {
103
+ const s = this._internals.form;
104
+ s ? Array.from(s.elements).find((u) => {
105
+ if (u.tagName.toLowerCase() === "nys-checkboxgroup") {
1014
106
  if (Array.from(
1015
107
  this.querySelectorAll("nys-checkbox")
1016
108
  ).filter(
1017
- (u) => u.checked
109
+ (f) => f.checked
1018
110
  ).length === 0)
1019
- return h;
111
+ return u;
1020
112
  } else
1021
- return typeof h.checkValidity == "function" && !h.checkValidity();
1022
- }) === this && s.focus() : s.focus();
113
+ return typeof u.checkValidity == "function" && !u.checkValidity();
114
+ }) === this && r.focus() : r.focus();
1023
115
  }
1024
116
  }
1025
117
  /******************** Event Handlers ********************/
1026
118
  // Similar to how native forms handle multiple same-name fields, we group the selected values into a list for FormData.
1027
119
  _handleCheckboxChange(e) {
1028
- const t = e, { name: s } = t.detail, i = Array.from(this.querySelectorAll("nys-checkbox")).filter((c) => c.checked).map((c) => c.value);
1029
- this.name = s, this._internals.setFormValue(i.join(", ")), this._manageRequire();
120
+ const o = e, { name: r } = o.detail, h = Array.from(this.querySelectorAll("nys-checkbox")).filter((c) => c.checked).map((c) => c.value);
121
+ this.name = r, this._internals.setFormValue(h.join(", ")), this._manageRequire();
1030
122
  }
1031
123
  render() {
1032
- return P`
124
+ return k`
1033
125
  <div class="nys-checkboxgroup">
1034
126
  <nys-label
1035
- for=${this.id}
127
+ for=${this.id + "--native"}
1036
128
  label=${this.label}
1037
129
  description=${this.description}
1038
130
  flag=${this.required ? "required" : this.optional ? "optional" : ""}
@@ -1057,71 +149,71 @@ const y = (v = class extends re {
1057
149
  </div>
1058
150
  `;
1059
151
  }
1060
- }, v.VALID_SIZES = ["sm", "md"], v.styles = le, v.formAssociated = !0, v);
1061
- k([
1062
- a({ type: String })
1063
- ], y.prototype, "id", 2);
1064
- k([
1065
- a({ type: String, reflect: !0 })
1066
- ], y.prototype, "name", 2);
1067
- k([
1068
- a({ type: Boolean, reflect: !0 })
1069
- ], y.prototype, "required", 2);
1070
- k([
1071
- a({ type: Boolean, reflect: !0 })
1072
- ], y.prototype, "optional", 2);
1073
- k([
1074
- a({ type: Boolean, reflect: !0 })
1075
- ], y.prototype, "showError", 2);
1076
- k([
1077
- a({ type: String })
1078
- ], y.prototype, "errorMessage", 2);
1079
- k([
1080
- a({ type: String })
1081
- ], y.prototype, "label", 2);
1082
- k([
1083
- a({ type: String })
1084
- ], y.prototype, "description", 2);
1085
- k([
1086
- a({ type: Boolean, reflect: !0 })
1087
- ], y.prototype, "tile", 2);
1088
- k([
1089
- a({ type: String })
1090
- ], y.prototype, "_tooltip", 2);
1091
- k([
1092
- a({ type: Boolean, reflect: !0 })
1093
- ], y.prototype, "inverted", 2);
1094
- k([
1095
- a({ type: String, reflect: !0 })
1096
- ], y.prototype, "form", 2);
1097
- k([
1098
- Ee()
1099
- ], y.prototype, "_slottedDescriptionText", 2);
1100
- k([
1101
- a({ reflect: !0 })
1102
- ], y.prototype, "size", 1);
1103
- let He = y;
1104
- customElements.get("nys-checkboxgroup") || customElements.define("nys-checkboxgroup", He);
1105
- var De = Object.defineProperty, Ne = Object.getOwnPropertyDescriptor, _ = (r, e, t, s) => {
1106
- for (var o = s > 1 ? void 0 : s ? Ne(e, t) : e, i = r.length - 1, c; i >= 0; i--)
1107
- (c = r[i]) && (o = (s ? c(e, t, o) : c(o)) || o);
1108
- return s && o && De(e, t, o), o;
152
+ }, d.styles = v(_), d.VALID_SIZES = ["sm", "md"], d.formAssociated = !0, d);
153
+ a([
154
+ t({ type: String, reflect: !0 })
155
+ ], n.prototype, "id", 2);
156
+ a([
157
+ t({ type: String, reflect: !0 })
158
+ ], n.prototype, "name", 2);
159
+ a([
160
+ t({ type: Boolean, reflect: !0 })
161
+ ], n.prototype, "required", 2);
162
+ a([
163
+ t({ type: Boolean, reflect: !0 })
164
+ ], n.prototype, "optional", 2);
165
+ a([
166
+ t({ type: Boolean, reflect: !0 })
167
+ ], n.prototype, "showError", 2);
168
+ a([
169
+ t({ type: String })
170
+ ], n.prototype, "errorMessage", 2);
171
+ a([
172
+ t({ type: String })
173
+ ], n.prototype, "label", 2);
174
+ a([
175
+ t({ type: String })
176
+ ], n.prototype, "description", 2);
177
+ a([
178
+ t({ type: Boolean, reflect: !0 })
179
+ ], n.prototype, "tile", 2);
180
+ a([
181
+ t({ type: String })
182
+ ], n.prototype, "_tooltip", 2);
183
+ a([
184
+ t({ type: Boolean, reflect: !0 })
185
+ ], n.prototype, "inverted", 2);
186
+ a([
187
+ t({ type: String, reflect: !0 })
188
+ ], n.prototype, "form", 2);
189
+ a([
190
+ g()
191
+ ], n.prototype, "_slottedDescriptionText", 2);
192
+ a([
193
+ t({ reflect: !0 })
194
+ ], n.prototype, "size", 1);
195
+ let C = n;
196
+ customElements.get("nys-checkboxgroup") || customElements.define("nys-checkboxgroup", C);
197
+ var S = Object.defineProperty, q = Object.getOwnPropertyDescriptor, l = (y, e, o, r) => {
198
+ for (var s = r > 1 ? void 0 : r ? q(e, o) : e, h = y.length - 1, c; h >= 0; h--)
199
+ (c = y[h]) && (s = (r ? c(e, o, s) : c(s)) || s);
200
+ return r && s && S(e, o, s), s;
1109
201
  };
1110
- let Ve = 0;
1111
- var x;
1112
- const p = (x = class extends re {
202
+ let $ = 0;
203
+ var b;
204
+ const i = (b = class extends p {
1113
205
  // allows use of elementInternals' API
1114
206
  constructor() {
1115
207
  super(), this.checked = !1, this.disabled = !1, this.required = !1, this.label = "", this.description = "", this.id = "", this.name = "", this.value = "", this.form = null, this.showError = !1, this.errorMessage = "", this.groupExist = !1, this.tile = !1, this.inverted = !1, this._size = "md", this._manageLabelClick = () => {
1116
- const e = this.shadowRoot?.querySelector("nys-label"), t = this.shadowRoot?.querySelector("input");
1117
- e && t && e.addEventListener("click", () => t.click());
208
+ const e = this.shadowRoot?.querySelector("nys-label"), o = this.shadowRoot?.querySelector("input");
209
+ e && o && e.addEventListener("click", () => o.click());
1118
210
  }, this._internals = this.attachInternals();
1119
211
  }
1120
212
  get size() {
1121
213
  return this._size;
1122
214
  }
1123
215
  set size(e) {
1124
- this._size = x.VALID_SIZES.includes(
216
+ this._size = b.VALID_SIZES.includes(
1125
217
  e
1126
218
  ) ? e : "md";
1127
219
  }
@@ -1130,7 +222,7 @@ const p = (x = class extends re {
1130
222
  }
1131
223
  // Generate a unique ID if one is not provided
1132
224
  connectedCallback() {
1133
- super.connectedCallback(), this.id || (this.id = `nys-checkbox-${Date.now()}-${Ve++}`), this.addEventListener("invalid", this._handleInvalid);
225
+ super.connectedCallback(), this.id || (this.id = `nys-checkbox-${Date.now()}-${$++}`), this.addEventListener("invalid", this._handleInvalid);
1134
226
  }
1135
227
  disconnectedCallback() {
1136
228
  super.disconnectedCallback(), this.removeEventListener("invalid", this._handleInvalid);
@@ -1147,23 +239,23 @@ const p = (x = class extends re {
1147
239
  this.groupExist || this._internals.setFormValue(this.checked ? this.value : null);
1148
240
  }
1149
241
  _manageRequire() {
1150
- const e = this.shadowRoot?.querySelector("input"), t = this.errorMessage || "This field is required";
1151
- e && (this.required && !this.checked ? (this._internals.ariaRequired = "true", this._internals.setValidity({ valueMissing: !0 }, t, e)) : this._internals.setValidity({}));
242
+ const e = this.shadowRoot?.querySelector("input"), o = this.errorMessage || "This field is required";
243
+ e && (this.required && !this.checked ? (this._internals.ariaRequired = "true", this._internals.setValidity({ valueMissing: !0 }, o, e)) : this._internals.setValidity({}));
1152
244
  }
1153
245
  _setValidityMessage(e = "") {
1154
- const t = this.shadowRoot?.querySelector("input");
1155
- t && (this.showError = !!e, this.errorMessage?.trim() && e !== "" && (e = this.errorMessage), this._internals.setValidity(
246
+ const o = this.shadowRoot?.querySelector("input");
247
+ o && (this.showError = !!e, this.errorMessage?.trim() && e !== "" && (e = this.errorMessage), this._internals.setValidity(
1156
248
  e ? { customError: !0 } : {},
1157
249
  e,
1158
- t
250
+ o
1159
251
  ));
1160
252
  }
1161
253
  _validate() {
1162
254
  const e = this.shadowRoot?.querySelector("input");
1163
255
  if (!e) return;
1164
- const t = e.validity;
1165
- let s = "";
1166
- t.valueMissing && (s = "This field is required"), this._setValidityMessage(s);
256
+ const o = e.validity;
257
+ let r = "";
258
+ o.valueMissing && (r = "This field is required"), this._setValidityMessage(r);
1167
259
  }
1168
260
  /********************** Functions **********************/
1169
261
  // This helper function is called to perform the element's native validation.
@@ -1175,12 +267,12 @@ const p = (x = class extends re {
1175
267
  }
1176
268
  _handleInvalid(e) {
1177
269
  e.preventDefault(), this.showError = !0, this._validate();
1178
- const t = this.shadowRoot?.querySelector("input");
1179
- if (t) {
1180
- const s = this._internals.form;
1181
- s ? Array.from(s.elements).find(
270
+ const o = this.shadowRoot?.querySelector("input");
271
+ if (o) {
272
+ const r = this._internals.form;
273
+ r ? Array.from(r.elements).find(
1182
274
  (c) => typeof c.checkValidity == "function" && !c.checkValidity()
1183
- ) === this && t.focus() : t.focus();
275
+ ) === this && o.focus() : o.focus();
1184
276
  }
1185
277
  }
1186
278
  /******************** Event Handlers ********************/
@@ -1200,8 +292,8 @@ const p = (x = class extends re {
1200
292
  }
1201
293
  // Handle checkbox change event
1202
294
  _handleChange(e) {
1203
- const { checked: t } = e.target;
1204
- this.checked = t, this.groupExist || this._internals.setFormValue(this.checked ? this.value : null), this._validate(), this._emitChangeEvent();
295
+ const { checked: o } = e.target;
296
+ this.checked = o, this.groupExist || this._internals.setFormValue(this.checked ? this.value : null), this._validate(), this._emitChangeEvent();
1205
297
  }
1206
298
  // Handle focus event
1207
299
  _handleFocus() {
@@ -1216,19 +308,19 @@ const p = (x = class extends re {
1216
308
  e.code === "Space" && (e.preventDefault(), this.disabled || (this.checked = !this.checked, this._internals.setFormValue(this.checked ? this.value : null), await this.updateComplete, this._validate(), this._emitChangeEvent()));
1217
309
  }
1218
310
  render() {
1219
- return P`
311
+ return k`
1220
312
  <label class="nys-checkbox">
1221
313
  <div class="nys-checkbox__checkboxwrapper">
1222
314
  <input
1223
- id="${this.id}"
315
+ id=${this.id + "--native"}
1224
316
  class="nys-checkbox__checkbox"
1225
317
  type="checkbox"
1226
- name="${U(this.name ? this.name : void 0)}"
318
+ name="${x(this.name ? this.name : void 0)}"
1227
319
  .checked=${this.checked}
1228
320
  ?disabled=${this.disabled}
1229
321
  .value=${this.value}
1230
322
  ?required="${this.required}"
1231
- form=${U(this.form || void 0)}
323
+ form=${x(this.form || void 0)}
1232
324
  aria-checked="${this.checked}"
1233
325
  aria-disabled="${this.disabled ? "true" : "false"}"
1234
326
  aria-required="${this.required}"
@@ -1239,19 +331,18 @@ const p = (x = class extends re {
1239
331
  @keydown="${this._handleKeydown}"
1240
332
  aria-label="${this.label}"
1241
333
  />
1242
- ${this.checked ? P`<nys-icon
1243
- for="${this.id}"
334
+ ${this.checked ? k`<nys-icon
1244
335
  name="check"
1245
336
  size="${this.size === "md" ? "4xl" : this.size === "sm" ? "2xl" : "xl"}"
1246
337
  class="nys-checkbox__icon"
1247
338
  ></nys-icon>` : ""}
1248
339
  </div>
1249
- ${this.label && P`
340
+ ${this.label && k`
1250
341
  <nys-label
1251
- for=${this.id}
342
+ for=${this.id + "--native"}
1252
343
  label=${this.label}
1253
- description=${U(this.description ?? void 0)}
1254
- flag=${U(this.required ? "required" : void 0)}
344
+ description=${x(this.description ?? void 0)}
345
+ flag=${x(this.required ? "required" : void 0)}
1255
346
  ?inverted=${this.inverted}
1256
347
  >
1257
348
  <slot name="description" slot="description"
@@ -1260,7 +351,7 @@ const p = (x = class extends re {
1260
351
  </nys-label>
1261
352
  `}
1262
353
  </label>
1263
- ${this.parentElement?.tagName.toLowerCase() !== "nys-checkboxgroup" ? P`<nys-errormessage
354
+ ${this.parentElement?.tagName.toLowerCase() !== "nys-checkboxgroup" ? k`<nys-errormessage
1264
355
  id="single-error-message"
1265
356
  ?showError=${this.showError}
1266
357
  errorMessage=${this._internals.validationMessage || this.errorMessage}
@@ -1268,56 +359,56 @@ const p = (x = class extends re {
1268
359
  ></nys-errormessage>` : ""}
1269
360
  `;
1270
361
  }
1271
- }, x.VALID_SIZES = ["sm", "md"], x.styles = le, x.formAssociated = !0, x);
1272
- _([
1273
- a({ type: Boolean, reflect: !0 })
1274
- ], p.prototype, "checked", 2);
1275
- _([
1276
- a({ type: Boolean, reflect: !0 })
1277
- ], p.prototype, "disabled", 2);
1278
- _([
1279
- a({ type: Boolean, reflect: !0 })
1280
- ], p.prototype, "required", 2);
1281
- _([
1282
- a({ type: String })
1283
- ], p.prototype, "label", 2);
1284
- _([
1285
- a({ type: String })
1286
- ], p.prototype, "description", 2);
1287
- _([
1288
- a({ type: String })
1289
- ], p.prototype, "id", 2);
1290
- _([
1291
- a({ type: String, reflect: !0 })
1292
- ], p.prototype, "name", 2);
1293
- _([
1294
- a({ type: String })
1295
- ], p.prototype, "value", 2);
1296
- _([
1297
- a({ type: String, reflect: !0 })
1298
- ], p.prototype, "form", 2);
1299
- _([
1300
- a({ type: Boolean, reflect: !0 })
1301
- ], p.prototype, "showError", 2);
1302
- _([
1303
- a({ type: String })
1304
- ], p.prototype, "errorMessage", 2);
1305
- _([
1306
- a({ type: Boolean })
1307
- ], p.prototype, "groupExist", 2);
1308
- _([
1309
- a({ type: Boolean, reflect: !0 })
1310
- ], p.prototype, "tile", 2);
1311
- _([
1312
- a({ type: Boolean, reflect: !0 })
1313
- ], p.prototype, "inverted", 2);
1314
- _([
1315
- a({ reflect: !0 })
1316
- ], p.prototype, "size", 1);
1317
- let Le = p;
1318
- customElements.get("nys-checkbox") || customElements.define("nys-checkbox", Le);
362
+ }, b.styles = v(_), b.VALID_SIZES = ["sm", "md"], b.formAssociated = !0, b);
363
+ l([
364
+ t({ type: Boolean, reflect: !0 })
365
+ ], i.prototype, "checked", 2);
366
+ l([
367
+ t({ type: Boolean, reflect: !0 })
368
+ ], i.prototype, "disabled", 2);
369
+ l([
370
+ t({ type: Boolean, reflect: !0 })
371
+ ], i.prototype, "required", 2);
372
+ l([
373
+ t({ type: String })
374
+ ], i.prototype, "label", 2);
375
+ l([
376
+ t({ type: String })
377
+ ], i.prototype, "description", 2);
378
+ l([
379
+ t({ type: String, reflect: !0 })
380
+ ], i.prototype, "id", 2);
381
+ l([
382
+ t({ type: String, reflect: !0 })
383
+ ], i.prototype, "name", 2);
384
+ l([
385
+ t({ type: String })
386
+ ], i.prototype, "value", 2);
387
+ l([
388
+ t({ type: String, reflect: !0 })
389
+ ], i.prototype, "form", 2);
390
+ l([
391
+ t({ type: Boolean, reflect: !0 })
392
+ ], i.prototype, "showError", 2);
393
+ l([
394
+ t({ type: String })
395
+ ], i.prototype, "errorMessage", 2);
396
+ l([
397
+ t({ type: Boolean })
398
+ ], i.prototype, "groupExist", 2);
399
+ l([
400
+ t({ type: Boolean, reflect: !0 })
401
+ ], i.prototype, "tile", 2);
402
+ l([
403
+ t({ type: Boolean, reflect: !0 })
404
+ ], i.prototype, "inverted", 2);
405
+ l([
406
+ t({ reflect: !0 })
407
+ ], i.prototype, "size", 1);
408
+ let z = i;
409
+ customElements.get("nys-checkbox") || customElements.define("nys-checkbox", z);
1319
410
  export {
1320
- Le as NysCheckbox,
1321
- He as NysCheckboxgroup
411
+ z as NysCheckbox,
412
+ C as NysCheckboxgroup
1322
413
  };
1323
414
  //# sourceMappingURL=nys-checkbox.js.map