@nysds/nys-button 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/nys-button.js +252 -177
  2. package/dist/nys-button.js.map +1 -1
  3. package/package.json +3 -3
package/dist/nys-button.js CHANGED
@@ -5,7 +5,7 @@ import { css as b1, LitElement as _1, html as y } from "lit";
5
5
  * ▒█▒█▒█ ▒█▄▄▄█ ░▀▀▀▄▄ ▒█░▒█ ░▀▀▀▄▄
6
6
  * ▒█░░▀█ ░░▒█░░ ▒█▄▄▄█ ▒█▄▄▀ ▒█▄▄▄█
7
7
  *
8
- * Button Component v1.1.0
8
+ * Button Component v1.1.1
9
9
  * Part of the New York State Design System
10
10
  * Repository: https://github.com/its-hcd/nysds
11
11
  * License: MIT
@@ -15,8 +15,8 @@ import { css as b1, LitElement as _1, html as y } from "lit";
15
15
  * Copyright 2019 Google LLC
16
16
  * SPDX-License-Identifier: BSD-3-Clause
17
17
  */
18
- const N = globalThis, Q = N.ShadowRoot && (N.ShadyCSS === void 0 || N.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, w1 = Symbol(), s1 = /* @__PURE__ */ new WeakMap();
19
- let Z1 = class {
18
+ const D = globalThis, Q = D.ShadowRoot && (D.ShadyCSS === void 0 || D.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, w1 = Symbol(), s1 = /* @__PURE__ */ new WeakMap();
19
+ let H1 = class {
20
20
  constructor(t, e, o) {
21
21
  if (this._$cssResult$ = !0, o !== w1) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
22
22
  this.cssText = t, this.t = e;
@@ -34,26 +34,26 @@ let Z1 = class {
34
34
  return this.cssText;
35
35
  }
36
36
  };
37
- const H1 = (s) => new Z1(typeof s == "string" ? s : s + "", void 0, w1), A1 = (s, t) => {
37
+ const Z1 = (s) => new H1(typeof s == "string" ? s : s + "", void 0, w1), A1 = (s, t) => {
38
38
  if (Q) s.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
39
39
  else for (const e of t) {
40
- const o = document.createElement("style"), r = N.litNonce;
40
+ const o = document.createElement("style"), r = D.litNonce;
41
41
  r !== void 0 && o.setAttribute("nonce", r), o.textContent = e.cssText, s.appendChild(o);
42
42
  }
43
43
  }, n1 = Q ? (s) => s : (s) => s instanceof CSSStyleSheet ? ((t) => {
44
44
  let e = "";
45
45
  for (const o of t.cssRules) e += o.cssText;
46
- return H1(e);
46
+ return Z1(e);
47
47
  })(s) : s;
48
48
  /**
49
49
  * @license
50
50
  * Copyright 2017 Google LLC
51
51
  * SPDX-License-Identifier: BSD-3-Clause
52
52
  */
53
- const { is: V1, defineProperty: S1, getOwnPropertyDescriptor: E1, getOwnPropertyNames: P1, getOwnPropertySymbols: k1, getPrototypeOf: U1 } = Object, m = globalThis, i1 = m.trustedTypes, z1 = i1 ? i1.emptyScript : "", G = m.reactiveElementPolyfillSupport, U = (s, t) => s, j = { toAttribute(s, t) {
53
+ const { is: S1, defineProperty: V1, getOwnPropertyDescriptor: E1, getOwnPropertyNames: P1, getOwnPropertySymbols: U1, getPrototypeOf: z1 } = Object, m = globalThis, i1 = m.trustedTypes, O1 = i1 ? i1.emptyScript : "", Y = m.reactiveElementPolyfillSupport, z = (s, t) => s, j = { toAttribute(s, t) {
54
54
  switch (t) {
55
55
  case Boolean:
56
- s = s ? z1 : null;
56
+ s = s ? O1 : null;
57
57
  break;
58
58
  case Object:
59
59
  case Array:
@@ -78,9 +78,9 @@ const { is: V1, defineProperty: S1, getOwnPropertyDescriptor: E1, getOwnProperty
78
78
  }
79
79
  }
80
80
  return e;
81
- } }, t1 = (s, t) => !V1(s, t), C1 = { attribute: !0, type: String, converter: j, reflect: !1, hasChanged: t1 };
81
+ } }, t1 = (s, t) => !S1(s, t), C1 = { attribute: !0, type: String, converter: j, reflect: !1, hasChanged: t1 };
82
82
  Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), m.litPropertyMetadata ?? (m.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
83
- class S extends HTMLElement {
83
+ class V extends HTMLElement {
84
84
  static addInitializer(t) {
85
85
  this._$Ei(), (this.l ?? (this.l = [])).push(t);
86
86
  }
@@ -90,7 +90,7 @@ class S extends HTMLElement {
90
90
  static createProperty(t, e = C1) {
91
91
  if (e.state && (e.attribute = !1), this._$Ei(), this.elementProperties.set(t, e), !e.noAccessor) {
92
92
  const o = Symbol(), r = this.getPropertyDescriptor(t, o, e);
93
- r !== void 0 && S1(this.prototype, t, r);
93
+ r !== void 0 && V1(this.prototype, t, r);
94
94
  }
95
95
  }
96
96
  static getPropertyDescriptor(t, e, o) {
@@ -110,14 +110,14 @@ class S extends HTMLElement {
110
110
  return this.elementProperties.get(t) ?? C1;
111
111
  }
112
112
  static _$Ei() {
113
- if (this.hasOwnProperty(U("elementProperties"))) return;
114
- const t = U1(this);
113
+ if (this.hasOwnProperty(z("elementProperties"))) return;
114
+ const t = z1(this);
115
115
  t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
116
116
  }
117
117
  static finalize() {
118
- if (this.hasOwnProperty(U("finalized"))) return;
119
- if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(U("properties"))) {
120
- const e = this.properties, o = [...P1(e), ...k1(e)];
118
+ if (this.hasOwnProperty(z("finalized"))) return;
119
+ if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(z("properties"))) {
120
+ const e = this.properties, o = [...P1(e), ...U1(e)];
121
121
  for (const r of o) this.createProperty(r, e[r]);
122
122
  }
123
123
  const t = this[Symbol.metadata];
@@ -278,13 +278,13 @@ class S extends HTMLElement {
278
278
  firstUpdated(t) {
279
279
  }
280
280
  }
281
- S.elementStyles = [], S.shadowRootOptions = { mode: "open" }, S[U("elementProperties")] = /* @__PURE__ */ new Map(), S[U("finalized")] = /* @__PURE__ */ new Map(), G == null || G({ ReactiveElement: S }), (m.reactiveElementVersions ?? (m.reactiveElementVersions = [])).push("2.0.4");
281
+ V.elementStyles = [], V.shadowRootOptions = { mode: "open" }, V[z("elementProperties")] = /* @__PURE__ */ new Map(), V[z("finalized")] = /* @__PURE__ */ new Map(), Y == null || Y({ ReactiveElement: V }), (m.reactiveElementVersions ?? (m.reactiveElementVersions = [])).push("2.0.4");
282
282
  /**
283
283
  * @license
284
284
  * Copyright 2017 Google LLC
285
285
  * SPDX-License-Identifier: BSD-3-Clause
286
286
  */
287
- const B1 = { attribute: !0, type: String, converter: j, reflect: !1, hasChanged: t1 }, O1 = (s = B1, t, e) => {
287
+ const B1 = { attribute: !0, type: String, converter: j, reflect: !1, hasChanged: t1 }, k1 = (s = B1, t, e) => {
288
288
  const { kind: o, metadata: r } = e;
289
289
  let i = globalThis.litPropertyMetadata.get(r);
290
290
  if (i === void 0 && globalThis.litPropertyMetadata.set(r, i = /* @__PURE__ */ new Map()), i.set(e.name, s), o === "accessor") {
@@ -306,12 +306,12 @@ const B1 = { attribute: !0, type: String, converter: j, reflect: !1, hasChanged:
306
306
  throw Error("Unsupported decorator location: " + o);
307
307
  };
308
308
  function v(s) {
309
- return (t, e) => typeof e == "object" ? O1(s, t, e) : ((o, r, i) => {
309
+ return (t, e) => typeof e == "object" ? k1(s, t, e) : ((o, r, i) => {
310
310
  const n = r.hasOwnProperty(i);
311
311
  return r.constructor.createProperty(i, n ? { ...o, wrapped: !0 } : o), n ? Object.getOwnPropertyDescriptor(r, i) : void 0;
312
312
  })(s, t, e);
313
313
  }
314
- const T1 = b1`
314
+ const I1 = b1`
315
315
  :host {
316
316
  /* Anything that can be overridden should be defined here */
317
317
 
@@ -329,19 +329,19 @@ const T1 = b1`
329
329
 
330
330
  /* Global Button Colors */
331
331
  --_nys-button-color-bg: var(--nys-color-theme, #154973);
332
- --_nys-button-color-text: var(--nys-color-ink-reverse, #ffffff);
332
+ --_nys-button-color-text: var(--nys-color-text-reverse, #ffffff);
333
333
  --_nys-button-color-border: var(--nys-color-theme, #154973);
334
334
 
335
335
  --_nys-button-color-bg-hover: var(--nys-color-theme-strong, #0e324f);
336
- --_nys-button-color-text-hover: var(--nys-color-ink-reverse, #ffffff);
336
+ --_nys-button-color-text-hover: var(--nys-color-text-reverse, #ffffff);
337
337
  --_nys-button-color-border-hover: var(--nys-color-theme-strong, #0e324f);
338
338
 
339
339
  --_nys-button-color-bg-active: var(--nys-color-theme-stronger, #081b2b);
340
- --_nys-button-color-text-active: var(--nys-color-ink-reverse, #ffffff);
340
+ --_nys-button-color-text-active: var(--nys-color-text-reverse, #ffffff);
341
341
  --_nys-button-color-border-active: var(--nys-color-theme-stronger, #081b2b);
342
342
 
343
343
  --_nys-button-color-bg-disabled: var(--nys-color-neutral-10, #f6f6f6);
344
- --_nys-button-color-text-disabled: var(--nys-color-neutral-300, #a7a9ab);
344
+ --_nys-button-color-text-disabled: var(--nys-color-text-disabled, #bec0c1);
345
345
  --_nys-button-color-border-disabled: var(--nys-color-neutral-10, #f6f6f6);
346
346
 
347
347
  /* Typography */
@@ -381,67 +381,55 @@ const T1 = b1`
381
381
  --_nys-button-width: 100%;
382
382
  }
383
383
 
384
- /* Variants */
384
+ /* VARIANTS */
385
+
386
+ /* Filled */
385
387
  :host([variant="filled"]) {
388
+ /* Filled - Default */
386
389
  --_nys-button-color-bg: var(--nys-color-theme, #154973);
387
- --_nys-button-color-text: var(--nys-color-ink-reverse, #ffffff);
388
- --_nys-button-color-border: var(--nys-color-theme, #154973);
390
+ --_nys-button-color-text: var(--nys-color-text-reverse, #ffffff);
391
+ --_nys-button-color-border: var(--nys-color-transparent, #ffffff00);
389
392
 
393
+ /* Filled - Hover */
390
394
  --_nys-button-color-bg-hover: var(--nys-color-theme-strong, #0e324f);
391
- --_nys-button-color-text-hover: var(--nys-color-ink-reverse, #ffffff);
392
- --_nys-button-color-border-hover: var(--nys-color-theme-strong, #0e324f);
395
+ --_nys-button-color-text-hover: var(--nys-color-text-reverse, #ffffff);
396
+ --_nys-button-color-border: var(--nys-color-transparent, #ffffff00);
393
397
 
398
+ /* Filled - Pressed/Active */
394
399
  --_nys-button-color-bg-active: var(--nys-color-theme-stronger, #081b2b);
395
- --_nys-button-color-text-active: var(--nys-color-ink-reverse, #ffffff);
396
- --_nys-button-color-border-active: var(--nys-color-theme-stronger, #081b2b);
400
+ --_nys-button-color-text-active: var(--nys-color-text-reverse, #ffffff);
401
+ --_nys-button-color-border: var(--nys-color-transparent, #ffffff00);
397
402
 
403
+ /* Filled - Disabled */
398
404
  --_nys-button-color-bg-disabled: var(--nys-color-neutral-10, #f6f6f6);
399
- --_nys-button-color-text-disabled: var(--nys-color-neutral-300, #a7a9ab);
400
- --_nys-button-color-border-disabled: var(--nys-color-neutral-10, #f6f6f6);
405
+ --_nys-button-color-text-disabled: var(--nys-color-text-disabled, #bec0c1);
406
+ --_nys-button-color-border: var(--nys-color-transparent, #ffffff00);
401
407
  }
408
+
409
+ /* Outline */
402
410
  :host([variant="outline"]) {
403
- --_nys-button-color-bg: var(--nys-color-ink-reverse, #ffffff);
411
+ /* Outline - Default */
412
+ --_nys-button-color-bg: var(--nys-color-surface, #ffffff);
404
413
  --_nys-button-color-text: var(--nys-color-theme, #154973);
405
414
  --_nys-button-color-border: var(--nys-color-theme, #154973);
406
415
 
416
+ /* Outline - Hover */
407
417
  --_nys-button-color-bg-hover: var(--nys-color-theme-weaker, #eff6fb);
408
418
  --_nys-button-color-text-hover: var(--nys-color-theme, #154973);
409
419
  --_nys-button-color-border-hover: var(--nys-color-theme, #154973);
410
420
 
421
+ /* Outline - Pressed/Active */
411
422
  --_nys-button-color-bg-active: var(--nys-color-theme-weak, #cddde9);
412
423
  --_nys-button-color-text-active: var(--nys-color-theme, #154973);
413
424
  --_nys-button-color-border-active: var(--nys-color-theme, #154973);
414
425
 
415
- --_nys-button-color-bg-disabled: var(--nys-color-ink-reverse, #ffffff);
416
- --_nys-button-color-text-disabled: var(--nys-color-neutral-300, #a7a9ab);
426
+ /* Outline - Disabled */
427
+ --_nys-button-color-bg-disabled: var(--nys-color-surface, #ffffff);
428
+ --_nys-button-color-text-disabled: var(--nys-color-text-disabled, #bec0c1);
417
429
  --_nys-button-color-border-disabled: var(--nys-color-neutral-100, #d0d0ce);
418
430
  }
419
- :host([variant="ghost"]) {
420
- --_nys-button-color-bg: var(--nys-color-transparent, #ffffff00);
421
- --_nys-button-color-text: var(--nys-color-ink, #000000);
422
- --_nys-button-color-border: var(--nys-color-transparent, #ffffff00);
423
-
424
- --_nys-button-color-bg-hover: var(
425
- --nys-color-black-transparent-100,
426
- #0000001a
427
- );
428
- --_nys-button-color-text-hover: var(--nys-color-ink, #000000);
429
- --_nys-button-color-border-hover: var(--nys-color-transparent, #ffffff00);
430
431
 
431
- --_nys-button-color-bg-active: var(
432
- --nys-color-black-transparent-200,
433
- #00000033
434
- );
435
- --_nys-button-color-text-active: var(--nys-color-ink, #000000);
436
- --_nys-button-color-border-active: var(--nys-color-transparent, #ffffff00);
437
-
438
- --_nys-button-color-bg-disabled: var(--nys-color-transparent, #ffffff00);
439
- --_nys-button-color-text-disabled: var(--nys-color-neutral-300, #a7a9ab);
440
- --_nys-button-color-border-disabled: var(
441
- --nys-color-transparent,
442
- #ffffff00
443
- );
444
- }
432
+ /* Text */
445
433
  :host([variant="text"]) {
446
434
  --_nys-button-height: fit-content;
447
435
  --_nys-button-radius: var(--nys-border-radius-md, 4px);
@@ -450,109 +438,196 @@ const T1 = b1`
450
438
  --_nys-button-width-border: 0px;
451
439
  --_nys-button-text-decoration: underline;
452
440
 
441
+ /* Text - Default */
453
442
  --_nys-button-color-bg: var(--nys-color-transparent, #ffffff00);
454
443
  --_nys-button-color-text: var(--nys-color-link, #004dd1);
455
444
  --_nys-button-color-border: var(--nys-color-transparent, #ffffff00);
456
445
 
446
+ /* Text - Hover */
457
447
  --_nys-button-color-bg-hover: var(--nys-color-transparent, #ffffff00);
458
448
  --_nys-button-color-text-hover: var(--nys-color-link-strong, #003ba1);
459
449
  --_nys-button-color-border-hover: var(--nys-color-transparent, #ffffff00);
460
450
 
451
+ /* Text - Pressed/Active */
461
452
  --_nys-button-color-bg-active: var(--nys-color-transparent, #ffffff00);
462
453
  --_nys-button-color-text-active: var(--nys-color-link-strongest, #002971);
463
454
  --_nys-button-color-border-active: var(--nys-color-transparent, #ffffff00);
464
455
 
456
+ /* Text - Disabled */
457
+ --_nys-button-color-bg-disabled: var(--nys-color-transparent, #ffffff00);
458
+ --_nys-button-color-text-disabled: var(--nys-color-text-disabled, #bec0c1);
459
+ --_nys-button-color-border-disabled: var(
460
+ --nys-color-transparent,
461
+ #ffffff00
462
+ );
463
+ }
464
+
465
+ /* Ghost */
466
+ :host([variant="ghost"]) {
467
+ /* Ghost - Default */
468
+ --_nys-button-color-bg: var(--nys-color-transparent, #ffffff00);
469
+ --_nys-button-color-text: var(--nys-color-text, #1b1b1b);
470
+ --_nys-button-color-border: var(--nys-color-transparent, #ffffff00);
471
+
472
+ /* Ghost - Hover */
473
+ --_nys-button-color-bg-hover: var(
474
+ --nys-color-black-transparent-100,
475
+ #0000001a
476
+ );
477
+ --_nys-button-color-text-hover: var(--nys-color-text, #1b1b1b);
478
+ --_nys-button-color-border-hover: var(--nys-color-transparent, #ffffff00);
479
+
480
+ /* Ghost - Active */
481
+ --_nys-button-color-bg-active: var(
482
+ --nys-color-black-transparent-200,
483
+ #00000033
484
+ );
485
+ --_nys-button-color-text-active: var(--nys-color-text, #1b1b1b);
486
+ --_nys-button-color-border-active: var(--nys-color-transparent, #ffffff00);
487
+
488
+ /* Ghost - Disabled */
465
489
  --_nys-button-color-bg-disabled: var(--nys-color-transparent, #ffffff00);
466
- --_nys-button-color-text-disabled: var(--nys-color-neutral-300, #a7a9ab);
490
+ --_nys-button-color-text-disabled: var(--nys-color-text-disabled, #bec0c1);
467
491
  --_nys-button-color-border-disabled: var(
468
492
  --nys-color-transparent,
469
493
  #ffffff00
470
494
  );
471
495
  }
472
496
 
473
- /* Inverted Variants */
497
+ /* INVERTED VARIANTS */
498
+
499
+ /* Filled Inverted */
474
500
  :host([variant="filled"][inverted]) {
475
- --_nys-button-color-bg: var(--nys-color-ink-reverse, #ffffff);
476
- --_nys-button-color-text: var(--nys-color-ink, #1b1b1b);
477
- --_nys-button-color-border: var(--nys-color-ink-reverse, #ffffff);
501
+ /* Filled Inverted - Default */
502
+ --_nys-button-color-bg: var(--nys-color-surface, #ffffff);
503
+ --_nys-button-color-text: var(--nys-color-text, #1b1b1b);
504
+ --_nys-button-color-border-disabled: var(
505
+ --nys-color-transparent,
506
+ #ffffff00
507
+ );
478
508
 
509
+ /* Filled Inverted - Hover */
479
510
  --_nys-button-color-bg-hover: var(--nys-color-neutral-100, #d0d0ce);
480
- --_nys-button-color-text-hover: var(--nys-color-ink, #1b1b1b);
481
- --_nys-button-color-border-hover: var(--nys-color-neutral-100, #d0d0ce);
511
+ --_nys-button-color-text-hover: var(--nys-color-text, #1b1b1b);
512
+ --_nys-button-color-border-disabled: var(
513
+ --nys-color-transparent,
514
+ #ffffff00
515
+ );
482
516
 
517
+ /* Filled Inverted - Pressed/Active */
483
518
  --_nys-button-color-bg-active: var(--nys-color-neutral-300, #a7a9ab);
484
- --_nys-button-color-text-active: var(--nys-color-ink, #1b1b1b);
485
- --_nys-button-color-border-active: var(--nys-color-neutral-300, #a7a9ab);
519
+ --_nys-button-color-text-active: var(--nys-color-text, #1b1b1b);
520
+ --_nys-button-color-border-disabled: var(
521
+ --nys-color-transparent,
522
+ #ffffff00
523
+ );
486
524
 
487
- --_nys-button-color-bg-disabled: var(--nys-color-ink, #1b1b1b);
488
- --_nys-button-color-text-disabled: var(--nys-color-neutral-600, #62666a);
489
- --_nys-button-color-border-disabled: var(--nys-color-ink, #1b1b1b);
525
+ /* Filled Inverted - Disabled */
526
+ --_nys-button-color-bg-disabled: var(--nys-color-text, #1b1b1b);
527
+ --_nys-button-color-text-disabled: var(--nys-color-text-disabled, #62666a);
528
+ --_nys-button-color-border-disabled: var(
529
+ --nys-color-transparent,
530
+ #ffffff00
531
+ );
490
532
  }
533
+
534
+ /* Outline Inverted */
491
535
  :host([variant="outline"][inverted]) {
492
- --_nys-button-color-bg: var(--nys-color-ink, #1b1b1b);
493
- --_nys-button-color-text: var(--nys-color-ink-reverse, #ffffff);
536
+ /* Outline Inverted - Default */
537
+ --_nys-button-color-bg: var(--nys-color-surface-reverse, #1b1b1b);
538
+ --_nys-button-color-text: var(--nys-color-text-reverse, #ffffff);
494
539
  --_nys-button-color-border: var(--nys-color-ink-reverse, #ffffff);
495
540
 
496
- --_nys-button-color-bg-hover: var(--nys-color-ink, #1b1b1b);
497
- --_nys-button-color-text-hover: var(--nys-color-neutral-100, #d0d0ce);
541
+ /* Outline Inverted - Hover */
542
+ --_nys-button-color-bg-hover: var(--nys-color-surface-reverse, #1b1b1b);
543
+ --_nys-button-color-text-hover: var(--nys-color-text-reverse-weak, #d0d0ce);
498
544
  --_nys-button-color-border-hover: var(--nys-color-neutral-100, #d0d0ce);
499
545
 
500
- --_nys-button-color-bg-active: var(--nys-color-ink, #1b1b1b);
501
- --_nys-button-color-text-active: var(--nys-color-neutral-300, #a7a9ab);
546
+ /* Outline Inverted - Pressed/Active */
547
+ --_nys-button-color-bg-active: var(--nys-color-surface-reverse, #1b1b1b);
548
+ --_nys-button-color-text-active: var(
549
+ --nys-color-text-reverse-weaker,
550
+ #bec0c1
551
+ );
502
552
  --_nys-button-color-border-active: var(--nys-color-neutral-300, #a7a9ab);
503
553
 
504
- --_nys-button-color-bg-disabled: var(--nys-color-ink, #1b1b1b);
505
- --_nys-button-color-text-disabled: var(--nys-color-neutral-600, #62666a);
554
+ /* Outline Inverted - Disabled */
555
+ --_nys-button-color-bg-disabled: var(--nys-color-surface-reverse, #1b1b1b);
556
+ --_nys-button-color-text-disabled: var(
557
+ --nys-color-text-reverse-disabled,
558
+ #62666a
559
+ );
506
560
  --_nys-button-color-border-disabled: var(--nys-color-neutral-600, #62666a);
507
561
  }
508
- :host([variant="ghost"][inverted]) {
562
+
563
+ /* Text Inverted */
564
+ :host([variant="text"][inverted]) {
565
+ --_nys-button-height: fit-content;
566
+ --_nys-button-radius: var(--nys-border-radius-md, 4px);
567
+ --_nys-button-padding-y: var(--nys-space-2px, 2px);
568
+ --_nys-button-padding-x: var(--nys-space-50, 4px);
569
+ --_nys-button-width-border: 0px;
570
+ --_nys-button-text-decoration: underline;
571
+
572
+ /* Text Inverted - Default */
509
573
  --_nys-button-color-bg: var(--nys-color-transparent, #ffffff00);
510
- --_nys-button-color-text: var(--nys-color-ink-reverse, #ffffff);
574
+ --_nys-button-color-text: var(--nys-color-link-reverse, #a7a9ab);
511
575
  --_nys-button-color-border: var(--nys-color-transparent, #ffffff00);
512
576
 
513
- --_nys-button-color-bg-hover: var(
514
- --nys-color-white-transparent-100,
515
- #ffffff1a
577
+ /* Text Inverted - Hover */
578
+ --_nys-button-color-bg-hover: var(--nys-color-transparent, #ffffff00);
579
+ --_nys-button-color-text-hover: var(
580
+ --nys-color-link-reverse-strong,
581
+ #ededed
516
582
  );
517
- --_nys-button-color-text-hover: var(--nys-color-ink-reverse, #ffffff);
518
583
  --_nys-button-color-border-hover: var(--nys-color-transparent, #ffffff00);
519
584
 
520
- --_nys-button-color-bg-active: var(
521
- --nys-color-white-transparent-200,
522
- #ffffff33
585
+ /* Text Inverted - Pressed/Active */
586
+ --_nys-button-color-bg-active: var(--nys-color-transparent, #ffffff00);
587
+ --_nys-button-color-text-active: var(
588
+ --nys-color-reverse-strongest,
589
+ #ffffff
523
590
  );
524
- --_nys-button-color-text-active: var(--nys-color-ink-reverse, #ffffff);
525
591
  --_nys-button-color-border-active: var(--nys-color-transparent, #ffffff00);
526
592
 
593
+ /* Text Inverted - Disabled */
527
594
  --_nys-button-color-bg-disabled: var(--nys-color-transparent, #ffffff00);
528
- --_nys-button-color-text-disabled: var(--nys-color-neutral-600, #62666a);
595
+ --_nys-button-color-text-disabled: var(
596
+ --nys-color-text-reverse-disabled,
597
+ #62666a
598
+ );
529
599
  --_nys-button-color-border-disabled: var(
530
600
  --nys-color-transparent,
531
601
  #ffffff00
532
602
  );
533
603
  }
534
- :host([variant="text"][inverted]) {
535
- --_nys-button-height: fit-content;
536
- --_nys-button-radius: var(--nys-border-radius-md, 4px);
537
- --_nys-button-padding-y: var(--nys-space-2px, 2px);
538
- --_nys-button-padding-x: var(--nys-space-50, 4px);
539
- --_nys-button-width-border: 0px;
540
- --_nys-button-text-decoration: underline;
541
604
 
605
+ /* Ghost Inverted */
606
+ :host([variant="ghost"][inverted]) {
607
+ /* Ghost Inverted - Default */
542
608
  --_nys-button-color-bg: var(--nys-color-transparent, #ffffff00);
543
- --_nys-button-color-text: var(--nys-color-neutral-300, #a7a9ab);
609
+ --_nys-button-color-text: var(--nys-color-text-reverse, #ffffff);
544
610
  --_nys-button-color-border: var(--nys-color-transparent, #ffffff00);
545
611
 
546
- --_nys-button-color-bg-hover: var(--nys-color-transparent, #ffffff00);
547
- --_nys-button-color-text-hover: var(--nys-color-neutral-50, #ededed);
612
+ /* Ghost Inverted - Hover */
613
+ --_nys-button-color-bg-hover: var(
614
+ --nys-color-white-transparent-100,
615
+ #ffffff1a
616
+ );
617
+ --_nys-button-color-text-hover: var(--nys-color-text-reverse, #ffffff);
548
618
  --_nys-button-color-border-hover: var(--nys-color-transparent, #ffffff00);
549
619
 
550
- --_nys-button-color-bg-active: var(--nys-color-transparent, #ffffff00);
551
- --_nys-button-color-text-active: var(--nys-color-ink-reverse, #ffffff);
620
+ /* Ghost Inverted - Pressed/Active */
621
+ --_nys-button-color-bg-active: var(
622
+ --nys-color-white-transparent-200,
623
+ #ffffff33
624
+ );
625
+ --_nys-button-color-text-active: var(--nys-color-text-reverse, #ffffff);
552
626
  --_nys-button-color-border-active: var(--nys-color-transparent, #ffffff00);
553
627
 
628
+ /* Ghost Inverted - Disabled */
554
629
  --_nys-button-color-bg-disabled: var(--nys-color-transparent, #ffffff00);
555
- --_nys-button-color-text-disabled: var(--nys-color-neutral-600, #62666a);
630
+ --_nys-button-color-text-disabled: var(--nys-color-text-disabled, #62666a);
556
631
  --_nys-button-color-border-disabled: var(
557
632
  --nys-color-transparent,
558
633
  #ffffff00
@@ -641,7 +716,7 @@ const T1 = b1`
641
716
  * ▒█▒█▒█ ▒█▄▄▄█ ░▀▀▀▄▄ ▒█░▒█ ░▀▀▀▄▄
642
717
  * ▒█░░▀█ ░░▒█░░ ▒█▄▄▄█ ▒█▄▄▀ ▒█▄▄▄█
643
718
  *
644
- * Icon Component v1.1.0
719
+ * Icon Component v1.1.1
645
720
  * Part of the New York State Design System
646
721
  * Repository: https://github.com/its-hcd/nysds
647
722
  * License: MIT
@@ -651,8 +726,8 @@ const T1 = b1`
651
726
  * Copyright 2019 Google LLC
652
727
  * SPDX-License-Identifier: BSD-3-Clause
653
728
  */
654
- const D = globalThis, e1 = D.ShadowRoot && (D.ShadyCSS === void 0 || D.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, m1 = Symbol(), l1 = /* @__PURE__ */ new WeakMap();
655
- let R1 = class {
729
+ const N = globalThis, e1 = N.ShadowRoot && (N.ShadyCSS === void 0 || N.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, m1 = Symbol(), l1 = /* @__PURE__ */ new WeakMap();
730
+ let T1 = class {
656
731
  constructor(t, e, o) {
657
732
  if (this._$cssResult$ = !0, o !== m1) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
658
733
  this.cssText = t, this.t = e;
@@ -670,26 +745,26 @@ let R1 = class {
670
745
  return this.cssText;
671
746
  }
672
747
  };
673
- const I1 = (s) => new R1(typeof s == "string" ? s : s + "", void 0, m1), N1 = (s, t) => {
748
+ const R1 = (s) => new T1(typeof s == "string" ? s : s + "", void 0, m1), D1 = (s, t) => {
674
749
  if (e1) s.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
675
750
  else for (const e of t) {
676
- const o = document.createElement("style"), r = D.litNonce;
751
+ const o = document.createElement("style"), r = N.litNonce;
677
752
  r !== void 0 && o.setAttribute("nonce", r), o.textContent = e.cssText, s.appendChild(o);
678
753
  }
679
754
  }, a1 = e1 ? (s) => s : (s) => s instanceof CSSStyleSheet ? ((t) => {
680
755
  let e = "";
681
756
  for (const o of t.cssRules) e += o.cssText;
682
- return I1(e);
757
+ return R1(e);
683
758
  })(s) : s;
684
759
  /**
685
760
  * @license
686
761
  * Copyright 2017 Google LLC
687
762
  * SPDX-License-Identifier: BSD-3-Clause
688
763
  */
689
- const { is: D1, defineProperty: j1, getOwnPropertyDescriptor: q1, getOwnPropertyNames: W1, getOwnPropertySymbols: F1, getPrototypeOf: K1 } = Object, Z = globalThis, c1 = Z.trustedTypes, Y1 = c1 ? c1.emptyScript : "", h1 = Z.reactiveElementPolyfillSupport, z = (s, t) => s, q = { toAttribute(s, t) {
764
+ const { is: N1, defineProperty: j1, getOwnPropertyDescriptor: F1, getOwnPropertyNames: q1, getOwnPropertySymbols: G1, getPrototypeOf: W1 } = Object, H = globalThis, c1 = H.trustedTypes, K1 = c1 ? c1.emptyScript : "", h1 = H.reactiveElementPolyfillSupport, O = (s, t) => s, F = { toAttribute(s, t) {
690
765
  switch (t) {
691
766
  case Boolean:
692
- s = s ? Y1 : null;
767
+ s = s ? K1 : null;
693
768
  break;
694
769
  case Object:
695
770
  case Array:
@@ -714,8 +789,8 @@ const { is: D1, defineProperty: j1, getOwnPropertyDescriptor: q1, getOwnProperty
714
789
  }
715
790
  }
716
791
  return e;
717
- } }, o1 = (s, t) => !D1(s, t), d1 = { attribute: !0, type: String, converter: q, reflect: !1, hasChanged: o1 };
718
- Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), Z.litPropertyMetadata ?? (Z.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
792
+ } }, o1 = (s, t) => !N1(s, t), d1 = { attribute: !0, type: String, converter: F, reflect: !1, hasChanged: o1 };
793
+ Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), H.litPropertyMetadata ?? (H.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
719
794
  let E = class extends HTMLElement {
720
795
  static addInitializer(t) {
721
796
  this._$Ei(), (this.l ?? (this.l = [])).push(t);
@@ -730,7 +805,7 @@ let E = class extends HTMLElement {
730
805
  }
731
806
  }
732
807
  static getPropertyDescriptor(t, e, o) {
733
- const { get: r, set: i } = q1(this.prototype, t) ?? { get() {
808
+ const { get: r, set: i } = F1(this.prototype, t) ?? { get() {
734
809
  return this[e];
735
810
  }, set(n) {
736
811
  this[e] = n;
@@ -746,14 +821,14 @@ let E = class extends HTMLElement {
746
821
  return this.elementProperties.get(t) ?? d1;
747
822
  }
748
823
  static _$Ei() {
749
- if (this.hasOwnProperty(z("elementProperties"))) return;
750
- const t = K1(this);
824
+ if (this.hasOwnProperty(O("elementProperties"))) return;
825
+ const t = W1(this);
751
826
  t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
752
827
  }
753
828
  static finalize() {
754
- if (this.hasOwnProperty(z("finalized"))) return;
755
- if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(z("properties"))) {
756
- const e = this.properties, o = [...W1(e), ...F1(e)];
829
+ if (this.hasOwnProperty(O("finalized"))) return;
830
+ if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(O("properties"))) {
831
+ const e = this.properties, o = [...q1(e), ...G1(e)];
757
832
  for (const r of o) this.createProperty(r, e[r]);
758
833
  }
759
834
  const t = this[Symbol.metadata];
@@ -802,7 +877,7 @@ let E = class extends HTMLElement {
802
877
  }
803
878
  createRenderRoot() {
804
879
  const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
805
- return N1(t, this.constructor.elementStyles), t;
880
+ return D1(t, this.constructor.elementStyles), t;
806
881
  }
807
882
  connectedCallback() {
808
883
  var t;
@@ -827,7 +902,7 @@ let E = class extends HTMLElement {
827
902
  var o;
828
903
  const r = this.constructor.elementProperties.get(t), i = this.constructor._$Eu(t, r);
829
904
  if (i !== void 0 && r.reflect === !0) {
830
- const n = (((o = r.converter) == null ? void 0 : o.toAttribute) !== void 0 ? r.converter : q).toAttribute(e, r.type);
905
+ const n = (((o = r.converter) == null ? void 0 : o.toAttribute) !== void 0 ? r.converter : F).toAttribute(e, r.type);
831
906
  this._$Em = t, n == null ? this.removeAttribute(i) : this.setAttribute(i, n), this._$Em = null;
832
907
  }
833
908
  }
@@ -835,7 +910,7 @@ let E = class extends HTMLElement {
835
910
  var o;
836
911
  const r = this.constructor, i = r._$Eh.get(t);
837
912
  if (i !== void 0 && this._$Em !== i) {
838
- const n = r.getPropertyOptions(i), l = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((o = n.converter) == null ? void 0 : o.fromAttribute) !== void 0 ? n.converter : q;
913
+ const n = r.getPropertyOptions(i), l = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((o = n.converter) == null ? void 0 : o.fromAttribute) !== void 0 ? n.converter : F;
839
914
  this._$Em = i, this[i] = l.fromAttribute(e, n.type), this._$Em = null;
840
915
  }
841
916
  }
@@ -914,13 +989,13 @@ let E = class extends HTMLElement {
914
989
  firstUpdated(t) {
915
990
  }
916
991
  };
917
- E.elementStyles = [], E.shadowRootOptions = { mode: "open" }, E[z("elementProperties")] = /* @__PURE__ */ new Map(), E[z("finalized")] = /* @__PURE__ */ new Map(), h1 == null || h1({ ReactiveElement: E }), (Z.reactiveElementVersions ?? (Z.reactiveElementVersions = [])).push("2.0.4");
992
+ E.elementStyles = [], E.shadowRootOptions = { mode: "open" }, E[O("elementProperties")] = /* @__PURE__ */ new Map(), E[O("finalized")] = /* @__PURE__ */ new Map(), h1 == null || h1({ ReactiveElement: E }), (H.reactiveElementVersions ?? (H.reactiveElementVersions = [])).push("2.0.4");
918
993
  /**
919
994
  * @license
920
995
  * Copyright 2017 Google LLC
921
996
  * SPDX-License-Identifier: BSD-3-Clause
922
997
  */
923
- const G1 = { attribute: !0, type: String, converter: q, reflect: !1, hasChanged: o1 }, J1 = (s = G1, t, e) => {
998
+ const Y1 = { attribute: !0, type: String, converter: F, reflect: !1, hasChanged: o1 }, J1 = (s = Y1, t, e) => {
924
999
  const { kind: o, metadata: r } = e;
925
1000
  let i = globalThis.litPropertyMetadata.get(r);
926
1001
  if (i === void 0 && globalThis.litPropertyMetadata.set(r, i = /* @__PURE__ */ new Map()), i.set(e.name, s), o === "accessor") {
@@ -1243,7 +1318,7 @@ const X1 = {
1243
1318
  transform: scale(-1, -1);
1244
1319
  }
1245
1320
  `;
1246
- var t5 = Object.defineProperty, e5 = Object.getOwnPropertyDescriptor, V = (s, t, e, o) => {
1321
+ var t5 = Object.defineProperty, e5 = Object.getOwnPropertyDescriptor, S = (s, t, e, o) => {
1247
1322
  for (var r = o > 1 ? void 0 : o ? e5(t, e) : t, i = s.length - 1, n; i >= 0; i--)
1248
1323
  (n = s[i]) && (r = (o ? n(t, e, r) : n(r)) || r);
1249
1324
  return o && r && t5(t, e, r), r;
@@ -1287,22 +1362,22 @@ const M = (P = class extends _1 {
1287
1362
  "48",
1288
1363
  "64"
1289
1364
  ], P);
1290
- V([
1291
- A({ type: String })
1365
+ S([
1366
+ A({ type: String, reflect: !0 })
1292
1367
  ], M.prototype, "name", 2);
1293
- V([
1368
+ S([
1294
1369
  A({ type: String })
1295
1370
  ], M.prototype, "label", 2);
1296
- V([
1371
+ S([
1297
1372
  A({ type: String })
1298
1373
  ], M.prototype, "rotate", 2);
1299
- V([
1374
+ S([
1300
1375
  A({ type: String })
1301
1376
  ], M.prototype, "flip", 2);
1302
- V([
1377
+ S([
1303
1378
  A({ type: String })
1304
1379
  ], M.prototype, "color", 2);
1305
- V([
1380
+ S([
1306
1381
  A({ reflect: !0 })
1307
1382
  ], M.prototype, "size", 1);
1308
1383
  let o5 = M;
@@ -1312,50 +1387,50 @@ customElements.get("nys-icon") || customElements.define("nys-icon", o5);
1312
1387
  * Copyright 2017 Google LLC
1313
1388
  * SPDX-License-Identifier: BSD-3-Clause
1314
1389
  */
1315
- const B = globalThis, W = B.trustedTypes, f1 = W ? W.createPolicy("lit-html", { createHTML: (s) => s }) : void 0, $1 = "$lit$", w = `lit$${Math.random().toFixed(9).slice(2)}$`, x1 = "?" + w, r5 = `<${x1}>`, L = document, F = () => L.createComment(""), O = (s) => s === null || typeof s != "object" && typeof s != "function", r1 = Array.isArray, s5 = (s) => r1(s) || typeof (s == null ? void 0 : s[Symbol.iterator]) == "function", J = `[
1316
- \f\r]`, k = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, v1 = /-->/g, u1 = />/g, $ = RegExp(`>|${J}(?:([^\\s"'>=/]+)(${J}*=${J}*(?:[^
1317
- \f\r"'\`<>=]|("|')|))|$)`, "g"), p1 = /'/g, y1 = /"/g, L1 = /^(?:script|style|textarea|title)$/i, T = Symbol.for("lit-noChange"), c = Symbol.for("lit-nothing"), g1 = /* @__PURE__ */ new WeakMap(), x = L.createTreeWalker(L, 129);
1390
+ const B = globalThis, q = B.trustedTypes, f1 = q ? q.createPolicy("lit-html", { createHTML: (s) => s }) : void 0, x1 = "$lit$", w = `lit$${Math.random().toFixed(9).slice(2)}$`, $1 = "?" + w, r5 = `<${$1}>`, L = document, G = () => L.createComment(""), k = (s) => s === null || typeof s != "object" && typeof s != "function", r1 = Array.isArray, s5 = (s) => r1(s) || typeof (s == null ? void 0 : s[Symbol.iterator]) == "function", J = `[
1391
+ \f\r]`, U = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, v1 = /-->/g, u1 = />/g, x = RegExp(`>|${J}(?:([^\\s"'>=/]+)(${J}*=${J}*(?:[^
1392
+ \f\r"'\`<>=]|("|')|))|$)`, "g"), p1 = /'/g, y1 = /"/g, L1 = /^(?:script|style|textarea|title)$/i, I = Symbol.for("lit-noChange"), c = Symbol.for("lit-nothing"), g1 = /* @__PURE__ */ new WeakMap(), $ = L.createTreeWalker(L, 129);
1318
1393
  function M1(s, t) {
1319
1394
  if (!r1(s) || !s.hasOwnProperty("raw")) throw Error("invalid template strings array");
1320
1395
  return f1 !== void 0 ? f1.createHTML(t) : t;
1321
1396
  }
1322
1397
  const n5 = (s, t) => {
1323
1398
  const e = s.length - 1, o = [];
1324
- let r, i = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", n = k;
1399
+ let r, i = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", n = U;
1325
1400
  for (let l = 0; l < e; l++) {
1326
1401
  const C = s[l];
1327
1402
  let h, d, a = -1, g = 0;
1328
- for (; g < C.length && (n.lastIndex = g, d = n.exec(C), d !== null); ) g = n.lastIndex, n === k ? d[1] === "!--" ? n = v1 : d[1] !== void 0 ? n = u1 : d[2] !== void 0 ? (L1.test(d[2]) && (r = RegExp("</" + d[2], "g")), n = $) : d[3] !== void 0 && (n = $) : n === $ ? d[0] === ">" ? (n = r ?? k, a = -1) : d[1] === void 0 ? a = -2 : (a = n.lastIndex - d[2].length, h = d[1], n = d[3] === void 0 ? $ : d[3] === '"' ? y1 : p1) : n === y1 || n === p1 ? n = $ : n === v1 || n === u1 ? n = k : (n = $, r = void 0);
1329
- const b = n === $ && s[l + 1].startsWith("/>") ? " " : "";
1330
- i += n === k ? C + r5 : a >= 0 ? (o.push(h), C.slice(0, a) + $1 + C.slice(a) + w + b) : C + w + (a === -2 ? l : b);
1403
+ for (; g < C.length && (n.lastIndex = g, d = n.exec(C), d !== null); ) g = n.lastIndex, n === U ? d[1] === "!--" ? n = v1 : d[1] !== void 0 ? n = u1 : d[2] !== void 0 ? (L1.test(d[2]) && (r = RegExp("</" + d[2], "g")), n = x) : d[3] !== void 0 && (n = x) : n === x ? d[0] === ">" ? (n = r ?? U, a = -1) : d[1] === void 0 ? a = -2 : (a = n.lastIndex - d[2].length, h = d[1], n = d[3] === void 0 ? x : d[3] === '"' ? y1 : p1) : n === y1 || n === p1 ? n = x : n === v1 || n === u1 ? n = U : (n = x, r = void 0);
1404
+ const b = n === x && s[l + 1].startsWith("/>") ? " " : "";
1405
+ i += n === U ? C + r5 : a >= 0 ? (o.push(h), C.slice(0, a) + x1 + C.slice(a) + w + b) : C + w + (a === -2 ? l : b);
1331
1406
  }
1332
1407
  return [M1(s, i + (s[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), o];
1333
1408
  };
1334
- class R {
1409
+ class T {
1335
1410
  constructor({ strings: t, _$litType$: e }, o) {
1336
1411
  let r;
1337
1412
  this.parts = [];
1338
1413
  let i = 0, n = 0;
1339
1414
  const l = t.length - 1, C = this.parts, [h, d] = n5(t, e);
1340
- if (this.el = R.createElement(h, o), x.currentNode = this.el.content, e === 2 || e === 3) {
1415
+ if (this.el = T.createElement(h, o), $.currentNode = this.el.content, e === 2 || e === 3) {
1341
1416
  const a = this.el.content.firstChild;
1342
1417
  a.replaceWith(...a.childNodes);
1343
1418
  }
1344
- for (; (r = x.nextNode()) !== null && C.length < l; ) {
1419
+ for (; (r = $.nextNode()) !== null && C.length < l; ) {
1345
1420
  if (r.nodeType === 1) {
1346
- if (r.hasAttributes()) for (const a of r.getAttributeNames()) if (a.endsWith($1)) {
1347
- const g = d[n++], b = r.getAttribute(a).split(w), I = /([.?@])?(.*)/.exec(g);
1348
- C.push({ type: 1, index: i, name: I[2], strings: b, ctor: I[1] === "." ? C5 : I[1] === "?" ? l5 : I[1] === "@" ? a5 : Y }), r.removeAttribute(a);
1421
+ if (r.hasAttributes()) for (const a of r.getAttributeNames()) if (a.endsWith(x1)) {
1422
+ const g = d[n++], b = r.getAttribute(a).split(w), R = /([.?@])?(.*)/.exec(g);
1423
+ C.push({ type: 1, index: i, name: R[2], strings: b, ctor: R[1] === "." ? C5 : R[1] === "?" ? l5 : R[1] === "@" ? a5 : K }), r.removeAttribute(a);
1349
1424
  } else a.startsWith(w) && (C.push({ type: 6, index: i }), r.removeAttribute(a));
1350
1425
  if (L1.test(r.tagName)) {
1351
1426
  const a = r.textContent.split(w), g = a.length - 1;
1352
1427
  if (g > 0) {
1353
- r.textContent = W ? W.emptyScript : "";
1354
- for (let b = 0; b < g; b++) r.append(a[b], F()), x.nextNode(), C.push({ type: 2, index: ++i });
1355
- r.append(a[g], F());
1428
+ r.textContent = q ? q.emptyScript : "";
1429
+ for (let b = 0; b < g; b++) r.append(a[b], G()), $.nextNode(), C.push({ type: 2, index: ++i });
1430
+ r.append(a[g], G());
1356
1431
  }
1357
1432
  }
1358
- } else if (r.nodeType === 8) if (r.data === x1) C.push({ type: 2, index: i });
1433
+ } else if (r.nodeType === 8) if (r.data === $1) C.push({ type: 2, index: i });
1359
1434
  else {
1360
1435
  let a = -1;
1361
1436
  for (; (a = r.data.indexOf(w, a + 1)) !== -1; ) C.push({ type: 7, index: i }), a += w.length - 1;
@@ -1368,12 +1443,12 @@ class R {
1368
1443
  return o.innerHTML = t, o;
1369
1444
  }
1370
1445
  }
1371
- function H(s, t, e = s, o) {
1446
+ function Z(s, t, e = s, o) {
1372
1447
  var n, l;
1373
- if (t === T) return t;
1448
+ if (t === I) return t;
1374
1449
  let r = o !== void 0 ? (n = e._$Co) == null ? void 0 : n[o] : e._$Cl;
1375
- const i = O(t) ? void 0 : t._$litDirective$;
1376
- return (r == null ? void 0 : r.constructor) !== i && ((l = r == null ? void 0 : r._$AO) == null || l.call(r, !1), i === void 0 ? r = void 0 : (r = new i(s), r._$AT(s, e, o)), o !== void 0 ? (e._$Co ?? (e._$Co = []))[o] = r : e._$Cl = r), r !== void 0 && (t = H(s, r._$AS(s, t.values), r, o)), t;
1450
+ const i = k(t) ? void 0 : t._$litDirective$;
1451
+ return (r == null ? void 0 : r.constructor) !== i && ((l = r == null ? void 0 : r._$AO) == null || l.call(r, !1), i === void 0 ? r = void 0 : (r = new i(s), r._$AT(s, e, o)), o !== void 0 ? (e._$Co ?? (e._$Co = []))[o] = r : e._$Cl = r), r !== void 0 && (t = Z(s, r._$AS(s, t.values), r, o)), t;
1377
1452
  }
1378
1453
  class i5 {
1379
1454
  constructor(t, e) {
@@ -1387,23 +1462,23 @@ class i5 {
1387
1462
  }
1388
1463
  u(t) {
1389
1464
  const { el: { content: e }, parts: o } = this._$AD, r = ((t == null ? void 0 : t.creationScope) ?? L).importNode(e, !0);
1390
- x.currentNode = r;
1391
- let i = x.nextNode(), n = 0, l = 0, C = o[0];
1465
+ $.currentNode = r;
1466
+ let i = $.nextNode(), n = 0, l = 0, C = o[0];
1392
1467
  for (; C !== void 0; ) {
1393
1468
  if (n === C.index) {
1394
1469
  let h;
1395
- C.type === 2 ? h = new K(i, i.nextSibling, this, t) : C.type === 1 ? h = new C.ctor(i, C.name, C.strings, this, t) : C.type === 6 && (h = new c5(i, this, t)), this._$AV.push(h), C = o[++l];
1470
+ C.type === 2 ? h = new W(i, i.nextSibling, this, t) : C.type === 1 ? h = new C.ctor(i, C.name, C.strings, this, t) : C.type === 6 && (h = new c5(i, this, t)), this._$AV.push(h), C = o[++l];
1396
1471
  }
1397
- n !== (C == null ? void 0 : C.index) && (i = x.nextNode(), n++);
1472
+ n !== (C == null ? void 0 : C.index) && (i = $.nextNode(), n++);
1398
1473
  }
1399
- return x.currentNode = L, r;
1474
+ return $.currentNode = L, r;
1400
1475
  }
1401
1476
  p(t) {
1402
1477
  let e = 0;
1403
1478
  for (const o of this._$AV) o !== void 0 && (o.strings !== void 0 ? (o._$AI(t, o, e), e += o.strings.length - 2) : o._$AI(t[e])), e++;
1404
1479
  }
1405
1480
  }
1406
- class K {
1481
+ class W {
1407
1482
  get _$AU() {
1408
1483
  var t;
1409
1484
  return ((t = this._$AM) == null ? void 0 : t._$AU) ?? this._$Cv;
@@ -1423,7 +1498,7 @@ class K {
1423
1498
  return this._$AB;
1424
1499
  }
1425
1500
  _$AI(t, e = this) {
1426
- t = H(this, t, e), O(t) ? t === c || t == null || t === "" ? (this._$AH !== c && this._$AR(), this._$AH = c) : t !== this._$AH && t !== T && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : s5(t) ? this.k(t) : this._(t);
1501
+ t = Z(this, t, e), k(t) ? t === c || t == null || t === "" ? (this._$AH !== c && this._$AR(), this._$AH = c) : t !== this._$AH && t !== I && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : s5(t) ? this.k(t) : this._(t);
1427
1502
  }
1428
1503
  O(t) {
1429
1504
  return this._$AA.parentNode.insertBefore(t, this._$AB);
@@ -1432,11 +1507,11 @@ class K {
1432
1507
  this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
1433
1508
  }
1434
1509
  _(t) {
1435
- this._$AH !== c && O(this._$AH) ? this._$AA.nextSibling.data = t : this.T(L.createTextNode(t)), this._$AH = t;
1510
+ this._$AH !== c && k(this._$AH) ? this._$AA.nextSibling.data = t : this.T(L.createTextNode(t)), this._$AH = t;
1436
1511
  }
1437
1512
  $(t) {
1438
1513
  var i;
1439
- const { values: e, _$litType$: o } = t, r = typeof o == "number" ? this._$AC(t) : (o.el === void 0 && (o.el = R.createElement(M1(o.h, o.h[0]), this.options)), o);
1514
+ const { values: e, _$litType$: o } = t, r = typeof o == "number" ? this._$AC(t) : (o.el === void 0 && (o.el = T.createElement(M1(o.h, o.h[0]), this.options)), o);
1440
1515
  if (((i = this._$AH) == null ? void 0 : i._$AD) === r) this._$AH.p(e);
1441
1516
  else {
1442
1517
  const n = new i5(r, this), l = n.u(this.options);
@@ -1445,13 +1520,13 @@ class K {
1445
1520
  }
1446
1521
  _$AC(t) {
1447
1522
  let e = g1.get(t.strings);
1448
- return e === void 0 && g1.set(t.strings, e = new R(t)), e;
1523
+ return e === void 0 && g1.set(t.strings, e = new T(t)), e;
1449
1524
  }
1450
1525
  k(t) {
1451
1526
  r1(this._$AH) || (this._$AH = [], this._$AR());
1452
1527
  const e = this._$AH;
1453
1528
  let o, r = 0;
1454
- for (const i of t) r === e.length ? e.push(o = new K(this.O(F()), this.O(F()), this, this.options)) : o = e[r], o._$AI(i), r++;
1529
+ for (const i of t) r === e.length ? e.push(o = new W(this.O(G()), this.O(G()), this, this.options)) : o = e[r], o._$AI(i), r++;
1455
1530
  r < e.length && (this._$AR(o && o._$AB.nextSibling, r), e.length = r);
1456
1531
  }
1457
1532
  _$AR(t = this._$AA.nextSibling, e) {
@@ -1466,7 +1541,7 @@ class K {
1466
1541
  this._$AM === void 0 && (this._$Cv = t, (e = this._$AP) == null || e.call(this, t));
1467
1542
  }
1468
1543
  }
1469
- class Y {
1544
+ class K {
1470
1545
  get tagName() {
1471
1546
  return this.element.tagName;
1472
1547
  }
@@ -1479,11 +1554,11 @@ class Y {
1479
1554
  _$AI(t, e = this, o, r) {
1480
1555
  const i = this.strings;
1481
1556
  let n = !1;
1482
- if (i === void 0) t = H(this, t, e, 0), n = !O(t) || t !== this._$AH && t !== T, n && (this._$AH = t);
1557
+ if (i === void 0) t = Z(this, t, e, 0), n = !k(t) || t !== this._$AH && t !== I, n && (this._$AH = t);
1483
1558
  else {
1484
1559
  const l = t;
1485
1560
  let C, h;
1486
- for (t = i[0], C = 0; C < i.length - 1; C++) h = H(this, l[o + C], e, C), h === T && (h = this._$AH[C]), n || (n = !O(h) || h !== this._$AH[C]), h === c ? t = c : t !== c && (t += (h ?? "") + i[C + 1]), this._$AH[C] = h;
1561
+ for (t = i[0], C = 0; C < i.length - 1; C++) h = Z(this, l[o + C], e, C), h === I && (h = this._$AH[C]), n || (n = !k(h) || h !== this._$AH[C]), h === c ? t = c : t !== c && (t += (h ?? "") + i[C + 1]), this._$AH[C] = h;
1487
1562
  }
1488
1563
  n && !r && this.j(t);
1489
1564
  }
@@ -1491,7 +1566,7 @@ class Y {
1491
1566
  t === c ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
1492
1567
  }
1493
1568
  }
1494
- class C5 extends Y {
1569
+ class C5 extends K {
1495
1570
  constructor() {
1496
1571
  super(...arguments), this.type = 3;
1497
1572
  }
@@ -1499,7 +1574,7 @@ class C5 extends Y {
1499
1574
  this.element[this.name] = t === c ? void 0 : t;
1500
1575
  }
1501
1576
  }
1502
- class l5 extends Y {
1577
+ class l5 extends K {
1503
1578
  constructor() {
1504
1579
  super(...arguments), this.type = 4;
1505
1580
  }
@@ -1507,12 +1582,12 @@ class l5 extends Y {
1507
1582
  this.element.toggleAttribute(this.name, !!t && t !== c);
1508
1583
  }
1509
1584
  }
1510
- class a5 extends Y {
1585
+ class a5 extends K {
1511
1586
  constructor(t, e, o, r, i) {
1512
1587
  super(t, e, o, r, i), this.type = 5;
1513
1588
  }
1514
1589
  _$AI(t, e = this) {
1515
- if ((t = H(this, t, e, 0) ?? c) === T) return;
1590
+ if ((t = Z(this, t, e, 0) ?? c) === I) return;
1516
1591
  const o = this._$AH, r = t === c && o !== c || t.capture !== o.capture || t.once !== o.once || t.passive !== o.passive, i = t !== c && (o === c || r);
1517
1592
  r && this.element.removeEventListener(this.name, this, o), i && this.element.addEventListener(this.name, this, t), this._$AH = t;
1518
1593
  }
@@ -1529,11 +1604,11 @@ class c5 {
1529
1604
  return this._$AM._$AU;
1530
1605
  }
1531
1606
  _$AI(t) {
1532
- H(this, t);
1607
+ Z(this, t);
1533
1608
  }
1534
1609
  }
1535
1610
  const X = B.litHtmlPolyfillSupport;
1536
- X == null || X(R, K), (B.litHtmlVersions ?? (B.litHtmlVersions = [])).push("3.2.1");
1611
+ X == null || X(T, W), (B.litHtmlVersions ?? (B.litHtmlVersions = [])).push("3.2.1");
1537
1612
  /**
1538
1613
  * @license
1539
1614
  * Copyright 2018 Google LLC
@@ -1674,12 +1749,12 @@ const f = (p = class extends _1 {
1674
1749
  "outline",
1675
1750
  "ghost",
1676
1751
  "text"
1677
- ], p.VALID_TYPES = ["submit", "reset", "button"], p.styles = T1, p.formAssociated = !0, p);
1752
+ ], p.VALID_TYPES = ["submit", "reset", "button"], p.styles = I1, p.formAssociated = !0, p);
1678
1753
  u([
1679
1754
  v({ type: String })
1680
1755
  ], f.prototype, "id", 2);
1681
1756
  u([
1682
- v({ type: String })
1757
+ v({ type: String, reflect: !0 })
1683
1758
  ], f.prototype, "name", 2);
1684
1759
  u([
1685
1760
  v({ reflect: !0 })