@tedi-design-system/react 17.1.0-rc.1 → 17.1.0-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "17.1.0-rc.1",
+  "version": "17.1.0-rc.3",
   "type": "module",
   "sideEffects": false,
   "exports": {
@@ -43,7 +43,7 @@
     "@mui/material": "^5.15.13",
     "@mui/x-date-pickers": "^5.0.20",
     "@tanstack/react-table": "^8.13.2",
-    "@tedi-design-system/core": "6.0.0",
+    "@tedi-design-system/core": "6.0.1",
     "classnames": "^2.5.1",
     "draft-js": "^0.11.7",
     "draftjs-md-converter": "^1.5.2",
@@ -81,16 +81,11 @@
     "@storybook/addon-a11y": "8.4.2",
     "@storybook/addon-designs": "^8.2.1",
     "@storybook/addon-essentials": "8.4.2",
-    "@storybook/addon-mdx-gfm": "8.4.2",
     "@storybook/blocks": "8.4.2",
     "@storybook/builder-vite": "8.4.2",
     "@storybook/react": "8.4.2",
     "@storybook/react-vite": "8.4.2",
     "@storybook/theming": "8.6.14",
-    "@svgr/webpack": "8.1.0",
-    "@swc-node/register": "~1.11.1",
-    "@swc/core": "~1.14.0",
-    "@swc/helpers": "~0.5.19",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "15.0.6",
@@ -103,18 +98,15 @@
     "@types/node": "20.11.28",
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.0",
-    "@types/react-test-renderer": "^19.1.0",
     "@types/showdown": "^2.0.6",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "baseline-browser-mapping": "^2.10.0",
     "chromatic": "^13.3.4",
-    "cross-env": "^7.0.3",
     "dompurify": "^3.3.0",
     "eslint": "8.48.0",
     "eslint-config-next": "^13.4.6",
-    "eslint-config-prettier": "9.1.0",
+    "eslint-config-prettier": "10.1.8",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
@@ -143,18 +135,14 @@
     "stylelint-config-recess-order": "^4.2.0",
     "stylelint-config-standard-scss": "^14.0.0",
     "stylelint-declaration-strict-value": "^1.9.2",
-    "to-string-loader": "^1.2.0",
     "ts-jest": "29.1.2",
     "ts-node": "^10.9.2",
-    "tslib": "^2.3.0",
+    "tslib": "^2.8.1",
     "typescript": "5.9.2",
-    "typescript-plugin-css-modules": "^5.1.0",
     "vite": "^5.4.11",
     "vite-plugin-checker": "^0.6.4",
     "vite-plugin-dts": "4.5.4",
-    "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-static-copy": "^2.2.0",
-    "vite-tsconfig-paths": "4.3.2"
+    "vite-plugin-static-copy": "^2.2.0"
   },
   "commitlint": {
     "extends": "@commitlint/config-conventional",

package/src/tedi/components/form/slider/slider.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),m=require("../../../../../external/classnames/index.cjs.js"),e=require("react"),ne=require("../../overlays/tooltip/tooltip.cjs.js"),de=require("../../overlays/tooltip/tooltip-content.cjs.js"),oe=require("../../overlays/tooltip/tooltip-trigger.cjs.js"),ue=require("../feedback-text/feedback-text.cjs.js"),ce=require("../form-label/form-label.cjs.js"),t=require("./slider.module.scss.cjs.js"),fe=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),F=e.forwardRef((h,M)=>{const{getCurrentBreakpointProps:V}=fe.useBreakpointProps(h.defaultServerBreakpoint),{id:E,name:P,label:x,hideLabel:R,required:_,min:l=0,max:d=100,step:D=1,value:c,defaultValue:$,onChange:o,disabled:s=!1,invalid:H=!1,minLabel:f,maxLabel:O,showCurrentValue:p=!1,valueFormatter:k,tooltip:U=!0,addonRight:j,helper:r,className:z,"aria-label":A,"aria-labelledby":G,"aria-valuetext":J}=V(h),K=e.useId(),b=E??`tedi-slider-${K}`,w=r?r.id??`${b}-helper`:void 0,[Q,W]=e.useState($??l),u=Math.min(d,Math.max(l,c??Q)),[X,L]=e.useState(!1),[Y,N]=e.useState(!1),[i,C]=e.useState(!1),S=!!U&&!s,Z=S&&(X||Y||i),ee=e.useCallback(()=>L(!0),[]),ae=e.useCallback(()=>L(!1),[]),te=e.useCallback(()=>N(!0),[]),re=e.useCallback(()=>N(!1),[]),T=e.useRef(null),n=e.useCallback(()=>{T.current=null,C(!1)},[]);e.useEffect(()=>{if(i)return window.addEventListener("pointerup",n),window.addEventListener("pointercancel",n),()=>{window.removeEventListener("pointerup",n),window.removeEventListener("pointercancel",n)}},[i,n]);const le=e.useCallback(g=>{s||(T.current=g.pointerId,C(!0))},[s]),se=e.useCallback(g=>{const B=Number(g.target.value);c===void 0&&W(B),o==null||o(B)},[o,c]),q=H||(r==null?void 0:r.type)==="error",I=d===l?0:(u-l)/(d-l)*100,y=k?k(u):u,v=p?y:O,ie=m.default(t.default["tedi-slider"],{[t.default["tedi-slider--disabled"]]:s,[t.default["tedi-slider--invalid"]]:q,[t.default["tedi-slider--dragging"]]:i&&!s},z);return a.jsxs("div",{"data-name":"slider",className:ie,children:[x&&a.jsx(ce.FormLabel,{id:b,label:x,required:_,hideLabel:R}),a.jsxs("div",{className:t.default["tedi-slider__container"],children:[a.jsxs("div",{className:t.default["tedi-slider__track-row"],children:[f!=null&&a.jsx("span",{className:t.default["tedi-slider__range-label"],"aria-hidden":"true",children:f}),a.jsxs("div",{className:t.default["tedi-slider__track"],style:{"--tedi-slider-progress":`${I}%`,"--tedi-slider-progress-ratio":`${I/100}`},children:[a.jsx("input",{ref:M,id:b,name:P,type:"range",min:l,max:d,step:D,value:u,disabled:s,required:_,"aria-invalid":q?"true":void 0,"aria-describedby":w,"aria-label":A,"aria-labelledby":G,"aria-valuetext":J,onChange:se,onMouseEnter:ee,onMouseLeave:ae,onPointerDown:le,onFocus:te,onBlur:re,className:m.default(t.default["tedi-slider__input"],{[t.default["tedi-slider__input--dragging"]]:i})}),S&&a.jsxs(ne.Tooltip,{open:Z,onToggle:()=>{},focusManager:{returnFocus:!1,initialFocus:-1},placement:"top",trackReferencePosition:!0,children:[a.jsx(oe.TooltipTrigger,{children:a.jsx("span",{className:t.default["tedi-slider__thumb-anchor"],"aria-hidden":"true",tabIndex:-1})}),a.jsx(de.TooltipContent,{children:y})]})]}),v!=null&&a.jsx("span",{className:t.default["tedi-slider__range-label"],"aria-hidden":p?void 0:"true","aria-live":p?"polite":void 0,children:v})]}),j&&a.jsx("div",{className:t.default["tedi-slider__addon"],children:j})]}),r&&a.jsx(ue.FeedbackText,{...r,id:w,className:m.default(t.default["tedi-slider__feedback"],r.className)})]})});F.displayName="Slider";exports.Slider=F;

