@tedi-design-system/react 19.1.0-rc.10 → 19.1.0-rc.12

package/src/tedi/components/content/table-card/table-card.d.ts

@@ -0,0 +1,131 @@
+import { default as React } from 'react';
+import { BreakpointSupport } from '../../../helpers';
+import { TextModifiers } from '../../base/typography/text/text';
+import { CardContentPadding } from '../card/card';
+type TableCardAlign = 'left' | 'right';
+export interface TableCardRow {
+    /** Row label (usually the column header). Strings are wrapped in a `<Label>`; nodes render as-is. */
+    label: React.ReactNode;
+    /** Row value — text, a `StatusBadge`, a link, etc. */
+    value: React.ReactNode;
+    /**
+     * Show the value in bold.
+     * @default false
+     */
+    bold?: boolean;
+    /** In a multi-column body, span this row across N columns. Ignored when `columns` is 1. */
+    colSpan?: number;
+}
+type TableCardBreakpointProps = {
+    /**
+     * Row layout: `horizontal` (label beside value) or `vertical` (label above value).
+     * @default horizontal
+     */
+    layout?: 'horizontal' | 'vertical';
+    /**
+     * Number of equal-width columns. Best with `layout="vertical"`.
+     * @default 1
+     */
+    columns?: number;
+    /**
+     * Label column width (horizontal layout); a `number` is pixels.
+     * @default 8.25rem horizontal, auto vertical
+     */
+    labelWidth?: string | number;
+    /** Label text alignment. Defaults to `right` in horizontal layout, `left` otherwise. */
+    labelAlign?: TableCardAlign;
+    /** Value text alignment. Defaults to `right` in horizontal layout, `left` otherwise. */
+    valueAlign?: TableCardAlign;
+    /**
+     * Vertical alignment of each label against its value (horizontal layout only).
+     * `'center'` keeps the label centred when a value is taller, e.g. a `StatusBadge`.
+     * @default start
+     */
+    rowAlign?: 'start' | 'center';
+    /**
+     * Padding of the card body (the rows section). Accepts the same values as `Card.Content`:
+     * a number in rems, `{ vertical, horizontal }`, or `{ top, right, bottom, left }`.
+     * @default 1
+     */
+    padding?: CardContentPadding;
+    /**
+     * Vertical gap between rows in the body. A `number` is rems (matching `padding`); pass a
+     * string for any other CSS length.
+     * Defaults to the layout gutter in `vertical` layout and the list's compact spacing otherwise.
+     */
+    rowGap?: string | number;
+    /** Class name for the root element. */
+    className?: string;
+};
+export interface TableCardProps extends BreakpointSupport<TableCardBreakpointProps> {
+    /** Label / value pairs (one per column) rendered as the card body - a single `<dl>`. */
+    rows: TableCardRow[];
+    /** Header title. Required for `collapsible`. */
+    title?: React.ReactNode;
+    /** Secondary line under the title. */
+    subtitle?: React.ReactNode;
+    /** Content rendered at the end of the header — a `StatusBadge`, a link, etc. */
+    endSlot?: React.ReactNode;
+    /**
+     * Heading tag for `title` (for the document outline). The title stays body-sized unless
+     * `titleModifiers` is set.
+     * @default h3
+     */
+    titleElement?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /** Visual size / weight of the title (`Text` modifiers), independent of `titleElement`. */
+    titleModifiers?: TextModifiers;
+    /**
+     * Make the header a toggle that shows / hides the body. Provide a `title` (or, failing that,
+     * `ariaLabel`) so the toggle has an accessible name.
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * Initial open state (uncontrolled). Ignored when `open` is set.
+     * @default true
+     */
+    defaultOpen?: boolean;
+    /** Controlled open state. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Called with the next open state when the header toggles. */
+    onOpenChange?: (open: boolean) => void;
+    /** Footer content (e.g. `Button`s), divided from the body. */
+    actions?: React.ReactNode;
+    /** Emphasised summary / total row after the body, on a muted background. */
+    summary?: {
+        label: React.ReactNode;
+        value: React.ReactNode;
+    };
+    /**
+     * Show a leading checkbox to select the row.
+     * @default false
+     */
+    selectable?: boolean;
+    /** Controlled selected state. Pair with `onSelectedChange`. */
+    selected?: boolean;
+    /**
+     * Initial selected state in uncontrolled mode. Ignored when `selected` is provided.
+     * @default false
+     */
+    defaultSelected?: boolean;
+    /** Called with the next selected state when the checkbox toggles. */
+    onSelectedChange?: (selected: boolean) => void;
+    /**
+     * Label text size — `small` uses the 14px label style, `default` the 16px body style.
+     * @default default
+     */
+    labelSize?: 'small' | 'default';
+    /** Accessible name for the selection checkbox. Defaults to the `table-card.select-row` label. */
+    selectionLabel?: string;
+    /** Accessible name for the card region. */
+    ariaLabel?: string;
+    /** Root element id (also wires the collapsible ARIA). Auto-generated when omitted. */
+    id?: string;
+    /** Extra full-width body content after `rows` (e.g. child row-groups). Collapses with the body. */
+    children?: React.ReactNode;
+}
+export declare const TableCard: {
+    (props: TableCardProps): JSX.Element;
+    displayName: string;
+};
+export default TableCard;

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