@nysds/nys-checkbox 1.21.0 → 1.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/nys-checkbox.d.ts +77 -7
  2. package/dist/nys-checkbox.js +261 -200
  3. package/dist/nys-checkbox.js.map +1 -1
  4. package/dist/nys-checkboxgroup.d.ts +46 -0
  5. package/package.json +8 -8
package/dist/nys-checkbox.js CHANGED
@@ -1,5 +1,5 @@
1
- import { LitElement as f, unsafeCSS as m, html as y, nothing as C } from "lit";
2
- import { property as s, state as _ } from "lit/decorators.js";
1
+ import { LitElement as m, unsafeCSS as E, html as y, nothing as V } from "lit";
2
+ import { property as o, state as p } from "lit/decorators.js";
3
3
  import { ifDefined as u } from "lit/directives/if-defined.js";
4
4
  import "@nysds/nys-label";
5
5
  import "@nysds/nys-errormessage";
@@ -10,75 +10,86 @@ import "@nysds/nys-textinput";
10
10
  * █ █ █ █▄▄▄█ ▀▀▀▄▄ █ █ ▀▀▀▄▄
11
11
  * █ ▀█ █ █▄▄▄█ █▄▄▀ █▄▄▄█
12
12
  *
13
- * Checkbox Component v1.21.0
13
+ * Checkbox Component v1.22.0
14
14
  * Part of the New York State Design System
15
15
  * Repository: https://github.com/its-hcd/nysds
16
16
  * License: MIT
17
17
  */
18
18
  /*!
19
- * New York State Design System v1.21.0
19
+ * New York State Design System v1.22.0
20
20
  * Description: A design system for New York State's digital products.
21
21
  * Repository: https://github.com/its-hcd/nysds
22
22
  * License: MIT
23
23
  */
