@tedi-design-system/react 18.0.0-rc.3 → 18.0.0-rc.30

package/src/tedi/components/content/carousel/components/carousel-footer/carousel-footer.es.js

@@ -0,0 +1,9 @@
+import { jsx as m } from "react/jsx-runtime";
+import t from "../../../../../../../external/classnames/index.es.js";
+import { forwardRef as a } from "react";
+import f from "../../carousel.module.scss.es.js";
+const i = a(({ children: o, className: r, style: e }, s) => /* @__PURE__ */ m("div", { ref: s, className: t(f["tedi-carousel__footer"], r), style: e, children: o }));
+i.displayName = "CarouselFooter";
+export {
+  i as CarouselFooter
+};

package/src/tedi/components/content/carousel/components/carousel-header/carousel-header.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("../../../../../../../external/classnames/index.cjs.js"),d=require("react"),l=require("../../carousel.module.scss.cjs.js"),e=d.forwardRef(({children:r,className:a,style:s},o)=>t.jsx("div",{ref:o,className:u.default(l.default["tedi-carousel__header"],a),style:s,children:r}));e.displayName="CarouselHeader";exports.CarouselHeader=e;

package/src/tedi/components/content/carousel/components/carousel-header/carousel-header.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export interface CarouselHeaderProps {
+    /**
+     * Header content — typically a title block and optionally `Carousel.Navigation`.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional class name.
+     */
+    className?: string;
+    /**
+     * Inline styles.
+     */
+    style?: React.CSSProperties;
+}
+export declare const CarouselHeader: React.ForwardRefExoticComponent<CarouselHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default CarouselHeader;

package/src/tedi/components/content/carousel/components/carousel-header/carousel-header.es.js

@@ -0,0 +1,9 @@
+import { jsx as s } from "react/jsx-runtime";
+import m from "../../../../../../../external/classnames/index.es.js";
+import { forwardRef as t } from "react";
+import d from "../../carousel.module.scss.es.js";
+const i = t(({ children: r, className: e, style: o }, a) => /* @__PURE__ */ s("div", { ref: a, className: m(d["tedi-carousel__header"], e), style: o, children: r }));
+i.displayName = "CarouselHeader";
+export {
+  i as CarouselHeader
+};

package/src/tedi/components/content/carousel/components/carousel-indicators/carousel-indicators.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../../../../../external/classnames/index.cjs.js"),m=require("react"),i=require("../../../../base/typography/text/text.cjs.js"),u=require("../../../../buttons/button/button.cjs.js"),l=require("../../carousel.module.scss.cjs.js"),v=require("../../carousel-context.cjs.js"),C=require("../../../../../providers/label-provider/use-labels.cjs.js"),d=m.forwardRef(({withArrows:c=!1,variant:b="dots",className:f},x)=>{const{getLabel:o}=C.useLabels(),r=v.useCarouselContext(),{slidesCount:s,slideIndex:a}=r;return e.jsxs("div",{ref:x,className:n.default(l.default["tedi-carousel__indicators"],f),children:[c&&e.jsx(u.Button,{visualType:"neutral",icon:"arrow_back",disabled:!r.canPrev,onClick:r.prev,children:o("carousel.move-back")}),b==="dots"?Array.from({length:s},(_,t)=>e.jsx("button",{type:"button","aria-label":o("carousel.show-slide",t+1),"aria-current":t===a?"true":void 0,className:n.default(l.default["tedi-carousel__indicator"],{[l.default["tedi-carousel__indicator--active"]]:t===a}),onClick:()=>r.goToIndex(t,{focusSlide:!0})},t)):s>0&&e.jsxs("div",{children:[e.jsx(i.Text,{element:"span",modifiers:"bold",color:"brand",children:a+1}),e.jsx(i.Text,{element:"span",color:"tertiary",children:` / ${s}`})]}),c&&e.jsx(u.Button,{visualType:"neutral",icon:"arrow_forward",disabled:!r.canNext,onClick:r.next,children:o("carousel.move-forward")})]})});d.displayName="CarouselIndicators";exports.CarouselIndicators=d;

package/src/tedi/components/content/carousel/components/carousel-indicators/carousel-indicators.d.ts

@@ -0,0 +1,20 @@
+export type CarouselIndicatorsVariant = 'dots' | 'numbers';
+export interface CarouselIndicatorsProps {
+    /**
+     * Show prev / next arrow buttons alongside the indicators. When set, do not
+     * also use `Carousel.Navigation`.
+     * @default false
+     */
+    withArrows?: boolean;
+    /**
+     * Indicator style — a row of dots or a `current / total` counter.
+     * @default dots
+     */
+    variant?: CarouselIndicatorsVariant;
+    /**
+     * Additional class name.
+     */
+    className?: string;
+}
+export declare const CarouselIndicators: import('react').ForwardRefExoticComponent<CarouselIndicatorsProps & import('react').RefAttributes<HTMLDivElement>>;
+export default CarouselIndicators;

package/src/tedi/components/content/carousel/components/carousel-indicators/carousel-indicators.es.js