package/src/tedi/components/form/slider/slider.d.ts

@@ -0,0 +1,116 @@
+import { default as React } from 'react';
+import { BreakpointSupport } from '../../../helpers';
+import { FeedbackTextProps } from '../feedback-text/feedback-text';
+type SliderBreakpointProps = {
+    /**
+     * Text/element rendered to the left of the track (e.g. the minimum value).
+     */
+    minLabel?: React.ReactNode;
+    /**
+     * Text/element rendered to the right of the track (e.g. the maximum value).
+     * Ignored when `showCurrentValue` is `true`.
+     */
+    maxLabel?: React.ReactNode;
+    /**
+     * When `true`, renders the current value to the right of the track instead of `maxLabel`.
+     * @default false
+     */
+    showCurrentValue?: boolean;
+    /**
+     * Formats the current value, used by both the thumb tooltip and the `showCurrentValue` label.
+     * @default (value) => value
+     */
+    valueFormatter?: (value: number) => React.ReactNode;
+    /**
+     * Renders a tooltip above the thumb showing the current value. Shown only while the slider is
+     * hovered, focused, or being dragged. Value is formatted via `valueFormatter`.
+     * @default true
+     */
+    tooltip?: boolean;
+    /**
+     * Node rendered to the right of the slider, typically a NumberField used to edit the same value.
+     */
+    addonRight?: React.ReactNode;
+    /**
+     * Helper text rendered below the slider.
+     */
+    helper?: FeedbackTextProps;
+    /**
+     * Additional class name(s) applied to the root element.
+     */
+    className?: string;
+};
+export interface SliderProps extends BreakpointSupport<SliderBreakpointProps> {
+    /**
+     * Unique identifier for the underlying input element.
+     * Generated automatically if not provided.
+     */
+    id?: string;
+    /**
+     * Name attribute of the underlying input element.
+     */
+    name?: string;
+    /**
+     * Label text rendered above the slider.
+     */
+    label?: React.ReactNode;
+    /**
+     * Controls the visibility of the label. Pass `true` to hide it visually while keeping it
+     * available to assistive technology, or `'keep-space'` to reserve the vertical space.
+     */
+    hideLabel?: boolean | 'keep-space';
+    /**
+     * Marks the field as required.
+     */
+    required?: boolean;
+    /**
+     * Minimum allowed value.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum allowed value.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Step size.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Controlled value. Use together with `onChange`.
+     */
+    value?: number;
+    /**
+     * Default value for uncontrolled usage.
+     * @default min
+     */
+    defaultValue?: number;
+    /**
+     * Callback fired when the value changes.
+     */
+    onChange?: (value: number) => void;
+    /**
+     * Disables the slider.
+     */
+    disabled?: boolean;
+    /**
+     * Marks the slider as invalid for validation purposes.
+     */
+    invalid?: boolean;
+    /**
+     * Accessible label used when no visible `label` is provided.
+     */
+    'aria-label'?: string;
+    /**
+     * ID of an element that labels the slider, used when no visible `label` is provided.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Human-readable text alternative of the current value.
+     */
+    'aria-valuetext'?: string;
+}
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLInputElement>>;
+export default Slider;

