@payloadcms/ui 4.0.0-canary.37 → 4.0.0-canary.38

package/dist/elements/CardGrid/index.css

@@ -0,0 +1,20 @@
+@layer payload-default {
+  .card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: var(--spacer-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    padding: var(--spacer-4) var(--gutter-h);
+  }
+
+  .card-grid__item {
+    min-width: 0;
+  }
+
+  .card-grid__item--selected {
+    border-radius: var(--radius-large);
+    box-shadow: 0 0 0 var(--stroke-width-medium) var(--color-border-selected);
+  }
+}

package/dist/elements/CardGrid/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './index.css';
+export type CardGridProps<T> = {
+    readonly ariaLabel: string;
+    readonly className?: string;
+    readonly getItemClassName?: (item: T) => string | undefined;
+    readonly getKey: (item: T) => React.Key;
+    readonly items: readonly T[];
+    readonly renderItem: (item: T) => React.ReactNode;
+};
+/** A presentation-only responsive grid. Selection, navigation, and drag behavior belong to callers. */
+export declare const CardGrid: <T>({ ariaLabel, className, getItemClassName, getKey, items, renderItem, }: CardGridProps<T>) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/CardGrid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/CardGrid/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI;IAC7B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAA;IAC3D,QAAQ,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,GAAG,CAAA;IACvC,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,CAAA;IAC5B,QAAQ,CAAC,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;CAClD,CAAA;AAED,uGAAuG;AACvG,eAAO,MAAM,QAAQ,GAAI,CAAC,0EAOvB,aAAa,CAAC,CAAC,CAAC,sBAWlB,CAAA"}

package/dist/elements/CardGrid/index.js

@@ -0,0 +1,23 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import './index.css';
+const baseClass = 'card-grid';
+/** A presentation-only responsive grid. Selection, navigation, and drag behavior belong to callers. */
+export const CardGrid = ({
+  ariaLabel,
+  className,
+  getItemClassName,
+  getKey,
+  items,
+  renderItem
+}) => /*#__PURE__*/_jsx("ul", {
+  "aria-label": ariaLabel,
+  className: [baseClass, className].filter(Boolean).join(' '),
+  children: items.map(item => /*#__PURE__*/_jsx("li", {
+    className: [`${baseClass}__item`, getItemClassName?.(item)].filter(Boolean).join(' '),
+    children: renderItem(item)
+  }, getKey(item)))
+});
+//# sourceMappingURL=index.js.map

package/dist/elements/CardGrid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","CardGrid","ariaLabel","className","getItemClassName","getKey","items","renderItem","_jsx","filter","Boolean","join","map","item"],"sources":["../../../src/elements/CardGrid/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'card-grid'\n\nexport type CardGridProps<T> = {\n  readonly ariaLabel: string\n  readonly className?: string\n  readonly getItemClassName?: (item: T) => string | undefined\n  readonly getKey: (item: T) => React.Key\n  readonly items: readonly T[]\n  readonly renderItem: (item: T) => React.ReactNode\n}\n\n/** A presentation-only responsive grid. Selection, navigation, and drag behavior belong to callers. */\nexport const CardGrid = <T,>({\n  ariaLabel,\n  className,\n  getItemClassName,\n  getKey,\n  items,\n  renderItem,\n}: CardGridProps<T>) => (\n  <ul aria-label={ariaLabel} className={[baseClass, className].filter(Boolean).join(' ')}>\n    {items.map((item) => (\n      <li\n        className={[`${baseClass}__item`, getItemClassName?.(item)].filter(Boolean).join(' ')}\n        key={getKey(item)}\n      >\n        {renderItem(item)}\n      </li>\n    ))}\n  </ul>\n)\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAWlB;AACA,OAAO,MAAMC,QAAA,GAAWA,CAAK;EAC3BC,SAAS;EACTC,SAAS;EACTC,gBAAgB;EAChBC,MAAM;EACNC,KAAK;EACLC;AAAU,CACO,kBACjBC,IAAA,CAAC;EAAG,cAAYN,SAAA;EAAWC,SAAA,EAAW,CAACH,SAAA,EAAWG,SAAA,CAAU,CAACM,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;YAC/EL,KAAA,CAAMM,GAAG,CAAEC,IAAA,iBACVL,IAAA,CAAC;IACCL,SAAA,EAAW,CAAC,GAAGH,SAAA,QAAiB,EAAEI,gBAAA,GAAmBS,IAAA,EAAM,CAACJ,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;cAGhFJ,UAAA,CAAWM,IAAA;KAFPR,MAAA,CAAOQ,IAAA","ignoreList":[]}

package/dist/elements/Chip/index.css

@@ -6,7 +6,6 @@
     gap: 0;
     border-radius: var(--button-radius);
     border: var(--stroke-width-small) solid var(--color-border);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);

package/dist/elements/ClipboardAction/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ClipboardAction/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAA;AAEzD,OAAO,EAAE,KAAK,EAAE,EAAe,MAAM,OAAO,CAAA;AAG5C,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAS9D,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,EAAE,MAAM,0BAA0B,CAAA;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,SAAS,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,GAAG,iBAAiB,CAAA;AAErB;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,KAAK,CAyGrC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ClipboardAction/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAA;AAEzD,OAAO,EAAE,KAAK,EAAE,EAAe,MAAM,OAAO,CAAA;AAG5C,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAS9D,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,EAAE,MAAM,0BAA0B,CAAA;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,SAAS,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,GAAG,iBAAiB,CAAA;AAErB;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,KAAK,CA0GrC,CAAA"}

package/dist/elements/ClipboardAction/index.js

@@ -86,6 +86,7 @@ export const ClipboardAction = ({
         refresh();
       }
     },
