@nysds/nys-checkbox 1.19.4 → 1.20.1

package/dist/nys-checkbox.js

@@ -1,37 +1,150 @@
-import { LitElement as x, unsafeCSS as v, html as d } from "lit";
-import { property as o, state as _ } from "lit/decorators.js";
-import { ifDefined as y } from "lit/directives/if-defined.js";
+import { LitElement as f, unsafeCSS as m, html as y, nothing as C } from "lit";
+import { property as s, state as x } from "lit/decorators.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
+import "@nysds/nys-label";
+import "@nysds/nys-errormessage";
+import "@nysds/nys-icon";
+import "@nysds/nys-textinput";
 /*!
    * █▄  █  █   █  █▀▀▀█  █▀▀▄  █▀▀▀█
    * █ █ █  █▄▄▄█  ▀▀▀▄▄  █   █ ▀▀▀▄▄
    * █  ▀█    █    █▄▄▄█  █▄▄▀  █▄▄▄█
    *
-   * Checkbox Component v1.19.4
+   * Checkbox Component v1.20.1
    * Part of the New York State Design System
    * Repository: https://github.com/its-hcd/nysds
    * License: MIT
 */
-const f = ':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))}';
-var g = Object.defineProperty, a = (b, e, t, r) => {
-  for (var s = void 0, l = b.length - 1, c; l >= 0; l--)
-    (c = b[l]) && (s = c(e, t, s) || s);
-  return s && g(e, t, s), s;
+/*!
+  * New York State Design System v1.20.1
+  * Description: A design system for New York State's digital products.
+  * Repository: https://github.com/its-hcd/nysds
+  * License: MIT
+*/
+let S = 0;
+function q(n) {
+  return `${n}-${Date.now()}-${S++}`;
+}
+function $(n) {
+  return n.filter((e) => !!e);
+}
+const I = {
+  labelledby: "ariaLabelledByElements",
+  describedby: "ariaDescribedByElements"
+}, A = {
+  labelledby: "aria-label",
+  describedby: "aria-description"
+};
+function v(n, e, t) {
+  const r = $(t), o = I[e], c = A[e], i = n;
+  o in n && (i[o] = r.length ? r : null);
+  const b = r.map((k) => k.textContent?.trim() ?? "").filter(Boolean).join(" ");
+  b ? n.setAttribute(c, b) : n.removeAttribute(c);
+}
+const O = (n) => {
+  class e extends n {
+    get idPrefix() {
+      return this.localName || "nys-element";
+    }
+    ensureId() {
+      this.id || (this.id = q(this.idPrefix));
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.ensureId();
+    }
+  }
+  return e;
+}, V = (n) => {
+  class e extends O(n) {
+    constructor() {
+      super(...arguments), this.__internals = null;
+    }
+    get internals() {
+      if (this.__internals) return this.__internals;
+      if (typeof this.attachInternals == "function")
+        try {
+          this.__internals = this.attachInternals();
+        } catch {
+          this.__internals = null;
+        }
+      return this.__internals;
+    }
+    get defaultRole() {
+      return null;
+    }
+    setHostAria(r, o) {
+      const c = this.internals;
+      if (c && r in c) {
+        c[r] = o;
+        return;
+      }
+      const i = L(r);
+      o === null ? this.removeAttribute(i) : this.setAttribute(i, o);
+    }
+    reflectDefaultSemantics() {
+      const r = this.defaultRole;
+      r && this.setHostAria("role", r);
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.reflectDefaultSemantics();
+    }
+  }
+  return e;
+};
+function L(n) {
+  if (n === "role") return "role";
+  const e = n.replace(/^aria/, "");
+  return "aria-" + e.charAt(0).toLowerCase() + e.slice(1);
+}
+const z = (n) => {
+  const e = class extends V(n) {
+    setFormValue(o) {
+      this.internals?.setFormValue(o ?? null);
+    }
+    setValidityFromState(o, c, i) {
+      const b = this.internals;
+      if (!b) return;
+      const k = Object.values(o).some(Boolean);
+      k ? b.setValidity(o, c ?? "Invalid value", i) : b.setValidity({}), this.setHostAria("ariaInvalid", k ? "true" : "false");
+    }
+    clearValidity() {
+      this.internals?.setValidity({}), this.setHostAria("ariaInvalid", "false");
+    }
+    checkValidity() {
+      return this.internals?.checkValidity() ?? !0;
+    }
+    reportValidity() {
+      return this.internals?.reportValidity() ?? !0;
+    }
+    formResetCallback() {
+      this.clearValidity();
+    }
+  };
+  return e.formAssociated = !0, e;
+}, 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))}';
+var R = Object.defineProperty, d = (n, e, t, r) => {
+  for (var o = void 0, c = n.length - 1, i; c >= 0; c--)
+    (i = n[c]) && (o = i(e, t, o) || o);
+  return o && R(e, t, o), o;
 };
