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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "19.0.0-rc.13",
+  "version": "19.0.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/button-group/button-group.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),j=require("../map-button/map-button.cjs.js"),e=require("./button-group.module.scss.cjs.js"),N=p=>{const{children:c,className:f,direction:m="horizontal",onSelectionChange:s,stretch:b=!1,ariaLabel:x,prefix:a,suffix:d,prefixClassName:_,suffixClassName:g}=p;return r.jsxs("div",{className:i.default(e.default["tedi-button-group"],e.default[`tedi-button-group--${m}`],{[e.default["tedi-button-group--stretch"]]:b},f),role:"group","aria-label":x,children:[a&&r.jsx("div",{className:i.default(e.default["tedi-button-group__prefix"],_),children:r.jsx("span",{children:a})}),o.Children.map(c,u=>{if(o.isValidElement(u)&&u.type===j.MapButton){const t=u;return o.cloneElement(t,{className:i.default(e.default["tedi-button-group__item"],{[e.default["tedi-button-group__item--active"]]:t.props.isActive,[e.default["tedi-button-group__item--disabled"]]:t.props.disabled}),onClick:h=>{var l,n;t.props.disabled||((n=(l=t.props).onClick)==null||n.call(l,h),s==null||s(t.props.id))}})}return u}),d&&r.jsx("div",{className:i.default(e.default["tedi-button-group__suffix"],g),children:r.jsx("span",{children:d})})]})};exports.ButtonGroup=N;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),h=require("../map-button/map-button.cjs.js"),e=require("./button-group.module.scss.cjs.js"),j=p=>{const{children:c,className:f,direction:m="horizontal",onSelectionChange:s,stretch:b=!1,ariaLabel:x,prefix:a,suffix:l,prefixClassName:_,suffixClassName:g}=p;return r.jsxs("div",{className:i.default(e.default["tedi-button-group"],e.default[`tedi-button-group--${m}`],{[e.default["tedi-button-group--stretch"]]:b},f),role:"group","aria-label":x,children:[a&&r.jsx("div",{className:i.default(e.default["tedi-button-group__prefix"],_),children:r.jsx("span",{children:a})}),o.Children.map(c,u=>{if(o.isValidElement(u)&&u.type===h.MapButton){const t=u;return o.cloneElement(t,{className:i.default(e.default["tedi-button-group__item"],{[e.default["tedi-button-group__item--active"]]:t.props.isActive,[e.default["tedi-button-group__item--disabled"]]:t.props.disabled},t.props.className),onClick:N=>{var d,n;t.props.disabled||((n=(d=t.props).onClick)==null||n.call(d,N),s==null||s(t.props.id))}})}return u}),l&&r.jsx("div",{className:i.default(e.default["tedi-button-group__suffix"],g),children:r.jsx("span",{children:l})})]})};exports.ButtonGroup=j;

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

@@ -1,5 +1,5 @@
-import { jsxs as N, jsx as i } from "react/jsx-runtime";
-import o from "../../../../../external/classnames/index.es.js";
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import s from "../../../../../external/classnames/index.es.js";
 import { Children as h, isValidElement as v, cloneElement as C } from "react";
 import { MapButton as y } from "../map-button/map-button.es.js";
 import t from "./button-group.module.scss.es.js";