@@ -0,0 +1,37 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import n from "../../../../../../../external/classnames/index.es.js";
+import { forwardRef as b } from "react";
+import { Text as d } from "../../../../base/typography/text/text.es.js";
+import { Button as m } from "../../../../buttons/button/button.es.js";
+import l from "../../carousel.module.scss.es.js";
+import { useCarouselContext as v } from "../../carousel-context.es.js";
+import { useLabels as _ } from "../../../../../providers/label-provider/use-labels.es.js";
+const C = b(
+  ({ withArrows: i = !1, variant: u = "dots", className: f }, p) => {
+    const { getLabel: a } = _(), r = v(), { slidesCount: t, slideIndex: s } = r;
+    return /* @__PURE__ */ c("div", { ref: p, className: n(l["tedi-carousel__indicators"], f), children: [
+      i && /* @__PURE__ */ e(m, { visualType: "neutral", icon: "arrow_back", disabled: !r.canPrev, onClick: r.prev, children: a("carousel.move-back") }),
+      u === "dots" ? Array.from({ length: t }, (h, o) => /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          "aria-label": a("carousel.show-slide", o + 1),
+          "aria-current": o === s ? "true" : void 0,
+          className: n(l["tedi-carousel__indicator"], {
+            [l["tedi-carousel__indicator--active"]]: o === s
+          }),
+          onClick: () => r.goToIndex(o, { focusSlide: !0 })
+        },
+        o
+      )) : t > 0 && /* @__PURE__ */ c("div", { children: [
+        /* @__PURE__ */ e(d, { element: "span", modifiers: "bold", color: "brand", children: s + 1 }),
+        /* @__PURE__ */ e(d, { element: "span", color: "tertiary", children: ` / ${t}` })
+      ] }),
+      i && /* @__PURE__ */ e(m, { visualType: "neutral", icon: "arrow_forward", disabled: !r.canNext, onClick: r.next, children: a("carousel.move-forward") })
+    ] });
+  }
+);
+C.displayName = "CarouselIndicators";
+export {
+  C as CarouselIndicators
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("../../../../../../../external/classnames/index.cjs.js"),l=require("react"),d=require("../../../../buttons/button/button.cjs.js"),t=require("../../carousel.module.scss.cjs.js"),v=require("../../carousel-context.cjs.js"),b=require("../../../../../providers/label-provider/use-labels.cjs.js"),f=({buttonProps:o})=>n.jsx(d.Button,{visualType:"secondary",...o}),s=l.forwardRef(({overlay:o=!1,className:i,renderButton:r=f},c)=>{const{getLabel:a}=b.useLabels(),e=v.useCarouselContext();return n.jsxs("div",{ref:c,className:u.default(t.default["tedi-carousel__navigation"],{[t.default["tedi-carousel__navigation--overlay"]]:o},i),children:[r({direction:"prev",buttonProps:{icon:"arrow_back",disabled:!e.canPrev,onClick:e.prev,children:a("carousel.move-back")}}),r({direction:"next",buttonProps:{icon:"arrow_forward",disabled:!e.canNext,onClick:e.next,children:a("carousel.move-forward")}})]})});s.displayName="CarouselNavigation";exports.CarouselNavigation=s;

package/src/tedi/components/content/carousel/components/carousel-navigation/carousel-navigation.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Props for a single navigation arrow, ready to spread onto a `Button` /
+ * `FloatingButton` (or any compatible control). `children` is the accessible label.
+ */
+export interface CarouselNavigationButtonProps {
+    icon: string;
+    disabled: boolean;
+    onClick: () => void;
+    children: string;
+}
+export interface CarouselNavigationProps {
+    /**
+     * Pin the arrows to the left / right edges, overlaying the slides (instead of
+     * a normal inline row). Use as a direct child of `Carousel` for a
+     * header/footer-less carousel; the arrows centre vertically over the content.
+     * @default false
+     */
+    overlay?: boolean;
+    /**
+     * Additional class name.
+     */
+    className?: string;
+    /**
+     * Render each navigation arrow yourself — e.g. to use a `FloatingButton` or a
+     * customised `Button`. Receives the arrow `direction` and a `buttonProps` bag
+     * (icon / disabled / onClick / accessible-label `children`) to spread onto the
+     * control; the surrounding container still handles layout, incl. overlay edge
+     * placement, so the returned element only needs to render the button. Defaults
+     * to a secondary `Button`.
+     *
+     * @example
+     * <Carousel.Navigation
+     *   overlay
+     *   renderButton={({ buttonProps }) => <FloatingButton {...buttonProps} position="static" />}
+     * />
+     */
+    renderButton?: (props: {
+        direction: 'prev' | 'next';
+        buttonProps: CarouselNavigationButtonProps;
+    }) => React.ReactNode;
+}
+export declare const CarouselNavigation: import('react').ForwardRefExoticComponent<CarouselNavigationProps & import('react').RefAttributes<HTMLDivElement>>;
+export default CarouselNavigation;

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

@@ -0,0 +1,47 @@
+import { jsxs as n, jsx as c } from "react/jsx-runtime";
+import l from "../../../../../../../external/classnames/index.es.js";
+import { forwardRef as m } from "react";
+import { Button as d } from "../../../../buttons/button/button.es.js";
+import t from "../../carousel.module.scss.es.js";
+import { useCarouselContext as u } from "../../carousel-context.es.js";
+import { useLabels as p } from "../../../../../providers/label-provider/use-labels.es.js";
+const f = ({ buttonProps: r }) => /* @__PURE__ */ c(d, { visualType: "secondary", ...r }), v = m(
+  ({ overlay: r = !1, className: i, renderButton: e = f }, s) => {
+    const { getLabel: a } = p(), o = u();
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        ref: s,
+        className: l(
+          t["tedi-carousel__navigation"],
+          { [t["tedi-carousel__navigation--overlay"]]: r },
+          i
+        ),
+        children: [
+          e({
+            direction: "prev",
+            buttonProps: {
+              icon: "arrow_back",
+              disabled: !o.canPrev,
+              onClick: o.prev,
+              children: a("carousel.move-back")
+            }
+          }),
+          e({
+            direction: "next",
+            buttonProps: {
+              icon: "arrow_forward",
+              disabled: !o.canNext,
+              onClick: o.next,
+              children: a("carousel.move-forward")
+            }
+          })
+        ]
+      }
+    );
+  }
+);
+v.displayName = "CarouselNavigation";
+export {
+  v as CarouselNavigation
+};

