@mattermost/compass-ui 0.1.0-alpha.13 → 0.1.0-alpha.15

package/dist/components/modal-header/ModalHeader.module.scss.js

@@ -1,19 +1,19 @@
 import './ModalHeader.css';const e = {
-  "modal-header": "_modal-header_n5mn4_2",
-  "modal-header--no-divider": "_modal-header--no-divider_n5mn4_8",
-  "modal-header__content": "_modal-header__content_n5mn4_11",
-  "modal-header--has-slot": "_modal-header--has-slot_n5mn4_14",
-  "modal-header--close-only": "_modal-header--close-only_n5mn4_17",
-  "modal-header__titles": "_modal-header__titles_n5mn4_27",
-  "modal-header__primary": "_modal-header__primary_n5mn4_36",
-  "modal-header__title": "_modal-header__title_n5mn4_27",
-  "modal-header__title-sr": "_modal-header__title-sr_n5mn4_53",
-  "modal-header__subtitle": "_modal-header__subtitle_n5mn4_64",
-  "modal-header__subtitle-beside": "_modal-header__subtitle-beside_n5mn4_72",
-  "modal-header__subtitle-divider": "_modal-header__subtitle-divider_n5mn4_82",
-  "modal-header__actions": "_modal-header__actions_n5mn4_88",
-  "modal-header__close": "_modal-header__close_n5mn4_96",
-  "modal-header__slot": "_modal-header__slot_n5mn4_101"
+  "modal-header": "_modal-header_1wwv5_2",
+  "modal-header--no-divider": "_modal-header--no-divider_1wwv5_8",
+  "modal-header__content": "_modal-header__content_1wwv5_11",
+  "modal-header--has-slot": "_modal-header--has-slot_1wwv5_14",
+  "modal-header--close-only": "_modal-header--close-only_1wwv5_17",
+  "modal-header__titles": "_modal-header__titles_1wwv5_27",
+  "modal-header__primary": "_modal-header__primary_1wwv5_36",
+  "modal-header__title": "_modal-header__title_1wwv5_27",
+  "modal-header__title-sr": "_modal-header__title-sr_1wwv5_53",
+  "modal-header__subtitle": "_modal-header__subtitle_1wwv5_64",
+  "modal-header__subtitle-beside": "_modal-header__subtitle-beside_1wwv5_72",
+  "modal-header__subtitle-divider": "_modal-header__subtitle-divider_1wwv5_82",
+  "modal-header__actions": "_modal-header__actions_1wwv5_88",
+  "modal-header__close": "_modal-header__close_1wwv5_96",
+  "modal-header__slot": "_modal-header__slot_1wwv5_101"
 };
 export {
   e as default

package/dist/components/popover-menu/PopoverMenu.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),p=require("../scrollbar/Scrollbar.cjs"),n=require("./PopoverMenu.module.scss.cjs");function i({variant:e="parent",children:o,className:r="",...l}){const t=[n.default["popover-menu"],e==="child"?n.default["popover-menu--child"]:n.default["popover-menu--parent"],r].filter(Boolean).join(" ");return u.jsx("div",{className:t,...l,children:o})}function a({maxHeight:e,children:o,className:r=""}){const l=typeof e=="number"?`${e}px`:e;return u.jsx(p.default,{className:[n.default["popover-menu__scroll"],r].filter(Boolean).join(" "),style:{maxHeight:l},children:o})}function s({children:e,className:o="",...r}){return u.jsx("p",{className:[n.default["popover-menu__title"],o].filter(Boolean).join(" "),...r,children:e})}function v({children:e,className:o="",...r}){return u.jsx("div",{role:"group",className:[n.default["popover-menu__group"],o].filter(Boolean).join(" "),...r,children:e})}function c({children:e,className:o="",...r}){return u.jsx("p",{className:[n.default["popover-menu__group-title"],o].filter(Boolean).join(" "),...r,children:e})}function f({className:e="",...o}){return u.jsx("div",{className:[n.default["popover-menu__divider"],e].filter(Boolean).join(" "),role:"separator",...o})}exports.PopoverMenuDivider=f;exports.PopoverMenuGroup=v;exports.PopoverMenuGroupTitle=c;exports.PopoverMenuScroll=a;exports.PopoverMenuTitle=s;exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),p=require("react"),M=require("../../hooks/use-popover-transition.cjs"),P=require("../scrollbar/Scrollbar.cjs"),n=require("./PopoverMenu.module.scss.cjs");function j({variant:e="parent",open:o,onExited:r,children:s,className:v="",...f}){const{mounted:t,visible:d}=M.usePopoverTransition(o??!0),l=o!==void 0,a=p.useRef(t),i=p.useRef(r);if(i.current=r,p.useEffect(()=>{var c;a.current&&!t&&l&&((c=i.current)==null||c.call(i)),a.current=t},[t,l]),l&&!t)return null;const m=[n.default["popover-menu"],e==="child"?n.default["popover-menu--child"]:n.default["popover-menu--parent"],l&&n.default["popover-menu--transition"],l&&d&&n.default["popover-menu--visible"],v].filter(Boolean).join(" ");return u.jsx("div",{className:m,...f,children:s})}function _({maxHeight:e,children:o,className:r=""}){const s=typeof e=="number"?`${e}px`:e;return u.jsx(P.default,{className:[n.default["popover-menu__scroll"],r].filter(Boolean).join(" "),style:{maxHeight:s},children:o})}function T({children:e,className:o="",...r}){return u.jsx("p",{className:[n.default["popover-menu__title"],o].filter(Boolean).join(" "),...r,children:e})}function b({children:e,className:o="",...r}){return u.jsx("div",{role:"group",className:[n.default["popover-menu__group"],o].filter(Boolean).join(" "),...r,children:e})}function x({children:e,className:o="",...r}){return u.jsx("p",{className:[n.default["popover-menu__group-title"],o].filter(Boolean).join(" "),...r,children:e})}function B({className:e="",...o}){return u.jsx("div",{className:[n.default["popover-menu__divider"],e].filter(Boolean).join(" "),role:"separator",...o})}exports.PopoverMenuDivider=B;exports.PopoverMenuGroup=b;exports.PopoverMenuGroupTitle=x;exports.PopoverMenuScroll=_;exports.PopoverMenuTitle=T;exports.default=j;
 //# sourceMappingURL=PopoverMenu.cjs.map

