@tedi-design-system/react 19.1.0-rc.13 → 19.1.0-rc.15

package/package.json

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

package/src/community/components/map-components/base-map-selection/base-map-selection.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),w=require("../../../../../external/classnames/index.cjs.js"),f=require("react"),P=require("../../../../tedi/components/buttons/button/button.cjs.js"),I=require("../../../../tedi/components/form/field/field.cjs.js"),R=require("../../../../tedi/components/form/input-group/input-group.cjs.js"),k=require("../../../../tedi/components/form/slider/slider.cjs.js"),G=require("../map-button/map-button.cjs.js"),x=require("./base-map-option.cjs.js"),t=require("./base-map-selection.module.scss.cjs.js"),$=require("../../../../tedi/providers/label-provider/use-labels.cjs.js"),h=require("../../../../tedi/helpers/hooks/use-breakpoint.cjs.js"),r=require("../../../../tedi/components/overlays/popover/popover.cjs.js"),E=require("../../../../tedi/components/form/input-group/components/input/input.cjs.js"),F=require("../../../../tedi/components/form/input-group/components/suffix/suffix.cjs.js"),o=s=>{const n=Number(s);return Number.isNaN(n)?0:Math.min(100,Math.max(0,n))};function l(s){const{title:n,content:y,children:j,multiple:g=!1,showTransparency:q=!1,transparency:c,defaultTransparency:M,onTransparencyChange:i,id:a}=s,{getLabel:B}=$.useLabels(),v=h.isBreakpointBelow(h.default(),"md"),[S,_]=f.useState(!1),u=B("baseMapSelection.transparency"),d=c!==void 0,[N,L]=f.useState(()=>o(M??0)),p=o(d?c:N),m=C=>{const b=o(C);d||L(b),i==null||i(b)},O=w.default(t.default["tedi-base-map-selection__wrapper"],t.default["tedi-base-map-selection--button"],g&&t.default["tedi-base-map-selection--multiple"]),T=v?e.jsx(G.MapButton,{id:a,icon:"map",hideLabel:!0,tooltipContent:null,selected:S,children:n}):e.jsxs(P.Button,{noStyle:!0,id:a,className:O,children:[e.jsx("div",{className:t.default["tedi-base-map-selection__content"],"aria-hidden":!0,children:y}),e.jsx("div",{className:t.default["tedi-base-map-selection__title"],children:n})]});return e.jsxs(r.Popover,{placement:"top-start",onToggle:_,children:[e.jsx(r.Popover.Trigger,{children:T}),e.jsxs(r.Popover.Content,{width:"medium",children:[e.jsx("div",{className:t.default["tedi-base-map-selection__options"],children:j}),q&&e.jsx("div",{className:t.default["tedi-base-map-selection__transparency"],children:e.jsx(k.Slider,{"aria-label":u,min:0,max:100,value:p,onChange:m,minLabel:"0%",maxLabel:"100%",addonRight:e.jsx("div",{className:t.default["tedi-base-map-selection__transparency-field"],children:e.jsxs(R.InputGroupBase,{id:`${a}-transparency`,label:u,hideLabel:!0,children:[e.jsx(E.Input,{children:e.jsx(I.Field,{type:"number",id:`${a}-transparency`,value:String(p),onChange:m})}),e.jsx(F.Suffix,{children:"%"})]})})})})]})]})}l.Option=x.BaseMapOption;l.displayName="BaseMapSelection";exports.BaseMapOption=x.BaseMapOption;exports.BaseMapSelection=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),C=require("../../../../../external/classnames/index.cjs.js"),h=require("react"),I=require("../../../../tedi/components/buttons/button/button.cjs.js"),P=require("../../../../tedi/components/form/field/field.cjs.js"),R=require("../../../../tedi/components/form/input-group/input-group.cjs.js"),k=require("../../../../tedi/components/form/slider/slider.cjs.js"),G=require("../map-button/map-button.cjs.js"),x=require("./base-map-option.cjs.js"),t=require("./base-map-selection.module.scss.cjs.js"),$=require("../../../../tedi/providers/label-provider/use-labels.cjs.js"),f=require("../../../../tedi/helpers/hooks/use-breakpoint.cjs.js"),r=require("../../../../tedi/components/overlays/popover/popover.cjs.js"),z=require("../../../../tedi/components/form/input-group/components/input/input.cjs.js"),D=require("../../../../tedi/components/form/input-group/components/suffix/suffix.cjs.js"),o=s=>{const n=Number(s);return Number.isNaN(n)?0:Math.min(100,Math.max(0,n))};function l(s){const{title:n,content:y,children:j,multiple:g=!1,showTransparency:q=!1,transparency:c,defaultTransparency:M,onTransparencyChange:i,id:a}=s,{getLabel:B}=$.useLabels(),S=f.isBreakpointBelow(f.default(),"md"),[v,_]=h.useState(!1),u=B("baseMapSelection.transparency"),d=c!==void 0,[N,L]=h.useState(()=>o(M??0)),p=o(d?c:N),m=w=>{const b=o(w);d||L(b),i==null||i(b)},O=C.default(t.default["tedi-base-map-selection__wrapper"],t.default["tedi-base-map-selection--button"],g&&t.default["tedi-base-map-selection--multiple"]),T=S?e.jsx(G.MapButton,{id:a,icon:"map",showDropdownIndicator:!0,hideLabel:!0,iconSize:24,tooltipContent:null,selected:v,children:n}):e.jsxs(I.Button,{noStyle:!0,id:a,className:O,children:[e.jsx("div",{className:t.default["tedi-base-map-selection__content"],"aria-hidden":!0,children:y}),e.jsx("div",{className:t.default["tedi-base-map-selection__title"],children:n})]});return e.jsxs(r.Popover,{placement:"top-start",onToggle:_,children:[e.jsx(r.Popover.Trigger,{children:T}),e.jsxs(r.Popover.Content,{width:"medium",children:[e.jsx("div",{className:t.default["tedi-base-map-selection__options"],children:j}),q&&e.jsx("div",{className:t.default["tedi-base-map-selection__transparency"],children:e.jsx(k.Slider,{"aria-label":u,min:0,max:100,value:p,onChange:m,minLabel:"0%",maxLabel:"100%",addonRight:e.jsx("div",{className:t.default["tedi-base-map-selection__transparency-field"],children:e.jsxs(R.InputGroupBase,{id:`${a}-transparency`,label:u,hideLabel:!0,children:[e.jsx(z.Input,{children:e.jsx(P.Field,{type:"number",id:`${a}-transparency`,value:String(p),onChange:m})}),e.jsx(D.Suffix,{children:"%"})]})})})})]})]})}l.Option=x.BaseMapOption;l.displayName="BaseMapSelection";exports.BaseMapOption=x.BaseMapOption;exports.BaseMapSelection=l;

