@tedi-design-system/react 19.1.0-rc.2 → 19.1.0-rc.20

package/src/tedi/components/content/table-card/table-card.es.js

@@ -0,0 +1,206 @@
+import { jsx as l, jsxs as d, Fragment as Se } from "react/jsx-runtime";
+import c from "../../../../../external/classnames/index.es.js";
+import L from "react";
+import { Icon as ye } from "../../base/icon/icon.es.js";
+import { Text as b } from "../../base/typography/text/text.es.js";
+import { Checkbox as Ae } from "../../form/checkbox/checkbox.es.js";
+import { Card as u } from "../card/card.es.js";
+import { Label as Ne } from "../label/label.es.js";
+import { TextGroupList as D } from "../text-group/text-group-list/text-group-list.es.js";
+import e from "./table-card.module.scss.es.js";
+import { useBreakpointProps as Ce } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as Le } from "../../../providers/label-provider/use-labels.es.js";
+const xe = {
+  horizontal: {
+    labelAlign: "right",
+    valueAlign: "right",
+    labelWidth: "var(--text-group-label-width-sm)",
+    rowGap: "0"
+  },
+  vertical: { labelAlign: "left", valueAlign: "left", labelWidth: "auto", rowGap: "var(--layout-grid-gutters-16)" }
+}, ze = (t) => t.bold ? /* @__PURE__ */ l(b, { element: "span", modifiers: "bold", children: t.value }) : t.value, Te = (t, S) => typeof t == "string" ? /* @__PURE__ */ l(Ne, { isSmall: S, children: t }) : t, Be = (t) => {
+  const { getCurrentBreakpointProps: S } = Ce(t.defaultServerBreakpoint), { getLabel: x } = Le(), {
+    rows: E,
+    title: o,
+    subtitle: i,
+    endSlot: p,
+    titleElement: z = "h3",
+    titleModifiers: m,
+    collapsible: n = !1,
+    defaultOpen: F = !0,
+    open: T,
+    onOpenChange: y,
+    actions: B,
+    summary: r,
+    selectable: _ = !1,
+    selected: k,
+    defaultSelected: U = !1,
+    onSelectedChange: A,
+    labelSize: V = "default",
+    selectionLabel: M = x("table-card.select-row"),
+    ariaLabel: N,
+    id: Y,
+    children: w,
+    layout: G = "horizontal",
+    columns: q = 1,
+    labelWidth: J,
+    labelAlign: K,
+    valueAlign: Q,
+    rowAlign: X = "start",
+    padding: Z = 1,
+    rowGap: C,
+    className: ee
+  } = S(t), le = G === "horizontal", f = xe[G], ae = K ?? f.labelAlign, te = Q ?? f.valueAlign, H = J ?? f.labelWidth, oe = typeof C == "number" ? `${C}rem` : C ?? f.rowGap, ie = L.useId(), v = Y ?? ie, W = `${v}-body`, [ne, re] = L.useState(F), I = T !== void 0, s = n ? I ? T : ne : !0, se = () => {
+    const a = !s;
+    I || re(a), y == null || y(a);
+  }, [de, ce] = L.useState(U), O = k !== void 0, be = O ? k : de, me = (a) => {
+    O || ce(a), A == null || A(a);
+  }, $ = z;
+  n && !o && !N && console.warn(
+    "TableCard: a `collapsible` card needs a `title` or `ariaLabel` so its toggle has an accessible name."
+  );
+  const pe = !!(_ || o || i || p || n), h = !!B, P = !!r, he = !!w, R = n ? s || h : _, ge = s && !R, ue = P || h || he, _e = h, g = _ && !n && !!o && !i, fe = E.map((a) => ({
+    label: Te(a.label, V === "small"),
+    value: ze(a),
+    ...a.colSpan ? { colSpan: a.colSpan } : {}
+  })), j = _ ? /* @__PURE__ */ l(
+    Ae,
+    {
+      id: `${v}-select`,
+      name: `${v}-select`,
+      value: "selected",
+      label: g ? /* @__PURE__ */ l(
+        b,
+        {
+          element: "span",
+          color: "primary",
+          modifiers: m,
+          className: c(e["tedi-table-card__title"], {
+            [e["tedi-table-card__title--body"]]: !m
+          }),
+          children: o
+        }
+      ) : M,
+      hideLabel: !g,
+      checked: be,
+      onChange: (a, ve) => me(ve)
+    }
+  ) : null;
+  return /* @__PURE__ */ d(u, { padding: 0, className: c(e["tedi-table-card"], ee), "aria-label": N, id: v, children: [
+    pe && /* @__PURE__ */ d(
+      u.Content,
+      {
+        padding: ge ? { top: 1, right: 1, bottom: 0, left: 1 } : 1,
+        hasSeparator: R,
+        className: c(e["tedi-table-card__header"], {
+          [e["tedi-table-card__header--select-title"]]: g
+        }),
+        children: [
+          g ? /* @__PURE__ */ l($, { className: e["tedi-table-card__heading"], children: j }) : j,
+          n ? /* @__PURE__ */ l($, { className: e["tedi-table-card__heading"], children: /* @__PURE__ */ d(
+            "button",
+            {
+              type: "button",
+              className: e["tedi-table-card__toggle"],
+              "aria-expanded": s,
+              "aria-controls": W,
+              "aria-label": o ? void 0 : N ?? x(s ? "close" : "open"),
+              onClick: se,
+              children: [
+                /* @__PURE__ */ d("span", { className: e["tedi-table-card__title-group"], children: [
+                  o && /* @__PURE__ */ l(
+                    b,
+                    {
+                      element: "span",
+                      modifiers: m,
+                      className: c(e["tedi-table-card__title"], {
+                        [e["tedi-table-card__title--body"]]: !m
+                      }),
+                      children: o
+                    }
+                  ),
+                  i && /* @__PURE__ */ l(b, { element: "span", color: "secondary", modifiers: "small", children: i })
+                ] }),
+                p && /* @__PURE__ */ l("span", { className: e["tedi-table-card__end-slot"], children: p }),
+                /* @__PURE__ */ l(
+                  "span",
+                  {
+                    className: c(e["tedi-table-card__chevron"], {
+                      [e["tedi-table-card__chevron--open"]]: s
+                    }),
+                    children: /* @__PURE__ */ l(ye, { name: "expand_more", size: 24, color: "inherit" })
+                  }
+                )
+              ]
+            }
+          ) }) : /* @__PURE__ */ d(Se, { children: [
+            (o || i) && !g && /* @__PURE__ */ d("span", { className: e["tedi-table-card__title-group"], children: [
+              o && /* @__PURE__ */ l(
+                b,
+                {
+                  element: z,
+                  modifiers: m,
+                  className: c(e["tedi-table-card__title"], {
+                    [e["tedi-table-card__title--body"]]: !m
+                  }),
+                  children: o
+                }
+              ),
+              i && /* @__PURE__ */ l(b, { element: "span", color: "secondary", modifiers: "small", children: i })
+            ] }),
+            p && /* @__PURE__ */ l("div", { className: e["tedi-table-card__end-slot"], children: p })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ d(
+      "div",
+      {
+        id: W,
+        hidden: n && !s,
+        className: c({ [e["tedi-table-card__body--has-footer"]]: h }),
+        children: [
+          /* @__PURE__ */ l(u.Content, { padding: Z, hasSeparator: ue, children: /* @__PURE__ */ l(
+            D,
+            {
+              columns: q,
+              items: fe,
+              rowGap: oe,
+              ...le ? {
+                type: "horizontal",
+                labelAlign: ae,
+                valueAlign: te,
+                labelWidth: H,
+                rowAlign: X
+              } : {
+                type: "vertical",
+                labelAlign: "left",
+                labelWidth: H
+              }
+            }
+          ) }),
+          w,
+          P && /* @__PURE__ */ l(u.Content, { padding: 1, background: "tertiary", hasSeparator: _e, children: /* @__PURE__ */ l(
+            D,
+            {
+              type: "horizontal",
+              labelAlign: "left",
+              valueAlign: "right",
+              items: [
+                {
+                  label: r == null ? void 0 : r.label,
+                  value: /* @__PURE__ */ l(b, { element: "span", modifiers: "bold", children: r == null ? void 0 : r.value })
+                }
+              ]
+            }
+          ) })
+        ]
+      }
+    ),
+    h && /* @__PURE__ */ l(u.Content, { padding: { vertical: 0.5, horizontal: 1 }, className: e["tedi-table-card__actions"], children: B })
+  ] });
+};
+Be.displayName = "TableCard";
+export {
+  Be as TableCard
+};

package/src/tedi/components/content/table-card/table-card.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-table-card":"tedi-table-card-891665aa","tedi-table-card__body--has-footer":"tedi-table-card__body--has-footer-fdfe85e8","tedi-table-card__header":"tedi-table-card__header-5b99672d","tedi-table-card__header--select-title":"tedi-table-card__header--select-title-4c3092eb","tedi-table-card__heading":"tedi-table-card__heading-19e529e5","tedi-table-card__toggle":"tedi-table-card__toggle-967a66cb","tedi-table-card__chevron":"tedi-table-card__chevron-2771a16f","tedi-table-card__title-group":"tedi-table-card__title-group-5dba284a","tedi-table-card__title":"tedi-table-card__title-cdc97d8a","tedi-table-card__title--body":"tedi-table-card__title--body-d1a03544","tedi-table-card__chevron--open":"tedi-table-card__chevron--open-5ed89ee0","tedi-table-card__end-slot":"tedi-table-card__end-slot-1c4a8fc1","tedi-table-card__actions":"tedi-table-card__actions-66d83aef"};exports.default=e;

package/src/tedi/components/content/table-card/table-card.module.scss.es.js

@@ -0,0 +1,18 @@
+const e = {
+  "tedi-table-card": "tedi-table-card-891665aa",
+  "tedi-table-card__body--has-footer": "tedi-table-card__body--has-footer-fdfe85e8",
+  "tedi-table-card__header": "tedi-table-card__header-5b99672d",
+  "tedi-table-card__header--select-title": "tedi-table-card__header--select-title-4c3092eb",
+  "tedi-table-card__heading": "tedi-table-card__heading-19e529e5",
+  "tedi-table-card__toggle": "tedi-table-card__toggle-967a66cb",
+  "tedi-table-card__chevron": "tedi-table-card__chevron-2771a16f",
+  "tedi-table-card__title-group": "tedi-table-card__title-group-5dba284a",
+  "tedi-table-card__title": "tedi-table-card__title-cdc97d8a",
+  "tedi-table-card__title--body": "tedi-table-card__title--body-d1a03544",
+  "tedi-table-card__chevron--open": "tedi-table-card__chevron--open-5ed89ee0",
+  "tedi-table-card__end-slot": "tedi-table-card__end-slot-1c4a8fc1",
+  "tedi-table-card__actions": "tedi-table-card__actions-66d83aef"
+};
+export {
+  e as default
+};

package/src/tedi/components/content/text-group/text-group-list/text-group-list.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../../../../../../external/classnames/index.cjs.js"),v=require("../../label/label.cjs.js"),t=require("../text-group.module.scss.cjs.js"),y=require("../../../../helpers/hooks/use-breakpoint-props.cjs.js"),m=e=>typeof e=="string"?r.jsx(v.Label,{children:e}):e,a=e=>typeof e=="number"?`${e}%`:e,o=e=>{const{getCurrentBreakpointProps:i}=y.useBreakpointProps(e.defaultServerBreakpoint),{items:d,labelWidth:u="auto",className:n,type:c="vertical",labelAlign:p="left"}=i(e),x=s.default(t.default["tedi-text-group"],t.default["tedi-text-group--list"],t.default[`tedi-text-group--${c}`],n),f=a(u);return r.jsx("dl",{className:x,style:{"--label-width":f},children:d.map((l,g)=>{const b=l.labelAlign??p,h=l.labelWidth!==void 0?{"--label-width":a(l.labelWidth)}:void 0;return r.jsxs("div",{className:t.default["tedi-text-group__row"],style:h,children:[r.jsx("dt",{className:s.default(t.default["tedi-text-group__label"],t.default[`tedi-text-group--align-${b}`]),children:m(l.label)}),r.jsx("dd",{className:s.default(t.default["tedi-text-group__value"]),children:l.value})]},g)})})};o.displayName="TextGroup.List";exports.TextGroupList=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../../../../../../external/classnames/index.cjs.js"),_=require("../../label/label.cjs.js"),t=require("../text-group.module.scss.cjs.js"),j=require("../../../../helpers/hooks/use-breakpoint-props.cjs.js"),A=e=>typeof e=="string"?r.jsx(_.Label,{children:e}):e,u=e=>typeof e=="number"?`${e}%`:e,d=e=>{const{getCurrentBreakpointProps:c}=j.useBreakpointProps(e.defaultServerBreakpoint),{items:p,labelWidth:g="auto",className:x,type:i="vertical",labelAlign:f="left",valueAlign:b="left",columns:o=1,rowGap:a,rowAlign:h="start"}=c(e),v=s.default(t.default["tedi-text-group"],t.default["tedi-text-group--list"],t.default[`tedi-text-group--${i}`],{[t.default["tedi-text-group--columns"]]:o>1},{[t.default["tedi-text-group--row-align-center"]]:i==="horizontal"&&h==="center"},x),y={"--label-width":u(g),...o>1?{"--tedi-text-group-columns":o}:{},...a!==void 0?{"--tedi-text-group-list-gap":typeof a=="number"?`${a}px`:a}:{}};return r.jsx("dl",{className:v,style:y,children:p.map((l,m)=>{const w=l.labelAlign??f,L=l.valueAlign??b,n={};l.labelWidth!==void 0&&(n["--label-width"]=u(l.labelWidth)),o>1&&l.colSpan&&l.colSpan>1&&(n.gridColumn=`span ${Math.min(l.colSpan,o)}`);const S=Object.keys(n).length>0;return r.jsxs("div",{className:t.default["tedi-text-group__row"],style:S?n:void 0,children:[r.jsx("dt",{className:s.default(t.default["tedi-text-group__label"],t.default[`tedi-text-group--align-${w}`]),children:A(l.label)}),r.jsx("dd",{className:s.default(t.default["tedi-text-group__value"],t.default[`tedi-text-group__value--align-${L}`]),children:l.value})]},m)})})};d.displayName="TextGroup.List";exports.TextGroupList=d;

package/src/tedi/components/content/text-group/text-group-list/text-group-list.d.ts

@@ -11,12 +11,25 @@ type TextGroupListBreakpointProps = {
      * @default left
      */
     labelAlign?: TextAlign;
+    /**
+     * Alignment for the value text. `'right'` grows the value so it sits flush
+     * against the trailing edge (numeric / summary columns). Horizontal only.
+     * @default left
+     */
+    valueAlign?: TextAlign;
     /**
      * Width for the label column (e.g., `'200px'`, `'30%'`, or a `number`
      * interpreted as a percent).
      * @default auto
      */
     labelWidth?: string | number;
+    /**
+     * Vertical alignment of the label against its value within each row.
+     * `'center'` aligns them on the cross axis (useful when a value is taller,
+     * e.g. a `StatusBadge`). Horizontal layout only.
+     * @default 'start'
+     */
+    rowAlign?: 'start' | 'center';
 } | {
     /**
      * Type of text group layout.
@@ -28,6 +41,14 @@ type TextGroupListBreakpointProps = {
      * @default left
      */
     labelAlign?: 'left';
+    /**
+     * Value alignment is horizontal-only; not available in vertical layout.
+     */
+    valueAlign?: never;
+    /**
+     * Row alignment is horizontal-only; not available in vertical layout.
+     */
+    rowAlign?: never;
     /**
      * Width for the label column (e.g., `'200px'`, `'30%'`, or a `number`
      * interpreted as a percent).
@@ -51,11 +72,21 @@ export interface TextGroupListItem {
      * value when omitted.
      */
     labelAlign?: TextAlign;
+    /**
+     * Per-row override of the list-level `valueAlign`. Falls back to the list's
+     * value when omitted.
+     */
+    valueAlign?: TextAlign;
     /**
      * Per-row override of the list-level `labelWidth`. Falls back to the list's
      * value when omitted.
      */
     labelWidth?: string | number;
+    /**
+     * In a multi-column layout (`columns > 1`), span this row across N grid
+     * columns. Ignored in single-column layouts. Clamped to the column count.
+     */
+    colSpan?: number;
 }
 export type TextGroupListProps = BreakpointSupport<TextGroupListBreakpointProps> & {
     /**
@@ -64,6 +95,17 @@ export type TextGroupListProps = BreakpointSupport<TextGroupListBreakpointProps>
      * `<TextGroup>`s would break.
      */
     items: TextGroupListItem[];
+    /**
+     * Lay the pairs out in this many equal-width columns (CSS grid, filling
+     * left-to-right, top-to-bottom). `1` keeps the plain stacked list.
+     * @default 1
+     */
+    columns?: number;
+    /**
+     * Vertical gap between rows. Accepts any CSS length (a `number` is treated as
+     * pixels). Defaults to the component's compact spacing.
+     */
+    rowGap?: string | number;
     /**
      * Additional class name(s) to apply to the root `<dl>` element.
      */

package/src/tedi/components/content/text-group/text-group-list/text-group-list.es.js

@@ -1,30 +1,48 @@
-import { jsx as l, jsxs as h } from "react/jsx-runtime";
-import o from "../../../../../../external/classnames/index.es.js";
-import { Label as f } from "../../label/label.es.js";
+import { jsx as s, jsxs as _ } from "react/jsx-runtime";
+import n from "../../../../../../external/classnames/index.es.js";
+import { Label as A } from "../../label/label.es.js";
 import e from "../text-group.module.scss.es.js";
-import { useBreakpointProps as v } from "../../../../helpers/hooks/use-breakpoint-props.es.js";
-const y = (t) => typeof t == "string" ? /* @__PURE__ */ l(f, { children: t }) : t, s = (t) => typeof t == "number" ? `${t}%` : t, L = (t) => {
-  const { getCurrentBreakpointProps: i } = v(t.defaultServerBreakpoint), {
-    items: a,
-    labelWidth: n = "auto",
-    className: d,
-    type: p = "vertical",
-    labelAlign: c = "left"
-  } = i(t), u = o(
+import { useBreakpointProps as N } from "../../../../helpers/hooks/use-breakpoint-props.es.js";
+const S = (t) => typeof t == "string" ? /* @__PURE__ */ s(A, { children: t }) : t, p = (t) => typeof t == "number" ? `${t}%` : t, $ = (t) => {
+  const { getCurrentBreakpointProps: d } = N(t.defaultServerBreakpoint), {
+    items: c,
+    labelWidth: u = "auto",
+    className: g,
+    type: a = "vertical",
+    labelAlign: m = "left",
+    valueAlign: x = "left",
+    columns: o = 1,
+    rowGap: r,
+    rowAlign: h = "start"
+  } = d(t), b = n(
     e["tedi-text-group"],
     e["tedi-text-group--list"],
-    e[`tedi-text-group--${p}`],
-    d
-  ), m = s(n);
-  return /* @__PURE__ */ l("dl", { className: u, style: { "--label-width": m }, children: a.map((r, g) => {
-    const x = r.labelAlign ?? c, b = r.labelWidth !== void 0 ? { "--label-width": s(r.labelWidth) } : void 0;
-    return /* @__PURE__ */ h("div", { className: e["tedi-text-group__row"], style: b, children: [
-      /* @__PURE__ */ l("dt", { className: o(e["tedi-text-group__label"], e[`tedi-text-group--align-${x}`]), children: y(r.label) }),
-      /* @__PURE__ */ l("dd", { className: o(e["tedi-text-group__value"]), children: r.value })
-    ] }, g);
+    e[`tedi-text-group--${a}`],
+    { [e["tedi-text-group--columns"]]: o > 1 },
+    { [e["tedi-text-group--row-align-center"]]: a === "horizontal" && h === "center" },
+    g
+  ), f = {
+    "--label-width": p(u),
+    ...o > 1 ? { "--tedi-text-group-columns": o } : {},
+    ...r !== void 0 ? { "--tedi-text-group-list-gap": typeof r == "number" ? `${r}px` : r } : {}
+  };
+  return /* @__PURE__ */ s("dl", { className: b, style: f, children: c.map((l, v) => {
+    const y = l.labelAlign ?? m, w = l.valueAlign ?? x, i = {};
+    l.labelWidth !== void 0 && (i["--label-width"] = p(l.labelWidth)), o > 1 && l.colSpan && l.colSpan > 1 && (i.gridColumn = `span ${Math.min(l.colSpan, o)}`);
+    const L = Object.keys(i).length > 0;
+    return /* @__PURE__ */ _("div", { className: e["tedi-text-group__row"], style: L ? i : void 0, children: [
+      /* @__PURE__ */ s("dt", { className: n(e["tedi-text-group__label"], e[`tedi-text-group--align-${y}`]), children: S(l.label) }),
+      /* @__PURE__ */ s(
+        "dd",
+        {
+          className: n(e["tedi-text-group__value"], e[`tedi-text-group__value--align-${w}`]),
+          children: l.value
+        }
+      )
+    ] }, v);
   }) });
 };
-L.displayName = "TextGroup.List";
+$.displayName = "TextGroup.List";
 export {
-  L as TextGroupList
+  $ as TextGroupList
 };

package/src/tedi/components/content/text-group/text-group.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../../../../../external/classnames/index.cjs.js"),f=require("../label/label.cjs.js"),t=require("./text-group.module.scss.cjs.js"),g=require("./text-group-list/text-group-list.cjs.js"),b=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),m=e=>typeof e=="string"?r.jsx(f.Label,{children:e}):e,y=e=>typeof e=="number"?`${e}%`:e,o=e=>{const{getCurrentBreakpointProps:l}=b.useBreakpointProps(e.defaultServerBreakpoint),{label:u,value:a,labelWidth:n="auto",className:i,type:d="vertical",labelAlign:c="left"}=l(e),p=s.default(t.default["tedi-text-group"],t.default[`tedi-text-group--${d}`],i),x=y(n);return r.jsxs("dl",{className:p,style:{"--label-width":x},children:[r.jsx("dt",{className:s.default(t.default["tedi-text-group__label"],t.default[`tedi-text-group--align-${c}`]),children:m(u)}),r.jsx("dd",{className:s.default(t.default["tedi-text-group__value"]),children:a})]})};o.displayName="TextGroup";const G=Object.assign(o,{List:g.TextGroupList});exports.TextGroup=G;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),l=require("../../../../../external/classnames/index.cjs.js"),g=require("../label/label.cjs.js"),t=require("./text-group.module.scss.cjs.js"),b=require("./text-group-list/text-group-list.cjs.js"),m=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),v=e=>typeof e=="string"?r.jsx(g.Label,{children:e}):e,y=e=>typeof e=="number"?`${e}%`:e,u=e=>{const{getCurrentBreakpointProps:o}=m.useBreakpointProps(e.defaultServerBreakpoint),{label:s,value:a,labelWidth:i="auto",className:n,type:d="vertical",labelAlign:c="left",valueAlign:p="left"}=o(e),x=l.default(t.default["tedi-text-group"],t.default[`tedi-text-group--${d}`],n),f=y(i);return r.jsxs("dl",{className:x,style:{"--label-width":f},children:[r.jsx("dt",{className:l.default(t.default["tedi-text-group__label"],t.default[`tedi-text-group--align-${c}`]),children:v(s)}),r.jsx("dd",{className:l.default(t.default["tedi-text-group__value"],t.default[`tedi-text-group__value--align-${p}`]),children:a})]})};u.displayName="TextGroup";const G=Object.assign(u,{List:b.TextGroupList});exports.TextGroup=G;

package/src/tedi/components/content/text-group/text-group.d.ts

@@ -11,6 +11,12 @@ type TextGroupBreakpointProps = {
      *  @default left
      */
     labelAlign?: TextAlign;
+    /**
+     * Alignment for the value text. `'right'` grows the value so it sits flush
+     * against the trailing edge. Horizontal only.
+     * @default 'left'
+     */
+    valueAlign?: TextAlign;
     /**
      * Width for the label (e.g., '200px', '30%', etc.)
      * @default auto
@@ -26,6 +32,10 @@ type TextGroupBreakpointProps = {
      *  @default left
      */
     labelAlign?: 'left';
+    /**
+     * Value alignment is horizontal-only; not available in vertical layout.
+     */
+    valueAlign?: never;
     /**
      * Width for the label (e.g., '200px', '30%', etc.)
      * @default auto

package/src/tedi/components/content/text-group/text-group.es.js

@@ -1,27 +1,28 @@
-import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import { jsxs as g, jsx as o } from "react/jsx-runtime";
 import r from "../../../../../external/classnames/index.es.js";
 import { Label as f } from "../label/label.es.js";
 import e from "./text-group.module.scss.es.js";
-import { TextGroupList as g } from "./text-group-list/text-group-list.es.js";
-import { useBreakpointProps as b } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { TextGroupList as b } from "./text-group-list/text-group-list.es.js";
+import { useBreakpointProps as v } from "../../../helpers/hooks/use-breakpoint-props.es.js";
 const y = (t) => typeof t == "string" ? /* @__PURE__ */ o(f, { children: t }) : t, h = (t) => typeof t == "number" ? `${t}%` : t, s = (t) => {
-  const { getCurrentBreakpointProps: l } = b(t.defaultServerBreakpoint), {
+  const { getCurrentBreakpointProps: l } = v(t.defaultServerBreakpoint), {
     label: a,
     value: i,
     labelWidth: n = "auto",
     className: p,
-    type: c = "vertical",
-    labelAlign: m = "left"
-  } = l(t), d = r(e["tedi-text-group"], e[`tedi-text-group--${c}`], p), u = h(n);
-  return /* @__PURE__ */ x("dl", { className: d, style: { "--label-width": u }, children: [
-    /* @__PURE__ */ o("dt", { className: r(e["tedi-text-group__label"], e[`tedi-text-group--align-${m}`]), children: y(a) }),
-    /* @__PURE__ */ o("dd", { className: r(e["tedi-text-group__value"]), children: i })
+    type: u = "vertical",
+    labelAlign: c = "left",
+    valueAlign: d = "left"
+  } = l(t), m = r(e["tedi-text-group"], e[`tedi-text-group--${u}`], p), x = h(n);
+  return /* @__PURE__ */ g("dl", { className: m, style: { "--label-width": x }, children: [
+    /* @__PURE__ */ o("dt", { className: r(e["tedi-text-group__label"], e[`tedi-text-group--align-${c}`]), children: y(a) }),
+    /* @__PURE__ */ o("dd", { className: r(e["tedi-text-group__value"], e[`tedi-text-group__value--align-${d}`]), children: i })
   ] });
 };
 s.displayName = "TextGroup";
-const _ = Object.assign(s, {
-  List: g
+const $ = Object.assign(s, {
+  List: b
 });
 export {
-  _ as TextGroup
+  $ as TextGroup
 };

package/src/tedi/components/content/text-group/text-group.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-text-group":"tedi-text-group-be3b15d8","tedi-text-group--horizontal":"tedi-text-group--horizontal-9d91c910","tedi-text-group__label":"tedi-text-group__label-a8904597","tedi-text-group__value":"tedi-text-group__value-4bbf1a22","tedi-text-group--align-left":"tedi-text-group--align-left-cc82fd31","tedi-text-group--align-right":"tedi-text-group--align-right-0eebe973","tedi-text-group--list":"tedi-text-group--list-bd143f34","tedi-text-group__row":"tedi-text-group__row-fc6928bf"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-text-group":"tedi-text-group-be3b15d8","tedi-text-group--horizontal":"tedi-text-group--horizontal-9d91c910","tedi-text-group__label":"tedi-text-group__label-a8904597","tedi-text-group__value":"tedi-text-group__value-4bbf1a22","tedi-text-group__value--align-right":"tedi-text-group__value--align-right-b93b121e","tedi-text-group__value--align-left":"tedi-text-group__value--align-left-ed3950e5","tedi-text-group--align-left":"tedi-text-group--align-left-cc82fd31","tedi-text-group--align-right":"tedi-text-group--align-right-0eebe973","tedi-text-group--list":"tedi-text-group--list-bd143f34","tedi-text-group--columns":"tedi-text-group--columns-d5214f99","tedi-text-group__row":"tedi-text-group__row-fc6928bf","tedi-text-group--row-align-center":"tedi-text-group--row-align-center-df365a32"};exports.default=t;

package/src/tedi/components/content/text-group/text-group.module.scss.es.js

@@ -3,10 +3,14 @@ const t = {
   "tedi-text-group--horizontal": "tedi-text-group--horizontal-9d91c910",
   "tedi-text-group__label": "tedi-text-group__label-a8904597",
   "tedi-text-group__value": "tedi-text-group__value-4bbf1a22",
+  "tedi-text-group__value--align-right": "tedi-text-group__value--align-right-b93b121e",
+  "tedi-text-group__value--align-left": "tedi-text-group__value--align-left-ed3950e5",
   "tedi-text-group--align-left": "tedi-text-group--align-left-cc82fd31",
   "tedi-text-group--align-right": "tedi-text-group--align-right-0eebe973",
   "tedi-text-group--list": "tedi-text-group--list-bd143f34",
-  "tedi-text-group__row": "tedi-text-group__row-fc6928bf"
+  "tedi-text-group--columns": "tedi-text-group--columns-d5214f99",
+  "tedi-text-group__row": "tedi-text-group__row-fc6928bf",
+  "tedi-text-group--row-align-center": "tedi-text-group--row-align-center-df365a32"
 };
 export {
   t as default

package/src/tedi/components/filter/filter/filter.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),ae=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),oe=require("../../base/icon/icon.cjs.js"),E=require("../../buttons/button/button.cjs.js"),ce=require("../../form/checkbox/checkbox.cjs.js"),We=require("../../form/search/search.cjs.js"),d=require("../../overlays/dropdown/dropdown.cjs.js"),Ze=require("../../tags/status-badge/status-badge.cjs.js"),n=require("./filter.module.scss.cjs.js"),He=require("./filter-group-context.cjs.js"),Je=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Ke=require("../../../providers/label-provider/use-labels.cjs.js"),de=v=>v==="large"?24:18,Qe=v=>{const b=l.useId();return v??`tedi-filter-${b.replace(/[^a-zA-Z0-9-]/g,"")}`},ue=l.forwardRef((v,b)=>{const{getCurrentBreakpointProps:fe}=Je.useBreakpointProps(v.defaultServerBreakpoint),{text:g,value:_,disabled:he=!1,className:pe,id:W,selected:k,defaultSelected:Z=!1,onSelectedChange:C,selectedValue:j,defaultSelectedValue:me,onSelectedValueChange:u,multiselect:H=!1,selectedValues:f,defaultSelectedValues:be,onSelectedValuesChange:a,options:S=[],searchable:xe=!1,showSelectAll:ve=!1,selectAllLabel:ge,showClear:J=!1,clearLabel:je,preserveLabel:K=!1,children:Q,onClear:y,prepend:I,hidePrependWhenSelected:Se=!0,append:M,placement:we="bottom-start",variant:_e="primary",size:D="default",searchLabel:U}=fe(v),{getLabel:V}=Ke.useLabels(),ke=ge??V("filter.select-all"),X=je??V("filter.clear-selection"),i=l.useContext(He.FilterGroupContext),L=Qe(W),Ce=l.useRef(null),P=S.length>0,F=!!Q,x=P||F,h=P&&!H,p=P&&H,N=!!(i!=null&&i.isManaged)&&_!==void 0&&!x,O=N&&!(i!=null&&i.multiselect),Y=he||((i==null?void 0:i.disabled)??!1),[Le,Fe]=l.useState(Z),[Ne,ee]=l.useState(me??""),[ye,T]=l.useState(be??[]);F&&(Z||C)&&k===void 0&&console.warn("[Filter] `defaultSelected` and `onSelectedChange` are not honoured in custom-content mode (when `children` is provided). Drive the selected state yourself via the controlled `selected` prop, e.g. `selected={Boolean(value)}`.");const B=k!==void 0?k:Le,m=j!==void 0?j:Ne,r=f!==void 0?f:ye,w=l.useMemo(()=>N?i.isSelected(_):p?r.length>0:h?m!=="":B,[N,_,i,p,r,h,m,B]),q=l.useMemo(()=>{var e;return!h||!m?null:((e=S.find(s=>s.value===m))==null?void 0:e.label)??null},[h,m,S]),Be=l.useMemo(()=>h?q&&K?`${g}: ${q}`:q??g:g,[h,q,K,g]),[$,te]=l.useState(!1),[z,le]=l.useState("");l.useEffect(()=>{$||le("")},[$]);const R=l.useMemo(()=>{const e=z.trim().toLowerCase();return e?S.filter(s=>s.label.toLowerCase().includes(e)):S},[z,S]),o=l.useMemo(()=>R.filter(e=>!e.disabled),[R]),A=l.useMemo(()=>o.length===0?!1:o.every(e=>r.includes(e.value)),[o,r]),qe=l.useMemo(()=>{if(o.length===0)return!1;const e=o.filter(s=>r.includes(s.value)).length;return e>0&&e<o.length},[o,r]),Ie=l.useCallback(e=>{Ce.current=e,typeof b=="function"?b(e):b&&(b.current=e)},[b]),Me=l.useCallback(()=>{if(N){i.selectFilter(_);return}const e=!B;k===void 0&&Fe(e),C==null||C(e)},[N,i,_,B,k,C]),De=l.useCallback(e=>{const s=m===e?"":e;j===void 0&&ee(s),u==null||u(s)},[m,j,u]),Pe=l.useCallback(e=>{const s=r.includes(e)?r.filter(c=>c!==e):[...r,e];f===void 0&&T(s),a==null||a(s)},[r,f,a]),Oe=l.useCallback(()=>{let e;if(A){const s=new Set(o.map(c=>c.value));e=r.filter(c=>!s.has(c))}else{const s=new Set(r);o.forEach(c=>s.add(c.value)),e=[...s]}f===void 0&&T(e),a==null||a(e)},[A,o,r,f,a]),se=l.useCallback(()=>{F?y==null||y():p?(f===void 0&&T([]),a==null||a([])):h&&(j===void 0&&ee(""),u==null||u("")),te(!1)},[F,y,p,f,a,h,j,u]),Te=w&&Se,$e=O?"radio":void 0,ze=O?w:void 0,Re=!x&&!O?w:void 0,Ae=t.jsxs(t.Fragment,{children:[!x&&w&&t.jsx(oe.Icon,{className:n.default["tedi-filter__icon"],name:"check",size:de(D),color:"inherit"}),I!=null&&t.jsx("span",{className:ae.default(n.default["tedi-filter__prepend"],{[n.default["tedi-filter__prepend--hidden"]]:Te}),children:I}),t.jsx("span",{className:n.default["tedi-filter__text"],children:Be}),M!=null&&t.jsx("span",{className:n.default["tedi-filter__append"],children:M}),p&&w&&r.length>0&&t.jsx(Ze.StatusBadge,{className:n.default["tedi-filter__count"],color:Y?"neutral":"brand",children:String(r.length)}),x&&t.jsx(oe.Icon,{className:n.default["tedi-filter__icon"],name:"arrow_drop_down",filled:!0,size:de(D),color:"inherit"})]}),re=ae.default(n.default["tedi-filter"],n.default[`tedi-filter--${_e}`],D==="large"&&n.default["tedi-filter--large"],w&&n.default["tedi-filter--selected"],pe),ne=t.jsx(E.Button,{ref:Ie,id:W,type:"button",disabled:Y,className:n.default["tedi-filter__button"],onClick:x?void 0:Me,role:x?void 0:$e,"aria-checked":ze,"aria-pressed":Re,noStyle:!0,children:Ae});if(!x)return t.jsx("div",{className:re,children:ne});const G=p&&ve?0:null,Ge=G!==null?1:0,Ee=()=>R.map((e,s)=>{const c=p?r.includes(e.value):m===e.value,ie=s+Ge;return p?t.jsx(d.Dropdown.Item,{index:ie,asChild:!0,disabled:e.disabled,closeOnSelect:!1,children:t.jsx(ce.Checkbox,{id:`${L}-option-${s}`,label:e.label,value:e.value,checked:c,disabled:e.disabled,onChange:()=>Pe(e.value),name:`${L}-options`})},e.value):t.jsx(d.Dropdown.Item,{index:ie,disabled:e.disabled,active:c,onClick:()=>De(e.value),children:e.label},e.value)});return t.jsx("div",{className:re,children:t.jsxs(d.Dropdown,{open:$,onOpenChange:te,placement:we,width:"auto",children:[t.jsx(d.Dropdown.Trigger,{children:ne}),t.jsx(d.Dropdown.Content,{children:F?t.jsxs(t.Fragment,{children:[t.jsx("div",{className:n.default["tedi-filter-dropdown__custom-content"],children:Q}),J&&t.jsxs(t.Fragment,{children:[t.jsx(d.Dropdown.Separator,{}),t.jsx("div",{className:n.default["tedi-filter-dropdown__clear"],children:t.jsx(E.Button,{visualType:"neutral",size:"small",type:"button",iconLeft:"refresh",onClick:se,children:X})})]})]}):t.jsxs(t.Fragment,{children:[xe&&t.jsxs(t.Fragment,{children:[t.jsx("div",{className:n.default["tedi-filter-dropdown__search"],children:t.jsx(We.Search,{id:`${L}-search`,label:U??g,hideLabel:!0,ariaLabel:U??g,value:z,onChange:le})}),t.jsx(d.Dropdown.Separator,{})]}),G!==null&&t.jsxs(t.Fragment,{children:[t.jsx(d.Dropdown.Item,{index:G,asChild:!0,closeOnSelect:!1,children:t.jsx(ce.Checkbox,{id:`${L}-select-all`,label:ke,value:"select-all",checked:A,indeterminate:qe,onChange:Oe,name:`${L}-select-all`})}),t.jsx(d.Dropdown.Separator,{})]}),Ee(),J&&t.jsxs(t.Fragment,{children:[t.jsx(d.Dropdown.Separator,{}),t.jsx("div",{className:n.default["tedi-filter-dropdown__clear"],children:t.jsx(E.Button,{visualType:"neutral",size:"small",type:"button",iconLeft:"refresh",onClick:se,children:X})})]})]})})]})})});ue.displayName="Filter";exports.Filter=ue;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),W=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),ue=require("../../base/icon/icon.cjs.js"),Z=require("../../buttons/button/button.cjs.js"),fe=require("../../form/checkbox/checkbox.cjs.js"),Ze=require("../../form/search/search.cjs.js"),c=require("../../overlays/dropdown/dropdown.cjs.js"),Je=require("../../tags/status-badge/status-badge.cjs.js"),r=require("./filter.module.scss.cjs.js"),Ke=require("./filter-group-context.cjs.js"),Qe=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Ue=require("../../../providers/label-provider/use-labels.cjs.js"),he=b=>b==="large"?24:18,Ve=b=>{const x=l.useId();return b??`tedi-filter-${x.replace(/[^a-zA-Z0-9-]/g,"")}`},pe=l.forwardRef((b,x)=>{const{getCurrentBreakpointProps:me}=Qe.useBreakpointProps(b.defaultServerBreakpoint),{text:g,value:_,disabled:xe=!1,className:ve,id:J,selected:k,defaultSelected:K=!1,onSelectedChange:C,selectedValue:j,defaultSelectedValue:be,onSelectedValueChange:u,multiselect:Q=!1,selectedValues:f,defaultSelectedValues:ge,onSelectedValuesChange:a,options:S=[],searchable:je=!1,showSelectAll:Se=!1,selectAllLabel:we,showClear:U=!1,clearLabel:_e,preserveLabel:V=!1,children:X,onClear:B,prepend:D,hidePrependWhenSelected:ke=!0,append:P,placement:Ce="bottom-start",variant:Le="primary",size:$="default",searchLabel:Y,maxHeight:M}=me(b),{getLabel:ee}=Ue.useLabels(),ye=we??ee("filter.select-all"),te=_e??ee("filter.clear-selection"),L=M===void 0?void 0:typeof M=="number"?`${M}px`:M,i=l.useContext(Ke.FilterGroupContext),y=Ve(J),Ne=l.useRef(null),O=S.length>0,N=!!X,v=O||N,h=O&&!Q,p=O&&Q,F=!!(i!=null&&i.isManaged)&&_!==void 0&&!v,T=F&&!(i!=null&&i.multiselect),le=xe||((i==null?void 0:i.disabled)??!1),[Fe,Be]=l.useState(K),[Me,se]=l.useState(be??""),[qe,z]=l.useState(ge??[]);N&&(K||C)&&k===void 0&&console.warn("[Filter] `defaultSelected` and `onSelectedChange` are not honoured in custom-content mode (when `children` is provided). Drive the selected state yourself via the controlled `selected` prop, e.g. `selected={Boolean(value)}`.");const q=k!==void 0?k:Fe,m=j!==void 0?j:Me,n=f!==void 0?f:qe,w=l.useMemo(()=>F?i.isSelected(_):p?n.length>0:h?m!=="":q,[F,_,i,p,n,h,m,q]),I=l.useMemo(()=>{var e;return!h||!m?null:((e=S.find(s=>s.value===m))==null?void 0:e.label)??null},[h,m,S]),Ie=l.useMemo(()=>h?I&&V?`${g}: ${I}`:I??g:g,[h,I,V,g]),[R,re]=l.useState(!1),[A,ne]=l.useState("");l.useEffect(()=>{R||ne("")},[R]);const G=l.useMemo(()=>{const e=A.trim().toLowerCase();return e?S.filter(s=>s.label.toLowerCase().includes(e)):S},[A,S]),o=l.useMemo(()=>G.filter(e=>!e.disabled),[G]),H=l.useMemo(()=>o.length===0?!1:o.every(e=>n.includes(e.value)),[o,n]),De=l.useMemo(()=>{if(o.length===0)return!1;const e=o.filter(s=>n.includes(s.value)).length;return e>0&&e<o.length},[o,n]),Pe=l.useCallback(e=>{Ne.current=e,typeof x=="function"?x(e):x&&(x.current=e)},[x]),$e=l.useCallback(()=>{if(F){i.selectFilter(_);return}const e=!q;k===void 0&&Be(e),C==null||C(e)},[F,i,_,q,k,C]),Oe=l.useCallback(e=>{const s=m===e?"":e;j===void 0&&se(s),u==null||u(s)},[m,j,u]),Te=l.useCallback(e=>{const s=n.includes(e)?n.filter(d=>d!==e):[...n,e];f===void 0&&z(s),a==null||a(s)},[n,f,a]),ze=l.useCallback(()=>{let e;if(H){const s=new Set(o.map(d=>d.value));e=n.filter(d=>!s.has(d))}else{const s=new Set(n);o.forEach(d=>s.add(d.value)),e=[...s]}f===void 0&&z(e),a==null||a(e)},[H,o,n,f,a]),ie=l.useCallback(()=>{N?B==null||B():p?(f===void 0&&z([]),a==null||a([])):h&&(j===void 0&&se(""),u==null||u("")),re(!1)},[N,B,p,f,a,h,j,u]),Re=w&&ke,Ae=T?"radio":void 0,Ge=T?w:void 0,He=!v&&!T?w:void 0,Ee=t.jsxs(t.Fragment,{children:[!v&&w&&t.jsx(ue.Icon,{className:r.default["tedi-filter__icon"],name:"check",size:he($),color:"inherit"}),D!=null&&t.jsx("span",{className:W.default(r.default["tedi-filter__prepend"],{[r.default["tedi-filter__prepend--hidden"]]:Re}),children:D}),t.jsx("span",{className:r.default["tedi-filter__text"],children:Ie}),P!=null&&t.jsx("span",{className:r.default["tedi-filter__append"],children:P}),p&&w&&n.length>0&&t.jsx(Je.StatusBadge,{className:r.default["tedi-filter__count"],color:le?"neutral":"brand",children:String(n.length)}),v&&t.jsx(ue.Icon,{className:r.default["tedi-filter__icon"],name:"arrow_drop_down",filled:!0,size:he($),color:"inherit"})]}),ae=W.default(r.default["tedi-filter"],r.default[`tedi-filter--${Le}`],$==="large"&&r.default["tedi-filter--large"],w&&r.default["tedi-filter--selected"],ve),oe=t.jsx(Z.Button,{ref:Pe,id:J,type:"button",disabled:le,className:r.default["tedi-filter__button"],onClick:v?void 0:$e,role:v?void 0:Ae,"aria-checked":Ge,"aria-pressed":He,noStyle:!0,children:Ee});if(!v)return t.jsx("div",{className:ae,children:oe});const E=p&&Se?0:null,We=E!==null?1:0,de=()=>G.map((e,s)=>{const d=p?n.includes(e.value):m===e.value,ce=s+We;return p?t.jsx(c.Dropdown.Item,{index:ce,asChild:!0,disabled:e.disabled,closeOnSelect:!1,children:t.jsx(fe.Checkbox,{id:`${y}-option-${s}`,label:e.label,value:e.value,checked:d,disabled:e.disabled,onChange:()=>Te(e.value),name:`${y}-options`})},e.value):t.jsx(c.Dropdown.Item,{index:ce,disabled:e.disabled,active:d,onClick:()=>Oe(e.value),children:e.label},e.value)});return t.jsx("div",{className:ae,children:t.jsxs(c.Dropdown,{open:R,onOpenChange:re,placement:Ce,width:"auto",children:[t.jsx(c.Dropdown.Trigger,{children:oe}),t.jsx(c.Dropdown.Content,{children:N?t.jsxs(t.Fragment,{children:[t.jsx("div",{className:W.default(r.default["tedi-filter-dropdown__custom-content"],{[r.default["tedi-filter-dropdown__options"]]:L!==void 0}),style:L!==void 0?{maxHeight:L}:void 0,children:X}),U&&t.jsxs(t.Fragment,{children:[t.jsx(c.Dropdown.Separator,{}),t.jsx("div",{className:r.default["tedi-filter-dropdown__clear"],children:t.jsx(Z.Button,{visualType:"neutral",size:"small",type:"button",iconLeft:"refresh",onClick:ie,children:te})})]})]}):t.jsxs(t.Fragment,{children:[je&&t.jsxs(t.Fragment,{children:[t.jsx("div",{className:r.default["tedi-filter-dropdown__search"],children:t.jsx(Ze.Search,{id:`${y}-search`,label:Y??g,hideLabel:!0,ariaLabel:Y??g,value:A,onChange:ne})}),t.jsx(c.Dropdown.Separator,{})]}),E!==null&&t.jsxs(t.Fragment,{children:[t.jsx(c.Dropdown.Item,{index:E,asChild:!0,closeOnSelect:!1,children:t.jsx(fe.Checkbox,{id:`${y}-select-all`,label:ye,value:"select-all",checked:H,indeterminate:De,onChange:ze,name:`${y}-select-all`})}),t.jsx(c.Dropdown.Separator,{})]}),L!==void 0?t.jsx("div",{className:r.default["tedi-filter-dropdown__options"],style:{maxHeight:L},children:de()}):de(),U&&t.jsxs(t.Fragment,{children:[t.jsx(c.Dropdown.Separator,{}),t.jsx("div",{className:r.default["tedi-filter-dropdown__clear"],children:t.jsx(Z.Button,{visualType:"neutral",size:"small",type:"button",iconLeft:"refresh",onClick:ie,children:te})})]})]})})]})})});pe.displayName="Filter";exports.Filter=pe;

package/src/tedi/components/filter/filter/filter.d.ts

@@ -93,6 +93,11 @@ export interface FilterProps extends BreakpointSupport<FilterBreakpointProps> {
     placement?: React.ComponentProps<typeof Dropdown>['placement'];
     /** Accessible label for the search input. Falls back to `text`. */
     searchLabel?: string;
+    /**
+     * Caps the height of the dropdown's option list. The list scrolls when it's taller, while the
+     * search and "Clear selection" stay pinned. `number` = px, `string` = any CSS length.
+     */
+    maxHeight?: React.ComponentProps<typeof Dropdown>['maxHeight'];
 }
 export declare const Filter: React.ForwardRefExoticComponent<FilterProps & React.RefAttributes<HTMLButtonElement>>;
 export default Filter;