package/src/tedi/components/content/carousel/index.d.ts

@@ -0,0 +1,7 @@
+export * from './carousel';
+export * from './components/carousel-content/carousel-content';
+export * from './components/carousel-footer/carousel-footer';
+export * from './components/carousel-header/carousel-header';
+export * from './components/carousel-indicators/carousel-indicators';
+export * from './components/carousel-navigation/carousel-navigation';
+export * from './carousel-utils';

package/src/tedi/components/content/carousel/use-carousel.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),Le=require("../../../helpers/hooks/use-breakpoint.cjs.js"),re=require("./carousel-utils.cjs.js"),ye=require("../../../providers/label-provider/use-labels.cjs.js"),De={slidesPerView:{xs:1},gap:{xs:1},fade:!1,transitionMs:400,loop:!0,centered:!1},V=(S,p)=>(S%p+p)%p,Ve=()=>{const{getLabel:S}=ye.useLabels(),p=Le.default(),[u,ne]=t.useState(De),[r,se]=t.useState(0),[l,b]=t.useState(0),[m,U]=t.useState(0),[Y,R]=t.useState(!1),[g,ce]=t.useState(0),[j,oe]=t.useState(16),[ae,ue]=t.useState(""),E=t.useRef(null),H=t.useRef(null),J=t.useRef([]),P=t.useRef(!1),L=t.useRef(!1),B=t.useRef(!1),$=t.useRef(0),y=t.useRef(0),Q=t.useRef(0),O=t.useRef(0),_=t.useRef(0),q=t.useRef(),A=t.useRef(0),Z=t.useRef(!0),i=t.useRef(l),ee=t.useRef(m);t.useEffect(()=>{i.current=l},[l]),t.useEffect(()=>{ee.current=m},[m]);const o=t.useMemo(()=>re.resolveBreakpointValue(u.slidesPerView,p),[u.slidesPerView,p]),C=t.useMemo(()=>re.resolveBreakpointValue(u.gap,p),[u.gap,p]),w=t.useMemo(()=>C*j,[C,j]),s=u.loop,M=t.useMemo(()=>Math.max(0,r-Math.ceil(o)),[r,o]),k=t.useCallback(e=>s?e:Math.min(Math.max(e,0),M),[s,M]),d=s?r:0,le=t.useMemo(()=>r===0?0:s?V(Math.floor(l),r):Math.min(Math.max(Math.round(l),0),r-1),[l,r,s]),F=s?l-m+d:l,ie=s||l>.001,fe=s||l<M-.001,de=t.useMemo(()=>{if(!r)return[];if(!s)return Array.from({length:r},(c,a)=>a);const e=2*d+Math.ceil(o),n=m-d;return Array.from({length:e},(c,a)=>V(n+a,r))},[r,d,o,m,s]),me=t.useMemo(()=>`0 0 calc((100% - ${(o-1)*C}rem) / ${o})`,[o,C]),he=t.useMemo(()=>{if(!g)return{gap:`${C}rem`,transform:"translate3d(0,0,0)",transition:"none"};const e=w*(o-1),n=(g-e)/o,c=s?l-m+d:l,a=u.centered?(g-n)/2:0,f=-c*(n+w)+a;return{gap:`${C}rem`,transform:`translate3d(${f}px, 0, 0)`,transition:Y?`transform ${u.transitionMs}ms ease`:"none"}},[g,C,w,o,l,m,d,Y,u.transitionMs,u.centered,s]),Me=t.useCallback(e=>{const n=Math.ceil(o);return e>=F&&e<F+n},[o,F]),pe=t.useCallback((e,n,c)=>{const a=[e];if(u.fade){const f=u.fade==="both"||u.fade!=="right"&&o<=1;a.push(f?c:n)}return a.join(" ")},[u.fade,o]),be=t.useCallback((e,n)=>{J.current[e]=n},[]),I=t.useCallback(()=>{setTimeout(()=>{if(!Z.current||!r)return;const e=s?V(Math.floor(i.current),r):Math.min(Math.max(Math.round(i.current),0),r-1);ue(S("carousel.slide",e+1,r))},100)},[S,r,s]),X=t.useCallback(()=>{P.current=!0,setTimeout(()=>{P.current=!1},u.transitionMs)},[u.transitionMs]),te=t.useCallback(()=>{setTimeout(()=>{var n;const e=i.current-ee.current+d;(n=J.current[e])==null||n.focus({preventScroll:!0})})},[d]),G=t.useCallback(()=>{!r||P.current||!s&&i.current>=M-.001||(R(!0),b(e=>k(e+1)),X(),I())},[r,s,M,k,X,I]),K=t.useCallback(()=>{!r||P.current||!s&&i.current<=.001||(R(!0),b(e=>k(e-1)),X(),I())},[r,s,k,X,I]),N=t.useCallback((e,n)=>{if(!(!r||P.current)){if(R(!0),s){const c=V(Math.floor(i.current),r),f=V(e,r)-c;b(h=>h+f)}else b(k(e));n!=null&&n.focusSlide?B.current=!0:I()}},[r,s,k,I]),Re=t.useCallback(e=>{e.target!==H.current||e.propertyName!=="transform"||L.current||(R(!1),U(Math.floor(i.current)),B.current&&(B.current=!1,te()))},[te]),ke=t.useCallback(()=>{const e=E.current;e&&(e.scrollLeft=0,e.scrollTop=0)},[]),T=t.useCallback(()=>(g-w*(o-1))/o+w,[g,w,o]),Ce=t.useCallback(e=>{if(!r)return;const n=Math.abs(e.deltaX)>Math.abs(e.deltaY)?e.deltaX:e.shiftKey?e.deltaY:0;if(!n)return;const c=T();if(!c)return;const a=n/c;A.current+=a;const f=d*.9,h=s?m-f:0,x=s?m+f:M,W=i.current+a,v=Math.min(Math.max(W,h),x),Ie=v!==W;R(!1),b(v),clearTimeout(q.current),q.current=setTimeout(()=>{R(!0);const Te=Math.sign(A.current),D=i.current;let z=Math.round(D);Math.abs(A.current)>.3&&(z=Te>0?Math.ceil(D):Math.floor(D)),Ie&&(D<=h&&(z=Math.ceil(h)),D>=x&&(z=Math.floor(x)));const Pe=Math.min(Math.max(z,h),x);b(Pe),A.current=0},120)},[r,T,d,m,s,M]),xe=t.useCallback(e=>{switch(e.key){case"ArrowRight":case"PageDown":e.preventDefault(),G();break;case"ArrowLeft":case"PageUp":e.preventDefault(),K();break;case"Home":e.preventDefault(),N(0);break;case"End":e.preventDefault(),N(r-1);break}},[G,K,N,r]),Se=t.useCallback(e=>{var n;r&&((n=E.current)==null||n.setPointerCapture(e.pointerId),L.current=!0,R(!1),$.current=e.clientX,y.current=i.current,Q.current=e.timeStamp,O.current=e.clientX,_.current=e.timeStamp,s&&U(Math.floor(i.current)))},[r,s]),ge=t.useCallback(e=>{if(!L.current)return;const n=T();if(!n)return;const c=e.clientX-$.current;if(Number.isNaN(c))return;O.current=e.clientX,_.current=e.timeStamp;const a=c/n,f=y.current-a,h=d*.9,x=Math.floor(y.current),W=s?x-h:0,v=s?x+h:M;b(Math.min(Math.max(f,W),v))},[T,d,s,M]),we=t.useCallback(()=>{if(!L.current)return;L.current=!1,R(!0);const e=T(),n=Math.round(i.current);let c=n;const a=_.current-Q.current,f=a>0&&e?-(O.current-$.current)/e/a:0;Math.abs(f)>.0015&&n===Math.round(y.current)&&(c=Math.round(y.current)+(f>0?1:-1)),b(k(c))},[T,k]);return t.useEffect(()=>{const e=E.current;if(!e)return;const n=()=>{ce(e.clientWidth),oe(parseFloat(getComputedStyle(document.documentElement).fontSize)||16)};n();const c=new ResizeObserver(n);return c.observe(e),()=>c.disconnect()},[]),t.useEffect(()=>()=>{Z.current=!1,clearTimeout(q.current)},[]),{viewportRef:E,trackRef:H,setSlideRef:be,setConfig:ne,setSlidesCount:se,slidesCount:r,slideIndex:le,canPrev:ie,canNext:fe,renderedIndices:de,renderedActiveIndex:F,slideFlex:me,trackStyle:he,contentClassName:pe,isSlideVisible:Me,announcement:ae,regionLabel:S("carousel"),slideLabel:e=>S("carousel.slide",e,r),next:G,prev:K,goToIndex:N,onTransitionEnd:Re,onScroll:ke,onWheel:Ce,onKeyDown:xe,onPointerDown:Se,onPointerMove:ge,onPointerUp:we}};exports.useCarousel=Ve;

