@tedi-design-system/react 18.0.0-rc.9 → 18.0.0

package/src/tedi/components/navigation/table-of-contents/components/table-of-contents-list/table-of-contents-list.es.js

@@ -0,0 +1,34 @@
+import { jsxs as f, Fragment as c, jsx as e } from "react/jsx-runtime";
+import d from "../../../../../../../external/classnames/index.es.js";
+import { useContext as b, useId as p } from "react";
+import { Heading as h } from "../../../../base/typography/heading/heading.es.js";
+import { TableOfContentsContext as u } from "../../table-of-contents.es.js";
+import o from "../../table-of-contents.module.scss.es.js";
+import { TableOfContentsRow as C } from "../table-of-contents-row/table-of-contents-row.es.js";
+import { useLabels as _ } from "../../../../../providers/label-provider/use-labels.es.js";
+const L = ({ nodes: i, heading: t }) => {
+  const { numbered: r } = b(u), { getLabel: a } = _(), s = p(), m = r ? "ol" : "ul";
+  return /* @__PURE__ */ f(c, { children: [
+    t && /* @__PURE__ */ e(h, { element: "h3", modifiers: "h4", id: s, className: o["tedi-table-of-contents__heading"], children: t }),
+    /* @__PURE__ */ e(
+      "nav",
+      {
+        "aria-labelledby": t ? s : void 0,
+        "aria-label": t ? void 0 : a("table-of-contents.title"),
+        children: /* @__PURE__ */ e(
+          m,
+          {
+            className: d(o["tedi-table-of-contents__list"], {
+              [o["tedi-table-of-contents__list--headless"]]: !t
+            }),
+            children: i.map((l, n) => /* @__PURE__ */ e(C, { node: l, depth: 1, index: n }, l.id ?? n))
+          }
+        )
+      }
+    )
+  ] });
+};
+L.displayName = "TableOfContentsList";
+export {
+  L as TableOfContentsList
+};

package/src/tedi/components/navigation/table-of-contents/components/table-of-contents-row/table-of-contents-row.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("../../../../../../../external/classnames/index.cjs.js"),R=require("react"),$=require("../../../../base/icon/icon.cjs.js"),y=require("../../../../misc/separator/separator.cjs.js"),S=require("../../table-of-contents.cjs.js"),t=require("../../table-of-contents.module.scss.cjs.js"),I=require("../../../../../providers/label-provider/use-labels.cjs.js"),r=({node:p,depth:i,index:d,numberPrefix:o})=>{const{activeId:_,showIcons:h,numbered:l,activeTrail:x}=R.useContext(S.TableOfContentsContext),{getLabel:j}=I.useLabels(),{id:s,content:v,children:a,isValid:n,separator:C,hideIcon:q}=p,O=!!(a!=null&&a.length),u=!!s&&s===_,g=O&&!!s&&x.has(s),w=Math.min(i,2),c=o?`${o}.${d+1}`:`${d+1}`,N=o?c:`${c}.`,T=l?"ol":"ul";return e.jsxs("li",{"aria-current":u?"true":void 0,className:m.default(t.default["tedi-table-of-contents__item"],{[t.default["tedi-table-of-contents__item--selected"]]:u}),children:[e.jsxs("span",{className:m.default(t.default["tedi-table-of-contents__row"],t.default[`tedi-table-of-contents__row--level-${w}`]),children:[h&&!q&&e.jsx($.Icon,{className:t.default["tedi-table-of-contents__icon"],name:n===!1?"warning":n===!0?"check":"circle",color:n===!1?"danger":n===!0?"success":"tertiary",label:j(n===!1?"table-of-contents.step-invalid":n===!0?"table-of-contents.step-valid":"table-of-contents.step-incomplete"),size:18}),l&&e.jsx("span",{className:t.default["tedi-table-of-contents__number"],"aria-hidden":"true",children:N}),e.jsx("span",{className:t.default["tedi-table-of-contents__content"],children:v})]}),g&&e.jsx(T,{className:t.default["tedi-table-of-contents__group"],children:a.map((f,b)=>e.jsx(r,{node:f,depth:i+1,index:b,numberPrefix:l?c:void 0},f.id??b))}),C&&e.jsx(y.Separator,{})]})};r.displayName="TableOfContentsRow";exports.TableOfContentsRow=r;

package/src/tedi/components/navigation/table-of-contents/components/table-of-contents-row/table-of-contents-row.d.ts

@@ -0,0 +1,13 @@
+import { TableOfContentsNode } from '../../table-of-contents';
+interface TableOfContentsRowProps {
+    node: TableOfContentsNode;
+    depth: number;
+    index: number;
+    /** Parent's number (e.g. `'2'`) for building hierarchical ordinals like `2.1`. */
+    numberPrefix?: string;
+}
+export declare const TableOfContentsRow: {
+    ({ node, depth, index, numberPrefix }: TableOfContentsRowProps): JSX.Element;
+    displayName: string;
+};
+export {};

package/src/tedi/components/navigation/table-of-contents/components/table-of-contents-row/table-of-contents-row.es.js

