@viasat/beam-react 2.19.0 → 2.21.0

package/lib/Card/Card.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),o=require("react"),P=require("clsx"),ne=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const de=require("../Box/Box.cjs.js");require("../../chunks/CSSLookup.DESAWWRT.js");require("../../utils/hooks/useId.cjs.js");const oe=require("../../utils/hooks/useInteractiveProps.cjs.js"),t=require("../../chunks/card.module.8KnCe1uR.js"),ce=require("../Box/utils.cjs.js"),ue=require("./Card.MediaAbove.cjs.js"),be=require("./Card.Header.cjs.js"),_e=require("./Card.MediaBelow.cjs.js"),fe=require("./Card.Body.cjs.js"),ye=require("./Card.Content.cjs.js"),Ce=require("./Card.Footer.cjs.js"),me=require("./CardContext.cjs.js"),pe=require("./useCardGroup.cjs.js"),he=require("../StateLayer/StateLayer.cjs.js"),{baseClassNamePrefix:c,classModifierPrefix:d,subElementClassPrefix:u}=ne.getBEMClassNames("card"),qe='button, a, input:not([data-card-input]), select, textarea, [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])',n=({children:R,className:k,density:N="md",borderColor:g,borderRadius:C,backgroundColor:B,shadow:E,type:S,as:L,disabled:T=!1,href:M,target:A,rel:j,onClick:s,selectionMode:O="single",showIndicator:G=!1,selected:H,defaultSelected:V=!1,onSelect:F,name:K,value:U,style:m,...b})=>{const p=me.useCardGroupContext();process.env.NODE_ENV!=="production"&&p&&S==="clickable"&&console.warn('Card: type="clickable" is ignored when Card is inside a CardGroup; treating as selectable instead.');const h=p?"selectable":S,q=!!h,a=h==="clickable",i=h==="selectable",{selected:v,handleChange:W,resolvedValue:X,isSelectionEligible:x,resolvedDisabled:r,resolvedName:z,resolvedShowIndicator:J,inputType:w}=pe.useCardGroup({cardGroup:p,selected:H,defaultSelected:V,value:U,id:b.id,disabled:T,name:K,selectionMode:O,showIndicator:G,onSelect:F}),I=o.useRef(null),_=L??(a&&M?"a":"div"),Q=o.useMemo(()=>C?{...m,"--bm-card-radius-outer":ce.BOX_BORDER_RADIUS_TO_CSS_VAR[C]}:m,[C,m]),f=o.useCallback(e=>{if(!e||!(e instanceof Element))return!1;const $=e.closest(qe);if(!$)return!1;const l=e.closest(`.${t.styles[c]}`);return $!==l},[]),Y=o.useCallback(e=>{if(r)return;if(f(e.target)){if(a&&_==="a"){const l=e.target,D=l==null?void 0:l.closest('a, [role="link"]');(!D||D===e.currentTarget)&&e.preventDefault()}return}if(a&&(s==null||s(e)),i){if(!x)return;const l=e.target;if(l.tagName==="INPUT"&&l.hasAttribute("data-card-input"))return;I.current&&I.current.click()}},[a,i,x,f,_,s,r]),Z=o.useCallback(e=>{r||e.key!=="Enter"&&e.key!==" "||f(e.target)||(e.preventDefault(),a&&(s==null||s(e)))},[a,f,s,r]),ee=P(t.styles[c],!B&&t.styles[`${c}--default-background`],!E&&t.styles[`${c}--default-shadow`],!g&&t.styles[`${c}--default-border`],q&&t.styles[`${d}interactive`],a&&t.styles[`${d}clickable`],i&&t.styles[`${d}selectable`],i&&v&&t.styles[`${d}selected`],r&&t.styles[`${d}disabled`],N&&t.styles[`${d}density-${N}`],k),te=oe.useInteractiveProps({isInteractive:q,disabled:r,isClickable:a,elementType:_,href:a?M:void 0,target:a?A:void 0,rel:a?j:void 0,onClick:Y,onKeyDown:Z}),ae=()=>!i||!x?null:y.jsx("input",{ref:I,type:w,className:t.styles[`${u}hidden-input`],checked:v,disabled:r,name:z,value:X,onChange:W,"aria-label":b["aria-label"],"aria-labelledby":b["aria-labelledby"],"data-card-input":""}),re=()=>{if(!i||!J)return null;const e=P(t.styles[`${u}selection-indicator`],t.styles[`${u}selection-indicator--${w}`],v&&t.styles[`${u}selection-indicator--checked`],r&&t.styles[`${u}selection-indicator--disabled`]);return y.jsx("span",{className:e,"aria-hidden":"true"})},{"aria-label":se,"aria-labelledby":ie,...le}=b;return y.jsxs(de.Box,{as:_,className:ee,borderColor:g,borderWidth:"md",backgroundColor:B,shadow:E,style:Q,...te,...le,"aria-label":i?void 0:se,"aria-labelledby":i?void 0:ie,children:[ae(),re(),q&&!r&&y.jsx(he.StateLayer,{}),R]})};n.displayName="Card";n.MediaAbove=ue.MediaAbove;n.MediaBelow=_e.MediaBelow;n.Header=be.Header;n.Body=fe.Body;n.Content=ye.Content;n.Footer=Ce.Footer;exports.Card=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("react/jsx-runtime"),d=require("react"),T=require("clsx"),ue=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const be=require("../Box/Box.cjs.js");require("../../chunks/CSSLookup.DESAWWRT.js");require("../../utils/hooks/useId.cjs.js");const fe=require("../../utils/hooks/useInteractiveProps.cjs.js"),t=require("../../chunks/card.module.8KnCe1uR.js"),_e=require("../../chunks/form.context.B26th8Od.js");require("../Form/contexts/label.context.cjs.js");require("../Form/contexts/helperText.context.cjs.js");const ye=require("../Box/utils.cjs.js"),Ce=require("./Card.MediaAbove.cjs.js"),me=require("./Card.Header.cjs.js"),qe=require("./Card.MediaBelow.cjs.js"),ve=require("./Card.Body.cjs.js"),xe=require("./Card.Content.cjs.js"),he=require("./Card.Footer.cjs.js"),pe=require("./CardContext.cjs.js"),Ie=require("./useCardGroup.cjs.js"),$e=require("../StateLayer/StateLayer.cjs.js"),{baseClassNamePrefix:u,classModifierPrefix:c,subElementClassPrefix:b}=ue.getBEMClassNames("card"),ge='button, a, input:not([data-card-input]), select, textarea, [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])',o=({children:P,className:k,density:g="md",borderColor:N,borderRadius:m,backgroundColor:E,shadow:B,type:S,as:L,disabled:O=!1,href:M,target:A,rel:H,onClick:i,selectionMode:j="single",showIndicator:F=!1,selected:V,defaultSelected:K=!1,onSelect:U,name:W,value:X,style:q,...f})=>{const a=pe.useCardGroupContext(),z=!!a,{ctxDisabled:G}=d.useContext(_e.FormContext),J=O||(z?!1:G);process.env.NODE_ENV!=="production"&&a&&S==="clickable"&&console.warn('Card: type="clickable" is ignored when Card is inside a CardGroup; treating as selectable instead.');const v=a?"selectable":S,x=!!v,r=v==="clickable",l=v==="selectable",{selected:h,handleChange:Q,resolvedValue:Y,isSelectionEligible:p,resolvedDisabled:s,resolvedName:Z,resolvedShowIndicator:ee,inputType:w}=Ie.useCardGroup({cardGroup:a,selected:V,defaultSelected:K,value:X,id:f.id,disabled:J,name:W,selectionMode:j,showIndicator:F,onSelect:U}),I=d.useRef(null),_=L??(r&&M?"a":"div"),te=d.useMemo(()=>m?{...q,"--bm-card-radius-outer":ye.BOX_BORDER_RADIUS_TO_CSS_VAR[m]}:q,[m,q]),y=d.useCallback(e=>{if(!e||!(e instanceof Element))return!1;const $=e.closest(ge);if(!$)return!1;const n=e.closest(`.${t.styles[u]}`);return $!==n},[]),D=a==null?void 0:a.readOnly,ae=d.useCallback(e=>{if(s||D)return;if(y(e.target)){if(r&&_==="a"){const n=e.target,R=n==null?void 0:n.closest('a, [role="link"]');(!R||R===e.currentTarget)&&e.preventDefault()}return}if(r&&(i==null||i(e)),l){if(!p)return;const n=e.target;if(n.tagName==="INPUT"&&n.hasAttribute("data-card-input"))return;I.current&&I.current.click()}},[r,l,p,y,_,i,s,D]),re=d.useCallback(e=>{s||e.key!=="Enter"&&e.key!==" "||y(e.target)||(e.preventDefault(),r&&(i==null||i(e)))},[r,y,i,s]),se=T(t.styles[u],!E&&t.styles[`${u}--default-background`],!B&&t.styles[`${u}--default-shadow`],!N&&t.styles[`${u}--default-border`],x&&t.styles[`${c}interactive`],r&&t.styles[`${c}clickable`],l&&t.styles[`${c}selectable`],l&&h&&t.styles[`${c}selected`],s&&t.styles[`${c}disabled`],g&&t.styles[`${c}density-${g}`],k),ie=fe.useInteractiveProps({isInteractive:x,disabled:s,isClickable:r,elementType:_,href:r?M:void 0,target:r?A:void 0,rel:r?H:void 0,onClick:ae,onKeyDown:re}),le=()=>!l||!p?null:C.jsx("input",{ref:I,type:w,className:t.styles[`${b}hidden-input`],checked:h,disabled:s,name:Z,value:Y,onChange:Q,"aria-label":f["aria-label"],"aria-labelledby":f["aria-labelledby"],"aria-invalid":(a==null?void 0:a.isInvalid)||void 0,"aria-errormessage":a==null?void 0:a.validationErrorsId,"data-card-input":""}),ne=()=>{if(!l||!ee)return null;const e=T(t.styles[`${b}selection-indicator`],t.styles[`${b}selection-indicator--${w}`],h&&t.styles[`${b}selection-indicator--checked`],s&&t.styles[`${b}selection-indicator--disabled`]);return C.jsx("span",{className:e,"aria-hidden":"true"})},{"aria-label":oe,"aria-labelledby":de,...ce}=f;return C.jsxs(be.Box,{as:_,className:se,borderColor:N,borderWidth:"md",backgroundColor:E,shadow:B,style:te,...ie,...ce,"aria-label":l?void 0:oe,"aria-labelledby":l?void 0:de,children:[le(),ne(),x&&!s&&C.jsx($e.StateLayer,{}),P]})};o.displayName="Card";o.MediaAbove=Ce.MediaAbove;o.MediaBelow=qe.MediaBelow;o.Header=me.Header;o.Body=ve.Body;o.Content=xe.Content;o.Footer=he.Footer;exports.Card=o;

