@tedi-design-system/react 19.1.0-rc.6 → 19.1.0-rc.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "19.1.0-rc.6",
+  "version": "19.1.0-rc.8",
   "description": "TEDI Design System React component library — accessible, reusable UI components. Docs & live examples: https://storybook.tedi.ee/react/rc/",
   "type": "module",
   "sideEffects": false,
@@ -47,7 +47,7 @@
     "@mui/material": "^5.15.13",
     "@mui/x-date-pickers": "^5.0.20",
     "@tanstack/react-table": "^8.13.2",
-    "@tedi-design-system/core": "^6.8.1",
+    "@tedi-design-system/core": "^6.9.0",
     "classnames": "^2.5.1",
     "draft-js": "^0.11.7",
     "draftjs-md-converter": "^1.5.2",

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),N=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),I=require("../../../../tedi/components/base/icon/icon.cjs.js"),t=require("./base-map-selection.module.scss.cjs.js"),S=require("../../../../tedi/helpers/hooks/use-element-size.cjs.js"),s=require("../../../../tedi/components/overlays/tooltip/tooltip.cjs.js"),d=b=>{const{title:l,content:x,selected:c,onSelect:n,type:u="selection",className:h,id:j,multiple:T,disabled:o,tooltipText:p,tooltipType:f="info"}=b,a=r.useRef(null),_=S.useElementSize(a),[y,g]=r.useState(!1);r.useEffect(()=>{const i=a.current;i&&g(i.scrollWidth>i.clientWidth)},[_,l]);const q=()=>{o||n==null||n()},v=i=>{o||(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),n==null||n())},M=N.default(t.default["tedi-base-map-selection__wrapper"],c&&t.default["tedi-base-map-selection--selected"],u&&t.default[`tedi-base-map-selection--${u}`],T&&t.default["tedi-base-map-selection--multiple"],o&&t.default["tedi-base-map-selection--disabled"],h),m=e.jsx("div",{ref:a,tabIndex:-1,className:t.default["tedi-base-map-selection__title"],children:l}),E=y?e.jsxs(s.Tooltip,{children:[e.jsx(s.Tooltip.Trigger,{children:m}),e.jsx(s.Tooltip.Content,{children:l})]}):m;return e.jsxs("div",{role:"button",tabIndex:o?-1:0,"aria-pressed":!!c,"aria-disabled":o||void 0,onClick:q,onKeyDown:v,className:M,id:j,children:[e.jsx("div",{"aria-hidden":!0,className:t.default["tedi-base-map-selection__content"],children:x}),p&&e.jsxs(s.Tooltip,{children:[e.jsx(s.Tooltip.Trigger,{children:e.jsx("span",{tabIndex:-1,className:t.default["tedi-base-map-selection__info"],children:e.jsx(I.Icon,{background:"brand-secondary",name:f==="error"?"error":"info",size:16,color:f==="error"?"danger":"brand"})})}),e.jsx(s.Tooltip.Content,{children:p})]}),E]})};d.displayName="BaseMapOption";exports.BaseMapOption=d;exports.default=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),M=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),y=require("../../../../tedi/components/base/icon/icon.cjs.js"),N=require("../../../../tedi/components/buttons/button/button.cjs.js"),t=require("./base-map-selection.module.scss.cjs.js"),B=require("../../../../tedi/helpers/hooks/use-element-size.cjs.js"),d=require("../../../../tedi/components/overlays/tooltip/tooltip.cjs.js"),c=h=>{const{title:s,content:x,selected:u,onSelect:a,type:p="selection",className:j,id:_,multiple:T,disabled:n,tooltipText:i,tooltipType:f="info"}=h,o=r.useRef(null),q=B.useElementSize(o),[m,S]=r.useState(!1);r.useEffect(()=>{const l=o.current;l&&S(l.scrollWidth>l.clientWidth)},[q,s]);const g=()=>{n||a==null||a()},v=M.default(t.default["tedi-base-map-selection__wrapper"],u&&t.default["tedi-base-map-selection--selected"],p&&t.default[`tedi-base-map-selection--${p}`],T&&t.default["tedi-base-map-selection--multiple"],n&&t.default["tedi-base-map-selection--disabled"],j),b=e.jsxs(N.Button,{noStyle:!0,disabled:n&&!i,"aria-pressed":!!u,"aria-disabled":n||void 0,onClick:g,className:v,id:_,children:[e.jsx("div",{"aria-hidden":!0,className:t.default["tedi-base-map-selection__content"],children:x}),i&&e.jsx("span",{className:t.default["tedi-base-map-selection__info"],children:e.jsx(y.Icon,{background:"brand-secondary",name:f==="error"?"error":"info",size:16,color:f==="error"?"danger":"brand"})}),e.jsx("div",{ref:o,className:t.default["tedi-base-map-selection__title"],children:s})]});return!i&&!m?b:e.jsxs(d.Tooltip,{ariaHidden:!i,openWith:"hover",children:[e.jsx(d.Tooltip.Trigger,{children:b}),e.jsx(d.Tooltip.Content,{children:i?e.jsxs(e.Fragment,{children:[m&&e.jsx("div",{"aria-hidden":!0,children:s}),i]}):s})]})};c.displayName="BaseMapOption";exports.BaseMapOption=c;exports.default=c;

