@tedi-design-system/react 19.1.0-rc.8 → 19.1.0

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/form/date-field/date-field-helpers.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=4,c=8,l=e=>!!e&&!Array.isArray(e)&&!(e instanceof Date)&&"from"in e,f=(e,a,t)=>t&&l(a)&&a.from&&a.to?{from:t,to:void 0}:l(e)?e:void 0,D=e=>{const a=[];return e.disabled&&(Array.isArray(e.disabled)?a.push(...e.disabled):a.push(e.disabled)),e.minDate&&a.push({before:e.minDate}),e.maxDate&&a.push({after:e.maxDate}),e.disablePast&&a.push({before:new Date}),e.disableFuture&&a.push({after:new Date}),e.shouldDisableMonth&&a.push(t=>{var r;return((r=e.shouldDisableMonth)==null?void 0:r.call(e,t))??!1}),e.shouldDisableYear&&a.push(t=>{var r;return((r=e.shouldDisableYear)==null?void 0:r.call(e,t))??!1}),a},h=e=>{const a=new Date(2099,11,31),t=e.formatToParts(a),r=[],s=[];for(const o of t)o.type==="day"||o.type==="month"||o.type==="year"?r.push(o.type):o.type==="literal"&&r.length>0&&s.length<2&&s.push(o.value);return{fieldOrder:r,separators:s}},n=({fieldOrder:e,separators:a})=>{const t=r=>r.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");return e.map((r,s)=>{const o=r==="year"?"\\d{4}":"\\d{2}";return`${s>0?t(a[s-1]??""):""}(${o})`}).join("")};exports.CALENDAR_POPOVER_OFFSET=d;exports.CALENDAR_POPOVER_PADDING=c;exports.buildDateRegexSource=n;exports.buildDisabledMatchers=D;exports.getLocaleDateParts=h;exports.resolveRangeSelection=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=4,n=8,l=e=>!!e&&!Array.isArray(e)&&!(e instanceof Date)&&"from"in e,D=(e,a,t)=>{if(t&&l(a)&&a.from&&a.to)return{from:t,to:void 0};if(!l(e))return;const r=!!e.from&&!!e.to&&e.from.getTime()===e.to.getTime(),o=l(a)&&!!a.from&&!a.to;return r&&!o?{from:e.from,to:void 0}:e},c=e=>{const a=[];return e.disabled&&(Array.isArray(e.disabled)?a.push(...e.disabled):a.push(e.disabled)),e.minDate&&a.push({before:e.minDate}),e.maxDate&&a.push({after:e.maxDate}),e.disablePast&&a.push({before:new Date}),e.disableFuture&&a.push({after:new Date}),e.shouldDisableMonth&&a.push(t=>{var r;return((r=e.shouldDisableMonth)==null?void 0:r.call(e,t))??!1}),e.shouldDisableYear&&a.push(t=>{var r;return((r=e.shouldDisableYear)==null?void 0:r.call(e,t))??!1}),a},d=e=>{const a=new Date(2099,11,31),t=e.formatToParts(a),r=[],o=[];for(const s of t)s.type==="day"||s.type==="month"||s.type==="year"?r.push(s.type):s.type==="literal"&&r.length>0&&o.length<2&&o.push(s.value);return{fieldOrder:r,separators:o}},i=({fieldOrder:e,separators:a})=>{const t=r=>r.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");return e.map((r,o)=>{const s=r==="year"?"\\d{4}":"\\d{2}";return`${o>0?t(a[o-1]??""):""}(${s})`}).join("")};exports.CALENDAR_POPOVER_OFFSET=f;exports.CALENDAR_POPOVER_PADDING=n;exports.buildDateRegexSource=i;exports.buildDisabledMatchers=c;exports.getLocaleDateParts=d;exports.resolveRangeSelection=D;

package/src/tedi/components/form/date-field/date-field-helpers.d.ts