package/src/tedi/components/content/carousel/use-carousel.d.ts

@@ -0,0 +1,56 @@
+import { CSSProperties } from 'react';
+import { BreakpointObject } from './carousel-utils';
+/**
+ * Edge-fade behaviour:
+ * - `false` — no fade.
+ * - `true` — fades the trailing edge with more than one slide per view, or both edges for a single slide.
+ * - `'right'` — always fade only the trailing edge.
+ * - `'both'` — always fade both edges, regardless of slide count.
+ */
+export type CarouselFade = boolean | 'right' | 'both';
+export interface CarouselConfig {
+    slidesPerView: BreakpointObject<number>;
+    gap: BreakpointObject<number>;
+    fade: CarouselFade;
+    transitionMs: number;
+    loop: boolean;
+    centered: boolean;
+}
+export interface CarouselApi {
+    viewportRef: React.RefObject<HTMLDivElement>;
+    trackRef: React.RefObject<HTMLDivElement>;
+    setSlideRef: (renderedIndex: number, element: HTMLDivElement | null) => void;
+    setConfig: (config: CarouselConfig) => void;
+    setSlidesCount: (count: number) => void;
+    slidesCount: number;
+    slideIndex: number;
+    canPrev: boolean;
+    canNext: boolean;
+    renderedIndices: number[];
+    renderedActiveIndex: number;
+    slideFlex: string;
+    trackStyle: CSSProperties;
+    contentClassName: (base: string, fadeModifier: string, fadeXModifier: string) => string;
+    isSlideVisible: (renderedIndex: number) => boolean;
+    announcement: string;
+    regionLabel: string;
+    slideLabel: (slide: number) => string;
+    next: () => void;
+    prev: () => void;
+    goToIndex: (index: number, options?: {
+        focusSlide?: boolean;
+    }) => void;
+    onTransitionEnd: (event: React.TransitionEvent<HTMLDivElement>) => void;
+    onScroll: () => void;
+    onWheel: (event: React.WheelEvent<HTMLDivElement>) => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    onPointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onPointerMove: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onPointerUp: () => void;
+}
+/**
+ * The carousel engine. Holds the infinite-loop track state and exposes the
+ * imperative API consumed by `Carousel.Content`, `Carousel.Navigation` and
+ * `Carousel.Indicators`. Ported from the Angular `tedi-carousel-content`.
+ */
+export declare const useCarousel: () => CarouselApi;