24
- var S = 0;
25
- function q(n) {
26
- return `${n}-${Date.now()}-${S++}`;
24
+ let q = 0;
25
+ function $(i) {
26
+ return `${i}-${Date.now()}-${q++}`;
27
27
  }
28
- function $(n) {
29
- return n.filter((e) => !!e);
28
+ function _(i, e, t) {
29
+ i.dispatchEvent(
30
+ new CustomEvent(e, { detail: t, bubbles: !0, composed: !0 })
31
+ );
30
32
  }
31
- var I = {
33
+ function f(i, e) {
34
+ i.dispatchEvent(
35
+ new Event(`nys-${e}`, { bubbles: !0, composed: !0 })
36
+ );
37
+ }
38
+ function A(i) {
39
+ return i.filter((e) => !!e);
40
+ }
41
+ const I = {
32
42
  labelledby: "ariaLabelledByElements",
33
43
  describedby: "ariaDescribedByElements"
34
- }, A = {
44
+ }, O = {
35
45
  labelledby: "aria-label",
36
46
  describedby: "aria-description"
37
47
  };
38
- function v(n, e, t) {
39
- const r = $(t), o = I[e], c = A[e], i = n;
40
- o in n && (i[o] = r.length ? r : null);
48
+ function g(i, e, t) {
49
+ const r = A(t), s = I[e], c = O[e], n = i;
50
+ s in i && (n[s] = r.length ? r : null);
41
51
  const b = r.map((k) => k.textContent?.trim() ?? "").filter(Boolean).join(" ");
42
- b ? n.setAttribute(c, b) : n.removeAttribute(c);
52
+ b ? i.setAttribute(c, b) : i.removeAttribute(c);
43
53
  }
44
- var O = (n) => {
45
- class e extends n {
54
+ const M = (i) => {
55
+ class e extends i {
46
56
  get idPrefix() {
47
57
  return this.localName || "nys-element";
48
58
  }
49
59
  ensureId() {
50
- this.id || (this.id = q(this.idPrefix));
60
+ this.id || (this.id = $(this.idPrefix));
51
61
  }
52
62
  connectedCallback() {
53
63
  super.connectedCallback(), this.ensureId();
54
64
  }
55
65
  }
56
66
  return e;
57
- }, V = (n) => {
58
- class e extends O(n) {
59
- constructor(...r) {
60
- super(...r), this.__internals = null;
67
+ }, L = (i) => {
68
+ class e extends M(i) {
69
+ constructor() {
70
+ super(...arguments), this.__internals = null;
61
71
  }
62
72
  get internals() {
63
73
  if (this.__internals) return this.__internals;
64
- if (typeof this.attachInternals == "function") try {
65
- this.__internals = this.attachInternals();
66
- } catch {
67
- this.__internals = null;
68
- }
74
+ if (typeof this.attachInternals == "function")
75
+ try {
76
+ this.__internals = this.attachInternals();
77
+ } catch {
78
+ this.__internals = null;
79
+ }
69
80
  return this.__internals;
70
81
  }
71
82
  get defaultRole() {
72
83
  return null;
73
84
  }
74
- setHostAria(r, o) {
85
+ setHostAria(r, s) {
75
86
  const c = this.internals;
76
87
  if (c && r in c) {
77
- c[r] = o;
88
+ c[r] = s;
78
89
  return;
79
90
  }
80
- const i = L(r);
81
- o === null ? this.removeAttribute(i) : this.setAttribute(i, o);
91
+ const n = F(r);
92
+ s === null ? this.removeAttribute(n) : this.setAttribute(n, s);
82
93
  }
83
94
  reflectDefaultSemantics() {
84
95
  const r = this.defaultRole;
@@ -90,21 +101,33 @@ var O = (n) => {
90
101
  }
91
102
  return e;
92
103
  };
93
- function L(n) {
94
- if (n === "role") return "role";
95
- const e = n.replace(/^aria/, "");
104
+ function F(i) {
105
+ if (i === "role") return "role";
106
+ const e = i.replace(/^aria/, "");
96
107
  return "aria-" + e.charAt(0).toLowerCase() + e.slice(1);
97
108
  }
98
- var z = (n) => {
99
- const t = class t extends V(n) {
100
- setFormValue(o) {
101
- this.internals?.setFormValue(o ?? null);
109
+ const z = (i) => {
110
+ const e = class extends L(i) {
111
+ constructor() {
112
+ super(...arguments), this.__internalValidationMessage = "";
113
+ }
114
+ get internalValidationMessage() {
115
+ return this.__internalValidationMessage;
116
+ }
117
+ set internalValidationMessage(s) {
118
+ s !== this.__internalValidationMessage && (this.__internalValidationMessage = s, this.requestUpdate("internalValidationMessage"));
102
119
  }
103
- setValidityFromState(o, c, i) {
120
+ resolvedErrorMessage() {
121
+ return this.errorMessage || this.internalValidationMessage;
122
+ }
123
+ setFormValue(s) {
124
+ this.internals?.setFormValue(s ?? null);
125
+ }
126
+ setValidityFromState(s, c, n) {
104
127
  const b = this.internals;
105
128
  if (!b) return;
106
- const k = Object.values(o).some(Boolean);
107
- k ? b.setValidity(o, c ?? "Invalid value", i) : b.setValidity({}), this.setHostAria("ariaInvalid", k ? "true" : "false");
129
+ const k = Object.values(s).some(Boolean);
130
+ k ? b.setValidity(s, c ?? "Invalid value", n) : b.setValidity({}), this.setHostAria("ariaInvalid", k ? "true" : "false");
108
131
  }
109
132
  clearValidity() {
110
133
  this.internals?.setValidity({}), this.setHostAria("ariaInvalid", "false");
@@ -116,22 +139,32 @@ var z = (n) => {
116
139
  return this.internals?.reportValidity() ?? !0;
117
140
  }
118
141
  formResetCallback() {
119
- this.clearValidity();
142
+ this.internalValidationMessage = "", this.clearValidity();
120
143
  }
121
144
  };
122
- t.formAssociated = !0;
123
- let e = t;
124
- return e;
125
- }, g = /* @__PURE__ */ z(f);
126
- const E = ':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-font-weight--standalone: var(--nys-font-weight-semibold, 600);--_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;flex-direction:column;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)}.nys-checkbox .nys-checkbox__main-container{display:flex;font-family:var(--_nys-checkbox-font-family);font-size:var(--_nys-checkbox-font-size);line-height:var(--_nys-checkbox-line-height);align-items:center;gap:var(--_nys-checkbox-gap)}.nys-checkbox .nys-checkbox__main-container.has-description{align-items:flex-start}.nys-checkbox__checkbox-wrapper{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:var(--nys-color-ink-reverse, #ffffff)}.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;margin:0}.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:hover .nys-checkbox__checkbox:not(:disabled):not(:checked),.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:hover .nys-checkbox__checkbox:not(:disabled):checked,.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:active .nys-checkbox__checkbox:not(:disabled):not(: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:active .nys-checkbox__checkbox:not(:disabled):checked,.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-visible),:host([tile][showError]) .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__main-container>nys-label{--_nys-label-font-weight: var(--_nys-checkbox-font-weight)}:host(:not([tile])) .nys-checkbox__main-container>nys-label.standalone{--_nys-label-font-weight: var(--_nys-checkbox-font-weight--standalone)}:host([tile]) .nys-checkbox__main-container>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}.nys-checkbox__other-container{display:flex;padding-inline-start:calc(var(--_nys-checkbox-size) + var(--_nys-checkbox-gap))}';
127
- var R = Object.defineProperty, d = (n, e, t, r) => {
128
- for (var o = void 0, c = n.length - 1, i; c >= 0; c--)
129
- (i = n[c]) && (o = i(e, t, o) || o);
130
- return o && R(e, t, o), o;
145
+ return e.formAssociated = !0, e;
146
+ }, w = /* @__PURE__ */ z(m), C = ':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-font-weight--standalone: var(--nys-font-weight-semibold, 600);--_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;flex-direction:column;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)}.nys-checkbox .nys-checkbox__main-container{display:flex;font-family:var(--_nys-checkbox-font-family);font-size:var(--_nys-checkbox-font-size);line-height:var(--_nys-checkbox-line-height);align-items:center;gap:var(--_nys-checkbox-gap)}.nys-checkbox .nys-checkbox__main-container.has-description{align-items:flex-start}.nys-checkbox__checkbox-wrapper{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:var(--nys-color-ink-reverse, #ffffff)}.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;margin:0}.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:hover .nys-checkbox__checkbox:not(:disabled):not(:checked),.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:hover .nys-checkbox__checkbox:not(:disabled):checked,.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:active .nys-checkbox__checkbox:not(:disabled):not(: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:active .nys-checkbox__checkbox:not(:disabled):checked,.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-visible),:host([tile][showError]) .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__main-container>nys-label{--_nys-label-font-weight: var(--_nys-checkbox-font-weight)}:host(:not([tile])) .nys-checkbox__main-container>nys-label.standalone{--_nys-label-font-weight: var(--_nys-checkbox-font-weight--standalone)}:host([tile]) .nys-checkbox__main-container>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}.nys-checkbox__other-container{display:flex;padding-inline-start:calc(var(--_nys-checkbox-size) + var(--_nys-checkbox-gap))}';
147
+ var R = Object.defineProperty, B = Object.getOwnPropertyDescriptor, d = (i, e, t, r) => {
148
+ for (var s = r > 1 ? void 0 : r ? B(e, t) : e, c = i.length - 1, n; c >= 0; c--)
149
+ (n = i[c]) && (s = (r ? n(e, t, s) : n(s)) || s);
150
+ return r && s && R(e, t, s), s;
131
151
  };
132
- const p = class p extends g {
152
+ const x = class x extends w {
133
153
  constructor() {
134
- super(...arguments), 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.form = null, this.size = "md", this._slottedDescriptionText = "", this._hasOtherError = !1, this._otherErrorCheckbox = null, this._hasSharedNames = !1;
154
+ super(...arguments), 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.form = null, this.size = "md", this._value = [], this._syncingValueFromChildren = !1, this._slottedDescriptionText = "", this._hasOtherError = !1, this._otherErrorCheckbox = null, this._hasSharedNames = !1, this._handleFocusIn = (e) => {
155
+ const t = e.relatedTarget;
156
+ (!t || !this.contains(t)) && f(this, "focus");
157
+ }, this._handleFocusOut = (e) => {
158
+ const t = e.relatedTarget;
159
+ (!t || !this.contains(t)) && f(this, "blur");
160
+ };
161
+ }
162
+ get value() {
163
+ return this._value;
164
+ }
165
+ set value(e) {
166
+ const t = this._value;
167
+ this._value = Array.isArray(e) ? [...e] : [], this._syncingValueFromChildren || this._applyValueToChildren(), this.requestUpdate("value", t);
135
168
  }
136
169
  /**
137
170
  * Lifecycle methods
@@ -140,10 +173,10 @@ const p = class p extends g {
140
173
  * NysFormControlElement (@nysds/internals).
141
174
  */
142
175
  connectedCallback() {
143
- super.connectedCallback(), this.addEventListener("nys-change", this._handleCheckboxChange), this.addEventListener("nys-other-input", this._handleOtherInput), this.addEventListener("invalid", this._handleInvalid), this.addEventListener("nys-error", this._handleChildError), this.addEventListener("nys-error-clear", this._handleChildErrorClear);
176
+ super.connectedCallback(), this.addEventListener("nys-change", this._handleCheckboxChange), this.addEventListener("nys-other-input", this._handleOtherInput), this.addEventListener("invalid", this._handleInvalid), this.addEventListener("nys-error", this._handleChildError), this.addEventListener("nys-error-clear", this._handleChildErrorClear), this.addEventListener("focusin", this._handleFocusIn), this.addEventListener("focusout", this._handleFocusOut);
144
177
  }
145
178
  disconnectedCallback() {
146
- super.disconnectedCallback(), this.removeEventListener("nys-change", this._handleCheckboxChange), this.removeEventListener("nys-other-input", this._handleOtherInput), this.removeEventListener("invalid", this._handleInvalid), this.removeEventListener("nys-error", this._handleChildError), this.removeEventListener("nys-error-clear", this._handleChildErrorClear);
179
+ super.disconnectedCallback(), this.removeEventListener("nys-change", this._handleCheckboxChange), this.removeEventListener("nys-other-input", this._handleOtherInput), this.removeEventListener("invalid", this._handleInvalid), this.removeEventListener("nys-error", this._handleChildError), this.removeEventListener("nys-error-clear", this._handleChildErrorClear), this.removeEventListener("focusin", this._handleFocusIn), this.removeEventListener("focusout", this._handleFocusOut);
147
180
  }
148
181
  firstUpdated() {
149
182
  this._setGroupExist(), this._updateCheckboxSize(), this._updateCheckboxTile(), this._updateCheckboxShowError();
@@ -170,33 +203,33 @@ const p = class p extends g {
170
203
  }
171
204
  // Initial update on checkbox required attribute
172
205
  async _setupCheckboxRequired() {
173
- const e = this.querySelector("nys-checkbox"), t = this.errorMessage || "This field is required", r = e ? await e.getInputElement() : null;
174
- this.setValidityFromState(
206
+ const e = this.querySelector("nys-checkbox"), t = e ? await e.getInputElement() : null;
207
+ this.internalValidationMessage = "This field is required", this.setValidityFromState(
175
208
  { valueMissing: !0 },
176
- t,
177
- r || this
209
+ this.resolvedErrorMessage(),
210
+ t || this
178
211
  );
179
212
  }
180
213
  // Updates the required attribute of each checkbox in the group
181
214
  async _manageRequire() {
182
215
  if (!this.required) {
183
- this.clearValidity(), this.showError = !1;
216
+ this.clearValidity(), this.internalValidationMessage = "", this.showError = !1;
184
217
  return;
185
218
  }
186
- const e = this.errorMessage || "You must make a selection to proceed.", t = Array.from(
219
+ const e = Array.from(
187
220
  this.querySelectorAll("nys-checkbox")
188
- ), r = this._hasAtLeastOneChecked(), o = t ? await t[0].getInputElement().catch(() => null) : null;
189
- this.clearValidity(), this.showError = !1, r ? this._hasOtherError && this._otherErrorCheckbox && (this._setCustomOtherError(), this.showError = !0) : this._hasOtherError ? (this._setCustomOtherError(), this.showError = !0) : (this.setValidityFromState(
221
+ ), t = this._hasAtLeastOneChecked(), r = e ? await e[0].getInputElement().catch(() => null) : null;
222
+ this.clearValidity(), this.internalValidationMessage = "", this.showError = !1, t ? this._hasOtherError && this._otherErrorCheckbox && (this._setCustomOtherError(), this.showError = !0) : this._hasOtherError ? (this._setCustomOtherError(), this.showError = !0) : (this.internalValidationMessage = "You must make a selection to proceed.", this.setValidityFromState(
190
223
  { valueMissing: !0 },
191
- e,
192
- o ?? this
224
+ this.resolvedErrorMessage(),
225
+ r ?? this
193
226
  ), this.showError = !0);
194
227
  }
195
228
  _setCustomOtherError() {
196
229
  const t = this._otherErrorCheckbox?.shadowRoot?.querySelector("nys-textinput") || this._otherErrorCheckbox;
197
- this.setValidityFromState(
230
+ this.internalValidationMessage = "Please complete this field.", this.setValidityFromState(
198
231
  { customError: !0 },
199
- "Please complete this field.",
232
+ this.resolvedErrorMessage(),
200
233
  t
201
234
  );
202
235
  }
@@ -232,19 +265,19 @@ const p = class p extends g {
232
265
  formResetCallback() {
233
266
  this.querySelectorAll("nys-checkbox").forEach((t) => {
234
267
  t.formResetCallback();
235
- }), this.setFormValue(""), this.showError = !1, this.clearValidity(), this.requestUpdate();
268
+ }), this.setFormValue(""), this._setValueFromChildren([]), this.showError = !1, this.internalValidationMessage = "", this.clearValidity(), this.requestUpdate();
236
269
  }
237
270
  async _handleInvalid(e) {
238
271
  if (e.preventDefault(), this.internals?.validity.customError) {
239
272
  const c = Array.from(
240
273
  this.querySelectorAll("nys-checkbox")
241
274
  ).find(
242
- (i) => i.other && i.checked
275
+ (n) => n.other && n.checked
243
276
  );
244
277
  if (c) {
245
- const i = c.shadowRoot?.querySelector("nys-textinput");
246
- if (i) {
247
- await i.updateComplete, i.focus();
278
+ const n = c.shadowRoot?.querySelector("nys-textinput");
279
+ if (n) {
280
+ await n.updateComplete, n.focus();
248
281
  return;
249
282
  }
250
283
  }
@@ -252,13 +285,13 @@ const p = class p extends g {
252
285
  this.showError = !0, await this._manageRequire();
253
286
  const t = this.querySelector("nys-checkbox"), r = t ? await t.getInputElement() : null;
254
287
  if (r) {
255
- const o = this.internals?.form;
256
- o ? Array.from(o.elements).find((b) => {
288
+ const s = this.internals?.form;
289
+ s ? Array.from(s.elements).find((b) => {
257
290
  if (b.tagName.toLowerCase() === "nys-checkboxgroup") {
258
291
  if (Array.from(
259
292
  this.querySelectorAll("nys-checkbox")
260
293
  ).filter(
261
- (w) => w.checked
294
+ (S) => S.checked
262
295
  ).length === 0)
263
296
  return b;
264
297
  } else
@@ -272,14 +305,19 @@ const p = class p extends g {
272
305
  */
273
306
  // Similar to how native forms handle multiple same-name fields, we group the selected values into a list for FormData.
274
307
  _handleCheckboxChange(e) {
308
+ if (e.target === this) return;
275
309
  const t = Array.from(
276
310
  this.querySelectorAll("nys-checkbox")
277
- );
311
+ ), r = t.filter((s) => s.checked).map((s) => s.value);
278
312
  if (this._hasSharedNames) {
279
- const r = e, { name: o } = r.detail, c = t.filter((i) => i.checked).map((i) => i.value);
280
- this.name = o, this.setFormValue(c.join(", "));
313
+ const s = e, { name: c } = s.detail;
314
+ this.name = c, this.setFormValue(r.join(", "));
281
315
  }
282
- this._checkOtherInputs(t), this._hasOtherError || this._manageRequire();
316
+ this._setValueFromChildren(r), this._checkOtherInputs(t), this._hasOtherError || this._manageRequire(), _(this, "nys-change", {
317
+ id: this.id,
318
+ name: this.name,
319
+ value: [...r]
320
+ });
283
321
  }
284
322
  async _handleChildError(e) {
285
323
  e.stopPropagation();
@@ -288,13 +326,46 @@ const p = class p extends g {
288
326
  }
289
327
  _handleChildErrorClear(e) {
290
328
  const r = e.detail?.sourceCheckbox;
291
- this._otherErrorCheckbox && r !== this._otherErrorCheckbox || (this._hasOtherError = !1, this._otherErrorCheckbox = null, this.clearValidity(), this.showError = !1, this.required && !this._hasAtLeastOneChecked() && this._manageRequire());
329
+ this._otherErrorCheckbox && r !== this._otherErrorCheckbox || (this._hasOtherError = !1, this._otherErrorCheckbox = null, this.clearValidity(), this.internalValidationMessage = "", this.showError = !1, this.required && !this._hasAtLeastOneChecked() && this._manageRequire());
292
330
  }
293
331
  _handleOtherInput() {
294
332
  const t = Array.from(
295
333
  this.querySelectorAll("nys-checkbox")
296
334
  ).filter((r) => r.checked).map((r) => r.value);
297
- this.setFormValue(t.join(", "));
335
+ this._setValueFromChildren(t), this.setFormValue(t.join(", "));
336
+ }
337
+ /**
338
+ * Set `value` from the children's checked state without pushing the same
339
+ * state back down (and without firing `nys-change`).
340
+ */
341
+ _setValueFromChildren(e) {
342
+ this._syncingValueFromChildren = !0, this.value = e, this._syncingValueFromChildren = !1;
343
+ }
344
+ /**
345
+ * Apply a programmatically set `value` to the child checkboxes and the form
346
+ * value. Setting `checked` on a child never fires its `nys-change` (only
347
+ * user interaction does), so no change events echo back.
348
+ */
349
+ _applyValueToChildren() {
350
+ const e = Array.from(
351
+ this.querySelectorAll("nys-checkbox")
352
+ );
353
+ e.length !== 0 && (e.forEach((t) => {
354
+ t.checked = this._value.includes(t.value);
355
+ }), this._hasSharedNames && this.setFormValue(this._value.join(", ")));
356
+ }
357
+ /**
358
+ * Derive `value` from the checked children. Runs off the default slot's
359
+ * `slotchange`, so it covers first render and dynamically added checkboxes
360
+ * without scheduling a second update cycle.
361
+ */
362
+ _handleDefaultSlotChange() {
363
+ const e = Array.from(
364
+ this.querySelectorAll("nys-checkbox")
365
+ );
366
+ this._setValueFromChildren(
367
+ e.filter((t) => t.checked).map((t) => t.value)
368
+ );
298
369
  }
299
370
  async _checkOtherInputs(e) {
300
371
  for (const t of e)
@@ -307,7 +378,7 @@ const p = class p extends g {
307
378
  return;
308
379
  }
309
380
  }
310
- this._hasOtherError && (this._hasOtherError = !1, this._otherErrorCheckbox = null, this.required ? this._manageRequire() : (this.clearValidity(), this.showError = !1));
381
+ this._hasOtherError && (this._hasOtherError = !1, this._otherErrorCheckbox = null, this.required ? this._manageRequire() : (this.clearValidity(), this.internalValidationMessage = "", this.showError = !1));
311
382
  }
312
383
  /** Drupal-like naming support **/
313
384
  _checkSharedNames(e) {
@@ -342,75 +413,78 @@ const p = class p extends g {
342
413
  >
343
414
  </nys-label>
344
415
  <div class="nys-checkboxgroup__content">
345
- <slot></slot>
416
+ <slot @slotchange=${this._handleDefaultSlotChange}></slot>
346
417
  </div>
347
418
  <nys-errormessage
348
419
  id=${this.id + "--error"}
349
420
  ?showError=${this.showError}
350
- errorMessage=${this.internals?.validationMessage || this.errorMessage}
421
+ errorMessage=${this.resolvedErrorMessage()}
351
422
  .showDivider=${!this.tile}
352
423
  ></nys-errormessage>
353
424
  </fieldset>
354
425
  `;
355
426
  }
356
427
  };
357
- p.styles = m(E), p.shadowRootOptions = {
358
- ...f.shadowRootOptions,
428
+ x.styles = E(C), x.shadowRootOptions = {
429
+ ...m.shadowRootOptions,
359
430
  delegatesFocus: !0
360
431
  };
361
- let l = p;
432
+ let l = x;
433
+ d([
434
+ o({ type: String, reflect: !0 })
435
+ ], l.prototype, "id", 2);
362
436
  d([
363
- s({ type: String, reflect: !0 })
364
- ], l.prototype, "id");
437
+ o({ type: String, reflect: !0 })
438
+ ], l.prototype, "name", 2);
365
439
  d([
366
- s({ type: String, reflect: !0 })
367
- ], l.prototype, "name");
440
+ o({ type: Boolean, reflect: !0 })
441
+ ], l.prototype, "required", 2);
368
442
  d([
369
- s({ type: Boolean, reflect: !0 })
370
- ], l.prototype, "required");
443
+ o({ type: Boolean, reflect: !0 })
444
+ ], l.prototype, "optional", 2);
371
445
  d([
372
- s({ type: Boolean, reflect: !0 })
373
- ], l.prototype, "optional");
446
+ o({ type: Boolean, reflect: !0 })
447
+ ], l.prototype, "showError", 2);
374
448
  d([
375
- s({ type: Boolean, reflect: !0 })
376
- ], l.prototype, "showError");
449
+ o({ type: String })
450
+ ], l.prototype, "errorMessage", 2);
377
451
  d([
378
- s({ type: String })
379
- ], l.prototype, "errorMessage");
452
+ o({ type: String })
453
+ ], l.prototype, "label", 2);
380
454
  d([
381
- s({ type: String })
382
- ], l.prototype, "label");
455
+ o({ type: String })
456
+ ], l.prototype, "description", 2);
383
457
  d([
384
- s({ type: String })
385
- ], l.prototype, "description");
458
+ o({ type: Boolean, reflect: !0 })
459
+ ], l.prototype, "tile", 2);
386
460
  d([
387
- s({ type: Boolean, reflect: !0 })
388
- ], l.prototype, "tile");
461
+ o({ type: String })
462
+ ], l.prototype, "tooltip", 2);
389
463
  d([
390
- s({ type: String })
391
- ], l.prototype, "tooltip");
464
+ o({ type: String, reflect: !0 })
465
+ ], l.prototype, "form", 2);
392
466
  d([
393
- s({ type: String, reflect: !0 })
394
- ], l.prototype, "form");
467
+ o({ type: String, reflect: !0 })
468
+ ], l.prototype, "size", 2);
395
469
  d([
396
- s({ type: String, reflect: !0 })
397
- ], l.prototype, "size");
470
+ o({ attribute: !1 })
471
+ ], l.prototype, "value", 1);
398
472
  d([
399
- _()
400
- ], l.prototype, "_slottedDescriptionText");
473
+ p()
474
+ ], l.prototype, "_slottedDescriptionText", 2);
401
475
  d([
402
- _()
403
- ], l.prototype, "_hasOtherError");
476
+ p()
477
+ ], l.prototype, "_hasOtherError", 2);
404
478
  d([
405
- _()
406
- ], l.prototype, "_otherErrorCheckbox");
479
+ p()
480
+ ], l.prototype, "_otherErrorCheckbox", 2);
407
481
  customElements.get("nys-checkboxgroup") || customElements.define("nys-checkboxgroup", l);
408
- var M = Object.defineProperty, h = (n, e, t, r) => {
409
- for (var o = void 0, c = n.length - 1, i; c >= 0; c--)
410
- (i = n[c]) && (o = i(e, t, o) || o);
411
- return o && M(e, t, o), o;
482
+ var D = Object.defineProperty, h = (i, e, t, r) => {
483
+ for (var s = void 0, c = i.length - 1, n; c >= 0; c--)
484
+ (n = i[c]) && (s = n(e, t, s) || s);
485
+ return s && D(e, t, s), s;
412
486
  };
413
- const x = class x extends g {
487
+ const v = class v extends w {
414
488
  constructor() {
415
489
  super(...arguments), 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.tooltip = "", this.size = "md", this.other = !1, this.showOtherError = !1, this.labelledby = "", this.hideLabel = !1, this._mobileQuery = window.matchMedia("(max-width: 479px)"), this.isMobile = this._mobileQuery.matches, this._hasUserInteracted = !1, this._manageLabelClick = () => {
416
490
  const e = this.shadowRoot?.querySelector(
@@ -445,11 +519,12 @@ const x = class x extends g {
445
519
  willUpdate(e) {
446
520
  if (e.has("labelledby") && !this.labelledby) {
447
521
  const t = this.shadowRoot?.querySelector("input");
448
- t && v(t, "labelledby", []);
522
+ t && g(t, "labelledby", []);
449
523
  }
524
+ (e.has("checked") || e.has("value")) && !this.groupExist && this.setFormValue(this.checked ? this.value : null);
450
525
  }
451
526
  updated(e) {
452
- e.has("labelledby") && this.labelledby && this._syncExternalLabel();
527
+ e.has("labelledby") && this.labelledby && this._syncExternalLabel(), e.has("required") && this._manageRequire();
453
528
  }
454
529
  /**
455
530
  * Point the native <input> at a light-DOM element that IDREF attributes cannot
@@ -467,7 +542,7 @@ const x = class x extends g {
467
542
  const t = this.getRootNode().getElementById(
468
543
  this.labelledby
469
544
  );
470
- v(e, "labelledby", [t]);
545
+ g(e, "labelledby", [t]);
471
546
  }
472
547
  /**
473
548
  * Form Integration
@@ -477,12 +552,20 @@ const x = class x extends g {
477
552
  this.groupExist || this.setFormValue(this.checked ? this.value : null);
478
553
  }
479
554
  _manageRequire() {
480
- const e = this.shadowRoot?.querySelector("input"), t = this.errorMessage || "This field is required";
481
- e && (this.required && !this.checked ? this.setValidityFromState({ valueMissing: !0 }, t, e) : this.clearValidity());
555
+ const e = this.shadowRoot?.querySelector("input");
556
+ e && (this.required && !this.checked ? (this.internalValidationMessage = "This field is required", this.setValidityFromState(
557
+ { valueMissing: !0 },
558
+ this.resolvedErrorMessage(),
559
+ e
560
+ )) : this.clearValidity());
482
561
  }
483
562
  _setValidityMessage(e = "") {
484
563
  const t = this.shadowRoot?.querySelector("input");
485
- t && (this.showError = !!e, this.errorMessage?.trim() && e !== "" && (e = this.errorMessage), e ? this.setValidityFromState({ customError: !0 }, e, t) : this.clearValidity());
564
+ t && (this.showError = !!e, this.internalValidationMessage = e, e ? this.setValidityFromState(
565
+ { customError: !0 },
566
+ this.resolvedErrorMessage(),
567
+ t
568
+ ) : this.clearValidity());
486
569
  }
487
570
  _validate() {
488
571
  const e = this.shadowRoot?.querySelector("input");
@@ -495,7 +578,7 @@ const x = class x extends g {
495
578
  formResetCallback() {
496
579
  this.checked = !1, this.setFormValue(null);
497
580
  const e = this.shadowRoot?.querySelector("input");
498
- e && (e.checked = !1), this.showError = !1, this.errorMessage = "", this.clearValidity(), this.requestUpdate();
581
+ e && (e.checked = !1), this.showError = !1, this.internalValidationMessage = "", this.clearValidity(), this.requestUpdate();
499
582
  }
500
583
  /**
501
584
  * Functions
@@ -514,7 +597,7 @@ const x = class x extends g {
514
597
  if (t) {
515
598
  const r = this.internals?.form;
516
599
  r ? Array.from(r.elements).find(
517
- (i) => typeof i.checkValidity == "function" && !i.checkValidity()
600
+ (n) => typeof n.checkValidity == "function" && !n.checkValidity()
518
601
  ) === this && t.focus() : t.focus();
519
602
  }
520
603
  }
@@ -526,31 +609,19 @@ const x = class x extends g {
526
609
  return this.parentElement?.tagName.toLowerCase() !== "nys-checkboxgroup";
527
610
  }
528
611
  _emitChangeEvent() {
529
- this.dispatchEvent(
530
- new CustomEvent("nys-change", {
531
- detail: {
532
- id: this.id,
533
- checked: this.checked,
534
- name: this.name,
535
- value: this.value
536
- },
537
- bubbles: !0,
538
- composed: !0
539
- })
540
- );
612
+ _(this, "nys-change", {
613
+ id: this.id,
614
+ checked: this.checked,
615
+ name: this.name,
616
+ value: this.value
617
+ });
541
618
  }
542
619
  _emitOtherInputEvent() {
543
- this.dispatchEvent(
544
- new CustomEvent("nys-other-input", {
545
- detail: {
546
- id: this.id,
547
- name: this.name,
548
- value: this.value
549
- },
550
- bubbles: !0,
551
- composed: !0
552
- })
553
- );
620
+ _(this, "nys-other-input", {
621
+ id: this.id,
622
+ name: this.name,
623
+ value: this.value
624
+ });
554
625
  }
555
626
  // Handle checkbox change event
556
627
  async _handleChange(e) {
@@ -558,10 +629,10 @@ const x = class x extends g {
558
629
  this.checked = t, this.groupExist || this.setFormValue(this.checked ? this.value : null), this.other && r && !t && (this.showOtherError = !1, this._hasUserInteracted = !1, this._dispatchClearError()), this._validate(), this._emitChangeEvent();
559
630
  }
560
631
  _handleFocus() {
561
- this.dispatchEvent(new Event("nys-focus"));
632
+ f(this, "focus");
562
633
  }
563
634
  _handleBlur() {
564
- this.dispatchEvent(new Event("nys-blur")), this.other && this.checked && (this._hasUserInteracted = !0, this._validateOtherAndEmitError());
635
+ f(this, "blur"), this.other && this.checked && (this._hasUserInteracted = !0, this._validateOtherAndEmitError());
565
636
  }
566
637
  _handleTextInputBlur() {
567
638
  this._hasUserInteracted = !0, this._validateOtherAndEmitError();
@@ -580,28 +651,18 @@ const x = class x extends g {
580
651
  return;
581
652
  }
582
653
  const e = this.value.trim() === "";
583
- this.showOtherError = e, e ? this.dispatchEvent(
584
- new CustomEvent("nys-error", {
585
- detail: {
586
- id: this.id,
587
- name: this.name,
588
- type: "other",
589
- message: "Please enter a value for this option.",
590
- sourceCheckbox: this
591
- },
592
- bubbles: !0,
593
- composed: !0
594
- })
595
- ) : this._dispatchClearError();
654
+ this.showOtherError = e, e ? _(this, "nys-error", {
655
+ id: this.id,
656
+ name: this.name,
657
+ type: "other",
658
+ message: "Please enter a value for this option.",
659
+ sourceCheckbox: this
660
+ }) : this._dispatchClearError();
596
661
  }
597
662
  _dispatchClearError() {
598
- this.dispatchEvent(
599
- new CustomEvent("nys-error-clear", {
600
- detail: { sourceCheckbox: this },
601
- bubbles: !0,
602
- composed: !0
603
- })
604
- );
663
+ _(this, "nys-error-clear", {
664
+ sourceCheckbox: this
665
+ });
605
666
  }
606
667
  render() {
607
668
  return y`
@@ -641,7 +702,7 @@ const x = class x extends g {
641
702
  class="nys-checkbox__icon"
642
703
  ></nys-icon>` : ""}
643
704
  </div>
644
- ${this.hideLabel || this.labelledby || !(this.label || this.other) ? C : y`<nys-label
705
+ ${this.hideLabel || this.labelledby || !(this.label || this.other) ? V : y`<nys-label
645
706
  id="${this.id}--label"
646
707
  tooltip=${this.tooltip}
647
708
  label="${this.label || (this.other ? "Other" : "")}"
@@ -673,76 +734,76 @@ const x = class x extends g {
673
734
  id=${this.id + "--error"}
674
735
  class="single-error-message"
675
736
  ?showError=${this.showError}
676
- errorMessage=${this.internals?.validationMessage || this.errorMessage}
737
+ errorMessage=${this.resolvedErrorMessage()}
677
738
  .showDivider=${!this.tile}
678
739
  ></nys-errormessage>` : ""}
679
740
  `;
680
741
  }
681
742
  };
682
- x.styles = m(E), x.shadowRootOptions = {
683
- ...f.shadowRootOptions,
743
+ v.styles = E(C), v.shadowRootOptions = {
744
+ ...m.shadowRootOptions,
684
745
  delegatesFocus: !0
685
746
  };
686
- let a = x;
747
+ let a = v;
687
748
  h([
688
- s({ type: Boolean, reflect: !0 })
749
+ o({ type: Boolean, reflect: !0 })
689
750
  ], a.prototype, "checked");
690
751
  h([
691
- s({ type: Boolean, reflect: !0 })
752
+ o({ type: Boolean, reflect: !0 })
692
753
  ], a.prototype, "disabled");
693
754
  h([
694
- s({ type: Boolean, reflect: !0 })
755
+ o({ type: Boolean, reflect: !0 })
695
756
  ], a.prototype, "required");
696
757
  h([
697
- s({ type: String })
758
+ o({ type: String })
698
759
  ], a.prototype, "label");
699
760
  h([
700
- s({ type: String })
761
+ o({ type: String })
701
762
  ], a.prototype, "description");
702
763
  h([
703
- s({ type: String, reflect: !0 })
764
+ o({ type: String, reflect: !0 })
704
765
  ], a.prototype, "id");
705
766
  h([
706
- s({ type: String, reflect: !0 })
767
+ o({ type: String, reflect: !0 })
707
768
  ], a.prototype, "name");
708
769
  h([
709
- s({ type: String })
770
+ o({ type: String })
710
771
  ], a.prototype, "value");
711
772
  h([
712
- s({ type: String, reflect: !0 })
773
+ o({ type: String, reflect: !0 })
713
774
  ], a.prototype, "form");
714
775
  h([
715
- s({ type: Boolean, reflect: !0 })
776
+ o({ type: Boolean, reflect: !0 })
716
777
  ], a.prototype, "showError");
717
778
  h([
718
- s({ type: String })
779
+ o({ type: String })
719
780
  ], a.prototype, "errorMessage");
720
781
  h([
721
- s({ type: Boolean })
782
+ p()
722
783
  ], a.prototype, "groupExist");
723
784
  h([
724
- s({ type: Boolean, reflect: !0 })
785
+ o({ type: Boolean, reflect: !0 })
725
786
  ], a.prototype, "tile");
726
787
  h([
727
- s({ type: String })
788
+ o({ type: String })
728
789
  ], a.prototype, "tooltip");
729
790
  h([
730
- s({ type: String, reflect: !0 })
791
+ o({ type: String, reflect: !0 })
731
792
  ], a.prototype, "size");
732
793
  h([
733
- s({ type: Boolean, reflect: !0 })
794
+ o({ type: Boolean, reflect: !0 })
734
795
  ], a.prototype, "other");
735
796
  h([
736
- s({ type: Boolean })
797
+ o({ type: Boolean })
737
798
  ], a.prototype, "showOtherError");
738
799
  h([
739
- s({ type: String })
800
+ o({ type: String })
740
801
  ], a.prototype, "labelledby");
741
802
  h([
742
- s({ type: Boolean })
803
+ o({ type: Boolean })
743
804
  ], a.prototype, "hideLabel");
744
805
  h([
745
- _()
806
+ p()
746
807
  ], a.prototype, "isMobile");
747
808
  customElements.get("nys-checkbox") || customElements.define("nys-checkbox", a);
748
809
  export {