@@ -0,0 +1,59 @@
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import b from "../../../../../../../external/classnames/index.es.js";
+import { useContext as j } from "react";
+import { Icon as L } from "../../../../base/icon/icon.es.js";
+import { Separator as R } from "../../../../misc/separator/separator.es.js";
+import { TableOfContentsContext as S } from "../../table-of-contents.es.js";
+import e from "../../table-of-contents.module.scss.es.js";
+import { useLabels as k } from "../../../../../providers/label-provider/use-labels.es.js";
+const _ = ({ node: u, depth: r, index: i, numberPrefix: a }) => {
+  const { activeId: h, showIcons: v, numbered: l, activeTrail: N } = j(S), { getLabel: w } = k(), { id: n, content: C, children: s, isValid: t, separator: g, hideIcon: $ } = u, O = !!(s != null && s.length), m = !!n && n === h, T = O && !!n && N.has(n), x = Math.min(r, 2), c = a ? `${a}.${i + 1}` : `${i + 1}`, y = a ? c : `${c}.`, I = l ? "ol" : "ul";
+  return /* @__PURE__ */ p(
+    "li",
+    {
+      "aria-current": m ? "true" : void 0,
+      className: b(e["tedi-table-of-contents__item"], {
+        [e["tedi-table-of-contents__item--selected"]]: m
+      }),
+      children: [
+        /* @__PURE__ */ p(
+          "span",
+          {
+            className: b(e["tedi-table-of-contents__row"], e[`tedi-table-of-contents__row--level-${x}`]),
+            children: [
+              v && !$ && /* @__PURE__ */ o(
+                L,
+                {
+                  className: e["tedi-table-of-contents__icon"],
+                  name: t === !1 ? "warning" : t === !0 ? "check" : "circle",
+                  color: t === !1 ? "danger" : t === !0 ? "success" : "tertiary",
+                  label: w(
+                    t === !1 ? "table-of-contents.step-invalid" : t === !0 ? "table-of-contents.step-valid" : "table-of-contents.step-incomplete"
+                  ),
+                  size: 18
+                }
+              ),
+              l && /* @__PURE__ */ o("span", { className: e["tedi-table-of-contents__number"], "aria-hidden": "true", children: y }),
+              /* @__PURE__ */ o("span", { className: e["tedi-table-of-contents__content"], children: C })
+            ]
+          }
+        ),
+        T && /* @__PURE__ */ o(I, { className: e["tedi-table-of-contents__group"], children: s.map((d, f) => /* @__PURE__ */ o(
+          _,
+          {
+            node: d,
+            depth: r + 1,
+            index: f,
+            numberPrefix: l ? c : void 0
+          },
+          d.id ?? f
+        )) }),
+        g && /* @__PURE__ */ o(R, {})
+      ]
+    }
+  );
+};
+_.displayName = "TableOfContentsRow";
+export {
+  _ as TableOfContentsRow
+};

package/src/tedi/components/navigation/table-of-contents/index.d.ts

@@ -0,0 +1,3 @@
+export * from './table-of-contents';
+export * from './components/table-of-contents-item/table-of-contents-item';
+export * from './components/table-of-contents-collapsible/table-of-contents-collapsible';

package/src/tedi/components/navigation/table-of-contents/table-of-contents.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),y=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),L=require("../../misc/affix/affix.cjs.js"),S=require("./components/table-of-contents-collapsible/table-of-contents-collapsible.cjs.js"),g=require("./components/table-of-contents-item/table-of-contents-item.cjs.js"),k=require("./components/table-of-contents-list/table-of-contents-list.cjs.js"),m=require("./table-of-contents.module.scss.cjs.js"),w=require("../../../providers/label-provider/use-labels.cjs.js"),M=require("../../content/card/card.cjs.js"),E=require("../../content/card/card-content/card-content.cjs.js"),q=l.createContext({activeTrail:new Set}),h=n=>l.isValidElement(n)&&n.type===g.TableOfContentsItem,p=n=>l.Children.toArray(n).filter(h).map(c=>{const{id:s,isValid:i,separator:o,hideIcon:a,children:e}=c.props,r=l.Children.toArray(e),d=r.filter(h),u=r.filter(b=>!h(b));return{id:s,isValid:i,separator:o,hideIcon:a,content:t.jsx(t.Fragment,{children:u}),children:d.length?p(e):void 0}}),j=(n,c)=>{const s=new Set;if(!c)return s;const i=(o,a)=>{for(const e of o){const r=e.id?[...a,e.id]:a;if(e.id===c||e.children&&i(e.children,r))return r.forEach(d=>s.add(d)),!0}return!1};return i(n,[]),s};function f(n){const{getLabel:c}=w.useLabels(),{children:s,heading:i,activeId:o,showIcons:a=!1,numbered:e=!1,sticky:r=!0,variant:d="default",padding:u,className:b}=n,I=i===void 0?c("table-of-contents.title"):i,C=l.useMemo(()=>p(s),[s]),x=l.useMemo(()=>j(C,o),[C,o]),N=l.useMemo(()=>({activeId:o,showIcons:a,numbered:e,activeTrail:x}),[o,a,e,x]),A=u!==void 0?{"--tedi-table-of-contents-padding":`${u}rem`}:void 0,T=t.jsx("div",{className:y.default(m.default["tedi-table-of-contents"],{[m.default["tedi-table-of-contents--transparent"]]:d==="transparent"}),style:A,children:t.jsx(k.TableOfContentsList,{nodes:C,heading:I})}),v=y.default({[m.default["tedi-table-of-contents--sticky"]]:r},b),O=d==="transparent"?t.jsx("div",{className:v,children:T}):t.jsx(M.Card,{className:v,children:t.jsx(E.CardContent,{padding:0,children:T})});return t.jsx(q.Provider,{value:N,children:r?t.jsx(L.Affix,{position:"sticky",top:1.5,bottom:1.5,children:O}):O})}f.displayName="TableOfContents";f.Item=g.TableOfContentsItem;f.Collapsible=S.TableOfContentsCollapsible;exports.TableOfContents=f;exports.TableOfContentsContext=q;exports.buildActiveTrail=j;exports.childrenToNodes=p;

package/src/tedi/components/navigation/table-of-contents/table-of-contents.d.ts

