@nysds/nys-checkbox 1.21.1 → 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 +251 -188
  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 x } 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,52 +10,62 @@ import "@nysds/nys-textinput";
10
10
  * █ █ █ █▄▄▄█ ▀▀▀▄▄ █ █ ▀▀▀▄▄
11
11
  * █ ▀█ █ █▄▄▄█ █▄▄▀ █▄▄▄█
12
12
  *
13
- * Checkbox Component v1.21.1
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.1
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
- let 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
+ );
32
+ }
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);
30
40
  }
31
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
- const 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) {
67
+ }, L = (i) => {
68
+ class e extends M(i) {
59
69
  constructor() {
60
70
  super(...arguments), this.__internals = null;
61
71
  }
@@ -72,14 +82,14 @@ const O = (n) => {
72
82
  get defaultRole() {
73
83
  return null;
74
84
  }
75
- setHostAria(r, o) {
85
+ setHostAria(r, s) {
76
86
  const c = this.internals;
77
87
  if (c && r in c) {
78
- c[r] = o;
88
+ c[r] = s;
79
89
  return;
80
90
  }
81
- const i = L(r);
82
- o === null ? this.removeAttribute(i) : this.setAttribute(i, o);
91
+ const n = F(r);
92
+ s === null ? this.removeAttribute(n) : this.setAttribute(n, s);
83
93
  }
84
94
  reflectDefaultSemantics() {
85
95
  const r = this.defaultRole;
@@ -91,21 +101,33 @@ const O = (n) => {
91
101
  }
92
102
  return e;
93
103
  };
94
- function L(n) {
95
- if (n === "role") return "role";
96
- const e = n.replace(/^aria/, "");
104
+ function F(i) {
105
+ if (i === "role") return "role";
106
+ const e = i.replace(/^aria/, "");
97
107
  return "aria-" + e.charAt(0).toLowerCase() + e.slice(1);
98
108
  }
99
- const z = (n) => {
100
- const e = class extends V(n) {
101
- setFormValue(o) {
102
- 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"));
103
119
  }
104
- 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) {
105
127
  const b = this.internals;
106
128
  if (!b) return;
107
- const k = Object.values(o).some(Boolean);
108
- 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");
109
131
  }
110
132
  clearValidity() {
111
133
  this.internals?.setValidity({}), this.setHostAria("ariaInvalid", "false");
@@ -117,19 +139,32 @@ const z = (n) => {
117
139
  return this.internals?.reportValidity() ?? !0;
118
140
  }
119
141
  formResetCallback() {
120
- this.clearValidity();
142
+ this.internalValidationMessage = "", this.clearValidity();
121
143
  }
122
144
  };
123
145
  return e.formAssociated = !0, e;
124
- }, g = /* @__PURE__ */ z(f), 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))}';
125
- var R = Object.defineProperty, d = (n, e, t, r) => {
126
- for (var o = void 0, c = n.length - 1, i; c >= 0; c--)
127
- (i = n[c]) && (o = i(e, t, o) || o);
128
- return o && R(e, t, o), o;
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;
129
151
  };
130
- const p = class p extends g {
152
+ const x = class x extends w {
131
153
  constructor() {
132
- 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);
133
168
  }
134
169
  /**
135
170
  * Lifecycle methods
@@ -138,10 +173,10 @@ const p = class p extends g {
138
173
  * NysFormControlElement (@nysds/internals).
139
174
  */
140
175
  connectedCallback() {
141
- 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);
142
177
  }
143
178
  disconnectedCallback() {
144
- 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);
145
180
  }
146
181
  firstUpdated() {
147
182
  this._setGroupExist(), this._updateCheckboxSize(), this._updateCheckboxTile(), this._updateCheckboxShowError();
@@ -168,33 +203,33 @@ const p = class p extends g {
168
203
  }
169
204
  // Initial update on checkbox required attribute
170
205
  async _setupCheckboxRequired() {
171
- const e = this.querySelector("nys-checkbox"), t = this.errorMessage || "This field is required", r = e ? await e.getInputElement() : null;
172
- this.setValidityFromState(
206
+ const e = this.querySelector("nys-checkbox"), t = e ? await e.getInputElement() : null;
207
+ this.internalValidationMessage = "This field is required", this.setValidityFromState(
173
208
  { valueMissing: !0 },
174
- t,
175
- r || this
209
+ this.resolvedErrorMessage(),
210
+ t || this
176
211
  );
177
212
  }
178
213
  // Updates the required attribute of each checkbox in the group
179
214
  async _manageRequire() {
180
215
  if (!this.required) {
181
- this.clearValidity(), this.showError = !1;
216
+ this.clearValidity(), this.internalValidationMessage = "", this.showError = !1;
182
217
  return;
183
218
  }
184
- const e = this.errorMessage || "You must make a selection to proceed.", t = Array.from(
219
+ const e = Array.from(
185
220
  this.querySelectorAll("nys-checkbox")
186
- ), r = this._hasAtLeastOneChecked(), o = t ? await t[0].getInputElement().catch(() => null) : null;
187
- 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(
188
223
  { valueMissing: !0 },
189
- e,
190
- o ?? this
224
+ this.resolvedErrorMessage(),
225
+ r ?? this
191
226
  ), this.showError = !0);
192
227
  }
193
228
  _setCustomOtherError() {
194
229
  const t = this._otherErrorCheckbox?.shadowRoot?.querySelector("nys-textinput") || this._otherErrorCheckbox;
195
- this.setValidityFromState(
230
+ this.internalValidationMessage = "Please complete this field.", this.setValidityFromState(
196
231
  { customError: !0 },
197
- "Please complete this field.",
232
+ this.resolvedErrorMessage(),
198
233
  t
199
234
  );
200
235
  }
@@ -230,19 +265,19 @@ const p = class p extends g {
230
265
  formResetCallback() {
231
266
  this.querySelectorAll("nys-checkbox").forEach((t) => {
232
267
  t.formResetCallback();
233
- }), this.setFormValue(""), this.showError = !1, this.clearValidity(), this.requestUpdate();
268
+ }), this.setFormValue(""), this._setValueFromChildren([]), this.showError = !1, this.internalValidationMessage = "", this.clearValidity(), this.requestUpdate();
234
269
  }
235
270
  async _handleInvalid(e) {
236
271
  if (e.preventDefault(), this.internals?.validity.customError) {
237
272
  const c = Array.from(
238
273
  this.querySelectorAll("nys-checkbox")
239
274
  ).find(
240
- (i) => i.other && i.checked
275
+ (n) => n.other && n.checked
241
276
  );
242
277
  if (c) {
243
- const i = c.shadowRoot?.querySelector("nys-textinput");
244
- if (i) {
245
- await i.updateComplete, i.focus();
278
+ const n = c.shadowRoot?.querySelector("nys-textinput");
279
+ if (n) {
280
+ await n.updateComplete, n.focus();
246
281
  return;
247
282
  }
248
283
  }
@@ -250,13 +285,13 @@ const p = class p extends g {
250
285
  this.showError = !0, await this._manageRequire();
251
286
  const t = this.querySelector("nys-checkbox"), r = t ? await t.getInputElement() : null;
252
287
  if (r) {
253
- const o = this.internals?.form;
254
- o ? Array.from(o.elements).find((b) => {
288
+ const s = this.internals?.form;
289
+ s ? Array.from(s.elements).find((b) => {
255
290
  if (b.tagName.toLowerCase() === "nys-checkboxgroup") {
256
291
  if (Array.from(
257
292
  this.querySelectorAll("nys-checkbox")
258
293
  ).filter(
259
- (w) => w.checked
294
+ (S) => S.checked
260
295
  ).length === 0)
261
296
  return b;
262
297
  } else
@@ -270,14 +305,19 @@ const p = class p extends g {
270
305
  */
271
306
  // Similar to how native forms handle multiple same-name fields, we group the selected values into a list for FormData.
272
307
  _handleCheckboxChange(e) {
308
+ if (e.target === this) return;
273
309
  const t = Array.from(
274
310
  this.querySelectorAll("nys-checkbox")
275
- );
311
+ ), r = t.filter((s) => s.checked).map((s) => s.value);
276
312
  if (this._hasSharedNames) {
277
- const r = e, { name: o } = r.detail, c = t.filter((i) => i.checked).map((i) => i.value);
278
- this.name = o, this.setFormValue(c.join(", "));
313
+ const s = e, { name: c } = s.detail;
314
+ this.name = c, this.setFormValue(r.join(", "));
279
315
  }
280
- 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
+ });
281
321
  }
282
322
  async _handleChildError(e) {
283
323
  e.stopPropagation();
@@ -286,13 +326,46 @@ const p = class p extends g {
286
326
  }
287
327
  _handleChildErrorClear(e) {
288
328
  const r = e.detail?.sourceCheckbox;
289
- 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());
290
330
  }
291
331
  _handleOtherInput() {
292
332
  const t = Array.from(
293
333
  this.querySelectorAll("nys-checkbox")
294
334
  ).filter((r) => r.checked).map((r) => r.value);
295
- 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
+ );
296
369
  }
297
370
  async _checkOtherInputs(e) {
298
371
  for (const t of e)
@@ -305,7 +378,7 @@ const p = class p extends g {
305
378
  return;
306
379
  }
307
380
  }
308
- 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));
309
382
  }
310
383
  /** Drupal-like naming support **/
311
384
  _checkSharedNames(e) {
@@ -340,75 +413,78 @@ const p = class p extends g {
340
413
  >
341
414
  </nys-label>
342
415
  <div class="nys-checkboxgroup__content">
343
- <slot></slot>
416
+ <slot @slotchange=${this._handleDefaultSlotChange}></slot>
344
417
  </div>
345
418
  <nys-errormessage
346
419
  id=${this.id + "--error"}
347
420
  ?showError=${this.showError}
348
- errorMessage=${this.internals?.validationMessage || this.errorMessage}
421
+ errorMessage=${this.resolvedErrorMessage()}
349
422
  .showDivider=${!this.tile}
350
423
  ></nys-errormessage>
351
424
  </fieldset>
352
425
  `;
353
426
  }
354
427
  };
355
- p.styles = m(E), p.shadowRootOptions = {
356
- ...f.shadowRootOptions,
428
+ x.styles = E(C), x.shadowRootOptions = {
429
+ ...m.shadowRootOptions,
357
430
  delegatesFocus: !0
358
431
  };
359
- let l = p;
432
+ let l = x;
433
+ d([
434
+ o({ type: String, reflect: !0 })
435
+ ], l.prototype, "id", 2);
360
436
  d([
361
- s({ type: String, reflect: !0 })
362
- ], l.prototype, "id");
437
+ o({ type: String, reflect: !0 })
438
+ ], l.prototype, "name", 2);
363
439
  d([
364
- s({ type: String, reflect: !0 })
365
- ], l.prototype, "name");
440
+ o({ type: Boolean, reflect: !0 })
441
+ ], l.prototype, "required", 2);
366
442
  d([
367
- s({ type: Boolean, reflect: !0 })
368
- ], l.prototype, "required");
443
+ o({ type: Boolean, reflect: !0 })
444
+ ], l.prototype, "optional", 2);
369
445
  d([
370
- s({ type: Boolean, reflect: !0 })
371
- ], l.prototype, "optional");
446
+ o({ type: Boolean, reflect: !0 })
447
+ ], l.prototype, "showError", 2);
372
448
  d([
373
- s({ type: Boolean, reflect: !0 })
374
- ], l.prototype, "showError");
449
+ o({ type: String })
450
+ ], l.prototype, "errorMessage", 2);
375
451
  d([
376
- s({ type: String })
377
- ], l.prototype, "errorMessage");
452
+ o({ type: String })
453
+ ], l.prototype, "label", 2);
378
454
  d([
379
- s({ type: String })
380
- ], l.prototype, "label");
455
+ o({ type: String })
456
+ ], l.prototype, "description", 2);
381
457
  d([
382
- s({ type: String })
383
- ], l.prototype, "description");
458
+ o({ type: Boolean, reflect: !0 })
459
+ ], l.prototype, "tile", 2);
384
460
  d([
385
- s({ type: Boolean, reflect: !0 })
386
- ], l.prototype, "tile");
461
+ o({ type: String })
462
+ ], l.prototype, "tooltip", 2);
387
463
  d([
388
- s({ type: String })
389
- ], l.prototype, "tooltip");
464
+ o({ type: String, reflect: !0 })
465
+ ], l.prototype, "form", 2);
390
466
  d([
391
- s({ type: String, reflect: !0 })
392
- ], l.prototype, "form");
467
+ o({ type: String, reflect: !0 })
468
+ ], l.prototype, "size", 2);
393
469
  d([
394
- s({ type: String, reflect: !0 })
395
- ], l.prototype, "size");
470
+ o({ attribute: !1 })
471
+ ], l.prototype, "value", 1);
396
472
  d([
397
- x()
398
- ], l.prototype, "_slottedDescriptionText");
473
+ p()
474
+ ], l.prototype, "_slottedDescriptionText", 2);
399
475
  d([
400
- x()
401
- ], l.prototype, "_hasOtherError");
476
+ p()
477
+ ], l.prototype, "_hasOtherError", 2);
402
478
  d([
403
- x()
404
- ], l.prototype, "_otherErrorCheckbox");
479
+ p()
480
+ ], l.prototype, "_otherErrorCheckbox", 2);
405
481
  customElements.get("nys-checkboxgroup") || customElements.define("nys-checkboxgroup", l);
406
- var M = Object.defineProperty, h = (n, e, t, r) => {
407
- for (var o = void 0, c = n.length - 1, i; c >= 0; c--)
408
- (i = n[c]) && (o = i(e, t, o) || o);
409
- 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;
410
486
  };
411
- const _ = class _ extends g {
487
+ const v = class v extends w {
412
488
  constructor() {
413
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 = () => {
414
490
  const e = this.shadowRoot?.querySelector(
@@ -443,11 +519,12 @@ const _ = class _ extends g {
443
519
  willUpdate(e) {
444
520
  if (e.has("labelledby") && !this.labelledby) {
445
521
  const t = this.shadowRoot?.querySelector("input");
446
- t && v(t, "labelledby", []);
522
+ t && g(t, "labelledby", []);
447
523
  }
524
+ (e.has("checked") || e.has("value")) && !this.groupExist && this.setFormValue(this.checked ? this.value : null);
448
525
  }
449
526
  updated(e) {
450
- e.has("labelledby") && this.labelledby && this._syncExternalLabel();
527
+ e.has("labelledby") && this.labelledby && this._syncExternalLabel(), e.has("required") && this._manageRequire();
451
528
  }
452
529
  /**
453
530
  * Point the native <input> at a light-DOM element that IDREF attributes cannot
@@ -465,7 +542,7 @@ const _ = class _ extends g {
465
542
  const t = this.getRootNode().getElementById(
466
543
  this.labelledby
467
544
  );
468
- v(e, "labelledby", [t]);
545
+ g(e, "labelledby", [t]);
469
546
  }
470
547
  /**
471
548
  * Form Integration
@@ -475,12 +552,20 @@ const _ = class _ extends g {
475
552
  this.groupExist || this.setFormValue(this.checked ? this.value : null);
476
553
  }
477
554
  _manageRequire() {
478
- const e = this.shadowRoot?.querySelector("input"), t = this.errorMessage || "This field is required";
479
- 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());
480
561
  }
481
562
  _setValidityMessage(e = "") {
482
563
  const t = this.shadowRoot?.querySelector("input");
483
- 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());
484
569
  }
485
570
  _validate() {
486
571
  const e = this.shadowRoot?.querySelector("input");
@@ -493,7 +578,7 @@ const _ = class _ extends g {
493
578
  formResetCallback() {
494
579
  this.checked = !1, this.setFormValue(null);
495
580
  const e = this.shadowRoot?.querySelector("input");
496
- 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();
497
582
  }
498
583
  /**
499
584
  * Functions
@@ -512,7 +597,7 @@ const _ = class _ extends g {
512
597
  if (t) {
513
598
  const r = this.internals?.form;
514
599
  r ? Array.from(r.elements).find(
515
- (i) => typeof i.checkValidity == "function" && !i.checkValidity()
600
+ (n) => typeof n.checkValidity == "function" && !n.checkValidity()
516
601
  ) === this && t.focus() : t.focus();
517
602
  }
518
603
  }
@@ -524,31 +609,19 @@ const _ = class _ extends g {
524
609
  return this.parentElement?.tagName.toLowerCase() !== "nys-checkboxgroup";
525
610
  }
526
611
  _emitChangeEvent() {
527
- this.dispatchEvent(
528
- new CustomEvent("nys-change", {
529
- detail: {
530
- id: this.id,
531
- checked: this.checked,
532
- name: this.name,
533
- value: this.value
534
- },
535
- bubbles: !0,
536
- composed: !0
537
- })
538
- );
612
+ _(this, "nys-change", {
613
+ id: this.id,
614
+ checked: this.checked,
615
+ name: this.name,
616
+ value: this.value
617
+ });
539
618
  }
540
619
  _emitOtherInputEvent() {
541
- this.dispatchEvent(
542
- new CustomEvent("nys-other-input", {
543
- detail: {
544
- id: this.id,
545
- name: this.name,
546
- value: this.value
547
- },
548
- bubbles: !0,
549
- composed: !0
550
- })
551
- );
620
+ _(this, "nys-other-input", {
621
+ id: this.id,
622
+ name: this.name,
623
+ value: this.value
624
+ });
552
625
  }
553
626
  // Handle checkbox change event
554
627
  async _handleChange(e) {
@@ -556,10 +629,10 @@ const _ = class _ extends g {
556
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();
557
630
  }
558
631
  _handleFocus() {
559
- this.dispatchEvent(new Event("nys-focus"));
632
+ f(this, "focus");
560
633
  }
561
634
  _handleBlur() {
562
- 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());
563
636
  }
564
637
  _handleTextInputBlur() {
565
638
  this._hasUserInteracted = !0, this._validateOtherAndEmitError();
@@ -578,28 +651,18 @@ const _ = class _ extends g {
578
651
  return;
579
652
  }
580
653
  const e = this.value.trim() === "";
581
- this.showOtherError = e, e ? this.dispatchEvent(
582
- new CustomEvent("nys-error", {
583
- detail: {
584
- id: this.id,
585
- name: this.name,
586
- type: "other",
587
- message: "Please enter a value for this option.",
588
- sourceCheckbox: this
589
- },
590
- bubbles: !0,
591
- composed: !0
592
- })
593
- ) : 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();
594
661
  }
595
662
  _dispatchClearError() {
596
- this.dispatchEvent(
597
- new CustomEvent("nys-error-clear", {
598
- detail: { sourceCheckbox: this },
599
- bubbles: !0,
600
- composed: !0
601
- })
602
- );
663
+ _(this, "nys-error-clear", {
664
+ sourceCheckbox: this
665
+ });
603
666
  }
604
667
  render() {
605
668
  return y`
@@ -639,7 +702,7 @@ const _ = class _ extends g {
639
702
  class="nys-checkbox__icon"
640
703
  ></nys-icon>` : ""}
641
704
  </div>
642
- ${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
643
706
  id="${this.id}--label"
644
707
  tooltip=${this.tooltip}
645
708
  label="${this.label || (this.other ? "Other" : "")}"
@@ -671,76 +734,76 @@ const _ = class _ extends g {
671
734
  id=${this.id + "--error"}
672
735
  class="single-error-message"
673
736
  ?showError=${this.showError}
674
- errorMessage=${this.internals?.validationMessage || this.errorMessage}
737
+ errorMessage=${this.resolvedErrorMessage()}
675
738
  .showDivider=${!this.tile}
676
739
  ></nys-errormessage>` : ""}
677
740
  `;
678
741
  }
679
742
  };
680
- _.styles = m(E), _.shadowRootOptions = {
681
- ...f.shadowRootOptions,
743
+ v.styles = E(C), v.shadowRootOptions = {
744
+ ...m.shadowRootOptions,
682
745
  delegatesFocus: !0
683
746
  };
684
- let a = _;
747
+ let a = v;
685
748
  h([
686
- s({ type: Boolean, reflect: !0 })
749
+ o({ type: Boolean, reflect: !0 })
687
750
  ], a.prototype, "checked");
688
751
  h([
689
- s({ type: Boolean, reflect: !0 })
752
+ o({ type: Boolean, reflect: !0 })
690
753
  ], a.prototype, "disabled");
691
754
  h([
692
- s({ type: Boolean, reflect: !0 })
755
+ o({ type: Boolean, reflect: !0 })
693
756
  ], a.prototype, "required");
694
757
  h([
695
- s({ type: String })
758
+ o({ type: String })
696
759
  ], a.prototype, "label");
697
760
  h([
698
- s({ type: String })
761
+ o({ type: String })
699
762
  ], a.prototype, "description");
700
763
  h([
701
- s({ type: String, reflect: !0 })
764
+ o({ type: String, reflect: !0 })
702
765
  ], a.prototype, "id");
703
766
  h([
704
- s({ type: String, reflect: !0 })
767
+ o({ type: String, reflect: !0 })
705
768
  ], a.prototype, "name");
706
769
  h([
707
- s({ type: String })
770
+ o({ type: String })
708
771
  ], a.prototype, "value");
709
772
  h([
710
- s({ type: String, reflect: !0 })
773
+ o({ type: String, reflect: !0 })
711
774
  ], a.prototype, "form");
712
775
  h([
713
- s({ type: Boolean, reflect: !0 })
776
+ o({ type: Boolean, reflect: !0 })
714
777
  ], a.prototype, "showError");
715
778
  h([
716
- s({ type: String })
779
+ o({ type: String })
717
780
  ], a.prototype, "errorMessage");
718
781
  h([
719
- s({ type: Boolean })
782
+ p()
720
783
  ], a.prototype, "groupExist");
721
784
  h([
722
- s({ type: Boolean, reflect: !0 })
785
+ o({ type: Boolean, reflect: !0 })
723
786
  ], a.prototype, "tile");
724
787
  h([
725
- s({ type: String })
788
+ o({ type: String })
726
789
  ], a.prototype, "tooltip");
727
790
  h([
728
- s({ type: String, reflect: !0 })
791
+ o({ type: String, reflect: !0 })
729
792
  ], a.prototype, "size");
730
793
  h([
731
- s({ type: Boolean, reflect: !0 })
794
+ o({ type: Boolean, reflect: !0 })
732
795
  ], a.prototype, "other");
733
796
  h([
734
- s({ type: Boolean })
797
+ o({ type: Boolean })
735
798
  ], a.prototype, "showOtherError");
736
799
  h([
737
- s({ type: String })
800
+ o({ type: String })
738
801
  ], a.prototype, "labelledby");
739
802
  h([
740
- s({ type: Boolean })
803
+ o({ type: Boolean })
741
804
  ], a.prototype, "hideLabel");
742
805
  h([
743
- x()
806
+ p()
744
807
  ], a.prototype, "isMobile");
745
808
  customElements.get("nys-checkbox") || customElements.define("nys-checkbox", a);
746
809
  export {