@@ -13,27 +13,22 @@ export declare const CALENDAR_POPOVER_OFFSET = 4;
 export declare const CALENDAR_POPOVER_PADDING = 8;
 export type SelectedValueLike = Date | Date[] | DateRange | undefined;
 /**
- * Range-selection click resolver. react-day-picker's default `addToRange`
- * keeps a completed `{ from, to }` range and only moves one of its ends when
- * the user clicks again — so after picking a start and an end, clicking a new
- * start instead drags the existing end. That surprises users who expect a
- * fresh click to begin a new range.
+ * Range-selection click resolver that fixes two quirks in react-day-picker's default `addToRange`:
+ * clicking on a completed range drags an existing end instead of starting over, and the first click
+ * on an empty range returns a same-day `{ from, to }` that reads as already-complete (issue #813).
  *
- * This normalises that: once a range is complete, the next click starts over
- * with `from` set to the clicked day and `to` cleared. While the range is
- * still being built (or empty), DayPicker's own result is passed through.
+ * So: a click on a complete range starts a new one (`from` set, `to` cleared); the first click on an
+ * empty range becomes a `to`-less start (re-clicking the same day keeps a single-day range);
+ * otherwise DayPicker's result passes through.
  *
  * @param computed - the range react-day-picker derived from the click
- * @param previous - the range that was selected before this click
- * @param clickedDay - the day the user just clicked
+ * @param previous - the range selected before this click
+ * @param clickedDay - the day just clicked
  */
 export declare const resolveRangeSelection: (computed: SelectedValueLike, previous: SelectedValueLike, clickedDay: Date | undefined) => DateRange | undefined;
 /**
- * Resolves the month the calendar should start on for any selection
- * shape. Used by both `DateField` (single / multiple / range Date(s)) and
- * `DateTimeField` (single Date or `{from, to}` range). For arrays the
- * earliest date wins; for ranges the `from` (or `to` if `from` is unset)
- * wins. Falls back to the explicit `fallback` and finally `new Date()`.
+ * Resolves the month the calendar should open on for any selection shape: a single `Date`, an array
+ * (earliest date wins), or a range (`from`, else `to`). Falls back to `fallback`, then `new Date()`.
  */
 export declare const getInitialMonth: (val: SelectedValueLike, fallback?: Date) => Date;
 /**
@@ -58,10 +53,8 @@ export interface DisabledMatcherInputs {
  */
 export declare const buildDisabledMatchers: (inputs: DisabledMatcherInputs) => Matcher[];
 /**
- * Field order + literal separators extracted from a locale's date format,
- * derived via `Intl.DateTimeFormat.formatToParts`. Used by parsers in
- * `DateField` (date-only) and `DateTimeField` (date + " HH:mm") to build
- * a regex that round-trips the displayed value in any locale.
+ * Field order + literal separators extracted from a locale's date format (via
+ * `Intl.DateTimeFormat.formatToParts`), used to build a locale-aware parsing regex.
  */
 export interface LocaleDateParts {
     fieldOrder: ('day' | 'month' | 'year')[];

package/src/tedi/components/form/date-field/date-field-helpers.es.js

@@ -1,29 +1,35 @@
-const d = 4, c = 8, l = (e) => !!e && !Array.isArray(e) && !(e instanceof Date) && "from" in e, h = (e, a, o) => o && l(a) && a.from && a.to ? { from: o, to: void 0 } : l(e) ? e : void 0, D = (e) => {
+const n = 4, h = 8, f = (e) => !!e && !Array.isArray(e) && !(e instanceof Date) && "from" in e, D = (e, a, t) => {
+  if (t && f(a) && a.from && a.to)
+    return { from: t, to: void 0 };
+  if (!f(e)) return;
+  const r = !!e.from && !!e.to && e.from.getTime() === e.to.getTime(), o = f(a) && !!a.from && !a.to;
+  return r && !o ? { from: e.from, to: void 0 } : e;
+}, d = (e) => {
   const a = [];
-  return e.disabled && (Array.isArray(e.disabled) ? a.push(...e.disabled) : a.push(e.disabled)), e.minDate && a.push({ before: e.minDate }), e.maxDate && a.push({ after: e.maxDate }), e.disablePast && a.push({ before: /* @__PURE__ */ new Date() }), e.disableFuture && a.push({ after: /* @__PURE__ */ new Date() }), e.shouldDisableMonth && a.push((o) => {
+  return e.disabled && (Array.isArray(e.disabled) ? a.push(...e.disabled) : a.push(e.disabled)), e.minDate && a.push({ before: e.minDate }), e.maxDate && a.push({ after: e.maxDate }), e.disablePast && a.push({ before: /* @__PURE__ */ new Date() }), e.disableFuture && a.push({ after: /* @__PURE__ */ new Date() }), e.shouldDisableMonth && a.push((t) => {
     var r;
-    return ((r = e.shouldDisableMonth) == null ? void 0 : r.call(e, o)) ?? !1;
-  }), e.shouldDisableYear && a.push((o) => {
+    return ((r = e.shouldDisableMonth) == null ? void 0 : r.call(e, t)) ?? !1;
+  }), e.shouldDisableYear && a.push((t) => {
     var r;
-    return ((r = e.shouldDisableYear) == null ? void 0 : r.call(e, o)) ?? !1;
+    return ((r = e.shouldDisableYear) == null ? void 0 : r.call(e, t)) ?? !1;
   }), a;
-}, n = (e) => {
-  const a = new Date(2099, 11, 31), o = e.formatToParts(a), r = [], s = [];
-  for (const t of o)
-    t.type === "day" || t.type === "month" || t.type === "year" ? r.push(t.type) : t.type === "literal" && r.length > 0 && s.length < 2 && s.push(t.value);
-  return { fieldOrder: r, separators: s };
-}, b = ({ fieldOrder: e, separators: a }) => {
-  const o = (r) => r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  return e.map((r, s) => {
-    const t = r === "year" ? "\\d{4}" : "\\d{2}";
-    return `${s > 0 ? o(a[s - 1] ?? "") : ""}(${t})`;
+}, c = (e) => {
+  const a = new Date(2099, 11, 31), t = e.formatToParts(a), r = [], o = [];
+  for (const s of t)
+    s.type === "day" || s.type === "month" || s.type === "year" ? r.push(s.type) : s.type === "literal" && r.length > 0 && o.length < 2 && o.push(s.value);
+  return { fieldOrder: r, separators: o };
+}, i = ({ fieldOrder: e, separators: a }) => {
+  const t = (r) => r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return e.map((r, o) => {
+    const s = r === "year" ? "\\d{4}" : "\\d{2}";
+    return `${o > 0 ? t(a[o - 1] ?? "") : ""}(${s})`;
   }).join("");
 };
 export {
-  d as CALENDAR_POPOVER_OFFSET,
-  c as CALENDAR_POPOVER_PADDING,
-  b as buildDateRegexSource,
-  D as buildDisabledMatchers,
-  n as getLocaleDateParts,
-  h as resolveRangeSelection
+  n as CALENDAR_POPOVER_OFFSET,
+  h as CALENDAR_POPOVER_PADDING,
+  i as buildDateRegexSource,
+  d as buildDisabledMatchers,
+  c as getLocaleDateParts,
+  D as resolveRangeSelection
 };