@@ -0,0 +1,88 @@
+import { ReactNode } from 'react';
+import { TableOfContentsItemProps } from './components/table-of-contents-item/table-of-contents-item';
+export interface TableOfContentsProps {
+    /**
+     * `TableOfContents.Item` elements. An item's non-`Item` children are its
+     * link / label; nested `TableOfContents.Item` children become its sub-items.
+     */
+    children: ReactNode;
+    /**
+     * Heading rendered above the list. Defaults to the localised "Table of
+     * contents" label; pass `null` to render it headless (no visible heading —
+     * the navigation keeps an accessible name via `aria-label`).
+     */
+    heading?: string | null;
+    /**
+     * Visual variant:
+     * - `default` — rendered inside a bordered `Card`.
+     * - `transparent` — no card chrome (border / background); the list sits
+     *   directly on the page, with a continuous grey left rail (the active item's
+     *   segment turns blue).
+     * @default default
+     */
+    variant?: 'default' | 'transparent';
+    /**
+     * Inner padding of the container, in rem — the spacing between the card edge and the
+     * heading / items. Defaults to the card's medium padding token.
+     */
+    padding?: number;
+    /**
+     * Id of the currently active item. The active item gets the left accent bar
+     * and active link colour; the branch leading to it auto-expands its nested
+     * children.
+     */
+    activeId?: string;
+    /**
+     * Show a validation glyph before each item (multistep-form usage). Each state uses a distinct
+     * icon shape (not colour alone) with a localised text alternative: a check for `isValid === true`,
+     * an empty circle for `undefined` (not completed), and a warning for `isValid === false`.
+     * @default false
+     */
+    showIcons?: boolean;
+    /**
+     * Render the list as an ordered list with auto-generated hierarchical numbers
+     * (`1.`, `2.`, `2.1`, …) shown before each item.
+     * @default false
+     */
+    numbered?: boolean;
+    /**
+     * Stick the card to the viewport while scrolling.
+     * @default true
+     */
+    sticky?: boolean;
+    /**
+     * Additional class name on the root element.
+     */
+    className?: string;
+}
+/** Internal data shape derived from the `TableOfContents.Item` element tree. */
+export interface TableOfContentsNode {
+    id?: string;
+    content: ReactNode;
+    children?: TableOfContentsNode[];
+    isValid?: boolean;
+    separator?: boolean;
+    hideIcon?: boolean;
+}
+interface TableOfContentsContextValue {
+    activeId?: string;
+    showIcons?: boolean;
+    numbered?: boolean;
+    activeTrail: Set<string>;
+}
+export declare const TableOfContentsContext: import('react').Context<TableOfContentsContextValue>;
+export declare const childrenToNodes: (children: ReactNode) => TableOfContentsNode[];
+export declare const buildActiveTrail: (nodes: TableOfContentsNode[], activeId?: string) => Set<string>;
+export declare function TableOfContents(props: TableOfContentsProps): JSX.Element;
+export declare namespace TableOfContents {
+    var displayName: string;
+    var Item: {
+        (_props: TableOfContentsItemProps): JSX.Element | null;
+        displayName: string;
+    };
+    var Collapsible: {
+        (props: import(".").TableOfContentsCollapsibleProps): JSX.Element;
+        displayName: string;
+    };
+}
+export default TableOfContents;

package/src/tedi/components/navigation/table-of-contents/table-of-contents.es.js

@@ -0,0 +1,71 @@
+import { jsx as i, Fragment as w } from "react/jsx-runtime";
+import g from "../../../../../external/classnames/index.es.js";
+import { useMemo as p, createContext as E, Children as N, isValidElement as L } from "react";
+import { Affix as S } from "../../misc/affix/affix.es.js";
+import { TableOfContentsCollapsible as V } from "./components/table-of-contents-collapsible/table-of-contents-collapsible.es.js";
+import { TableOfContentsItem as x } from "./components/table-of-contents-item/table-of-contents-item.es.js";
+import { TableOfContentsList as j } from "./components/table-of-contents-list/table-of-contents-list.es.js";
+import h from "./table-of-contents.module.scss.es.js";
+import { useLabels as F } from "../../../providers/label-provider/use-labels.es.js";
+import { Card as H } from "../../content/card/card.es.js";
+import { CardContent as M } from "../../content/card/card-content/card-content.es.js";
+const P = E({
+  activeTrail: /* @__PURE__ */ new Set()
+}), b = (e) => L(e) && e.type === x, I = (e) => N.toArray(e).filter(b).map((l) => {
+  const { id: n, isValid: s, separator: o, hideIcon: a, children: t } = l.props, r = N.toArray(t), c = r.filter(b), d = r.filter((m) => !b(m));
+  return {
+    id: n,
+    isValid: s,
+    separator: o,
+    hideIcon: a,
+    content: /* @__PURE__ */ i(w, { children: d }),
+    children: c.length ? I(t) : void 0
+  };
+}), $ = (e, l) => {
+  const n = /* @__PURE__ */ new Set();
+  if (!l) return n;
+  const s = (o, a) => {
+    for (const t of o) {
+      const r = t.id ? [...a, t.id] : a;
+      if (t.id === l || t.children && s(t.children, r))
+        return r.forEach((c) => n.add(c)), !0;
+    }
+    return !1;
+  };
+  return s(e, []), n;
+};
+function u(e) {
+  const { getLabel: l } = F(), {
+    children: n,
+    heading: s,
+    activeId: o,
+    showIcons: a = !1,
+    numbered: t = !1,
+    sticky: r = !0,
+    variant: c = "default",
+    padding: d,
+    className: m
+  } = e, O = s === void 0 ? l("table-of-contents.title") : s, f = p(() => I(n), [n]), C = p(() => $(f, o), [f, o]), A = p(
+    () => ({ activeId: o, showIcons: a, numbered: t, activeTrail: C }),
+    [o, a, t, C]
+  ), k = d !== void 0 ? { "--tedi-table-of-contents-padding": `${d}rem` } : void 0, v = /* @__PURE__ */ i(
+    "div",
+    {
+      className: g(h["tedi-table-of-contents"], {
+        [h["tedi-table-of-contents--transparent"]]: c === "transparent"
+      }),
+      style: k,
+      children: /* @__PURE__ */ i(j, { nodes: f, heading: O })
+    }
+  ), y = g({ [h["tedi-table-of-contents--sticky"]]: r }, m), T = c === "transparent" ? /* @__PURE__ */ i("div", { className: y, children: v }) : /* @__PURE__ */ i(H, { className: y, children: /* @__PURE__ */ i(M, { padding: 0, children: v }) });
+  return /* @__PURE__ */ i(P.Provider, { value: A, children: r ? /* @__PURE__ */ i(S, { position: "sticky", top: 1.5, bottom: 1.5, children: T }) : T });
+}
+u.displayName = "TableOfContents";
+u.Item = x;
+u.Collapsible = V;
+export {
+  u as TableOfContents,
+  P as TableOfContentsContext,
+  $ as buildActiveTrail,
+  I as childrenToNodes
+};