-let E = 0;
-const u = class u extends x {
-  // allows use of elementInternals' API
+const p = class p extends g {
   constructor() {
-    super(), this.id = "", this.name = "", this.required = !1, this.optional = !1, this.showError = !1, this.errorMessage = "", this.label = "", this.description = "", this.tile = !1, this.tooltip = "", this.form = null, this.size = "md", this._slottedDescriptionText = "", this._hasOtherError = !1, this._otherErrorCheckbox = null, this._hasSharedNames = !1, this._internals = this.attachInternals();
+    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;
   }
-  // Generate a unique ID if one is not provided
+  /**
+   * Lifecycle methods
+   * --------------------------------------------------------------------------
+   * Form association, ElementInternals, and id generation are provided by
+   * NysFormControlElement (@nysds/internals).
+   */
   connectedCallback() {
-    super.connectedCallback(), this.id || (this.id = `nys-checkboxgroup-${Date.now()}-${E++}`), 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);
+    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);
   }
   disconnectedCallback() {
     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);
   }
   firstUpdated() {
-    this._setGroupExist(), this._updateCheckboxSize(), this._updateCheckboxTile(), this._updateCheckboxShowError(), this._getSlotDescriptionForAria();
+    this._setGroupExist(), this._updateCheckboxSize(), this._updateCheckboxTile(), this._updateCheckboxShowError();
   }
   updated(e) {
     e.has("required") && this.required && this._setupCheckboxRequired(), e.has("size") && this._updateCheckboxSize(), e.has("tile") && this._updateCheckboxTile(), e.has("showError") && this._updateCheckboxShowError(), e.has("form") && this._updateCheckboxForm();
@@ -56,7 +169,7 @@ const u = class u extends x {
   // Initial update on checkbox required attribute
   async _setupCheckboxRequired() {
     const e = this.querySelector("nys-checkbox"), t = this.errorMessage || "This field is required", r = e ? await e.getInputElement() : null;
-    this._internals.setValidity(
+    this.setValidityFromState(
       { valueMissing: !0 },
       t,
       r || this
@@ -65,21 +178,21 @@ const u = class u extends x {
   // Updates the required attribute of each checkbox in the group
   async _manageRequire() {
     if (!this.required) {
-      this._internals.setValidity({}), this.showError = !1;
+      this.clearValidity(), this.showError = !1;
       return;
     }
     const e = this.errorMessage || "You must make a selection to proceed.", t = Array.from(
       this.querySelectorAll("nys-checkbox")
-    ), r = this._hasAtLeastOneChecked(), s = t ? await t[0].getInputElement().catch(() => null) : null;
-    this._internals.setValidity({}), this.showError = !1, r ? this._hasOtherError && this._otherErrorCheckbox && (this._setCustomOtherError(), this.showError = !0) : this._hasOtherError ? (this._setCustomOtherError(), this.showError = !0) : (this._internals.setValidity(
+    ), r = this._hasAtLeastOneChecked(), o = t ? await t[0].getInputElement().catch(() => null) : null;
+    this.clearValidity(), this.showError = !1, r ? this._hasOtherError && this._otherErrorCheckbox && (this._setCustomOtherError(), this.showError = !0) : this._hasOtherError ? (this._setCustomOtherError(), this.showError = !0) : (this.setValidityFromState(
       { valueMissing: !0 },
       e,
-      s ?? this
+      o ?? this
     ), this.showError = !0);
   }
   _setCustomOtherError() {
     const t = this._otherErrorCheckbox?.shadowRoot?.querySelector("nys-textinput") || this._otherErrorCheckbox;
-    this._internals.setValidity(
+    this.setValidityFromState(
       { customError: !0 },
       "Please complete this field.",
       t
@@ -117,19 +230,19 @@ const u = class u extends x {
   formResetCallback() {
     this.querySelectorAll("nys-checkbox").forEach((t) => {
       t.formResetCallback();
-    }), this._internals.setFormValue(""), this.showError = !1, this._internals.setValidity({}), this.requestUpdate();
+    }), this.setFormValue(""), this.showError = !1, this.clearValidity(), this.requestUpdate();
   }
   async _handleInvalid(e) {
-    if (e.preventDefault(), this._internals.validity.customError) {
-      const l = Array.from(
+    if (e.preventDefault(), this.internals?.validity.customError) {
+      const c = Array.from(
         this.querySelectorAll("nys-checkbox")
       ).find(
-        (c) => c.other && c.checked
+        (i) => i.other && i.checked
       );
-      if (l) {
-        const c = l.shadowRoot?.querySelector("nys-textinput");
-        if (c) {
-          await c.updateComplete, c.focus();
+      if (c) {
+        const i = c.shadowRoot?.querySelector("nys-textinput");
+        if (i) {
+          await i.updateComplete, i.focus();
           return;
         }
       }
@@ -137,17 +250,17 @@ const u = class u extends x {
     this.showError = !0, await this._manageRequire();
     const t = this.querySelector("nys-checkbox"), r = t ? await t.getInputElement() : null;
     if (r) {
-      const s = this._internals.form;
-      s ? Array.from(s.elements).find((p) => {
-        if (p.tagName.toLowerCase() === "nys-checkboxgroup") {
+      const o = this.internals?.form;
+      o ? Array.from(o.elements).find((b) => {
+        if (b.tagName.toLowerCase() === "nys-checkboxgroup") {
           if (Array.from(
             this.querySelectorAll("nys-checkbox")
           ).filter(
-            (m) => m.checked
+            (w) => w.checked
           ).length === 0)
-            return p;
+            return b;
         } else
-          return typeof p.checkValidity == "function" && !p.checkValidity();
+          return typeof b.checkValidity == "function" && !b.checkValidity();
       }) === this && r.focus() : r.focus();
     }
   }
@@ -161,8 +274,8 @@ const u = class u extends x {
       this.querySelectorAll("nys-checkbox")
     );
     if (this._hasSharedNames) {
-      const r = e, { name: s } = r.detail, l = t.filter((c) => c.checked).map((c) => c.value);
-      this.name = s, this._internals.setFormValue(l.join(", "));
+      const r = e, { name: o } = r.detail, c = t.filter((i) => i.checked).map((i) => i.value);
+      this.name = o, this.setFormValue(c.join(", "));
     }
     this._checkOtherInputs(t), this._hasOtherError || this._manageRequire();
   }
@@ -173,13 +286,13 @@ const u = class u extends x {
   }
   _handleChildErrorClear(e) {
     const r = e.detail?.sourceCheckbox;
-    this._otherErrorCheckbox && r !== this._otherErrorCheckbox || (this._hasOtherError = !1, this._otherErrorCheckbox = null, this._internals.setValidity({}), this.showError = !1, this.required && !this._hasAtLeastOneChecked() && this._manageRequire());
+    this._otherErrorCheckbox && r !== this._otherErrorCheckbox || (this._hasOtherError = !1, this._otherErrorCheckbox = null, this.clearValidity(), this.showError = !1, this.required && !this._hasAtLeastOneChecked() && this._manageRequire());
   }
   _handleOtherInput() {
     const t = Array.from(
       this.querySelectorAll("nys-checkbox")
     ).filter((r) => r.checked).map((r) => r.value);
-    this._internals.setFormValue(t.join(", "));
+    this.setFormValue(t.join(", "));
   }
   async _checkOtherInputs(e) {
     for (const t of e)
@@ -192,7 +305,7 @@ const u = class u extends x {
           return;
         }
       }
-    this._hasOtherError && (this._hasOtherError = !1, this._otherErrorCheckbox = null, this.required ? this._manageRequire() : (this._internals.setValidity({}), this.showError = !1));
+    this._hasOtherError && (this._hasOtherError = !1, this._otherErrorCheckbox = null, this.required ? this._manageRequire() : (this.clearValidity(), this.showError = !1));
   }
   /** Drupal-like naming support **/
   _checkSharedNames(e) {
@@ -201,96 +314,103 @@ const u = class u extends x {
     return e.every((r) => r.name === t);
   }
   render() {
-    return d`
+    return y`
       <fieldset
-        aria-label="${this.label}${this._slottedDescriptionText ? ` ${this._slottedDescriptionText}` : this.description ? ` ${this.description}` : ""}"
+        aria-labelledby=${u(
+      this.label ? this.id + "--label" : void 0
+    )}
+        aria-label=${u(
+      this.label ? void 0 : `${this._slottedDescriptionText || this.description || ""}`.trim() || void 0
+    )}
         class="nys-checkboxgroup"
         role="radiogroup"
       >
         <nys-label
+          id="${this.id}--label"
           label=${this.label}
           description=${this.description}
           flag=${this.required ? "required" : this.optional ? "optional" : ""}
           tooltip=${this.tooltip}
         >
-          <slot name="description" slot="description">${this.description}</slot>
+          <slot
+            name="description"
+            slot="description"
+            @slotchange=${this._getSlotDescriptionForAria}
+            >${this.description}</slot
+          >
         </nys-label>
         <div class="nys-checkboxgroup__content">
           <slot></slot>
         </div>
         <nys-errormessage
+          id=${this.id + "--error"}
           ?showError=${this.showError}
-          errorMessage=${this._internals.validationMessage || this.errorMessage}
+          errorMessage=${this.internals?.validationMessage || this.errorMessage}
           .showDivider=${!this.tile}
         ></nys-errormessage>
       </fieldset>
     `;
   }
 };
-u.styles = v(f), u.shadowRootOptions = {
-  ...x.shadowRootOptions,
+p.styles = m(E), p.shadowRootOptions = {
+  ...f.shadowRootOptions,
   delegatesFocus: !0
-}, u.formAssociated = !0;
-let n = u;
-a([
-  o({ type: String, reflect: !0 })
-], n.prototype, "id");
-a([
-  o({ type: String, reflect: !0 })
-], n.prototype, "name");
-a([
-  o({ type: Boolean, reflect: !0 })
-], n.prototype, "required");
-a([
-  o({ type: Boolean, reflect: !0 })
-], n.prototype, "optional");
-a([
-  o({ type: Boolean, reflect: !0 })
-], n.prototype, "showError");
-a([
-  o({ type: String })
-], n.prototype, "errorMessage");
-a([
-  o({ type: String })
-], n.prototype, "label");
-a([
-  o({ type: String })
-], n.prototype, "description");
-a([
-  o({ type: Boolean, reflect: !0 })
-], n.prototype, "tile");
-a([
-  o({ type: String })
-], n.prototype, "tooltip");
-a([
-  o({ type: String, reflect: !0 })
-], n.prototype, "form");
-a([
-  o({ type: String, reflect: !0 })
-], n.prototype, "size");
-a([
-  _()
-], n.prototype, "_slottedDescriptionText");
-a([
-  _()
-], n.prototype, "_hasOtherError");
-a([
-  _()
-], n.prototype, "_otherErrorCheckbox");
-a([
-  _()
-], n.prototype, "_hasSharedNames");
-customElements.get("nys-checkboxgroup") || customElements.define("nys-checkboxgroup", n);
-var w = Object.defineProperty, h = (b, e, t, r) => {
-  for (var s = void 0, l = b.length - 1, c; l >= 0; l--)
-    (c = b[l]) && (s = c(e, t, s) || s);
-  return s && w(e, t, s), s;
 };
-let C = 0;
-const k = class k extends x {
-  // allows use of elementInternals' API
+let l = p;
+d([
+  s({ type: String, reflect: !0 })
+], l.prototype, "id");
+d([
+  s({ type: String, reflect: !0 })
+], l.prototype, "name");
+d([
+  s({ type: Boolean, reflect: !0 })
+], l.prototype, "required");
+d([
+  s({ type: Boolean, reflect: !0 })
+], l.prototype, "optional");
+d([
+  s({ type: Boolean, reflect: !0 })
+], l.prototype, "showError");
+d([
+  s({ type: String })
+], l.prototype, "errorMessage");
+d([
+  s({ type: String })
+], l.prototype, "label");
+d([
+  s({ type: String })
+], l.prototype, "description");
+d([
+  s({ type: Boolean, reflect: !0 })
+], l.prototype, "tile");
+d([
+  s({ type: String })
+], l.prototype, "tooltip");
+d([
+  s({ type: String, reflect: !0 })
+], l.prototype, "form");
+d([
+  s({ type: String, reflect: !0 })
+], l.prototype, "size");
+d([
+  x()
+], l.prototype, "_slottedDescriptionText");
+d([
+  x()
+], l.prototype, "_hasOtherError");
+d([
+  x()
+], l.prototype, "_otherErrorCheckbox");
+customElements.get("nys-checkboxgroup") || customElements.define("nys-checkboxgroup", l);
+var M = Object.defineProperty, h = (n, e, t, r) => {
+  for (var o = void 0, c = n.length - 1, i; c >= 0; c--)
+    (i = n[c]) && (o = i(e, t, o) || o);
+  return o && M(e, t, o), o;
+};
+const _ = class _ extends g {
   constructor() {
-    super(), this.checked = !1, this.disabled = !1, this.required = !1, this.label = "", this.description = "", this.id = "", this.name = "", this.value = "", this.form = null, this.showError = !1, this.errorMessage = "", this.groupExist = !1, this.tile = !1, this.tooltip = "", this.size = "md", this.other = !1, this.showOtherError = !1, this._mobileQuery = window.matchMedia("(max-width: 479px)"), this.isMobile = this._mobileQuery.matches, this._hasUserInteracted = !1, this._manageLabelClick = () => {
+    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 = () => {
       const e = this.shadowRoot?.querySelector(
         ".nys-checkbox__main-container"
       ), t = this.shadowRoot?.querySelector("input");
@@ -299,40 +419,68 @@ const k = class k extends x {
       });
     }, this._handleMobileQuery = () => {
       this.isMobile = this._mobileQuery.matches;
-    }, this._internals = this.attachInternals();
+    };
   }
   // need this flag for "eager mode"
   async getInputElement() {
     return await this.updateComplete, this.shadowRoot?.querySelector("input") || null;
   }
-  // Generate a unique ID if one is not provided
+  /**
+   * Lifecycle methods
+   * --------------------------------------------------------------------------
+   * Form association, ElementInternals, and id generation are provided by
+   * NysFormControlElement (@nysds/internals).
+   */
   connectedCallback() {
-    super.connectedCallback(), this.id || (this.id = `nys-checkbox-${Date.now()}-${C++}`), this.addEventListener("invalid", this._handleInvalid), this.addEventListener("blur", this._handleBlur), this._mobileQuery.addEventListener("change", this._handleMobileQuery);
+    super.connectedCallback(), this.addEventListener("invalid", this._handleInvalid), this.addEventListener("blur", this._handleBlur), this._mobileQuery.addEventListener("change", this._handleMobileQuery);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeEventListener("invalid", this._handleInvalid), this.removeEventListener("blur", this._handleBlur), this._mobileQuery.removeEventListener("change", this._handleMobileQuery);
   }
   firstUpdated() {
-    this._setValue(), this._manageRequire(), this._manageLabelClick();
+    this._setValue(), this._manageRequire(), this._manageLabelClick(), this.labelledby && this._syncExternalLabel();
+  }
+  willUpdate(e) {
+    if (e.has("labelledby") && !this.labelledby) {
+      const t = this.shadowRoot?.querySelector("input");
+      t && v(t, "labelledby", []);
+    }
+  }
+  updated(e) {
+    e.has("labelledby") && this.labelledby && this._syncExternalLabel();
+  }
+  /**
+   * Point the native <input> at a light-DOM element that IDREF attributes cannot
+   * reach across the shadow boundary. associateControlRefs sets the control's own
+   * ariaLabelledByElements (honored in Chromium) plus a string aria-label fallback
+   * for engines that do not yet resolve element references.
+   *
+   * Only ever called with an external labelledby set: with no external target the
+   * native input keeps the internal same-root aria-labelledby IDREF that render()
+   * emits, and must not be touched.
+   */
+  _syncExternalLabel() {
+    const e = this.shadowRoot?.querySelector("input");
+    if (!e) return;
+    const t = this.getRootNode().getElementById(
+      this.labelledby
+    );
+    v(e, "labelledby", [t]);
   }
   /**
    * Form Integration
    * --------------------------------------------------------------------------
    */
   _setValue() {
-    this.groupExist || this._internals.setFormValue(this.checked ? this.value : null);
+    this.groupExist || this.setFormValue(this.checked ? this.value : null);
   }
   _manageRequire() {
     const e = this.shadowRoot?.querySelector("input"), t = this.errorMessage || "This field is required";
-    e && (this.required && !this.checked ? (this._internals.ariaInvalid = "true", this._internals.setValidity({ valueMissing: !0 }, t, e)) : (this._internals.ariaInvalid = "false", this._internals.setValidity({})));
+    e && (this.required && !this.checked ? this.setValidityFromState({ valueMissing: !0 }, t, e) : this.clearValidity());
   }
   _setValidityMessage(e = "") {
     const t = this.shadowRoot?.querySelector("input");
-    t && (this.showError = !!e, this.errorMessage?.trim() && e !== "" && (e = this.errorMessage), this._internals.setValidity(
-      e ? { customError: !0 } : {},
-      e,
-      t
-    ));
+    t && (this.showError = !!e, this.errorMessage?.trim() && e !== "" && (e = this.errorMessage), e ? this.setValidityFromState({ customError: !0 }, e, t) : this.clearValidity());
   }
   _validate() {
     const e = this.shadowRoot?.querySelector("input");
@@ -343,9 +491,9 @@ const k = class k extends x {
   }
   // Called automatically when the parent form is reset
   formResetCallback() {
-    this.checked = !1, this._internals.setFormValue(null);
+    this.checked = !1, this.setFormValue(null);
     const e = this.shadowRoot?.querySelector("input");
-    e && (e.checked = !1), this.showError = !1, this.errorMessage = "", this._internals.setValidity({}), this.requestUpdate();
+    e && (e.checked = !1), this.showError = !1, this.errorMessage = "", this.clearValidity(), this.requestUpdate();
   }
   /**
    * Functions
@@ -362,9 +510,9 @@ const k = class k extends x {
     e.preventDefault(), this.showError = !0, this._validate();
     const t = this.shadowRoot?.querySelector("input");
     if (t) {
-      const r = this._internals.form;
+      const r = this.internals?.form;
       r ? Array.from(r.elements).find(
-        (c) => typeof c.checkValidity == "function" && !c.checkValidity()
+        (i) => typeof i.checkValidity == "function" && !i.checkValidity()
       ) === this && t.focus() : t.focus();
     }
   }
@@ -405,7 +553,7 @@ const k = class k extends x {
   // Handle checkbox change event
   async _handleChange(e) {
     const { checked: t } = e.target, r = this.checked;
-    this.checked = t, this.groupExist || this._internals.setFormValue(this.checked ? this.value : null), this.other && r && !t && (this.showOtherError = !1, this._hasUserInteracted = !1, this._dispatchClearError()), this._validate(), this._emitChangeEvent();
+    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();
   }
   _handleFocus() {
     this.dispatchEvent(new Event("nys-focus"));
@@ -417,7 +565,7 @@ const k = class k extends x {
     this._hasUserInteracted = !0, this._validateOtherAndEmitError();
   }
   async _handleKeydown(e) {
-    e.code === "Space" && (e.preventDefault(), this.disabled || (this.checked = !this.checked, this._internals.setFormValue(this.checked ? this.value : null), await this.updateComplete, this._validate(), this._emitChangeEvent()));
+    e.code === "Space" && (e.preventDefault(), this.disabled || (this.checked = !this.checked, this.setFormValue(this.checked ? this.value : null), await this.updateComplete, this._validate(), this._emitChangeEvent()));
   }
   _handleTextInput(e) {
     let r = e.target.value;
@@ -454,7 +602,7 @@ const k = class k extends x {
     );
   }
   render() {
-    return d`
+    return y`
       <div class="nys-checkbox">
         <div
           class="nys-checkbox__main-container ${this._hasDescription ? "has-description" : ""}"
@@ -464,44 +612,48 @@ const k = class k extends x {
               id=${this.id + "--native"}
               class="nys-checkbox__checkbox"
               type="checkbox"
-              name="${y(this.name ? this.name : void 0)}"
+              name="${u(this.name ? this.name : void 0)}"
               .checked=${this.checked}
               ?disabled=${this.disabled}
               .value=${this.value}
               ?required="${this.required}"
-              form=${y(this.form || void 0)}
+              form=${u(this.form || void 0)}
               aria-checked="${this.checked}"
               aria-disabled="${this.disabled ? "true" : "false"}"
               aria-required="${this.required}"
-              aria-describedby="group-info"
+              aria-invalid=${this.showError ? "true" : "false"}
+              aria-errormessage=${this.id + "--error"}
+              aria-describedby=${u(
+      this.showError ? this.id + "--error" : void 0
+    )}
               @change="${this._handleChange}"
               @focus="${this._handleFocus}"
               @keydown="${this._handleKeydown}"
-              aria-label=${this.label || y(this.other ? "Other" : void 0)}
+              aria-labelledby=${u(
+      !this.labelledby && (this.label || this.other) ? this.id + "--label" : void 0
+    )}
             />
-            ${this.checked ? d`<nys-icon
+            ${this.checked ? y`<nys-icon
                   name="check"
                   size="${this.size === "md" ? "4xl" : this.size === "sm" ? "2xl" : "4xl"}"
                   class="nys-checkbox__icon"
                 ></nys-icon>` : ""}
           </div>
-          ${(this.label || this.other) && d`
-            <nys-label
-              aria-hidden="true"
-              tooltip=${this.tooltip}
-              label="${this.label || (this.other ? "Other" : "")}"
-              description=${y(this.description || void 0)}
-              flag=${y(this.required ? "required" : void 0)}
-              class=${this._isStandalone ? "standalone" : ""}
-            >
-              <slot name="description" slot="description"
-                >${this.description}</slot
+          ${this.hideLabel || this.labelledby || !(this.label || this.other) ? C : y`<nys-label
+                id="${this.id}--label"
+                tooltip=${this.tooltip}
+                label="${this.label || (this.other ? "Other" : "")}"
+                description=${u(this.description || void 0)}
+                flag=${u(this.required ? "required" : void 0)}
+                class=${this._isStandalone ? "standalone" : ""}
               >
-            </nys-label>
-          `}
+                <slot name="description" slot="description"
+                  >${this.description}</slot
+                >
+              </nys-label>`}
         </div>
         <div class="nys-checkbox__other-container">
-          ${this.other && this.checked ? d`
+          ${this.other && this.checked ? y`
                 <nys-textinput
                   .value=${this.value}
                   id=${"radiobutton-other-" + this.id}
@@ -515,77 +667,84 @@ const k = class k extends x {
               ` : ""}
         </div>
       </div>
-      ${this.parentElement?.tagName.toLowerCase() !== "nys-checkboxgroup" ? d`<nys-errormessage
-            id="single-error-message"
+      ${this.parentElement?.tagName.toLowerCase() !== "nys-checkboxgroup" ? y`<nys-errormessage
+            id=${this.id + "--error"}
+            class="single-error-message"
             ?showError=${this.showError}
-            errorMessage=${this._internals.validationMessage || this.errorMessage}
+            errorMessage=${this.internals?.validationMessage || this.errorMessage}
             .showDivider=${!this.tile}
           ></nys-errormessage>` : ""}
     `;
   }
 };
-k.styles = v(f), k.shadowRootOptions = {
-  ...x.shadowRootOptions,
+_.styles = m(E), _.shadowRootOptions = {
+  ...f.shadowRootOptions,
   delegatesFocus: !0
-}, k.formAssociated = !0;
-let i = k;
+};
+let a = _;
+h([
+  s({ type: Boolean, reflect: !0 })
+], a.prototype, "checked");
+h([
+  s({ type: Boolean, reflect: !0 })
+], a.prototype, "disabled");
 h([
-  o({ type: Boolean, reflect: !0 })
-], i.prototype, "checked");
+  s({ type: Boolean, reflect: !0 })
+], a.prototype, "required");
 h([
-  o({ type: Boolean, reflect: !0 })
-], i.prototype, "disabled");
+  s({ type: String })
+], a.prototype, "label");
 h([
-  o({ type: Boolean, reflect: !0 })
-], i.prototype, "required");
+  s({ type: String })
+], a.prototype, "description");
 h([
-  o({ type: String })
-], i.prototype, "label");
+  s({ type: String, reflect: !0 })
+], a.prototype, "id");
 h([
-  o({ type: String })
-], i.prototype, "description");
+  s({ type: String, reflect: !0 })
+], a.prototype, "name");
 h([
-  o({ type: String, reflect: !0 })
-], i.prototype, "id");
+  s({ type: String })
+], a.prototype, "value");
 h([
-  o({ type: String, reflect: !0 })
-], i.prototype, "name");
+  s({ type: String, reflect: !0 })
+], a.prototype, "form");
 h([
-  o({ type: String })
-], i.prototype, "value");
+  s({ type: Boolean, reflect: !0 })
+], a.prototype, "showError");
 h([
-  o({ type: String, reflect: !0 })
-], i.prototype, "form");
+  s({ type: String })
+], a.prototype, "errorMessage");
 h([
-  o({ type: Boolean, reflect: !0 })
-], i.prototype, "showError");
+  s({ type: Boolean })
+], a.prototype, "groupExist");
 h([
-  o({ type: String })
-], i.prototype, "errorMessage");
+  s({ type: Boolean, reflect: !0 })
+], a.prototype, "tile");
 h([
-  o({ type: Boolean })
-], i.prototype, "groupExist");
+  s({ type: String })
+], a.prototype, "tooltip");
 h([
-  o({ type: Boolean, reflect: !0 })
-], i.prototype, "tile");
+  s({ type: String, reflect: !0 })
+], a.prototype, "size");
 h([
-  o({ type: String })
-], i.prototype, "tooltip");
+  s({ type: Boolean, reflect: !0 })
+], a.prototype, "other");
 h([
-  o({ type: String, reflect: !0 })
-], i.prototype, "size");
+  s({ type: Boolean })
+], a.prototype, "showOtherError");
 h([
-  o({ type: Boolean, reflect: !0 })
-], i.prototype, "other");
+  s({ type: String })
+], a.prototype, "labelledby");
 h([
-  o({ type: Boolean })
-], i.prototype, "showOtherError");
+  s({ type: Boolean })
+], a.prototype, "hideLabel");
 h([
-  _()
-], i.prototype, "isMobile");
-customElements.get("nys-checkbox") || customElements.define("nys-checkbox", i);
+  x()
+], a.prototype, "isMobile");
+customElements.get("nys-checkbox") || customElements.define("nys-checkbox", a);
 export {
-  i as NysCheckbox,
-  n as NysCheckboxgroup
+  a as NysCheckbox,
+  l as NysCheckboxgroup
 };
 //# sourceMappingURL=nys-checkbox.js.map