package/src/tedi/components/content/carousel/use-carousel.es.js

@@ -0,0 +1,228 @@
+import { useState as R, useRef as i, useEffect as G, useMemo as S, useCallback as s } from "react";
+import At from "../../../helpers/hooks/use-breakpoint.es.js";
+import { resolveBreakpointValue as ct } from "./carousel-utils.es.js";
+import { useLabels as Ft } from "../../../providers/label-provider/use-labels.es.js";
+const Xt = {
+  slidesPerView: { xs: 1 },
+  gap: { xs: 1 },
+  fade: !1,
+  transitionMs: 400,
+  loop: !0,
+  centered: !1
+}, X = (T, x) => (T % x + x) % x, $t = () => {
+  const { getLabel: T } = Ft(), x = At(), [u, at] = R(Xt), [e, it] = R(0), [l, w] = R(0), [h, J] = R(0), [Q, g] = R(!1), [C, ut] = R(0), [Z, lt] = R(16), [ft, dt] = R(""), N = i(null), tt = i(null), et = i([]), V = i(!1), y = i(!1), K = i(!1), O = i(0), A = i(0), rt = i(0), Y = i(0), U = i(0), j = i(), W = i(0), nt = i(!0), f = i(l), ot = i(h);
+  G(() => {
+    f.current = l;
+  }, [l]), G(() => {
+    ot.current = h;
+  }, [h]);
+  const c = S(
+    () => ct(u.slidesPerView, x),
+    [u.slidesPerView, x]
+  ), I = S(() => ct(u.gap, x), [u.gap, x]), P = S(() => I * Z, [I, Z]), n = u.loop, M = S(
+    () => Math.max(0, e - Math.ceil(c)),
+    [e, c]
+  ), b = s(
+    (t) => n ? t : Math.min(Math.max(t, 0), M),
+    [n, M]
+  ), m = n ? e : 0, mt = S(() => e === 0 ? 0 : n ? X(Math.floor(l), e) : Math.min(Math.max(Math.round(l), 0), e - 1), [l, e, n]), E = n ? l - h + m : l, ht = n || l > 1e-3, pt = n || l < M - 1e-3, Mt = S(() => {
+    if (!e) return [];
+    if (!n) return Array.from({ length: e }, (o, a) => a);
+    const t = 2 * m + Math.ceil(c), r = h - m;
+    return Array.from({ length: t }, (o, a) => X(r + a, e));
+  }, [e, m, c, h, n]), xt = S(
+    () => `0 0 calc((100% - ${(c - 1) * I}rem) / ${c})`,
+    [c, I]
+  ), wt = S(() => {
+    if (!C)
+      return { gap: `${I}rem`, transform: "translate3d(0,0,0)", transition: "none" };
+    const t = P * (c - 1), r = (C - t) / c, o = n ? l - h + m : l, a = u.centered ? (C - r) / 2 : 0, d = -o * (r + P) + a;
+    return {
+      gap: `${I}rem`,
+      transform: `translate3d(${d}px, 0, 0)`,
+      transition: Q ? `transform ${u.transitionMs}ms ease` : "none"
+    };
+  }, [
+    C,
+    I,
+    P,
+    c,
+    l,
+    h,
+    m,
+    Q,
+    u.transitionMs,
+    u.centered,
+    n
+  ]), gt = s(
+    (t) => {
+      const r = Math.ceil(c);
+      return t >= E && t < E + r;
+    },
+    [c, E]
+  ), bt = s(
+    (t, r, o) => {
+      const a = [t];
+      if (u.fade) {
+        const d = u.fade === "both" || u.fade !== "right" && c <= 1;
+        a.push(d ? o : r);
+      }
+      return a.join(" ");
+    },
+    [u.fade, c]
+  ), Rt = s((t, r) => {
+    et.current[t] = r;
+  }, []), D = s(() => {
+    setTimeout(() => {
+      if (!nt.current || !e) return;
+      const t = n ? X(Math.floor(f.current), e) : Math.min(Math.max(Math.round(f.current), 0), e - 1);
+      dt(T("carousel.slide", t + 1, e));
+    }, 100);
+  }, [T, e, n]), z = s(() => {
+    V.current = !0, setTimeout(() => {
+      V.current = !1;
+    }, u.transitionMs);
+  }, [u.transitionMs]), st = s(() => {
+    setTimeout(() => {
+      var r;
+      const t = f.current - ot.current + m;
+      (r = et.current[t]) == null || r.focus({ preventScroll: !0 });
+    });
+  }, [m]), H = s(() => {
+    !e || V.current || !n && f.current >= M - 1e-3 || (g(!0), w((t) => b(t + 1)), z(), D());
+  }, [e, n, M, b, z, D]), q = s(() => {
+    !e || V.current || !n && f.current <= 1e-3 || (g(!0), w((t) => b(t - 1)), z(), D());
+  }, [e, n, b, z, D]), $ = s(
+    (t, r) => {
+      if (!(!e || V.current)) {
+        if (g(!0), n) {
+          const o = X(Math.floor(f.current), e), d = X(t, e) - o;
+          w((p) => p + d);
+        } else
+          w(b(t));
+        r != null && r.focusSlide ? K.current = !0 : D();
+      }
+    },
+    [e, n, b, D]
+  ), St = s(
+    (t) => {
+      t.target !== tt.current || t.propertyName !== "transform" || y.current || (g(!1), J(Math.floor(f.current)), K.current && (K.current = !1, st()));
+    },
+    [st]
+  ), It = s(() => {
+    const t = N.current;
+    t && (t.scrollLeft = 0, t.scrollTop = 0);
+  }, []), L = s(() => (C - P * (c - 1)) / c + P, [C, P, c]), kt = s(
+    (t) => {
+      if (!e) return;
+      const r = Math.abs(t.deltaX) > Math.abs(t.deltaY) ? t.deltaX : t.shiftKey ? t.deltaY : 0;
+      if (!r) return;
+      const o = L();
+      if (!o) return;
+      const a = r / o;
+      W.current += a;
+      const d = m * 0.9, p = n ? h - d : 0, k = n ? h + d : M, v = f.current + a, B = Math.min(Math.max(v, p), k), Lt = B !== v;
+      g(!1), w(B), clearTimeout(j.current), j.current = setTimeout(() => {
+        g(!0);
+        const Vt = Math.sign(W.current), F = f.current;
+        let _ = Math.round(F);
+        Math.abs(W.current) > 0.3 && (_ = Vt > 0 ? Math.ceil(F) : Math.floor(F)), Lt && (F <= p && (_ = Math.ceil(p)), F >= k && (_ = Math.floor(k)));
+        const yt = Math.min(Math.max(_, p), k);
+        w(yt), W.current = 0;
+      }, 120);
+    },
+    [e, L, m, h, n, M]
+  ), Tt = s(
+    (t) => {
+      switch (t.key) {
+        case "ArrowRight":
+        case "PageDown":
+          t.preventDefault(), H();
+          break;
+        case "ArrowLeft":
+        case "PageUp":
+          t.preventDefault(), q();
+          break;
+        case "Home":
+          t.preventDefault(), $(0);
+          break;
+        case "End":
+          t.preventDefault(), $(e - 1);
+          break;
+      }
+    },
+    [H, q, $, e]
+  ), Ct = s(
+    (t) => {
+      var r;
+      e && ((r = N.current) == null || r.setPointerCapture(t.pointerId), y.current = !0, g(!1), O.current = t.clientX, A.current = f.current, rt.current = t.timeStamp, Y.current = t.clientX, U.current = t.timeStamp, n && J(Math.floor(f.current)));
+    },
+    [e, n]
+  ), Pt = s(
+    (t) => {
+      if (!y.current) return;
+      const r = L();
+      if (!r) return;
+      const o = t.clientX - O.current;
+      if (Number.isNaN(o)) return;
+      Y.current = t.clientX, U.current = t.timeStamp;
+      const a = o / r, d = A.current - a, p = m * 0.9, k = Math.floor(A.current), v = n ? k - p : 0, B = n ? k + p : M;
+      w(Math.min(Math.max(d, v), B));
+    },
+    [L, m, n, M]
+  ), Dt = s(() => {
+    if (!y.current) return;
+    y.current = !1, g(!0);
+    const t = L(), r = Math.round(f.current);
+    let o = r;
+    const a = U.current - rt.current, d = a > 0 && t ? -(Y.current - O.current) / t / a : 0;
+    Math.abs(d) > 15e-4 && r === Math.round(A.current) && (o = Math.round(A.current) + (d > 0 ? 1 : -1)), w(b(o));
+  }, [L, b]);
+  return G(() => {
+    const t = N.current;
+    if (!t) return;
+    const r = () => {
+      ut(t.clientWidth), lt(parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);
+    };
+    r();
+    const o = new ResizeObserver(r);
+    return o.observe(t), () => o.disconnect();
+  }, []), G(
+    () => () => {
+      nt.current = !1, clearTimeout(j.current);
+    },
+    []
+  ), {
+    viewportRef: N,
+    trackRef: tt,
+    setSlideRef: Rt,
+    setConfig: at,
+    setSlidesCount: it,
+    slidesCount: e,
+    slideIndex: mt,
+    canPrev: ht,
+    canNext: pt,
+    renderedIndices: Mt,
+    renderedActiveIndex: E,
+    slideFlex: xt,
+    trackStyle: wt,
+    contentClassName: bt,
+    isSlideVisible: gt,
+    announcement: ft,
+    regionLabel: T("carousel"),
+    slideLabel: (t) => T("carousel.slide", t, e),
+    next: H,
+    prev: q,
+    goToIndex: $,
+    onTransitionEnd: St,
+    onScroll: It,
+    onWheel: kt,
+    onKeyDown: Tt,
+    onPointerDown: Ct,
+    onPointerMove: Pt,
+    onPointerUp: Dt
+  };
+};
+export {
+  $t as useCarousel
+};