package/src/tedi/components/navigation/table-of-contents/table-of-contents.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-table-of-contents":"tedi-table-of-contents-ce55e86d","tedi-table-of-contents--transparent":"tedi-table-of-contents--transparent-067ea2c2","tedi-table-of-contents__list":"tedi-table-of-contents__list-94025876","tedi-table-of-contents--sticky":"tedi-table-of-contents--sticky-1ee87047","tedi-table-of-contents__heading":"tedi-table-of-contents__heading-c6b7a6df","tedi-table-of-contents__group":"tedi-table-of-contents__group-590e4963","tedi-table-of-contents__list--headless":"tedi-table-of-contents__list--headless-99c1bab5","tedi-table-of-contents__item":"tedi-table-of-contents__item-29f072b5","tedi-table-of-contents__row":"tedi-table-of-contents__row-fb686650","tedi-table-of-contents__row--level-2":"tedi-table-of-contents__row--level-2-4fec675b","tedi-table-of-contents__icon":"tedi-table-of-contents__icon-5bb71193","tedi-table-of-contents__number":"tedi-table-of-contents__number-693b03b7","tedi-table-of-contents__content":"tedi-table-of-contents__content-8a05ad59","tedi-table-of-contents__item--selected":"tedi-table-of-contents__item--selected-632958d1","tedi-table-of-contents__bar":"tedi-table-of-contents__bar-f4daef0b","tedi-table-of-contents__bar--static":"tedi-table-of-contents__bar--static-f919cf73","tedi-table-of-contents__bar-title":"tedi-table-of-contents__bar-title-b82ab4ed","tedi-table-of-contents__sheet":"tedi-table-of-contents__sheet-16e41b54","tedi-table-of-contents__sheet-header":"tedi-table-of-contents__sheet-header-ec904c54"};exports.default=t;

package/src/tedi/components/navigation/table-of-contents/table-of-contents.module.scss.es.js

@@ -0,0 +1,24 @@
+const t = {
+  "tedi-table-of-contents": "tedi-table-of-contents-ce55e86d",
+  "tedi-table-of-contents--transparent": "tedi-table-of-contents--transparent-067ea2c2",
+  "tedi-table-of-contents__list": "tedi-table-of-contents__list-94025876",
+  "tedi-table-of-contents--sticky": "tedi-table-of-contents--sticky-1ee87047",
+  "tedi-table-of-contents__heading": "tedi-table-of-contents__heading-c6b7a6df",
+  "tedi-table-of-contents__group": "tedi-table-of-contents__group-590e4963",
+  "tedi-table-of-contents__list--headless": "tedi-table-of-contents__list--headless-99c1bab5",
+  "tedi-table-of-contents__item": "tedi-table-of-contents__item-29f072b5",
+  "tedi-table-of-contents__row": "tedi-table-of-contents__row-fb686650",
+  "tedi-table-of-contents__row--level-2": "tedi-table-of-contents__row--level-2-4fec675b",
+  "tedi-table-of-contents__icon": "tedi-table-of-contents__icon-5bb71193",
+  "tedi-table-of-contents__number": "tedi-table-of-contents__number-693b03b7",
+  "tedi-table-of-contents__content": "tedi-table-of-contents__content-8a05ad59",
+  "tedi-table-of-contents__item--selected": "tedi-table-of-contents__item--selected-632958d1",
+  "tedi-table-of-contents__bar": "tedi-table-of-contents__bar-f4daef0b",
+  "tedi-table-of-contents__bar--static": "tedi-table-of-contents__bar--static-f919cf73",
+  "tedi-table-of-contents__bar-title": "tedi-table-of-contents__bar-title-b82ab4ed",
+  "tedi-table-of-contents__sheet": "tedi-table-of-contents__sheet-16e41b54",
+  "tedi-table-of-contents__sheet-header": "tedi-table-of-contents__sheet-header-ec904c54"
+};
+export {
+  t as default
+};

package/src/tedi/components/navigation/tabs/tabs-content/tabs-content.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),l=require("../../../../../../external/classnames/index.cjs.js"),i=require("../tabs.module.scss.cjs.js"),u=require("../tabs-context.cjs.js"),t=n=>{const{id:e,children:a,className:s}=n,{currentTab:o}=u.useTabsContext();return e&&o!==e?null:r.jsx("div",{"data-name":"tabs-content",id:e?`${e}-panel`:void 0,role:"tabpanel","aria-labelledby":e??void 0,className:l.default(i.default["tedi-tabs__content"],s),children:a})};t.displayName="TabsContent";exports.TabsContent=t;exports.default=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("../../../../../../external/classnames/index.cjs.js"),l=require("../tabs.module.scss.cjs.js"),d=require("../tabs-context.cjs.js"),t=n=>{const{id:e,children:a,className:s}=n,{currentTab:o}=d.useTabsContext();return e&&o!==e?null:r.jsx("div",{"data-name":"tabs-content",id:e?`${e}-panel`:void 0,role:"tabpanel","aria-labelledby":e??void 0,className:i.default(l.default["tedi-tabs__content"],s),children:a})};t.displayName="TabsContent";exports.TabsContent=t;