package/src/tedi/components/form/slider/slider.es.js

@@ -0,0 +1,145 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import _ from "../../../../../external/classnames/index.es.js";
+import { forwardRef as oe, useId as de, useState as m, useCallback as i, useRef as ce, useEffect as ue } from "react";
+import { Tooltip as me } from "../../overlays/tooltip/tooltip.es.js";
+import { TooltipContent as pe } from "../../overlays/tooltip/tooltip-content.es.js";
+import { TooltipTrigger as fe } from "../../overlays/tooltip/tooltip-trigger.es.js";
+import { FeedbackText as ve } from "../feedback-text/feedback-text.es.js";
+import { FormLabel as ge } from "../form-label/form-label.es.js";
+import e from "./slider.module.scss.es.js";
+import { useBreakpointProps as he } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const be = oe((N, S) => {
+  const { getCurrentBreakpointProps: D } = he(N.defaultServerBreakpoint), {
+    id: R,
+    name: $,
+    label: w,
+    hideLabel: j,
+    required: L,
+    min: t = 0,
+    max: d = 100,
+    step: H = 1,
+    value: p,
+    defaultValue: q,
+    onChange: c,
+    disabled: n = !1,
+    invalid: O = !1,
+    minLabel: f,
+    maxLabel: U,
+    showCurrentValue: v = !1,
+    valueFormatter: x,
+    tooltip: z = !0,
+    addonRight: I,
+    helper: a,
+    className: A,
+    "aria-label": G,
+    "aria-labelledby": J,
+    "aria-valuetext": K
+  } = D(N), Q = de(), g = R ?? `tedi-slider-${Q}`, k = a ? a.id ?? `${g}-helper` : void 0, [W, X] = m(q ?? t), u = Math.min(d, Math.max(t, p ?? W)), [Y, y] = m(!1), [Z, F] = m(!1), [l, T] = m(!1), V = !!z && !n, ee = V && (Y || Z || l), re = i(() => y(!0), []), ae = i(() => y(!1), []), ie = i(() => F(!0), []), te = i(() => F(!1), []), B = ce(null), s = i(() => {
+    B.current = null, T(!1);
+  }, []);
+  ue(() => {
+    if (l)
+      return window.addEventListener("pointerup", s), window.addEventListener("pointercancel", s), () => {
+        window.removeEventListener("pointerup", s), window.removeEventListener("pointercancel", s);
+      };
+  }, [l, s]);
+  const ne = i(
+    (b) => {
+      n || (B.current = b.pointerId, T(!0));
+    },
+    [n]
+  ), le = i(
+    (b) => {
+      const P = Number(b.target.value);
+      p === void 0 && X(P), c == null || c(P);
+    },
+    [c, p]
+  ), E = O || (a == null ? void 0 : a.type) === "error", M = d === t ? 0 : (u - t) / (d - t) * 100, C = x ? x(u) : u, h = v ? C : U, se = _(
+    e["tedi-slider"],
+    {
+      [e["tedi-slider--disabled"]]: n,
+      [e["tedi-slider--invalid"]]: E,
+      [e["tedi-slider--dragging"]]: l && !n
+    },
+    A
+  );
+  return /* @__PURE__ */ o("div", { "data-name": "slider", className: se, children: [
+    w && /* @__PURE__ */ r(ge, { id: g, label: w, required: L, hideLabel: j }),
+    /* @__PURE__ */ o("div", { className: e["tedi-slider__container"], children: [
+      /* @__PURE__ */ o("div", { className: e["tedi-slider__track-row"], children: [
+        f != null && /* @__PURE__ */ r("span", { className: e["tedi-slider__range-label"], "aria-hidden": "true", children: f }),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: e["tedi-slider__track"],
+            style: {
+              "--tedi-slider-progress": `${M}%`,
+              "--tedi-slider-progress-ratio": `${M / 100}`
+            },
+            children: [
+              /* @__PURE__ */ r(
+                "input",
+                {
+                  ref: S,
+                  id: g,
+                  name: $,
+                  type: "range",
+                  min: t,
+                  max: d,
+                  step: H,
+                  value: u,
+                  disabled: n,
+                  required: L,
+                  "aria-invalid": E ? "true" : void 0,
+                  "aria-describedby": k,
+                  "aria-label": G,
+                  "aria-labelledby": J,
+                  "aria-valuetext": K,
+                  onChange: le,
+                  onMouseEnter: re,
+                  onMouseLeave: ae,
+                  onPointerDown: ne,
+                  onFocus: ie,
+                  onBlur: te,
+                  className: _(e["tedi-slider__input"], {
+                    [e["tedi-slider__input--dragging"]]: l
+                  })
+                }
+              ),
+              V && /* @__PURE__ */ o(
+                me,
+                {
+                  open: ee,
+                  onToggle: () => {
+                  },
+                  focusManager: { returnFocus: !1, initialFocus: -1 },
+                  placement: "top",
+                  trackReferencePosition: !0,
+                  children: [
+                    /* @__PURE__ */ r(fe, { children: /* @__PURE__ */ r("span", { className: e["tedi-slider__thumb-anchor"], "aria-hidden": "true", tabIndex: -1 }) }),
+                    /* @__PURE__ */ r(pe, { children: C })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        h != null && /* @__PURE__ */ r(
+          "span",
+          {
+            className: e["tedi-slider__range-label"],
+            "aria-hidden": v ? void 0 : "true",
+            "aria-live": v ? "polite" : void 0,
+            children: h
+          }
+        )
+      ] }),
+      I && /* @__PURE__ */ r("div", { className: e["tedi-slider__addon"], children: I })
+    ] }),
+    a && /* @__PURE__ */ r(ve, { ...a, id: k, className: _(e["tedi-slider__feedback"], a.className) })
+  ] });
+});
+be.displayName = "Slider";
+export {
+  be as Slider
+};

package/src/tedi/components/form/slider/slider.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-slider":"tedi-slider-90e24e7d","tedi-slider__container":"tedi-slider__container-525c4b64","tedi-slider__track-row":"tedi-slider__track-row-95e9c2d5","tedi-slider__range-label":"tedi-slider__range-label-a2a6a43b","tedi-slider__track":"tedi-slider__track-a7afc8d6","tedi-slider__thumb-anchor":"tedi-slider__thumb-anchor-7e282370","tedi-slider__input":"tedi-slider__input-b2d1c042","tedi-slider__input--dragging":"tedi-slider__input--dragging-6a2f5f85","tedi-slider__addon":"tedi-slider__addon-6b259d81","tedi-slider__feedback":"tedi-slider__feedback-dad1545e","tedi-slider--disabled":"tedi-slider--disabled-d1da914a","tedi-slider--dragging":"tedi-slider--dragging-c82f4f25","tedi-slider--invalid":"tedi-slider--invalid-e5adda94"};exports.default=e;

package/src/tedi/components/form/slider/slider.module.scss.es.js

@@ -0,0 +1,18 @@
+const d = {
+  "tedi-slider": "tedi-slider-90e24e7d",
+  "tedi-slider__container": "tedi-slider__container-525c4b64",
+  "tedi-slider__track-row": "tedi-slider__track-row-95e9c2d5",
+  "tedi-slider__range-label": "tedi-slider__range-label-a2a6a43b",
+  "tedi-slider__track": "tedi-slider__track-a7afc8d6",
+  "tedi-slider__thumb-anchor": "tedi-slider__thumb-anchor-7e282370",
+  "tedi-slider__input": "tedi-slider__input-b2d1c042",
+  "tedi-slider__input--dragging": "tedi-slider__input--dragging-6a2f5f85",
+  "tedi-slider__addon": "tedi-slider__addon-6b259d81",
+  "tedi-slider__feedback": "tedi-slider__feedback-dad1545e",
+  "tedi-slider--disabled": "tedi-slider--disabled-d1da914a",
+  "tedi-slider--dragging": "tedi-slider--dragging-c82f4f25",
+  "tedi-slider--invalid": "tedi-slider--invalid-e5adda94"
+};
+export {
+  d as default
+};

package/src/tedi/components/misc/empty-state/empty-state.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("../../../../../external/classnames/index.cjs.js"),n=require("../../base/icon/icon.cjs.js"),y=require("../../base/typography/heading/heading.cjs.js"),f=require("../../base/typography/text/text.cjs.js"),t=require("./empty-state.module.scss.cjs.js"),l=({type:c="separate",size:o="default",icon:s="spa",heading:a,children:d,actions:r,className:m})=>{const u=p.default(t.default["tedi-empty-state"],t.default[`tedi-empty-state--${c}`],t.default[`tedi-empty-state--${o}`],m),i=s===null?null:typeof s=="string"?e.jsx(n.Icon,{name:s,size:36,color:"brand"}):e.jsx(n.Icon,{size:36,color:"brand",...s});return e.jsxs("div",{"data-name":"tedi-empty-state",className:u,children:[e.jsxs("div",{className:t.default["tedi-empty-state__text"],children:[i&&e.jsx("div",{className:t.default["tedi-empty-state__icon"],children:i}),(a||d)&&e.jsxs("div",{className:t.default["tedi-empty-state__content"],children:[a&&e.jsx(y.Heading,{className:t.default["tedi-empty-state__heading"],element:"h3",modifiers:"h3",color:"brand",children:a}),d&&e.jsx(f.Text,{className:t.default["tedi-empty-state__description"],color:"secondary",modifiers:"center",children:d})]})]}),r&&e.jsx("div",{className:t.default["tedi-empty-state__actions"],children:r})]})};l.displayName="EmptyState";exports.EmptyState=l;

package/src/tedi/components/misc/empty-state/empty-state.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+import { IconWithoutBackgroundProps } from '../../base/icon/icon';
+export type EmptyStateType = 'separate' | 'attached' | 'inside';
+export type EmptyStateSize = 'default' | 'small';
+export interface EmptyStateProps {
+    /**
+     * Container variant — matches the Figma "Types" section.
+     * - `'separate'` (default) — full border + radius, stands on its own.
+     * - `'attached'` — top border omitted so the block sits flush beneath a
+     *   preceding card or table (same width + same bottom-radius).
+     * - `'inside'` — no border, no radius; intended to be placed inside another
+     *   container such as a `<Card>` or `<Table>`.
+     * @default separate
+     */
+    type?: EmptyStateType;
+    /**
+     * Padding scale. `default` = 24px, `small` = 16px.
+     * @default default
+     */
+    size?: EmptyStateSize;
+    /**
+     * Icon rendered above the text block. Pass a Material icon name, a full
+     * `IconWithoutBackgroundProps` object to configure the underlying `Icon`,
+     * or `null` to hide the icon.
+     * @default spa
+     */
+    icon?: string | IconWithoutBackgroundProps | null;
+    /**
+     * Optional heading rendered above the description — appears as an H3 in
+     * brand-primary text color.
+     */
+    heading?: React.ReactNode;
+    /**
+     * Main body text describing why there is nothing to show.
+     */
+    children?: React.ReactNode;
+    /**
+     * Call-to-action slot. Typically a `<Button>` (or two) or a `<Link>`.
+     * Rendered below the text block.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Additional class name on the root element.
+     */
+    className?: string;
+}
+export declare const EmptyState: {
+    ({ type, size, icon, heading, children, actions, className, }: EmptyStateProps): JSX.Element;
+    displayName: string;
+};
+export default EmptyState;

package/src/tedi/components/misc/empty-state/empty-state.es.js

@@ -0,0 +1,36 @@
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import y from "../../../../../external/classnames/index.es.js";
+import { Icon as d } from "../../base/icon/icon.es.js";
+import { Heading as f } from "../../base/typography/heading/heading.es.js";
+import { Text as _ } from "../../base/typography/text/text.es.js";
+import e from "./empty-state.module.scss.es.js";
+const N = ({
+  type: n = "separate",
+  size: l = "default",
+  icon: s = "spa",
+  heading: a,
+  children: r,
+  actions: i,
+  className: p
+}) => {
+  const c = y(
+    e["tedi-empty-state"],
+    e[`tedi-empty-state--${n}`],
+    e[`tedi-empty-state--${l}`],
+    p
+  ), o = s === null ? null : typeof s == "string" ? /* @__PURE__ */ t(d, { name: s, size: 36, color: "brand" }) : /* @__PURE__ */ t(d, { size: 36, color: "brand", ...s });
+  return /* @__PURE__ */ m("div", { "data-name": "tedi-empty-state", className: c, children: [
+    /* @__PURE__ */ m("div", { className: e["tedi-empty-state__text"], children: [
+      o && /* @__PURE__ */ t("div", { className: e["tedi-empty-state__icon"], children: o }),
+      (a || r) && /* @__PURE__ */ m("div", { className: e["tedi-empty-state__content"], children: [
+        a && /* @__PURE__ */ t(f, { className: e["tedi-empty-state__heading"], element: "h3", modifiers: "h3", color: "brand", children: a }),
+        r && /* @__PURE__ */ t(_, { className: e["tedi-empty-state__description"], color: "secondary", modifiers: "center", children: r })
+      ] })
+    ] }),
+    i && /* @__PURE__ */ t("div", { className: e["tedi-empty-state__actions"], children: i })
+  ] });
+};
+N.displayName = "EmptyState";
+export {
+  N as EmptyState
+};

package/src/tedi/components/misc/empty-state/empty-state.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-empty-state":"tedi-empty-state-fa18a0c7","tedi-empty-state--small":"tedi-empty-state--small-cd55192d","tedi-empty-state--attached":"tedi-empty-state--attached-34f9494f","tedi-empty-state--inside":"tedi-empty-state--inside-59a35f4a","tedi-empty-state__text":"tedi-empty-state__text-3356405a","tedi-empty-state__icon":"tedi-empty-state__icon-b7c0b65c","tedi-empty-state__content":"tedi-empty-state__content-8f9e9b61","tedi-empty-state__heading":"tedi-empty-state__heading-a8adf6aa","tedi-empty-state__description":"tedi-empty-state__description-4c540947","tedi-empty-state__actions":"tedi-empty-state__actions-bff9b270"};exports.default=t;

package/src/tedi/components/misc/empty-state/empty-state.module.scss.es.js

@@ -0,0 +1,15 @@
+const t = {
+  "tedi-empty-state": "tedi-empty-state-fa18a0c7",
+  "tedi-empty-state--small": "tedi-empty-state--small-cd55192d",
+  "tedi-empty-state--attached": "tedi-empty-state--attached-34f9494f",
+  "tedi-empty-state--inside": "tedi-empty-state--inside-59a35f4a",
+  "tedi-empty-state__text": "tedi-empty-state__text-3356405a",
+  "tedi-empty-state__icon": "tedi-empty-state__icon-b7c0b65c",
+  "tedi-empty-state__content": "tedi-empty-state__content-8f9e9b61",
+  "tedi-empty-state__heading": "tedi-empty-state__heading-a8adf6aa",
+  "tedi-empty-state__description": "tedi-empty-state__description-4c540947",
+  "tedi-empty-state__actions": "tedi-empty-state__actions-bff9b270"
+};
+export {
+  t as default
+};

package/src/tedi/components/misc/empty-state/index.d.ts

@@ -0,0 +1 @@
+export * from './empty-state';

package/src/tedi/components/overlays/overlay/overlay.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const V=require("react/jsx-runtime"),t=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),n=require("react"),z=require("./overlay-content.cjs.js"),B=require("./overlay-trigger.cjs.js"),J=require("../../../helpers/hooks/use-is-touch-device.cjs.js"),K=require("../../../helpers/hooks/use-is-mounted.cjs.js"),N=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),a=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),Q=3,j=n.createContext({open:!1,onOpenChange:()=>{},isMounted:!1,openWith:"hover",reference:()=>{},floating:()=>{},focusManager:{},arrowRef:{current:null},x:0,y:0,strategy:"absolute",getReferenceProps:()=>({}),getFloatingProps:()=>({}),arrow:{width:0,height:0,x:0,y:0,centerOffset:0},placement:"top",context:{},scrollLock:void 0,contentId:""}),i=S=>{const E=J.useIsTouchDevice(),{children:L,placement:W="top",openWith:s=E?"click":"hover",defaultOpen:A=!1,open:c,onToggle:r,role:u="tooltip",arrowDimensions:e,offset:G=Q+((e==null?void 0:e.height)??0),focusManager:d,dismissible:v,scrollLock:y}=S,{order:O=["reference","content"],initialFocus:M,modal:f,...x}=d??{},C=M!==void 0?M:f?0:void 0,[m,F]=n.useState(A),g=n.useRef(null),R=K.useIsMounted(),p=n.useMemo(()=>r&&typeof c<"u"?c:m,[r,c,m]),h=n.useCallback(U=>{typeof c>"u"&&F(U),r==null||r(U)},[c,F,r]),{x:q,y:I,refs:l,strategy:P,context:o,middlewareData:b,placement:w}=t.useFloating({placement:W,open:p,onOpenChange:h,middleware:[a.offset(G),a.flip(),a.shift({padding:8}),a.arrow({element:g,padding:4})],whileElementsMounted:N.autoUpdate}),{getReferenceProps:k,getFloatingProps:T}=t.useInteractions([t.useHover(o,{enabled:s==="hover",handleClose:t.safePolygon()}),t.useClick(o,{toggle:v}),t.useFocus(o,{enabled:s==="hover"}),t.useRole(o,{role:u}),t.useDismiss(o,{enabled:v,outsidePressEvent:s==="click"?"mousedown":"pointerdown"})]),_=n.useId(),H=n.useMemo(()=>({open:p,onOpenChange:h,isMounted:R,openWith:s,focusManager:d?{order:O,modal:f,initialFocus:C,...x}:void 0,reference:l.setReference,floating:l.setFloating,arrowRef:g,x:q,y:I,strategy:P,getReferenceProps:k,getFloatingProps:T,arrow:{width:e==null?void 0:e.width,height:e==null?void 0:e.height,...b.arrow},context:o,placement:w,scrollLock:y,role:u,contentId:_}),[p,h,R,s,d,l.setReference,l.setFloating,g,q,I,P,k,T,e==null?void 0:e.width,e==null?void 0:e.height,b.arrow,o,w,y,u,_,f,O,C,x]);return V.jsx(j.Provider,{value:H,children:L})};i.Trigger=B.OverlayTrigger;i.Content=z.OverlayContent;exports.Overlay=i;exports.OverlayContext=j;exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const K=require("react/jsx-runtime"),t=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),n=require("react"),N=require("./overlay-content.cjs.js"),Q=require("./overlay-trigger.cjs.js"),X=require("../../../helpers/hooks/use-is-touch-device.cjs.js"),Y=require("../../../helpers/hooks/use-is-mounted.cjs.js"),j=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),i=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),Z=3,S=n.createContext({open:!1,onOpenChange:()=>{},isMounted:!1,openWith:"hover",reference:()=>{},floating:()=>{},focusManager:{},arrowRef:{current:null},x:0,y:0,strategy:"absolute",getReferenceProps:()=>({}),getFloatingProps:()=>({}),arrow:{width:0,height:0,x:0,y:0,centerOffset:0},placement:"top",context:{},scrollLock:void 0,contentId:""}),u=E=>{const L=X.useIsTouchDevice(),{children:W,placement:A="top",openWith:s=L?"click":"hover",defaultOpen:G=!1,open:c,onToggle:r,role:d="tooltip",arrowDimensions:e,offset:H=Z+((e==null?void 0:e.height)??0),focusManager:f,dismissible:y,scrollLock:O,trackReferencePosition:V=!1}=E,{order:M=["reference","content"],initialFocus:m,modal:g,...x}=f??{},C=m!==void 0?m:g?0:void 0,[F,R]=n.useState(G),p=n.useRef(null),P=Y.useIsMounted(),h=n.useMemo(()=>r&&typeof c<"u"?c:F,[r,c,F]),v=n.useCallback(l=>{typeof c>"u"&&R(l),r==null||r(l)},[c,R,r]),{x:q,y:I,refs:a,strategy:b,context:o,middlewareData:k,placement:w}=t.useFloating({placement:A,open:h,onOpenChange:v,middleware:[i.offset(H),i.flip(),i.shift({padding:8}),i.arrow({element:p,padding:4})],whileElementsMounted:V?(l,B,J)=>j.autoUpdate(l,B,J,{animationFrame:!0}):j.autoUpdate}),{getReferenceProps:T,getFloatingProps:U}=t.useInteractions([t.useHover(o,{enabled:s==="hover",handleClose:t.safePolygon()}),t.useClick(o,{toggle:y}),t.useFocus(o,{enabled:s==="hover"}),t.useRole(o,{role:d}),t.useDismiss(o,{enabled:y,outsidePressEvent:s==="click"?"mousedown":"pointerdown"})]),_=n.useId(),z=n.useMemo(()=>({open:h,onOpenChange:v,isMounted:P,openWith:s,focusManager:f?{order:M,modal:g,initialFocus:C,...x}:void 0,reference:a.setReference,floating:a.setFloating,arrowRef:p,x:q,y:I,strategy:b,getReferenceProps:T,getFloatingProps:U,arrow:{width:e==null?void 0:e.width,height:e==null?void 0:e.height,...k.arrow},context:o,placement:w,scrollLock:O,role:d,contentId:_}),[h,v,P,s,f,a.setReference,a.setFloating,p,q,I,b,T,U,e==null?void 0:e.width,e==null?void 0:e.height,k.arrow,o,w,O,d,_,g,M,C,x]);return K.jsx(S.Provider,{value:z,children:W})};u.Trigger=Q.OverlayTrigger;u.Content=N.OverlayContent;exports.Overlay=u;exports.OverlayContext=S;exports.default=u;

package/src/tedi/components/overlays/overlay/overlay.d.ts

@@ -63,6 +63,18 @@ export interface OverlayProps {
      * @default GAP + arrow height
      */
     offset?: OffsetOptions;
+    /**
+     * Re-measure the floating element every animation frame while mounted.
+     *
+     * Enable this when the trigger/reference element's position can change without a
+     * DOM-observable event (e.g. position driven by an inherited CSS custom property on an
+     * ancestor). The default `autoUpdate` only reacts to scroll, resize, and element-size
+     * changes, so position-only movement goes unnoticed and the overlay lags behind.
+     *
+     * Opt-in because animation-frame tracking is more expensive than the default.
+     * @default false
+     */
+    trackReferencePosition?: boolean;
 }
 export interface OverlayContextType {
     open: boolean;