+    popupType: "menu",
     render: ({
       close
     }) => /*#__PURE__*/_jsxs(PopupList.MenuItem, {

package/dist/elements/ClipboardAction/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useCallback","toast","ClipboardIcon","CopyIcon","MoreIcon","useTranslation","Popup","PopupList","clipboardCopy","clipboardPaste","useCanPasteClipboard","baseClass","ClipboardAction","allowCopy","allowPaste","className","copyClassName","disabled","isRow","onPaste","pasteClassName","path","rest","t","canPaste","refresh","type","schemaFields","fields","schemaBlocks","blocks","classes","filter","Boolean","join","handleCopy","clipboardResult","error","success","handlePaste","_jsx","button","buttonAriaLabel","buttonClassName","caret","horizontalAlign","onToggleOpen","active","render","close","_jsxs","MenuItem","Button","icon","size","onClick","verticalAlign"],"sources":["../../../src/elements/ClipboardAction/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormStateWithoutComponents } from 'payload'\n\nimport { type FC, useCallback } from 'react'\nimport { toast } from 'sonner'\n\nimport type { ClipboardCopyData, OnPasteFn } from './types.js'\n\nimport { ClipboardIcon } from '../../icons/Clipboard/index.js'\nimport { CopyIcon } from '../../icons/Copy/index.js'\nimport { MoreIcon } from '../../icons/More/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport { clipboardCopy, clipboardPaste } from './clipboardUtilities.js'\nimport { useCanPasteClipboard } from './useCanPasteClipboard.js'\nimport './index.css'\n\nconst baseClass = 'clipboard-action'\n\ntype Props = {\n  allowCopy?: boolean\n  allowPaste?: boolean\n  className?: string\n  copyClassName?: string\n  disabled?: boolean\n  getDataToCopy: () => FormStateWithoutComponents\n  isRow?: boolean\n  onPaste: OnPasteFn\n  pasteClassName?: string\n} & ClipboardCopyData\n\n/**\n * Menu actions for copying and pasting fields. Currently, this is only used in Arrays and Blocks.\n * @note This component doesn't use the Clipboard API, but localStorage. See rationale in #11513\n */\nexport const ClipboardAction: FC<Props> = ({\n  allowCopy,\n  allowPaste,\n  className,\n  copyClassName,\n  disabled,\n  isRow,\n  onPaste,\n  pasteClassName,\n  path,\n  ...rest\n}) => {\n  const { t } = useTranslation()\n\n  const { canPaste, refresh } = useCanPasteClipboard(\n    rest.type === 'array'\n      ? { path, schemaFields: rest.fields }\n      : { path, schemaBlocks: rest.blocks },\n  )\n\n  const classes = [`${baseClass}__popup`, className].filter(Boolean).join(' ')\n\n  const handleCopy = useCallback(() => {\n    const clipboardResult = clipboardCopy({\n      path,\n      t,\n      ...rest,\n    })\n\n    if (typeof clipboardResult === 'string') {\n      toast.error(clipboardResult)\n    } else {\n      toast.success(t('general:copied'))\n    }\n  }, [t, rest, path])\n\n  const handlePaste = useCallback(() => {\n    const clipboardResult = clipboardPaste(\n      rest.type === 'array'\n        ? {\n            onPaste,\n            path,\n            schemaFields: rest.fields,\n            t,\n          }\n        : {\n            onPaste,\n            path,\n            schemaBlocks: rest.blocks,\n            t,\n          },\n    )\n\n    if (typeof clipboardResult === 'string') {\n      toast.error(clipboardResult)\n    }\n  }, [onPaste, rest, path, t])\n\n  if (!allowPaste && !allowCopy) {\n    return null\n  }\n\n  return (\n    <Popup\n      button={<MoreIcon />}\n      buttonAriaLabel={t('general:moreOptions')}\n      buttonClassName={`${baseClass}__button`}\n      caret={false}\n      className={classes}\n      disabled={disabled}\n      horizontalAlign=\"right\"\n      onToggleOpen={(active) => {\n        if (active) {\n          refresh()\n        }\n      }}\n      render={({ close }) => (\n        <PopupList.MenuItem>\n          <PopupList.Button\n            className={copyClassName}\n            disabled={!allowCopy}\n            icon={<CopyIcon size={24} />}\n            onClick={() => {\n              void handleCopy()\n              close()\n            }}\n          >\n            {isRow ? t('general:copyRow') : t('general:copyField')}\n          </PopupList.Button>\n          <PopupList.Button\n            className={pasteClassName}\n            disabled={!allowPaste || !canPaste}\n            icon={<ClipboardIcon />}\n            onClick={() => {\n              void handlePaste()\n              close()\n            }}\n          >\n            {isRow ? t('general:pasteRow') : t('general:pasteField')}\n          </PopupList.Button>\n        </PopupList.MenuItem>\n      )}\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useCallback","toast","ClipboardIcon","CopyIcon","MoreIcon","useTranslation","Popup","PopupList","clipboardCopy","clipboardPaste","useCanPasteClipboard","baseClass","ClipboardAction","allowCopy","allowPaste","className","copyClassName","disabled","isRow","onPaste","pasteClassName","path","rest","t","canPaste","refresh","type","schemaFields","fields","schemaBlocks","blocks","classes","filter","Boolean","join","handleCopy","clipboardResult","error","success","handlePaste","_jsx","button","buttonAriaLabel","buttonClassName","caret","horizontalAlign","onToggleOpen","active","popupType","render","close","_jsxs","MenuItem","Button","icon","size","onClick","verticalAlign"],"sources":["../../../src/elements/ClipboardAction/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormStateWithoutComponents } from 'payload'\n\nimport { type FC, useCallback } from 'react'\nimport { toast } from 'sonner'\n\nimport type { ClipboardCopyData, OnPasteFn } from './types.js'\n\nimport { ClipboardIcon } from '../../icons/Clipboard/index.js'\nimport { CopyIcon } from '../../icons/Copy/index.js'\nimport { MoreIcon } from '../../icons/More/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport { clipboardCopy, clipboardPaste } from './clipboardUtilities.js'\nimport { useCanPasteClipboard } from './useCanPasteClipboard.js'\nimport './index.css'\n\nconst baseClass = 'clipboard-action'\n\ntype Props = {\n  allowCopy?: boolean\n  allowPaste?: boolean\n  className?: string\n  copyClassName?: string\n  disabled?: boolean\n  getDataToCopy: () => FormStateWithoutComponents\n  isRow?: boolean\n  onPaste: OnPasteFn\n  pasteClassName?: string\n} & ClipboardCopyData\n\n/**\n * Menu actions for copying and pasting fields. Currently, this is only used in Arrays and Blocks.\n * @note This component doesn't use the Clipboard API, but localStorage. See rationale in #11513\n */\nexport const ClipboardAction: FC<Props> = ({\n  allowCopy,\n  allowPaste,\n  className,\n  copyClassName,\n  disabled,\n  isRow,\n  onPaste,\n  pasteClassName,\n  path,\n  ...rest\n}) => {\n  const { t } = useTranslation()\n\n  const { canPaste, refresh } = useCanPasteClipboard(\n    rest.type === 'array'\n      ? { path, schemaFields: rest.fields }\n      : { path, schemaBlocks: rest.blocks },\n  )\n\n  const classes = [`${baseClass}__popup`, className].filter(Boolean).join(' ')\n\n  const handleCopy = useCallback(() => {\n    const clipboardResult = clipboardCopy({\n      path,\n      t,\n      ...rest,\n    })\n\n    if (typeof clipboardResult === 'string') {\n      toast.error(clipboardResult)\n    } else {\n      toast.success(t('general:copied'))\n    }\n  }, [t, rest, path])\n\n  const handlePaste = useCallback(() => {\n    const clipboardResult = clipboardPaste(\n      rest.type === 'array'\n        ? {\n            onPaste,\n            path,\n            schemaFields: rest.fields,\n            t,\n          }\n        : {\n            onPaste,\n            path,\n            schemaBlocks: rest.blocks,\n            t,\n          },\n    )\n\n    if (typeof clipboardResult === 'string') {\n      toast.error(clipboardResult)\n    }\n  }, [onPaste, rest, path, t])\n\n  if (!allowPaste && !allowCopy) {\n    return null\n  }\n\n  return (\n    <Popup\n      button={<MoreIcon />}\n      buttonAriaLabel={t('general:moreOptions')}\n      buttonClassName={`${baseClass}__button`}\n      caret={false}\n      className={classes}\n      disabled={disabled}\n      horizontalAlign=\"right\"\n      onToggleOpen={(active) => {\n        if (active) {\n          refresh()\n        }\n      }}\n      popupType=\"menu\"\n      render={({ close }) => (\n        <PopupList.MenuItem>\n          <PopupList.Button\n            className={copyClassName}\n            disabled={!allowCopy}\n            icon={<CopyIcon size={24} />}\n            onClick={() => {\n              void handleCopy()\n              close()\n            }}\n          >\n            {isRow ? t('general:copyRow') : t('general:copyField')}\n          </PopupList.Button>\n          <PopupList.Button\n            className={pasteClassName}\n            disabled={!allowPaste || !canPaste}\n            icon={<ClipboardIcon />}\n            onClick={() => {\n              void handlePaste()\n              close()\n            }}\n          >\n            {isRow ? t('general:pasteRow') : t('general:pasteField')}\n          </PopupList.Button>\n        </PopupList.MenuItem>\n      )}\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/CollapseAllToggle/index.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 export type CollapseAllToggleProps = {
+    controls?: string;
+    isExpanded?: boolean;
+    label?: string;
     onClick: (collapsed: boolean) => void;
 };
 export declare const CollapseAllToggle: React.FC<CollapseAllToggleProps>;

package/dist/elements/CollapseAllToggle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/CollapseAllToggle/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,MAAM,MAAM,sBAAsB,GAAG;IACnC,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;CACtC,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAiB9D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/CollapseAllToggle/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;CACtC,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAkC9D,CAAA"}