package/src/tedi/components/content/heading-with-icon/heading-with-icon.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),g=require("../../../../../external/classnames/index.cjs.js"),m=require("../../base/icon/icon.cjs.js"),p=require("../../base/typography/heading/heading.cjs.js"),q=require("./heading-with-icon.module.scss.cjs.js"),r=t=>{const{children:e,className:c,element:s="h4",name:n,size:a=24,headingColor:d="primary",iconColor:l="primary",...i}=t,u={children:e,element:s,className:g.default(q.default["tedi-heading-with-icon"],c),color:d,...i},h={name:n,color:l,size:a,...i};return o.jsxs(p.Heading,{...u,children:[n&&o.jsx(m.Icon,{...h}),e]})};exports.HeadingWithIcon=r;exports.default=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),h=require("../../../../../external/classnames/index.cjs.js"),g=require("../../base/icon/icon.cjs.js"),m=require("../../base/typography/heading/heading.cjs.js"),p=require("./heading-with-icon.module.scss.cjs.js"),q=r=>{const{children:e,className:t,element:c="h4",name:n,size:s=24,headingColor:a="primary",iconColor:d="primary",...i}=r,l={children:e,element:c,className:h.default(p.default["tedi-heading-with-icon"],t),color:a,...i},u={name:n,color:d,size:s,...i};return o.jsxs(m.Heading,{...l,children:[n&&o.jsx(g.Icon,{...u}),e]})};exports.HeadingWithIcon=q;