package/src/community/components/map-components/base-map-selection/base-map-selection.es.js

@@ -1,18 +1,18 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import I from "../../../../../external/classnames/index.es.js";
+import O from "../../../../../external/classnames/index.es.js";
 import { useState as h } from "react";
 import { Button as j } from "../../../../tedi/components/buttons/button/button.es.js";
 import { Field as k } from "../../../../tedi/components/form/field/field.es.js";
 import { InputGroupBase as $ } from "../../../../tedi/components/form/input-group/input-group.es.js";
-import { Slider as E } from "../../../../tedi/components/form/slider/slider.es.js";
-import { MapButton as F } from "../map-button/map-button.es.js";
-import { BaseMapOption as G } from "./base-map-option.es.js";
+import { Slider as z } from "../../../../tedi/components/form/slider/slider.es.js";
+import { MapButton as D } from "../map-button/map-button.es.js";
+import { BaseMapOption as E } from "./base-map-option.es.js";
 import t from "./base-map-selection.module.scss.es.js";
-import { useLabels as P } from "../../../../tedi/providers/label-provider/use-labels.es.js";
-import R, { isBreakpointBelow as U } from "../../../../tedi/helpers/hooks/use-breakpoint.es.js";
+import { useLabels as F } from "../../../../tedi/providers/label-provider/use-labels.es.js";
+import G, { isBreakpointBelow as P } from "../../../../tedi/helpers/hooks/use-breakpoint.es.js";
 import { Popover as s } from "../../../../tedi/components/overlays/popover/popover.es.js";
