@tedi-design-system/react 16.0.0-rc.8 → 16.0.0

package/src/tedi/components/layout/sidenav/components/sidenav-item/sidenav-item.es.js

@@ -1,20 +1,20 @@
-import { jsx as s, jsxs as l, Fragment as M } from "react/jsx-runtime";
-import Q, { useState as O, createElement as R } from "react";
+import { jsx as a, jsxs as l, Fragment as M } from "react/jsx-runtime";
+import R, { useState as O, createElement as U } from "react";
 import o from "../../../../../../../external/classnames/index.es.js";
 import { Icon as P } from "../../../../base/icon/icon.es.js";
 import { Collapse as B } from "../../../../buttons/collapse/collapse.es.js";
-import { Link as y } from "../../../../navigation/link/link.es.js";
+import { Link as T } from "../../../../navigation/link/link.es.js";
 import e from "../../sidenav.module.scss.es.js";
-import { SideNavDropdown as U } from "../sidenav-dropdown/sidenav-dropdown.es.js";
-import { useLabels as V } from "../../../../../providers/label-provider/use-labels.es.js";
+import { SideNavDropdown as V } from "../sidenav-dropdown/sidenav-dropdown.es.js";
+import { useLabels as X } from "../../../../../providers/label-provider/use-labels.es.js";
 import { Tooltip as f } from "../../../../overlays/tooltip/tooltip.es.js";
