@nysds/nys-radiobutton 1.1.0 → 1.1.1

package/dist/nys-radiobutton.js

@@ -1,10 +1,10 @@
-import { css as a1, LitElement as F, html as w } from "lit";
+import { css as a1, LitElement as F, html as _ } from "lit";
 /*!
    * ▒█▄░▒█ ▒█░░▒█ ▒█▀▀▀█ ▒█▀▀▄ ▒█▀▀▀█ 
    * ▒█▒█▒█ ▒█▄▄▄█ ░▀▀▀▄▄ ▒█░▒█ ░▀▀▀▄▄ 
    * ▒█░░▀█ ░░▒█░░ ▒█▄▄▄█ ▒█▄▄▀ ▒█▄▄▄█
    * 
-   * Radiobutton Component v1.1.0
+   * Radiobutton Component v1.1.1
    * Part of the New York State Design System
    * Repository: https://github.com/its-hcd/nysds
    * License: MIT
@@ -14,7 +14,7 @@ import { css as a1, LitElement as F, html as w } from "lit";
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Y = globalThis, g1 = Y.ShadowRoot && (Y.ShadyCSS === void 0 || Y.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Q1 = Symbol(), x1 = /* @__PURE__ */ new WeakMap();
+const Y = globalThis, f1 = Y.ShadowRoot && (Y.ShadyCSS === void 0 || Y.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Q1 = Symbol(), x1 = /* @__PURE__ */ new WeakMap();
 let d5 = class {
   constructor(t, e, s) {
     if (this._$cssResult$ = !0, s !== Q1) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -23,7 +23,7 @@ let d5 = class {
   get styleSheet() {
     let t = this.o;
     const e = this.t;
-    if (g1 && t === void 0) {
+    if (f1 && t === void 0) {
       const s = e !== void 0 && e.length === 1;
       s && (t = x1.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), s && x1.set(e, t));
     }
@@ -33,23 +33,23 @@ let d5 = class {
     return this.cssText;
   }
 };
-const p5 = (o) => new d5(typeof o == "string" ? o : o + "", void 0, Q1), u5 = (o, t) => {
-  if (g1) o.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
+const u5 = (o) => new d5(typeof o == "string" ? o : o + "", void 0, Q1), p5 = (o, t) => {
+  if (f1) o.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
   else for (const e of t) {
     const s = document.createElement("style"), i = Y.litNonce;
     i !== void 0 && s.setAttribute("nonce", i), s.textContent = e.cssText, o.appendChild(s);
   }
-}, A1 = g1 ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((t) => {
+}, A1 = f1 ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((t) => {
   let e = "";
   for (const s of t.cssRules) e += s.cssText;
-  return p5(e);
+  return u5(e);
 })(o) : o;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: v5, defineProperty: y5, getOwnPropertyDescriptor: g5, getOwnPropertyNames: f5, getOwnPropertySymbols: w5, getPrototypeOf: _5 } = Object, E = globalThis, P1 = E.trustedTypes, m5 = P1 ? P1.emptyScript : "", d1 = E.reactiveElementPolyfillSupport, q = (o, t) => o, e1 = { toAttribute(o, t) {
+const { is: v5, defineProperty: y5, getOwnPropertyDescriptor: f5, getOwnPropertyNames: g5, getOwnPropertySymbols: w5, getPrototypeOf: _5 } = Object, E = globalThis, P1 = E.trustedTypes, m5 = P1 ? P1.emptyScript : "", d1 = E.reactiveElementPolyfillSupport, q = (o, t) => o, e1 = { toAttribute(o, t) {
   switch (t) {
     case Boolean:
       o = o ? m5 : null;
@@ -77,9 +77,9 @@ const { is: v5, defineProperty: y5, getOwnPropertyDescriptor: g5, getOwnProperty
       }
   }
   return e;
-} }, f1 = (o, t) => !v5(o, t), H1 = { attribute: !0, type: String, converter: e1, reflect: !1, hasChanged: f1 };
+} }, g1 = (o, t) => !v5(o, t), H1 = { attribute: !0, type: String, converter: e1, reflect: !1, hasChanged: g1 };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), E.litPropertyMetadata ?? (E.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-let z = class extends HTMLElement {
+let k = class extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ?? (this.l = [])).push(t);
   }
@@ -93,7 +93,7 @@ let z = class extends HTMLElement {
     }
   }
   static getPropertyDescriptor(t, e, s) {
-    const { get: i, set: r } = g5(this.prototype, t) ?? { get() {
+    const { get: i, set: r } = f5(this.prototype, t) ?? { get() {
       return this[e];
     }, set(n) {
       this[e] = n;
@@ -116,7 +116,7 @@ let z = class extends HTMLElement {
   static finalize() {
     if (this.hasOwnProperty(q("finalized"))) return;
     if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(q("properties"))) {
-      const e = this.properties, s = [...f5(e), ...w5(e)];
+      const e = this.properties, s = [...g5(e), ...w5(e)];
       for (const i of s) this.createProperty(i, e[i]);
     }
     const t = this[Symbol.metadata];
@@ -165,7 +165,7 @@ let z = class extends HTMLElement {
   }
   createRenderRoot() {
     const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return u5(t, this.constructor.elementStyles), t;
+    return p5(t, this.constructor.elementStyles), t;
   }
   connectedCallback() {
     var t;
@@ -204,7 +204,7 @@ let z = class extends HTMLElement {
   }
   requestUpdate(t, e, s) {
     if (t !== void 0) {
-      if (s ?? (s = this.constructor.getPropertyOptions(t)), !(s.hasChanged ?? f1)(this[t], e)) return;
+      if (s ?? (s = this.constructor.getPropertyOptions(t)), !(s.hasChanged ?? g1)(this[t], e)) return;
       this.P(t, e, s);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$ET());
@@ -277,13 +277,13 @@ let z = class extends HTMLElement {
   firstUpdated(t) {
   }
 };
-z.elementStyles = [], z.shadowRootOptions = { mode: "open" }, z[q("elementProperties")] = /* @__PURE__ */ new Map(), z[q("finalized")] = /* @__PURE__ */ new Map(), d1 == null || d1({ ReactiveElement: z }), (E.reactiveElementVersions ?? (E.reactiveElementVersions = [])).push("2.0.4");
+k.elementStyles = [], k.shadowRootOptions = { mode: "open" }, k[q("elementProperties")] = /* @__PURE__ */ new Map(), k[q("finalized")] = /* @__PURE__ */ new Map(), d1 == null || d1({ ReactiveElement: k }), (E.reactiveElementVersions ?? (E.reactiveElementVersions = [])).push("2.0.4");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const b5 = { attribute: !0, type: String, converter: e1, reflect: !1, hasChanged: f1 }, $5 = (o = b5, t, e) => {
+const b5 = { attribute: !0, type: String, converter: e1, reflect: !1, hasChanged: g1 }, $5 = (o = b5, t, e) => {
   const { kind: s, metadata: i } = e;
   let r = globalThis.litPropertyMetadata.get(i);
   if (r === void 0 && globalThis.litPropertyMetadata.set(i, r = /* @__PURE__ */ new Map()), r.set(e.name, o), s === "accessor") {
@@ -304,7 +304,7 @@ const b5 = { attribute: !0, type: String, converter: e1, reflect: !1, hasChanged
   }
   throw Error("Unsupported decorator location: " + s);
 };
-function p(o) {
+function d(o) {
   return (t, e) => typeof e == "object" ? $5(o, t, e) : ((s, i, r) => {
     const n = i.hasOwnProperty(r);
     return i.constructor.createProperty(r, n ? { ...s, wrapped: !0 } : s), n ? Object.getOwnPropertyDescriptor(i, r) : void 0;
@@ -316,29 +316,29 @@ function p(o) {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 function E5(o) {
-  return p({ ...o, state: !0, attribute: !1 });
+  return d({ ...o, state: !0, attribute: !1 });
 }
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const N = globalThis, s1 = N.trustedTypes, Z1 = s1 ? s1.createPolicy("lit-html", { createHTML: (o) => o }) : void 0, t5 = "$lit$", $ = `lit$${Math.random().toFixed(9).slice(2)}$`, e5 = "?" + $, S5 = `<${e5}>`, M = document, i1 = () => M.createComment(""), G = (o) => o === null || typeof o != "object" && typeof o != "function", w1 = Array.isArray, L5 = (o) => w1(o) || typeof (o == null ? void 0 : o[Symbol.iterator]) == "function", p1 = `[ 	
-\f\r]`, O = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, V1 = /-->/g, U1 = />/g, S = RegExp(`>|${p1}(?:([^\\s"'>=/]+)(${p1}*=${p1}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), z1 = /'/g, O1 = /"/g, s5 = /^(?:script|style|textarea|title)$/i, W = Symbol.for("lit-noChange"), c = Symbol.for("lit-nothing"), k1 = /* @__PURE__ */ new WeakMap(), L = M.createTreeWalker(M, 129);
+const N = globalThis, s1 = N.trustedTypes, Z1 = s1 ? s1.createPolicy("lit-html", { createHTML: (o) => o }) : void 0, t5 = "$lit$", $ = `lit$${Math.random().toFixed(9).slice(2)}$`, e5 = "?" + $, S5 = `<${e5}>`, M = document, i1 = () => M.createComment(""), G = (o) => o === null || typeof o != "object" && typeof o != "function", w1 = Array.isArray, L5 = (o) => w1(o) || typeof (o == null ? void 0 : o[Symbol.iterator]) == "function", u1 = `[ 	
+\f\r]`, z = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, V1 = /-->/g, U1 = />/g, S = RegExp(`>|${u1}(?:([^\\s"'>=/]+)(${u1}*=${u1}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), k1 = /'/g, z1 = /"/g, s5 = /^(?:script|style|textarea|title)$/i, W = Symbol.for("lit-noChange"), c = Symbol.for("lit-nothing"), O1 = /* @__PURE__ */ new WeakMap(), L = M.createTreeWalker(M, 129);
 function i5(o, t) {
   if (!w1(o) || !o.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return Z1 !== void 0 ? Z1.createHTML(t) : t;
 }
 const M5 = (o, t) => {
   const e = o.length - 1, s = [];
-  let i, r = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", n = O;
+  let i, r = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", n = z;
   for (let a = 0; a < e; a++) {
     const l = o[a];
-    let d, u, h = -1, g = 0;
-    for (; g < l.length && (n.lastIndex = g, u = n.exec(l), u !== null); ) g = n.lastIndex, n === O ? u[1] === "!--" ? n = V1 : u[1] !== void 0 ? n = U1 : u[2] !== void 0 ? (s5.test(u[2]) && (i = RegExp("</" + u[2], "g")), n = S) : u[3] !== void 0 && (n = S) : n === S ? u[0] === ">" ? (n = i ?? O, h = -1) : u[1] === void 0 ? h = -2 : (h = n.lastIndex - u[2].length, d = u[1], n = u[3] === void 0 ? S : u[3] === '"' ? O1 : z1) : n === O1 || n === z1 ? n = S : n === V1 || n === U1 ? n = O : (n = S, i = void 0);
+    let u, p, h = -1, g = 0;
+    for (; g < l.length && (n.lastIndex = g, p = n.exec(l), p !== null); ) g = n.lastIndex, n === z ? p[1] === "!--" ? n = V1 : p[1] !== void 0 ? n = U1 : p[2] !== void 0 ? (s5.test(p[2]) && (i = RegExp("</" + p[2], "g")), n = S) : p[3] !== void 0 && (n = S) : n === S ? p[0] === ">" ? (n = i ?? z, h = -1) : p[1] === void 0 ? h = -2 : (h = n.lastIndex - p[2].length, u = p[1], n = p[3] === void 0 ? S : p[3] === '"' ? z1 : k1) : n === z1 || n === k1 ? n = S : n === V1 || n === U1 ? n = z : (n = S, i = void 0);
     const b = n === S && o[a + 1].startsWith("/>") ? " " : "";
-    r += n === O ? l + S5 : h >= 0 ? (s.push(d), l.slice(0, h) + t5 + l.slice(h) + $ + b) : l + $ + (h === -2 ? a : b);
+    r += n === z ? l + S5 : h >= 0 ? (s.push(u), l.slice(0, h) + t5 + l.slice(h) + $ + b) : l + $ + (h === -2 ? a : b);
   }
   return [i5(o, r + (o[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), s];
 };
@@ -347,15 +347,15 @@ let v1 = class o5 {
     let i;
     this.parts = [];
     let r = 0, n = 0;
-    const a = t.length - 1, l = this.parts, [d, u] = M5(t, e);
-    if (this.el = o5.createElement(d, s), L.currentNode = this.el.content, e === 2 || e === 3) {
+    const a = t.length - 1, l = this.parts, [u, p] = M5(t, e);
+    if (this.el = o5.createElement(u, s), L.currentNode = this.el.content, e === 2 || e === 3) {
       const h = this.el.content.firstChild;
       h.replaceWith(...h.childNodes);
     }
     for (; (i = L.nextNode()) !== null && l.length < a; ) {
       if (i.nodeType === 1) {
         if (i.hasAttributes()) for (const h of i.getAttributeNames()) if (h.endsWith(t5)) {
-          const g = u[n++], b = i.getAttribute(h).split($), J = /([.?@])?(.*)/.exec(g);
+          const g = p[n++], b = i.getAttribute(h).split($), J = /([.?@])?(.*)/.exec(g);
           l.push({ type: 1, index: r, name: J[2], strings: b, ctor: J[1] === "." ? A5 : J[1] === "?" ? P5 : J[1] === "@" ? H5 : l1 }), i.removeAttribute(h);
         } else h.startsWith($) && (l.push({ type: 6, index: r }), i.removeAttribute(h));
         if (s5.test(i.tagName)) {
@@ -402,8 +402,8 @@ let x5 = class {
     let r = L.nextNode(), n = 0, a = 0, l = s[0];
     for (; l !== void 0; ) {
       if (n === l.index) {
-        let d;
-        l.type === 2 ? d = new r5(r, r.nextSibling, this, t) : l.type === 1 ? d = new l.ctor(r, l.name, l.strings, this, t) : l.type === 6 && (d = new Z5(r, this, t)), this._$AV.push(d), l = s[++a];
+        let u;
+        l.type === 2 ? u = new r5(r, r.nextSibling, this, t) : l.type === 1 ? u = new l.ctor(r, l.name, l.strings, this, t) : l.type === 6 && (u = new Z5(r, this, t)), this._$AV.push(u), l = s[++a];
       }
       n !== (l == null ? void 0 : l.index) && (r = L.nextNode(), n++);
     }
@@ -454,8 +454,8 @@ let x5 = class {
     }
   }
   _$AC(t) {
-    let e = k1.get(t.strings);
-    return e === void 0 && k1.set(t.strings, e = new v1(t)), e;
+    let e = O1.get(t.strings);
+    return e === void 0 && O1.set(t.strings, e = new v1(t)), e;
   }
   k(t) {
     w1(this._$AH) || (this._$AH = [], this._$AR());
@@ -491,8 +491,8 @@ let x5 = class {
     if (r === void 0) t = A(this, t, e, 0), n = !G(t) || t !== this._$AH && t !== W, n && (this._$AH = t);
     else {
       const a = t;
-      let l, d;
-      for (t = r[0], l = 0; l < r.length - 1; l++) d = A(this, a[s + l], e, l), d === W && (d = this._$AH[l]), n || (n = !G(d) || d !== this._$AH[l]), d === c ? t = c : t !== c && (t += (d ?? "") + r[l + 1]), this._$AH[l] = d;
+      let l, u;
+      for (t = r[0], l = 0; l < r.length - 1; l++) u = A(this, a[s + l], e, l), u === W && (u = this._$AH[l]), n || (n = !G(u) || u !== this._$AH[l]), u === c ? t = c : t !== c && (t += (u ?? "") + r[l + 1]), this._$AH[l] = u;
     }
     n && !i && this.j(t);
   }
@@ -537,8 +537,8 @@ let x5 = class {
     A(this, t);
   }
 };
-const u1 = N.litHtmlPolyfillSupport;
-u1 == null || u1(v1, r5), (N.litHtmlVersions ?? (N.litHtmlVersions = [])).push("3.2.1");
+const p1 = N.litHtmlPolyfillSupport;
+p1 == null || p1(v1, r5), (N.litHtmlVersions ?? (N.litHtmlVersions = [])).push("3.2.1");
 /**
  * @license
  * Copyright 2018 Google LLC
@@ -584,6 +584,10 @@ const V5 = (o) => o ?? c, a5 = a1`
       --nys-color-ink,
       var(--nys-color-neutral-900, #1b1b1b)
     );
+    --_nys-radiobutton-color-text: var(
+      --nys-color-text,
+      var(--nys-color-neutral-900, #1b1b1b)
+    );
 
     /* Default (Empty) */
     --_nys-radiobutton-color-bg: var(--nys-color-ink-reverse, #ffffff);
@@ -617,8 +621,8 @@ const V5 = (o) => o ?? c, a5 = a1`
     /* Disabled */
     --_nys-radiobutton-disabled-color-bg: var(--nys-color-ink-reverse, #f0f0f0);
     --_nys-radiobutton-disabled-color-text: var(
-      --nys-color-neutral-500,
-      #797c7f
+      --nys-color-text-disabled,
+      var(--nys-color-neutral-200, #bec0c1)
     );
     --_nys-radiobutton-disabled-color-border: var(
       --nys-color-neutral-100,
@@ -653,7 +657,7 @@ const V5 = (o) => o ?? c, a5 = a1`
   .nys-radiogroup {
     display: flex;
     flex-direction: column;
-    gap: var(--nys-spacing-50, 4px);
+    gap: var(--nys-space-200, 16px);
     font-family: var(--_nys-radiobutton-font-family);
     font-size: var(--_nys-radiobutton-font-size);
     line-height: var(--_nys-radiobutton-line-height);
@@ -745,13 +749,14 @@ const V5 = (o) => o ?? c, a5 = a1`
   /* Label styling */
   .nys-radiobutton__label {
     font-weight: var(--_nys-radiobutton-font-weight-400);
-    color: var(--_nys-radiobutton-color);
+    color: var(--_nys-radiobutton-color-text);
   }
 
   /* Description styling */
   .nys-radiobutton__description {
     font-weight: var(--_nys-radiobutton-font-weight-400);
     font-style: italic;
+    text-align: left;
   }
 
   /* gap between radio and it's label */
@@ -772,7 +777,7 @@ const V5 = (o) => o ?? c, a5 = a1`
   }
 `;
 /*!
-   * Label v1.1.0
+   * Label v1.1.1
    * Part of the New York State Design System
    * A design system for New York State's digital products.
    * Repository: https://github.com/its-hcd/nysds
@@ -802,7 +807,7 @@ let U5 = class {
     return this.cssText;
   }
 };
-const z5 = (o) => new U5(typeof o == "string" ? o : o + "", void 0, l5), O5 = (o, t) => {
+const k5 = (o) => new U5(typeof o == "string" ? o : o + "", void 0, l5), z5 = (o, t) => {
   if (_1) o.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
   else for (const e of t) {
     const s = document.createElement("style"), i = X.litNonce;
@@ -811,14 +816,14 @@ const z5 = (o) => new U5(typeof o == "string" ? o : o + "", void 0, l5), O5 = (o
 }, B1 = _1 ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((t) => {
   let e = "";
   for (const s of t.cssRules) e += s.cssText;
-  return z5(e);
+  return k5(e);
 })(o) : o;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: k5, defineProperty: R5, getOwnPropertyDescriptor: B5, getOwnPropertyNames: T5, getOwnPropertySymbols: q5, getPrototypeOf: N5 } = Object, P = globalThis, T1 = P.trustedTypes, D5 = T1 ? T1.emptyScript : "", q1 = P.reactiveElementPolyfillSupport, D = (o, t) => o, o1 = { toAttribute(o, t) {
+const { is: O5, defineProperty: R5, getOwnPropertyDescriptor: B5, getOwnPropertyNames: T5, getOwnPropertySymbols: q5, getPrototypeOf: N5 } = Object, P = globalThis, T1 = P.trustedTypes, D5 = T1 ? T1.emptyScript : "", q1 = P.reactiveElementPolyfillSupport, D = (o, t) => o, o1 = { toAttribute(o, t) {
   switch (t) {
     case Boolean:
       o = o ? D5 : null;
@@ -846,9 +851,9 @@ const { is: k5, defineProperty: R5, getOwnPropertyDescriptor: B5, getOwnProperty
       }
   }
   return e;
-} }, m1 = (o, t) => !k5(o, t), N1 = { attribute: !0, type: String, converter: o1, reflect: !1, hasChanged: m1 };
+} }, m1 = (o, t) => !O5(o, t), N1 = { attribute: !0, type: String, converter: o1, reflect: !1, hasChanged: m1 };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), P.litPropertyMetadata ?? (P.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-let k = class extends HTMLElement {
+let O = class extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ?? (this.l = [])).push(t);
   }
@@ -934,7 +939,7 @@ let k = class extends HTMLElement {
   }
   createRenderRoot() {
     const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return O5(t, this.constructor.elementStyles), t;
+    return z5(t, this.constructor.elementStyles), t;
   }
   connectedCallback() {
     var t;
@@ -1046,7 +1051,7 @@ let k = class extends HTMLElement {
   firstUpdated(t) {
   }
 };
-k.elementStyles = [], k.shadowRootOptions = { mode: "open" }, k[D("elementProperties")] = /* @__PURE__ */ new Map(), k[D("finalized")] = /* @__PURE__ */ new Map(), q1 == null || q1({ ReactiveElement: k }), (P.reactiveElementVersions ?? (P.reactiveElementVersions = [])).push("2.0.4");
+O.elementStyles = [], O.shadowRootOptions = { mode: "open" }, O[D("elementProperties")] = /* @__PURE__ */ new Map(), O[D("finalized")] = /* @__PURE__ */ new Map(), q1 == null || q1({ ReactiveElement: O }), (P.reactiveElementVersions ?? (P.reactiveElementVersions = [])).push("2.0.4");
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -1097,19 +1102,19 @@ const G5 = a1`
     --_nys-label-font-size: var(--nys-font-size-ui-md, 16px);
     --_nys-label-line-height: var(--nys-font-lineheight-ui-md, 24px);
     --_nys-label-letter-spacing: var(--nys-font-letterspacing-ui-md, 0.044px);
-    --_nys-label-font-color: var(--nys-color-ink, #1b1b1b);
+    --_nys-label-font-color: var(--nys-color-text, #1b1b1b);
 
     /* Description */
     --nys-description-font-weight: var(--nys-font-weight-regular, 400);
     --nys-description-font-style: italic;
-    --nys-description-font-color: var(--nys-neutral-900, #1b1b1b);
+    --nys-description-font-color: var(--nys-color-text, #1b1b1b);
 
     /* Required Flag */
     --nys-required-font-color: var(--nys-color-danger, #b52c2c);
 
     /* Optional Flag */
     --nys-optional-font-weight: var(--nys-font-weight-regular, 400);
-    --nys-optional-font-color: var(--nys-color-neutral-700, #4a4d4f);
+    --nys-optional-font-color: var(--nys-color-text-weak, #4a4d4f);
 
     /* Spacing */
     --_nys-label-flag-gap: var(--nys-space-2px, 2px);
@@ -1161,12 +1166,12 @@ const C5 = class extends F {
     super(...arguments), this.id = "", this.label = "", this.description = "", this.flag = "";
   }
   render() {
-    return w`
+    return _`
       <div class="nys-label">
         <label for=${this.id} class="nys-label__label"
           >${this.label}
-          ${this.flag === "required" ? w`<label class="nys-label__required">*</label>` : ""}
-          ${this.flag === "optional" ? w`<label class="nys-label__optional">(Optional)</label>` : ""}</label
+          ${this.flag === "required" ? _`<label class="nys-label__required">*</label>` : ""}
+          ${this.flag === "optional" ? _`<label class="nys-label__optional">(Optional)</label>` : ""}</label
         >
         <label for=${this.id} class="nys-label__description">
           <slot name="description">${this.description}</slot>
@@ -1191,7 +1196,7 @@ h1([
 ], K.prototype, "flag");
 customElements.get("nys-label") || customElements.define("nys-label", K);
 /*!
-   * Error Message v1.1.0
+   * Error Message v1.1.1
    * Part of the New York State Design System
    * A design system for New York State's digital products.
    * Repository: https://github.com/its-hcd/nysds
@@ -1553,7 +1558,7 @@ const n2 = a1`
    * ▒█▒█▒█ ▒█▄▄▄█ ░▀▀▀▄▄ ▒█░▒█ ░▀▀▀▄▄ 
    * ▒█░░▀█ ░░▒█░░ ▒█▄▄▄█ ▒█▄▄▀ ▒█▄▄▄█
    * 
-   * Icon Component v1.1.0
+   * Icon Component v1.1.1
    * Part of the New York State Design System
    * Repository: https://github.com/its-hcd/nysds
    * License: MIT
@@ -1598,7 +1603,7 @@ const l2 = (o) => new a2(typeof o == "string" ? o : o + "", void 0, c5), C2 = (o
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: h2, defineProperty: c2, getOwnPropertyDescriptor: d2, getOwnPropertyNames: p2, getOwnPropertySymbols: u2, getPrototypeOf: v2 } = Object, Z = globalThis, J1 = Z.trustedTypes, y2 = J1 ? J1.emptyScript : "", Y1 = Z.reactiveElementPolyfillSupport, I = (o, t) => o, n1 = { toAttribute(o, t) {
+const { is: h2, defineProperty: c2, getOwnPropertyDescriptor: d2, getOwnPropertyNames: u2, getOwnPropertySymbols: p2, getPrototypeOf: v2 } = Object, Z = globalThis, J1 = Z.trustedTypes, y2 = J1 ? J1.emptyScript : "", Y1 = Z.reactiveElementPolyfillSupport, I = (o, t) => o, n1 = { toAttribute(o, t) {
   switch (t) {
     case Boolean:
       o = o ? y2 : null;
@@ -1665,7 +1670,7 @@ class B extends HTMLElement {
   static finalize() {
     if (this.hasOwnProperty(I("finalized"))) return;
     if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(I("properties"))) {
-      const e = this.properties, s = [...p2(e), ...u2(e)];
+      const e = this.properties, s = [...u2(e), ...p2(e)];
       for (const i of s) this.createProperty(i, e[i]);
     }
     const t = this[Symbol.metadata];
@@ -1832,7 +1837,7 @@ B.elementStyles = [], B.shadowRootOptions = { mode: "open" }, B[I("elementProper
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const g2 = { attribute: !0, type: String, converter: n1, reflect: !1, hasChanged: L1 }, f2 = (o = g2, t, e) => {
+const f2 = { attribute: !0, type: String, converter: n1, reflect: !1, hasChanged: L1 }, g2 = (o = f2, t, e) => {
   const { kind: s, metadata: i } = e;
   let r = globalThis.litPropertyMetadata.get(i);
   if (r === void 0 && globalThis.litPropertyMetadata.set(i, r = /* @__PURE__ */ new Map()), r.set(e.name, o), s === "accessor") {
@@ -1854,7 +1859,7 @@ const g2 = { attribute: !0, type: String, converter: n1, reflect: !1, hasChanged
   throw Error("Unsupported decorator location: " + s);
 };
 function V(o) {
-  return (t, e) => typeof e == "object" ? f2(o, t, e) : ((s, i, r) => {
+  return (t, e) => typeof e == "object" ? g2(o, t, e) : ((s, i, r) => {
     const n = i.hasOwnProperty(r);
     return i.constructor.createProperty(r, n ? { ...s, wrapped: !0 } : s), n ? Object.getOwnPropertyDescriptor(i, r) : void 0;
   })(o, t, e);
@@ -2180,7 +2185,7 @@ const x = (T = class extends F {
   }
   render() {
     const o = this.getIcon();
-    return o ? w`${o}` : null;
+    return o ? _`${o}` : null;
   }
 }, T.styles = _2, T.VALID_TYPES = [
   "2xs",
@@ -2200,7 +2205,7 @@ const x = (T = class extends F {
   "64"
 ], T);
 U([
-  V({ type: String })
+  V({ type: String, reflect: !0 })
 ], x.prototype, "name", 2);
 U([
   V({ type: String })
@@ -2230,7 +2235,7 @@ const y1 = class extends F {
     super(), this.showError = !1, this.errorMessage = "", this.showDivider = !1, this._internals = this.attachInternals();
   }
   render() {
-    return w`${this.showError ? w`<div class="nys-errormessage" ?showDivider=${this.showDivider}>
+    return _`${this.showError ? _`<div class="nys-errormessage" ?showDivider=${this.showDivider}>
           <nys-icon name="error" size="xl"></nys-icon>
           ${this._internals.validationMessage || this.errorMessage}
         </div>` : ""}`;
@@ -2248,23 +2253,23 @@ M1([
   E1({ type: Boolean, reflect: !0 })
 ], c1.prototype, "showDivider");
 customElements.get("nys-errormessage") || customElements.define("nys-errormessage", c1);
-var S2 = Object.defineProperty, L2 = Object.getOwnPropertyDescriptor, _ = (o, t, e, s) => {
+var S2 = Object.defineProperty, L2 = Object.getOwnPropertyDescriptor, y = (o, t, e, s) => {
   for (var i = s > 1 ? void 0 : s ? L2(t, e) : t, r = o.length - 1, n; r >= 0; r--)
     (n = o[r]) && (i = (s ? n(t, e, i) : n(i)) || i);
   return s && i && S2(t, e, i), i;
 };
 let M2 = 0;
-var f;
-const v = (f = class extends F {
+var w;
+const v = (w = class extends F {
   // allows use of elementInternals' API
   constructor() {
-    super(), this.id = "", this.name = "", this.required = !1, this.showError = !1, this.errorMessage = "", this.label = "", this.description = "", this.selectedValue = null, this._size = "md", this._internals = this.attachInternals();
+    super(), this.id = "", this.name = "", this.required = !1, this.optional = !1, this.showError = !1, this.errorMessage = "", this.label = "", this.description = "", this.selectedValue = null, this._size = "md", this._internals = this.attachInternals();
   }
   get size() {
     return this._size;
   }
   set size(t) {
-    this._size = f.VALID_SIZES.includes(
+    this._size = w.VALID_SIZES.includes(
       t
     ) ? t : "md";
   }
@@ -2276,10 +2281,10 @@ const v = (f = class extends F {
     super.disconnectedCallback(), this.removeEventListener("change", this._handleRadioButtonChange), this.removeEventListener("invalid", this._handleInvalid);
   }
   firstUpdated() {
-    this._initializeCheckedState(), this._setValue(), this.setRadioButtonRequire();
+    this._initializeCheckedRadioValue(), this._setValue(), this.setRadioButtonRequire();
   }
   updated(t) {
-    (t.has("required") || t.has("selectedValue")) && this._manageRequire(), t.has("size") && this.updateRadioButtonsSize();
+    (t.has("required") || t.has("selectedValue")) && this._manageRequire(), t.has("size") && this._updateRadioButtonsSize();
   }
   // This callback is automatically called when the parent form is reset.
   formResetCallback() {
@@ -2291,7 +2296,7 @@ const v = (f = class extends F {
   _setValue() {
     this._internals.setFormValue(this.selectedValue);
   }
-  // Updates the "require" attribute of a radiobutton underneath a radiogroup to ensure requirement for all radiobutton under the same name/group
+  // Updates the "require" attribute of the first radiobutton underneath a radiogroup to ensure requirement for all radiobutton under the same name/group
   setRadioButtonRequire() {
     this.querySelectorAll("nys-radiobutton").forEach((e, s) => {
       this.required && s === 0 && e.setAttribute("required", "required");
@@ -2299,32 +2304,47 @@ const v = (f = class extends F {
   }
   async _manageRequire() {
     const t = this.errorMessage || "Please select an option.", e = this.querySelector("nys-radiobutton"), s = e ? await e.getInputElement() : null;
-    this.required && !this.selectedValue ? (this._internals.setValidity(
+    this.required && !this.selectedValue ? this._internals.setValidity(
       { valueMissing: !0 },
       t,
-      s || this
-    ), this.showError = !0) : (this._internals.setValidity({}), this.showError = !1);
+      s
+    ) : (this.showError = !1, this._internals.setValidity({}, "", s));
   }
-  _initializeCheckedState() {
+  // Need to account for if radiogroup already have a radiobutton checked at initialization
+  _initializeCheckedRadioValue() {
     const t = this.querySelector("nys-radiobutton[checked]");
     t && (this.selectedValue = t.getAttribute("value"), this._internals.setFormValue(this.selectedValue));
   }
+  /********************** Functions **********************/
   // Updates the size of each radiobutton underneath a radiogroup to ensure size standardization
-  updateRadioButtonsSize() {
+  _updateRadioButtonsSize() {
     this.querySelectorAll("nys-radiobutton").forEach((e) => {
       e.setAttribute("size", this.size);
     });
   }
-  // Keeps radiogroup informed of the name and value of its current selected radiobutton
+  // Keeps radiogroup informed of the name and value of its current selected radiobutton at each change
   _handleRadioButtonChange(t) {
-    const e = t, { value: s } = e.detail;
-    this.selectedValue = s, this._internals.setFormValue(this.selectedValue);
-  }
-  _handleInvalid() {
-    this._internals.validity.valueMissing && (this.showError = !0, this._manageRequire());
+    const e = t, { name: s, value: i } = e.detail;
+    this.name = s, this.selectedValue = i, this._internals.setFormValue(this.selectedValue);
+  }
+  async _handleInvalid(t) {
+    if (t.preventDefault(), this._internals.validity.valueMissing) {
+      this.showError = !0, this._manageRequire();
+      const e = this.querySelector("nys-radiobutton"), s = e ? await e.getInputElement() : null;
+      if (s) {
+        const i = this._internals.form;
+        i ? Array.from(i.elements).find((a) => {
+          if (a.tagName.toLowerCase() === "nys-radiogroup") {
+            if (!a.querySelector("nys-radiobutton").checkValidity())
+              return a;
+          } else
+            return typeof a.checkValidity == "function" && !a.checkValidity();
+        }) === this && s.focus() : s.focus();
+      }
+    }
   }
   render() {
-    return w` <div
+    return _` <div
       role="radiogroup"
       class="nys-radiogroup"
       aria-required="${this.required ? "true" : "false"}"
@@ -2333,7 +2353,7 @@ const v = (f = class extends F {
       <nys-label
         label=${this.label}
         description=${this.description}
-        flag=${this.required ? "required" : ""}
+        flag=${this.required ? "required" : this.optional ? "optional" : ""}
       >
         <slot name="description" slot="description">${this.description}</slot>
       </nys-label>
@@ -2347,33 +2367,36 @@ const v = (f = class extends F {
       ></nys-errormessage>
     </div>`;
   }
-}, f.VALID_SIZES = ["sm", "md"], f.styles = a5, f.formAssociated = !0, f);
-_([
-  p({ type: String })
+}, w.VALID_SIZES = ["sm", "md"], w.styles = a5, w.formAssociated = !0, w);
+y([
+  d({ type: String })
 ], v.prototype, "id", 2);
-_([
-  p({ type: String })
+y([
+  d({ type: String, reflect: !0 })
 ], v.prototype, "name", 2);
-_([
-  p({ type: Boolean, reflect: !0 })
+y([
+  d({ type: Boolean, reflect: !0 })
 ], v.prototype, "required", 2);
-_([
-  p({ type: Boolean, reflect: !0 })
+y([
+  d({ type: Boolean, reflect: !0 })
+], v.prototype, "optional", 2);
+y([
+  d({ type: Boolean, reflect: !0 })
 ], v.prototype, "showError", 2);
-_([
-  p({ type: String })
+y([
+  d({ type: String })
 ], v.prototype, "errorMessage", 2);
-_([
-  p({ type: String })
+y([
+  d({ type: String })
 ], v.prototype, "label", 2);
-_([
-  p({ type: String })
+y([
+  d({ type: String })
 ], v.prototype, "description", 2);
-_([
+y([
   E5()
 ], v.prototype, "selectedValue", 2);
-_([
-  p({ reflect: !0 })
+y([
+  d({ reflect: !0 })
 ], v.prototype, "size", 1);
 let x2 = v;
 customElements.get("nys-radiogroup") || customElements.define("nys-radiogroup", x2);
@@ -2384,7 +2407,7 @@ var A2 = Object.defineProperty, P2 = Object.getOwnPropertyDescriptor, m = (o, t,
 };
 let H2 = 0;
 var C;
-const y = (C = class extends F {
+const f = (C = class extends F {
   constructor() {
     super(...arguments), this.checked = !1, this.disabled = !1, this.required = !1, this.label = "", this.description = "", this.id = "", this.name = "", this.value = "", this._size = "md";
   }
@@ -2412,6 +2435,15 @@ const y = (C = class extends F {
   updated(t) {
     t.has("checked") && this.checked && C.buttonGroup[this.name] !== this && (C.buttonGroup[this.name] && (C.buttonGroup[this.name].checked = !1, C.buttonGroup[this.name].requestUpdate()), C.buttonGroup[this.name] = this);
   }
+  /******************** Function ********************/
+  // This helper function is called to perform the element's native validation.
+  checkValidity() {
+    var e;
+    if (this.required && !this.checked)
+      return !1;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("input");
+    return t ? t.checkValidity() : !0;
+  }
   /******************** Event Handlers ********************/
   // Handle radiobutton change event & unselection of other options in group
   _handleChange() {
@@ -2446,7 +2478,7 @@ const y = (C = class extends F {
     )));
   }
   render() {
-    return w`
+    return _`
       <label class="nys-radiobutton">
         <input
           id="${this.id}"
@@ -2465,13 +2497,12 @@ const y = (C = class extends F {
           @blur="${this._handleBlur}"
           @keydown="${this._handleKeydown}"
         />
-        ${this.label && w` <div class="nys-radiobutton__text">
+        ${this.label && _` <div class="nys-radiobutton__text">
           <label for=${this.id} class="nys-radiobutton__label"
             >${this.label}</label
           >
           <label for=${this.id} class="nys-radiobutton__description">
-            ${this.description}
-            <slot></slot>
+            <slot name="description">${this.description}</slot>
           </label>
         </div>`}
       </label>
@@ -2479,35 +2510,36 @@ const y = (C = class extends F {
   }
 }, C.VALID_SIZES = ["sm", "md"], C.buttonGroup = {}, C.styles = a5, C);
 m([
-  p({ type: Boolean, reflect: !0 })
-], y.prototype, "checked", 2);
+  d({ type: Boolean, reflect: !0 })
+], f.prototype, "checked", 2);
 m([
-  p({ type: Boolean, reflect: !0 })
-], y.prototype, "disabled", 2);
+  d({ type: Boolean, reflect: !0 })
+], f.prototype, "disabled", 2);
 m([
-  p({ type: Boolean, reflect: !0 })
-], y.prototype, "required", 2);
+  d({ type: Boolean, reflect: !0 })
+], f.prototype, "required", 2);
 m([
-  p({ type: String })
-], y.prototype, "label", 2);
+  d({ type: String })
+], f.prototype, "label", 2);
 m([
-  p({ type: String })
-], y.prototype, "description", 2);
+  d({ type: String })
+], f.prototype, "description", 2);
 m([
-  p({ type: String })
-], y.prototype, "id", 2);
+  d({ type: String })
+], f.prototype, "id", 2);
 m([
-  p({ type: String })
-], y.prototype, "name", 2);
+  d({ type: String, reflect: !0 })
+], f.prototype, "name", 2);
 m([
-  p({ type: String })
-], y.prototype, "value", 2);
+  d({ type: String })
+], f.prototype, "value", 2);
 m([
-  p({ reflect: !0 })
-], y.prototype, "size", 1);
-let Z2 = y;
+  d({ reflect: !0 })
+], f.prototype, "size", 1);
+let Z2 = f;
 customElements.get("nys-radiobutton") || customElements.define("nys-radiobutton", Z2);
 export {
-  Z2 as NysRadiobutton
+  Z2 as NysRadiobutton,
+  x2 as NysRadiogroup
 };
 //# sourceMappingURL=nys-radiobutton.js.map