@tedi-design-system/react 19.1.2-rc.2 → 19.1.2-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "19.1.2-rc.2",
+  "version": "19.1.2-rc.3",
   "description": "TEDI Design System React component library — accessible, reusable UI components. Docs & live examples: https://storybook.tedi.ee/react/rc/",
   "type": "module",
   "sideEffects": false,

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

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

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

@@ -89,6 +89,14 @@ export interface TableCardProps extends BreakpointSupport<TableCardBreakpointPro
     open?: boolean;
     /** Called with the next open state when the header toggles. */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Style of the collapse indicator (only applies when `collapsible`), mirroring `CollapseButton`'s
+     * `arrowType`:
+     * - `default` — a plain chevron.
+     * - `secondary` — a circular, outlined arrow.
+     * @default default
+     */
+    arrowType?: 'default' | 'secondary';
     /** Footer content (e.g. `Button`s), divided from the body. */
     actions?: React.ReactNode;
     /** Emphasised summary / total row after the body, on a muted background. */

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

@@ -1,16 +1,16 @@
-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 = {
+import { jsx as e, jsxs as s, Fragment as Re } from "react/jsx-runtime";
+import b from "../../../../../external/classnames/index.es.js";
+import n from "react";
+import { Text as d } from "../../base/typography/text/text.es.js";
+import { CollapseButton as Te } from "../../buttons/collapse-button/collapse-button.es.js";
+import { Checkbox as ke } from "../../form/checkbox/checkbox.es.js";
+import { Card as g } from "../card/card.es.js";
+import { Label as xe } from "../label/label.es.js";
+import { TextGroupList as M } from "../text-group/text-group-list/text-group-list.es.js";
+import t from "./table-card.module.scss.es.js";
+import { useBreakpointProps as Be } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as ze } from "../../../providers/label-provider/use-labels.es.js";
+const We = {
   horizontal: {
     labelAlign: "right",
     valueAlign: "right",
@@ -18,178 +18,183 @@ const xe = {
     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,
+}, Ge = (o) => o.bold ? /* @__PURE__ */ e(d, { element: "span", modifiers: "bold", children: o.value }) : o.value, Y = (o, A) => typeof o == "string" ? /* @__PURE__ */ e(xe, { isSmall: A, children: o }) : o, He = (o) => {
+  const { getCurrentBreakpointProps: A } = Be(o.defaultServerBreakpoint), { getLabel: q } = ze(), {
+    rows: J,
+    title: a,
     subtitle: i,
     endSlot: p,
-    titleElement: z = "h3",
-    titleModifiers: m,
-    collapsible: n = !1,
-    defaultOpen: F = !0,
-    open: T,
-    onOpenChange: y,
+    titleElement: C = "h3",
+    titleModifiers: c,
+    collapsible: r = !1,
+    defaultOpen: K = !0,
+    open: x,
+    onOpenChange: L,
+    arrowType: Q = "default",
     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(
+    summary: _,
+    selectable: v = !1,
+    selected: z,
+    defaultSelected: X = !1,
+    onSelectedChange: N,
+    labelSize: W = "default",
+    selectionLabel: Z = q("table-card.select-row"),
+    ariaLabel: w,
+    id: ee,
+    children: G,
+    layout: H = "horizontal",
+    columns: te = 1,
+    labelWidth: le,
+    labelAlign: ae,
+    valueAlign: oe,
+    rowAlign: re = "start",
+    padding: ne = 1,
+    rowGap: R,
+    className: ie
+  } = A(o), se = H === "horizontal", y = We[H], O = ae ?? y.labelAlign, de = oe ?? y.valueAlign, T = le ?? y.labelWidth, ce = typeof R == "number" ? `${R}rem` : R ?? y.rowGap, me = n.useId(), h = ee ?? me, E = `${h}-body`, [be, pe] = n.useState(K), I = x !== void 0, m = r ? I ? x : be : !0, k = (l) => {
+    I || pe(l), L == null || L(l);
+  }, $ = `${h}-title`, P = n.useRef(null), j = n.useRef(m), D = n.useRef(k);
+  n.useLayoutEffect(() => {
+    j.current = m, D.current = k;
+  }), n.useEffect(() => {
+    const l = P.current;
+    if (!r || !l) return;
+    const S = (we) => {
+      we.target.closest("a, button, input, select, textarea, label") || D.current(!j.current);
+    };
+    return l.addEventListener("click", S), () => l.removeEventListener("click", S);
+  }, [r]);
+  const [he, ue] = n.useState(X), F = z !== void 0, fe = F ? z : he, ge = (l) => {
+    F || ue(l), N == null || N(l);
+  }, _e = C;
+  r && !a && !w && 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,
+  const ve = !!(v || a || i || p || r), u = !!B, ye = !!_, Se = !!G, U = r ? m || u : v, Ae = m && !U, Ce = ye || u || Se, Le = u, f = v && !r && !!a && !i, Ne = J.map((l) => ({
+    label: Y(l.label, W === "small"),
+    value: Ge(l),
+    ...l.colSpan ? { colSpan: l.colSpan } : {}
+  })), V = v ? /* @__PURE__ */ e(
+    ke,
     {
-      id: `${v}-select`,
-      name: `${v}-select`,
+      id: `${h}-select`,
+      name: `${h}-select`,
       value: "selected",
-      label: g ? /* @__PURE__ */ l(
-        b,
+      label: f ? /* @__PURE__ */ e(
+        d,
         {
           element: "span",
           color: "primary",
-          modifiers: m,
-          className: c(e["tedi-table-card__title"], {
-            [e["tedi-table-card__title--body"]]: !m
+          modifiers: c,
+          className: b(t["tedi-table-card__title"], {
+            [t["tedi-table-card__title--body"]]: !c
           }),
-          children: o
+          children: a
         }
-      ) : M,
-      hideLabel: !g,
-      checked: be,
-      onChange: (a, ve) => me(ve)
+      ) : Z,
+      hideLabel: !f,
+      checked: fe,
+      onChange: (l, S) => ge(S)
     }
   ) : 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,
+  return /* @__PURE__ */ s(g, { padding: 0, className: b(t["tedi-table-card"], ie), "aria-label": w, id: h, children: [
+    ve && /* @__PURE__ */ s(
+      g.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
+        padding: Ae ? { top: 1, right: 1, bottom: 0, left: 1 } : 1,
+        hasSeparator: U,
+        className: b(t["tedi-table-card__header"], {
+          [t["tedi-table-card__header--select-title"]]: f
         }),
         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,
+          f ? /* @__PURE__ */ e(_e, { className: t["tedi-table-card__heading"], children: V }) : V,
+          r ? /* @__PURE__ */ s("div", { ref: P, className: t["tedi-table-card__collapse-row"], children: [
+            /* @__PURE__ */ s("span", { className: t["tedi-table-card__title-group"], children: [
+              a && /* @__PURE__ */ e(
+                d,
+                {
+                  id: $,
+                  element: C,
+                  modifiers: c,
+                  className: b(t["tedi-table-card__title"], {
+                    [t["tedi-table-card__title--body"]]: !c
+                  }),
+                  children: a
+                }
+              ),
+              i && /* @__PURE__ */ e(d, { element: "span", color: "secondary", modifiers: "small", children: i })
+            ] }),
+            p && /* @__PURE__ */ e("span", { className: t["tedi-table-card__end-slot"], children: p }),
+            /* @__PURE__ */ e(
+              Te,
+              {
+                hideText: !0,
+                arrowType: Q,
+                open: m,
+                onOpenChange: k,
+                "aria-controls": E,
+                "aria-labelledby": a ? $ : void 0,
+                "aria-label": a ? void 0 : w
+              }
+            )
+          ] }) : /* @__PURE__ */ s(Re, { children: [
+            (a || i) && !f && /* @__PURE__ */ s("span", { className: t["tedi-table-card__title-group"], children: [
+              a && /* @__PURE__ */ e(
+                d,
                 {
-                  element: z,
-                  modifiers: m,
-                  className: c(e["tedi-table-card__title"], {
-                    [e["tedi-table-card__title--body"]]: !m
+                  element: C,
+                  modifiers: c,
+                  className: b(t["tedi-table-card__title"], {
+                    [t["tedi-table-card__title--body"]]: !c
                   }),
-                  children: o
+                  children: a
                 }
               ),
-              i && /* @__PURE__ */ l(b, { element: "span", color: "secondary", modifiers: "small", children: i })
+              i && /* @__PURE__ */ e(d, { element: "span", color: "secondary", modifiers: "small", children: i })
             ] }),
-            p && /* @__PURE__ */ l("div", { className: e["tedi-table-card__end-slot"], children: p })
+            p && /* @__PURE__ */ e("div", { className: t["tedi-table-card__end-slot"], children: p })
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ d(
+    /* @__PURE__ */ s(
       "div",
       {
-        id: W,
-        hidden: n && !s,
-        className: c({ [e["tedi-table-card__body--has-footer"]]: h }),
+        id: E,
+        hidden: r && !m,
+        className: b({ [t["tedi-table-card__body--has-footer"]]: u }),
         children: [
-          /* @__PURE__ */ l(u.Content, { padding: Z, hasSeparator: ue, children: /* @__PURE__ */ l(
-            D,
+          /* @__PURE__ */ e(g.Content, { padding: ne, hasSeparator: Ce, children: /* @__PURE__ */ e(
+            M,
             {
-              columns: q,
-              items: fe,
-              rowGap: oe,
-              ...le ? {
+              columns: te,
+              items: Ne,
+              rowGap: ce,
+              ...se ? {
                 type: "horizontal",
-                labelAlign: ae,
-                valueAlign: te,
-                labelWidth: H,
-                rowAlign: X
+                labelAlign: O,
+                valueAlign: de,
+                labelWidth: T,
+                rowAlign: re
               } : {
                 type: "vertical",
                 labelAlign: "left",
-                labelWidth: H
+                labelWidth: T
               }
             }
           ) }),
-          w,
-          P && /* @__PURE__ */ l(u.Content, { padding: 1, background: "tertiary", hasSeparator: _e, children: /* @__PURE__ */ l(
-            D,
+          G,
+          _ && /* @__PURE__ */ e(g.Content, { padding: 1, background: "tertiary", hasSeparator: Le, children: /* @__PURE__ */ e(
+            M,
             {
               type: "horizontal",
-              labelAlign: "left",
+              labelAlign: O,
               valueAlign: "right",
+              labelWidth: T,
               items: [
                 {
-                  label: r == null ? void 0 : r.label,
-                  value: /* @__PURE__ */ l(b, { element: "span", modifiers: "bold", children: r == null ? void 0 : r.value })
+                  label: Y(_.label, W === "small"),
+                  value: /* @__PURE__ */ e(d, { element: "span", modifiers: "bold", children: _.value })
                 }
               ]
             }
@@ -197,10 +202,10 @@ const xe = {
         ]
       }
     ),
-    h && /* @__PURE__ */ l(u.Content, { padding: { vertical: 0.5, horizontal: 1 }, className: e["tedi-table-card__actions"], children: B })
+    u && /* @__PURE__ */ e(g.Content, { padding: { vertical: 0.5, horizontal: 1 }, className: t["tedi-table-card__actions"], children: B })
   ] });
 };
-Be.displayName = "TableCard";
+He.displayName = "TableCard";
 export {
-  Be as TableCard
+  He as TableCard
 };

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

@@ -1 +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;
+"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__collapse-row":"tedi-table-card__collapse-row-0357173e","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__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

@@ -4,12 +4,10 @@ const e = {
   "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__collapse-row": "tedi-table-card__collapse-row-0357173e",
   "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"
 };