@viasat/beam-react 2.20.0 → 2.21.0

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.20.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.20.0",
-    "@viasat/beam-shared": "2.20.0",
-    "@viasat/beam-styles": "2.20.0",
-    "@viasat/beam-tokens": "2.20.0",
-    "@viasat/beam-icons": "2.20.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",