-import { Input as V } from "../../../../tedi/components/form/input-group/components/input/input.es.js";
-import { Suffix as q } from "../../../../tedi/components/form/input-group/components/suffix/suffix.es.js";
+import { Input as R } from "../../../../tedi/components/form/input-group/components/input/input.es.js";
+import { Suffix as U } from "../../../../tedi/components/form/input-group/components/suffix/suffix.es.js";
 const l = (i) => {
   const n = Number(i);
   return Number.isNaN(n) ? 0 : Math.min(100, Math.max(0, n));
@@ -28,25 +28,25 @@ function b(i) {
     defaultTransparency: B,
     onTransparencyChange: o,
     id: a
-  } = i, { getLabel: v } = P(), x = U(R(), "md"), [M, S] = h(!1), p = v("baseMapSelection.transparency"), m = c !== void 0, [L, T] = h(
+  } = i, { getLabel: v } = F(), x = P(G(), "md"), [M, S] = h(!1), p = v("baseMapSelection.transparency"), m = c !== void 0, [L, T] = h(
     () => l(B ?? 0)
-  ), d = l(m ? c : L), u = (O) => {
-    const f = l(O);
+  ), d = l(m ? c : L), u = (I) => {
+    const f = l(I);
     m || T(f), o == null || o(f);
-  }, C = I(
+  }, w = O(
     t["tedi-base-map-selection__wrapper"],
     t["tedi-base-map-selection--button"],
     N && t["tedi-base-map-selection--multiple"]
-  ), w = x ? /* @__PURE__ */ e(F, { id: a, icon: "map", hideLabel: !0, tooltipContent: null, selected: M, children: n }) : /* @__PURE__ */ r(j, { noStyle: !0, id: a, className: C, children: [
+  ), C = x ? /* @__PURE__ */ e(D, { id: a, icon: "map", showDropdownIndicator: !0, hideLabel: !0, iconSize: 24, tooltipContent: null, selected: M, children: n }) : /* @__PURE__ */ r(j, { noStyle: !0, id: a, className: w, children: [
     /* @__PURE__ */ e("div", { className: t["tedi-base-map-selection__content"], "aria-hidden": !0, children: y }),
     /* @__PURE__ */ e("div", { className: t["tedi-base-map-selection__title"], children: n })
   ] });
   return /* @__PURE__ */ r(s, { placement: "top-start", onToggle: S, children: [
-    /* @__PURE__ */ e(s.Trigger, { children: w }),
+    /* @__PURE__ */ e(s.Trigger, { children: C }),
     /* @__PURE__ */ r(s.Content, { width: "medium", children: [
       /* @__PURE__ */ e("div", { className: t["tedi-base-map-selection__options"], children: g }),
       _ && /* @__PURE__ */ e("div", { className: t["tedi-base-map-selection__transparency"], children: /* @__PURE__ */ e(
-        E,
+        z,
         {
           "aria-label": p,
           min: 0,
@@ -56,7 +56,7 @@ function b(i) {
           minLabel: "0%",
           maxLabel: "100%",
           addonRight: /* @__PURE__ */ e("div", { className: t["tedi-base-map-selection__transparency-field"], children: /* @__PURE__ */ r($, { id: `${a}-transparency`, label: p, hideLabel: !0, children: [
-            /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e(
+            /* @__PURE__ */ e(R, { children: /* @__PURE__ */ e(
               k,
               {
                 type: "number",
@@ -65,16 +65,16 @@ function b(i) {
                 onChange: u
               }
             ) }),
-            /* @__PURE__ */ e(q, { children: "%" })
+            /* @__PURE__ */ e(U, { children: "%" })
           ] }) })
         }
       ) })
     ] })
   ] });
 }
-b.Option = G;
+b.Option = E;
 b.displayName = "BaseMapSelection";
 export {
-  G as BaseMapOption,
+  E as BaseMapOption,
   b as BaseMapSelection
 };

package/src/community/components/map-components/map-button/map-button.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),f=require("../../../../../external/classnames/index.cjs.js"),b=require("react"),S=require("../../../../tedi/components/base/icon/icon.cjs.js"),y=require("../../../../tedi/components/loaders/spinner/spinner.cjs.js"),O=require("../../../../tedi/components/buttons/button/button.cjs.js"),d=require("../map-dropdown/map-dropdown.cjs.js"),t=require("./map-button.module.scss.cjs.js"),r=require("../../../../tedi/components/overlays/tooltip/tooltip.cjs.js"),u=b.forwardRef((h,x)=>{const{size:n="default",icon:c,selected:j=!1,className:g,children:s,hideLabel:p=!1,tooltipContent:m=s,dropdownItems:i,isActive:q,isHovered:v,underline:w,isLoading:a,...M}=h,[_,D]=b.useState(!1),B=j||_,C=f.default(t.default["tedi-map-button"],t.default[`tedi-map-button--${n}`],B&&t.default["tedi-map-button--selected"],i&&t.default["tedi-map-button--dropdown"],q&&t.default["tedi-map-button--is-active"],v&&t.default["tedi-map-button--is-hovered"],w&&t.default["tedi-map-button--underline"],a&&t.default["tedi-map-button--loading"],g),N=e.jsxs(e.Fragment,{children:[a?e.jsx(y.Spinner,{size:n==="small"?16:18,className:t.default["tedi-map-button__icon"]}):c&&e.jsx(S.Icon,{name:c,className:t.default["tedi-map-button__icon"],size:n==="small"?24:18}),p?e.jsx("span",{className:"sr-only",children:s}):e.jsx("div",{className:f.default(t.default["tedi-map-button__text"]),children:s})]}),l=e.jsx(O.Button,{noStyle:!0,isLoading:a,className:C,size:n,...M,ref:x,children:N}),T=p&&m?e.jsxs(r.Tooltip,{placement:"right",children:[e.jsx(r.Tooltip.Trigger,{children:l}),e.jsx(r.Tooltip.Content,{children:m})]}):l;return i?e.jsxs(d.MapDropdown,{onOpenChange:D,placement:"right-start",children:[e.jsx(d.MapDropdown.Trigger,{children:l}),e.jsx(d.MapDropdown.Content,{items:i.map(o=>({children:o.children,onClick:o.onClick,isActive:o.isActive,isDisabled:o.isDisabled}))})]}):T});u.displayName="MapButton";exports.MapButton=u;exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),b=require("../../../../../external/classnames/index.cjs.js"),h=require("react"),y=require("../../../../tedi/components/base/icon/icon.cjs.js"),O=require("../../../../tedi/components/loaders/spinner/spinner.cjs.js"),A=require("../../../../tedi/components/buttons/button/button.cjs.js"),l=require("../map-dropdown/map-dropdown.cjs.js"),t=require("./map-button.module.scss.cjs.js"),d=require("../../../../tedi/components/overlays/tooltip/tooltip.cjs.js"),u=h.forwardRef((x,j)=>{const{size:n="default",icon:c,selected:g=!1,className:w,children:i,hideLabel:p=!1,tooltipContent:m=i,dropdownItems:s,showDropdownIndicator:v=!1,isActive:q,isHovered:D,underline:M,isLoading:a,iconSize:f,..._}=x,[S,B]=h.useState(!1),C=g||S,N=b.default(t.default["tedi-map-button"],t.default[`tedi-map-button--${n}`],C&&t.default["tedi-map-button--selected"],(s||v)&&t.default["tedi-map-button--dropdown"],q&&t.default["tedi-map-button--is-active"],D&&t.default["tedi-map-button--is-hovered"],M&&t.default["tedi-map-button--underline"],a&&t.default["tedi-map-button--loading"],w),T=()=>f||(n==="small"?24:18),z=e.jsxs(e.Fragment,{children:[a?e.jsx(O.Spinner,{size:n==="small"?16:18,className:t.default["tedi-map-button__icon"]}):c&&e.jsx(y.Icon,{name:c,className:t.default["tedi-map-button__icon"],size:T()}),p?e.jsx("span",{className:"sr-only",children:i}):e.jsx("div",{className:b.default(t.default["tedi-map-button__text"]),children:i})]}),r=e.jsx(A.Button,{noStyle:!0,isLoading:a,className:N,size:n,..._,ref:j,children:z}),I=p&&m?e.jsxs(d.Tooltip,{placement:"right",children:[e.jsx(d.Tooltip.Trigger,{children:r}),e.jsx(d.Tooltip.Content,{children:m})]}):r;return s?e.jsxs(l.MapDropdown,{onOpenChange:B,placement:"right-start",children:[e.jsx(l.MapDropdown.Trigger,{children:r}),e.jsx(l.MapDropdown.Content,{items:s.map(o=>({children:o.children,onClick:o.onClick,isActive:o.isActive,isDisabled:o.isDisabled}))})]}):I});u.displayName="MapButton";exports.MapButton=u;exports.default=u;

package/src/community/components/map-components/map-button/map-button.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from '../../../../tedi';
+import { ButtonProps, IconSize } from '../../../../tedi';
 import { MapDropdownItem } from '../map-dropdown/map-dropdown';
 /**
  * Button props that don't apply to MapButton because it renders `<Button noStyle>` with its own
@@ -37,6 +37,15 @@ export interface MapButtonProps extends Omit<ButtonProps, OmittedButtonProps> {
      * When provided, the button can toggle a dropdown menu.
      */
     dropdownItems?: MapDropdownItem[];
+    /**
+     * Renders the dropdown indicator arrow in the bottom-right corner without wiring up a dropdown.
+     * @default false
+     */
+    showDropdownIndicator?: boolean;
+    /**
+     * Size of the icon displayed on the button.
+     */
+    iconSize?: IconSize;
 }
 export declare const MapButton: import('react').ForwardRefExoticComponent<Omit<MapButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 export default MapButton;

package/src/community/components/map-components/map-button/map-button.es.js

@@ -1,45 +1,47 @@
-import { jsxs as l, Fragment as T, jsx as e } from "react/jsx-runtime";
+import { jsxs as l, Fragment as A, jsx as e } from "react/jsx-runtime";
 import b from "../../../../../external/classnames/index.es.js";
-import { forwardRef as z, useState as A } from "react";
-import { Icon as I } from "../../../../tedi/components/base/icon/icon.es.js";
-import { Spinner as O } from "../../../../tedi/components/loaders/spinner/spinner.es.js";
-import { Button as j } from "../../../../tedi/components/buttons/button/button.es.js";
+import { forwardRef as O, useState as j } from "react";
+import { Icon as k } from "../../../../tedi/components/base/icon/icon.es.js";
+import { Spinner as E } from "../../../../tedi/components/loaders/spinner/spinner.es.js";
+import { Button as L } from "../../../../tedi/components/buttons/button/button.es.js";
 import { MapDropdown as d } from "../map-dropdown/map-dropdown.es.js";
 import t from "./map-button.module.scss.es.js";
 import { Tooltip as m } from "../../../../tedi/components/overlays/tooltip/tooltip.es.js";
-const k = z((f, h) => {
+const F = O((h, g) => {
   const {
     size: o = "default",
-    icon: p,
-    selected: g = !1,
-    className: N,
+    icon: c,
+    selected: v = !1,
+    className: w,
     children: i,
-    hideLabel: c = !1,
+    hideLabel: p = !1,
     tooltipContent: u = i,
     dropdownItems: s,
-    isActive: v,
-    isHovered: C,
-    underline: w,
+    showDropdownIndicator: N = !1,
+    isActive: C,
+    isHovered: D,
+    underline: S,
     isLoading: r,
+    iconSize: f,
     ..._
-  } = f, [B, D] = A(!1), x = g || B, y = b(
+  } = h, [z, B] = j(!1), I = v || z, x = b(
     t["tedi-map-button"],
     t[`tedi-map-button--${o}`],
-    x && t["tedi-map-button--selected"],
-    s && t["tedi-map-button--dropdown"],
-    v && t["tedi-map-button--is-active"],
-    C && t["tedi-map-button--is-hovered"],
-    w && t["tedi-map-button--underline"],
+    I && t["tedi-map-button--selected"],
+    (s || N) && t["tedi-map-button--dropdown"],
+    C && t["tedi-map-button--is-active"],
+    D && t["tedi-map-button--is-hovered"],
+    S && t["tedi-map-button--underline"],
     r && t["tedi-map-button--loading"],
-    N
-  ), M = /* @__PURE__ */ l(T, { children: [
-    r ? /* @__PURE__ */ e(O, { size: o === "small" ? 16 : 18, className: t["tedi-map-button__icon"] }) : p && /* @__PURE__ */ e(I, { name: p, className: t["tedi-map-button__icon"], size: o === "small" ? 24 : 18 }),
-    c ? /* @__PURE__ */ e("span", { className: "sr-only", children: i }) : /* @__PURE__ */ e("div", { className: b(t["tedi-map-button__text"]), children: i })
-  ] }), a = /* @__PURE__ */ e(j, { noStyle: !0, isLoading: r, className: y, size: o, ..._, ref: h, children: M }), S = c && u ? /* @__PURE__ */ l(m, { placement: "right", children: [
+    w
+  ), y = () => f || (o === "small" ? 24 : 18), M = /* @__PURE__ */ l(A, { children: [
+    r ? /* @__PURE__ */ e(E, { size: o === "small" ? 16 : 18, className: t["tedi-map-button__icon"] }) : c && /* @__PURE__ */ e(k, { name: c, className: t["tedi-map-button__icon"], size: y() }),
+    p ? /* @__PURE__ */ e("span", { className: "sr-only", children: i }) : /* @__PURE__ */ e("div", { className: b(t["tedi-map-button__text"]), children: i })
+  ] }), a = /* @__PURE__ */ e(L, { noStyle: !0, isLoading: r, className: x, size: o, ..._, ref: g, children: M }), T = p && u ? /* @__PURE__ */ l(m, { placement: "right", children: [
     /* @__PURE__ */ e(m.Trigger, { children: a }),
     /* @__PURE__ */ e(m.Content, { children: u })
   ] }) : a;
-  return s ? /* @__PURE__ */ l(d, { onOpenChange: D, placement: "right-start", children: [
+  return s ? /* @__PURE__ */ l(d, { onOpenChange: B, placement: "right-start", children: [
     /* @__PURE__ */ e(d.Trigger, { children: a }),
     /* @__PURE__ */ e(
       d.Content,
@@ -52,10 +54,10 @@ const k = z((f, h) => {
         }))
       }
     )
-  ] }) : S;
+  ] }) : T;
 });
-k.displayName = "MapButton";
+F.displayName = "MapButton";
 export {
-  k as MapButton,
-  k as default
+  F as MapButton,
+  F as default
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=e=>{if(e.key!=="ArrowLeft"&&e.key!=="ArrowRight"&&e.key!=="Home"&&e.key!=="End")return null;const l=e.currentTarget.closest('[role="tablist"]');if(!l)return null;const t=Array.from(l.querySelectorAll('[role="tab"]:not([disabled])')).filter(a=>getComputedStyle(a).display!=="none"),n=t.indexOf(e.currentTarget);if(t.length===0||n===-1)return null;let r=-1;switch(e.key){case"ArrowLeft":r=n===0?t.length-1:n-1;break;case"ArrowRight":r=n===t.length-1?0:n+1;break;case"Home":r=0;break;case"End":r=t.length-1;break}return r!==-1?(e.preventDefault(),t[r].focus(),t[r].scrollIntoView({block:"nearest",inline:"nearest"}),t[r]):null};exports.navigateTablist=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=e=>{e.scrollIntoView({block:"nearest",inline:"nearest"})},s=e=>{if(e.key!=="ArrowLeft"&&e.key!=="ArrowRight"&&e.key!=="Home"&&e.key!=="End")return null;const l=e.currentTarget.closest('[role="tablist"]');if(!l)return null;const t=Array.from(l.querySelectorAll('[role="tab"]:not([disabled])')).filter(a=>getComputedStyle(a).display!=="none"),n=t.indexOf(e.currentTarget);if(t.length===0||n===-1)return null;let r=-1;switch(e.key){case"ArrowLeft":r=n===0?t.length-1:n-1;break;case"ArrowRight":r=n===t.length-1?0:n+1;break;case"Home":r=0;break;case"End":r=t.length-1;break}return r!==-1?(e.preventDefault(),t[r].focus(),o(t[r]),t[r]):null};exports.navigateTablist=s;exports.scrollTabIntoView=o;

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

@@ -1,3 +1,8 @@
+/**
+ * Scrolls a tab fully into view inside a horizontally scrollable tablist.
+ * A no-op when the tab is already fully visible.
+ */
+export declare const scrollTabIntoView: (tab: HTMLElement) => void;
 /**
  * Navigates to a sibling tab in the tablist using ArrowLeft/ArrowRight/Home/End keys.
  * Returns the target tab element if navigation occurred, or null otherwise.

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

@@ -1,10 +1,12 @@
-const o = (e) => {
+const a = (e) => {
+  e.scrollIntoView({ block: "nearest", inline: "nearest" });
+}, s = (e) => {
   if (e.key !== "ArrowLeft" && e.key !== "ArrowRight" && e.key !== "Home" && e.key !== "End")
     return null;
   const l = e.currentTarget.closest('[role="tablist"]');
   if (!l) return null;
   const t = Array.from(l.querySelectorAll('[role="tab"]:not([disabled])')).filter(
-    (a) => getComputedStyle(a).display !== "none"
+    (o) => getComputedStyle(o).display !== "none"
   ), n = t.indexOf(e.currentTarget);
   if (t.length === 0 || n === -1) return null;
   let r = -1;
@@ -22,8 +24,9 @@ const o = (e) => {
       r = t.length - 1;
       break;
   }
-  return r !== -1 ? (e.preventDefault(), t[r].focus(), t[r].scrollIntoView({ block: "nearest", inline: "nearest" }), t[r]) : null;
+  return r !== -1 ? (e.preventDefault(), t[r].focus(), a(t[r]), t[r]) : null;
 };
 export {
-  o as navigateTablist
+  s as navigateTablist,
+  a as scrollTabIntoView
 };

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

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

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

@@ -1,15 +1,15 @@
-import { jsxs as p, jsx as f } from "react/jsx-runtime";
-import T from "../../../../../../external/classnames/index.es.js";
+import { jsxs as p, jsx as T } from "react/jsx-runtime";
+import f from "../../../../../../external/classnames/index.es.js";
 import { Icon as u } from "../../../base/icon/icon.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: 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);
+import { navigateTablist as h, scrollTabIntoView as x } from "../tabs-helpers.es.js";
+const y = (c) => {
+  const { id: e, children: l, icon: i, disabled: t = !1, className: d } = c, { currentTab: m, setCurrentTab: o } = _(), r = m === e, b = (a) => {
+    t || (o(e), x(a.currentTarget));
+  }, g = (a) => {
+    const n = h(a);
+    n && o(n.id);
   };
   return /* @__PURE__ */ p(
     "button",
@@ -22,22 +22,22 @@ const x = (n) => {
       "aria-controls": `${e}-panel`,
       tabIndex: r ? 0 : -1,
       disabled: t,
-      className: T(
+      className: f(
         s["tedi-tabs__trigger"],
         { [s["tedi-tabs__trigger--selected"]]: r },
         { [s["tedi-tabs__trigger--disabled"]]: t },
-        l
+        d
       ),
-      onClick: m,
-      onKeyDown: b,
+      onClick: b,
+      onKeyDown: g,
       children: [
-        a && /* @__PURE__ */ f(u, { name: a, size: 18, color: "inherit" }),
-        c
+        i && /* @__PURE__ */ T(u, { name: i, size: 18, color: "inherit" }),
+        l
       ]
     }
   );
 };
-x.displayName = "TabsTrigger";
+y.displayName = "TabsTrigger";
 export {
-  x as TabsTrigger
+  y as TabsTrigger
 };