package/dist/elements/CollapseAllToggle/index.js

@@ -6,53 +6,67 @@ import React, { Fragment } from 'react';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Button } from '../Button/index.js';
 export const CollapseAllToggle = t0 => {
-  const $ = _c(8);
+  const $ = _c(12);
   const {
+    controls,
+    isExpanded,
+    label,
     onClick
   } = t0;
   const {
     t
   } = useTranslation();
-  let t1;
+  const t1 = label ? `${t("fields:collapseAll")}: ${label}` : undefined;
+  let t2;
   if ($[0] !== onClick) {
-    t1 = () => onClick(true);
+    t2 = () => onClick(true);
     $[0] = onClick;
-    $[1] = t1;
+    $[1] = t2;
   } else {
-    t1 = $[1];
+    t2 = $[1];
   }
-  let t2;
-  if ($[2] !== onClick || $[3] !== t || $[4] !== t1) {
-    let t3;
-    if ($[6] !== onClick) {
-      t3 = () => onClick(false);
-      $[6] = onClick;
-      $[7] = t3;
+  let t3;
+  if ($[2] !== controls || $[3] !== isExpanded || $[4] !== label || $[5] !== onClick || $[6] !== t || $[7] !== t1 || $[8] !== t2) {
+    let t4;
+    if ($[10] !== onClick) {
+      t4 = () => onClick(false);
+      $[10] = onClick;
+      $[11] = t4;
     } else {
-      t3 = $[7];
+      t4 = $[11];
     }
-    t2 = _jsxs(Fragment, {
+    t3 = _jsxs(Fragment, {
       children: [_jsx("li", {
         children: _jsx(Button, {
+          "aria-controls": controls,
+          "aria-expanded": isExpanded,
+          "aria-label": t1,
           buttonStyle: "ghost",
-          onClick: t1,
+          onClick: t2,
           children: t("fields:collapseAll")
         })
       }), _jsx("li", {
         children: _jsx(Button, {
+          "aria-controls": controls,
+          "aria-expanded": isExpanded,
+          "aria-label": label ? `${t("fields:showAll")}: ${label}` : undefined,
           buttonStyle: "ghost",
-          onClick: t3,
+          onClick: t4,
           children: t("fields:showAll")
         })
       })]
     });
-    $[2] = onClick;
-    $[3] = t;
-    $[4] = t1;
-    $[5] = t2;
+    $[2] = controls;
+    $[3] = isExpanded;
+    $[4] = label;
+    $[5] = onClick;
+    $[6] = t;
+    $[7] = t1;
+    $[8] = t2;
+    $[9] = t3;
   } else {
-    t2 = $[5];
+    t3 = $[9];
   }
-  return t2;
+  return t3;
 };
 //# sourceMappingURL=index.js.map

package/dist/elements/CollapseAllToggle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","Fragment","useTranslation","Button","CollapseAllToggle","t0","$","onClick","t","t1","t2","t3","_jsxs","children","_jsx","buttonStyle"],"sources":["../../../src/elements/CollapseAllToggle/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\n\nexport type CollapseAllToggleProps = {\n  onClick: (collapsed: boolean) => void\n}\n\nexport const CollapseAllToggle: React.FC<CollapseAllToggleProps> = ({ onClick }) => {\n  const { t } = useTranslation()\n\n  return (\n    <Fragment>\n      <li>\n        <Button buttonStyle=\"ghost\" onClick={() => onClick(true)}>\n          {t('fields:collapseAll')}\n        </Button>\n      </li>\n      <li>\n        <Button buttonStyle=\"ghost\" onClick={() => onClick(false)}>\n          {t('fields:showAll')}\n        </Button>\n      </li>\n    </Fragment>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AAMvB,OAAO,MAAMC,iBAAA,GAAsDC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ;EAAA,IAAAF,EAAW;EAC7E;IAAAG;EAAA,IAAcN,cAAA;EAAA,IAAAO,EAAA;EAAA,IAAAH,CAAA,QAAAC,OAAA;IAK6BE,EAAA,GAAAA,CAAA,KAAMF,OAAA,KAAQ;IAAAD,CAAA,MAAAC,OAAA;IAAAD,CAAA,MAAAG,EAAA;EAAA;IAAAA,EAAA,GAAAH,CAAA;EAAA;EAAA,IAAAI,EAAA;EAAA,IAAAJ,CAAA,QAAAC,OAAA,IAAAD,CAAA,QAAAE,CAAA,IAAAF,CAAA,QAAAG,EAAA;IAAA,IAAAE,EAAA;IAAA,IAAAL,CAAA,QAAAC,OAAA;MAKdI,EAAA,GAAAA,CAAA,KAAMJ,OAAA,MAAQ;MAAAD,CAAA,MAAAC,OAAA;MAAAD,CAAA,MAAAK,EAAA;IAAA;MAAAA,EAAA,GAAAL,CAAA;IAAA;IAPvDI,EAAA,GAAAE,KAAA,CAAAX,QAAA;MAAAY,QAAA,GACEC,IAAA,CAAC;QAAAD,QAAA,EACCC,IAAA,CAAAX,MAAA;UAAAY,WAAA,EAAoB;UAAAR,OAAA,EAAiBE,EAAc;UAAAI,QAAA,EAChDL,CAAA,CAAE;QAAA,C;UAGPM,IAAA,CAAC;QAAAD,QAAA,EACCC,IAAA,CAAAX,MAAA;UAAAY,WAAA,EAAoB;UAAAR,OAAA,EAAiBI,EAAc;UAAAE,QAAA,EAChDL,CAAA,CAAE;QAAA,C;;;;;;;;;;SARTE,E;CAaJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","Fragment","useTranslation","Button","CollapseAllToggle","t0","$","controls","isExpanded","label","onClick","t","t1","undefined","t2","t3","t4","_jsxs","children","_jsx","buttonStyle"],"sources":["../../../src/elements/CollapseAllToggle/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\n\nexport type CollapseAllToggleProps = {\n  controls?: string\n  isExpanded?: boolean\n  label?: string\n  onClick: (collapsed: boolean) => void\n}\n\nexport const CollapseAllToggle: React.FC<CollapseAllToggleProps> = ({\n  controls,\n  isExpanded,\n  label,\n  onClick,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <Fragment>\n      <li>\n        <Button\n          aria-controls={controls}\n          aria-expanded={isExpanded}\n          aria-label={label ? `${t('fields:collapseAll')}: ${label}` : undefined}\n          buttonStyle=\"ghost\"\n          onClick={() => onClick(true)}\n        >\n          {t('fields:collapseAll')}\n        </Button>\n      </li>\n      <li>\n        <Button\n          aria-controls={controls}\n          aria-expanded={isExpanded}\n          aria-label={label ? `${t('fields:showAll')}: ${label}` : undefined}\n          buttonStyle=\"ghost\"\n          onClick={() => onClick(false)}\n        >\n          {t('fields:showAll')}\n        </Button>\n      </li>\n    </Fragment>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AASvB,OAAO,MAAMC,iBAAA,GAAsDC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ,QAAA;IAAAC,UAAA;IAAAC,KAAA;IAAAC;EAAA,IAAAL,EAKnE;EACC;IAAAM;EAAA,IAAcT,cAAA;EAQM,MAAAU,EAAA,GAAAH,KAAA,GAAQ,GAAGE,CAAA,CAAE,0BAA0BF,KAAA,EAAO,GAAAI,SAAG;EAAA,IAAAC,EAAA;EAAA,IAAAR,CAAA,QAAAI,OAAA;IAEpDI,EAAA,GAAAA,CAAA,KAAMJ,OAAA,KAAQ;IAAAJ,CAAA,MAAAI,OAAA;IAAAJ,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAAA,IAAAS,EAAA;EAAA,IAAAT,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAE,UAAA,IAAAF,CAAA,QAAAG,KAAA,IAAAH,CAAA,QAAAI,OAAA,IAAAJ,CAAA,QAAAK,CAAA,IAAAL,CAAA,QAAAM,EAAA,IAAAN,CAAA,QAAAQ,EAAA;IAAA,IAAAE,EAAA;IAAA,IAAAV,CAAA,SAAAI,OAAA;MAWdM,EAAA,GAAAA,CAAA,KAAMN,OAAA,MAAQ;MAAAJ,CAAA,OAAAI,OAAA;MAAAJ,CAAA,OAAAU,EAAA;IAAA;MAAAA,EAAA,GAAAV,CAAA;IAAA;IAlB7BS,EAAA,GAAAE,KAAA,CAAAhB,QAAA;MAAAiB,QAAA,GACEC,IAAA,CAAC;QAAAD,QAAA,EACCC,IAAA,CAAAhB,MAAA;UAAA,iBACiBI,QAAA;UAAA,iBACAC,UAAA;UAAA,cACHI,EAAiD;UAAAQ,WAAA,EACjD;UAAAV,OAAA,EACHI,EAAc;UAAAI,QAAA,EAEtBP,CAAA,CAAE;QAAA,C;UAGPQ,IAAA,CAAC;QAAAD,QAAA,EACCC,IAAA,CAAAhB,MAAA;UAAA,iBACiBI,QAAA;UAAA,iBACAC,UAAA;UAAA,cACHC,KAAA,GAAQ,GAAGE,CAAA,CAAE,sBAAsBF,KAAA,EAAO,GAAAI,SAAG;UAAAO,WAAA,EAC7C;UAAAV,OAAA,EACHM,EAAc;UAAAE,QAAA,EAEtBP,CAAA,CAAE;QAAA,C;;;;;;;;;;;;;;SApBTI,E;CAyBJ","ignoreList":[]}

package/dist/elements/Collapsible/index.css

@@ -78,7 +78,10 @@
 
   .collapsible .row-label {
     color: var(--color-text);
-    letter-spacing: var(--text-letter-spacing);
+    font-size: var(--text-body-medium-bold-font-size);
+    font-weight: var(--text-body-medium-bold-font-weight);
+    line-height: var(--text-body-medium-bold-line-height);
+    letter-spacing: var(--text-body-medium-bold-letter-spacing);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

package/dist/elements/Collapsible/index.d.ts

@@ -22,6 +22,8 @@ export type CollapsibleProps = {
      */
     disableToggleIndicator?: boolean;
     dragHandleProps?: DragHandleProps;
+    /** Opt into a region named by the rendered header for significant sections, not individual rows. */
+    hasContentRegion?: boolean;
     header?: React.ReactNode;
     initCollapsed?: boolean;
     isCollapsed?: boolean;

package/dist/elements/Collapsible/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Collapsible/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAA;AAK1F,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAInE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,CAAA;AAE9C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IACtC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACxD,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2GlD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Collapsible/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAA;AAK1F,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAInE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,CAAA;AAE9C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IACtC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,oGAAoG;IACpG,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACxD,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8HlD,CAAA"}

package/dist/elements/Collapsible/index.js

@@ -2,7 +2,7 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
+import React, { useId, useState } from 'react';
 import { AlignJustifiedIcon } from '../../icons/AlignJustified/index.js';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
@@ -12,7 +12,7 @@ import { CollapsibleProvider, useCollapsible } from './provider.js';
 const baseClass = 'collapsible';
 export { CollapsibleProvider, useCollapsible };
 export const Collapsible = t0 => {
-  const $ = _c(25);
+  const $ = _c(29);
   const {
     actions,
     AfterCollapsible,
@@ -22,6 +22,7 @@ export const Collapsible = t0 => {
     disableHeaderToggle: t2,
     disableToggleIndicator: t3,
     dragHandleProps,
+    hasContentRegion: t4,
     header,
     initCollapsed,
     isCollapsed: collapsedFromProps,
@@ -30,6 +31,11 @@ export const Collapsible = t0 => {
   const collapsibleStyle = t1 === undefined ? "default" : t1;
   const disableHeaderToggle = t2 === undefined ? false : t2;
   const disableToggleIndicator = t3 === undefined ? false : t3;
+  const hasContentRegion = t4 === undefined ? false : t4;
+  const id = useId();
+  const headerID = `${id}-header`;
+  const toggleLabelID = `${id}-toggle-label`;
+  const contentID = `${id}-content`;
   const [collapsedLocal, setCollapsedLocal] = useState(Boolean(initCollapsed));
   const [hoveringToggle, setHoveringToggle] = useState(false);
   const {
@@ -39,9 +45,9 @@ export const Collapsible = t0 => {
     t
   } = useTranslation();
   const isCollapsed = typeof collapsedFromProps === "boolean" ? collapsedFromProps : collapsedLocal;
-  let t4;
+  let t5;
   if ($[0] !== isCollapsed || $[1] !== onToggle) {
-    t4 = () => {
+    t5 = () => {
       if (typeof onToggle === "function") {
         onToggle(!isCollapsed);
       }
@@ -49,58 +55,62 @@ export const Collapsible = t0 => {
     };
     $[0] = isCollapsed;
     $[1] = onToggle;
-    $[2] = t4;
+    $[2] = t5;
   } else {
-    t4 = $[2];
+    t5 = $[2];
   }
-  const toggleCollapsible = t4;
-  const t5 = dragHandleProps && `${baseClass}--has-drag-handle`;
-  const t6 = isCollapsed && `${baseClass}--collapsed`;
-  const t7 = isWithinCollapsible && `${baseClass}--nested`;
-  const t8 = hoveringToggle && !disableHeaderToggle && `${baseClass}--hovered`;
-  const t9 = `${baseClass}--style-${collapsibleStyle}`;
-  let t10;
-  if ($[3] !== className || $[4] !== t5 || $[5] !== t6 || $[6] !== t7 || $[7] !== t8 || $[8] !== t9) {
-    t10 = [baseClass, className, t5, t6, t7, t8, t9].filter(Boolean);
+  const toggleCollapsible = t5;
+  const t6 = dragHandleProps && `${baseClass}--has-drag-handle`;
+  const t7 = isCollapsed && `${baseClass}--collapsed`;
+  const t8 = isWithinCollapsible && `${baseClass}--nested`;
+  const t9 = hoveringToggle && !disableHeaderToggle && `${baseClass}--hovered`;
+  const t10 = `${baseClass}--style-${collapsibleStyle}`;
+  let t11;
+  if ($[3] !== className || $[4] !== t10 || $[5] !== t6 || $[6] !== t7 || $[7] !== t8 || $[8] !== t9) {
+    t11 = [baseClass, className, t6, t7, t8, t9, t10].filter(Boolean);
     $[3] = className;
-    $[4] = t5;
+    $[4] = t10;
     $[5] = t6;
     $[6] = t7;
     $[7] = t8;
     $[8] = t9;
-    $[9] = t10;
+    $[9] = t11;
   } else {
-    t10 = $[9];
+    t11 = $[9];
   }
-  const t11 = t10.join(" ");
-  const t12 = `${baseClass}__toggle-wrap${disableHeaderToggle ? " toggle-disabled" : ""}`;
-  let t13;
+  const t12 = t11.join(" ");
+  const t13 = `${baseClass}__toggle-wrap${disableHeaderToggle ? " toggle-disabled" : ""}`;
   let t14;
+  let t15;
   if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-    t13 = () => setHoveringToggle(true);
-    t14 = () => setHoveringToggle(false);
-    $[10] = t13;
-    $[11] = t14;
+    t14 = () => setHoveringToggle(true);
+    t15 = () => setHoveringToggle(false);
+    $[10] = t14;
+    $[11] = t15;
   } else {
-    t13 = $[10];
-    t14 = $[11];
+    t14 = $[10];
+    t15 = $[11];
   }
-  let t15;
-  if ($[12] !== AfterCollapsible || $[13] !== actions || $[14] !== children || $[15] !== disableHeaderToggle || $[16] !== disableToggleIndicator || $[17] !== dragHandleProps || $[18] !== header || $[19] !== isCollapsed || $[20] !== t || $[21] !== t11 || $[22] !== t12 || $[23] !== toggleCollapsible) {
-    t15 = _jsx("div", {
-      className: t11,
+  let t16;
+  if ($[12] !== AfterCollapsible || $[13] !== actions || $[14] !== children || $[15] !== contentID || $[16] !== disableHeaderToggle || $[17] !== disableToggleIndicator || $[18] !== dragHandleProps || $[19] !== hasContentRegion || $[20] !== header || $[21] !== headerID || $[22] !== isCollapsed || $[23] !== t || $[24] !== t12 || $[25] !== t13 || $[26] !== toggleCollapsible || $[27] !== toggleLabelID) {
+    t16 = _jsx("div", {
+      className: t12,
       children: _jsxs(CollapsibleProvider, {
         isCollapsed,
         toggle: toggleCollapsible,
         children: [_jsxs("div", {
-          className: t12,
-          onMouseEnter: t13,
-          onMouseLeave: t14,
+          className: t13,
+          onMouseEnter: t14,
+          onMouseLeave: t15,
           children: [!disableHeaderToggle && _jsx("button", {
+            "aria-controls": contentID,
+            "aria-expanded": !isCollapsed,
+            "aria-labelledby": header ? `${headerID} ${toggleLabelID}` : undefined,
             className: [`${baseClass}__toggle`, `${baseClass}__toggle--${isCollapsed ? "collapsed" : "open"}`].filter(Boolean).join(" "),
             onClick: toggleCollapsible,
             type: "button",
             children: _jsx("span", {
+              id: toggleLabelID,
               children: t("fields:toggleBlock")
             })
           }), dragHandleProps && _jsx("div", {
@@ -111,6 +121,7 @@ export const Collapsible = t0 => {
             children: _jsx(AlignJustifiedIcon, {})
           }), header ? _jsx("div", {
             className: [`${baseClass}__header-wrap`, dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`].filter(Boolean).join(" "),
+            id: headerID,
             children: header
           }) : null, _jsxs("div", {
             className: `${baseClass}__actions-wrap`,
@@ -118,6 +129,9 @@ export const Collapsible = t0 => {
               className: `${baseClass}__actions`,
               children: actions
             }) : null, !disableToggleIndicator && _jsx("button", {
+              "aria-controls": contentID,
+              "aria-describedby": header ? headerID : undefined,
+              "aria-expanded": !isCollapsed,
               "aria-label": t(isCollapsed ? "general:expand" : "general:collapse"),
               className: `${baseClass}__indicator`,
               onClick: toggleCollapsible,
@@ -131,7 +145,10 @@ export const Collapsible = t0 => {
         }), _jsx(AnimateHeight, {
           height: isCollapsed ? 0 : "auto",
           children: _jsx("div", {
+            "aria-labelledby": hasContentRegion && header ? headerID : undefined,
             className: `${baseClass}__content`,
+            id: contentID,
+            role: hasContentRegion && header ? "region" : undefined,
             children
           })
         }), AfterCollapsible]
@@ -140,19 +157,23 @@ export const Collapsible = t0 => {
     $[12] = AfterCollapsible;
     $[13] = actions;
     $[14] = children;
-    $[15] = disableHeaderToggle;
-    $[16] = disableToggleIndicator;
-    $[17] = dragHandleProps;
-    $[18] = header;
-    $[19] = isCollapsed;
-    $[20] = t;
-    $[21] = t11;
-    $[22] = t12;
-    $[23] = toggleCollapsible;
-    $[24] = t15;
+    $[15] = contentID;
+    $[16] = disableHeaderToggle;
+    $[17] = disableToggleIndicator;
+    $[18] = dragHandleProps;
+    $[19] = hasContentRegion;
+    $[20] = header;
+    $[21] = headerID;
+    $[22] = isCollapsed;
+    $[23] = t;
+    $[24] = t12;
+    $[25] = t13;
+    $[26] = toggleCollapsible;
+    $[27] = toggleLabelID;
+    $[28] = t16;
   } else {
-    t15 = $[24];
+    t16 = $[28];
   }
-  return t15;
+  return t16;
 };
 //# sourceMappingURL=index.js.map

package/dist/elements/Collapsible/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useState","AlignJustifiedIcon","ChevronIcon","useTranslation","AnimateHeight","CollapsibleProvider","useCollapsible","baseClass","Collapsible","t0","$","actions","AfterCollapsible","children","className","collapsibleStyle","t1","disableHeaderToggle","t2","disableToggleIndicator","t3","dragHandleProps","header","initCollapsed","isCollapsed","collapsedFromProps","onToggle","undefined","collapsedLocal","setCollapsedLocal","Boolean","hoveringToggle","setHoveringToggle","isWithinCollapsible","t","t4","toggleCollapsible","t5","t6","t7","t8","t9","t10","filter","t11","join","t12","t13","t14","Symbol","for","t15","_jsx","_jsxs","toggle","onMouseEnter","onMouseLeave","onClick","type","attributes","listeners","tabIndex","direction","height"],"sources":["../../../src/elements/Collapsible/index.tsx"],"sourcesContent":["'use client'\nimport React, { useState } from 'react'\n\nimport type { DragHandleProps } from '../DraggableSortable/DraggableSortableItem/types.js'\n\nimport { AlignJustifiedIcon } from '../../icons/AlignJustified/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\nimport { AnimateHeight } from '../AnimateHeight/index.js'\nimport { CollapsibleProvider, useCollapsible } from './provider.js'\n\nconst baseClass = 'collapsible'\n\nexport { CollapsibleProvider, useCollapsible }\n\nexport type CollapsibleProps = {\n  actions?: React.ReactNode\n  /**\n   * Components that will be rendered within the collapsible provider but after the wrapper.\n   */\n  AfterCollapsible?: React.ReactNode\n  children: React.ReactNode\n  className?: string\n  collapsibleStyle?: 'default' | 'error'\n  /**\n   * If set to true, clicking on the collapsible header will not toggle the collapsible state.\n   * This is useful if the collapsible state is controlled externally (e.g. from a parent component or custom button).\n   */\n  disableHeaderToggle?: boolean\n  /**\n   * If set to true, the toggle indicator (chevron) on the right side of the header will be hidden.\n   */\n  disableToggleIndicator?: boolean\n  dragHandleProps?: DragHandleProps\n  header?: React.ReactNode\n  initCollapsed?: boolean\n  isCollapsed?: boolean\n  onToggle?: (collapsed: boolean) => Promise<void> | void\n}\n\nexport const Collapsible: React.FC<CollapsibleProps> = ({\n  actions,\n  AfterCollapsible,\n  children,\n  className,\n  collapsibleStyle = 'default',\n  disableHeaderToggle = false,\n  disableToggleIndicator = false,\n  dragHandleProps,\n  header,\n  initCollapsed,\n  isCollapsed: collapsedFromProps,\n  onToggle,\n}) => {\n  const [collapsedLocal, setCollapsedLocal] = useState(Boolean(initCollapsed))\n  const [hoveringToggle, setHoveringToggle] = useState(false)\n  const { isWithinCollapsible } = useCollapsible()\n  const { t } = useTranslation()\n\n  const isCollapsed = typeof collapsedFromProps === 'boolean' ? collapsedFromProps : collapsedLocal\n\n  const toggleCollapsible = React.useCallback(() => {\n    if (typeof onToggle === 'function') {\n      void onToggle(!isCollapsed)\n    }\n    setCollapsedLocal(!isCollapsed)\n  }, [onToggle, isCollapsed])\n\n  return (\n    <div\n      className={[\n        baseClass,\n        className,\n        dragHandleProps && `${baseClass}--has-drag-handle`,\n        isCollapsed && `${baseClass}--collapsed`,\n        isWithinCollapsible && `${baseClass}--nested`,\n        hoveringToggle && !disableHeaderToggle && `${baseClass}--hovered`,\n        `${baseClass}--style-${collapsibleStyle}`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <CollapsibleProvider isCollapsed={isCollapsed} toggle={toggleCollapsible}>\n        <div\n          className={`${baseClass}__toggle-wrap${disableHeaderToggle ? ' toggle-disabled' : ''}`}\n          onMouseEnter={() => setHoveringToggle(true)}\n          onMouseLeave={() => setHoveringToggle(false)}\n        >\n          {!disableHeaderToggle && (\n            <button\n              className={[\n                `${baseClass}__toggle`,\n                `${baseClass}__toggle--${isCollapsed ? 'collapsed' : 'open'}`,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              onClick={toggleCollapsible}\n              type=\"button\"\n            >\n              <span>{t('fields:toggleBlock')}</span>\n            </button>\n          )}\n\n          {dragHandleProps && (\n            <div\n              className={`${baseClass}__drag`}\n              {...dragHandleProps.attributes}\n              {...dragHandleProps.listeners}\n              aria-label={t('general:dragToReorder')}\n            >\n              <AlignJustifiedIcon />\n            </div>\n          )}\n          {header ? (\n            <div\n              className={[\n                `${baseClass}__header-wrap`,\n                dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              {header}\n            </div>\n          ) : null}\n          <div className={`${baseClass}__actions-wrap`}>\n            {actions ? <div className={`${baseClass}__actions`}>{actions}</div> : null}\n            {!disableToggleIndicator && (\n              <button\n                aria-label={t(isCollapsed ? 'general:expand' : 'general:collapse')}\n                className={`${baseClass}__indicator`}\n                onClick={toggleCollapsible}\n                tabIndex={-1}\n                type=\"button\"\n              >\n                <ChevronIcon direction={!isCollapsed ? 'up' : undefined} />\n              </button>\n            )}\n          </div>\n        </div>\n        <AnimateHeight height={isCollapsed ? 0 : 'auto'}>\n          <div className={`${baseClass}__content`}>{children}</div>\n        </AnimateHeight>\n        {AfterCollapsible}\n      </CollapsibleProvider>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useId","useState","AlignJustifiedIcon","ChevronIcon","useTranslation","AnimateHeight","CollapsibleProvider","useCollapsible","baseClass","Collapsible","t0","$","actions","AfterCollapsible","children","className","collapsibleStyle","t1","disableHeaderToggle","t2","disableToggleIndicator","t3","dragHandleProps","hasContentRegion","t4","header","initCollapsed","isCollapsed","collapsedFromProps","onToggle","undefined","id","headerID","toggleLabelID","contentID","collapsedLocal","setCollapsedLocal","Boolean","hoveringToggle","setHoveringToggle","isWithinCollapsible","t","t5","toggleCollapsible","t6","t7","t8","t9","t10","t11","filter","t12","join","t13","t14","t15","Symbol","for","t16","_jsx","_jsxs","toggle","onMouseEnter","onMouseLeave","onClick","type","attributes","listeners","tabIndex","direction","height","role"],"sources":["../../../src/elements/Collapsible/index.tsx"],"sourcesContent":["'use client'\nimport React, { useId, useState } from 'react'\n\nimport type { DragHandleProps } from '../DraggableSortable/DraggableSortableItem/types.js'\n\nimport { AlignJustifiedIcon } from '../../icons/AlignJustified/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\nimport { AnimateHeight } from '../AnimateHeight/index.js'\nimport { CollapsibleProvider, useCollapsible } from './provider.js'\n\nconst baseClass = 'collapsible'\n\nexport { CollapsibleProvider, useCollapsible }\n\nexport type CollapsibleProps = {\n  actions?: React.ReactNode\n  /**\n   * Components that will be rendered within the collapsible provider but after the wrapper.\n   */\n  AfterCollapsible?: React.ReactNode\n  children: React.ReactNode\n  className?: string\n  collapsibleStyle?: 'default' | 'error'\n  /**\n   * If set to true, clicking on the collapsible header will not toggle the collapsible state.\n   * This is useful if the collapsible state is controlled externally (e.g. from a parent component or custom button).\n   */\n  disableHeaderToggle?: boolean\n  /**\n   * If set to true, the toggle indicator (chevron) on the right side of the header will be hidden.\n   */\n  disableToggleIndicator?: boolean\n  dragHandleProps?: DragHandleProps\n  /** Opt into a region named by the rendered header for significant sections, not individual rows. */\n  hasContentRegion?: boolean\n  header?: React.ReactNode\n  initCollapsed?: boolean\n  isCollapsed?: boolean\n  onToggle?: (collapsed: boolean) => Promise<void> | void\n}\n\nexport const Collapsible: React.FC<CollapsibleProps> = ({\n  actions,\n  AfterCollapsible,\n  children,\n  className,\n  collapsibleStyle = 'default',\n  disableHeaderToggle = false,\n  disableToggleIndicator = false,\n  dragHandleProps,\n  hasContentRegion = false,\n  header,\n  initCollapsed,\n  isCollapsed: collapsedFromProps,\n  onToggle,\n}) => {\n  const id = useId()\n  const headerID = `${id}-header`\n  const toggleLabelID = `${id}-toggle-label`\n  const contentID = `${id}-content`\n  const [collapsedLocal, setCollapsedLocal] = useState(Boolean(initCollapsed))\n  const [hoveringToggle, setHoveringToggle] = useState(false)\n  const { isWithinCollapsible } = useCollapsible()\n  const { t } = useTranslation()\n\n  const isCollapsed = typeof collapsedFromProps === 'boolean' ? collapsedFromProps : collapsedLocal\n\n  const toggleCollapsible = React.useCallback(() => {\n    if (typeof onToggle === 'function') {\n      void onToggle(!isCollapsed)\n    }\n    setCollapsedLocal(!isCollapsed)\n  }, [onToggle, isCollapsed])\n\n  return (\n    <div\n      className={[\n        baseClass,\n        className,\n        dragHandleProps && `${baseClass}--has-drag-handle`,\n        isCollapsed && `${baseClass}--collapsed`,\n        isWithinCollapsible && `${baseClass}--nested`,\n        hoveringToggle && !disableHeaderToggle && `${baseClass}--hovered`,\n        `${baseClass}--style-${collapsibleStyle}`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <CollapsibleProvider isCollapsed={isCollapsed} toggle={toggleCollapsible}>\n        <div\n          className={`${baseClass}__toggle-wrap${disableHeaderToggle ? ' toggle-disabled' : ''}`}\n          onMouseEnter={() => setHoveringToggle(true)}\n          onMouseLeave={() => setHoveringToggle(false)}\n        >\n          {!disableHeaderToggle && (\n            <button\n              aria-controls={contentID}\n              aria-expanded={!isCollapsed}\n              aria-labelledby={header ? `${headerID} ${toggleLabelID}` : undefined}\n              className={[\n                `${baseClass}__toggle`,\n                `${baseClass}__toggle--${isCollapsed ? 'collapsed' : 'open'}`,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              onClick={toggleCollapsible}\n              type=\"button\"\n            >\n              <span id={toggleLabelID}>{t('fields:toggleBlock')}</span>\n            </button>\n          )}\n\n          {dragHandleProps && (\n            <div\n              className={`${baseClass}__drag`}\n              {...dragHandleProps.attributes}\n              {...dragHandleProps.listeners}\n              aria-label={t('general:dragToReorder')}\n            >\n              <AlignJustifiedIcon />\n            </div>\n          )}\n          {header ? (\n            <div\n              className={[\n                `${baseClass}__header-wrap`,\n                dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              id={headerID}\n            >\n              {header}\n            </div>\n          ) : null}\n          <div className={`${baseClass}__actions-wrap`}>\n            {actions ? <div className={`${baseClass}__actions`}>{actions}</div> : null}\n            {!disableToggleIndicator && (\n              <button\n                aria-controls={contentID}\n                aria-describedby={header ? headerID : undefined}\n                aria-expanded={!isCollapsed}\n                aria-label={t(isCollapsed ? 'general:expand' : 'general:collapse')}\n                className={`${baseClass}__indicator`}\n                onClick={toggleCollapsible}\n                tabIndex={-1}\n                type=\"button\"\n              >\n                <ChevronIcon direction={!isCollapsed ? 'up' : undefined} />\n              </button>\n            )}\n          </div>\n        </div>\n        <AnimateHeight height={isCollapsed ? 0 : 'auto'}>\n          <div\n            aria-labelledby={hasContentRegion && header ? headerID : undefined}\n            className={`${baseClass}__content`}\n            id={contentID}\n            role={hasContentRegion && header ? 'region' : undefined}\n          >\n            {children}\n          </div>\n        </AnimateHeight>\n        {AfterCollapsible}\n      </CollapsibleProvider>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,KAAK,EAAEC,QAAQ,QAAQ;AAIvC,SAASC,kBAAkB,QAAQ;AACnC,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AACP,SAASC,aAAa,QAAQ;AAC9B,SAASC,mBAAmB,EAAEC,cAAc,QAAQ;AAEpD,MAAMC,SAAA,GAAY;AAElB,SAASF,mBAAmB,EAAEC,cAAc;AA6B5C,OAAO,MAAME,WAAA,GAA0CC,EAAA;EAAA,MAAAC,CAAA,GAAAb,EAAA;EAAC;IAAAc,OAAA;IAAAC,gBAAA;IAAAC,QAAA;IAAAC,SAAA;IAAAC,gBAAA,EAAAC,EAAA;IAAAC,mBAAA,EAAAC,EAAA;IAAAC,sBAAA,EAAAC,EAAA;IAAAC,eAAA;IAAAC,gBAAA,EAAAC,EAAA;IAAAC,MAAA;IAAAC,aAAA;IAAAC,WAAA,EAAAC,kBAAA;IAAAC;EAAA,IAAAnB,EAcvD;EATC,MAAAM,gBAAA,GAAAC,EAA4B,KAAAa,SAAA,GAAT,SAAS,GAA5Bb,EAA4B;EAC5B,MAAAC,mBAAA,GAAAC,EAA2B,KAAAW,SAAA,WAA3BX,EAA2B;EAC3B,MAAAC,sBAAA,GAAAC,EAA8B,KAAAS,SAAA,WAA9BT,EAA8B;EAE9B,MAAAE,gBAAA,GAAAC,EAAwB,KAAAM,SAAA,WAAxBN,EAAwB;EAMxB,MAAAO,EAAA,GAAW/B,KAAA;EACX,MAAAgC,QAAA,GAAiB,GAAGD,EAAA,SAAW;EAC/B,MAAAE,aAAA,GAAsB,GAAGF,EAAA,eAAiB;EAC1C,MAAAG,SAAA,GAAkB,GAAGH,EAAA,UAAY;EACjC,OAAAI,cAAA,EAAAC,iBAAA,IAA4CnC,QAAA,CAASoC,OAAA,CAAQX,aAAA;EAC7D,OAAAY,cAAA,EAAAC,iBAAA,IAA4CtC,QAAA,MAAS;EACrD;IAAAuC;EAAA,IAAgCjC,cAAA;EAChC;IAAAkC;EAAA,IAAcrC,cAAA;EAEd,MAAAuB,WAAA,GAAoB,OAAOC,kBAAA,KAAuB,YAAYA,kBAAA,GAAqBO,cAAA;EAAA,IAAAO,EAAA;EAAA,IAAA/B,CAAA,QAAAgB,WAAA,IAAAhB,CAAA,QAAAkB,QAAA;IAEvCa,EAAA,GAAAA,CAAA;MAAA,IACtC,OAAOb,QAAA,KAAa;QACjBA,QAAA,EAAUF,WAAA;MAAA;MAEjBS,iBAAA,EAAmBT,WAAA;IAAA;IACrBhB,CAAA,MAAAgB,WAAA;IAAAhB,CAAA,MAAAkB,QAAA;IAAAlB,CAAA,MAAA+B,EAAA;EAAA;IAAAA,EAAA,GAAA/B,CAAA;EAAA;EALA,MAAAgC,iBAAA,GAA0BD,EAKA;EAOpB,MAAAE,EAAA,GAAAtB,eAAA,IAAmB,GAAAd,SAAA,mBAA+B;EAClD,MAAAqC,EAAA,GAAAlB,WAAA,IAAe,GAAAnB,SAAA,aAAyB;EACxC,MAAAsC,EAAA,GAAAN,mBAAA,IAAuB,GAAAhC,SAAA,UAAsB;EAC7C,MAAAuC,EAAA,GAAAT,cAAA,KAAmBpB,mBAAA,IAAuB,GAAAV,SAAA,WAAuB;EACjE,MAAAwC,GAAA,MAAAxC,SAAA,WAAuBQ,gBAAA,EAAkB;EAAA,IAAAiC,GAAA;EAAA,IAAAtC,CAAA,QAAAI,SAAA,IAAAJ,CAAA,QAAAqC,GAAA,IAAArC,CAAA,QAAAiC,EAAA,IAAAjC,CAAA,QAAAkC,EAAA,IAAAlC,CAAA,QAAAmC,EAAA,IAAAnC,CAAA,QAAAoC,EAAA;IAPhCE,GAAA,IAAAzC,SAAA,EAETO,SAAA,EACA6B,EAAkD,EAClDC,EAAwC,EACxCC,EAA6C,EAC7CC,EAAiE,EACjEC,GAAyC,EAAAE,MAAA,CAAAb,OAEjC;IAAA1B,CAAA,MAAAI,SAAA;IAAAJ,CAAA,MAAAqC,GAAA;IAAArC,CAAA,MAAAiC,EAAA;IAAAjC,CAAA,MAAAkC,EAAA;IAAAlC,CAAA,MAAAmC,EAAA;IAAAnC,CAAA,MAAAoC,EAAA;IAAApC,CAAA,MAAAsC,GAAA;EAAA;IAAAA,GAAA,GAAAtC,CAAA;EAAA;EATC,MAAAwC,GAAA,GAAAF,GASD,CAAAG,IAAA,CACF;EAIO,MAAAC,GAAA,MAAA7C,SAAA,gBAA4BU,mBAAA,GAAsB,qBAAqB,IAAI;EAAA,IAAAoC,GAAA;EAAA,IAAAC,GAAA;EAAA,IAAA5C,CAAA,SAAA6C,MAAA,CAAAC,GAAA;IACxEH,GAAA,GAAAA,CAAA,KAAMf,iBAAA,KAAkB;IACxBgB,GAAA,GAAAA,CAAA,KAAMhB,iBAAA,MAAkB;IAAA5B,CAAA,OAAA2C,GAAA;IAAA3C,CAAA,OAAA4C,GAAA;EAAA;IAAAD,GAAA,GAAA3C,CAAA;IAAA4C,GAAA,GAAA5C,CAAA;EAAA;EAAA,IAAA+C,GAAA;EAAA,IAAA/C,CAAA,SAAAE,gBAAA,IAAAF,CAAA,SAAAC,OAAA,IAAAD,CAAA,SAAAG,QAAA,IAAAH,CAAA,SAAAuB,SAAA,IAAAvB,CAAA,SAAAO,mBAAA,IAAAP,CAAA,SAAAS,sBAAA,IAAAT,CAAA,SAAAW,eAAA,IAAAX,CAAA,SAAAY,gBAAA,IAAAZ,CAAA,SAAAc,MAAA,IAAAd,CAAA,SAAAqB,QAAA,IAAArB,CAAA,SAAAgB,WAAA,IAAAhB,CAAA,SAAA8B,CAAA,IAAA9B,CAAA,SAAAwC,GAAA,IAAAxC,CAAA,SAAA0C,GAAA,IAAA1C,CAAA,SAAAgC,iBAAA,IAAAhC,CAAA,SAAAsB,aAAA;IAjB5CyB,GAAA,GAAAC,IAAA,CAAC;MAAA5C,SAAA,EACYoC,GAUH;MAAArC,QAAA,EAER8C,KAAA,CAAAtD,mBAAA;QAAAqB,WAAA;QAAAkC,MAAA,EAAuDlB,iBAAA;QAAA7B,QAAA,GACrD8C,KAAA,CAAC;UAAA7C,SAAA,EACYsC,GAA2E;UAAAS,YAAA,EACxER,GAAwB;UAAAS,YAAA,EACxBR,GAAwB;UAAAzC,QAAA,GAErC,CAACI,mBAAA,IACAyC,IAAA,CAAC;YAAA,iBACgBzB,SAAA;YAAA,kBACCP,WAAA;YAAA,mBACCF,MAAA,GAAS,GAAGO,QAAA,IAAYC,aAAA,EAAe,GAAAH,SAAG;YAAAf,SAAA,EAChD,CACT,GAAAP,SAAA,UAAsB,EACtB,GAAAA,SAAA,aAAyBmB,WAAA,GAAc,cAAc,QAAQ,EAAAuB,MAAA,CAAAb,OAErD,EAAAe,IAAA,CACF;YAAAY,OAAA,EACCrB,iBAAA;YAAAsB,IAAA,EACJ;YAAAnD,QAAA,EAEL6C,IAAA,CAAC;cAAA5B,EAAA,EAASE,aAAA;cAAAnB,QAAA,EAAgB2B,CAAA,CAAE;YAAA,C;cAI/BnB,eAAA,IACCqC,IAAA,CAAC;YAAA5C,SAAA,EACY,GAAAP,SAAA,QAAoB;YAAA,GAC3Bc,eAAA,CAAA4C,UAAA;YAAA,GACA5C,eAAA,CAAA6C,SAAA;YAAA,cACQ1B,CAAA,CAAE;YAAA3B,QAAA,EAEd6C,IAAA,CAAAzD,kBAAA,IAAC;UAAA,C,GAGJuB,MAAA,GACCkC,IAAA,CAAC;YAAA5C,SAAA,EACY,CACT,GAAAP,SAAA,eAA2B,EAC3Bc,eAAA,IAAmB,GAAAd,SAAA,gCAA4C,EAAA0C,MAAA,CAAAb,OAEvD,EAAAe,IAAA,CACF;YAAArB,EAAA,EACJC,QAAA;YAAAlB,QAAA,EAEHW;UAAA,C,QAED,EACJmC,KAAA,CAAC;YAAA7C,SAAA,EAAe,GAAAP,SAAA,gBAA4B;YAAAM,QAAA,GACzCF,OAAA,GAAU+C,IAAA,CAAC;cAAA5C,SAAA,EAAe,GAAAP,SAAA,WAAuB;cAAAM,QAAA,EAAGF;YAAA,C,QAAiB,EACrE,CAACQ,sBAAA,IACAuC,IAAA,CAAC;cAAA,iBACgBzB,SAAA;cAAA,oBACGT,MAAA,GAASO,QAAA,GAAAF,SAAW;cAAA,kBACtBH,WAAA;cAAA,cACJc,CAAA,CAAEd,WAAA,GAAc,mBAAmB;cAAAZ,SAAA,EACpC,GAAAP,SAAA,aAAyB;cAAAwD,OAAA,EAC3BrB,iBAAA;cAAAyB,QAAA;cAAAH,IAAA,EAEJ;cAAAnD,QAAA,EAEL6C,IAAA,CAAAxD,WAAA;gBAAAkE,SAAA,EAAwB,CAAC1C,WAAA,GAAc,OAAAG;cAAO,C;;;YAKtD6B,IAAA,CAAAtD,aAAA;UAAAiE,MAAA,EAAuB3C,WAAA,OAAkB;UAAAb,QAAA,EACvC6C,IAAA,CAAC;YAAA,mBACkBpC,gBAAA,IAAoBE,MAAA,GAASO,QAAA,GAAAF,SAAW;YAAAf,SAAA,EAC9C,GAAAP,SAAA,WAAuB;YAAAuB,EAAA,EAC9BG,SAAA;YAAAqC,IAAA,EACEhD,gBAAA,IAAoBE,MAAA,GAAS,WAAAK,SAAW;YAAAhB;UAAA,C;YAKjDD,gBAAA;MAAA,C;;;;;;;;;;;;;;;;;;;;;;SAxFL6C,G;CA4FJ","ignoreList":[]}

package/dist/elements/ColumnSelection/Popup.css

@@ -32,11 +32,11 @@
   }
 
   .column-selector__title {
+    margin: 0;
     padding-inline-start: var(--spacer-2);
-    font-family: var(--text-body-medium-strong-font-family);
-    font-size: var(--text-body-medium-strong-font-size);
-    font-weight: var(--text-body-medium-strong-font-weight);
-    line-height: var(--text-body-medium-strong-line-height);
+    font-size: var(--text-body-medium-bold-font-size);
+    font-weight: var(--text-body-medium-bold-font-weight);
+    line-height: var(--text-body-medium-bold-line-height);
     color: var(--color-text);
   }
 
@@ -77,7 +77,6 @@
     padding: 0;
     background: transparent;
     border: none;
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);
@@ -108,7 +107,6 @@
       var(--spacer-6) + var(--spacer-2)
     ); /* 48px total: 32px content + 8px top/bottom padding */
     padding-block: var(--spacer-2);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);
@@ -127,14 +125,14 @@
   }
 
   .column-selector__section-header {
+    margin: 0;
     display: flex;
     align-items: center;
     height: var(--spacer-5);
     padding-inline: var(--spacer-3);
-    font-family: var(--text-body-medium-strong-font-family);
-    font-size: var(--text-body-medium-strong-font-size);
-    font-weight: var(--text-body-medium-strong-font-weight);
-    line-height: var(--text-body-medium-strong-line-height);
+    font-size: var(--text-body-medium-bold-font-size);
+    font-weight: var(--text-body-medium-bold-font-weight);
+    line-height: var(--text-body-medium-bold-line-height);
     color: var(--color-text-secondary);
   }
 
@@ -160,7 +158,6 @@
   .column-selector__item-label {
     flex: 1;
     min-width: 0;
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);
@@ -189,6 +186,12 @@
     cursor: grab;
     opacity: 0;
 
+    &:focus-visible {
+      opacity: 1;
+      outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
+      outline-offset: calc(-1 * var(--accessibility-outline-offset));
+    }
+
     &:active {
       cursor: grabbing;
     }

package/dist/elements/ColumnSelection/Popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelection/Popup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,yBAAyB,EAAe,MAAM,SAAS,CAAA;AAI7E,OAAO,KAAyE,MAAM,OAAO,CAAA;AAY7F,OAAO,aAAa,CAAA;AA8CpB,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAA;IAC1B,mFAAmF;IACnF,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC9C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B,CAAA;AAkDD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA+NpE,CAAA"}
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelection/Popup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,yBAAyB,EAAe,MAAM,SAAS,CAAA;AAI7E,OAAO,KAAyE,MAAM,OAAO,CAAA;AAY7F,OAAO,aAAa,CAAA;AA8CpB,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAA;IAC1B,mFAAmF;IACnF,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC9C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B,CAAA;AA0DD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAmOpE,CAAA"}