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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "19.0.0-rc.13",
+  "version": "19.0.0-rc.14",
   "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/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
 };