package/dist/components/popover-menu/PopoverMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverMenu.cjs","sources":["../../../src/components/popover-menu/PopoverMenu.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport styles from './PopoverMenu.module.scss';\n\nexport interface PopoverMenuProps extends HTMLAttributes<HTMLDivElement> {\n  /** Parent menus use Elevation 4; nested child menus use Elevation 5. */\n  variant?: 'parent' | 'child';\n  children: ReactNode;\n}\n\n/**\n * Surface container for popover-style menus — border, fill, elevation, and width\n * constraints per Compass. Compose with {@link MenuItem} rows and optional\n * titles, group labels, and dividers. Use {@link PopoverMenuScroll} when the item\n * list should scroll while a {@link PopoverMenuTitle} stays pinned.\n */\nexport default function PopoverMenu({\n  variant = 'parent',\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuProps) {\n  const rootClass = [\n    styles['popover-menu'],\n    variant === 'child'\n      ? styles['popover-menu--child']\n      : styles['popover-menu--parent'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} {...rest}>\n      {children}\n    </div>\n  );\n}\n\nexport interface PopoverMenuScrollProps {\n  children: ReactNode;\n  /** Maximum height of the scrollable region (coerces numbers to px). */\n  maxHeight: string | number;\n  className?: string;\n}\n\n/** Scrollable region for long item lists; keeps a sibling title visible when used with `maxHeight`. */\nexport function PopoverMenuScroll({\n  maxHeight,\n  children,\n  className = '',\n}: PopoverMenuScrollProps) {\n  const maxH = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;\n  return (\n    <Scrollbar\n      className={[styles['popover-menu__scroll'], className]\n        .filter(Boolean)\n        .join(' ')}\n      style={{ maxHeight: maxH }}\n    >\n      {children}\n    </Scrollbar>\n  );\n}\n\nexport interface PopoverMenuTitleProps extends HTMLAttributes<HTMLParagraphElement> {\n  children: ReactNode;\n}\n\n/** Optional heading above menu items; keep pinned outside a scrolling body when using `maxHeight` on `PopoverMenu`. */\nexport function PopoverMenuTitle({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuTitleProps) {\n  return (\n    <p\n      className={[styles['popover-menu__title'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      {children}\n    </p>\n  );\n}\n\nexport interface PopoverMenuGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /** Accessible label when the group has no visible `PopoverMenuGroupTitle`. */\n  'aria-label'?: string;\n}\n\n/** Groups related menu items. */\nexport function PopoverMenuGroup({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuGroupProps) {\n  return (\n    <div\n      role=\"group\"\n      className={[styles['popover-menu__group'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface PopoverMenuGroupTitleProps extends HTMLAttributes<HTMLParagraphElement> {\n  children: ReactNode;\n}\n\n/** Optional label for a `PopoverMenuGroup`. */\nexport function PopoverMenuGroupTitle({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuGroupTitleProps) {\n  return (\n    <p\n      className={[styles['popover-menu__group-title'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      {children}\n    </p>\n  );\n}\n\nexport type PopoverMenuDividerProps = HTMLAttributes<HTMLDivElement>;\n\n/** Horizontal rule between groups or below a menu title. */\nexport function PopoverMenuDivider({\n  className = '',\n  ...rest\n}: PopoverMenuDividerProps) {\n  return (\n    <div\n      className={[styles['popover-menu__divider'], className]\n        .filter(Boolean)\n        .join(' ')}\n      role=\"separator\"\n      {...rest}\n    />\n  );\n}\n"],"names":["PopoverMenu","variant","children","className","rest","rootClass","styles","PopoverMenuScroll","maxHeight","maxH","jsx","Scrollbar","PopoverMenuTitle","PopoverMenuGroup","PopoverMenuGroupTitle","PopoverMenuDivider"],"mappings":"oOAgBA,SAAwBA,EAAY,CAClC,QAAAC,EAAU,SACV,SAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAqB,CACnB,MAAMC,EAAY,CAChBC,EAAAA,QAAO,cAAc,EACrBL,IAAY,QACRK,EAAAA,QAAO,qBAAqB,EAC5BA,EAAAA,QAAO,sBAAsB,EACjCH,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,aACG,MAAA,CAAI,UAAWE,EAAY,GAAGD,EAC5B,SAAAF,EACH,CAEJ,CAUO,SAASK,EAAkB,CAChC,UAAAC,EACA,SAAAN,EACA,UAAAC,EAAY,EACd,EAA2B,CACzB,MAAMM,EAAO,OAAOD,GAAc,SAAW,GAAGA,CAAS,KAAOA,EAChE,OACEE,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAW,CAACL,UAAO,sBAAsB,EAAGH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,MAAO,CAAE,UAAWM,CAAA,EAEnB,SAAAP,CAAA,CAAA,CAGP,CAOO,SAASU,EAAiB,CAC/B,SAAAV,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA0B,CACxB,OACEM,EAAAA,IAAC,IAAA,CACC,UAAW,CAACJ,UAAO,qBAAqB,EAAGH,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG,EACV,GAAGC,EAEH,SAAAF,CAAA,CAAA,CAGP,CASO,SAASW,EAAiB,CAC/B,SAAAX,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA0B,CACxB,OACEM,EAAAA,IAAC,MAAA,CACC,KAAK,QACL,UAAW,CAACJ,UAAO,qBAAqB,EAAGH,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG,EACV,GAAGC,EAEH,SAAAF,CAAA,CAAA,CAGP,CAOO,SAASY,EAAsB,CACpC,SAAAZ,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA+B,CAC7B,OACEM,EAAAA,IAAC,IAAA,CACC,UAAW,CAACJ,UAAO,2BAA2B,EAAGH,CAAS,EACvD,OAAO,OAAO,EACd,KAAK,GAAG,EACV,GAAGC,EAEH,SAAAF,CAAA,CAAA,CAGP,CAKO,SAASa,EAAmB,CACjC,UAAAZ,EAAY,GACZ,GAAGC,CACL,EAA4B,CAC1B,OACEM,EAAAA,IAAC,MAAA,CACC,UAAW,CAACJ,UAAO,uBAAuB,EAAGH,CAAS,EACnD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,KAAK,YACJ,GAAGC,CAAA,CAAA,CAGV"}
+{"version":3,"file":"PopoverMenu.cjs","sources":["../../../src/components/popover-menu/PopoverMenu.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport styles from './PopoverMenu.module.scss';\n\nexport interface PopoverMenuProps extends HTMLAttributes<HTMLDivElement> {\n  /** Parent menus use Elevation 4; nested child menus use Elevation 5. */\n  variant?: 'parent' | 'child';\n  /**\n   * Controlled visibility with the Compass popover transition (scale + fade in,\n   * reverse on close); the menu unmounts after the exit. Omit to always render\n   * without transition. The host owns the state and positioning.\n   */\n  open?: boolean;\n  /** Called after the exit transition finishes and the menu unmounts (only when `open` is controlled). */\n  onExited?: () => void;\n  children: ReactNode;\n}\n\n/**\n * Surface container for popover-style menus — border, fill, elevation, and width\n * constraints per Compass. Compose with {@link MenuItem} rows and optional\n * titles, group labels, and dividers. Use {@link PopoverMenuScroll} when the item\n * list should scroll while a {@link PopoverMenuTitle} stays pinned.\n */\nexport default function PopoverMenu({\n  variant = 'parent',\n  open,\n  onExited,\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuProps) {\n  const { mounted, visible } = usePopoverTransition(open ?? true);\n  const transitioned = open !== undefined;\n  const wasMounted = useRef(mounted);\n  const onExitedRef = useRef(onExited);\n  onExitedRef.current = onExited;\n\n  useEffect(() => {\n    if (wasMounted.current && !mounted && transitioned) {\n      onExitedRef.current?.();\n    }\n    wasMounted.current = mounted;\n  }, [mounted, transitioned]);\n\n  if (transitioned && !mounted) return null;\n\n  const rootClass = [\n    styles['popover-menu'],\n    variant === 'child'\n      ? styles['popover-menu--child']\n      : styles['popover-menu--parent'],\n    transitioned && styles['popover-menu--transition'],\n    transitioned && visible && styles['popover-menu--visible'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} {...rest}>\n      {children}\n    </div>\n  );\n}\n\nexport interface PopoverMenuScrollProps {\n  children: ReactNode;\n  /** Maximum height of the scrollable region (coerces numbers to px). */\n  maxHeight: string | number;\n  className?: string;\n}\n\n/** Scrollable region for long item lists; keeps a sibling title visible when used with `maxHeight`. */\nexport function PopoverMenuScroll({\n  maxHeight,\n  children,\n  className = '',\n}: PopoverMenuScrollProps) {\n  const maxH = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;\n  return (\n    <Scrollbar\n      className={[styles['popover-menu__scroll'], className]\n        .filter(Boolean)\n        .join(' ')}\n      style={{ maxHeight: maxH }}\n    >\n      {children}\n    </Scrollbar>\n  );\n}\n\nexport interface PopoverMenuTitleProps extends HTMLAttributes<HTMLParagraphElement> {\n  children: ReactNode;\n}\n\n/** Optional heading above menu items; keep pinned outside a scrolling body when using `maxHeight` on `PopoverMenu`. */\nexport function PopoverMenuTitle({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuTitleProps) {\n  return (\n    <p\n      className={[styles['popover-menu__title'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      {children}\n    </p>\n  );\n}\n\nexport interface PopoverMenuGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /** Accessible label when the group has no visible `PopoverMenuGroupTitle`. */\n  'aria-label'?: string;\n}\n\n/** Groups related menu items. */\nexport function PopoverMenuGroup({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuGroupProps) {\n  return (\n    <div\n      role=\"group\"\n      className={[styles['popover-menu__group'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface PopoverMenuGroupTitleProps extends HTMLAttributes<HTMLParagraphElement> {\n  children: ReactNode;\n}\n\n/** Optional label for a `PopoverMenuGroup`. */\nexport function PopoverMenuGroupTitle({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuGroupTitleProps) {\n  return (\n    <p\n      className={[styles['popover-menu__group-title'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      {children}\n    </p>\n  );\n}\n\nexport type PopoverMenuDividerProps = HTMLAttributes<HTMLDivElement>;\n\n/** Horizontal rule between groups or below a menu title. */\nexport function PopoverMenuDivider({\n  className = '',\n  ...rest\n}: PopoverMenuDividerProps) {\n  return (\n    <div\n      className={[styles['popover-menu__divider'], className]\n        .filter(Boolean)\n        .join(' ')}\n      role=\"separator\"\n      {...rest}\n    />\n  );\n}\n"],"names":["PopoverMenu","variant","open","onExited","children","className","rest","mounted","visible","usePopoverTransition","transitioned","wasMounted","useRef","onExitedRef","useEffect","_a","rootClass","styles","PopoverMenuScroll","maxHeight","maxH","jsx","Scrollbar","PopoverMenuTitle","PopoverMenuGroup","PopoverMenuGroupTitle","PopoverMenuDivider"],"mappings":"ySA0BA,SAAwBA,EAAY,CAClC,QAAAC,EAAU,SACV,KAAAC,EACA,SAAAC,EACA,SAAAC,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAqB,CACnB,KAAM,CAAE,QAAAC,EAAS,QAAAC,CAAA,EAAYC,EAAAA,qBAAqBP,GAAQ,EAAI,EACxDQ,EAAeR,IAAS,OACxBS,EAAaC,EAAAA,OAAOL,CAAO,EAC3BM,EAAcD,EAAAA,OAAOT,CAAQ,EAUnC,GATAU,EAAY,QAAUV,EAEtBW,EAAAA,UAAU,IAAM,OACVH,EAAW,SAAW,CAACJ,GAAWG,KACpCK,EAAAF,EAAY,UAAZ,MAAAE,EAAA,KAAAF,IAEFF,EAAW,QAAUJ,CACvB,EAAG,CAACA,EAASG,CAAY,CAAC,EAEtBA,GAAgB,CAACH,EAAS,OAAO,KAErC,MAAMS,EAAY,CAChBC,EAAAA,QAAO,cAAc,EACrBhB,IAAY,QACRgB,EAAAA,QAAO,qBAAqB,EAC5BA,EAAAA,QAAO,sBAAsB,EACjCP,GAAgBO,EAAAA,QAAO,0BAA0B,EACjDP,GAAgBF,GAAWS,EAAAA,QAAO,uBAAuB,EACzDZ,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,aACG,MAAA,CAAI,UAAWW,EAAY,GAAGV,EAC5B,SAAAF,EACH,CAEJ,CAUO,SAASc,EAAkB,CAChC,UAAAC,EACA,SAAAf,EACA,UAAAC,EAAY,EACd,EAA2B,CACzB,MAAMe,EAAO,OAAOD,GAAc,SAAW,GAAGA,CAAS,KAAOA,EAChE,OACEE,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAW,CAACL,UAAO,sBAAsB,EAAGZ,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,MAAO,CAAE,UAAWe,CAAA,EAEnB,SAAAhB,CAAA,CAAA,CAGP,CAOO,SAASmB,EAAiB,CAC/B,SAAAnB,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA0B,CACxB,OACEe,EAAAA,IAAC,IAAA,CACC,UAAW,CAACJ,UAAO,qBAAqB,EAAGZ,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG,EACV,GAAGC,EAEH,SAAAF,CAAA,CAAA,CAGP,CASO,SAASoB,EAAiB,CAC/B,SAAApB,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA0B,CACxB,OACEe,EAAAA,IAAC,MAAA,CACC,KAAK,QACL,UAAW,CAACJ,UAAO,qBAAqB,EAAGZ,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG,EACV,GAAGC,EAEH,SAAAF,CAAA,CAAA,CAGP,CAOO,SAASqB,EAAsB,CACpC,SAAArB,EACA,UAAAC,EAAY,GACZ,GAAGC,CACL,EAA+B,CAC7B,OACEe,EAAAA,IAAC,IAAA,CACC,UAAW,CAACJ,UAAO,2BAA2B,EAAGZ,CAAS,EACvD,OAAO,OAAO,EACd,KAAK,GAAG,EACV,GAAGC,EAEH,SAAAF,CAAA,CAAA,CAGP,CAKO,SAASsB,EAAmB,CACjC,UAAArB,EAAY,GACZ,GAAGC,CACL,EAA4B,CAC1B,OACEe,EAAAA,IAAC,MAAA,CACC,UAAW,CAACJ,UAAO,uBAAuB,EAAGZ,CAAS,EACnD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,KAAK,YACJ,GAAGC,CAAA,CAAA,CAGV"}

package/dist/components/popover-menu/PopoverMenu.css

@@ -1 +1 @@
-._popover-menu_1m31t_2{display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;min-width:212px;max-width:496px;width:max-content;padding:var(--spacing-xs) 0;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-s);color:var(--center-channel-color)}._popover-menu--parent_1m31t_16{box-shadow:var(--elevation-4)}._popover-menu--child_1m31t_19{box-shadow:var(--elevation-5)}._popover-menu__scroll_1m31t_22{min-height:0}._popover-menu__title_1m31t_25{flex-shrink:0;margin:0;padding:var(--spacing-xxs) var(--spacing-l) var(--spacing-xs);font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);letter-spacing:var(--letter-spacing-normal);color:rgba(var(--center-channel-color-rgb),.75)}._popover-menu__group_1m31t_36{display:flex;flex-direction:column;align-items:stretch}._popover-menu__group-title_1m31t_41{flex-shrink:0;margin:0;padding:var(--spacing-xxs) var(--spacing-l) var(--spacing-xxs);font-family:var(--font-family-body);font-size:var(--font-size-50);font-weight:var(--font-weight-semibold);line-height:var(--line-height-50);letter-spacing:.11px;text-transform:uppercase;color:rgba(var(--center-channel-color-rgb),.64)}._popover-menu__divider_1m31t_53{flex-shrink:0;width:100%;padding:var(--spacing-xs) 0}._popover-menu__divider_1m31t_53:before{content:"";display:block;width:100%;border-top:1px solid rgba(var(--center-channel-color-rgb),.12)}
+._popover-menu_1tx2s_2{display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;min-width:212px;max-width:496px;width:max-content;padding:var(--spacing-xs) 0;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-s);color:var(--center-channel-color)}._popover-menu--parent_1tx2s_16{box-shadow:var(--elevation-4)}._popover-menu--child_1tx2s_19{box-shadow:var(--elevation-5)}._popover-menu--transition_1tx2s_22{opacity:0;transform:scale(.9);transform-origin:top left;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit)}@media(prefers-reduced-motion:reduce){._popover-menu--transition_1tx2s_22{transform:none;transition:none}}._popover-menu--visible_1tx2s_35{opacity:1;transform:scale(1);pointer-events:auto;transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance)}@media(prefers-reduced-motion:reduce){._popover-menu--visible_1tx2s_35{transform:none;transition:none}}._popover-menu__scroll_1tx2s_47{min-height:0}._popover-menu__title_1tx2s_50{flex-shrink:0;margin:0;padding:var(--spacing-xxs) var(--spacing-l) var(--spacing-xs);font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);letter-spacing:var(--letter-spacing-normal);color:rgba(var(--center-channel-color-rgb),.75)}._popover-menu__group_1tx2s_61{display:flex;flex-direction:column;align-items:stretch}._popover-menu__group-title_1tx2s_66{flex-shrink:0;margin:0;padding:var(--spacing-xxs) var(--spacing-l) var(--spacing-xxs);font-family:var(--font-family-body);font-size:var(--font-size-50);font-weight:var(--font-weight-semibold);line-height:var(--line-height-50);letter-spacing:.11px;text-transform:uppercase;color:rgba(var(--center-channel-color-rgb),.64)}._popover-menu__divider_1tx2s_78{flex-shrink:0;width:100%;padding:var(--spacing-xs) 0}._popover-menu__divider_1tx2s_78:before{content:"";display:block;width:100%;border-top:1px solid rgba(var(--center-channel-color-rgb),.12)}