package/src/tedi/components/content/heading-with-icon/heading-with-icon.es.js

@@ -3,29 +3,28 @@ import h from "../../../../../external/classnames/index.es.js";
 import { Icon as f } from "../../base/icon/icon.es.js";
 import { Heading as g } from "../../base/typography/heading/heading.es.js";
 import x from "./heading-with-icon.module.scss.es.js";
-const H = (i) => {
+const I = (e) => {
   const {
     children: o,
     className: s,
     element: n = "h4",
     name: r,
-    size: t = 24,
-    headingColor: m = "primary",
-    iconColor: a = "primary",
-    ...e
-  } = i, c = {
+    size: m = 24,
+    headingColor: t = "primary",
+    iconColor: c = "primary",
+    ...i
+  } = e, a = {
     children: o,
     element: n,
     className: h(x["tedi-heading-with-icon"], s),
-    color: m,
-    ...e
-  }, l = { name: r, color: a, size: t, ...e };
-  return /* @__PURE__ */ p(g, { ...c, children: [
+    color: t,
+    ...i
+  }, l = { name: r, color: c, size: m, ...i };
+  return /* @__PURE__ */ p(g, { ...a, children: [
     r && /* @__PURE__ */ d(f, { ...l }),
     o
   ] });
 };
 export {
-  H as HeadingWithIcon,
-  H as default
+  I as HeadingWithIcon
 };

package/src/tedi/components/content/label/label.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("../../../../../external/classnames/index.cjs.js"),j=require("react"),x=require("../../buttons/info-button/info-button.cjs.js"),l=require("../../overlays/tooltip/tooltip.cjs.js"),t=require("./label.module.scss.cjs.js"),B=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),g=require("../../../providers/label-provider/use-labels.cjs.js"),i=j.forwardRef((r,s)=>{const{getCurrentBreakpointProps:n}=B.useBreakpointProps(r.defaultServerBreakpoint),{as:u="label",children:d,className:c,isBold:b,isSmall:o,required:p,tooltip:a,...f}=n(r),{getLabel:m}=g.useLabels(),q=h.default(t.default["tedi-label"],b&&t.default["tedi-label--bold"],o&&t.default["tedi-label--small"],c);return e.jsxs(u,{ref:s,className:q,...f,children:[d,p&&e.jsx("span",{className:t.default["tedi-label__required"],"aria-hidden":"true",children:"*"}),a&&e.jsx("span",{"aria-hidden":"true",children:e.jsxs(l.Tooltip,{children:[e.jsx(l.Tooltip.Trigger,{children:e.jsx(x.InfoButton,{isSmall:o,"aria-label":m("infoButton.moreInformation")})}),e.jsx(l.Tooltip.Content,{children:a})]})})]})});i.displayName="Label";exports.Label=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("../../../../../external/classnames/index.cjs.js"),j=require("react"),x=require("../../buttons/info-button/info-button.cjs.js"),l=require("../../overlays/tooltip/tooltip.cjs.js"),t=require("./label.module.scss.cjs.js"),B=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),g=require("../../../providers/label-provider/use-labels.cjs.js"),o=j.forwardRef((r,s)=>{const{getCurrentBreakpointProps:n}=B.useBreakpointProps(r.defaultServerBreakpoint),{as:d="label",children:u,className:c,isBold:b,isSmall:a,required:f,tooltip:i,...p}=n(r),{getLabel:m}=g.useLabels(),q=h.default(t.default["tedi-label"],b&&t.default["tedi-label--bold"],a&&t.default["tedi-label--small"],c);return e.jsxs(d,{ref:s,className:q,...p,children:[u,f&&e.jsx("span",{className:t.default["tedi-label__required"],"aria-hidden":"true",children:"*"}),i&&e.jsx("span",{"aria-hidden":"true",className:t.default["tedi-label__info"],children:e.jsxs(l.Tooltip,{children:[e.jsx(l.Tooltip.Trigger,{children:e.jsx(x.InfoButton,{isSmall:a,"aria-label":m("infoButton.moreInformation")})}),e.jsx(l.Tooltip.Content,{children:i})]})})]})});o.displayName="Label";exports.Label=o;

package/src/tedi/components/content/label/label.es.js

@@ -5,33 +5,33 @@ import { InfoButton as g } from "../../buttons/info-button/info-button.es.js";
 import { Tooltip as l } from "../../overlays/tooltip/tooltip.es.js";
 import r from "./label.module.scss.es.js";
 import { useBreakpointProps as L } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as k } from "../../../providers/label-provider/use-labels.es.js";