package/lib/Card/Card.es.js

@@ -1,197 +1,203 @@
-import { jsxs as le, jsx as E } from "react/jsx-runtime";
-import { useRef as ne, useMemo as de, useCallback as g } from "react";
-import R from "clsx";
-import { g as ce } from "../../chunks/classNames.BTJmrO_L.js";
+import { jsxs as me, jsx as x } from "react/jsx-runtime";
+import fe, { useRef as ue, useMemo as be, useCallback as E } from "react";
+import P from "clsx";
+import { g as pe } from "../../chunks/classNames.BTJmrO_L.js";
 import "../../chunks/constants.CKKGf1-i.js";
-import { Box as ue } from "../Box/Box.es.js";
+import { Box as he } from "../Box/Box.es.js";
 import "../../chunks/CSSLookup.DOOy1rxJ.js";
 import "../../utils/hooks/useId.es.js";
-import { useInteractiveProps as me } from "../../utils/hooks/useInteractiveProps.es.js";
+import { useInteractiveProps as ve } from "../../utils/hooks/useInteractiveProps.es.js";
 import { s as t } from "../../chunks/card.module.ByBYpexJ.js";
-import { BOX_BORDER_RADIUS_TO_CSS_VAR as fe } from "../Box/utils.es.js";
-import { MediaAbove as be } from "./Card.MediaAbove.es.js";
-import { Header as pe } from "./Card.Header.es.js";
-import { MediaBelow as he } from "./Card.MediaBelow.es.js";
-import { Body as ye } from "./Card.Body.es.js";
-import { Content as $e } from "./Card.Content.es.js";
-import { Footer as Ie } from "./Card.Footer.es.js";
-import { useCardGroupContext as ve } from "./CardContext.es.js";
-import { useCardGroup as Ne } from "./useCardGroup.es.js";
-import { StateLayer as Ce } from "../StateLayer/StateLayer.es.js";
-const { baseClassNamePrefix: d, classModifierPrefix: n, subElementClassPrefix: c } = ce("card"), Ee = 'button, a, input:not([data-card-input]), select, textarea, [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])', l = ({
+import { F as ye } from "../../chunks/form.context.BhylRiG2.js";
+import "../Form/contexts/label.context.es.js";
+import "../Form/contexts/helperText.context.es.js";
+import { BOX_BORDER_RADIUS_TO_CSS_VAR as Ie } from "../Box/utils.es.js";
+import { MediaAbove as $e } from "./Card.MediaAbove.es.js";
+import { Header as Ce } from "./Card.Header.es.js";
+import { MediaBelow as ge } from "./Card.MediaBelow.es.js";
+import { Body as xe } from "./Card.Body.es.js";
+import { Content as Ee } from "./Card.Content.es.js";
+import { Footer as Ne } from "./Card.Footer.es.js";
+import { useCardGroupContext as De } from "./CardContext.es.js";
+import { useCardGroup as we } from "./useCardGroup.es.js";
+import { StateLayer as Se } from "../StateLayer/StateLayer.es.js";
+const { baseClassNamePrefix: c, classModifierPrefix: d, subElementClassPrefix: m } = pe("card"), _e = 'button, a, input:not([data-card-input]), select, textarea, [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])', n = ({
   children: T,
   className: A,
-  density: x = "md",
-  borderColor: w,
-  borderRadius: b,
-  backgroundColor: S,
-  shadow: B,
-  type: D,
+  density: N = "md",
+  borderColor: D,
+  borderRadius: p,
+  backgroundColor: w,
+  shadow: S,
+  type: _,
   as: L,
   disabled: k = !1,
-  href: M,
-  target: O,
-  rel: G,
-  onClick: i,
-  selectionMode: H = "single",
-  showIndicator: V = !1,
-  selected: j,
-  defaultSelected: F = !1,
-  onSelect: K,
-  name: U,
-  value: W,
-  style: p,
-  ...u
+  href: B,
+  target: F,
+  rel: H,
+  onClick: s,
+  selectionMode: V = "single",
+  showIndicator: j = !1,
+  selected: K,
+  defaultSelected: U = !1,
+  onSelect: W,
+  name: X,
+  value: q,
+  style: h,
+  ...f
 }) => {
-  const h = ve();
-  process.env.NODE_ENV !== "production" && h && D === "clickable" && console.warn(
+  const a = De(), z = !!a, { ctxDisabled: J } = fe.useContext(ye), Q = k || (z ? !1 : J);
+  process.env.NODE_ENV !== "production" && a && _ === "clickable" && console.warn(
     'Card: type="clickable" is ignored when Card is inside a CardGroup; treating as selectable instead.'
   );
-  const y = h ? "selectable" : D, $ = !!y, r = y === "clickable", o = y === "selectable", {
+  const v = a ? "selectable" : _, y = !!v, r = v === "clickable", o = v === "selectable", {
     selected: I,
-    handleChange: X,
-    resolvedValue: q,
-    isSelectionEligible: v,
-    resolvedDisabled: a,
-    resolvedName: z,
-    resolvedShowIndicator: J,
-    inputType: _
-  } = Ne({
-    cardGroup: h,
-    selected: j,
-    defaultSelected: F,
-    value: W,
-    id: u.id,
-    disabled: k,
-    name: U,
-    selectionMode: H,
-    showIndicator: V,
-    onSelect: K
-  }), N = ne(null), m = L ?? (r && M ? "a" : "div"), Q = de(() => b ? {
-    ...p,
-    "--bm-card-radius-outer": fe[b]
-  } : p, [b, p]), f = g(
+    handleChange: Y,
+    resolvedValue: Z,
+    isSelectionEligible: $,
+    resolvedDisabled: i,
+    resolvedName: G,
+    resolvedShowIndicator: ee,
+    inputType: M
+  } = we({
+    cardGroup: a,
+    selected: K,
+    defaultSelected: U,
+    value: q,
+    id: f.id,
+    disabled: Q,
+    name: X,
+    selectionMode: V,
+    showIndicator: j,
+    onSelect: W
+  }), C = ue(null), u = L ?? (r && B ? "a" : "div"), te = be(() => p ? {
+    ...h,
+    "--bm-card-radius-outer": Ie[p]
+  } : h, [p, h]), b = E(
     (e) => {
       if (!e || !(e instanceof Element)) return !1;
-      const C = e.closest(Ee);
-      if (!C) return !1;
-      const s = e.closest(`.${t[d]}`);
-      return C !== s;
+      const g = e.closest(_e);
+      if (!g) return !1;
+      const l = e.closest(`.${t[c]}`);
+      return g !== l;
     },
     []
-  ), Y = g(
+  ), R = a == null ? void 0 : a.readOnly, ae = E(
     (e) => {
-      if (a) return;
-      if (f(e.target)) {
-        if (r && m === "a") {
-          const s = e.target, P = s == null ? void 0 : s.closest('a, [role="link"]');
-          (!P || P === e.currentTarget) && e.preventDefault();
+      if (i || R) return;
+      if (b(e.target)) {
+        if (r && u === "a") {
+          const l = e.target, O = l == null ? void 0 : l.closest('a, [role="link"]');
+          (!O || O === e.currentTarget) && e.preventDefault();
         }
         return;
       }
-      if (r && (i == null || i(e)), o) {
-        if (!v) return;
-        const s = e.target;
-        if (s.tagName === "INPUT" && s.hasAttribute("data-card-input"))
+      if (r && (s == null || s(e)), o) {
+        if (!$) return;
+        const l = e.target;
+        if (l.tagName === "INPUT" && l.hasAttribute("data-card-input"))
           return;
-        N.current && N.current.click();
+        C.current && C.current.click();
       }
     },
     [
       r,
       o,
-      v,
-      f,
-      m,
+      $,
+      b,
+      u,
+      s,
       i,
-      a
+      R
     ]
-  ), Z = g(
+  ), re = E(
     (e) => {
-      a || e.key !== "Enter" && e.key !== " " || f(e.target) || (e.preventDefault(), r && (i == null || i(e)));
+      i || e.key !== "Enter" && e.key !== " " || b(e.target) || (e.preventDefault(), r && (s == null || s(e)));
     },
-    [r, f, i, a]
-  ), ee = R(
-    t[d],
-    !S && t[`${d}--default-background`],
-    !B && t[`${d}--default-shadow`],
-    !w && t[`${d}--default-border`],
-    $ && t[`${n}interactive`],
-    r && t[`${n}clickable`],
-    o && t[`${n}selectable`],
-    o && I && t[`${n}selected`],
-    a && t[`${n}disabled`],
-    x && t[`${n}density-${x}`],
+    [r, b, s, i]
+  ), ie = P(
+    t[c],
+    !w && t[`${c}--default-background`],
+    !S && t[`${c}--default-shadow`],
+    !D && t[`${c}--default-border`],
+    y && t[`${d}interactive`],
+    r && t[`${d}clickable`],
+    o && t[`${d}selectable`],
+    o && I && t[`${d}selected`],
+    i && t[`${d}disabled`],
+    N && t[`${d}density-${N}`],
     A
-  ), te = me({
-    isInteractive: $,
-    disabled: a,
+  ), se = ve({
+    isInteractive: y,
+    disabled: i,
     isClickable: r,
-    elementType: m,
-    href: r ? M : void 0,
-    target: r ? O : void 0,
-    rel: r ? G : void 0,
-    onClick: Y,
-    onKeyDown: Z
-  }), re = () => !o || !v ? null : /* @__PURE__ */ E(
+    elementType: u,
+    href: r ? B : void 0,
+    target: r ? F : void 0,
+    rel: r ? H : void 0,
+    onClick: ae,
+    onKeyDown: re
+  }), oe = () => !o || !$ ? null : /* @__PURE__ */ x(
     "input",
     {
-      ref: N,
-      type: _,
-      className: t[`${c}hidden-input`],
+      ref: C,
+      type: M,
+      className: t[`${m}hidden-input`],
       checked: I,
-      disabled: a,
-      name: z,
-      value: q,
-      onChange: X,
-      "aria-label": u["aria-label"],
-      "aria-labelledby": u["aria-labelledby"],
+      disabled: i,
+      name: G,
+      value: Z,
+      onChange: Y,
+      "aria-label": f["aria-label"],
+      "aria-labelledby": f["aria-labelledby"],
+      "aria-invalid": (a == null ? void 0 : a.isInvalid) || void 0,
+      "aria-errormessage": a == null ? void 0 : a.validationErrorsId,
       "data-card-input": ""
     }
-  ), ae = () => {
-    if (!o || !J) return null;
-    const e = R(
-      t[`${c}selection-indicator`],
-      t[`${c}selection-indicator--${_}`],
-      I && t[`${c}selection-indicator--checked`],
-      a && t[`${c}selection-indicator--disabled`]
+  ), le = () => {
+    if (!o || !ee) return null;
+    const e = P(
+      t[`${m}selection-indicator`],
+      t[`${m}selection-indicator--${M}`],
+      I && t[`${m}selection-indicator--checked`],
+      i && t[`${m}selection-indicator--disabled`]
     );
-    return /* @__PURE__ */ E("span", { className: e, "aria-hidden": "true" });
+    return /* @__PURE__ */ x("span", { className: e, "aria-hidden": "true" });
   }, {
-    "aria-label": ie,
-    "aria-labelledby": oe,
-    ...se
-  } = u;
-  return /* @__PURE__ */ le(
-    ue,
+    "aria-label": ne,
+    "aria-labelledby": de,
+    ...ce
+  } = f;
+  return /* @__PURE__ */ me(
+    he,
     {
-      as: m,
-      className: ee,
-      borderColor: w,
+      as: u,
+      className: ie,
+      borderColor: D,
       borderWidth: "md",
-      backgroundColor: S,
-      shadow: B,
-      style: Q,
-      ...te,
+      backgroundColor: w,
+      shadow: S,
+      style: te,
       ...se,
-      "aria-label": o ? void 0 : ie,
-      "aria-labelledby": o ? void 0 : oe,
+      ...ce,
+      "aria-label": o ? void 0 : ne,
+      "aria-labelledby": o ? void 0 : de,
       children: [
-        re(),
-        ae(),
-        $ && !a && /* @__PURE__ */ E(Ce, {}),
+        oe(),
+        le(),
+        y && !i && /* @__PURE__ */ x(Se, {}),
         T
       ]
     }
   );
 };
-l.displayName = "Card";
-l.MediaAbove = be;
-l.MediaBelow = he;
-l.Header = pe;
-l.Body = ye;
-l.Content = $e;
-l.Footer = Ie;
+n.displayName = "Card";
+n.MediaAbove = $e;
+n.MediaBelow = ge;
+n.Header = Ce;
+n.Body = xe;
+n.Content = Ee;
+n.Footer = Ne;
 export {
-  l as Card
+  n as Card
 };

package/lib/Card/CardContext.d.ts

@@ -5,8 +5,12 @@ export interface CardGroupContextValue {
     showIndicator?: boolean;
     name?: string;
     disabled?: boolean;
+    required?: boolean;
+    readOnly?: boolean;
     value?: string | string[];
     onItemSelect?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    validationErrorsId?: string;
+    isInvalid?: boolean;
 }
 export declare const CardGroupProvider: ({ children, value, }: {
     children: React.ReactNode;

package/lib/Card/CardGroup.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),y=require("react"),f=require("clsx"),h=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const G=require("../../chunks/card.module.8KnCe1uR.js");require("../../chunks/CSSLookup.DESAWWRT.js");const I=require("../../utils/hooks/useId.cjs.js"),M=require("./CardContext.cjs.js"),V=require("./useCardGroupValue.cjs.js"),{classModifierPrefix:j}=h.getBEMClassNames("card"),i=u=>{const{children:d,className:c,disabled:e=!1,selectionMode:a="single",showIndicator:r=!1,name:n,value:m,defaultValue:b,onChange:C,"aria-label":p,"aria-labelledby":q,...g}=u,v=I.useId(),s=n??v,{currentValue:l,handleItemSelect:o}=V.useCardGroupValue({value:m,defaultValue:b,selectionMode:a,onChange:C}),N=f(e&&G.styles[`${j}disabled`],c),_=a==="single"?"radiogroup":"group",x=y.useMemo(()=>({selectionMode:a,showIndicator:r,name:s,disabled:e,value:l,onItemSelect:o}),[a,r,s,e,l,o]);return t.jsx("div",{role:_,"aria-disabled":e||void 0,"aria-label":p,"aria-labelledby":q,className:N,...g,children:t.jsx(M.CardGroupProvider,{value:x,children:d})})};i.displayName="CardGroup";exports.CardGroup=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),u=require("react"),E=require("../../utils/functions.cjs.js"),k=require("clsx"),F=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const T=require("../../chunks/card.module.8KnCe1uR.js");require("../../chunks/CSSLookup.DESAWWRT.js");const A=require("../../utils/hooks/useId.cjs.js"),B=require("../Form/hooks/useAccessibleId.hook.cjs.js"),H=require("../../chunks/form.context.B26th8Od.js");require("../Form/contexts/label.context.cjs.js");require("../Form/contexts/helperText.context.cjs.js");const L=require("./CardContext.cjs.js"),$=require("./useCardGroupValue.cjs.js"),{classModifierPrefix:z}=F.getBEMClassNames("card"),q=u.forwardRef((v,_)=>{const{children:f,className:p,disabled:y=!1,required:C=!1,readOnly:g=!1,validationRules:h=[],selectionMode:e="single",showIndicator:n=!1,name:I,value:x,defaultValue:N,onChange:R,"aria-label":G,"aria-labelledby":P,...M}=v,O=A.useId(),{id:r}=B.useAccessibleId(),o=I??O,{showErrors:S,isInvalid:i,errorShown:l,disabled:a,readOnly:s,required:d}=H.useFormField({name:o,validationRules:h,disabledProp:y,readOnlyProp:g,requiredProp:C}),t=u.useRef(null),{currentValue:c,handleItemSelect:b}=$.useCardGroupValue({value:x,defaultValue:N,selectionMode:e,onChange:R,rootRef:t}),V=k(a&&T.styles[`${z}disabled`],p),j=e==="single"?"radiogroup":"group",w=u.useMemo(()=>({selectionMode:e,showIndicator:n,name:o,disabled:a,required:d,readOnly:s,value:c,onItemSelect:b,validationErrorsId:l?r:void 0,isInvalid:i}),[e,n,o,a,d,s,c,b,l,r,i]);return m.jsxs("div",{ref:E.mergeRefs(t,_),role:j,"aria-disabled":a||s||void 0,"aria-readonly":s||void 0,"aria-required":d||void 0,"aria-invalid":i||void 0,"aria-errormessage":l?r:void 0,"aria-label":G,"aria-labelledby":P,className:V,...M,children:[m.jsx(L.CardGroupProvider,{value:w,children:f}),S(r)]})});q.displayName="CardGroup";exports.CardGroup=q;

package/lib/Card/CardGroup.d.ts

@@ -1,10 +1,11 @@
-import { default as React } from 'react';
+import { default as React, ComponentPropsWithoutRef } from 'react';
 import { CardGroupSelectionMode } from '@viasat/beam-shared/components/card';
-export type CardGroupProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> & {
+import { FormValidator } from '@viasat/beam-shared/components/form';
+export interface CardGroupProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
     /**
      * The Cards that belong to this CardGroup
      */
-    children?: React.ReactNode;
+    'children'?: React.ReactNode;
     /**
      * Accessible group label
      */
@@ -48,8 +49,19 @@ export type CardGroupProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'onChan
      * Callback invoked when the group selection changes
      */
     'onChange'?: (value: string | string[] | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
-};
-export declare const CardGroup: {
-    (props: CardGroupProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+    /**
+     * Specify if the group is a required field
+     * @default false
+     */
+    'required'?: boolean;
+    /**
+     * Specify if the group displays in a read-only state
+     * @default false
+     */
+    'readOnly'?: boolean;
+    /**
+     * Specify form validation rules for the group
+     */
+    'validationRules'?: FormValidator[];
+}
+export declare const CardGroup: React.ForwardRefExoticComponent<CardGroupProps & React.RefAttributes<HTMLDivElement>>;

package/lib/Card/CardGroup.es.js

@@ -1,67 +1,99 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useMemo as x } from "react";
-import y from "clsx";
-import { g as G } from "../../chunks/classNames.BTJmrO_L.js";
+import { jsxs as O, jsx as V } from "react/jsx-runtime";
+import S, { forwardRef as j, useMemo as B } from "react";
+import { mergeRefs as F } from "../../utils/functions.es.js";
+import L from "clsx";
+import { g as A } from "../../chunks/classNames.BTJmrO_L.js";
 import "../../chunks/constants.CKKGf1-i.js";
-import { s as I } from "../../chunks/card.module.ByBYpexJ.js";
+import { s as $ } from "../../chunks/card.module.ByBYpexJ.js";
 import "../../chunks/CSSLookup.DOOy1rxJ.js";
-import { useId as M } from "../../utils/hooks/useId.es.js";
-import { CardGroupProvider as V } from "./CardContext.es.js";
-import { useCardGroupValue as B } from "./useCardGroupValue.es.js";
-const { classModifierPrefix: L } = G("card"), P = (i) => {
+import { useId as k } from "../../utils/hooks/useId.es.js";
+import { useAccessibleId as z } from "../Form/hooks/useAccessibleId.hook.es.js";
+import { b as D } from "../../chunks/form.context.BhylRiG2.js";
+import "../Form/contexts/label.context.es.js";
+import "../Form/contexts/helperText.context.es.js";
+import { CardGroupProvider as H } from "./CardContext.es.js";
+import { useCardGroupValue as J } from "./useCardGroupValue.es.js";
+const { classModifierPrefix: K } = A("card"), Q = j((c, p) => {
   const {
-    children: m,
-    className: d,
-    disabled: e = !1,
-    selectionMode: a = "single",
-    showIndicator: r = !1,
-    name: n,
-    value: c,
-    defaultValue: u,
-    onChange: p,
-    "aria-label": f,
-    "aria-labelledby": b,
-    ...g
-  } = i, v = M(), o = n ?? v, { currentValue: l, handleItemSelect: s } = B({
-    value: c,
-    defaultValue: u,
-    selectionMode: a,
-    onChange: p
-  }), N = y(
-    e && I[`${L}disabled`],
-    d
-  ), C = a === "single" ? "radiogroup" : "group", h = x(
+    children: f,
+    className: v,
+    disabled: b = !1,
+    required: y = !1,
+    readOnly: g = !1,
+    validationRules: I = [],
+    selectionMode: e = "single",
+    showIndicator: t = !1,
+    name: h,
+    value: N,
+    defaultValue: x,
+    onChange: C,
+    "aria-label": R,
+    "aria-labelledby": _,
+    ...q
+  } = c, P = k(), { id: r } = z(), i = h ?? P, { showErrors: w, isInvalid: s, errorShown: l, disabled: a, readOnly: o, required: d } = D({
+    name: i,
+    validationRules: I,
+    disabledProp: b,
+    readOnlyProp: g,
+    requiredProp: y
+  }), m = S.useRef(null), { currentValue: n, handleItemSelect: u } = J({
+    value: N,
+    defaultValue: x,
+    selectionMode: e,
+    onChange: C,
+    rootRef: m
+  }), E = L(
+    a && $[`${K}disabled`],
+    v
+  ), G = e === "single" ? "radiogroup" : "group", M = B(
     () => ({
-      selectionMode: a,
-      showIndicator: r,
-      name: o,
-      disabled: e,
-      value: l,
-      onItemSelect: s
+      selectionMode: e,
+      showIndicator: t,
+      name: i,
+      disabled: a,
+      required: d,
+      readOnly: o,
+      value: n,
+      onItemSelect: u,
+      validationErrorsId: l ? r : void 0,
+      isInvalid: s
     }),
     [
+      e,
+      t,
+      i,
       a,
-      r,
+      d,
       o,
-      e,
+      n,
+      u,
       l,
+      r,
       s
     ]
   );
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ O(
     "div",
     {
-      role: C,
-      "aria-disabled": e || void 0,
-      "aria-label": f,
-      "aria-labelledby": b,
-      className: N,
-      ...g,
-      children: /* @__PURE__ */ t(V, { value: h, children: m })
+      ref: F(m, p),
+      role: G,
+      "aria-disabled": a || o || void 0,
+      "aria-readonly": o || void 0,
+      "aria-required": d || void 0,
+      "aria-invalid": s || void 0,
+      "aria-errormessage": l ? r : void 0,
+      "aria-label": R,
+      "aria-labelledby": _,
+      className: E,
+      ...q,
+      children: [
+        /* @__PURE__ */ V(H, { value: M, children: f }),
+        w(r)
+      ]
     }
   );
-};
-P.displayName = "CardGroup";
+});
+Q.displayName = "CardGroup";
 export {
-  P as CardGroup
+  Q as CardGroup
 };

package/lib/Card/useCardGroup.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),k=require("./card.utils.cjs.js");function q({cardGroup:e,selected:C,defaultSelected:S,value:b,id:m,disabled:I,name:y,selectionMode:M,showIndicator:a,onSelect:n}){const t=!!e,s=b??m,o=!t||!!s;l.useEffect(()=>{process.env.NODE_ENV!=="production"&&t&&!s&&console.warn("Card: A Card inside a CardGroup is missing a `value` or `id` prop. It will not participate in group selection.")},[]);const f=I||(e==null?void 0:e.disabled)||!1,c=(e==null?void 0:e.name)??y,h=(e==null?void 0:e.showIndicator)??a,w=(e==null?void 0:e.selectionMode)??M??"single",E=k.getInputType(w),[_,A]=l.useState(()=>t?!1:S),N=C!==void 0?C:_,i=e==null?void 0:e.value,v=(e==null?void 0:e.selectionMode)??"single",T=l.useMemo(()=>!t||!s?null:v==="single"?i===s:Array.isArray(i)?i.includes(s):!1,[i,v,t,s]),V=t?T??!1:N,d=l.useCallback(g=>{f||!o||(e!=null&&e.onItemSelect&&s?e.onItemSelect(s,g):A(g.target.checked),n==null||n(g))},[f,o,e,s,n]);return{selected:V,handleChange:d,resolvedValue:s,isSelectionEligible:o,resolvedDisabled:f,resolvedName:c,resolvedShowIndicator:h,inputType:E}}exports.useCardGroup=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),D=require("./card.utils.cjs.js");function a({cardGroup:e,selected:C,defaultSelected:S,value:b,id:m,disabled:y,name:I,selectionMode:M,showIndicator:h,onSelect:n}){const t=!!e,s=b??m,o=!t||!!s;i.useEffect(()=>{process.env.NODE_ENV!=="production"&&t&&!s&&console.warn("Card: A Card inside a CardGroup is missing a `value` or `id` prop. It will not participate in group selection.")},[]);const f=y||(e==null?void 0:e.disabled)||!1,w=(e==null?void 0:e.name)??I,E=(e==null?void 0:e.showIndicator)??h,_=(e==null?void 0:e.selectionMode)??M??"single",A=D.getInputType(_),[N,O]=i.useState(()=>t?!1:S),T=C!==void 0?C:N,l=e==null?void 0:e.value,v=(e==null?void 0:e.selectionMode)??"single",V=i.useMemo(()=>!t||!s?null:v==="single"?l===s:Array.isArray(l)?l.includes(s):!1,[l,v,t,s]),k=t?V??!1:T,q=i.useCallback(g=>{f||e!=null&&e.readOnly||!o||(e!=null&&e.onItemSelect&&s?e.onItemSelect(s,g):O(g.target.checked),n==null||n(g))},[f,o,e,s,n]);return{selected:k,handleChange:q,resolvedValue:s,isSelectionEligible:o,resolvedDisabled:f,resolvedName:w,resolvedShowIndicator:E,inputType:A}}exports.useCardGroup=a;

package/lib/Card/useCardGroup.es.js

@@ -1,4 +1,4 @@
-import { useEffect as O, useState as _, useMemo as j, useCallback as q } from "react";
+import { useEffect as x, useState as _, useMemo as j, useCallback as q } from "react";
 import { getInputType as z } from "./card.utils.es.js";
 function J({
   cardGroup: e,
@@ -8,32 +8,32 @@ function J({
   id: I,
   disabled: S,
   name: h,
-  selectionMode: M,
-  showIndicator: b,
+  selectionMode: y,
+  showIndicator: M,
   onSelect: n
 }) {
-  const t = !!e, s = v ?? I, l = !t || !!s;
-  O(() => {
+  const t = !!e, s = v ?? I, i = !t || !!s;
+  x(() => {
     process.env.NODE_ENV !== "production" && t && !s && console.warn(
       "Card: A Card inside a CardGroup is missing a `value` or `id` prop. It will not participate in group selection."
     );
   }, []);
-  const o = S || (e == null ? void 0 : e.disabled) || !1, w = (e == null ? void 0 : e.name) ?? h, y = (e == null ? void 0 : e.showIndicator) ?? b, E = (e == null ? void 0 : e.selectionMode) ?? M ?? "single", A = z(E), [N, V] = _(
+  const f = S || (e == null ? void 0 : e.disabled) || !1, b = (e == null ? void 0 : e.name) ?? h, w = (e == null ? void 0 : e.showIndicator) ?? M, E = (e == null ? void 0 : e.selectionMode) ?? y ?? "single", A = z(E), [N, V] = _(
     () => t ? !1 : C
-  ), k = g !== void 0 ? g : N, i = e == null ? void 0 : e.value, m = (e == null ? void 0 : e.selectionMode) ?? "single", D = j(() => !t || !s ? null : m === "single" ? i === s : Array.isArray(i) ? i.includes(s) : !1, [i, m, t, s]), T = t ? D ?? !1 : k, x = q(
-    (f) => {
-      o || !l || (e != null && e.onItemSelect && s ? e.onItemSelect(s, f) : V(f.target.checked), n == null || n(f));
+  ), k = g !== void 0 ? g : N, l = e == null ? void 0 : e.value, m = (e == null ? void 0 : e.selectionMode) ?? "single", D = j(() => !t || !s ? null : m === "single" ? l === s : Array.isArray(l) ? l.includes(s) : !1, [l, m, t, s]), O = t ? D ?? !1 : k, T = q(
+    (o) => {
+      f || e != null && e.readOnly || !i || (e != null && e.onItemSelect && s ? e.onItemSelect(s, o) : V(o.target.checked), n == null || n(o));
     },
-    [o, l, e, s, n]
+    [f, i, e, s, n]
   );
   return {
-    selected: T,
-    handleChange: x,
+    selected: O,
+    handleChange: T,
     resolvedValue: s,
-    isSelectionEligible: l,
-    resolvedDisabled: o,
-    resolvedName: w,
-    resolvedShowIndicator: y,
+    isSelectionEligible: i,
+    resolvedDisabled: f,
+    resolvedName: b,
+    resolvedShowIndicator: w,
     inputType: A
   };
 }

package/lib/Card/useCardGroupValue.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),s=require("./card.utils.cjs.js");function b({value:o,defaultValue:n,selectionMode:t,onChange:r}){const u=o!==void 0,[d,y]=a.useState(()=>t==="single"?s.normalizeToSingle(n):s.normalizeToArray(n)),i=u?o:d,e=a.useMemo(()=>t==="single"?s.normalizeToSingle(i):s.normalizeToArray(i),[i,t]),f=a.useCallback((l,S)=>{if(t==="single"){u||y(l),r==null||r(l,S);return}const c=s.normalizeToArray(e),T=c.includes(l)?c.filter(z=>z!==l):[...c,l];u||y(T),r==null||r(T,S)},[t,e,u,r]);return{currentValue:e,handleItemSelect:f}}exports.useCardGroupValue=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),l=require("./card.utils.cjs.js");function A({value:f,defaultValue:m,selectionMode:u,onChange:e,rootRef:c}){const t=f!==void 0,y=i.useRef(u==="single"?l.normalizeToSingle(m):l.normalizeToArray(m)),[T,a]=i.useState(()=>y.current);i.useEffect(()=>{var s;if(t)return;const r=(s=c==null?void 0:c.current)==null?void 0:s.closest("form");if(!r)return;const n=()=>a(y.current);return r.addEventListener("reset",n),()=>r.removeEventListener("reset",n)},[t,c]);const o=t?f:T,d=i.useMemo(()=>u==="single"?l.normalizeToSingle(o):l.normalizeToArray(o),[o,u]),z=i.useCallback((r,n)=>{if(u==="single"){t||a(r),e==null||e(r,n);return}const s=l.normalizeToArray(d),S=s.includes(r)?s.filter(b=>b!==r):[...s,r];t||a(S),e==null||e(S,n)},[u,d,t,e]);return{currentValue:d,handleItemSelect:z}}exports.useCardGroupValue=A;

package/lib/Card/useCardGroupValue.d.ts

@@ -5,10 +5,11 @@ interface UseCardGroupValueParams {
     defaultValue: string | string[] | undefined;
     selectionMode: CardGroupSelectionMode;
     onChange?: (value: string | string[] | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
+    rootRef?: React.RefObject<HTMLDivElement>;
 }
 interface UseCardGroupValueReturn {
     currentValue: string | string[] | undefined;
     handleItemSelect: (itemValue: string, event: React.ChangeEvent<HTMLInputElement>) => void;
 }
-export declare function useCardGroupValue({ value, defaultValue, selectionMode, onChange, }: UseCardGroupValueParams): UseCardGroupValueReturn;
+export declare function useCardGroupValue({ value, defaultValue, selectionMode, onChange, rootRef, }: UseCardGroupValueParams): UseCardGroupValueReturn;
 export {};

package/lib/Card/useCardGroupValue.es.js

@@ -1,29 +1,41 @@
-import { useState as I, useMemo as T, useCallback as a } from "react";
-import { normalizeToSingle as x, normalizeToArray as f } from "./card.utils.es.js";
-function w({
-  value: m,
-  defaultValue: o,
-  selectionMode: t,
-  onChange: r
+import { useRef as z, useState as A, useEffect as I, useMemo as L, useCallback as T } from "react";
+import { normalizeToSingle as S, normalizeToArray as m } from "./card.utils.es.js";
+function k({
+  value: a,
+  defaultValue: p,
+  selectionMode: u,
+  onChange: t,
+  rootRef: n
 }) {
-  const l = m !== void 0, [y, p] = I(
-    () => t === "single" ? x(o) : f(o)
-  ), u = l ? m : y, c = T(
-    () => t === "single" ? x(u) : f(u),
-    [u, t]
-  ), z = a(
-    (s, n) => {
-      if (t === "single") {
-        l || p(s), r == null || r(s, n);
+  const s = a !== void 0, d = z(
+    u === "single" ? S(p) : m(p)
+  ), [v, i] = A(
+    () => d.current
+  );
+  I(() => {
+    var e;
+    if (s) return;
+    const r = (e = n == null ? void 0 : n.current) == null ? void 0 : e.closest("form");
+    if (!r) return;
+    const c = () => i(d.current);
+    return r.addEventListener("reset", c), () => r.removeEventListener("reset", c);
+  }, [s, n]);
+  const l = s ? a : v, f = L(
+    () => u === "single" ? S(l) : m(l),
+    [l, u]
+  ), x = T(
+    (r, c) => {
+      if (u === "single") {
+        s || i(r), t == null || t(r, c);
         return;
       }
-      const i = f(c), S = i.includes(s) ? i.filter((A) => A !== s) : [...i, s];
-      l || p(S), r == null || r(S, n);
+      const e = m(f), E = e.includes(r) ? e.filter((y) => y !== r) : [...e, r];
+      s || i(E), t == null || t(E, c);
     },
-    [t, c, l, r]
+    [u, f, s, t]
   );
-  return { currentValue: c, handleItemSelect: z };
+  return { currentValue: f, handleItemSelect: x };
 }
 export {
-  w as useCardGroupValue
+  k as useCardGroupValue
 };

package/lib/wip/Panel/Panel.Header.Heading.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("clsx"),i=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const c=require("../../../chunks/panel.module.BX1x4FlX.js"),{subElementClassPrefix:o}=i.getBEMClassNames("panel"),u=`${o}header`,e=({children:s,className:a,...n})=>{const r=l(c.styles[`${u}__heading`],a);return t.jsx("div",{className:r,...n,children:s})};e.displayName="Panel.Header.Heading";exports.Heading=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react/jsx-runtime"),o=require("react"),g=require("clsx"),m=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const q=require("../../../chunks/FloatingUI.context.B15Tz_4h.js"),b=require("./Panel.context.cjs.js"),x=require("../../../utils/hooks/useId.cjs.js"),I=require("../../../chunks/panel.module.BX1x4FlX.js"),{subElementClassPrefix:y}=m.getBEMClassNames("panel"),P=`${y}header`,a=({children:r,className:i,id:c,...l})=>{const u=x.useId(),e=c??u,d=g(I.styles[`${P}__heading`],i),t=o.useContext(b.PanelContext),n=o.useContext(q.BmFloatingUIContext),s=(t==null?void 0:t.kind)==="overlay"?n==null?void 0:n.setLabelId:void 0;return o.useLayoutEffect(()=>{if(!(!s||!e))return s(e),()=>s(void 0)},[e,s]),_.jsx("div",{id:e,className:d,...l,children:r})};a.displayName="Panel.Header.Heading";exports.Heading=a;

package/lib/wip/Panel/Panel.Header.Heading.d.ts

@@ -6,6 +6,6 @@ export interface PanelHeaderHeadingProps extends ComponentPropsWithoutRef<'div'>
     children?: React.ReactNode;
 }
 export declare const Heading: {
-    ({ children, className: _className, ...props }: PanelHeaderHeadingProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, className: _className, id: _id, ...props }: PanelHeaderHeadingProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/lib/wip/Panel/Panel.Header.Heading.es.js

@@ -1,17 +1,25 @@
-import { jsx as m } from "react/jsx-runtime";
-import o from "clsx";
-import { g as t } from "../../../chunks/classNames.BTJmrO_L.js";
+import { jsx as c } from "react/jsx-runtime";
+import { useContext as r, useLayoutEffect as f } from "react";
+import p from "clsx";
+import { g as u } from "../../../chunks/classNames.BTJmrO_L.js";
 import "../../../chunks/constants.CKKGf1-i.js";
-import { s as i } from "../../../chunks/panel.module.BVm3KvDs.js";
-const { subElementClassPrefix: l } = t("panel"), n = `${l}header`, p = ({
-  children: s,
-  className: e,
-  ...a
+import { B as g } from "../../../chunks/FloatingUI.context.Dl4Y1y1z.js";
+import { PanelContext as x } from "./Panel.context.es.js";
+import { useId as I } from "../../../utils/hooks/useId.es.js";
+import { s as b } from "../../../chunks/panel.module.BVm3KvDs.js";
+const { subElementClassPrefix: v } = u("panel"), y = `${v}header`, C = ({
+  children: a,
+  className: m,
+  id: n,
+  ...i
 }) => {
-  const r = o(i[`${n}__heading`], e);
-  return /* @__PURE__ */ m("div", { className: r, ...a, children: s });
+  const d = I(), e = n ?? d, l = p(b[`${y}__heading`], m), o = r(x), t = r(g), s = (o == null ? void 0 : o.kind) === "overlay" ? t == null ? void 0 : t.setLabelId : void 0;
+  return f(() => {
+    if (!(!s || !e))
+      return s(e), () => s(void 0);
+  }, [e, s]), /* @__PURE__ */ c("div", { id: e, className: l, ...i, children: a });
 };
-p.displayName = "Panel.Header.Heading";
+C.displayName = "Panel.Header.Heading";
 export {
-  p as Heading
+  C as Heading
 };

package/lib/wip/Panel/Panel.Header.Row.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("clsx"),m=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const _=require("../../CloseButton/CloseButton.cjs.js"),b=require("./Panel.context.cjs.js"),s=require("../../../chunks/panel.module.BX1x4FlX.js"),{subElementClassPrefix:C}=m.getBEMClassNames("panel"),t=`${C}header`,l=({children:o,className:n,...a})=>{const{dismissible:r,closeButtonAriaLabel:i,requestClose:c}=b.usePanelContext(),u=d(s.styles[`${t}__row`],n);return e.jsxs("div",{className:u,...a,children:[o,r&&e.jsx("div",{className:s.styles[`${t}__close-button`],children:e.jsx(_.CloseButton,{"aria-label":i,onClick:()=>c("closeButton"),size:"lg"})})]})};l.displayName="Panel.Header.Row";exports.Row=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("clsx"),b=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const m=require("../../CloseButton/CloseButton.cjs.js"),_=require("../../Tooltip/Tooltip.cjs.js"),p=require("./Panel.context.cjs.js"),t=require("../../../chunks/panel.module.BX1x4FlX.js"),{subElementClassPrefix:x}=b.getBEMClassNames("panel"),l=`${x}header`,o=({children:n,className:r,...a})=>{const{dismissible:i,closeButtonAriaLabel:s,requestClose:c}=p.usePanelContext(),u=d(t.styles[`${l}__row`],r);return e.jsxs("div",{className:u,...a,children:[n,i&&e.jsx("div",{className:t.styles[`${l}__close-button`],children:e.jsx(_.Tooltip,{text:s,placement:"bottom",portalled:!0,role:{enabled:!1},children:e.jsx(m.CloseButton,{"aria-label":s,onClick:()=>c("closeButton"),size:"lg"})})})]})};o.displayName="Panel.Header.Row";exports.Row=o;

package/lib/wip/Panel/Panel.Header.Row.es.js

@@ -1,29 +1,30 @@
-import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import p from "clsx";
 import { g as d } from "../../../chunks/classNames.BTJmrO_L.js";
 import "../../../chunks/constants.CKKGf1-i.js";
-import { CloseButton as u } from "../../CloseButton/CloseButton.es.js";
-import { usePanelContext as f } from "./Panel.context.es.js";
-import { s as e } from "../../../chunks/panel.module.BVm3KvDs.js";
-const { subElementClassPrefix: C } = d("panel"), o = `${C}header`, b = ({
-  children: t,
-  className: l,
+import { CloseButton as f } from "../../CloseButton/CloseButton.es.js";
+import { Tooltip as u } from "../../Tooltip/Tooltip.es.js";
+import { usePanelContext as b } from "./Panel.context.es.js";
+import { s as o } from "../../../chunks/panel.module.BVm3KvDs.js";
+const { subElementClassPrefix: x } = d("panel"), t = `${x}header`, C = ({
+  children: l,
+  className: r,
   ...a
 }) => {
-  const { dismissible: r, closeButtonAriaLabel: i, requestClose: m } = f(), n = p(e[`${o}__row`], l);
+  const { dismissible: m, closeButtonAriaLabel: s, requestClose: i } = b(), n = p(o[`${t}__row`], r);
   return /* @__PURE__ */ c("div", { className: n, ...a, children: [
-    t,
-    r && /* @__PURE__ */ s("div", { className: e[`${o}__close-button`], children: /* @__PURE__ */ s(
-      u,
+    l,
+    m && /* @__PURE__ */ e("div", { className: o[`${t}__close-button`], children: /* @__PURE__ */ e(u, { text: s, placement: "bottom", portalled: !0, role: { enabled: !1 }, children: /* @__PURE__ */ e(
+      f,
       {
-        "aria-label": i,
-        onClick: () => m("closeButton"),
+        "aria-label": s,
+        onClick: () => i("closeButton"),
         size: "lg"
       }
-    ) })
+    ) }) })
   ] });
 };
-b.displayName = "Panel.Header.Row";
+C.displayName = "Panel.Header.Row";
 export {
-  b as Row
+  C as Row
 };

package/lib/wip/Panel/Panel.Header.d.ts

@@ -22,7 +22,7 @@ export declare const Header: {
         displayName: string;
     };
     Heading: {
-        ({ children, className: _className, ...props }: import('./Panel.Header.Heading').PanelHeaderHeadingProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, className: _className, id: _id, ...props }: import('./Panel.Header.Heading').PanelHeaderHeadingProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Description: {

package/lib/wip/Panel/Panel.Overlay.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),m=require("clsx"),x=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const b=require("./Panel.context.cjs.js"),p=require("./Panel.helpers.cjs.js"),y=require("../../FloatingUI/FloatingUI.root.cjs.js"),C=require("../../FloatingUI/FloatingUI.content.cjs.js"),I=require("./Panel.Inline.cjs.js"),n=require("../../../chunks/panel.module.BX1x4FlX.js"),{baseClassNamePrefix:t}=x.getBEMClassNames("panel"),f=({contextValue:r,panelClassName:a,resolvedPosition:l,showDivider:o,modalType:e,closeOnOutsidePress:c,open:_,onOpenChange:u,transitionConfig:d,children:g,...v})=>{const s=e==="isModal"||e==="alert",P=p.getPanelDismissConfig(e,c),q=m(n.styles[`${t}__overlay-divider`],n.styles[`${t}__overlay-divider--${l}`]);return i.jsx(b.PanelContext.Provider,{value:r,children:i.jsx(y.FloatingUIRoot,{open:_,onOpenChange:u,portalled:!0,transitionConfig:d,dismiss:P,focusConfiguration:s||void 0,children:i.jsxs(C.Content,{className:a,skipFloatingStyles:!0,overlay:s,...v,role:e==="alert"?"alertdialog":"dialog","data-position":l,children:[g,o&&i.jsx(I.InlineDivider,{position:l,className:q})]})})})};exports.OverlayPanel=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),q=require("clsx"),x=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const b=require("./Panel.context.cjs.js"),f=require("./Panel.helpers.cjs.js"),p=require("../../FloatingUI/FloatingUI.root.cjs.js"),y=require("../../FloatingUI/FloatingUI.content.cjs.js"),C=require("./Panel.Inline.cjs.js"),n=require("../../../chunks/panel.module.BX1x4FlX.js"),{baseClassNamePrefix:a}=x.getBEMClassNames("panel"),F=({contextValue:t,panelClassName:r,resolvedPosition:l,showDivider:o,modalType:e,closeOnOutsidePress:c,open:u,onOpenChange:_,transitionConfig:d,children:g,...v})=>{const s=e==="isModal"||e==="alert",m=f.getPanelDismissConfig(e,c),P=q(n.styles[`${a}__overlay-divider`],n.styles[`${a}__overlay-divider--${l}`]);return i.jsx(b.PanelContext.Provider,{value:t,children:i.jsx(p.FloatingUIRoot,{open:u,onOpenChange:_,portalled:!0,transitionConfig:d,dismiss:m,focusConfiguration:s?!0:{modal:!1,closeOnFocusOut:!1},children:i.jsxs(y.Content,{className:r,skipFloatingStyles:!0,overlay:s,...v,role:e==="alert"?"alertdialog":"dialog","aria-modal":s||void 0,"data-position":l,children:[g,o&&i.jsx(C.InlineDivider,{position:l,className:P})]})})})};exports.OverlayPanel=F;

package/lib/wip/Panel/Panel.Overlay.es.js

@@ -1,4 +1,4 @@
-import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import { jsx as s, jsxs as C } from "react/jsx-runtime";
 import x from "clsx";
 import { g as N } from "../../../chunks/classNames.BTJmrO_L.js";
 import "../../../chunks/constants.CKKGf1-i.js";
@@ -6,26 +6,26 @@ import { PanelContext as y } from "./Panel.context.es.js";
 import { getPanelDismissConfig as _ } from "./Panel.helpers.es.js";
 import { FloatingUIRoot as h } from "../../FloatingUI/FloatingUI.root.es.js";
 import { Content as D } from "../../FloatingUI/FloatingUI.content.es.js";
-import { InlineDivider as P } from "./Panel.Inline.es.js";
-import { s as t } from "../../../chunks/panel.module.BVm3KvDs.js";
+import { InlineDivider as F } from "./Panel.Inline.es.js";
+import { s as a } from "../../../chunks/panel.module.BVm3KvDs.js";
 const { baseClassNamePrefix: e } = N("panel"), R = ({
-  contextValue: a,
+  contextValue: t,
   panelClassName: l,
-  resolvedPosition: o,
-  showDivider: n,
-  modalType: i,
-  closeOnOutsidePress: m,
+  resolvedPosition: r,
+  showDivider: m,
+  modalType: o,
+  closeOnOutsidePress: n,
   open: f,
   onOpenChange: c,
   transitionConfig: d,
   children: p,
   ...g
 }) => {
-  const s = i === "isModal" || i === "alert", v = _(i, m), C = x(
-    t[`${e}__overlay-divider`],
-    t[`${e}__overlay-divider--${o}`]
+  const i = o === "isModal" || o === "alert", v = _(o, n), u = x(
+    a[`${e}__overlay-divider`],
+    a[`${e}__overlay-divider--${r}`]
   );
-  return /* @__PURE__ */ r(y.Provider, { value: a, children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ s(y.Provider, { value: t, children: /* @__PURE__ */ s(
     h,
     {
       open: f,
@@ -33,19 +33,20 @@ const { baseClassNamePrefix: e } = N("panel"), R = ({
       portalled: !0,
       transitionConfig: d,
       dismiss: v,
-      focusConfiguration: s || void 0,
-      children: /* @__PURE__ */ u(
+      focusConfiguration: i ? !0 : { modal: !1, closeOnFocusOut: !1 },
+      children: /* @__PURE__ */ C(
         D,
         {
           className: l,
           skipFloatingStyles: !0,
-          overlay: s,
+          overlay: i,
           ...g,
-          role: i === "alert" ? "alertdialog" : "dialog",
-          "data-position": o,
+          role: o === "alert" ? "alertdialog" : "dialog",
+          "aria-modal": i || void 0,
+          "data-position": r,
           children: [
             p,
-            n && /* @__PURE__ */ r(P, { position: o, className: C })
+            m && /* @__PURE__ */ s(F, { position: r, className: u })
           ]
         }
       )

package/lib/wip/Panel/Panel.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react/jsx-runtime"),f=require("clsx"),q=require("react"),S=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const j=require("./Panel.Header.cjs.js"),B=require("./Panel.Body.cjs.js"),F=require("./Panel.Footer.cjs.js"),i=require("./Panel.helpers.cjs.js"),H=require("./Panel.Inline.cjs.js"),T=require("./Panel.Overlay.cjs.js"),e=require("../../../chunks/panel.module.BX1x4FlX.js"),{baseClassNamePrefix:s}=S.getBEMClassNames("panel"),l=({children:c,className:b,padding:C="md",onOpenChange:g,open:u,size:a,dismissible:_=!0,closeButtonAriaLabel:d="Close panel",kind:P="inline",position:o,divider:$=!0,isAnimated:p=!0,onBeforeClose:h,modalType:n,...t})=>{process.env.NODE_ENV!=="production"&&n==="alert"&&_&&console.warn('Panel: `dismissible` is ignored when `modalType="alert"`. The close button is always hidden.'),process.env.NODE_ENV!=="production"&&t.closeOnOutsidePress&&n!=="nonModal"&&n!==void 0&&console.warn('Panel: `closeOnOutsidePress` has no effect when `modalType` is not `"nonModal"`.');const N=n==="alert"?!1:_,r=i.getResolvedPanelPosition(o),v=f(e.styles[s],e.styles[`${s}--${P}`],a&&e.styles[`${s}--size-${a}`],e.styles[`${s}--padding-${C}`],e.styles[`${s}--position-${r}`],b),M=f(e.styles[`${s}__inline-wrapper`],a==="full"&&e.styles[`${s}__inline-wrapper--full`]),{requestClose:y,handleOverlayOpenChange:x}=i.usePanelClose(h,g),m=q.useMemo(()=>({dismissible:N,closeButtonAriaLabel:d,position:o,requestClose:y}),[N,d,o,y]),{showDivider:D,dividerBefore:E,dividerInner:I,dividerAfter:R}=i.getPanelDividerState($,r),w=q.useMemo(()=>({duration:p?i.PANEL_TRANSITION_DURATION_MS:0}),[p]);return P==="inline"?O.jsx(H.InlinePanel,{contextValue:m,panelClassName:v,inlineWrapperClassName:M,resolvedPosition:r,dividerBefore:E,dividerInner:I,dividerAfter:R,open:u,transitionConfig:w,...t,children:c}):O.jsx(T.OverlayPanel,{contextValue:m,panelClassName:v,resolvedPosition:r,showDivider:D,modalType:n,open:u,onOpenChange:x,transitionConfig:w,...t,children:c})};l.displayName="Panel";l.Header=j.Header;l.Body=B.Body;l.Footer=F.Footer;exports.Panel=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react/jsx-runtime"),f=require("clsx"),q=require("react"),S=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const j=require("./Panel.Header.cjs.js"),B=require("./Panel.Body.cjs.js"),F=require("./Panel.Footer.cjs.js"),i=require("./Panel.helpers.cjs.js"),H=require("./Panel.Inline.cjs.js"),T=require("./Panel.Overlay.cjs.js"),e=require("../../../chunks/panel.module.BX1x4FlX.js"),{baseClassNamePrefix:s}=S.getBEMClassNames("panel"),l=({children:u,className:b,padding:C="md",onOpenChange:g,open:_,size:o,dismissible:d=!0,closeButtonAriaLabel:P="Close panel",kind:r="inline",position:t,divider:$=!0,isAnimated:p=!0,onBeforeClose:h,modalType:n,...c})=>{process.env.NODE_ENV!=="production"&&n==="alert"&&d&&console.warn('Panel: `dismissible` is ignored when `modalType="alert"`. The close button is always hidden.'),process.env.NODE_ENV!=="production"&&c.closeOnOutsidePress&&n!=="nonModal"&&n!==void 0&&console.warn('Panel: `closeOnOutsidePress` has no effect when `modalType` is not `"nonModal"`.');const N=n==="alert"?!1:d,a=i.getResolvedPanelPosition(t),v=f(e.styles[s],e.styles[`${s}--${r}`],o&&e.styles[`${s}--size-${o}`],e.styles[`${s}--padding-${C}`],e.styles[`${s}--position-${a}`],b),M=f(e.styles[`${s}__inline-wrapper`],o==="full"&&e.styles[`${s}__inline-wrapper--full`]),{requestClose:y,handleOverlayOpenChange:x}=i.usePanelClose(h,g),m=q.useMemo(()=>({kind:r,dismissible:N,closeButtonAriaLabel:P,position:t,requestClose:y}),[r,N,P,t,y]),{showDivider:D,dividerBefore:E,dividerInner:I,dividerAfter:R}=i.getPanelDividerState($,a),w=q.useMemo(()=>({duration:p?i.PANEL_TRANSITION_DURATION_MS:0}),[p]);return r==="inline"?O.jsx(H.InlinePanel,{contextValue:m,panelClassName:v,inlineWrapperClassName:M,resolvedPosition:a,dividerBefore:E,dividerInner:I,dividerAfter:R,open:_,transitionConfig:w,...c,children:u}):O.jsx(T.OverlayPanel,{contextValue:m,panelClassName:v,resolvedPosition:a,showDivider:D,modalType:n,open:_,onOpenChange:x,transitionConfig:w,...c,children:u})};l.displayName="Panel";l.Header=j.Header;l.Body=B.Body;l.Footer=F.Footer;exports.Panel=l;

package/lib/wip/Panel/Panel.context.d.ts

@@ -1,5 +1,9 @@
-import { PanelCloseReason, PanelPosition } from './Panel.types';
+import { PanelCloseReason, PanelKind, PanelPosition } from './Panel.types';
 export interface PanelContextValue {
+    /**
+     * The panel kind — used by sub-components to vary behaviour per kind.
+     */
+    kind: PanelKind;
     /**
      * Whether to show a dismissible button
      */

package/lib/wip/Panel/Panel.d.ts

@@ -14,7 +14,7 @@ export declare const Panel: {
             displayName: string;
         };
         Heading: {
-            ({ children, className: _className, ...props }: import('./Panel.Header.Heading').PanelHeaderHeadingProps): import("react/jsx-runtime").JSX.Element;
+            ({ children, className: _className, id: _id, ...props }: import('./Panel.Header.Heading').PanelHeaderHeadingProps): import("react/jsx-runtime").JSX.Element;
             displayName: string;
         };
         Description: {

package/lib/wip/Panel/Panel.es.js

@@ -10,49 +10,49 @@ import { usePanelClose as F, getPanelDividerState as H, PANEL_TRANSITION_DURATIO
 import { InlinePanel as q } from "./Panel.Inline.es.js";
 import { OverlayPanel as U } from "./Panel.Overlay.es.js";
 import { s as e } from "../../../chunks/panel.module.BVm3KvDs.js";
-const { baseClassNamePrefix: o } = R("panel"), r = ({
-  children: l,
+const { baseClassNamePrefix: o } = R("panel"), i = ({
+  children: m,
   className: _,
   padding: h = "md",
   onOpenChange: w,
-  open: m,
-  size: i,
-  dismissible: d = !0,
-  closeButtonAriaLabel: f = "Close panel",
-  kind: p = "inline",
-  position: t,
+  open: d,
+  size: t,
+  dismissible: f = !0,
+  closeButtonAriaLabel: p = "Close panel",
+  kind: r = "inline",
+  position: a,
   divider: D = !0,
   isAnimated: c = !0,
   onBeforeClose: E,
   modalType: s,
-  ...a
+  ...l
 }) => {
-  process.env.NODE_ENV !== "production" && s === "alert" && d && console.warn(
+  process.env.NODE_ENV !== "production" && s === "alert" && f && console.warn(
     'Panel: `dismissible` is ignored when `modalType="alert"`. The close button is always hidden.'
-  ), process.env.NODE_ENV !== "production" && a.closeOnOutsidePress && s !== "nonModal" && s !== void 0 && console.warn(
+  ), process.env.NODE_ENV !== "production" && l.closeOnOutsidePress && s !== "nonModal" && s !== void 0 && console.warn(
     'Panel: `closeOnOutsidePress` has no effect when `modalType` is not `"nonModal"`.'
   );
-  const u = s === "alert" ? !1 : d, n = j(t), N = $(
+  const u = s === "alert" ? !1 : f, n = j(a), N = $(
     e[o],
-    e[`${o}--${p}`],
-    i && e[`${o}--size-${i}`],
+    e[`${o}--${r}`],
+    t && e[`${o}--size-${t}`],
     e[`${o}--padding-${h}`],
     e[`${o}--position-${n}`],
     _
   ), x = $(
     e[`${o}__inline-wrapper`],
-    i === "full" && e[`${o}__inline-wrapper--full`]
+    t === "full" && e[`${o}__inline-wrapper--full`]
   ), { requestClose: v, handleOverlayOpenChange: y } = F(
     E,
     w
   ), P = g(
-    () => ({ dismissible: u, closeButtonAriaLabel: f, position: t, requestClose: v }),
-    [u, f, t, v]
+    () => ({ kind: r, dismissible: u, closeButtonAriaLabel: p, position: a, requestClose: v }),
+    [r, u, p, a, v]
   ), { showDivider: I, dividerBefore: M, dividerInner: b, dividerAfter: B } = H(D, n), O = g(
     () => ({ duration: c ? T : 0 }),
     [c]
   );
-  return p === "inline" ? /* @__PURE__ */ C(
+  return r === "inline" ? /* @__PURE__ */ C(
     q,
     {
       contextValue: P,
@@ -62,10 +62,10 @@ const { baseClassNamePrefix: o } = R("panel"), r = ({
       dividerBefore: M,
       dividerInner: b,
       dividerAfter: B,
-      open: m,
+      open: d,
       transitionConfig: O,
-      ...a,
-      children: l
+      ...l,
+      children: m
     }
   ) : /* @__PURE__ */ C(
     U,
@@ -75,18 +75,18 @@ const { baseClassNamePrefix: o } = R("panel"), r = ({
       resolvedPosition: n,
       showDivider: I,
       modalType: s,
-      open: m,
+      open: d,
       onOpenChange: y,
       transitionConfig: O,
-      ...a,
-      children: l
+      ...l,
+      children: m
     }
   );
 };
-r.displayName = "Panel";
-r.Header = S;
-r.Body = V;
-r.Footer = A;
+i.displayName = "Panel";
+i.Header = S;
+i.Body = V;
+i.Footer = A;
 export {
-  r as Panel
+  i as Panel
 };

package/lib/wip/Panel/Panel.types.d.ts

@@ -18,6 +18,18 @@ interface BasePanelProps extends ComponentPropsWithoutRef<'aside'> {
      * Specify the content of the Panel
      */
     children: React.ReactNode;
+    /**
+     * Accessible name for the panel dialog when `Panel.Header.Heading` is not rendered.
+     * When a heading is present, `aria-labelledby` is set automatically.
+     * Provide this prop whenever you build a panel without `Panel.Header.Heading` to satisfy
+     * the WCAG requirement that every `role="dialog"` element has an accessible name.
+     *
+     * @example
+     * ```tsx
+     * <Panel kind="overlay" aria-label="User settings" ... />
+     * ```
+     */
+    'aria-label'?: string;
     /**
      * Controls the Panel's visibility. For inline panels, omitting this prop
      * renders the panel as always-visible (uncontrolled).
@@ -44,7 +56,8 @@ interface BasePanelProps extends ComponentPropsWithoutRef<'aside'> {
      */
     dismissible?: boolean;
     /**
-     * Aria label for the dismissible button
+     * Label for the close button. Used as both the button's `aria-label` (screen reader name)
+     * and the visible tooltip text. Provide a value that works in both contexts.
      * @default 'Close panel'
      */
     closeButtonAriaLabel?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viasat/beam-react",
-  "version": "2.19.0",
+  "version": "2.21.0",
   "description": "React component library for the Beam design system",
   "license": "MIT",
   "author": "Viasat",
@@ -59,11 +59,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@viasat/beam-fonts": "2.19.0",
-    "@viasat/beam-shared": "2.19.0",
-    "@viasat/beam-styles": "2.19.0",
-    "@viasat/beam-tokens": "2.19.0",
-    "@viasat/beam-icons": "2.19.0",
+    "@viasat/beam-fonts": "2.21.0",
+    "@viasat/beam-shared": "2.21.0",
+    "@viasat/beam-styles": "2.21.0",
+    "@viasat/beam-tokens": "2.21.0",
+    "@viasat/beam-icons": "2.21.0",
     "clsx": "^1.2.1",
     "@floating-ui/react": "^0.26.18",
     "@stepperize/react": "^5.1.5",