package/dist/components/popover-menu/PopoverMenu.d.ts

@@ -2,6 +2,14 @@ import { HTMLAttributes, ReactNode } from 'react';
 export interface PopoverMenuProps extends HTMLAttributes<HTMLDivElement> {
     /** Parent menus use Elevation 4; nested child menus use Elevation 5. */
     variant?: 'parent' | 'child';
+    /**
+     * Controlled visibility with the Compass popover transition (scale + fade in,
+     * reverse on close); the menu unmounts after the exit. Omit to always render
+     * without transition. The host owns the state and positioning.
+     */
+    open?: boolean;
+    /** Called after the exit transition finishes and the menu unmounts (only when `open` is controlled). */
+    onExited?: () => void;
     children: ReactNode;
 }
 /**
@@ -10,7 +18,7 @@ export interface PopoverMenuProps extends HTMLAttributes<HTMLDivElement> {
  * titles, group labels, and dividers. Use {@link PopoverMenuScroll} when the item
  * list should scroll while a {@link PopoverMenuTitle} stays pinned.
  */
-export default function PopoverMenu({ variant, children, className, ...rest }: PopoverMenuProps): import("react/jsx-runtime").JSX.Element;
+export default function PopoverMenu({ variant, open, onExited, children, className, ...rest }: PopoverMenuProps): import("react/jsx-runtime").JSX.Element | null;
 export interface PopoverMenuScrollProps {
     children: ReactNode;
     /** Maximum height of the scrollable region (coerces numbers to px). */

package/dist/components/popover-menu/PopoverMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverMenu.d.ts","sourceRoot":"","sources":["../../../src/components/popover-menu/PopoverMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE,wEAAwE;IACxE,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAkB,EAClB,QAAQ,EACR,SAAc,EACd,GAAG,IAAI,EACR,EAAE,gBAAgB,2CAgBlB;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,uEAAuE;IACvE,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,uGAAuG;AACvG,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,SAAc,GACf,EAAE,sBAAsB,2CAYxB;AAED,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,oBAAoB,CAAC;IACjF,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,uHAAuH;AACvH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAc,EACd,GAAG,IAAI,EACR,EAAE,qBAAqB,2CAWvB;AAED,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,SAAS,CAAC;IACpB,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,iCAAiC;AACjC,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAc,EACd,GAAG,IAAI,EACR,EAAE,qBAAqB,2CAYvB;AAED,MAAM,WAAW,0BAA2B,SAAQ,cAAc,CAAC,oBAAoB,CAAC;IACtF,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,+CAA+C;AAC/C,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,SAAc,EACd,GAAG,IAAI,EACR,EAAE,0BAA0B,2CAW5B;AAED,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAErE,4DAA4D;AAC5D,wBAAgB,kBAAkB,CAAC,EACjC,SAAc,EACd,GAAG,IAAI,EACR,EAAE,uBAAuB,2CAUzB"}
+{"version":3,"file":"PopoverMenu.d.ts","sourceRoot":"","sources":["../../../src/components/popover-menu/PopoverMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvD,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE,wEAAwE;IACxE,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wGAAwG;IACxG,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAkB,EAClB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,SAAc,EACd,GAAG,IAAI,EACR,EAAE,gBAAgB,kDAiClB;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,uEAAuE;IACvE,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,uGAAuG;AACvG,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,SAAc,GACf,EAAE,sBAAsB,2CAYxB;AAED,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,oBAAoB,CAAC;IACjF,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,uHAAuH;AACvH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAc,EACd,GAAG,IAAI,EACR,EAAE,qBAAqB,2CAWvB;AAED,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,SAAS,CAAC;IACpB,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,iCAAiC;AACjC,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAc,EACd,GAAG,IAAI,EACR,EAAE,qBAAqB,2CAYvB;AAED,MAAM,WAAW,0BAA2B,SAAQ,cAAc,CAAC,oBAAoB,CAAC;IACtF,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,+CAA+C;AAC/C,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,SAAc,EACd,GAAG,IAAI,EACR,EAAE,0BAA0B,2CAW5B;AAED,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAErE,4DAA4D;AAC5D,wBAAgB,kBAAkB,CAAC,EACjC,SAAc,EACd,GAAG,IAAI,EACR,EAAE,uBAAuB,2CAUzB"}

package/dist/components/popover-menu/PopoverMenu.js

@@ -1,40 +1,51 @@
-import { jsx as p } from "react/jsx-runtime";
-import i from "../scrollbar/Scrollbar.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useRef as c, useEffect as _ } from "react";
+import { usePopoverTransition as j } from "../../hooks/use-popover-transition.js";
+import M from "../scrollbar/Scrollbar.js";
 import n from "./PopoverMenu.module.scss.js";
-function m({
+function T({
   variant: o = "parent",
-  children: e,
-  className: r = "",
-  ...t
+  open: e,
+  onExited: r,
+  children: l,
+  className: m = "",
+  ...v
 }) {
-  const l = [
+  const { mounted: u, visible: f } = j(e ?? !0), i = e !== void 0, s = c(u), p = c(r);
+  if (p.current = r, _(() => {
+    var a;
+    s.current && !u && i && ((a = p.current) == null || a.call(p)), s.current = u;
+  }, [u, i]), i && !u) return null;
+  const d = [
     n["popover-menu"],
     o === "child" ? n["popover-menu--child"] : n["popover-menu--parent"],
-    r
+    i && n["popover-menu--transition"],
+    i && f && n["popover-menu--visible"],
+    m
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ p("div", { className: l, ...t, children: e });
+  return /* @__PURE__ */ t("div", { className: d, ...v, children: l });
 }
-function c({
+function g({
   maxHeight: o,
   children: e,
   className: r = ""
 }) {
-  const t = typeof o == "number" ? `${o}px` : o;
-  return /* @__PURE__ */ p(
-    i,
+  const l = typeof o == "number" ? `${o}px` : o;
+  return /* @__PURE__ */ t(
+    M,
     {
       className: [n["popover-menu__scroll"], r].filter(Boolean).join(" "),
-      style: { maxHeight: t },
+      style: { maxHeight: l },
       children: e
     }
   );
 }
-function v({
+function G({
   children: o,
   className: e = "",
   ...r
 }) {
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ t(
     "p",
     {
       className: [n["popover-menu__title"], e].filter(Boolean).join(" "),
@@ -43,12 +54,12 @@ function v({
     }
   );
 }
-function f({
+function S({
   children: o,
   className: e = "",
   ...r
 }) {
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ t(
     "div",
     {
       role: "group",
@@ -58,12 +69,12 @@ function f({
     }
   );
 }
-function _({
+function h({
   children: o,
   className: e = "",
   ...r
 }) {
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ t(
     "p",
     {
       className: [n["popover-menu__group-title"], e].filter(Boolean).join(" "),
@@ -72,11 +83,11 @@ function _({
     }
   );
 }
-function d({
+function w({
   className: o = "",
   ...e
 }) {
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ t(
     "div",
     {
       className: [n["popover-menu__divider"], o].filter(Boolean).join(" "),
@@ -86,11 +97,11 @@ function d({
   );
 }
 export {
-  d as PopoverMenuDivider,
-  f as PopoverMenuGroup,
-  _ as PopoverMenuGroupTitle,
-  c as PopoverMenuScroll,
-  v as PopoverMenuTitle,
-  m as default
+  w as PopoverMenuDivider,
+  S as PopoverMenuGroup,
+  h as PopoverMenuGroupTitle,
+  g as PopoverMenuScroll,
+  G as PopoverMenuTitle,
+  T as default
 };
 //# sourceMappingURL=PopoverMenu.js.map

package/dist/components/popover-menu/PopoverMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverMenu.js","sources":["../../../src/components/popover-menu/PopoverMenu.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport styles from './PopoverMenu.module.scss';\n\nexport interface PopoverMenuProps extends HTMLAttributes<HTMLDivElement> {\n  /** Parent menus use Elevation 4; nested child menus use Elevation 5. */\n  variant?: 'parent' | 'child';\n  children: ReactNode;\n}\n\n/**\n * Surface container for popover-style menus — border, fill, elevation, and width\n * constraints per Compass. Compose with {@link MenuItem} rows and optional\n * titles, group labels, and dividers. Use {@link PopoverMenuScroll} when the item\n * list should scroll while a {@link PopoverMenuTitle} stays pinned.\n */\nexport default function PopoverMenu({\n  variant = 'parent',\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuProps) {\n  const rootClass = [\n    styles['popover-menu'],\n    variant === 'child'\n      ? styles['popover-menu--child']\n      : styles['popover-menu--parent'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} {...rest}>\n      {children}\n    </div>\n  );\n}\n\nexport interface PopoverMenuScrollProps {\n  children: ReactNode;\n  /** Maximum height of the scrollable region (coerces numbers to px). */\n  maxHeight: string | number;\n  className?: string;\n}\n\n/** Scrollable region for long item lists; keeps a sibling title visible when used with `maxHeight`. */\nexport function PopoverMenuScroll({\n  maxHeight,\n  children,\n  className = '',\n}: PopoverMenuScrollProps) {\n  const maxH = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;\n  return (\n    <Scrollbar\n      className={[styles['popover-menu__scroll'], className]\n        .filter(Boolean)\n        .join(' ')}\n      style={{ maxHeight: maxH }}\n    >\n      {children}\n    </Scrollbar>\n  );\n}\n\nexport interface PopoverMenuTitleProps extends HTMLAttributes<HTMLParagraphElement> {\n  children: ReactNode;\n}\n\n/** Optional heading above menu items; keep pinned outside a scrolling body when using `maxHeight` on `PopoverMenu`. */\nexport function PopoverMenuTitle({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuTitleProps) {\n  return (\n    <p\n      className={[styles['popover-menu__title'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      {children}\n    </p>\n  );\n}\n\nexport interface PopoverMenuGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /** Accessible label when the group has no visible `PopoverMenuGroupTitle`. */\n  'aria-label'?: string;\n}\n\n/** Groups related menu items. */\nexport function PopoverMenuGroup({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuGroupProps) {\n  return (\n    <div\n      role=\"group\"\n      className={[styles['popover-menu__group'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface PopoverMenuGroupTitleProps extends HTMLAttributes<HTMLParagraphElement> {\n  children: ReactNode;\n}\n\n/** Optional label for a `PopoverMenuGroup`. */\nexport function PopoverMenuGroupTitle({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuGroupTitleProps) {\n  return (\n    <p\n      className={[styles['popover-menu__group-title'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      {children}\n    </p>\n  );\n}\n\nexport type PopoverMenuDividerProps = HTMLAttributes<HTMLDivElement>;\n\n/** Horizontal rule between groups or below a menu title. */\nexport function PopoverMenuDivider({\n  className = '',\n  ...rest\n}: PopoverMenuDividerProps) {\n  return (\n    <div\n      className={[styles['popover-menu__divider'], className]\n        .filter(Boolean)\n        .join(' ')}\n      role=\"separator\"\n      {...rest}\n    />\n  );\n}\n"],"names":["PopoverMenu","variant","children","className","rest","rootClass","styles","PopoverMenuScroll","maxHeight","maxH","jsx","Scrollbar","PopoverMenuTitle","PopoverMenuGroup","PopoverMenuGroupTitle","PopoverMenuDivider"],"mappings":";;;AAgBA,SAAwBA,EAAY;AAAA,EAClC,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAqB;AACnB,QAAMC,IAAY;AAAA,IAChBC,EAAO,cAAc;AAAA,IACrBL,MAAY,UACRK,EAAO,qBAAqB,IAC5BA,EAAO,sBAAsB;AAAA,IACjCH;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACG,OAAA,EAAI,WAAWE,GAAY,GAAGD,GAC5B,UAAAF,GACH;AAEJ;AAUO,SAASK,EAAkB;AAAA,EAChC,WAAAC;AAAA,EACA,UAAAN;AAAA,EACA,WAAAC,IAAY;AACd,GAA2B;AACzB,QAAMM,IAAO,OAAOD,KAAc,WAAW,GAAGA,CAAS,OAAOA;AAChE,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAW,CAACL,EAAO,sBAAsB,GAAGH,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,OAAO,EAAE,WAAWM,EAAA;AAAA,MAEnB,UAAAP;AAAA,IAAA;AAAA,EAAA;AAGP;AAOO,SAASU,EAAiB;AAAA,EAC/B,UAAAV;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA0B;AACxB,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACJ,EAAO,qBAAqB,GAAGH,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;AASO,SAASW,EAAiB;AAAA,EAC/B,UAAAX;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA0B;AACxB,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,CAACJ,EAAO,qBAAqB,GAAGH,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;AAOO,SAASY,EAAsB;AAAA,EACpC,UAAAZ;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA+B;AAC7B,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACJ,EAAO,2BAA2B,GAAGH,CAAS,EACvD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;AAKO,SAASa,EAAmB;AAAA,EACjC,WAAAZ,IAAY;AAAA,EACZ,GAAGC;AACL,GAA4B;AAC1B,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACJ,EAAO,uBAAuB,GAAGH,CAAS,EACnD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,MAAK;AAAA,MACJ,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"PopoverMenu.js","sources":["../../../src/components/popover-menu/PopoverMenu.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport Scrollbar from '@/components/scrollbar/Scrollbar';\nimport styles from './PopoverMenu.module.scss';\n\nexport interface PopoverMenuProps extends HTMLAttributes<HTMLDivElement> {\n  /** Parent menus use Elevation 4; nested child menus use Elevation 5. */\n  variant?: 'parent' | 'child';\n  /**\n   * Controlled visibility with the Compass popover transition (scale + fade in,\n   * reverse on close); the menu unmounts after the exit. Omit to always render\n   * without transition. The host owns the state and positioning.\n   */\n  open?: boolean;\n  /** Called after the exit transition finishes and the menu unmounts (only when `open` is controlled). */\n  onExited?: () => void;\n  children: ReactNode;\n}\n\n/**\n * Surface container for popover-style menus — border, fill, elevation, and width\n * constraints per Compass. Compose with {@link MenuItem} rows and optional\n * titles, group labels, and dividers. Use {@link PopoverMenuScroll} when the item\n * list should scroll while a {@link PopoverMenuTitle} stays pinned.\n */\nexport default function PopoverMenu({\n  variant = 'parent',\n  open,\n  onExited,\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuProps) {\n  const { mounted, visible } = usePopoverTransition(open ?? true);\n  const transitioned = open !== undefined;\n  const wasMounted = useRef(mounted);\n  const onExitedRef = useRef(onExited);\n  onExitedRef.current = onExited;\n\n  useEffect(() => {\n    if (wasMounted.current && !mounted && transitioned) {\n      onExitedRef.current?.();\n    }\n    wasMounted.current = mounted;\n  }, [mounted, transitioned]);\n\n  if (transitioned && !mounted) return null;\n\n  const rootClass = [\n    styles['popover-menu'],\n    variant === 'child'\n      ? styles['popover-menu--child']\n      : styles['popover-menu--parent'],\n    transitioned && styles['popover-menu--transition'],\n    transitioned && visible && styles['popover-menu--visible'],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} {...rest}>\n      {children}\n    </div>\n  );\n}\n\nexport interface PopoverMenuScrollProps {\n  children: ReactNode;\n  /** Maximum height of the scrollable region (coerces numbers to px). */\n  maxHeight: string | number;\n  className?: string;\n}\n\n/** Scrollable region for long item lists; keeps a sibling title visible when used with `maxHeight`. */\nexport function PopoverMenuScroll({\n  maxHeight,\n  children,\n  className = '',\n}: PopoverMenuScrollProps) {\n  const maxH = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;\n  return (\n    <Scrollbar\n      className={[styles['popover-menu__scroll'], className]\n        .filter(Boolean)\n        .join(' ')}\n      style={{ maxHeight: maxH }}\n    >\n      {children}\n    </Scrollbar>\n  );\n}\n\nexport interface PopoverMenuTitleProps extends HTMLAttributes<HTMLParagraphElement> {\n  children: ReactNode;\n}\n\n/** Optional heading above menu items; keep pinned outside a scrolling body when using `maxHeight` on `PopoverMenu`. */\nexport function PopoverMenuTitle({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuTitleProps) {\n  return (\n    <p\n      className={[styles['popover-menu__title'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      {children}\n    </p>\n  );\n}\n\nexport interface PopoverMenuGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /** Accessible label when the group has no visible `PopoverMenuGroupTitle`. */\n  'aria-label'?: string;\n}\n\n/** Groups related menu items. */\nexport function PopoverMenuGroup({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuGroupProps) {\n  return (\n    <div\n      role=\"group\"\n      className={[styles['popover-menu__group'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface PopoverMenuGroupTitleProps extends HTMLAttributes<HTMLParagraphElement> {\n  children: ReactNode;\n}\n\n/** Optional label for a `PopoverMenuGroup`. */\nexport function PopoverMenuGroupTitle({\n  children,\n  className = '',\n  ...rest\n}: PopoverMenuGroupTitleProps) {\n  return (\n    <p\n      className={[styles['popover-menu__group-title'], className]\n        .filter(Boolean)\n        .join(' ')}\n      {...rest}\n    >\n      {children}\n    </p>\n  );\n}\n\nexport type PopoverMenuDividerProps = HTMLAttributes<HTMLDivElement>;\n\n/** Horizontal rule between groups or below a menu title. */\nexport function PopoverMenuDivider({\n  className = '',\n  ...rest\n}: PopoverMenuDividerProps) {\n  return (\n    <div\n      className={[styles['popover-menu__divider'], className]\n        .filter(Boolean)\n        .join(' ')}\n      role=\"separator\"\n      {...rest}\n    />\n  );\n}\n"],"names":["PopoverMenu","variant","open","onExited","children","className","rest","mounted","visible","usePopoverTransition","transitioned","wasMounted","useRef","onExitedRef","useEffect","_a","rootClass","styles","PopoverMenuScroll","maxHeight","maxH","jsx","Scrollbar","PopoverMenuTitle","PopoverMenuGroup","PopoverMenuGroupTitle","PopoverMenuDivider"],"mappings":";;;;;AA0BA,SAAwBA,EAAY;AAAA,EAClC,SAAAC,IAAU;AAAA,EACV,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAqB;AACnB,QAAM,EAAE,SAAAC,GAAS,SAAAC,EAAA,IAAYC,EAAqBP,KAAQ,EAAI,GACxDQ,IAAeR,MAAS,QACxBS,IAAaC,EAAOL,CAAO,GAC3BM,IAAcD,EAAOT,CAAQ;AAUnC,MATAU,EAAY,UAAUV,GAEtBW,EAAU,MAAM;;AACd,IAAIH,EAAW,WAAW,CAACJ,KAAWG,OACpCK,IAAAF,EAAY,YAAZ,QAAAE,EAAA,KAAAF,KAEFF,EAAW,UAAUJ;AAAA,EACvB,GAAG,CAACA,GAASG,CAAY,CAAC,GAEtBA,KAAgB,CAACH,EAAS,QAAO;AAErC,QAAMS,IAAY;AAAA,IAChBC,EAAO,cAAc;AAAA,IACrBhB,MAAY,UACRgB,EAAO,qBAAqB,IAC5BA,EAAO,sBAAsB;AAAA,IACjCP,KAAgBO,EAAO,0BAA0B;AAAA,IACjDP,KAAgBF,KAAWS,EAAO,uBAAuB;AAAA,IACzDZ;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACG,OAAA,EAAI,WAAWW,GAAY,GAAGV,GAC5B,UAAAF,GACH;AAEJ;AAUO,SAASc,EAAkB;AAAA,EAChC,WAAAC;AAAA,EACA,UAAAf;AAAA,EACA,WAAAC,IAAY;AACd,GAA2B;AACzB,QAAMe,IAAO,OAAOD,KAAc,WAAW,GAAGA,CAAS,OAAOA;AAChE,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAW,CAACL,EAAO,sBAAsB,GAAGZ,CAAS,EAClD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,OAAO,EAAE,WAAWe,EAAA;AAAA,MAEnB,UAAAhB;AAAA,IAAA;AAAA,EAAA;AAGP;AAOO,SAASmB,EAAiB;AAAA,EAC/B,UAAAnB;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA0B;AACxB,SACE,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACJ,EAAO,qBAAqB,GAAGZ,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;AASO,SAASoB,EAAiB;AAAA,EAC/B,UAAApB;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA0B;AACxB,SACE,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,CAACJ,EAAO,qBAAqB,GAAGZ,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;AAOO,SAASqB,EAAsB;AAAA,EACpC,UAAArB;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAA+B;AAC7B,SACE,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACJ,EAAO,2BAA2B,GAAGZ,CAAS,EACvD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;AAKO,SAASsB,EAAmB;AAAA,EACjC,WAAArB,IAAY;AAAA,EACZ,GAAGC;AACL,GAA4B;AAC1B,SACE,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACJ,EAAO,uBAAuB,GAAGZ,CAAS,EACnD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,MAAK;AAAA,MACJ,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/popover-menu/PopoverMenu.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PopoverMenu.css');const e={"popover-menu":"_popover-menu_1m31t_2","popover-menu--parent":"_popover-menu--parent_1m31t_16","popover-menu--child":"_popover-menu--child_1m31t_19","popover-menu__scroll":"_popover-menu__scroll_1m31t_22","popover-menu__title":"_popover-menu__title_1m31t_25","popover-menu__group":"_popover-menu__group_1m31t_36","popover-menu__group-title":"_popover-menu__group-title_1m31t_41","popover-menu__divider":"_popover-menu__divider_1m31t_53"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./PopoverMenu.css');const e={"popover-menu":"_popover-menu_1tx2s_2","popover-menu--parent":"_popover-menu--parent_1tx2s_16","popover-menu--child":"_popover-menu--child_1tx2s_19","popover-menu--transition":"_popover-menu--transition_1tx2s_22","popover-menu--visible":"_popover-menu--visible_1tx2s_35","popover-menu__scroll":"_popover-menu__scroll_1tx2s_47","popover-menu__title":"_popover-menu__title_1tx2s_50","popover-menu__group":"_popover-menu__group_1tx2s_61","popover-menu__group-title":"_popover-menu__group-title_1tx2s_66","popover-menu__divider":"_popover-menu__divider_1tx2s_78"};exports.default=e;
 //# sourceMappingURL=PopoverMenu.module.scss.cjs.map

package/dist/components/popover-menu/PopoverMenu.module.scss.js

@@ -1,14 +1,16 @@
-import './PopoverMenu.css';const _ = {
-  "popover-menu": "_popover-menu_1m31t_2",
-  "popover-menu--parent": "_popover-menu--parent_1m31t_16",
-  "popover-menu--child": "_popover-menu--child_1m31t_19",
-  "popover-menu__scroll": "_popover-menu__scroll_1m31t_22",
-  "popover-menu__title": "_popover-menu__title_1m31t_25",
-  "popover-menu__group": "_popover-menu__group_1m31t_36",
-  "popover-menu__group-title": "_popover-menu__group-title_1m31t_41",
-  "popover-menu__divider": "_popover-menu__divider_1m31t_53"
+import './PopoverMenu.css';const e = {
+  "popover-menu": "_popover-menu_1tx2s_2",
+  "popover-menu--parent": "_popover-menu--parent_1tx2s_16",
+  "popover-menu--child": "_popover-menu--child_1tx2s_19",
+  "popover-menu--transition": "_popover-menu--transition_1tx2s_22",
+  "popover-menu--visible": "_popover-menu--visible_1tx2s_35",
+  "popover-menu__scroll": "_popover-menu__scroll_1tx2s_47",
+  "popover-menu__title": "_popover-menu__title_1tx2s_50",
+  "popover-menu__group": "_popover-menu__group_1tx2s_61",
+  "popover-menu__group-title": "_popover-menu__group-title_1tx2s_66",
+  "popover-menu__divider": "_popover-menu__divider_1tx2s_78"
 };
 export {
-  _ as default
+  e as default
 };
 //# sourceMappingURL=PopoverMenu.module.scss.js.map

package/dist/components/popover-menu/PopoverMenu.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverMenu.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"PopoverMenu.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/components/radio/Radio.css

@@ -1 +1 @@
-._radio_11lrl_2{position:relative;display:flex;align-items:center;width:100%;gap:var(--spacing-xs);font-family:var(--font-family-body);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._radio_11lrl_2:has(._radio__input_11lrl_13:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._radio__input_11lrl_13{position:absolute;left:0;top:50%;transform:translateY(-50%);margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}._radio__input_11lrl_13:focus-visible{outline:none}._radio__circle_11lrl_33{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.24);border-radius:var(--radius-pill);transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),border-width var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._radio__input_11lrl_13:focus-visible~._radio__circle_11lrl_33{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio_11lrl_2:has(._radio__input_11lrl_13:not(:disabled)):hover ._radio__circle_11lrl_33{border-color:rgba(var(--center-channel-color-rgb),.32)}._radio__input_11lrl_13:disabled~._radio__circle_11lrl_33{border-color:rgba(var(--center-channel-color-rgb),.16)}._radio__input_11lrl_13:checked~._radio__circle_11lrl_33{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--button-bg)}._radio__input_11lrl_13:checked~._radio__circle_11lrl_33 ._radio__dot_11lrl_59{background-color:var(--button-bg)}._radio_11lrl_2:has(._radio__input_11lrl_13:not(:disabled)):hover ._radio__input_11lrl_13:checked~._radio__circle_11lrl_33{border-color:var(--button-bg)}._radio_11lrl_2:has(._radio__input_11lrl_13:not(:disabled)):hover ._radio__input_11lrl_13:checked~._radio__circle_11lrl_33 ._radio__dot_11lrl_59{background-color:var(--button-bg)}._radio__input_11lrl_13:focus-visible:checked~._radio__circle_11lrl_33{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio__input_11lrl_13:disabled:checked~._radio__circle_11lrl_33{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.32);border-width:1px}._radio__input_11lrl_13:disabled:checked~._radio__circle_11lrl_33 ._radio__dot_11lrl_59{background-color:rgba(var(--center-channel-color-rgb),.32)}._radio--invalid_11lrl_80 ._radio__circle_11lrl_33{border-color:var(--error-text, var(--color-danger))}._radio_11lrl_2:has(._radio__input_11lrl_13:not(:disabled)):hover._radio--invalid_11lrl_80 ._radio__input_11lrl_13:not(:checked)~._radio__circle_11lrl_33{border-color:var(--error-text, var(--color-danger))}._radio--invalid_11lrl_80 ._radio__input_11lrl_13:checked~._radio__circle_11lrl_33{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--error-text, var(--color-danger))}._radio--invalid_11lrl_80 ._radio__input_11lrl_13:checked~._radio__circle_11lrl_33 ._radio__dot_11lrl_59{background-color:var(--error-text, var(--color-danger))}._radio_11lrl_2:has(._radio__input_11lrl_13:not(:disabled)):hover._radio--invalid_11lrl_80 ._radio__input_11lrl_13:checked~._radio__circle_11lrl_33{border-color:var(--error-text, var(--color-danger))}._radio_11lrl_2:has(._radio__input_11lrl_13:not(:disabled)):hover._radio--invalid_11lrl_80 ._radio__input_11lrl_13:checked~._radio__circle_11lrl_33 ._radio__dot_11lrl_59{background-color:var(--error-text, var(--color-danger))}._radio--invalid_11lrl_80 ._radio__input_11lrl_13:focus-visible~._radio__circle_11lrl_33{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio--invalid_11lrl_80 ._radio__input_11lrl_13:focus-visible:checked~._radio__circle_11lrl_33{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio__dot_11lrl_59{display:block;border-radius:var(--radius-pill);pointer-events:none;transform:scale(.5);transition:transform var(--duration-quick) var(--ease-entrance)}._radio__input_11lrl_13:checked~._radio__circle_11lrl_33 ._radio__dot_11lrl_59{transform:scale(1)}._radio__label_11lrl_116{line-height:1}._radio--size-small_11lrl_119{gap:var(--spacing-xs)}._radio--size-small_11lrl_119 ._radio__input_11lrl_13,._radio--size-small_11lrl_119 ._radio__circle_11lrl_33{width:12px;height:12px}._radio--size-small_11lrl_119 ._radio__dot_11lrl_59{width:6px;height:6px}._radio--size-small_11lrl_119 ._radio__label_11lrl_116{font-size:var(--font-size-75);line-height:var(--line-height-75)}._radio--size-medium_11lrl_138{gap:var(--spacing-xs)}._radio--size-medium_11lrl_138 ._radio__input_11lrl_13,._radio--size-medium_11lrl_138 ._radio__circle_11lrl_33{width:16px;height:16px}._radio--size-medium_11lrl_138 ._radio__dot_11lrl_59{width:8px;height:8px}._radio--size-medium_11lrl_138 ._radio__label_11lrl_116{font-size:var(--font-size-100);line-height:var(--line-height-100)}._radio--size-large_11lrl_157{gap:var(--spacing-s)}._radio--size-large_11lrl_157 ._radio__input_11lrl_13,._radio--size-large_11lrl_157 ._radio__circle_11lrl_33{width:20px;height:20px}._radio--size-large_11lrl_157 ._radio__dot_11lrl_59{width:10px;height:10px}._radio--size-large_11lrl_157 ._radio__label_11lrl_116{font-size:var(--font-size-200);line-height:var(--line-height-200)}
+._radio_1hdqa_2{position:relative;display:flex;align-items:flex-start;width:100%;gap:var(--spacing-xs);font-family:var(--font-family-body);font-weight:var(--font-weight-regular);color:var(--center-channel-color);cursor:pointer;-webkit-user-select:none;user-select:none}._radio_1hdqa_2:has(._radio__input_1hdqa_14:disabled){cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.56)}._radio__input_1hdqa_14{position:absolute;left:0;top:0;margin:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;border:0;cursor:inherit}._radio__input_1hdqa_14:focus-visible{outline:none}._radio__circle_1hdqa_33{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.24);border-radius:var(--radius-pill);transition:background-color var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition),border-width var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._radio__input_1hdqa_14:focus-visible~._radio__circle_1hdqa_33{box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio_1hdqa_2:has(._radio__input_1hdqa_14:not(:disabled)):hover ._radio__circle_1hdqa_33{border-color:rgba(var(--center-channel-color-rgb),.32)}._radio__input_1hdqa_14:disabled~._radio__circle_1hdqa_33{border-color:rgba(var(--center-channel-color-rgb),.16)}._radio__input_1hdqa_14:checked~._radio__circle_1hdqa_33{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--button-bg)}._radio__input_1hdqa_14:checked~._radio__circle_1hdqa_33 ._radio__dot_1hdqa_59{background-color:var(--button-bg)}._radio_1hdqa_2:has(._radio__input_1hdqa_14:not(:disabled)):hover ._radio__input_1hdqa_14:checked~._radio__circle_1hdqa_33{border-color:var(--button-bg)}._radio_1hdqa_2:has(._radio__input_1hdqa_14:not(:disabled)):hover ._radio__input_1hdqa_14:checked~._radio__circle_1hdqa_33 ._radio__dot_1hdqa_59{background-color:var(--button-bg)}._radio__input_1hdqa_14:focus-visible:checked~._radio__circle_1hdqa_33{border-color:var(--button-bg);box-shadow:0 0 0 2px rgba(var(--button-bg-rgb),.56)}._radio__input_1hdqa_14:disabled:checked~._radio__circle_1hdqa_33{background-color:var(--center-channel-bg);border-color:rgba(var(--center-channel-color-rgb),.32);border-width:1px}._radio__input_1hdqa_14:disabled:checked~._radio__circle_1hdqa_33 ._radio__dot_1hdqa_59{background-color:rgba(var(--center-channel-color-rgb),.32)}._radio--invalid_1hdqa_80 ._radio__circle_1hdqa_33{border-color:var(--error-text, var(--color-danger))}._radio_1hdqa_2:has(._radio__input_1hdqa_14:not(:disabled)):hover._radio--invalid_1hdqa_80 ._radio__input_1hdqa_14:not(:checked)~._radio__circle_1hdqa_33{border-color:var(--error-text, var(--color-danger))}._radio--invalid_1hdqa_80 ._radio__input_1hdqa_14:checked~._radio__circle_1hdqa_33{background-color:var(--center-channel-bg);border-width:1px;border-color:var(--error-text, var(--color-danger))}._radio--invalid_1hdqa_80 ._radio__input_1hdqa_14:checked~._radio__circle_1hdqa_33 ._radio__dot_1hdqa_59{background-color:var(--error-text, var(--color-danger))}._radio_1hdqa_2:has(._radio__input_1hdqa_14:not(:disabled)):hover._radio--invalid_1hdqa_80 ._radio__input_1hdqa_14:checked~._radio__circle_1hdqa_33{border-color:var(--error-text, var(--color-danger))}._radio_1hdqa_2:has(._radio__input_1hdqa_14:not(:disabled)):hover._radio--invalid_1hdqa_80 ._radio__input_1hdqa_14:checked~._radio__circle_1hdqa_33 ._radio__dot_1hdqa_59{background-color:var(--error-text, var(--color-danger))}._radio--invalid_1hdqa_80 ._radio__input_1hdqa_14:focus-visible~._radio__circle_1hdqa_33{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio--invalid_1hdqa_80 ._radio__input_1hdqa_14:focus-visible:checked~._radio__circle_1hdqa_33{box-shadow:0 0 0 2px rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.56)}._radio__dot_1hdqa_59{display:block;border-radius:var(--radius-pill);pointer-events:none;transform:scale(.5);transition:transform var(--duration-quick) var(--ease-entrance)}._radio__input_1hdqa_14:checked~._radio__circle_1hdqa_33 ._radio__dot_1hdqa_59{transform:scale(1)}._radio__label_1hdqa_116{line-height:1}._radio--size-small_1hdqa_119{gap:var(--spacing-xs)}._radio--size-small_1hdqa_119 ._radio__input_1hdqa_14,._radio--size-small_1hdqa_119 ._radio__circle_1hdqa_33{width:var(--icon-size-12);height:var(--icon-size-12);margin-top:calc((var(--line-height-75) - var(--icon-size-12)) / 2)}._radio--size-small_1hdqa_119 ._radio__dot_1hdqa_59{width:6px;height:6px}._radio--size-small_1hdqa_119 ._radio__label_1hdqa_116{font-size:var(--font-size-75);line-height:var(--line-height-75)}._radio--size-medium_1hdqa_140{gap:var(--spacing-xs)}._radio--size-medium_1hdqa_140 ._radio__input_1hdqa_14,._radio--size-medium_1hdqa_140 ._radio__circle_1hdqa_33{width:var(--icon-size-16);height:var(--icon-size-16);margin-top:calc((var(--line-height-100) - var(--icon-size-16)) / 2)}._radio--size-medium_1hdqa_140 ._radio__dot_1hdqa_59{width:8px;height:8px}._radio--size-medium_1hdqa_140 ._radio__label_1hdqa_116{font-size:var(--font-size-100);line-height:var(--line-height-100)}._radio--size-large_1hdqa_161{gap:var(--spacing-s)}._radio--size-large_1hdqa_161 ._radio__input_1hdqa_14,._radio--size-large_1hdqa_161 ._radio__circle_1hdqa_33{width:var(--icon-size-20);height:var(--icon-size-20);margin-top:calc((var(--line-height-200) - var(--icon-size-20)) / 2)}._radio--size-large_1hdqa_161 ._radio__dot_1hdqa_59{width:10px;height:10px}._radio--size-large_1hdqa_161 ._radio__label_1hdqa_116{font-size:var(--font-size-200);line-height:var(--line-height-200)}

package/dist/components/radio/Radio.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Radio.css');const _="_radio_11lrl_2",i="_radio__input_11lrl_13",r="_radio__circle_11lrl_33",l="_radio__dot_11lrl_59",o="_radio__label_11lrl_116",a={radio:_,radio__input:i,radio__circle:r,radio__dot:l,"radio--invalid":"_radio--invalid_11lrl_80",radio__label:o,"radio--size-small":"_radio--size-small_11lrl_119","radio--size-medium":"_radio--size-medium_11lrl_138","radio--size-large":"_radio--size-large_11lrl_157"};exports.default=a;exports.radio=_;exports.radio__circle=r;exports.radio__dot=l;exports.radio__input=i;exports.radio__label=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Radio.css');const _="_radio_1hdqa_2",i="_radio__input_1hdqa_14",a="_radio__circle_1hdqa_33",d="_radio__dot_1hdqa_59",o="_radio__label_1hdqa_116",r={radio:_,radio__input:i,radio__circle:a,radio__dot:d,"radio--invalid":"_radio--invalid_1hdqa_80",radio__label:o,"radio--size-small":"_radio--size-small_1hdqa_119","radio--size-medium":"_radio--size-medium_1hdqa_140","radio--size-large":"_radio--size-large_1hdqa_161"};exports.default=r;exports.radio=_;exports.radio__circle=a;exports.radio__dot=d;exports.radio__input=i;exports.radio__label=o;
 //# sourceMappingURL=Radio.module.scss.cjs.map

package/dist/components/radio/Radio.module.scss.js

@@ -1,20 +1,20 @@
-import './Radio.css';const _ = "_radio_11lrl_2", i = "_radio__input_11lrl_13", r = "_radio__circle_11lrl_33", l = "_radio__dot_11lrl_59", a = "_radio__label_11lrl_116", o = {
+import './Radio.css';const _ = "_radio_1hdqa_2", a = "_radio__input_1hdqa_14", i = "_radio__circle_1hdqa_33", d = "_radio__dot_1hdqa_59", o = "_radio__label_1hdqa_116", r = {
   radio: _,
-  radio__input: i,
-  radio__circle: r,
-  radio__dot: l,
-  "radio--invalid": "_radio--invalid_11lrl_80",
-  radio__label: a,
-  "radio--size-small": "_radio--size-small_11lrl_119",
-  "radio--size-medium": "_radio--size-medium_11lrl_138",
-  "radio--size-large": "_radio--size-large_11lrl_157"
+  radio__input: a,
+  radio__circle: i,
+  radio__dot: d,
+  "radio--invalid": "_radio--invalid_1hdqa_80",
+  radio__label: o,
+  "radio--size-small": "_radio--size-small_1hdqa_119",
+  "radio--size-medium": "_radio--size-medium_1hdqa_140",
+  "radio--size-large": "_radio--size-large_1hdqa_161"
 };
 export {
-  o as default,
+  r as default,
   _ as radio,
-  r as radio__circle,
-  l as radio__dot,
-  i as radio__input,
-  a as radio__label
+  i as radio__circle,
+  d as radio__dot,
+  a as radio__input,
+  o as radio__label
 };
 //# sourceMappingURL=Radio.module.scss.js.map

package/dist/components/right-sidebar-header/RightSidebarHeader.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__q=require("@mattermost/compass-icons/components/arrow-back-ios.js"),q=__q?.default??__q,__v=require("@mattermost/compass-icons/components/arrow-collapse.js"),v=__v?.default??__v,__y=require("@mattermost/compass-icons/components/arrow-expand.js"),y=__y?.default??__y,__C=require("@mattermost/compass-icons/components/close.js"),C=__C?.default??__C,s=require("../icon/Icon.cjs"),r=require("../icon-button/IconButton.cjs"),z=require("../tag/Tag.cjs"),a=require("./RightSidebarHeader.module.scss.cjs");function k({title:f,secondaryTitle:i,tag:l,tagType:j="info",leadingIcon:t,onBack:d,backLabel:_="Back",onExpand:c,expanded:n=!1,expandLabel:x="Expand",collapseLabel:b="Collapse",onClose:o,closeLabel:g="Close",actionLabel:u,onActionClick:m,actionActive:h=!1,className:p=""}){const N=[a.default["right-sidebar-header"],p].filter(Boolean).join(" ");return e.jsxs("div",{className:N,children:[e.jsxs("div",{className:a.default["right-sidebar-header__left"],children:[e.jsxs("div",{className:a.default["right-sidebar-header__primary"],children:[d&&e.jsx(r.default,{className:a.default["right-sidebar-header__back"],size:"small","aria-label":_,onClick:d,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(q,{})})}),t&&e.jsx("span",{className:a.default["right-sidebar-header__leading-icon"],children:t}),e.jsx("span",{className:a.default["right-sidebar-header__title"],children:f}),l&&e.jsx("span",{className:a.default["right-sidebar-header__tag"],children:e.jsx(z.default,{label:l,type:j,size:"x-small",casing:"all-caps"})})]}),i&&e.jsx("div",{className:a.default["right-sidebar-header__secondary"],children:e.jsx("span",{className:a.default["right-sidebar-header__secondary-text"],children:i})})]}),e.jsxs("div",{className:a.default["right-sidebar-header__actions"],children:[u&&e.jsx("button",{type:"button",className:[a.default["right-sidebar-header__action"],h?a.default["right-sidebar-header__action--active"]:""].filter(Boolean).join(" "),onClick:m,"aria-pressed":h?!0:void 0,children:u}),c&&e.jsx(r.default,{size:"small","aria-label":n?b:x,onClick:c,icon:e.jsx(s.default,{size:"16",glyph:n?e.jsx(v,{}):e.jsx(y,{})})}),o&&e.jsx(r.default,{size:"small","aria-label":g,onClick:o,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(C,{})})})]})]})}exports.default=k;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__z=require("@mattermost/compass-icons/components/arrow-back-ios.js"),z=__z?.default??__z,__C=require("@mattermost/compass-icons/components/arrow-collapse.js"),C=__C?.default??__C,__k=require("@mattermost/compass-icons/components/arrow-expand.js"),k=__k?.default??__k,__v=require("@mattermost/compass-icons/components/close.js"),v=__v?.default??__v,__w=require("@mattermost/compass-icons/components/dock-window.js"),w=__w?.default??__w,s=require("../icon/Icon.cjs"),r=require("../icon-button/IconButton.cjs"),I=require("../tag/Tag.cjs"),a=require("./RightSidebarHeader.module.scss.cjs");function B({title:j,secondaryTitle:i,tag:l,tagType:x="info",leadingIcon:d,onBack:t,backLabel:_="Back",onExpand:n,expanded:c=!1,expandLabel:b="Expand",collapseLabel:g="Collapse",onPopout:o,popoutLabel:m="Open in new window",onClose:u,closeLabel:p="Close",actionLabel:h,onActionClick:N,actionActive:f=!1,className:q=""}){const y=[a.default["right-sidebar-header"],q].filter(Boolean).join(" ");return e.jsxs("div",{className:y,children:[e.jsxs("div",{className:a.default["right-sidebar-header__left"],children:[e.jsxs("div",{className:a.default["right-sidebar-header__primary"],children:[t&&e.jsx(r.default,{className:a.default["right-sidebar-header__back"],size:"small","aria-label":_,onClick:t,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(z,{})})}),d&&e.jsx("span",{className:a.default["right-sidebar-header__leading-icon"],children:d}),e.jsx("span",{className:a.default["right-sidebar-header__title"],children:j}),l&&e.jsx("span",{className:a.default["right-sidebar-header__tag"],children:e.jsx(I.default,{label:l,type:x,size:"x-small",casing:"all-caps"})})]}),i&&e.jsx("div",{className:a.default["right-sidebar-header__secondary"],children:e.jsx("span",{className:a.default["right-sidebar-header__secondary-text"],children:i})})]}),e.jsxs("div",{className:a.default["right-sidebar-header__actions"],children:[h&&e.jsx("button",{type:"button",className:[a.default["right-sidebar-header__action"],f?a.default["right-sidebar-header__action--active"]:""].filter(Boolean).join(" "),onClick:N,"aria-pressed":f?!0:void 0,children:h}),n&&e.jsx(r.default,{size:"small","aria-label":c?g:b,onClick:n,icon:e.jsx(s.default,{size:"16",glyph:c?e.jsx(C,{}):e.jsx(k,{})})}),o&&e.jsx(r.default,{size:"small","aria-label":m,onClick:o,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(w,{})})}),u&&e.jsx(r.default,{size:"small","aria-label":p,onClick:u,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(v,{})})})]})]})}exports.default=B;
 //# sourceMappingURL=RightSidebarHeader.cjs.map

package/dist/components/right-sidebar-header/RightSidebarHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RightSidebarHeader.cjs","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n  /** Primary title text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: ReactNode;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: ReactNode;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"20\" />` to align with the title text. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Back\". */\n  backLabel?: string;\n  /** When set, shows an expand/collapse button and calls this on click. */\n  onExpand?: () => void;\n  /** When true, the expand button shows the collapse icon. Requires `onExpand`. */\n  expanded?: boolean;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse\". */\n  collapseLabel?: string;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Optional inline action label (e.g. \"Follow\"). Accepts translated nodes. */\n  actionLabel?: ReactNode;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  backLabel = 'Back',\n  onExpand,\n  expanded = false,\n  expandLabel = 'Expand',\n  collapseLabel = 'Collapse',\n  onClose,\n  closeLabel = 'Close',\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  className = '',\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label={backLabel}\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            <span className={styles['right-sidebar-header__secondary-text']}>\n              {secondaryTitle}\n            </span>\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label={expanded ? collapseLabel : expandLabel}\n            onClick={onExpand}\n            icon={\n              <Icon\n                size=\"16\"\n                glyph={expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              />\n            }\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label={closeLabel}\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","backLabel","onExpand","expanded","expandLabel","collapseLabel","onClose","closeLabel","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowCollapseIcon","ArrowExpandIcon","CloseIcon"],"mappings":"giBA+CA,SAAwBA,EAAmB,CACzC,MAAAC,EACA,eAAAC,EACA,IAAAC,EACA,QAAAC,EAAU,OACV,YAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,OACZ,SAAAC,EACA,SAAAC,EAAW,GACX,YAAAC,EAAc,SACd,cAAAC,EAAgB,WAChB,QAAAC,EACA,WAAAC,EAAa,QACb,YAAAC,EACA,cAAAC,EACA,aAAAC,EAAe,GACf,UAAAC,EAAY,EACd,EAA4B,CAC1B,MAAMC,EAAY,CAACC,UAAO,sBAAsB,EAAGF,CAAS,EACzD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEG,EAAAA,KAAC,MAAA,CAAI,UAAWF,EACd,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,4BAA4B,EACjD,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAb,GACCe,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWH,EAAAA,QAAO,4BAA4B,EAC9C,KAAK,QACL,aAAYZ,EACZ,QAASD,EACT,WAAOiB,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACG,IAAiB,CAAA,CAAI,CAAA,CAAA,EAGtDnB,GACCgB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,oCAAoC,EACzD,SAAAd,EACH,QAED,OAAA,CAAK,UAAWc,EAAAA,QAAO,6BAA6B,EAAI,SAAAlB,EAAM,EAC9DE,GACCkB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,2BAA2B,EACjD,SAAAE,EAAAA,IAACI,EAAAA,QAAA,CACC,MAAOtB,EACP,KAAMC,EACN,KAAK,UACL,OAAO,UAAA,CAAA,CACT,CACF,CAAA,EAEJ,EACCF,GACCmB,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,iCAAiC,EACtD,SAAAE,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,sCAAsC,EAC3D,WACH,CAAA,CACF,CAAA,EAEJ,EAEAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAL,GACCO,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTF,EAAAA,QAAO,8BAA8B,EACrCH,EACIG,EAAAA,QAAO,sCAAsC,EAC7C,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASJ,EACT,eAAcC,EAAe,GAAO,OAEnC,SAAAF,CAAA,CAAA,EAGJN,GACCa,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYb,EAAWE,EAAgBD,EACvC,QAASF,EACT,KACEa,EAAAA,IAACE,EAAAA,QAAA,CACC,KAAK,KACL,MAAOd,EAAWY,MAACK,EAAA,CAAA,CAAkB,QAAMC,EAAA,CAAA,CAAgB,CAAA,CAAA,CAC7D,CAAA,EAILf,GACCS,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYT,EACZ,QAASD,EACT,WAAOW,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACO,IAAU,CAAA,CAAI,CAAA,CAAA,CAC9C,CAAA,CAEJ,CAAA,EACF,CAEJ"}
+{"version":3,"file":"RightSidebarHeader.cjs","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport DockWindowIcon from '@mattermost/compass-icons/components/dock-window';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n  /** Primary title text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: ReactNode;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: ReactNode;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"20\" />` to align with the title text. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Back\". */\n  backLabel?: string;\n  /** When set, shows an expand/collapse button and calls this on click. */\n  onExpand?: () => void;\n  /** When true, the expand button shows the collapse icon. Requires `onExpand`. */\n  expanded?: boolean;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse\". */\n  collapseLabel?: string;\n  /** When set, shows a pop out button (open in a new window) between expand and close, and calls this on click. */\n  onPopout?: () => void;\n  /** Accessible name for the pop out button. Default: \"Open in new window\". */\n  popoutLabel?: string;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Optional inline action label (e.g. \"Follow\"). Accepts translated nodes. */\n  actionLabel?: ReactNode;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  backLabel = 'Back',\n  onExpand,\n  expanded = false,\n  expandLabel = 'Expand',\n  collapseLabel = 'Collapse',\n  onPopout,\n  popoutLabel = 'Open in new window',\n  onClose,\n  closeLabel = 'Close',\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  className = '',\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label={backLabel}\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            <span className={styles['right-sidebar-header__secondary-text']}>\n              {secondaryTitle}\n            </span>\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label={expanded ? collapseLabel : expandLabel}\n            onClick={onExpand}\n            icon={\n              <Icon\n                size=\"16\"\n                glyph={expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              />\n            }\n          />\n        )}\n        {onPopout && (\n          <IconButton\n            size=\"small\"\n            aria-label={popoutLabel}\n            onClick={onPopout}\n            icon={<Icon size=\"16\" glyph={<DockWindowIcon />} />}\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label={closeLabel}\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","backLabel","onExpand","expanded","expandLabel","collapseLabel","onPopout","popoutLabel","onClose","closeLabel","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowCollapseIcon","ArrowExpandIcon","DockWindowIcon","CloseIcon"],"mappings":"8lBAoDA,SAAwBA,EAAmB,CACzC,MAAAC,EACA,eAAAC,EACA,IAAAC,EACA,QAAAC,EAAU,OACV,YAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,OACZ,SAAAC,EACA,SAAAC,EAAW,GACX,YAAAC,EAAc,SACd,cAAAC,EAAgB,WAChB,SAAAC,EACA,YAAAC,EAAc,qBACd,QAAAC,EACA,WAAAC,EAAa,QACb,YAAAC,EACA,cAAAC,EACA,aAAAC,EAAe,GACf,UAAAC,EAAY,EACd,EAA4B,CAC1B,MAAMC,EAAY,CAACC,UAAO,sBAAsB,EAAGF,CAAS,EACzD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEG,EAAAA,KAAC,MAAA,CAAI,UAAWF,EACd,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,4BAA4B,EACjD,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAf,GACCiB,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWH,EAAAA,QAAO,4BAA4B,EAC9C,KAAK,QACL,aAAYd,EACZ,QAASD,EACT,WAAOmB,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACG,IAAiB,CAAA,CAAI,CAAA,CAAA,EAGtDrB,GACCkB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,oCAAoC,EACzD,SAAAhB,EACH,QAED,OAAA,CAAK,UAAWgB,EAAAA,QAAO,6BAA6B,EAAI,SAAApB,EAAM,EAC9DE,GACCoB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,2BAA2B,EACjD,SAAAE,EAAAA,IAACI,EAAAA,QAAA,CACC,MAAOxB,EACP,KAAMC,EACN,KAAK,UACL,OAAO,UAAA,CAAA,CACT,CACF,CAAA,EAEJ,EACCF,GACCqB,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,iCAAiC,EACtD,SAAAE,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,sCAAsC,EAC3D,WACH,CAAA,CACF,CAAA,EAEJ,EAEAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAL,GACCO,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTF,EAAAA,QAAO,8BAA8B,EACrCH,EACIG,EAAAA,QAAO,sCAAsC,EAC7C,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASJ,EACT,eAAcC,EAAe,GAAO,OAEnC,SAAAF,CAAA,CAAA,EAGJR,GACCe,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYf,EAAWE,EAAgBD,EACvC,QAASF,EACT,KACEe,EAAAA,IAACE,EAAAA,QAAA,CACC,KAAK,KACL,MAAOhB,EAAWc,MAACK,EAAA,CAAA,CAAkB,QAAMC,EAAA,CAAA,CAAgB,CAAA,CAAA,CAC7D,CAAA,EAILjB,GACCW,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYX,EACZ,QAASD,EACT,WAAOa,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACO,IAAe,CAAA,CAAI,CAAA,CAAA,EAGpDhB,GACCS,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYT,EACZ,QAASD,EACT,WAAOW,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACQ,IAAU,CAAA,CAAI,CAAA,CAAA,CAC9C,CAAA,CAEJ,CAAA,EACF,CAEJ"}

package/dist/components/right-sidebar-header/RightSidebarHeader.d.ts

@@ -23,6 +23,10 @@ export interface RightSidebarHeaderProps {
     expandLabel?: string;
     /** Accessible name for the expand button while expanded. Default: "Collapse". */
     collapseLabel?: string;
+    /** When set, shows a pop out button (open in a new window) between expand and close, and calls this on click. */
+    onPopout?: () => void;
+    /** Accessible name for the pop out button. Default: "Open in new window". */
+    popoutLabel?: string;
     /** When set, shows a close button and calls this on click. */
     onClose?: () => void;
     /** Accessible name for the close button. Default: "Close". */
@@ -35,5 +39,5 @@ export interface RightSidebarHeaderProps {
     actionActive?: boolean;
     className?: string;
 }
-export default function RightSidebarHeader({ title, secondaryTitle, tag, tagType, leadingIcon, onBack, backLabel, onExpand, expanded, expandLabel, collapseLabel, onClose, closeLabel, actionLabel, onActionClick, actionActive, className, }: RightSidebarHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default function RightSidebarHeader({ title, secondaryTitle, tag, tagType, leadingIcon, onBack, backLabel, onExpand, expanded, expandLabel, collapseLabel, onPopout, popoutLabel, onClose, closeLabel, actionLabel, onActionClick, actionActive, className, }: RightSidebarHeaderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RightSidebarHeader.d.ts.map

package/dist/components/right-sidebar-header/RightSidebarHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RightSidebarHeader.d.ts","sourceRoot":"","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAGpD,MAAM,WAAW,uBAAuB;IACtC,iFAAiF;IACjF,KAAK,EAAE,SAAS,CAAC;IACjB,2FAA2F;IAC3F,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,6DAA6D;IAC7D,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+LAA+L;IAC/L,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,cAAc,EACd,GAAG,EACH,OAAgB,EAChB,WAAW,EACX,MAAM,EACN,SAAkB,EAClB,QAAQ,EACR,QAAgB,EAChB,WAAsB,EACtB,aAA0B,EAC1B,OAAO,EACP,UAAoB,EACpB,WAAW,EACX,aAAa,EACb,YAAoB,EACpB,SAAc,GACf,EAAE,uBAAuB,2CAsFzB"}
+{"version":3,"file":"RightSidebarHeader.d.ts","sourceRoot":"","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAGpD,MAAM,WAAW,uBAAuB;IACtC,iFAAiF;IACjF,KAAK,EAAE,SAAS,CAAC;IACjB,2FAA2F;IAC3F,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,6DAA6D;IAC7D,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+LAA+L;IAC/L,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,cAAc,EACd,GAAG,EACH,OAAgB,EAChB,WAAW,EACX,MAAM,EACN,SAAkB,EAClB,QAAQ,EACR,QAAgB,EAChB,WAAsB,EACtB,aAA0B,EAC1B,QAAQ,EACR,WAAkC,EAClC,OAAO,EACP,UAAoB,EACpB,WAAW,EACX,aAAa,EACb,YAAoB,EACpB,SAAc,GACf,EAAE,uBAAuB,2CA8FzB"}