package/src/community/components/map-components/base-map-selection/base-map-option.d.ts

@@ -45,14 +45,17 @@ export interface BaseMapOptionProps {
      */
     disabled?: boolean;
     /**
-     * Text shown in a tooltip. When set, an info icon is rendered in the middle of
-     * the option and reveals this text on hover.
+     * Text shown in a tooltip. When set, an info icon is rendered in the middle of the
+     * option and hovering anywhere on the option reveals this text. A title too long to
+     * fit is shown above it in the same tooltip rather than in a second, competing one.
      */
     tooltipText?: string;
     /**
-     * Visual style of the info icon shown when `tooltipText` is set.
-     * - `'info'`: neutral informational icon (default)
-     * - `'error'`: error/danger styled icon
+     * Which icon and colour the tooltip indicator uses.
+     * - `'info'`: neutral info icon in the brand colour (default)
+     * - `'error'`: error icon in the danger colour, for a layer that is unavailable
+     *
+     * Only takes effect when `tooltipText` is set, since that is what renders the icon.
      * @default 'info'
      */
     tooltipType?: BaseMapOptionTooltipType;

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

@@ -1,75 +1,73 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import k from "../../../../../external/classnames/index.es.js";
-import { useRef as C, useState as w, useEffect as z } from "react";
-import { Icon as B } from "../../../../tedi/components/base/icon/icon.es.js";
-import t from "./base-map-selection.module.scss.es.js";
-import { useElementSize as D } from "../../../../tedi/helpers/hooks/use-element-size.es.js";
-import { Tooltip as s } from "../../../../tedi/components/overlays/tooltip/tooltip.es.js";
-const M = (b) => {
+import { jsxs as l, jsx as t, Fragment as B } from "react/jsx-runtime";
+import S from "../../../../../external/classnames/index.es.js";
+import { useRef as z, useState as E, useEffect as M } from "react";
+import { Icon as W } from "../../../../tedi/components/base/icon/icon.es.js";
+import { Button as j } from "../../../../tedi/components/buttons/button/button.es.js";
+import e from "./base-map-selection.module.scss.es.js";
+import { useElementSize as k } from "../../../../tedi/helpers/hooks/use-element-size.es.js";
+import { Tooltip as d } from "../../../../tedi/components/overlays/tooltip/tooltip.es.js";
+const C = (h) => {
   const {
-    title: r,
-    content: u,
-    selected: d,
-    onSelect: n,
-    type: c = "selection",
-    className: h,
-    id: y,
-    multiple: _,
-    disabled: o,
-    tooltipText: m,
+    title: o,
+    content: b,
+    selected: c,
+    onSelect: s,
+    type: m = "selection",
+    className: _,
+    id: N,
+    multiple: y,
+    disabled: r,
+    tooltipText: i,
     tooltipType: p = "info"
-  } = b, a = C(null), x = D(a), [N, T] = w(!1);
-  z(() => {
-    const i = a.current;
-    i && T(i.scrollWidth > i.clientWidth);
-  }, [x, r]);
-  const g = () => {
-    o || n == null || n();
-  }, v = (i) => {
-    o || (i.key === "Enter" || i.key === " ") && (i.preventDefault(), n == null || n());
-  }, E = k(
-    t["tedi-base-map-selection__wrapper"],
-    d && t["tedi-base-map-selection--selected"],
-    c && t[`tedi-base-map-selection--${c}`],
-    _ && t["tedi-base-map-selection--multiple"],
-    o && t["tedi-base-map-selection--disabled"],
-    h
-  ), f = /* @__PURE__ */ e("div", { ref: a, tabIndex: -1, className: t["tedi-base-map-selection__title"], children: r }), I = N ? /* @__PURE__ */ l(s, { children: [
-    /* @__PURE__ */ e(s.Trigger, { children: f }),
-    /* @__PURE__ */ e(s.Content, { children: r })
-  ] }) : f;
-  return /* @__PURE__ */ l(
-    "div",
+  } = h, n = z(null), T = k(n), [f, g] = E(!1);
+  M(() => {
+    const a = n.current;
+    a && g(a.scrollWidth > a.clientWidth);
+  }, [T, o]);
+  const v = () => {
+    r || s == null || s();
+  }, x = S(
+    e["tedi-base-map-selection__wrapper"],
+    c && e["tedi-base-map-selection--selected"],
+    m && e[`tedi-base-map-selection--${m}`],
+    y && e["tedi-base-map-selection--multiple"],
+    r && e["tedi-base-map-selection--disabled"],
+    _
+  ), u = /* @__PURE__ */ l(
+    j,
     {
-      role: "button",
-      tabIndex: o ? -1 : 0,
-      "aria-pressed": !!d,
-      "aria-disabled": o || void 0,
-      onClick: g,
-      onKeyDown: v,
-      className: E,
-      id: y,
+      noStyle: !0,
+      disabled: r && !i,
+      "aria-pressed": !!c,
+      "aria-disabled": r || void 0,
+      onClick: v,
+      className: x,
+      id: N,
       children: [
-        /* @__PURE__ */ e("div", { "aria-hidden": !0, className: t["tedi-base-map-selection__content"], children: u }),
-        m && /* @__PURE__ */ l(s, { children: [
-          /* @__PURE__ */ e(s.Trigger, { children: /* @__PURE__ */ e("span", { tabIndex: -1, className: t["tedi-base-map-selection__info"], children: /* @__PURE__ */ e(
-            B,
-            {
-              background: "brand-secondary",
-              name: p === "error" ? "error" : "info",
-              size: 16,
-              color: p === "error" ? "danger" : "brand"
-            }
-          ) }) }),
-          /* @__PURE__ */ e(s.Content, { children: m })
-        ] }),
-        I
+        /* @__PURE__ */ t("div", { "aria-hidden": !0, className: e["tedi-base-map-selection__content"], children: b }),
+        i && /* @__PURE__ */ t("span", { className: e["tedi-base-map-selection__info"], children: /* @__PURE__ */ t(
+          W,
+          {
+            background: "brand-secondary",
+            name: p === "error" ? "error" : "info",
+            size: 16,
+            color: p === "error" ? "danger" : "brand"
+          }
+        ) }),
+        /* @__PURE__ */ t("div", { ref: n, className: e["tedi-base-map-selection__title"], children: o })
       ]
     }
   );
+  return !i && !f ? u : /* @__PURE__ */ l(d, { ariaHidden: !i, openWith: "hover", children: [
+    /* @__PURE__ */ t(d.Trigger, { children: u }),
+    /* @__PURE__ */ t(d.Content, { children: i ? /* @__PURE__ */ l(B, { children: [
+      f && /* @__PURE__ */ t("div", { "aria-hidden": !0, children: o }),
+      i
+    ] }) : o })
+  ] });
 };
-M.displayName = "BaseMapOption";
+C.displayName = "BaseMapOption";
 export {
-  M as BaseMapOption,
-  M as default
+  C as BaseMapOption,
+  C as default
 };

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"),N=require("../../../../../external/classnames/index.cjs.js"),S=require("react"),B=require("../../../../tedi/components/buttons/button/button.cjs.js"),T=require("../../../../tedi/components/form/field/field.cjs.js"),O=require("../../../../tedi/components/form/input-group/input-group.cjs.js"),C=require("../../../../tedi/components/form/slider/slider.cjs.js"),f=require("./base-map-option.cjs.js"),n=require("./base-map-selection.module.scss.cjs.js"),l=require("../../../../tedi/components/overlays/popover/popover.cjs.js"),L=require("../../../../tedi/components/form/input-group/components/input/input.cjs.js"),P=require("../../../../tedi/components/form/input-group/components/suffix/suffix.cjs.js"),c=a=>{const t=Number(a);return Number.isNaN(t)?0:Math.min(100,Math.max(0,t))};function o(a){const{title:t,content:x,children:h,multiple:y=!1,showTransparency:j=!1,transparency:d,defaultTransparency:_,onTransparencyChange:s,transparencyLabel:r="",id:i}=a,p=d!==void 0,[v,g]=S.useState(()=>c(_??0)),u=c(p?d:v),m=M=>{const b=c(M);p||g(b),s==null||s(b)},q=N.default(n.default["tedi-base-map-selection__wrapper"],n.default["tedi-base-map-selection__trigger"],n.default["tedi-base-map-selection--button"],y&&n.default["tedi-base-map-selection--multiple"]);return e.jsxs(l.Popover,{placement:"top-end",children:[e.jsx(l.Popover.Trigger,{children:e.jsxs(B.Button,{noStyle:!0,id:i,className:q,children:[e.jsx("div",{className:n.default["tedi-base-map-selection__content"],"aria-hidden":!0,children:x}),e.jsx("div",{className:n.default["tedi-base-map-selection__title"],children:t})]})}),e.jsxs(l.Popover.Content,{width:"medium",children:[e.jsx("div",{className:n.default["tedi-base-map-selection__options"],children:h}),j&&e.jsx("div",{className:n.default["tedi-base-map-selection__transparency"],children:e.jsx(C.Slider,{label:r,"aria-label":r||"Transparency",min:0,max:100,value:u,onChange:m,minLabel:"0%",maxLabel:"100%",addonRight:e.jsx("div",{className:n.default["tedi-base-map-selection__transparency-field"],children:e.jsxs(O.InputGroupBase,{id:`${i}-transparency`,label:r||"Transparency",hideLabel:!0,children:[e.jsx(L.Input,{children:e.jsx(T.Field,{type:"number",id:`${i}-transparency`,value:String(u),onChange:m})}),e.jsx(P.Suffix,{children:"%"})]})})})})]})]})}o.Option=f.BaseMapOption;o.displayName="BaseMapSelection";exports.BaseMapOption=f.BaseMapOption;exports.BaseMapSelection=o;
+"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;

package/src/community/components/map-components/base-map-selection/base-map-selection.d.ts

@@ -15,6 +15,7 @@ export interface BaseMapSelectionProps {
     children: React.ReactNode;
     /**
      * Renders a "stacked" trigger, indicating that multiple base maps are available.
+     * Has no effect below the `md` breakpoint, where the trigger is a `MapButton`.
      * @default false
      */
     multiple?: boolean;
@@ -37,10 +38,6 @@ export interface BaseMapSelectionProps {
      * Callback fired when the transparency value changes. The reported value is always clamped to 0-100.
      */
     onTransparencyChange?: (value: number) => void;
-    /**
-     * Label for the transparency slider.
-     */
-    transparencyLabel?: string;
     /**
      * HTML `id` attribute applied to the trigger button.
      */

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

@@ -1,80 +1,80 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import B from "../../../../../external/classnames/index.es.js";
-import { useState as M } from "react";
-import { Button as C } from "../../../../tedi/components/buttons/button/button.es.js";
-import { Field as L } from "../../../../tedi/components/form/field/field.es.js";
-import { InputGroupBase as w } from "../../../../tedi/components/form/input-group/input-group.es.js";
-import { Slider as j } from "../../../../tedi/components/form/slider/slider.es.js";
-import { BaseMapOption as I } from "./base-map-option.es.js";
-import a from "./base-map-selection.module.scss.es.js";
-import { Popover as l } from "../../../../tedi/components/overlays/popover/popover.es.js";
-import { Input as O } from "../../../../tedi/components/form/input-group/components/input/input.es.js";
-import { Suffix as $ } from "../../../../tedi/components/form/input-group/components/suffix/suffix.es.js";
-const c = (r) => {
-  const n = Number(r);
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import I 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 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 { 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";
+const l = (i) => {
+  const n = Number(i);
   return Number.isNaN(n) ? 0 : Math.min(100, Math.max(0, n));
 };
-function f(r) {
+function b(i) {
   const {
     title: n,
-    content: b,
-    children: y,
-    multiple: _ = !1,
-    showTransparency: N = !1,
-    transparency: m,
-    defaultTransparency: g,
-    onTransparencyChange: i,
-    transparencyLabel: s = "",
-    id: o
-  } = r, p = m !== void 0, [v, x] = M(
-    () => c(g ?? 0)
-  ), d = c(p ? m : v), u = (S) => {
-    const h = c(S);
-    p || x(h), i == null || i(h);
-  }, T = B(
-    a["tedi-base-map-selection__wrapper"],
-    a["tedi-base-map-selection__trigger"],
-    a["tedi-base-map-selection--button"],
-    _ && a["tedi-base-map-selection--multiple"]
-  );
-  return /* @__PURE__ */ t(l, { placement: "top-end", children: [
-    /* @__PURE__ */ e(l.Trigger, { children: /* @__PURE__ */ t(C, { noStyle: !0, id: o, className: T, children: [
-      /* @__PURE__ */ e("div", { className: a["tedi-base-map-selection__content"], "aria-hidden": !0, children: b }),
-      /* @__PURE__ */ e("div", { className: a["tedi-base-map-selection__title"], children: n })
-    ] }) }),
-    /* @__PURE__ */ t(l.Content, { width: "medium", children: [
-      /* @__PURE__ */ e("div", { className: a["tedi-base-map-selection__options"], children: y }),
-      N && /* @__PURE__ */ e("div", { className: a["tedi-base-map-selection__transparency"], children: /* @__PURE__ */ e(
-        j,
+    content: y,
+    children: g,
+    multiple: N = !1,
+    showTransparency: _ = !1,
+    transparency: c,
+    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(
+    () => l(B ?? 0)
+  ), d = l(m ? c : L), u = (O) => {
+    const f = l(O);
+    m || T(f), o == null || o(f);
+  }, C = I(
+    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: [
+    /* @__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__ */ 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,
         {
-          label: s,
-          "aria-label": s || "Transparency",
+          "aria-label": p,
           min: 0,
           max: 100,
           value: d,
           onChange: u,
           minLabel: "0%",
           maxLabel: "100%",
-          addonRight: /* @__PURE__ */ e("div", { className: a["tedi-base-map-selection__transparency-field"], children: /* @__PURE__ */ t(w, { id: `${o}-transparency`, label: s || "Transparency", hideLabel: !0, children: [
-            /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(
-              L,
+          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(
+              k,
               {
                 type: "number",
-                id: `${o}-transparency`,
+                id: `${a}-transparency`,
                 value: String(d),
                 onChange: u
               }
             ) }),
-            /* @__PURE__ */ e($, { children: "%" })
+            /* @__PURE__ */ e(q, { children: "%" })
           ] }) })
         }
       ) })
     ] })
   ] });
 }
-f.Option = I;
-f.displayName = "BaseMapSelection";
+b.Option = G;
+b.displayName = "BaseMapSelection";
 export {
-  I as BaseMapOption,
-  f as BaseMapSelection
+  G 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"),m=require("../../../../../external/classnames/index.cjs.js"),B=require("react"),S=require("../../../../tedi/components/base/icon/icon.cjs.js"),N=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"),l=require("../../../../tedi/components/overlays/tooltip/tooltip.cjs.js"),b=f=>{const{size:n="default",icon:r,selected:h=!1,className:x,children:u,hideLabel:c=!1,tooltipContent:p=u,dropdownItems:i,isActive:j,isHovered:g,underline:q,isLoading:s,...v}=f,[_,w]=B.useState(!1),D=h||_,M=m.default(t.default["tedi-map-button"],t.default[`tedi-map-button--${n}`],D&&t.default["tedi-map-button--selected"],i&&t.default["tedi-map-button--dropdown"],j&&t.default["tedi-map-button--is-active"],g&&t.default["tedi-map-button--is-hovered"],q&&t.default["tedi-map-button--underline"],s&&t.default["tedi-map-button--loading"],x),C=e.jsxs(e.Fragment,{children:[s?e.jsx(N.Spinner,{size:n==="small"?16:18,className:t.default["tedi-map-button__icon"]}):r&&e.jsx(S.Icon,{name:r,className:t.default["tedi-map-button__icon"],size:n==="small"?24:18}),!c&&e.jsx("div",{className:m.default(t.default["tedi-map-button__text"]),children:u})]}),a=e.jsx(O.Button,{noStyle:!0,isLoading:s,className:M,size:n,...v,children:C}),T=c&&p?e.jsxs(l.Tooltip,{placement:"right",children:[e.jsx(l.Tooltip.Trigger,{children:a}),e.jsx(l.Tooltip.Content,{children:p})]}):a;return i?e.jsxs(d.MapDropdown,{onOpenChange:w,placement:"right-start",children:[e.jsx(d.MapDropdown.Trigger,{children:a}),e.jsx(d.MapDropdown.Content,{items:i.map(o=>({children:o.children,onClick:o.onClick,isActive:o.isActive,isDisabled:o.isDisabled}))})]}):T};exports.MapButton=b;exports.default=b;
+"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;

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

@@ -1,4 +1,3 @@
-import { JSX } from 'react';
 import { ButtonProps } from '../../../../tedi';
 import { MapDropdownItem } from '../map-dropdown/map-dropdown';
 /**
@@ -25,7 +24,7 @@ export interface MapButtonProps extends Omit<ButtonProps, OmittedButtonProps> {
     selected?: boolean;
     /**
      * If `true`, hides the label visually (icon-only button).
-     * Label may still be available to screen readers.
+     * The label stays in the accessible name, so `children` is required for the button to be named.
      */
     hideLabel?: boolean;
     /**
@@ -39,5 +38,5 @@ export interface MapButtonProps extends Omit<ButtonProps, OmittedButtonProps> {
      */
     dropdownItems?: MapDropdownItem[];
 }
-export declare const MapButton: (props: MapButtonProps) => JSX.Element;
+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,50 +1,50 @@
-import { jsxs as a, Fragment as z, jsx as e } from "react/jsx-runtime";
+import { jsxs as l, Fragment as T, jsx as e } from "react/jsx-runtime";
 import b from "../../../../../external/classnames/index.es.js";
-import { useState as A } from "react";
+import { forwardRef as z, useState as A } from "react";
 import { Icon as I } from "../../../../tedi/components/base/icon/icon.es.js";
-import { Spinner as M } from "../../../../tedi/components/loaders/spinner/spinner.es.js";
-import { Button as O } from "../../../../tedi/components/buttons/button/button.es.js";
-import { MapDropdown as l } from "../map-dropdown/map-dropdown.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 { MapDropdown as d } from "../map-dropdown/map-dropdown.es.js";
 import t from "./map-button.module.scss.es.js";
-import { Tooltip as d } from "../../../../tedi/components/overlays/tooltip/tooltip.es.js";
-const q = (h) => {
+import { Tooltip as m } from "../../../../tedi/components/overlays/tooltip/tooltip.es.js";
+const k = z((f, h) => {
   const {
     size: o = "default",
-    icon: m,
-    selected: f = !1,
-    className: g,
-    children: c,
-    hideLabel: p = !1,
-    tooltipContent: u = c,
-    dropdownItems: i,
+    icon: p,
+    selected: g = !1,
+    className: N,
+    children: i,
+    hideLabel: c = !1,
+    tooltipContent: u = i,
+    dropdownItems: s,
     isActive: v,
     isHovered: C,
-    underline: N,
-    isLoading: s,
+    underline: w,
+    isLoading: r,
     ..._
-  } = h, [w, D] = A(!1), x = f || w, B = b(
+  } = f, [B, D] = A(!1), x = g || B, y = b(
     t["tedi-map-button"],
     t[`tedi-map-button--${o}`],
     x && t["tedi-map-button--selected"],
-    i && t["tedi-map-button--dropdown"],
+    s && t["tedi-map-button--dropdown"],
     v && t["tedi-map-button--is-active"],
     C && t["tedi-map-button--is-hovered"],
-    N && t["tedi-map-button--underline"],
-    s && t["tedi-map-button--loading"],
-    g
-  ), S = /* @__PURE__ */ a(z, { children: [
-    s ? /* @__PURE__ */ e(M, { size: o === "small" ? 16 : 18, className: t["tedi-map-button__icon"] }) : m && /* @__PURE__ */ e(I, { name: m, className: t["tedi-map-button__icon"], size: o === "small" ? 24 : 18 }),
-    !p && /* @__PURE__ */ e("div", { className: b(t["tedi-map-button__text"]), children: c })
-  ] }), r = /* @__PURE__ */ e(O, { noStyle: !0, isLoading: s, className: B, size: o, ..._, children: S }), T = p && u ? /* @__PURE__ */ a(d, { placement: "right", children: [
-    /* @__PURE__ */ e(d.Trigger, { children: r }),
-    /* @__PURE__ */ e(d.Content, { children: u })
-  ] }) : r;
-  return i ? /* @__PURE__ */ a(l, { onOpenChange: D, placement: "right-start", children: [
-    /* @__PURE__ */ e(l.Trigger, { children: r }),
+    w && 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: [
+    /* @__PURE__ */ e(m.Trigger, { children: a }),
+    /* @__PURE__ */ e(m.Content, { children: u })
+  ] }) : a;
+  return s ? /* @__PURE__ */ l(d, { onOpenChange: D, placement: "right-start", children: [
+    /* @__PURE__ */ e(d.Trigger, { children: a }),
     /* @__PURE__ */ e(
-      l.Content,
+      d.Content,
       {
-        items: i.map((n) => ({
+        items: s.map((n) => ({
           children: n.children,
           onClick: n.onClick,
           isActive: n.isActive,
@@ -52,9 +52,10 @@ const q = (h) => {
         }))
       }
     )
-  ] }) : T;
-};
+  ] }) : S;
+});
+k.displayName = "MapButton";
 export {
-  q as MapButton,
-  q as default
+  k as MapButton,
+  k as default
 };

package/src/tedi/components/misc/affix/affix.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),h=require("../../../../../external/classnames/index.cjs.js"),q=require("react"),b=require("../../../../../external/react-sticky-box/dist/index.cjs.js"),e=require("./affix.module.scss.cjs.js"),g=require("../../../../community/components/layout/layout-context.cjs.js"),$=require("../../../helpers/hooks/use-element-size.cjs.js"),j=c=>{const{children:n,relative:l=["header"],className:x,position:f="sticky",top:t=1.5,bottom:i,right:a,left:d}=c,{headerBottomElement:p}=q.useContext(g.LayoutContext),o=$.useElementSize(p),r=h.default(e.default["tedi-affix"],x,e.default[`tedi-affix--${f}`],{[e.default[`tedi-affix--top-${t}`.replace(".","-")]]:typeof t<"u"&&f==="fixed",[e.default[`tedi-affix--bottom-${i}`.replace(".","-")]]:typeof i<"u",[e.default[`tedi-affix--left-${d}`.replace(".","-")]]:typeof d<"u",[e.default[`tedi-affix--right-${a}`.replace(".","-")]]:typeof a<"u"});if(f==="fixed")return u.jsx("div",{className:r,children:n});const s=(typeof t=="number"?t:0)*16,m=l.includes("header")?s+((o==null?void 0:o.height)||0):s,y=(typeof i=="number"?i:0)*16;return u.jsx(b.default,{offsetTop:m,offsetBottom:y,className:r,children:n})};exports.Affix=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),$=require("../../../../../external/classnames/index.cjs.js"),b=require("react"),h=require("../../../../../external/react-sticky-box/dist/index.cjs.js"),e=require("./affix.module.scss.cjs.js"),q=require("../../../../community/components/layout/layout-context.cjs.js"),g=require("../../../helpers/hooks/use-element-size.cjs.js"),j=x=>{const{children:n,relative:p=["header"],className:m,position:i="sticky",top:t=1.5,bottom:f,right:s,left:a}=x,{headerBottomElement:y}=b.useContext(q.LayoutContext),o=g.useElementSize(y),d=$.default(e.default["tedi-affix"],m,e.default[`tedi-affix--${i}`],{[e.default[`tedi-affix--top-${t}`.replace(".","-")]]:typeof t<"u"&&i==="fixed",[e.default[`tedi-affix--bottom-${f}`.replace(".","-")]]:typeof f<"u",[e.default[`tedi-affix--left-${a}`.replace(".","-")]]:typeof a<"u",[e.default[`tedi-affix--right-${s}`.replace(".","-")]]:typeof s<"u"});if(i==="fixed")return l.jsx("div",{className:d,children:n});const r=(typeof t=="number"?t:0)*16,u=p.includes("header")?r+((o==null?void 0:o.height)||0):r,c=(typeof f=="number"?f:0)*16;return l.jsx(h.default,{offsetTop:u,offsetBottom:c,className:d,style:{"--tedi-affix-offset-top":`${u}px`,"--tedi-affix-offset-bottom":`${c}px`},children:n})};exports.Affix=j;

package/src/tedi/components/misc/affix/affix.es.js

@@ -1,21 +1,33 @@
-import { jsx as p } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import h from "../../../../../external/classnames/index.es.js";
 import { useContext as $ } from "react";
 import b from "../../../../../external/react-sticky-box/dist/index.es.js";
 import e from "./affix.module.scss.es.js";
 import { LayoutContext as g } from "../../../../community/components/layout/layout-context.es.js";
 import { useElementSize as N } from "../../../helpers/hooks/use-element-size.es.js";
-const L = (d) => {
-  const { children: r, relative: c = ["header"], className: l, position: f = "sticky", top: t = 1.5, bottom: o, right: n, left: s } = d, { headerBottomElement: u } = $(g), i = N(u), m = h(e["tedi-affix"], l, e[`tedi-affix--${f}`], {
+const L = (l) => {
+  const { children: r, relative: x = ["header"], className: u, position: f = "sticky", top: t = 1.5, bottom: o, right: s, left: n } = l, { headerBottomElement: y } = $(g), i = N(y), p = h(e["tedi-affix"], u, e[`tedi-affix--${f}`], {
     [e[`tedi-affix--top-${t}`.replace(".", "-")]]: typeof t < "u" && f === "fixed",
     [e[`tedi-affix--bottom-${o}`.replace(".", "-")]]: typeof o < "u",
-    [e[`tedi-affix--left-${s}`.replace(".", "-")]]: typeof s < "u",
-    [e[`tedi-affix--right-${n}`.replace(".", "-")]]: typeof n < "u"
+    [e[`tedi-affix--left-${n}`.replace(".", "-")]]: typeof n < "u",
+    [e[`tedi-affix--right-${s}`.replace(".", "-")]]: typeof s < "u"
   });
   if (f === "fixed")
-    return /* @__PURE__ */ p("div", { className: m, children: r });
-  const a = (typeof t == "number" ? t : 0) * 16, x = c.includes("header") ? a + ((i == null ? void 0 : i.height) || 0) : a, y = (typeof o == "number" ? o : 0) * 16;
-  return /* @__PURE__ */ p(b, { offsetTop: x, offsetBottom: y, className: m, children: r });
+    return /* @__PURE__ */ c("div", { className: p, children: r });
+  const a = (typeof t == "number" ? t : 0) * 16, m = x.includes("header") ? a + ((i == null ? void 0 : i.height) || 0) : a, d = (typeof o == "number" ? o : 0) * 16;
+  return /* @__PURE__ */ c(
+    b,
+    {
+      offsetTop: m,
+      offsetBottom: d,
+      className: p,
+      style: {
+        "--tedi-affix-offset-top": `${m}px`,
+        "--tedi-affix-offset-bottom": `${d}px`
+      },
+      children: r
+    }
+  );
 };
 export {
   L as Affix

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),N=require("../../../../../../../external/classnames/index.cjs.js"),s=require("react"),x=require("../../../../base/typography/text/text.cjs.js"),C=require("../../../../buttons/collapse-button/collapse-button.cjs.js"),E=require("../../../../overlays/sheet/sheet.cjs.js"),c=require("../../table-of-contents.cjs.js"),t=require("../../table-of-contents.module.scss.cjs.js"),S=require("../table-of-contents-list/table-of-contents-list.cjs.js"),y=require("../../../../../providers/label-provider/use-labels.cjs.js"),p=g=>{const{children:d,heading:u,ariaLabel:_,activeId:l,numbered:b=!1,sticky:j=!0,className:L}=g,{getLabel:f}=y.useLabels(),[n,a]=s.useState(!1),[o,O]=s.useState(null);s.useEffect(()=>{if(!n||!o)return;const v=q=>{q.target.closest("a, button")&&a(!1)};return o.addEventListener("click",v),()=>o.removeEventListener("click",v)},[n,o]);const i=(u===void 0?f("table-of-contents.title"):u)??f("table-of-contents.title"),h=_||i,r=s.useMemo(()=>c.childrenToNodes(d),[d]),m=s.useMemo(()=>c.buildActiveTrail(r,l),[r,l]),T=s.useMemo(()=>({activeId:l,numbered:b,ariaLabel:h,activeTrail:m}),[l,b,h,m]);return e.jsxs(c.TableOfContentsContext.Provider,{value:T,children:[e.jsxs("div",{className:N.default(t.default["tedi-table-of-contents__bar"],{[t.default["tedi-table-of-contents__bar--static"]]:!j},L),children:[e.jsx(x.Text,{modifiers:"bold",className:t.default["tedi-table-of-contents__bar-title"],children:i}),e.jsx(C.CollapseButton,{open:n,onOpenChange:a,underline:!1,"aria-haspopup":"dialog"})]}),e.jsx(E.Sheet,{open:n,onToggle:a,ariaLabel:i,className:t.default["tedi-table-of-contents__sheet"],header:e.jsxs("div",{className:t.default["tedi-table-of-contents__sheet-header"],children:[e.jsx(x.Text,{modifiers:"bold",className:t.default["tedi-table-of-contents__bar-title"],children:i}),e.jsx(C.CollapseButton,{open:n,onOpenChange:a,underline:!1})]}),children:e.jsx("div",{ref:O,className:t.default["tedi-table-of-contents"],children:e.jsx(S.TableOfContentsList,{nodes:r,heading:null})})})]})};p.displayName="TableOfContentsCollapsible";exports.TableOfContentsCollapsible=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),w=require("../../../../../../../external/classnames/index.cjs.js"),n=require("react"),T=require("../../../../base/typography/text/text.cjs.js"),q=require("../../../../buttons/collapse-button/collapse-button.cjs.js"),H=require("../../../../overlays/sheet/sheet.cjs.js"),b=require("../../table-of-contents.cjs.js"),t=require("../../table-of-contents.module.scss.cjs.js"),Y=require("../table-of-contents-list/table-of-contents-list.cjs.js"),F=require("../../../../../providers/label-provider/use-labels.cjs.js"),N=E=>{const{children:m,heading:h,ariaLabel:S,activeId:o,numbered:v=!1,bordered:y=!1,defaultOpen:p=!0,sticky:c=!0,hideOnScroll:x=!1,className:M}=E,{getLabel:C}=F.useLabels(),[l,i]=n.useState(!1),[k,_]=n.useState(!1),[r,A]=n.useState(null);n.useEffect(()=>{if(!x||!c){_(!1);return}let a=window.scrollY,s=0;const O=()=>{s||(s=window.requestAnimationFrame(()=>{s=0;const f=window.scrollY,j=f-a;Math.abs(j)>4&&(_(j>0&&f>0),a=f)}))};return window.addEventListener("scroll",O,{passive:!0}),()=>{window.removeEventListener("scroll",O),s&&window.cancelAnimationFrame(s)}},[x,c]),n.useEffect(()=>{if(!l||!r)return;const a=s=>{s.target.closest("a, button")&&i(!1)};return r.addEventListener("click",a),()=>r.removeEventListener("click",a)},[l,r]);const d=(h===void 0?C("table-of-contents.title"):h)??C("table-of-contents.title"),g=S||d,u=n.useMemo(()=>b.childrenToNodes(m),[m]),L=n.useMemo(()=>b.buildActiveTrail(u,o),[u,o]),B=n.useMemo(()=>({activeId:o,numbered:v,ariaLabel:g,activeTrail:L,defaultOpen:p}),[o,v,g,L,p]);return e.jsxs(b.TableOfContentsContext.Provider,{value:B,children:[e.jsxs("div",{className:w.default(t.default["tedi-table-of-contents__bar"],{[t.default["tedi-table-of-contents__bar--static"]]:!c,[t.default["tedi-table-of-contents__bar--hidden"]]:k&&!l},M),children:[e.jsx(T.Text,{modifiers:"bold",className:t.default["tedi-table-of-contents__bar-title"],children:d}),e.jsx(q.CollapseButton,{open:l,onOpenChange:i,underline:!1,"aria-haspopup":"dialog"})]}),e.jsx(H.Sheet,{open:l,onToggle:i,ariaLabel:d,className:t.default["tedi-table-of-contents__sheet"],header:e.jsxs("div",{className:t.default["tedi-table-of-contents__sheet-header"],children:[e.jsx(T.Text,{modifiers:"bold",className:t.default["tedi-table-of-contents__bar-title"],children:d}),e.jsx(q.CollapseButton,{open:l,onOpenChange:i,underline:!1})]}),children:e.jsx("div",{ref:A,className:w.default(t.default["tedi-table-of-contents"],{[t.default["tedi-table-of-contents--bordered"]]:y}),children:e.jsx(Y.TableOfContentsList,{nodes:u,heading:null})})})]})};N.displayName="TableOfContentsCollapsible";exports.TableOfContentsCollapsible=N;