-const x = N((o, s) => {
+import { useLabels as _ } from "../../../providers/label-provider/use-labels.es.js";
+const k = N((o, s) => {
   const { getCurrentBreakpointProps: n } = L(o.defaultServerBreakpoint), {
     as: m = "label",
     children: d,
-    className: p,
-    isBold: c,
+    className: c,
+    isBold: p,
     isSmall: t,
     required: f,
     tooltip: a,
     ...b
-  } = n(o), { getLabel: u } = k(), h = B(
+  } = n(o), { getLabel: u } = _(), h = B(
     r["tedi-label"],
-    c && r["tedi-label--bold"],
+    p && r["tedi-label--bold"],
     t && r["tedi-label--small"],
-    p
+    c
   );
   return /* @__PURE__ */ i(m, { ref: s, className: h, ...b, children: [
     d,
     f && /* @__PURE__ */ e("span", { className: r["tedi-label__required"], "aria-hidden": "true", children: "*" }),
-    a && /* @__PURE__ */ e("span", { "aria-hidden": "true", children: /* @__PURE__ */ i(l, { children: [
+    a && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: r["tedi-label__info"], children: /* @__PURE__ */ i(l, { children: [
       /* @__PURE__ */ e(l.Trigger, { children: /* @__PURE__ */ e(g, { isSmall: t, "aria-label": u("infoButton.moreInformation") }) }),
       /* @__PURE__ */ e(l.Content, { children: a })
     ] }) })
   ] });
 });
-x.displayName = "Label";
+k.displayName = "Label";
 export {
-  x as Label
+  k as Label
 };

package/src/tedi/components/content/label/label.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-label":"tedi-label-473ab627","tedi-label--small":"tedi-label--small-20e328dc","tedi-label--bold":"tedi-label--bold-9d758835","tedi-label__required":"tedi-label__required-414e3f9d"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-label":"tedi-label-473ab627","tedi-label--small":"tedi-label--small-20e328dc","tedi-label--bold":"tedi-label--bold-9d758835","tedi-label__required":"tedi-label__required-414e3f9d","tedi-label__info":"tedi-label__info-c9df19b4"};exports.default=e;

package/src/tedi/components/content/label/label.module.scss.es.js

@@ -2,7 +2,8 @@ const e = {
   "tedi-label": "tedi-label-473ab627",
   "tedi-label--small": "tedi-label--small-20e328dc",
   "tedi-label--bold": "tedi-label--bold-9d758835",
-  "tedi-label__required": "tedi-label__required-414e3f9d"
+  "tedi-label__required": "tedi-label__required-414e3f9d",
+  "tedi-label__info": "tedi-label__info-c9df19b4"
 };
 export {
   e as default

package/src/tedi/components/content/list/list-item.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),c=require("../../../../../external/classnames/index.cjs.js"),u=require("./list.module.scss.cjs.js"),o=require("../../layout/vertical-spacing/vertical-spacing-item.cjs.js"),m=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),a=t=>{const{getCurrentBreakpointProps:n}=m.useBreakpointProps(t.defaultServerBreakpoint),{children:i,verticalSpacingItem:e,className:l}=n(t),r=c.default(u.default["tedi-list__item"],e==null?void 0:e.className,l);return t.verticalSpacingItem?s.jsx(o.VerticalSpacingItem,{...e,element:"li",className:r,children:i}):s.jsx("li",{className:r,children:i})};exports.ListItem=a;exports.default=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),c=require("../../../../../external/classnames/index.cjs.js"),u=require("./list.module.scss.cjs.js"),o=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),m=require("../../layout/vertical-spacing/vertical-spacing-item.cjs.js"),a=t=>{const{getCurrentBreakpointProps:n}=o.useBreakpointProps(t.defaultServerBreakpoint),{children:i,verticalSpacingItem:e,className:l}=n(t),r=c.default(u.default["tedi-list__item"],e==null?void 0:e.className,l);return t.verticalSpacingItem?s.jsx(m.VerticalSpacingItem,{...e,element:"li",className:r,children:i}):s.jsx("li",{className:r,children:i})};exports.ListItem=a;exports.default=a;