-const X = (j) => {
+const Y = (j) => {
   const {
-    icon: i,
+    icon: s,
     children: n,
     isActive: b,
     onClick: I,
-    subItems: S,
+    subItems: y,
     subItemGroups: z,
     as: k,
     onItemClick: h,
@@ -24,58 +24,59 @@ const X = (j) => {
     isDefaultOpen: K = !1,
     sideNavItemSize: $ = "default",
     ..._
-  } = j, { getLabel: T } = V(), [d, D] = O(K ?? !1), [L, A] = O(!1), u = Q.useId(), p = z ?? (S ? [{ subItems: S }] : null), r = !!p, F = o(
+  } = j, { getLabel: S } = X(), [r, D] = O(K ?? !1), [L, A] = O(!1), u = R.useId(), p = z ?? (y ? [{ subItems: y }] : null), d = !!p, F = c > 1 && d, G = o(
     e["tedi-sidenav__item"],
     e[`tedi-sidenav__item--${$}`],
     {
       [e[`tedi-sidenav__item--level-${c}`]]: c > 1,
       [e["tedi-sidenav__item--current"]]: b,
-      [e["tedi-sidenav__item--has-children"]]: r
+      [e["tedi-sidenav__item--has-children"]]: d,
+      [e["tedi-sidenav__item--with-tree"]]: F
     },
     H
-  ), v = (a) => {
+  ), v = (i) => {
     const t = {
       color: "white",
       className: o(e["tedi-sidenav__icon"])
-    }, N = typeof a == "string" ? { ...t, name: a } : {
+    }, N = typeof i == "string" ? { ...t, name: i } : {
       ...t,
-      ...a,
-      className: o(t.className, a == null ? void 0 : a.className)
+      ...i,
+      className: o(t.className, i == null ? void 0 : i.className)
     };
-    return /* @__PURE__ */ s(P, { ...N });
-  }, G = (a) => {
-    I == null || I(a), r || h == null || h();
-  }, C = (a) => {
-    D(a);
-  }, W = (a) => {
-    (a.key === "Enter" || a.key === " ") && (a.preventDefault(), D((g) => {
+    return /* @__PURE__ */ a(P, { ...N });
+  }, W = (i) => {
+    I == null || I(i), d || h == null || h();
+  }, C = (i) => {
+    D(i);
+  }, q = (i) => {
+    (i.key === "Enter" || i.key === " ") && (i.preventDefault(), D((g) => {
       const t = !g;
       return C(t), t;
     }));
-  }, q = r && (_.href || _.to), x = {
+  }, J = d && (_.href || _.to), x = {
     ..._,
     as: k,
-    onClick: G,
-    className: o(e["tedi-sidenav__link"], q && e["tedi-sidenav__link--has-children-link"]),
+    onClick: W,
+    className: o(e["tedi-sidenav__link"], J && e["tedi-sidenav__link--has-children-link"]),
     noStyle: !0,
     role: "menuitem",
     "aria-current": b ? "page" : void 0,
     "aria-label": m && typeof n == "string" ? n : void 0,
-    ...r ? {
+    ...d ? {
       "aria-haspopup": "true",
-      "aria-expanded": d,
+      "aria-expanded": r,
       "aria-controls": u
     } : {}
-  }, w = () => !m && (p == null ? void 0 : p.map((a, g) => {
+  }, w = () => !m && (p == null ? void 0 : p.map((i, g) => {
     var t;
     return /* @__PURE__ */ l("div", { children: [
-      (a == null ? void 0 : a.subHeading) && /* @__PURE__ */ s("div", { className: e["tedi-sidenav__subheading"], children: a.subHeading }),
-      /* @__PURE__ */ s("ul", { className: e["tedi-sidenav__list"], role: "menu", children: (t = a.subItems) == null ? void 0 : t.map((N, J) => /* @__PURE__ */ R(
-        X,
+      (i == null ? void 0 : i.subHeading) && /* @__PURE__ */ a("div", { className: e["tedi-sidenav__subheading"], children: i.subHeading }),
+      /* @__PURE__ */ a("ul", { className: e["tedi-sidenav__list"], role: "menu", children: (t = i.subItems) == null ? void 0 : t.map((N, Q) => /* @__PURE__ */ U(
+        Y,
         {
           as: k,
           ...N,
-          key: J,
+          key: Q,
           level: c + 1,
           onItemClick: h,
           isCollapsed: m,
@@ -83,16 +84,16 @@ const X = (j) => {
         }
       )) })
     ] }, g);
-  })), E = /* @__PURE__ */ s("li", { "data-name": "sidenav-item", className: F, children: r && m ? /* @__PURE__ */ s(
-    U,
+  })), E = /* @__PURE__ */ a("li", { "data-name": "sidenav-item", className: G, children: d && m ? /* @__PURE__ */ a(
+    V,
     {
-      trigger: /* @__PURE__ */ s(f.Trigger, { children: /* @__PURE__ */ l(
+      trigger: /* @__PURE__ */ a(f.Trigger, { children: /* @__PURE__ */ l(
         "span",
         {
           className: o(e["tedi-sidenav__link"], L && e["tedi-sidenav__link--active"]),
           children: [
-            i && v(i),
-            /* @__PURE__ */ s(
+            s && v(s),
+            /* @__PURE__ */ a(
               P,
               {
                 name: L ? "chevron_right" : "expand_more",
@@ -101,7 +102,7 @@ const X = (j) => {
                 size: 18
               }
             ),
-            /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: n })
+            /* @__PURE__ */ a("span", { className: e["tedi-sidenav__title"], children: n })
           ]
         }
       ) }),
@@ -109,36 +110,36 @@ const X = (j) => {
       groups: p,
       onOpenChange: A
     }
-  ) : r && c === 1 ? _.href || _.to ? /* @__PURE__ */ l(M, { children: [
-    /* @__PURE__ */ l(y, { ...x, children: [
-      i && v(i),
-      /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: n })
+  ) : d && c === 1 ? _.href || _.to ? /* @__PURE__ */ l(M, { children: [
+    /* @__PURE__ */ l(T, { ...x, children: [
+      s && v(s),
+      /* @__PURE__ */ a("span", { className: e["tedi-sidenav__title"], children: n })
     ] }),
-    /* @__PURE__ */ s("div", { className: e["tedi-sidenav__link-collapse-wrapper"], children: /* @__PURE__ */ s(
+    /* @__PURE__ */ a("div", { className: e["tedi-sidenav__link-collapse-wrapper"], children: /* @__PURE__ */ a(
       B,
       {
         id: u,
         hideCollapseText: !0,
-        open: d,
+        open: r,
         onToggle: C,
-        toggleLabel: T("sidenav.toggleSubmenuChildren", {
-          isCollapsedInternal: d,
+        toggleLabel: S("sidenav.toggleSubmenuChildren", {
+          isCollapsedInternal: r,
           children: n
         }),
         className: e["tedi-sidenav__collapse"],
         children: w()
       }
     ) })
-  ] }) : /* @__PURE__ */ s(
+  ] }) : /* @__PURE__ */ a(
     B,
     {
       id: u,
       hideCollapseText: !0,
-      open: d,
+      open: r,
       onToggle: C,
       className: e["tedi-sidenav__collapse"],
-      toggleLabel: T("sidenav.toggleSubmenuChildren", {
-        isCollapsedInternal: d,
+      toggleLabel: S("sidenav.toggleSubmenuChildren", {
+        isCollapsedInternal: r,
         children: n
       }),
       title: /* @__PURE__ */ l(
@@ -146,37 +147,37 @@ const X = (j) => {
         {
           className: o(
             e["tedi-sidenav__link"],
-            d && e["tedi-sidenav__link--active"]
+            r && e["tedi-sidenav__link--active"]
           ),
           role: "button",
-          "aria-expanded": d,
+          "aria-expanded": r,
           "aria-controls": u,
           "aria-current": b ? "page" : void 0,
-          onKeyDown: W,
+          onKeyDown: q,
           children: [
-            i && v(i),
-            /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: n })
+            s && v(s),
+            /* @__PURE__ */ a("span", { className: e["tedi-sidenav__title"], children: n })
           ]
         }
       ),
       children: w()
     }
-  ) : r ? /* @__PURE__ */ l(M, { children: [
-    /* @__PURE__ */ l(y, { ...x, children: [
-      i && v(i),
-      /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: n }),
-      /* @__PURE__ */ s("i", { className: e["tedi-sidenav__bullet"] })
+  ) : d ? /* @__PURE__ */ l(M, { children: [
+    /* @__PURE__ */ l(T, { ...x, children: [
+      s && v(s),
+      /* @__PURE__ */ a("span", { className: e["tedi-sidenav__title"], children: n }),
+      /* @__PURE__ */ a("i", { className: e["tedi-sidenav__bullet"] })
     ] }),
     w()
-  ] }) : /* @__PURE__ */ s(f.Trigger, { children: /* @__PURE__ */ l(y, { ...x, children: [
-    i && v(i),
-    /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: n })
+  ] }) : /* @__PURE__ */ a(f.Trigger, { children: /* @__PURE__ */ l(T, { ...x, children: [
+    s && v(s),
+    /* @__PURE__ */ a("span", { className: e["tedi-sidenav__title"], children: n })
   ] }) }) });
   return c === 1 && m ? /* @__PURE__ */ l(f, { placement: "right", focusManager: void 0, children: [
-    /* @__PURE__ */ s(f.Content, { maxWidth: "medium", children: n }),
+    /* @__PURE__ */ a(f.Content, { maxWidth: "medium", children: n }),
     E
   ] }) : E;
 };
 export {
-  X as SideNavItem
+  Y as SideNavItem
 };

package/src/tedi/components/layout/sidenav/examples.d.ts

@@ -5,3 +5,4 @@ export declare const exampleDefaultOpen: SideNavItemProps[];
 export declare const exampleNavCollapsibleItemsWithLinks: SideNavItemProps[];
 export declare const exampleThirdLevelMenuItems: SideNavItemProps[];
 export declare const exampleThirdLevelMenuItemsLinks: SideNavItemProps[];
+export declare const exampleThirdLevelMenuItemsLinksWithSubTitles: SideNavItemProps[];

package/src/tedi/components/layout/sidenav/sidenav.d.ts

@@ -89,7 +89,7 @@ export declare const SideNav: (<C extends React.ElementType = "a">(props: SideNa
     Dropdown: <C extends React.ElementType = "a">({ trigger, groups, onOpenChange, as, }: {
         trigger: React.ReactNode;
         groups: {
-            subHeading?: string;
+            subHeading?: React.ReactNode;
             subItems: SideNavItemProps<C>[];
         }[];
         onOpenChange?: (isOpen: boolean) => void;

package/src/tedi/components/layout/sidenav/sidenav.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-sidenav":"tedi-sidenav-8ef80858","tedi-sidenav__collapse":"tedi-sidenav__collapse-2c595f9e","tedi-sidenav__item":"tedi-sidenav__item-919825a5","tedi-sidenav--has-dividers":"tedi-sidenav--has-dividers-ceb44380","tedi-sidenav--collapsed":"tedi-sidenav--collapsed-b7b406f9","tedi-sidenav__title":"tedi-sidenav__title-3bec8b71","tedi-sidenav__bullet":"tedi-sidenav__bullet-c51cd2ba","tedi-sidenav__link":"tedi-sidenav__link-e66a922a","tedi-sidenav__link--active":"tedi-sidenav__link--active-cf22fc56","tedi-sidenav__item--has-children":"tedi-sidenav__item--has-children-71df3699","tedi-sidenav__toggle-icon":"tedi-sidenav__toggle-icon-63662692","tedi-sidenav__overlay":"tedi-sidenav__overlay-5feeb550","tedi-sidenav__item--level-2":"tedi-sidenav__item--level-2-3ed1a7e8","tedi-sidenav__list":"tedi-sidenav__list-58d1ae41","tedi-sidenav__sub-item":"tedi-sidenav__sub-item-c714d866","tedi-sidenav__link--has-children-link":"tedi-sidenav__link--has-children-link-1d49019f","tedi-sidenav__link-collapse-wrapper":"tedi-sidenav__link-collapse-wrapper-cd74f534","tedi-sidenav__item--mobile":"tedi-sidenav__item--mobile-6571c3cc","tedi-sidenav__item--current":"tedi-sidenav__item--current-95a00f8f","tedi-sidenav__item--medium":"tedi-sidenav__item--medium-995f73f7","tedi-sidenav__icon":"tedi-sidenav__icon-b7155dbb","tedi-sidenav__item--small":"tedi-sidenav__item--small-1952afb5","tedi-sidenav__back-button":"tedi-sidenav__back-button-c8e74f92","tedi-sidenav__subheading":"tedi-sidenav__subheading-8cec3c0c","tedi-sidenav__subheading--mobile":"tedi-sidenav__subheading--mobile-e24704b2","sidenav__item--current":"sidenav__item--current-f5468e85"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-sidenav":"tedi-sidenav-8ef80858","tedi-sidenav__collapse":"tedi-sidenav__collapse-2c595f9e","tedi-sidenav__item":"tedi-sidenav__item-919825a5","tedi-sidenav--has-dividers":"tedi-sidenav--has-dividers-ceb44380","tedi-sidenav--collapsed":"tedi-sidenav--collapsed-b7b406f9","tedi-sidenav__title":"tedi-sidenav__title-3bec8b71","tedi-sidenav__bullet":"tedi-sidenav__bullet-c51cd2ba","tedi-sidenav__link":"tedi-sidenav__link-e66a922a","tedi-sidenav__link--active":"tedi-sidenav__link--active-cf22fc56","tedi-sidenav__item--has-children":"tedi-sidenav__item--has-children-71df3699","tedi-sidenav__toggle-icon":"tedi-sidenav__toggle-icon-63662692","tedi-sidenav__overlay":"tedi-sidenav__overlay-5feeb550","tedi-sidenav__item--level-2":"tedi-sidenav__item--level-2-3ed1a7e8","tedi-sidenav__list":"tedi-sidenav__list-58d1ae41","tedi-sidenav__item--with-tree":"tedi-sidenav__item--with-tree-39198d0d","tedi-sidenav__sub-item":"tedi-sidenav__sub-item-c714d866","tedi-sidenav__link--has-children-link":"tedi-sidenav__link--has-children-link-1d49019f","tedi-sidenav__link-collapse-wrapper":"tedi-sidenav__link-collapse-wrapper-cd74f534","tedi-sidenav__item--mobile":"tedi-sidenav__item--mobile-6571c3cc","tedi-sidenav__item--current":"tedi-sidenav__item--current-95a00f8f","tedi-sidenav__item--medium":"tedi-sidenav__item--medium-995f73f7","tedi-sidenav__icon":"tedi-sidenav__icon-b7155dbb","tedi-sidenav__item--small":"tedi-sidenav__item--small-1952afb5","tedi-sidenav__back-button":"tedi-sidenav__back-button-c8e74f92","tedi-sidenav__subheading":"tedi-sidenav__subheading-8cec3c0c","tedi-sidenav__subheading--mobile":"tedi-sidenav__subheading--mobile-e24704b2","sidenav__item--current":"sidenav__item--current-f5468e85"};exports.default=e;

package/src/tedi/components/layout/sidenav/sidenav.module.scss.es.js

@@ -13,6 +13,7 @@ const e = {
   "tedi-sidenav__overlay": "tedi-sidenav__overlay-5feeb550",
   "tedi-sidenav__item--level-2": "tedi-sidenav__item--level-2-3ed1a7e8",
   "tedi-sidenav__list": "tedi-sidenav__list-58d1ae41",
+  "tedi-sidenav__item--with-tree": "tedi-sidenav__item--with-tree-39198d0d",
   "tedi-sidenav__sub-item": "tedi-sidenav__sub-item-c714d866",
   "tedi-sidenav__link--has-children-link": "tedi-sidenav__link--has-children-link-1d49019f",
   "tedi-sidenav__link-collapse-wrapper": "tedi-sidenav__link-collapse-wrapper-cd74f534",

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react/jsx-runtime"),B=require("../../../../../external/classnames/index.cjs.js"),e=require("./separator.module.scss.cjs.js"),q=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),f=r=>{const{getCurrentBreakpointProps:m}=q.useBreakpointProps(r.defaultServerBreakpoint),{className:$,element:g="div",isStretched:S,spacing:a,topSpacing:s,bottomSpacing:o,axis:i="horizontal",color:d="default",variant:t,thickness:l=1,height:p,dotSize:n,display:u="block",...h}=m(r),k=B.default(e.default["tedi-separator"],$,{[e.default[`tedi-separator--${d}`]]:d},{[e.default[`tedi-separator--${i}`]]:i},{[e.default[`tedi-separator--${t}`]]:t},{[e.default[`tedi-separator--${u}`]]:u},{[e.default[`tedi-separator--${t}-${n}`]]:t&&n},{[e.default[`tedi-separator--thickness-${l}`]]:l&&!t},{[e.default["tedi-separator--is-stretched"]]:S},{[e.default[`tedi-separator--spacing-${a}`.replace(".","-")]]:a},{[e.default[`tedi-separator--top-${s}`.replace(".","-")]]:!a&&s},{[e.default[`tedi-separator--bottom-${o}`.replace(".","-")]]:!a&&o}),v=()=>{const c={};return p&&(c["--vertical-separator-height"]=`${p}rem`),c};return b.jsx(g,{"data-name":"separator",...h,style:v(),className:k})};exports.Separator=f;exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const j=require("react/jsx-runtime"),q=require("../../../../../external/classnames/index.cjs.js"),t=require("./separator.module.scss.cjs.js"),z=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),y=u=>{const{getCurrentBreakpointProps:b}=z.useBreakpointProps(u.defaultServerBreakpoint),{className:v,element:S="div",isStretched:k,spacing:e,axis:f="horizontal",color:P="primary",variant:o,thickness:r=1,height:c,dotSize:m="large",dotStyle:$="filled",dotPosition:n,display:g="block",...x}=b(u),p=typeof n=="number",h=o!=="dot-only"&&!p?n:void 0;let a=0,i=0,s=0,d=0;typeof e=="number"&&(f==="horizontal"?a=i=e:s=d=e),typeof e=="object"&&e!==null&&(a=e.top??a,i=e.bottom??i,s=e.left??s,d=e.right??d);const B=q.default(t.default["tedi-separator"],v,t.default[`tedi-separator--${f}`],t.default[`tedi-separator--${P}`],{[t.default[`tedi-separator--${o}`]]:o,[t.default[`tedi-separator--${g}`]]:g,[t.default[`tedi-separator--dotted-${m}`]]:o==="dotted",[t.default[`tedi-separator--dot-only-${m}`]]:o==="dot-only",[t.default[`tedi-separator--dot-style-${$}`]]:o,[t.default[`tedi-separator--dot-position-${h}`]]:typeof h=="string"&&o!=="dot-only",[t.default["tedi-separator--dot-position-custom"]]:p,[t.default["tedi-separator--is-stretched"]]:k,[t.default[`tedi-separator--thickness-${r}`]]:r||$==="outlined"?r:void 0}),l={"--separator-margin-top":`${a}rem`,"--separator-margin-bottom":`${i}rem`,"--separator-margin-left":`${s}rem`,"--separator-margin-right":`${d}rem`};return c&&(l["--vertical-separator-height"]=`${c}rem`),r&&(l["--separator-thickness"]=`${r}px`),o==="dotted"&&p&&(l["--separator-dot-position"]=`${n}rem`),j.jsx(S,{"data-name":"separator",...x,style:l,className:B})};exports.Separator=y;exports.default=y;

package/src/tedi/components/misc/separator/separator.d.ts

@@ -1,77 +1,103 @@
 import { BreakpointSupport } from '../../../helpers';
-export type SeparatorSpacing = 0 | 0.25 | 0.5 | 0.75 | 1 | 1.25 | 1.5 | 1.75 | 2 | 2.5 | 5;
+export type SeparatorVariant = 'dotted' | 'dot-only';
+export type DotSize = 'large' | 'medium' | 'small' | 'extra-small';
+export type DotStyle = 'filled' | 'outlined';
+export type DotPosition = 'start' | 'center' | 'end' | number;
+/**
+ * Margin/padding-like spacing around the separator
+ * - number → uniform spacing on main axis
+ * - object → fine-grained control (top/bottom/left/right)
+ */
+export type SeparatorSpacing = number | {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+};
 export interface SeparatorSharedProps {
     /**
-     * Additional class.
+     * Additional class names
      */
     className?: string;
     /**
-     * Rendered HTML element.
-     * @default div
+     * HTML element to render — most common are 'hr', 'div', 'span'
      */
     element?: 'hr' | 'div' | 'span';
     /**
-     * Whether the separator should stretch to fill the full spacing inside cardContent.
+     * When true, the separator stretches to fill available space (100%)
      */
     isStretched?: boolean;
+    /**
+     * Semantic color token
+     * @default primary
+     */
     color?: 'primary' | 'secondary' | 'accent';
-    variant?: 'dotted' | 'dotted-small' | 'dot-only';
-    dotSize?: 'large' | 'medium' | 'small' | 'extra-small';
+    /**
+     * Visual style — line with dots vs standalone centered dot(s)
+     */
+    variant?: SeparatorVariant;
+    /**
+     * Line thickness in pixels (1 or 2) — affects outlined & solid lines
+     */
     thickness?: 1 | 2;
     /**
-     * Spacing applied based on the axis:
-     * - For horizontal axis, spacing is applied to top and bottom of the separator.
-     * - For vertical axis, spacing is applied to left and right of the separator.
+     * Spacing (margin) around the separator
+     * @example
+     * spacing={16}        // 16px top & bottom (horizontal) or left & right (vertical)
+     * spacing={{ top: 24, bottom: 8 }}
      */
     spacing?: SeparatorSpacing;
 }
 export interface SeparatorVerticalProps extends SeparatorSharedProps {
     /**
-     * Height of separator. Use with vertical axis, when full-width separator is not needed.
-     * Height can be number in rem units. It's customizable to allow for more flexibility around X components.
+     * Must be set to 'vertical'
+     */
+    axis: 'vertical';
+    /**
+     * Height of the vertical separator in rem units
      */
     height?: number;
     /**
-     * Axis of separator, vertical and horizontal separators support different props
+     * CSS display value — usually 'block' or 'inline-block'
      */
-    axis: 'vertical';
-    topSpacing?: undefined;
-    bottomSpacing?: undefined;
-    display?: 'block' | 'inline';
+    display?: 'block' | 'inline' | 'inline-block';
 }
 export interface SeparatorHorizontalProps extends SeparatorSharedProps {
     /**
-     * Spacing on top of separator. Ignored when spacing is also used. Only for horizontal axis.
+     * Must be set to 'horizontal' or left undefined (defaults to horizontal)
      */
-    topSpacing?: SeparatorSpacing;
+    axis?: 'horizontal';
     /**
-     * Spacing on bottom of separator. Ignored when spacing is also used. Only for horizontal axis.
-     */
-    bottomSpacing?: SeparatorSpacing;
+    Vertical height is not used in horizontal mode
+    */
+    height?: undefined;
     /**
-     * Axis of separator, vertical and horizontal separators support different props
+     * Display is forced to 'block' in horizontal mode
      */
-    axis?: 'horizontal';
-    height?: undefined;
     display?: 'block';
 }
-export type SeparatorBreakpointProps = {
+type DottedSeparatorProps = {
+    variant?: 'dotted';
+    dotSize?: DotSize;
+    dotStyle?: DotStyle;
     /**
-     * Spacing values based on breakpoints.
+     * Position of the single dot
+     * @example
+     * 'center' | 'start' | 'end' | 2.5  // 2.5rem from start
      */
-    spacing?: Omit<SeparatorHorizontalProps['spacing'], 'axis'>;
-    /**
-     * Height values based on breakpoints (for vertical separators).
-     */
-    height?: Omit<SeparatorVerticalProps['height'], 'axis'>;
-    axis?: 'horizontal' | 'vertical';
+    dotPosition?: DotPosition;
 };
-export type SeparatorProps = BreakpointSupport<(SeparatorHorizontalProps | (SeparatorVerticalProps & {
-    variant?: 'dotted' | 'dotted-small';
-    dotSize?: undefined;
-})) | (SeparatorHorizontalProps | (SeparatorVerticalProps & {
+type DotOnlySeparatorProps = {
     variant: 'dot-only';
-    dotSize: 'large' | 'medium' | 'small' | 'extra-small';
-}))> & SeparatorBreakpointProps;
+    dotSize: DotSize;
+    dotStyle?: DotStyle;
+    dotPosition?: never;
+};
+export type SeparatorBreakpointProps = {
+    spacing?: SeparatorSpacing;
+    height?: number;
+    axis?: 'horizontal' | 'vertical';
+};
+export type SeparatorProps = BreakpointSupport<(SeparatorHorizontalProps & (DottedSeparatorProps | DotOnlySeparatorProps)) | (SeparatorVerticalProps & (DottedSeparatorProps | DotOnlySeparatorProps))> & SeparatorBreakpointProps;
 export declare const Separator: (props: SeparatorProps) => JSX.Element;
 export default Separator;

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

@@ -1,43 +1,51 @@
-import { jsx as k } from "react/jsx-runtime";
-import v from "../../../../../external/classnames/index.es.js";
+import { jsx as B } from "react/jsx-runtime";
+import N from "../../../../../external/classnames/index.es.js";
 import t from "./separator.module.scss.es.js";
-import { useBreakpointProps as B } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-const z = (a) => {
-  const { getCurrentBreakpointProps: $ } = B(a.defaultServerBreakpoint), {
-    className: g,
-    element: h = "div",
-    isStretched: f,
-    spacing: r,
-    topSpacing: s,
-    bottomSpacing: o,
-    axis: i = "horizontal",
-    color: p = "default",
-    variant: e,
-    thickness: c = 1,
-    height: n,
-    dotSize: d,
-    display: l = "block",
-    ...u
-  } = $(a), S = v(
+import { useBreakpointProps as z } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const M = (m) => {
+  const { getCurrentBreakpointProps: u } = z(m.defaultServerBreakpoint), {
+    className: b,
+    element: k = "div",
+    isStretched: v,
+    spacing: e,
+    axis: c = "horizontal",
+    color: S = "primary",
+    variant: o,
+    thickness: r = 1,
+    height: f,
+    dotSize: $ = "large",
+    dotStyle: h = "filled",
+    dotPosition: n,
+    display: y = "block",
+    ...P
+  } = u(m), l = typeof n == "number", g = o !== "dot-only" && !l ? n : void 0;
+  let a = 0, s = 0, i = 0, p = 0;
+  typeof e == "number" && (c === "horizontal" ? a = s = e : i = p = e), typeof e == "object" && e !== null && (a = e.top ?? a, s = e.bottom ?? s, i = e.left ?? i, p = e.right ?? p);
+  const x = N(
     t["tedi-separator"],
-    g,
-    { [t[`tedi-separator--${p}`]]: p },
-    { [t[`tedi-separator--${i}`]]: i },
-    { [t[`tedi-separator--${e}`]]: e },
-    { [t[`tedi-separator--${l}`]]: l },
-    { [t[`tedi-separator--${e}-${d}`]]: e && d },
-    { [t[`tedi-separator--thickness-${c}`]]: c && !e },
-    { [t["tedi-separator--is-stretched"]]: f },
-    { [t[`tedi-separator--spacing-${r}`.replace(".", "-")]]: r },
-    { [t[`tedi-separator--top-${s}`.replace(".", "-")]]: !r && s },
-    { [t[`tedi-separator--bottom-${o}`.replace(".", "-")]]: !r && o }
-  );
-  return /* @__PURE__ */ k(h, { "data-name": "separator", ...u, style: (() => {
-    const m = {};
-    return n && (m["--vertical-separator-height"] = `${n}rem`), m;
-  })(), className: S });
+    b,
+    t[`tedi-separator--${c}`],
+    t[`tedi-separator--${S}`],
+    {
+      [t[`tedi-separator--${o}`]]: o,
+      [t[`tedi-separator--${y}`]]: y,
+      [t[`tedi-separator--dotted-${$}`]]: o === "dotted",
+      [t[`tedi-separator--dot-only-${$}`]]: o === "dot-only",
+      [t[`tedi-separator--dot-style-${h}`]]: o,
+      [t[`tedi-separator--dot-position-${g}`]]: typeof g == "string" && o !== "dot-only",
+      [t["tedi-separator--dot-position-custom"]]: l,
+      [t["tedi-separator--is-stretched"]]: v,
+      [t[`tedi-separator--thickness-${r}`]]: r || h === "outlined" ? r : void 0
+    }
+  ), d = {
+    "--separator-margin-top": `${a}rem`,
+    "--separator-margin-bottom": `${s}rem`,
+    "--separator-margin-left": `${i}rem`,
+    "--separator-margin-right": `${p}rem`
+  };
+  return f && (d["--vertical-separator-height"] = `${f}rem`), r && (d["--separator-thickness"] = `${r}px`), o === "dotted" && l && (d["--separator-dot-position"] = `${n}rem`), /* @__PURE__ */ B(k, { "data-name": "separator", ...P, style: d, className: x });
 };
 export {
-  z as Separator,
-  z as default
+  M as Separator,
+  M as default
 };

package/src/tedi/components/misc/separator/separator.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-separator":"tedi-separator-08861c00","tedi-separator--vertical":"tedi-separator--vertical-fee3a031","tedi-separator--secondary":"tedi-separator--secondary-bb0cc0a1","tedi-separator--accent":"tedi-separator--accent-17878389","tedi-separator--block":"tedi-separator--block-48f7fe7e","tedi-separator--inline":"tedi-separator--inline-9021c8fe","tedi-separator--dotted":"tedi-separator--dotted-e3766e9c","tedi-separator--dotted-small":"tedi-separator--dotted-small-71e3be2e","tedi-separator--is-stretched":"tedi-separator--is-stretched-dfd66f31","tedi-separator--horizontal":"tedi-separator--horizontal-47a3986e","tedi-separator--top-0":"tedi-separator--top-0-677363d3","tedi-separator--bottom-0":"tedi-separator--bottom-0-e8608c44","tedi-separator--spacing-0":"tedi-separator--spacing-0-d3de83fa","tedi-separator--dot-only":"tedi-separator--dot-only-3babc1e5","tedi-separator--top-0-25":"tedi-separator--top-0-25-e87283bc","tedi-separator--bottom-0-25":"tedi-separator--bottom-0-25-c79e8c15","tedi-separator--spacing-0-25":"tedi-separator--spacing-0-25-6773860d","tedi-separator--top-0-5":"tedi-separator--top-0-5-e324a36c","tedi-separator--bottom-0-5":"tedi-separator--bottom-0-5-33887212","tedi-separator--spacing-0-5":"tedi-separator--spacing-0-5-36726d06","tedi-separator--top-0-75":"tedi-separator--top-0-75-e74f255c","tedi-separator--bottom-0-75":"tedi-separator--bottom-0-75-48b41611","tedi-separator--spacing-0-75":"tedi-separator--spacing-0-75-9bb50a77","tedi-separator--top-1":"tedi-separator--top-1-655231b6","tedi-separator--bottom-1":"tedi-separator--bottom-1-7e9cb062","tedi-separator--spacing-1":"tedi-separator--spacing-1-a40c2177","tedi-separator--top-1-25":"tedi-separator--top-1-25-b2261ac9","tedi-separator--bottom-1-25":"tedi-separator--bottom-1-25-0f204938","tedi-separator--spacing-1-25":"tedi-separator--spacing-1-25-d53a5705","tedi-separator--top-1-5":"tedi-separator--top-1-5-a2896e5b","tedi-separator--bottom-1-5":"tedi-separator--bottom-1-5-521ea969","tedi-separator--spacing-1-5":"tedi-separator--spacing-1-5-eec3fd3a","tedi-separator--top-1-75":"tedi-separator--top-1-75-376bb3f5","tedi-separator--bottom-1-75":"tedi-separator--bottom-1-75-601de207","tedi-separator--spacing-1-75":"tedi-separator--spacing-1-75-2738dc67","tedi-separator--top-2":"tedi-separator--top-2-d45b7bb4","tedi-separator--bottom-2":"tedi-separator--bottom-2-e0846020","tedi-separator--spacing-2":"tedi-separator--spacing-2-2b1d21c5","tedi-separator--top-2-5":"tedi-separator--top-2-5-9b0adc94","tedi-separator--bottom-2-5":"tedi-separator--bottom-2-5-3b00b4c4","tedi-separator--spacing-2-5":"tedi-separator--spacing-2-5-28334f74","tedi-separator--top-5":"tedi-separator--top-5-06286d83","tedi-separator--bottom-5":"tedi-separator--bottom-5-44801c7a","tedi-separator--spacing-5":"tedi-separator--spacing-5-86a9da4b","tedi-separator--thickness-1":"tedi-separator--thickness-1-d3383a73","tedi-separator--thickness-2":"tedi-separator--thickness-2-c8739ef3","tedi-separator--dot-only-extra-small":"tedi-separator--dot-only-extra-small-2eed2366","tedi-separator--dot-only-small":"tedi-separator--dot-only-small-fc9bf9ea","tedi-separator--dot-only-medium":"tedi-separator--dot-only-medium-d8c48848","tedi-separator--dot-only-large":"tedi-separator--dot-only-large-37aaffff","tedi-separator--primary":"tedi-separator--primary-9aa696f5"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-separator":"tedi-separator-08861c00","tedi-separator--vertical":"tedi-separator--vertical-fee3a031","tedi-separator--horizontal":"tedi-separator--horizontal-47a3986e","tedi-separator--block":"tedi-separator--block-48f7fe7e","tedi-separator--inline":"tedi-separator--inline-9021c8fe","tedi-separator--secondary":"tedi-separator--secondary-bb0cc0a1","tedi-separator--accent":"tedi-separator--accent-17878389","tedi-separator--is-stretched":"tedi-separator--is-stretched-dfd66f31","tedi-separator--dotted":"tedi-separator--dotted-e3766e9c","tedi-separator--dot-only":"tedi-separator--dot-only-3babc1e5","tedi-separator--dot-style-outlined":"tedi-separator--dot-style-outlined-5301302a","tedi-separator--primary":"tedi-separator--primary-9aa696f5","tedi-separator--dot-only-extra-small":"tedi-separator--dot-only-extra-small-2eed2366","tedi-separator--dotted-extra-small":"tedi-separator--dotted-extra-small-04cdb637","tedi-separator--dot-only-small":"tedi-separator--dot-only-small-fc9bf9ea","tedi-separator--dotted-small":"tedi-separator--dotted-small-71e3be2e","tedi-separator--dot-only-medium":"tedi-separator--dot-only-medium-d8c48848","tedi-separator--dotted-medium":"tedi-separator--dotted-medium-dcac8ef1","tedi-separator--dot-only-large":"tedi-separator--dot-only-large-37aaffff","tedi-separator--dotted-large":"tedi-separator--dotted-large-fc504c80","tedi-separator--dot-position-start":"tedi-separator--dot-position-start-0ac40f9d","tedi-separator--dot-position-center":"tedi-separator--dot-position-center-fa7a5106","tedi-separator--dot-position-end":"tedi-separator--dot-position-end-5e4cadd7","tedi-separator--dot-position-custom":"tedi-separator--dot-position-custom-7d43112e","tedi-separator--thickness-1":"tedi-separator--thickness-1-d3383a73","tedi-separator--thickness-2":"tedi-separator--thickness-2-c8739ef3","tedi-separator--dotted-primary":"tedi-separator--dotted-primary-40602300","tedi-separator--dotted-secondary":"tedi-separator--dotted-secondary-c885ca72","tedi-separator--dotted-accent":"tedi-separator--dotted-accent-13a86572"};exports.default=t;