@@ -8,7 +8,7 @@ const A = (d) => {
     children: u,
     className: m,
     direction: c = "horizontal",
-    onSelectionChange: s,
+    onSelectionChange: o,
     stretch: f = !1,
     ariaLabel: b,
     prefix: p,
@@ -16,10 +16,10 @@ const A = (d) => {
     prefixClassName: _,
     suffixClassName: x
   } = d;
-  return /* @__PURE__ */ N(
+  return /* @__PURE__ */ g(
     "div",
     {
-      className: o(
+      className: s(
         t["tedi-button-group"],
         t[`tedi-button-group--${c}`],
         {
@@ -30,24 +30,28 @@ const A = (d) => {
       role: "group",
       "aria-label": b,
       children: [
-        p && /* @__PURE__ */ i("div", { className: o(t["tedi-button-group__prefix"], _), children: /* @__PURE__ */ i("span", { children: p }) }),
+        p && /* @__PURE__ */ i("div", { className: s(t["tedi-button-group__prefix"], _), children: /* @__PURE__ */ i("span", { children: p }) }),
         h.map(u, (r) => {
           if (v(r) && r.type === y) {
             const e = r;
             return C(e, {
-              className: o(t["tedi-button-group__item"], {
-                [t["tedi-button-group__item--active"]]: e.props.isActive,
-                [t["tedi-button-group__item--disabled"]]: e.props.disabled
-              }),
-              onClick: (g) => {
-                var n, l;
-                e.props.disabled || ((l = (n = e.props).onClick) == null || l.call(n, g), s == null || s(e.props.id));
+              className: s(
+                t["tedi-button-group__item"],
+                {
+                  [t["tedi-button-group__item--active"]]: e.props.isActive,
+                  [t["tedi-button-group__item--disabled"]]: e.props.disabled
+                },
+                e.props.className
+              ),
+              onClick: (N) => {
+                var l, n;
+                e.props.disabled || ((n = (l = e.props).onClick) == null || n.call(l, N), o == null || o(e.props.id));
               }
             });
           }
           return r;
         }),
-        a && /* @__PURE__ */ i("div", { className: o(t["tedi-button-group__suffix"], x), children: /* @__PURE__ */ i("span", { children: a }) })
+        a && /* @__PURE__ */ i("div", { className: s(t["tedi-button-group__suffix"], x), children: /* @__PURE__ */ i("span", { children: a }) })
       ]
     }
   );

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:o,isActive:j,isHovered:g,underline:q,isLoading:i,..._}=f,[w,D]=B.useState(!1),M=h||w,v=m.default(t.default["tedi-map-button"],t.default[`tedi-map-button--${n}`],M&&t.default["tedi-map-button--selected"],o&&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"],i&&t.default["tedi-map-button--loading"],x),C=e.jsxs(e.Fragment,{children:[i?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})]}),s=e.jsx(O.Button,{noStyle:!0,isLoading:i,className:v,size:n,..._,children:C}),T=c&&p?e.jsxs(l.Tooltip,{placement:"right",children:[e.jsx(l.Tooltip.Trigger,{children:s}),e.jsx(l.Tooltip.Content,{children:p})]}):s;return o?e.jsxs(d.MapDropdown,{onOpenChange:D,placement:"right-start",children:[e.jsx(d.MapDropdown.Trigger,{children:s}),e.jsx(d.MapDropdown.Content,{items:o.map(a=>({children:a.children,onClick:a.onClick,isDisabled:a.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"),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;

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

@@ -1,53 +1,54 @@
 import { jsxs as a, Fragment as z, jsx as e } from "react/jsx-runtime";
 import b from "../../../../../external/classnames/index.es.js";
-import { useState as I } from "react";
-import { Icon as M } 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 { 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 t from "./map-button.module.scss.es.js";
-import { Tooltip as m } from "../../../../tedi/components/overlays/tooltip/tooltip.es.js";
+import { Tooltip as d } from "../../../../tedi/components/overlays/tooltip/tooltip.es.js";
 const q = (h) => {
   const {
     size: o = "default",
-    icon: d,
+    icon: m,
     selected: f = !1,
     className: g,
-    children: p,
-    hideLabel: c = !1,
-    tooltipContent: u = p,
-    dropdownItems: n,
-    isActive: C,
-    isHovered: N,
-    underline: _,
-    isLoading: i,
-    ...v
-  } = h, [w, D] = I(!1), x = f || w, B = b(
+    children: c,
+    hideLabel: p = !1,
+    tooltipContent: u = c,
+    dropdownItems: i,
+    isActive: v,
+    isHovered: C,
+    underline: N,
+    isLoading: s,
+    ..._
+  } = h, [w, D] = A(!1), x = f || w, B = b(
     t["tedi-map-button"],
     t[`tedi-map-button--${o}`],
     x && t["tedi-map-button--selected"],
-    n && t["tedi-map-button--dropdown"],
-    C && t["tedi-map-button--is-active"],
-    N && t["tedi-map-button--is-hovered"],
-    _ && t["tedi-map-button--underline"],
-    i && t["tedi-map-button--loading"],
+    i && 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: [
-    i ? /* @__PURE__ */ e(O, { size: o === "small" ? 16 : 18, className: t["tedi-map-button__icon"] }) : d && /* @__PURE__ */ e(M, { name: d, className: t["tedi-map-button__icon"], size: o === "small" ? 24 : 18 }),
-    !c && /* @__PURE__ */ e("div", { className: b(t["tedi-map-button__text"]), children: p })
-  ] }), s = /* @__PURE__ */ e(j, { noStyle: !0, isLoading: i, className: B, size: o, ...v, children: S }), T = c && u ? /* @__PURE__ */ a(m, { placement: "right", children: [
-    /* @__PURE__ */ e(m.Trigger, { children: s }),
-    /* @__PURE__ */ e(m.Content, { children: u })
-  ] }) : s;
-  return n ? /* @__PURE__ */ a(l, { onOpenChange: D, placement: "right-start", children: [
-    /* @__PURE__ */ e(l.Trigger, { children: s }),
+    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 }),
     /* @__PURE__ */ e(
       l.Content,
       {
-        items: n.map((r) => ({
-          children: r.children,
-          onClick: r.onClick,
-          isDisabled: r.isDisabled
+        items: i.map((n) => ({
+          children: n.children,
+          onClick: n.onClick,
+          isActive: n.isActive,
+          isDisabled: n.isDisabled
         }))
       }
     )

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

package/src/tedi/components/content/list/list-item.d.ts

@@ -7,7 +7,7 @@ type ListItemBreakpointProps = {
      */
     verticalSpacingItem?: Omit<VerticalSpacingItemProps, 'element' | 'children'>;
 };
-export interface ListItemProps extends BreakpointSupport<ListItemBreakpointProps> {
+export interface ListItemProps extends BreakpointSupport<ListItemBreakpointProps>, Omit<React.LiHTMLAttributes<HTMLLIElement>, 'style' | 'children'> {
     /**
      * List children should be ListItem components
      */

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

@@ -1,11 +1,11 @@
-import { jsx as m } from "react/jsx-runtime";
-import o from "../../../../../external/classnames/index.es.js";
-import l from "./list.module.scss.es.js";
-import { useBreakpointProps as n } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { VerticalSpacingItem as c } from "../../layout/vertical-spacing/vertical-spacing-item.es.js";
-const B = (e) => {
-  const { getCurrentBreakpointProps: i } = n(e.defaultServerBreakpoint), { children: r, verticalSpacingItem: t, className: a } = i(e), s = o(l["tedi-list__item"], t == null ? void 0 : t.className, a);
-  return e.verticalSpacingItem ? /* @__PURE__ */ m(c, { ...t, element: "li", className: s, children: r }) : /* @__PURE__ */ m("li", { className: s, children: r });
+import { jsx as i } from "react/jsx-runtime";
+import l from "../../../../../external/classnames/index.es.js";
+import c from "./list.module.scss.es.js";
+import { useBreakpointProps as u } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { VerticalSpacingItem as f } from "../../layout/vertical-spacing/vertical-spacing-item.es.js";
+const B = (r) => {
+  const { getCurrentBreakpointProps: n } = u(r.defaultServerBreakpoint), { children: s, verticalSpacingItem: e, className: a, ...t } = n(r), m = l(c["tedi-list__item"], e == null ? void 0 : e.className, a), o = typeof t.value == "number" ? { counterIncrement: "none", counterSet: `item ${t.value}` } : void 0;
+  return r.verticalSpacingItem ? /* @__PURE__ */ i(f, { ...e, ...t, element: "li", className: m, style: o, children: s }) : /* @__PURE__ */ i("li", { className: m, ...t, style: o, children: s });
 };
 export {
   B as ListItem,

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),f=require("../../../../../external/classnames/index.cjs.js"),t=require("./list.module.scss.cjs.js"),p=require("./list-item.cjs.js"),q=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),g=require("../../layout/vertical-spacing/vertical-spacing.cjs.js"),o=s=>{const{getCurrentBreakpointProps:u}=q.useBreakpointProps(s.defaultServerBreakpoint),{children:i,element:r="ul",style:a="none",verticalSpacing:e,className:c,color:d="brand"}=u(s),l=f.default(t.default["tedi-list"],t.default[`tedi-list--${r==="ul"?"unordered":"ordered"}`],t.default[`tedi-list--style-${a}`],t.default[`tedi-list--bullet-color-${d}`],e==null?void 0:e.className,c),m=r;return e?n.jsx(g.VerticalSpacing,{...e,element:r,className:l,children:i}):n.jsx(m,{className:l,children:i})};o.Item=p.ListItem;exports.List=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),v=require("../../../../../external/classnames/index.cjs.js"),q=require("react"),s=require("./list.module.scss.cjs.js"),b=require("./list-item.cjs.js"),S=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),g=require("../../layout/vertical-spacing/vertical-spacing.cjs.js"),d=n=>{const{getCurrentBreakpointProps:a}=S.useBreakpointProps(n.defaultServerBreakpoint),{children:i,element:t="ul",style:m="none",verticalSpacing:r,className:f,color:p="brand",...e}=a(n),o=t==="ol"&&e.reversed===!0,l=v.default(s.default["tedi-list"],s.default[`tedi-list--${t==="ul"?"unordered":"ordered"}`],s.default[`tedi-list--style-${m}`],s.default[`tedi-list--bullet-color-${p}`],o&&s.default["tedi-list--reversed"],r==null?void 0:r.className,f),y=t,u=(()=>{if(t==="ol")return o?{counterReset:`item ${(typeof e.start=="number"?e.start:q.Children.count(i))+1}`}:typeof e.start=="number"?{counterReset:`item ${e.start-1}`}:void 0})();return r?c.jsx(g.VerticalSpacing,{...r,...e,element:t,className:l,style:u,children:i}):c.jsx(y,{className:l,...e,style:u,children:i})};d.Item=b.ListItem;exports.List=d;

package/src/tedi/components/content/list/list.d.ts

@@ -16,7 +16,7 @@ type ListBreakpointProps = {
      */
     style?: 'styled' | 'none';
 };
-export interface ListProps extends BreakpointSupport<ListBreakpointProps> {
+export interface ListProps extends BreakpointSupport<ListBreakpointProps>, Omit<React.OlHTMLAttributes<HTMLOListElement>, 'style' | 'children'> {
     /**
      * List children should be ListItem components
      */

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

@@ -1,28 +1,34 @@
-import { jsx as i } from "react/jsx-runtime";
-import p from "../../../../../external/classnames/index.es.js";
-import e from "./list.module.scss.es.js";
-import { ListItem as u } from "./list-item.es.js";
-import { useBreakpointProps as f } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { VerticalSpacing as N } from "../../layout/vertical-spacing/vertical-spacing.es.js";
-const B = (s) => {
-  const { getCurrentBreakpointProps: m } = f(s.defaultServerBreakpoint), {
+import { jsx as d } from "react/jsx-runtime";
+import y from "../../../../../external/classnames/index.es.js";
+import { Children as v } from "react";
+import s from "./list.module.scss.es.js";
+import { ListItem as N } from "./list-item.es.js";
+import { useBreakpointProps as $ } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { VerticalSpacing as b } from "../../layout/vertical-spacing/vertical-spacing.es.js";
+const B = (i) => {
+  const { getCurrentBreakpointProps: a } = $(i.defaultServerBreakpoint), {
     children: o,
-    element: r = "ul",
-    style: n = "none",
-    verticalSpacing: t,
-    className: a,
-    color: c = "brand"
-  } = m(s), l = p(
-    e["tedi-list"],
-    e[`tedi-list--${r === "ul" ? "unordered" : "ordered"}`],
-    e[`tedi-list--style-${n}`],
-    e[`tedi-list--bullet-color-${c}`],
-    t == null ? void 0 : t.className,
-    a
-  ), d = r;
-  return t ? /* @__PURE__ */ i(N, { ...t, element: r, className: l, children: o }) : /* @__PURE__ */ i(d, { className: l, children: o });
+    element: t = "ul",
+    style: c = "none",
+    verticalSpacing: r,
+    className: u,
+    color: f = "brand",
+    ...e
+  } = a(i), l = t === "ol" && e.reversed === !0, n = y(
+    s["tedi-list"],
+    s[`tedi-list--${t === "ul" ? "unordered" : "ordered"}`],
+    s[`tedi-list--style-${c}`],
+    s[`tedi-list--bullet-color-${f}`],
+    l && s["tedi-list--reversed"],
+    r == null ? void 0 : r.className,
+    u
+  ), p = t, m = (() => {
+    if (t === "ol")
+      return l ? { counterReset: `item ${(typeof e.start == "number" ? e.start : v.count(o)) + 1}` } : typeof e.start == "number" ? { counterReset: `item ${e.start - 1}` } : void 0;
+  })();
+  return r ? /* @__PURE__ */ d(b, { ...r, ...e, element: t, className: n, style: m, children: o }) : /* @__PURE__ */ d(p, { className: n, ...e, style: m, children: o });
 };
-B.Item = u;
+B.Item = N;
 export {
   B as List
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-list":"tedi-list-71701cf9","tedi-list__item":"tedi-list__item-2a714ed1","tedi-list--unordered":"tedi-list--unordered-60115136","tedi-list--bullet-color-primary":"tedi-list--bullet-color-primary-afabfe71","tedi-list--bullet-color-secondary":"tedi-list--bullet-color-secondary-25f0c3e3","tedi-list--bullet-color-tertiary":"tedi-list--bullet-color-tertiary-fbd2b53f","tedi-list--bullet-color-brand":"tedi-list--bullet-color-brand-de9348a6","tedi-list--bullet-color-brand-dark":"tedi-list--bullet-color-brand-dark-948cec45","tedi-list--bullet-color-success":"tedi-list--bullet-color-success-1c3189cf","tedi-list--bullet-color-warning":"tedi-list--bullet-color-warning-0ec8b981","tedi-list--bullet-color-warning-dark":"tedi-list--bullet-color-warning-dark-ecaf5ef7","tedi-list--bullet-color-danger":"tedi-list--bullet-color-danger-4457905e","tedi-list--bullet-color-white":"tedi-list--bullet-color-white-a25c101f","tedi-list--ordered":"tedi-list--ordered-cd38b627","tedi-list--style-none":"tedi-list--style-none-14fa69aa"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-list":"tedi-list-71701cf9","tedi-list__item":"tedi-list__item-2a714ed1","tedi-list--unordered":"tedi-list--unordered-60115136","tedi-list--bullet-color-primary":"tedi-list--bullet-color-primary-afabfe71","tedi-list--bullet-color-secondary":"tedi-list--bullet-color-secondary-25f0c3e3","tedi-list--bullet-color-tertiary":"tedi-list--bullet-color-tertiary-fbd2b53f","tedi-list--bullet-color-brand":"tedi-list--bullet-color-brand-de9348a6","tedi-list--bullet-color-brand-dark":"tedi-list--bullet-color-brand-dark-948cec45","tedi-list--bullet-color-success":"tedi-list--bullet-color-success-1c3189cf","tedi-list--bullet-color-warning":"tedi-list--bullet-color-warning-0ec8b981","tedi-list--bullet-color-warning-dark":"tedi-list--bullet-color-warning-dark-ecaf5ef7","tedi-list--bullet-color-danger":"tedi-list--bullet-color-danger-4457905e","tedi-list--bullet-color-white":"tedi-list--bullet-color-white-a25c101f","tedi-list--ordered":"tedi-list--ordered-cd38b627","tedi-list--reversed":"tedi-list--reversed-a403096a","tedi-list--style-none":"tedi-list--style-none-14fa69aa"};exports.default=e;

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

@@ -1,4 +1,4 @@
-const l = {
+const t = {
   "tedi-list": "tedi-list-71701cf9",
   "tedi-list__item": "tedi-list__item-2a714ed1",
   "tedi-list--unordered": "tedi-list--unordered-60115136",
@@ -13,8 +13,9 @@ const l = {
   "tedi-list--bullet-color-danger": "tedi-list--bullet-color-danger-4457905e",
   "tedi-list--bullet-color-white": "tedi-list--bullet-color-white-a25c101f",
   "tedi-list--ordered": "tedi-list--ordered-cd38b627",
+  "tedi-list--reversed": "tedi-list--reversed-a403096a",
   "tedi-list--style-none": "tedi-list--style-none-14fa69aa"
 };
 export {
-  l as default
+  t as default
 };

package/src/tedi/components/layout/vertical-spacing/vertical-spacing-item.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),u=require("../../../../../external/classnames/index.cjs.js"),m=require("./vertical-spacing.module.scss.cjs.js"),d=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),i=e=>{const{getCurrentBreakpointProps:r}=d.useBreakpointProps(e.defaultServerBreakpoint),{children:a,className:n,element:s="div",size:t=1,...c}=r(e),l=u.default(m.default["tedi-vertical-spacing__item"],n);return o.jsx(s,{"data-name":"vertical-spacing-item",...c,style:{"--vertical-spacing-internal":`${t}${t!==0?"em":""}`},className:l,children:a})};exports.VerticalSpacingItem=i;exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),m=require("../../../../../external/classnames/index.cjs.js"),d=require("./vertical-spacing.module.scss.cjs.js"),p=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),i=e=>{const{getCurrentBreakpointProps:r}=p.useBreakpointProps(e.defaultServerBreakpoint),{children:a,className:n,element:s="div",size:t=1,style:c,...l}=r(e),o=m.default(d.default["tedi-vertical-spacing__item"],n);return u.jsx(s,{"data-name":"vertical-spacing-item",...l,style:{"--vertical-spacing-internal":`${t}${t!==0?"em":""}`,...c},className:o,children:a})};exports.VerticalSpacingItem=i;exports.default=i;

package/src/tedi/components/layout/vertical-spacing/vertical-spacing-item.d.ts

@@ -21,6 +21,11 @@ export interface VerticalSpacingItemProps extends BreakpointSupport<VerticalSpac
      * Additional class name(s) to apply to the element
      */
     className?: string;
+    /**
+     * Additional inline styles, merged with the internal spacing custom property
+     * (rather than replacing it).
+     */
+    style?: React.CSSProperties;
 }
 export declare const VerticalSpacingItem: (props: VerticalSpacingItemProps) => JSX.Element;
 export default VerticalSpacingItem;

package/src/tedi/components/layout/vertical-spacing/vertical-spacing-item.es.js

@@ -1,27 +1,28 @@
-import { jsx as c } from "react/jsx-runtime";
+import { jsx as l } from "react/jsx-runtime";
 import o from "../../../../../external/classnames/index.es.js";
-import l from "./vertical-spacing.module.scss.es.js";
-import { useBreakpointProps as p } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-const v = (e) => {
-  const { getCurrentBreakpointProps: r } = p(e.defaultServerBreakpoint), {
+import p from "./vertical-spacing.module.scss.es.js";
+import { useBreakpointProps as d } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const B = (e) => {
+  const { getCurrentBreakpointProps: r } = d(e.defaultServerBreakpoint), {
     children: a,
     className: i,
     element: s = "div",
     size: t = 1,
-    ...n
-  } = r(e), m = o(l["tedi-vertical-spacing__item"], i);
-  return /* @__PURE__ */ c(
+    style: n,
+    ...m
+  } = r(e), c = o(p["tedi-vertical-spacing__item"], i);
+  return /* @__PURE__ */ l(
     s,
     {
       "data-name": "vertical-spacing-item",
-      ...n,
-      style: { "--vertical-spacing-internal": `${t}${t !== 0 ? "em" : ""}` },
-      className: m,
+      ...m,
+      style: { "--vertical-spacing-internal": `${t}${t !== 0 ? "em" : ""}`, ...n },
+      className: c,
       children: a
     }
   );
 };
 export {
-  v as VerticalSpacingItem,
-  v as default
+  B as VerticalSpacingItem,
+  B as default
 };

package/src/tedi/components/layout/vertical-spacing/vertical-spacing.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),u=require("../../../../../external/classnames/index.cjs.js"),p=require("./vertical-spacing.module.scss.cjs.js"),g=require("./vertical-spacing-item.cjs.js"),m=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),r=e=>{const{getCurrentBreakpointProps:i}=m.useBreakpointProps(e.defaultServerBreakpoint),{children:a,className:n,element:c="div",size:t=1,...s}=i(e),l=u.default(p.default["tedi-vertical-spacing"],n);return o.jsx(c,{"data-name":"vertical-spacing",role:"presentation",...s,className:l,style:{"--vertical-spacing-internal":t!==0?`${t}em`:"0"},children:a})};r.Item=g.VerticalSpacingItem;exports.VerticalSpacing=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),p=require("../../../../../external/classnames/index.cjs.js"),g=require("./vertical-spacing.module.scss.cjs.js"),m=require("./vertical-spacing-item.cjs.js"),d=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),r=e=>{const{getCurrentBreakpointProps:i}=d.useBreakpointProps(e.defaultServerBreakpoint),{children:a,className:n,element:c="div",size:t=1,style:s,...l}=i(e),o=p.default(g.default["tedi-vertical-spacing"],n);return u.jsx(c,{"data-name":"vertical-spacing",role:"presentation",...l,className:o,style:{"--vertical-spacing-internal":t!==0?`${t}em`:"0",...s},children:a})};r.Item=m.VerticalSpacingItem;exports.VerticalSpacing=r;

package/src/tedi/components/layout/vertical-spacing/vertical-spacing.d.ts

@@ -22,6 +22,11 @@ export interface VerticalSpacingProps extends BreakpointSupport<VerticalSpacingB
      * Additional class name(s) to apply to the element
      */
     className?: string;
+    /**
+     * Additional inline styles, merged with the internal spacing custom property
+     * (rather than replacing it).
+     */
+    style?: React.CSSProperties;
 }
 export declare const VerticalSpacing: {
     (props: VerticalSpacingProps): JSX.Element;

package/src/tedi/components/layout/vertical-spacing/vertical-spacing.es.js

@@ -1,29 +1,30 @@
-import { jsx as c } from "react/jsx-runtime";
-import m from "../../../../../external/classnames/index.es.js";
-import l from "./vertical-spacing.module.scss.es.js";
-import { VerticalSpacingItem as p } from "./vertical-spacing-item.es.js";
-import { useBreakpointProps as g } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-const f = (e) => {
-  const { getCurrentBreakpointProps: r } = g(e.defaultServerBreakpoint), {
+import { jsx as m } from "react/jsx-runtime";
+import l from "../../../../../external/classnames/index.es.js";
+import p from "./vertical-spacing.module.scss.es.js";
+import { VerticalSpacingItem as g } from "./vertical-spacing-item.es.js";
+import { useBreakpointProps as f } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const d = (e) => {
+  const { getCurrentBreakpointProps: r } = f(e.defaultServerBreakpoint), {
     children: a,
     className: i,
-    element: n = "div",
+    element: s = "div",
     size: t = 1,
-    ...s
-  } = r(e), o = m(l["tedi-vertical-spacing"], i);
-  return /* @__PURE__ */ c(
-    n,
+    style: n,
+    ...o
+  } = r(e), c = l(p["tedi-vertical-spacing"], i);
+  return /* @__PURE__ */ m(
+    s,
     {
       "data-name": "vertical-spacing",
       role: "presentation",
-      ...s,
-      className: o,
-      style: { "--vertical-spacing-internal": t !== 0 ? `${t}em` : "0" },
+      ...o,
+      className: c,
+      style: { "--vertical-spacing-internal": t !== 0 ? `${t}em` : "0", ...n },
       children: a
     }
   );
 };
-f.Item = p;
+d.Item = g;
 export {
-  f as VerticalSpacing
+  d as VerticalSpacing
 };

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

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