package/src/tedi/components/navigation/tabs/tabs-content/tabs-content.es.js

@@ -1,23 +1,22 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as s } from "react/jsx-runtime";
 import r from "../../../../../../external/classnames/index.es.js";
-import l from "../tabs.module.scss.es.js";
-import { useTabsContext as i } from "../tabs-context.es.js";
+import i from "../tabs.module.scss.es.js";
+import { useTabsContext as l } from "../tabs-context.es.js";
 const m = (a) => {
-  const { id: t, children: e, className: s } = a, { currentTab: n } = i();
-  return t && n !== t ? null : /* @__PURE__ */ o(
+  const { id: t, children: e, className: n } = a, { currentTab: o } = l();
+  return t && o !== t ? null : /* @__PURE__ */ s(
     "div",
     {
       "data-name": "tabs-content",
       id: t ? `${t}-panel` : void 0,
       role: "tabpanel",
       "aria-labelledby": t ?? void 0,
-      className: r(l["tedi-tabs__content"], s),
+      className: r(i["tedi-tabs__content"], n),
       children: e
     }
   );
 };
 m.displayName = "TabsContent";
 export {
-  m as TabsContent,
-  m as default
+  m as TabsContent
 };

package/src/tedi/components/navigation/tabs/tabs-list/tabs-list.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),g=require("../../../../../../external/classnames/index.cjs.js"),t=require("react"),D=require("../../../base/icon/icon.cjs.js"),k=require("../../../misc/print/print.cjs.js"),o=require("../../../overlays/dropdown/dropdown.cjs.js"),i=require("../tabs.module.scss.cjs.js"),z=require("../tabs-context.cjs.js"),P=require("../../../../providers/label-provider/use-labels.cjs.js"),A=require("../../../../helpers/hooks/use-scroll-fade.cjs.js"),h=R=>{const{children:a,className:S,"aria-label":j,"aria-labelledby":y,printVisibility:L="show",overflowMode:r="dropdown"}=R,{getLabel:q}=P.useLabels(),{currentTab:W,setCurrentTab:T}=z.useTabsContext(),w=t.useRef(null),c=t.useRef(null),[d,u]=t.useState(!1),f=t.useRef(!1),b=t.useRef(0);f.current=d;const{scrollRef:m,canScrollStart:C,canScrollEnd:M,handleScroll:N}=A.useScrollFade({direction:"horizontal"}),O=t.useCallback(e=>{c.current=e,r==="scroll"&&m(e)},[r,m]),p=t.useMemo(()=>t.Children.toArray(a).filter(t.isValidElement),[a]),_=t.useMemo(()=>{const e=[];return p.forEach(l=>{const n=l.props;e.push({id:n.id,label:n.children,disabled:n.disabled})}),e},[p]),v=r==="dropdown"&&d&&_.length>1,E=_.filter(e=>e.id!==W),I=e=>{e&&T(e)};return t.useLayoutEffect(()=>{if(r!=="dropdown")return;const e=c.current;!e||f.current||(b.current=e.scrollWidth,e.scrollWidth>e.clientWidth&&e.clientWidth>0&&u(!0))},[r,d,p]),t.useEffect(()=>{if(r!=="dropdown")return;const e=w.current,l=c.current;if(!e||!l)return;const n=()=>{f.current?b.current<=e.clientWidth&&u(!1):l.scrollWidth>l.clientWidth&&l.clientWidth>0&&(b.current=l.scrollWidth,u(!0))},x=new ResizeObserver(n);return x.observe(e),()=>x.disconnect()},[r]),s.jsx(k.Print,{visibility:L,children:s.jsxs("div",{ref:w,className:g.default(i.default["tedi-tabs__list-wrapper"],{[i.default["tedi-tabs__list-wrapper--scroll-fade-left"]]:r==="scroll"&&C,[i.default["tedi-tabs__list-wrapper--scroll-fade-right"]]:r==="scroll"&&M}),children:[s.jsx("div",{ref:O,"data-name":"tabs-list",role:"tablist","aria-label":j,"aria-labelledby":y,className:g.default(i.default["tedi-tabs__list"],{[i.default["tedi-tabs__list--overflow"]]:v},{[i.default["tedi-tabs__list--scroll"]]:r==="scroll"},S),onScroll:r==="scroll"?N:void 0,children:a}),v&&s.jsx("div",{className:i.default["tedi-tabs__more-wrapper"],children:s.jsxs(o.Dropdown,{placement:"bottom-end",children:[s.jsx(o.Dropdown.Trigger,{children:s.jsxs("button",{"data-name":"tabs-more-btn",type:"button",className:i.default["tedi-tabs__more-btn"],children:[q("tabs.more"),s.jsx(D.Icon,{name:"expand_more",size:18})]})}),s.jsx(o.Dropdown.Content,{children:E.map((e,l)=>s.jsx(o.Dropdown.Item,{index:l,disabled:e.disabled,onClick:()=>I(e.id),children:e.label},e.id))})]})})]})})};h.displayName="TabsList";exports.TabsList=h;exports.default=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),m=require("../../../../../../external/classnames/index.cjs.js"),r=require("react"),W=require("../../../base/icon/icon.cjs.js"),z=require("../../../misc/print/print.cjs.js"),i=require("../../../overlays/dropdown/dropdown.cjs.js"),o=require("../tabs.module.scss.cjs.js"),P=require("../tabs-context.cjs.js"),A=require("../../../../providers/label-provider/use-labels.cjs.js"),F=require("../../../../helpers/hooks/use-scroll-fade.cjs.js"),_=v=>{const{children:c,className:x,"aria-label":L,"aria-labelledby":g,printVisibility:S="show",overflowMode:s="dropdown",dropdownLabel:j}=v,{getLabel:y}=A.useLabels(),{currentTab:q,setCurrentTab:C}=P.useTabsContext(),d=r.useRef(null),b=r.useRef(null),[R,T]=r.useState(!1),{scrollRef:f,canScrollStart:M,canScrollEnd:N,handleScroll:E}=F.useScrollFade({direction:"horizontal"}),I=r.useCallback(e=>{b.current=e,s==="scroll"&&f(e)},[s,f]),u=r.useMemo(()=>r.Children.toArray(c).filter(r.isValidElement),[c]),p=r.useMemo(()=>{const e=[];return u.forEach(t=>{const a=t.props;e.push({id:a.id,label:a.children,disabled:a.disabled})}),e},[u]),w=s==="dropdown"&&R&&p.length>1,O=p.filter(e=>e.id!==q),k=e=>{e&&C(e)},n=r.useCallback(()=>{const e=d.current,t=b.current;if(!e||!t||t.clientWidth===0)return;const a=o.default["tedi-tabs__list--overflow"],h=t.classList.contains(a);h&&t.classList.remove(a);const D=t.scrollWidth;h&&t.classList.add(a),T(D>e.clientWidth)},[]);return r.useLayoutEffect(()=>{s==="dropdown"&&n()},[s,n,u]),r.useEffect(()=>{if(s!=="dropdown")return;const e=d.current;if(!e)return;const t=new ResizeObserver(n);return t.observe(e),()=>t.disconnect()},[s,n]),l.jsx(z.Print,{visibility:S,children:l.jsxs("div",{ref:d,className:m.default(o.default["tedi-tabs__list-wrapper"],{[o.default["tedi-tabs__list-wrapper--scroll-fade-left"]]:s==="scroll"&&M,[o.default["tedi-tabs__list-wrapper--scroll-fade-right"]]:s==="scroll"&&N}),children:[l.jsx("div",{ref:I,"data-name":"tabs-list",role:"tablist","aria-label":L,"aria-labelledby":g,className:m.default(o.default["tedi-tabs__list"],{[o.default["tedi-tabs__list--overflow"]]:w},{[o.default["tedi-tabs__list--scroll"]]:s==="scroll"},x),onScroll:s==="scroll"?E:void 0,children:c}),w&&l.jsx("div",{className:o.default["tedi-tabs__more-wrapper"],children:l.jsxs(i.Dropdown,{placement:"bottom-end",children:[l.jsx(i.Dropdown.Trigger,{children:l.jsxs("button",{"data-name":"tabs-more-btn",type:"button",className:o.default["tedi-tabs__more-btn"],children:[j??y("tabs.more"),l.jsx(W.Icon,{name:"expand_more",size:18})]})}),l.jsx(i.Dropdown.Content,{children:O.map((e,t)=>l.jsx(i.Dropdown.Item,{index:t,disabled:e.disabled,onClick:()=>k(e.id),children:e.label},e.id))})]})})]})})};_.displayName="TabsList";exports.TabsList=_;

package/src/tedi/components/navigation/tabs/tabs-list/tabs-list.d.ts

@@ -29,6 +29,10 @@ export interface TabsListProps {
      * @default 'dropdown'
      */
     overflowMode?: 'dropdown' | 'scroll';
+    /**
+     * Label for the overflow dropdown trigger. Defaults to the `tabs.more` label.
+     */
+    dropdownLabel?: string;
 }
 export declare const TabsList: {
     (props: TabsListProps): import("react/jsx-runtime").JSX.Element;

package/src/tedi/components/navigation/tabs/tabs-list/tabs-list.es.js

@@ -1,92 +1,94 @@
-import { jsx as s, jsxs as h } from "react/jsx-runtime";
-import R from "../../../../../../external/classnames/index.es.js";
-import i, { useRef as a, useState as A, useCallback as P, useLayoutEffect as V, useEffect as B } from "react";
-import { Icon as D } from "../../../base/icon/icon.es.js";
-import { Print as F } from "../../../misc/print/print.es.js";
+import { jsx as o, jsxs as f } from "react/jsx-runtime";
+import _ from "../../../../../../external/classnames/index.es.js";
+import i, { useRef as v, useState as V, useCallback as L, useLayoutEffect as B, useEffect as D } from "react";
+import { Icon as F } from "../../../base/icon/icon.es.js";
+import { Print as q } from "../../../misc/print/print.es.js";
 import { Dropdown as n } from "../../../overlays/dropdown/dropdown.es.js";
-import l from "../tabs.module.scss.es.js";
-import { useTabsContext as q } from "../tabs-context.es.js";
-import { useLabels as G } from "../../../../providers/label-provider/use-labels.es.js";
-import { useScrollFade as H } from "../../../../helpers/hooks/use-scroll-fade.es.js";
-const J = (S) => {
+import s from "../tabs.module.scss.es.js";
+import { useTabsContext as G } from "../tabs-context.es.js";
+import { useLabels as H } from "../../../../providers/label-provider/use-labels.es.js";
+import { useScrollFade as J } from "../../../../helpers/hooks/use-scroll-fade.es.js";
+const K = (g) => {
   const {
     children: c,
-    className: W,
-    "aria-label": L,
-    "aria-labelledby": N,
-    printVisibility: C = "show",
-    overflowMode: r = "dropdown"
-  } = S, { getLabel: T } = G(), { currentTab: x, setCurrentTab: E } = q(), w = a(null), d = a(null), [f, b] = A(!1), m = a(!1), u = a(0);
-  m.current = f;
-  const {
-    scrollRef: _,
-    canScrollStart: I,
-    canScrollEnd: M,
-    handleScroll: O
-  } = H({ direction: "horizontal" }), k = P(
+    className: y,
+    "aria-label": S,
+    "aria-labelledby": C,
+    printVisibility: R = "show",
+    overflowMode: t = "dropdown",
+    dropdownLabel: N
+  } = g, { getLabel: T } = H(), { currentTab: x, setCurrentTab: E } = G(), d = v(null), m = v(null), [I, M] = V(!1), {
+    scrollRef: p,
+    canScrollStart: O,
+    canScrollEnd: W,
+    handleScroll: k
+  } = J({ direction: "horizontal" }), z = L(
     (e) => {
-      d.current = e, r === "scroll" && _(e);
+      m.current = e, t === "scroll" && p(e);
     },
-    [r, _]
-  ), p = i.useMemo(() => i.Children.toArray(c).filter(i.isValidElement), [c]), v = i.useMemo(() => {
+    [t, p]
+  ), b = i.useMemo(() => i.Children.toArray(c).filter(i.isValidElement), [c]), u = i.useMemo(() => {
     const e = [];
-    return p.forEach((t) => {
-      const o = t.props;
-      e.push({ id: o.id, label: o.children, disabled: o.disabled });
+    return b.forEach((r) => {
+      const l = r.props;
+      e.push({ id: l.id, label: l.children, disabled: l.disabled });
     }), e;
-  }, [p]), g = r === "dropdown" && f && v.length > 1, z = v.filter((e) => e.id !== x), j = (e) => {
+  }, [b]), h = t === "dropdown" && I && u.length > 1, j = u.filter((e) => e.id !== x), A = (e) => {
     e && E(e);
-  };
-  return V(() => {
-    if (r !== "dropdown") return;
+  }, a = L(() => {
+    const e = d.current, r = m.current;
+    if (!e || !r || r.clientWidth === 0) return;
+    const l = s["tedi-tabs__list--overflow"], w = r.classList.contains(l);
+    w && r.classList.remove(l);
+    const P = r.scrollWidth;
+    w && r.classList.add(l), M(P > e.clientWidth);
+  }, []);
+  return B(() => {
+    t === "dropdown" && a();
+  }, [t, a, b]), D(() => {
+    if (t !== "dropdown") return;
     const e = d.current;
-    !e || m.current || (u.current = e.scrollWidth, e.scrollWidth > e.clientWidth && e.clientWidth > 0 && b(!0));
-  }, [r, f, p]), B(() => {
-    if (r !== "dropdown") return;
-    const e = w.current, t = d.current;
-    if (!e || !t) return;
-    const o = () => {
-      m.current ? u.current <= e.clientWidth && b(!1) : t.scrollWidth > t.clientWidth && t.clientWidth > 0 && (u.current = t.scrollWidth, b(!0));
-    }, y = new ResizeObserver(o);
-    return y.observe(e), () => y.disconnect();
-  }, [r]), /* @__PURE__ */ s(F, { visibility: C, children: /* @__PURE__ */ h(
+    if (!e) return;
+    const r = new ResizeObserver(a);
+    return r.observe(e), () => r.disconnect();
+  }, [t, a]), /* @__PURE__ */ o(q, { visibility: R, children: /* @__PURE__ */ f(
     "div",
     {
-      ref: w,
-      className: R(l["tedi-tabs__list-wrapper"], {
-        [l["tedi-tabs__list-wrapper--scroll-fade-left"]]: r === "scroll" && I,
-        [l["tedi-tabs__list-wrapper--scroll-fade-right"]]: r === "scroll" && M
+      ref: d,
+      className: _(s["tedi-tabs__list-wrapper"], {
+        [s["tedi-tabs__list-wrapper--scroll-fade-left"]]: t === "scroll" && O,
+        [s["tedi-tabs__list-wrapper--scroll-fade-right"]]: t === "scroll" && W
       }),
       children: [
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ o(
           "div",
           {
-            ref: k,
+            ref: z,
             "data-name": "tabs-list",
             role: "tablist",
-            "aria-label": L,
-            "aria-labelledby": N,
-            className: R(
-              l["tedi-tabs__list"],
-              { [l["tedi-tabs__list--overflow"]]: g },
-              { [l["tedi-tabs__list--scroll"]]: r === "scroll" },
-              W
+            "aria-label": S,
+            "aria-labelledby": C,
+            className: _(
+              s["tedi-tabs__list"],
+              { [s["tedi-tabs__list--overflow"]]: h },
+              { [s["tedi-tabs__list--scroll"]]: t === "scroll" },
+              y
             ),
-            onScroll: r === "scroll" ? O : void 0,
+            onScroll: t === "scroll" ? k : void 0,
             children: c
           }
         ),
-        g && /* @__PURE__ */ s("div", { className: l["tedi-tabs__more-wrapper"], children: /* @__PURE__ */ h(n, { placement: "bottom-end", children: [
-          /* @__PURE__ */ s(n.Trigger, { children: /* @__PURE__ */ h("button", { "data-name": "tabs-more-btn", type: "button", className: l["tedi-tabs__more-btn"], children: [
-            T("tabs.more"),
-            /* @__PURE__ */ s(D, { name: "expand_more", size: 18 })
+        h && /* @__PURE__ */ o("div", { className: s["tedi-tabs__more-wrapper"], children: /* @__PURE__ */ f(n, { placement: "bottom-end", children: [
+          /* @__PURE__ */ o(n.Trigger, { children: /* @__PURE__ */ f("button", { "data-name": "tabs-more-btn", type: "button", className: s["tedi-tabs__more-btn"], children: [
+            N ?? T("tabs.more"),
+            /* @__PURE__ */ o(F, { name: "expand_more", size: 18 })
           ] }) }),
-          /* @__PURE__ */ s(n.Content, { children: z.map((e, t) => /* @__PURE__ */ s(
+          /* @__PURE__ */ o(n.Content, { children: j.map((e, r) => /* @__PURE__ */ o(
             n.Item,
             {
-              index: t,
+              index: r,
               disabled: e.disabled,
-              onClick: () => j(e.id),
+              onClick: () => A(e.id),
               children: e.label
             },
             e.id
@@ -96,8 +98,7 @@ const J = (S) => {
     }
   ) });
 };
-J.displayName = "TabsList";
+K.displayName = "TabsList";
 export {
-  J as TabsList,
-  J as default
+  K as TabsList
 };

package/src/tedi/components/navigation/tabs/tabs-trigger/tabs-trigger.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),_=require("../../../../../../external/classnames/index.cjs.js"),m=require("../../../base/icon/icon.cjs.js"),a=require("../tabs.module.scss.cjs.js"),x=require("../tabs-context.cjs.js"),q=require("../tabs-helpers.cjs.js"),r=c=>{const{id:e,children:d,icon:i,disabled:t=!1,className:u}=c,{currentTab:b,setCurrentTab:n}=x.useTabsContext(),s=b===e,g=()=>{t||n(e)},T=f=>{const o=q.navigateTablist(f);o&&n(o.id)};return l.jsxs("button",{"data-name":"tabs-trigger",id:e,role:"tab",type:"button","aria-selected":s,"aria-controls":`${e}-panel`,tabIndex:s?0:-1,disabled:t,className:_.default(a.default["tedi-tabs__trigger"],{[a.default["tedi-tabs__trigger--selected"]]:s},{[a.default["tedi-tabs__trigger--disabled"]]:t},u),onClick:g,onKeyDown:T,children:[i&&l.jsx(m.Icon,{name:i,size:18,color:"inherit"}),d]})};r.displayName="TabsTrigger";exports.TabsTrigger=r;exports.default=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),m=require("../../../../../../external/classnames/index.cjs.js"),x=require("../../../base/icon/icon.cjs.js"),r=require("../tabs.module.scss.cjs.js"),_=require("../tabs-context.cjs.js"),q=require("../tabs-helpers.cjs.js"),c=l=>{const{id:e,children:d,icon:a,disabled:t=!1,className:b}=l,{currentTab:u,setCurrentTab:i}=_.useTabsContext(),s=u===e,g=()=>{t||i(e)},T=f=>{const n=q.navigateTablist(f);n&&i(n.id)};return o.jsxs("button",{"data-name":"tabs-trigger",id:e,role:"tab",type:"button","aria-selected":s,"aria-controls":`${e}-panel`,tabIndex:s?0:-1,disabled:t,className:m.default(r.default["tedi-tabs__trigger"],{[r.default["tedi-tabs__trigger--selected"]]:s},{[r.default["tedi-tabs__trigger--disabled"]]:t},b),onClick:g,onKeyDown:T,children:[a&&o.jsx(x.Icon,{name:a,size:18,color:"inherit"}),d]})};c.displayName="TabsTrigger";exports.TabsTrigger=c;

package/src/tedi/components/navigation/tabs/tabs-trigger/tabs-trigger.es.js

@@ -1,17 +1,17 @@
-import { jsxs as f, jsx as p } from "react/jsx-runtime";
+import { jsxs as p, jsx as f } from "react/jsx-runtime";
 import T from "../../../../../../external/classnames/index.es.js";
 import { Icon as u } from "../../../base/icon/icon.es.js";
-import a from "../tabs.module.scss.es.js";
+import s from "../tabs.module.scss.es.js";
 import { useTabsContext as _ } from "../tabs-context.es.js";
 import { navigateTablist as h } from "../tabs-helpers.es.js";
 const x = (n) => {
-  const { id: e, children: l, icon: s, disabled: t = !1, className: c } = n, { currentTab: d, setCurrentTab: i } = _(), r = d === e, m = () => {
+  const { id: e, children: c, icon: a, disabled: t = !1, className: l } = n, { currentTab: d, setCurrentTab: i } = _(), r = d === e, m = () => {
     t || i(e);
   }, b = (g) => {
     const o = h(g);
     o && i(o.id);
   };
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ p(
     "button",
     {
       "data-name": "tabs-trigger",
@@ -23,22 +23,21 @@ const x = (n) => {
       tabIndex: r ? 0 : -1,
       disabled: t,
       className: T(
-        a["tedi-tabs__trigger"],
-        { [a["tedi-tabs__trigger--selected"]]: r },
-        { [a["tedi-tabs__trigger--disabled"]]: t },
-        c
+        s["tedi-tabs__trigger"],
+        { [s["tedi-tabs__trigger--selected"]]: r },
+        { [s["tedi-tabs__trigger--disabled"]]: t },
+        l
       ),
       onClick: m,
       onKeyDown: b,
       children: [
-        s && /* @__PURE__ */ p(u, { name: s, size: 18, color: "inherit" }),
-        l
+        a && /* @__PURE__ */ f(u, { name: a, size: 18, color: "inherit" }),
+        c
       ]
     }
   );
 };
 x.displayName = "TabsTrigger";
 export {
-  x as TabsTrigger,
-  x as default
+  x as TabsTrigger
 };