@12-apps/ui 6.39.12 → 6.39.13

package/dist/_internal/components/index.js

@@ -768,8 +768,8 @@ import "../../chunk-CYZZHWNK.js";
 import "../../chunk-CMMPGAMJ.js";
 import {
   Separator
-} from "../../chunk-XSSCSRUX.js";
-import "../../chunk-SYNB3IIB.js";
+} from "../../chunk-X53F33KA.js";
+import "../../chunk-35443PF6.js";
 import {
   Avatar,
   AvatarGroup

package/dist/_internal/components/layout/Separator/Separator.js

@@ -1,7 +1,7 @@
 import {
   Separator
-} from "../../../../chunk-XSSCSRUX.js";
-import "../../../../chunk-SYNB3IIB.js";
+} from "../../../../chunk-X53F33KA.js";
+import "../../../../chunk-35443PF6.js";
 import "../../../../chunk-PZBK3F52.js";
 import "../../../../chunk-YKCAJ2TN.js";
 import "../../../../chunk-PZ5AY32C.js";

package/dist/_internal/components/layout/Separator/Separator.styles.js

@@ -3,7 +3,7 @@ import {
   separatorBlockMargin,
   separatorMargin,
   separatorStyles
-} from "../../../../chunk-SYNB3IIB.js";
+} from "../../../../chunk-35443PF6.js";
 import "../../../../chunk-PZBK3F52.js";
 import "../../../../chunk-YKCAJ2TN.js";
 import "../../../../chunk-PZ5AY32C.js";

package/dist/_internal/components/layout/index.js

@@ -103,8 +103,8 @@ import "../../../chunk-7WDPC46N.js";
 import "../../../chunk-CMMPGAMJ.js";
 import {
   Separator
-} from "../../../chunk-XSSCSRUX.js";
-import "../../../chunk-SYNB3IIB.js";
+} from "../../../chunk-X53F33KA.js";
+import "../../../chunk-35443PF6.js";
 import "../../../chunk-2GSIEDGN.js";
 import {
   Card,

package/dist/_internal/social-login-button/social-login-button.js

@@ -5,15 +5,15 @@ import {
   GoogleIcon,
   SocialLoginButton,
   SocialLoginContainer
-} from "../../chunk-5KWHINO5.js";
+} from "../../chunk-SLDSWQVE.js";
 import "../../chunk-INGPH3YQ.js";
 import "../../chunk-6GP2DOOO.js";
 import "../../chunk-IWEUSZY3.js";
 import "../../chunk-RB3X6CEE.js";
 import "../../chunk-CYZZHWNK.js";
 import "../../chunk-CMMPGAMJ.js";
-import "../../chunk-XSSCSRUX.js";
-import "../../chunk-SYNB3IIB.js";
+import "../../chunk-X53F33KA.js";
+import "../../chunk-35443PF6.js";
 import "../../chunk-VUHLNYAE.js";
 import "../../chunk-2GSIEDGN.js";
 import "../../chunk-WN5PNP6F.js";

package/dist/{chunk-SYNB3IIB.js → chunk-35443PF6.js}

@@ -70,13 +70,16 @@ var ruleLength = (theme, length) => {
   if (typeof length === "string") return length;
   return length <= 1 ? `${length * 100}%` : rem(theme, length);
 };
+var isRelativeLength = (length) => typeof length === "number" ? length <= 1 : length.includes("%");
 var labelledSeparatorLayout = (theme, isHorizontal, length) => {
   if (isHorizontal) return { rule: {}, group: {} };
-  if (length) return { rule: { flex: "none" }, group: {} };
+  if (length && !isRelativeLength(length)) return { rule: { flex: "none" }, group: {} };
   return {
-    // A design 16px, as long as the gap beside the label at the default
-    // spacing, so a short or unsized row still shows two rules and not a word.
-    rule: { flex: "1 1 0", minHeight: rem(theme, 16) },
+    // Unset, the rules share the run; relative, each is its own fraction of it.
+    // Either way a design 16px floor, as long as the gap beside the label at
+    // the default spacing, so a short or unsized row still shows two rules and
+    // not a word.
+    rule: { flex: length ? "0 1 auto" : "1 1 0", minHeight: rem(theme, 16) },
     group: { alignSelf: "stretch" }
   };
 };
@@ -113,4 +116,4 @@ export {
   labelledSeparatorLayout,
   separatorStyles
 };
-//# sourceMappingURL=chunk-SYNB3IIB.js.map
+//# sourceMappingURL=chunk-35443PF6.js.map

package/dist/chunk-35443PF6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Separator/Separator.styles.ts"],"sourcesContent":["import type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type {\n  SeparatorOrientation,\n  SeparatorProps,\n  SeparatorSize,\n  SeparatorVariant,\n} from './Separator.types';\nimport { FIELD_BORDER_WIDTH } from '../../../tokens/field-height.core';\nimport { rem } from '../../../tokens/relative';\n\nconst THICKNESS_PX: Record<SeparatorSize, number> = {\n  xs: 1,\n  sm: 2,\n  md: 3,\n  lg: 4,\n  xl: 6,\n};\n\nconst MARGIN_PX: Record<SeparatorSize, number> = {\n  xs: 4,\n  sm: 8,\n  md: 16,\n  lg: 24,\n  xl: 32,\n};\n\nconst separatorThickness = (size: SeparatorSize): number =>\n  THICKNESS_PX[size] ?? THICKNESS_PX.md;\n\n/** An explicit `margin` wins; otherwise the size picks one. */\nexport const separatorMargin = (\n  size: SeparatorSize,\n  margin?: number | string,\n): number | string => margin ?? MARGIN_PX[size] ?? MARGIN_PX.md;\n\n// `gradient` paints a background rather than a border, so it draws its line as a\n// solid border of zero visual consequence.\nconst borderStyleFor = (variant: SeparatorVariant): 'dashed' | 'dotted' | 'solid' => {\n  switch (variant) {\n    case 'dashed':\n      return 'dashed';\n    case 'dotted':\n      return 'dotted';\n    default:\n      return 'solid';\n  }\n};\n\nconst gradientBackground = (\n  variant: SeparatorVariant,\n  orientation: SeparatorOrientation,\n  color: string,\n): string | undefined => {\n  if (variant !== 'gradient') return undefined;\n  const angle = orientation === 'horizontal' ? '90deg' : '180deg';\n  return `linear-gradient(${angle}, transparent 0%, ${color} 50%, transparent 100%)`;\n};\n\n// Only the leading edge carries the rule; the other three are zeroed explicitly so\n// a parent's border shorthand cannot leak through.\nconst borderEdges = (\n  isHorizontal: boolean,\n  thickness: string,\n  style: 'dashed' | 'dotted' | 'solid',\n  color: string,\n): CSSObject => {\n  const leading = isHorizontal ? 'Top' : 'Left';\n  const blank: CSSObject = {\n    borderTopWidth: 0,\n    borderBottomWidth: 0,\n    borderLeftWidth: 0,\n    borderRightWidth: 0,\n    borderTopStyle: 'none',\n    borderBottomStyle: 'none',\n    borderLeftStyle: 'none',\n    borderRightStyle: 'none',\n    borderTopColor: 'transparent',\n    borderBottomColor: 'transparent',\n    borderLeftColor: 'transparent',\n    borderRightColor: 'transparent',\n  };\n\n  return {\n    ...blank,\n    [`border${leading}Width`]: thickness,\n    [`border${leading}Style`]: style,\n    [`border${leading}Color`]: color,\n  };\n};\n\ntype SeparatorStyleArgs = Required<\n  Pick<SeparatorProps, 'variant' | 'orientation' | 'size'>\n> &\n  Pick<SeparatorProps, 'color' | 'length'> & {\n    /** From {@link separatorBlockMargin}, which both the plain and the labelled separator read. */\n    blockMargin: string;\n  };\n\n/**\n * The separator's margin, on the axis it separates along only: above and below\n * a horizontal rule, either side of a vertical one. A margin given as a string\n * carries its own units; a number is design px, through the type scale.\n *\n * The LABELLED separator uses this too. It used to hand the number straight to\n * `sx.margin`, where a number is SPACING UNITS — `md`'s 16 drew 128px on all\n * four sides, against 16px above and below for the unlabelled one.\n */\nexport const separatorBlockMargin = (\n  theme: Theme,\n  size: SeparatorSize,\n  margin: number | string | undefined,\n  isHorizontal: boolean,\n): string => {\n  const value = separatorMargin(size, margin);\n  const length = typeof value === 'string' ? value : rem(theme, value);\n  return isHorizontal ? `${length} 0` : `0 ${length}`;\n};\n\n/**\n * The rule's extent along its axis. It lands in `sx`, which reads a number of 1\n * or less as a fraction of the parent, and that stays so; any other number is\n * design px, through the type scale. Unset (or `0`/`''`) is the full run.\n */\nconst ruleLength = (theme: Theme, length: SeparatorProps['length']): string => {\n  if (!length) return '100%';\n  if (typeof length === 'string') return length;\n  return length <= 1 ? `${length * 100}%` : rem(theme, length);\n};\n\n/**\n * Whether a set `length` is a fraction of the parent rather than a fixed\n * extent: a number of 1 or less, as {@link ruleLength} reads it, or any string\n * that carries a percentage (`'50%'`, `'calc(50% - 8px)'`).\n */\nconst isRelativeLength = (length: number | string): boolean =>\n  typeof length === 'number' ? length <= 1 : length.includes('%');\n\n/**\n * What a labelled separator's rules add to {@link separatorStyles}, and whether\n * the group stretches to its parent (FUT-2617, FUT-2675).\n *\n * A labelled VERTICAL separator is a flex COLUMN — rule, label, rule — and with\n * no `length` each rule is `height: 100%` of a column whose height is its own\n * content: both resolved to 0px and only the label showed. So the column\n * stretches to the row it sits in and the two rules split what the label\n * leaves, equally (`flex: 1 1 0`), never shorter than a visible minimum.\n *\n * A RELATIVE `length` (FUT-2675) resolved against that same content-height\n * column and drew 0px too. It now means what it means on a horizontal labelled\n * separator: that fraction of the run. The column stretches as above and each\n * rule is `length` of it, with no grow and the default shrink, so rule, label\n * and rule never overflow the row; the same minimum holds, and is all a block\n * parent (where `align-self` does nothing) gets.\n *\n * An ABSOLUTE `length` is exactly that long: no grow, no shrink, no basis, and\n * the column keeps its content height, centred as before.\n *\n * Only the labelled branch reads this. The plain separator keeps\n * `separatorStyles` as is, since `flex: 1 1 0` there would widen a vertical\n * separator sitting in a row. The horizontal rules already shrink around the\n * label in their row, so they are left alone.\n */\nexport const labelledSeparatorLayout = (\n  theme: Theme,\n  isHorizontal: boolean,\n  length: SeparatorProps['length'],\n): { rule: CSSObject; group: CSSObject } => {\n  if (isHorizontal) return { rule: {}, group: {} };\n  if (length && !isRelativeLength(length)) return { rule: { flex: 'none' }, group: {} };\n  return {\n    // Unset, the rules share the run; relative, each is its own fraction of it.\n    // Either way a design 16px floor, as long as the gap beside the label at\n    // the default spacing, so a short or unsized row still shows two rules and\n    // not a word.\n    rule: { flex: length ? '0 1 auto' : '1 1 0', minHeight: rem(theme, 16) },\n    group: { alignSelf: 'stretch' },\n  };\n};\n\nexport const separatorStyles = (\n  theme: Theme,\n  { variant, orientation, size, color, blockMargin, length }: SeparatorStyleArgs,\n): CSSObject => {\n  const isHorizontal = orientation === 'horizontal';\n  // `xs` is the 1px hairline: it stays one device-independent pixel at every\n  // root size, like every other hairline in the package; heavier rules scale.\n  const thicknessPx = separatorThickness(size);\n  const thickness = thicknessPx === FIELD_BORDER_WIDTH ? `${FIELD_BORDER_WIDTH}px` : rem(theme, thicknessPx);\n  const along = ruleLength(theme, length);\n  const resolvedColor = color || theme.palette.divider;\n\n  const baseStyles: CSSObject = {\n    display: 'flex',\n    alignItems: 'center',\n    margin: blockMargin,\n    width: isHorizontal ? along : thickness,\n    height: isHorizontal ? thickness : along,\n    boxSizing: 'border-box',\n  };\n\n  if (variant === 'gradient') {\n    return {\n      ...baseStyles,\n      background: gradientBackground(variant, orientation, resolvedColor),\n    };\n  }\n\n  return {\n    ...baseStyles,\n    backgroundColor: 'transparent',\n    ...borderEdges(isHorizontal, thickness, borderStyleFor(variant), resolvedColor),\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-5KWHINO5.js → chunk-SLDSWQVE.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-IWEUSZY3.js";
 import {
   Separator
-} from "./chunk-XSSCSRUX.js";
+} from "./chunk-X53F33KA.js";
 import {
   Card,
   CardContent
@@ -217,4 +217,4 @@ export {
   SocialLoginButton,
   SocialLoginContainer
 };
-//# sourceMappingURL=chunk-5KWHINO5.js.map
+//# sourceMappingURL=chunk-SLDSWQVE.js.map

package/dist/{chunk-XSSCSRUX.js → chunk-X53F33KA.js}

@@ -2,7 +2,7 @@ import {
   labelledSeparatorLayout,
   separatorBlockMargin,
   separatorStyles
-} from "./chunk-SYNB3IIB.js";
+} from "./chunk-35443PF6.js";
 
 // src/components/layout/Separator/Separator.tsx
 import Box from "@mui/material/Box/index.js";
@@ -32,6 +32,8 @@ var Separator = ({
       {
         className,
         "data-testid": dataTestId,
+        role: "separator",
+        "aria-orientation": orientation,
         sx: {
           display: "flex",
           alignItems: "center",
@@ -71,4 +73,4 @@ var Separator = ({
 export {
   Separator
 };
-//# sourceMappingURL=chunk-XSSCSRUX.js.map
+//# sourceMappingURL=chunk-X53F33KA.js.map

package/dist/chunk-X53F33KA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Separator/Separator.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { labelledSeparatorLayout, separatorBlockMargin, separatorStyles } from './Separator.styles';\nimport type { SeparatorProps } from './Separator.types';\n\nexport const Separator: React.FC<SeparatorProps> = ({\n  variant = 'solid',\n  orientation = 'horizontal',\n  size = 'md',\n  color,\n  margin,\n  length,\n  children,\n  className,\n  'data-testid': dataTestId,\n}) => {\n  const theme = useTheme();\n  const isHorizontal = orientation === 'horizontal';\n  const blockMargin = separatorBlockMargin(theme, size, margin, isHorizontal);\n  const styles = separatorStyles(theme, { variant, orientation, size, color, blockMargin, length });\n\n  if (children) {\n    // The rules either side of the label sit INSIDE the row, which carries the\n    // margin; their own would add it a second time.\n    const layout = labelledSeparatorLayout(theme, isHorizontal, length);\n    const ruleStyles = { ...styles, margin: 0, ...layout.rule };\n\n    return (\n      <Box\n        className={className}\n        // The plain branch below has always carried the caller's hook; this one\n        // silently dropped it, so a LABELLED separator was the one variant no\n        // test could address except through its own words.\n        data-testid={dataTestId}\n        // The same semantics as the plain branch, on the group, as MUI's\n        // `Divider` does with children (FUT-2674). Without them a screen reader\n        // heard the label with nothing marking a boundary. The label stays\n        // inside, and the separator takes no name from it.\n        role=\"separator\"\n        aria-orientation={orientation}\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          margin: blockMargin,\n          flexDirection: isHorizontal ? 'row' : 'column',\n          gap: theme.spacing(2),\n          ...layout.group,\n        }}\n      >\n        <Box sx={ruleStyles} />\n        {/*\n          No background behind the label. The two rules and the words are a FLEX\n          ROW — the rules stop where the label starts — so there is nothing for a\n          background to mask, and painting one made the label a coloured pill on\n          every surface that is not `background.default`. On a white card it read\n          as a highlight nobody had asked for.\n        */}\n        <Typography\n          variant=\"body2\"\n          color=\"text.secondary\"\n          sx={{ flexShrink: 0, padding: theme.spacing(0, 1) }}\n        >\n          {children}\n        </Typography>\n        <Box sx={ruleStyles} />\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      className={className}\n      sx={styles}\n      role=\"separator\"\n      aria-orientation={orientation}\n      data-testid={dataTestId}\n    />\n  );\n};\n"],"mappings":";;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,gBAAgB;AACvB,SAAS,gBAAgB;AA6BnB,SAqBE,KArBF;AAvBC,IAAM,YAAsC,CAAC;AAAA,EAClD,UAAU;AAAA,EACV,cAAc;AAAA,EACd,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,eAAe,gBAAgB;AACrC,QAAM,cAAc,qBAAqB,OAAO,MAAM,QAAQ,YAAY;AAC1E,QAAM,SAAS,gBAAgB,OAAO,EAAE,SAAS,aAAa,MAAM,OAAO,aAAa,OAAO,CAAC;AAEhG,MAAI,UAAU;AAGZ,UAAM,SAAS,wBAAwB,OAAO,cAAc,MAAM;AAClE,UAAM,aAAa,EAAE,GAAG,QAAQ,QAAQ,GAAG,GAAG,OAAO,KAAK;AAE1D,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QAIA,eAAa;AAAA,QAKb,MAAK;AAAA,QACL,oBAAkB;AAAA,QAClB,IAAI;AAAA,UACF,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,eAAe,eAAe,QAAQ;AAAA,UACtC,KAAK,MAAM,QAAQ,CAAC;AAAA,UACpB,GAAG,OAAO;AAAA,QACZ;AAAA,QAEA;AAAA,8BAAC,OAAI,IAAI,YAAY;AAAA,UAQrB;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,IAAI,EAAE,YAAY,GAAG,SAAS,MAAM,QAAQ,GAAG,CAAC,EAAE;AAAA,cAEjD;AAAA;AAAA,UACH;AAAA,UACA,oBAAC,OAAI,IAAI,YAAY;AAAA;AAAA;AAAA,IACvB;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,oBAAkB;AAAA,MAClB,eAAa;AAAA;AAAA,EACf;AAEJ;","names":[]}

package/dist/layout/Separator.js

@@ -1,8 +1,8 @@
 import "../chunk-CMMPGAMJ.js";
 import {
   Separator
-} from "../chunk-XSSCSRUX.js";
-import "../chunk-SYNB3IIB.js";
+} from "../chunk-X53F33KA.js";
+import "../chunk-35443PF6.js";
 import "../chunk-PZBK3F52.js";
 import "../chunk-YKCAJ2TN.js";
 import "../chunk-PZ5AY32C.js";

package/dist/social-login-button.js

@@ -4,15 +4,15 @@ import {
   GoogleIcon,
   SocialLoginButton,
   SocialLoginContainer
-} from "./chunk-5KWHINO5.js";
+} from "./chunk-SLDSWQVE.js";
 import "./chunk-INGPH3YQ.js";
 import "./chunk-6GP2DOOO.js";
 import "./chunk-IWEUSZY3.js";
 import "./chunk-RB3X6CEE.js";
 import "./chunk-CYZZHWNK.js";
 import "./chunk-CMMPGAMJ.js";
-import "./chunk-XSSCSRUX.js";
-import "./chunk-SYNB3IIB.js";
+import "./chunk-X53F33KA.js";
+import "./chunk-35443PF6.js";
 import "./chunk-VUHLNYAE.js";
 import "./chunk-2GSIEDGN.js";
 import "./chunk-WN5PNP6F.js";

package/dist/types/components/layout/Separator/Separator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Separator/Separator.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAmE9C,CAAC"}
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Separator/Separator.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAyE9C,CAAC"}

package/dist/types/components/layout/Separator/Separator.styles.d.ts

@@ -18,15 +18,23 @@ type SeparatorStyleArgs = Required<Pick<SeparatorProps, 'variant' | 'orientation
 export declare const separatorBlockMargin: (theme: Theme, size: SeparatorSize, margin: number | string | undefined, isHorizontal: boolean) => string;
 /**
  * What a labelled separator's rules add to {@link separatorStyles}, and whether
- * the group stretches to its parent (FUT-2617).
+ * the group stretches to its parent (FUT-2617, FUT-2675).
  *
  * A labelled VERTICAL separator is a flex COLUMN — rule, label, rule — and with
  * no `length` each rule is `height: 100%` of a column whose height is its own
  * content: both resolved to 0px and only the label showed. So the column
  * stretches to the row it sits in and the two rules split what the label
- * leaves, equally (`flex: 1 1 0`), never shorter than a visible minimum. With a
- * `length` the rule is exactly that long: no grow, no shrink, no basis, and the
- * column keeps its content height, centred as before.
+ * leaves, equally (`flex: 1 1 0`), never shorter than a visible minimum.
+ *
+ * A RELATIVE `length` (FUT-2675) resolved against that same content-height
+ * column and drew 0px too. It now means what it means on a horizontal labelled
+ * separator: that fraction of the run. The column stretches as above and each
+ * rule is `length` of it, with no grow and the default shrink, so rule, label
+ * and rule never overflow the row; the same minimum holds, and is all a block
+ * parent (where `align-self` does nothing) gets.
+ *
+ * An ABSOLUTE `length` is exactly that long: no grow, no shrink, no basis, and
+ * the column keeps its content height, centred as before.
  *
  * Only the labelled branch reads this. The plain separator keeps
  * `separatorStyles` as is, since `flex: 1 1 0` there would widen a vertical

package/dist/types/components/layout/Separator/Separator.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Separator/Separator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,KAAK,EAEV,cAAc,EACd,aAAa,EAEd,MAAM,mBAAmB,CAAC;AAuB3B,+DAA+D;AAC/D,eAAO,MAAM,eAAe,GAC1B,MAAM,aAAa,EACnB,SAAS,MAAM,GAAG,MAAM,KACvB,MAAM,GAAG,MAAmD,CAAC;AAyDhE,KAAK,kBAAkB,GAAG,QAAQ,CAChC,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,aAAa,GAAG,MAAM,CAAC,CACzD,GACC,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,QAAQ,CAAC,GAAG;IACzC,+FAA+F;IAC/F,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB,GAC/B,OAAO,KAAK,EACZ,MAAM,aAAa,EACnB,QAAQ,MAAM,GAAG,MAAM,GAAG,SAAS,EACnC,cAAc,OAAO,KACpB,MAIF,CAAC;AAaF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,uBAAuB,GAClC,OAAO,KAAK,EACZ,cAAc,OAAO,EACrB,QAAQ,cAAc,CAAC,QAAQ,CAAC,KAC/B;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,SAAS,CAAA;CASrC,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,EACZ,4DAA4D,kBAAkB,KAC7E,SA8BF,CAAC"}
+{"version":3,"file":"Separator.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Separator/Separator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,KAAK,EAEV,cAAc,EACd,aAAa,EAEd,MAAM,mBAAmB,CAAC;AAuB3B,+DAA+D;AAC/D,eAAO,MAAM,eAAe,GAC1B,MAAM,aAAa,EACnB,SAAS,MAAM,GAAG,MAAM,KACvB,MAAM,GAAG,MAAmD,CAAC;AAyDhE,KAAK,kBAAkB,GAAG,QAAQ,CAChC,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,aAAa,GAAG,MAAM,CAAC,CACzD,GACC,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,QAAQ,CAAC,GAAG;IACzC,+FAA+F;IAC/F,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB,GAC/B,OAAO,KAAK,EACZ,MAAM,aAAa,EACnB,QAAQ,MAAM,GAAG,MAAM,GAAG,SAAS,EACnC,cAAc,OAAO,KACpB,MAIF,CAAC;AAqBF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,uBAAuB,GAClC,OAAO,KAAK,EACZ,cAAc,OAAO,EACrB,QAAQ,cAAc,CAAC,QAAQ,CAAC,KAC/B;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,SAAS,CAAA;CAWrC,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,EACZ,4DAA4D,kBAAkB,KAC7E,SA8BF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.39.12",
+  "version": "6.39.13",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/layout/Separator/Separator.styles.ts

@@ -128,17 +128,33 @@ const ruleLength = (theme: Theme, length: SeparatorProps['length']): string => {
   return length <= 1 ? `${length * 100}%` : rem(theme, length);
 };
 
+/**
+ * Whether a set `length` is a fraction of the parent rather than a fixed
+ * extent: a number of 1 or less, as {@link ruleLength} reads it, or any string
+ * that carries a percentage (`'50%'`, `'calc(50% - 8px)'`).
+ */
+const isRelativeLength = (length: number | string): boolean =>
+  typeof length === 'number' ? length <= 1 : length.includes('%');
+
 /**
  * What a labelled separator's rules add to {@link separatorStyles}, and whether
- * the group stretches to its parent (FUT-2617).
+ * the group stretches to its parent (FUT-2617, FUT-2675).
  *
  * A labelled VERTICAL separator is a flex COLUMN — rule, label, rule — and with
  * no `length` each rule is `height: 100%` of a column whose height is its own
  * content: both resolved to 0px and only the label showed. So the column
  * stretches to the row it sits in and the two rules split what the label
- * leaves, equally (`flex: 1 1 0`), never shorter than a visible minimum. With a
- * `length` the rule is exactly that long: no grow, no shrink, no basis, and the
- * column keeps its content height, centred as before.
+ * leaves, equally (`flex: 1 1 0`), never shorter than a visible minimum.
+ *
+ * A RELATIVE `length` (FUT-2675) resolved against that same content-height
+ * column and drew 0px too. It now means what it means on a horizontal labelled
+ * separator: that fraction of the run. The column stretches as above and each
+ * rule is `length` of it, with no grow and the default shrink, so rule, label
+ * and rule never overflow the row; the same minimum holds, and is all a block
+ * parent (where `align-self` does nothing) gets.
+ *
+ * An ABSOLUTE `length` is exactly that long: no grow, no shrink, no basis, and
+ * the column keeps its content height, centred as before.
  *
  * Only the labelled branch reads this. The plain separator keeps
  * `separatorStyles` as is, since `flex: 1 1 0` there would widen a vertical
@@ -151,11 +167,13 @@ export const labelledSeparatorLayout = (
   length: SeparatorProps['length'],
 ): { rule: CSSObject; group: CSSObject } => {
   if (isHorizontal) return { rule: {}, group: {} };
-  if (length) return { rule: { flex: 'none' }, group: {} };
+  if (length && !isRelativeLength(length)) return { rule: { flex: 'none' }, group: {} };
   return {
-    // A design 16px, as long as the gap beside the label at the default
-    // spacing, so a short or unsized row still shows two rules and not a word.
-    rule: { flex: '1 1 0', minHeight: rem(theme, 16) },
+    // Unset, the rules share the run; relative, each is its own fraction of it.
+    // Either way a design 16px floor, as long as the gap beside the label at
+    // the default spacing, so a short or unsized row still shows two rules and
+    // not a word.
+    rule: { flex: length ? '0 1 auto' : '1 1 0', minHeight: rem(theme, 16) },
     group: { alignSelf: 'stretch' },
   };
 };

package/src/components/layout/Separator/Separator.tsx

@@ -35,6 +35,12 @@ export const Separator: React.FC<SeparatorProps> = ({
         // silently dropped it, so a LABELLED separator was the one variant no
         // test could address except through its own words.
         data-testid={dataTestId}
+        // The same semantics as the plain branch, on the group, as MUI's
+        // `Divider` does with children (FUT-2674). Without them a screen reader
+        // heard the label with nothing marking a boundary. The label stays
+        // inside, and the separator takes no name from it.
+        role="separator"
+        aria-orientation={orientation}
         sx={{
           display: 'flex',
           alignItems: 'center',

package/dist/chunk-SYNB3IIB.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/layout/Separator/Separator.styles.ts"],"sourcesContent":["import type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type {\n  SeparatorOrientation,\n  SeparatorProps,\n  SeparatorSize,\n  SeparatorVariant,\n} from './Separator.types';\nimport { FIELD_BORDER_WIDTH } from '../../../tokens/field-height.core';\nimport { rem } from '../../../tokens/relative';\n\nconst THICKNESS_PX: Record<SeparatorSize, number> = {\n  xs: 1,\n  sm: 2,\n  md: 3,\n  lg: 4,\n  xl: 6,\n};\n\nconst MARGIN_PX: Record<SeparatorSize, number> = {\n  xs: 4,\n  sm: 8,\n  md: 16,\n  lg: 24,\n  xl: 32,\n};\n\nconst separatorThickness = (size: SeparatorSize): number =>\n  THICKNESS_PX[size] ?? THICKNESS_PX.md;\n\n/** An explicit `margin` wins; otherwise the size picks one. */\nexport const separatorMargin = (\n  size: SeparatorSize,\n  margin?: number | string,\n): number | string => margin ?? MARGIN_PX[size] ?? MARGIN_PX.md;\n\n// `gradient` paints a background rather than a border, so it draws its line as a\n// solid border of zero visual consequence.\nconst borderStyleFor = (variant: SeparatorVariant): 'dashed' | 'dotted' | 'solid' => {\n  switch (variant) {\n    case 'dashed':\n      return 'dashed';\n    case 'dotted':\n      return 'dotted';\n    default:\n      return 'solid';\n  }\n};\n\nconst gradientBackground = (\n  variant: SeparatorVariant,\n  orientation: SeparatorOrientation,\n  color: string,\n): string | undefined => {\n  if (variant !== 'gradient') return undefined;\n  const angle = orientation === 'horizontal' ? '90deg' : '180deg';\n  return `linear-gradient(${angle}, transparent 0%, ${color} 50%, transparent 100%)`;\n};\n\n// Only the leading edge carries the rule; the other three are zeroed explicitly so\n// a parent's border shorthand cannot leak through.\nconst borderEdges = (\n  isHorizontal: boolean,\n  thickness: string,\n  style: 'dashed' | 'dotted' | 'solid',\n  color: string,\n): CSSObject => {\n  const leading = isHorizontal ? 'Top' : 'Left';\n  const blank: CSSObject = {\n    borderTopWidth: 0,\n    borderBottomWidth: 0,\n    borderLeftWidth: 0,\n    borderRightWidth: 0,\n    borderTopStyle: 'none',\n    borderBottomStyle: 'none',\n    borderLeftStyle: 'none',\n    borderRightStyle: 'none',\n    borderTopColor: 'transparent',\n    borderBottomColor: 'transparent',\n    borderLeftColor: 'transparent',\n    borderRightColor: 'transparent',\n  };\n\n  return {\n    ...blank,\n    [`border${leading}Width`]: thickness,\n    [`border${leading}Style`]: style,\n    [`border${leading}Color`]: color,\n  };\n};\n\ntype SeparatorStyleArgs = Required<\n  Pick<SeparatorProps, 'variant' | 'orientation' | 'size'>\n> &\n  Pick<SeparatorProps, 'color' | 'length'> & {\n    /** From {@link separatorBlockMargin}, which both the plain and the labelled separator read. */\n    blockMargin: string;\n  };\n\n/**\n * The separator's margin, on the axis it separates along only: above and below\n * a horizontal rule, either side of a vertical one. A margin given as a string\n * carries its own units; a number is design px, through the type scale.\n *\n * The LABELLED separator uses this too. It used to hand the number straight to\n * `sx.margin`, where a number is SPACING UNITS — `md`'s 16 drew 128px on all\n * four sides, against 16px above and below for the unlabelled one.\n */\nexport const separatorBlockMargin = (\n  theme: Theme,\n  size: SeparatorSize,\n  margin: number | string | undefined,\n  isHorizontal: boolean,\n): string => {\n  const value = separatorMargin(size, margin);\n  const length = typeof value === 'string' ? value : rem(theme, value);\n  return isHorizontal ? `${length} 0` : `0 ${length}`;\n};\n\n/**\n * The rule's extent along its axis. It lands in `sx`, which reads a number of 1\n * or less as a fraction of the parent, and that stays so; any other number is\n * design px, through the type scale. Unset (or `0`/`''`) is the full run.\n */\nconst ruleLength = (theme: Theme, length: SeparatorProps['length']): string => {\n  if (!length) return '100%';\n  if (typeof length === 'string') return length;\n  return length <= 1 ? `${length * 100}%` : rem(theme, length);\n};\n\n/**\n * What a labelled separator's rules add to {@link separatorStyles}, and whether\n * the group stretches to its parent (FUT-2617).\n *\n * A labelled VERTICAL separator is a flex COLUMN — rule, label, rule — and with\n * no `length` each rule is `height: 100%` of a column whose height is its own\n * content: both resolved to 0px and only the label showed. So the column\n * stretches to the row it sits in and the two rules split what the label\n * leaves, equally (`flex: 1 1 0`), never shorter than a visible minimum. With a\n * `length` the rule is exactly that long: no grow, no shrink, no basis, and the\n * column keeps its content height, centred as before.\n *\n * Only the labelled branch reads this. The plain separator keeps\n * `separatorStyles` as is, since `flex: 1 1 0` there would widen a vertical\n * separator sitting in a row. The horizontal rules already shrink around the\n * label in their row, so they are left alone.\n */\nexport const labelledSeparatorLayout = (\n  theme: Theme,\n  isHorizontal: boolean,\n  length: SeparatorProps['length'],\n): { rule: CSSObject; group: CSSObject } => {\n  if (isHorizontal) return { rule: {}, group: {} };\n  if (length) return { rule: { flex: 'none' }, group: {} };\n  return {\n    // A design 16px, as long as the gap beside the label at the default\n    // spacing, so a short or unsized row still shows two rules and not a word.\n    rule: { flex: '1 1 0', minHeight: rem(theme, 16) },\n    group: { alignSelf: 'stretch' },\n  };\n};\n\nexport const separatorStyles = (\n  theme: Theme,\n  { variant, orientation, size, color, blockMargin, length }: SeparatorStyleArgs,\n): CSSObject => {\n  const isHorizontal = orientation === 'horizontal';\n  // `xs` is the 1px hairline: it stays one device-independent pixel at every\n  // root size, like every other hairline in the package; heavier rules scale.\n  const thicknessPx = separatorThickness(size);\n  const thickness = thicknessPx === FIELD_BORDER_WIDTH ? `${FIELD_BORDER_WIDTH}px` : rem(theme, thicknessPx);\n  const along = ruleLength(theme, length);\n  const resolvedColor = color || theme.palette.divider;\n\n  const baseStyles: CSSObject = {\n    display: 'flex',\n    alignItems: 'center',\n    margin: blockMargin,\n    width: isHorizontal ? along : thickness,\n    height: isHorizontal ? thickness : along,\n    boxSizing: 'border-box',\n  };\n\n  if (variant === 'gradient') {\n    return {\n      ...baseStyles,\n      background: gradientBackground(variant, orientation, resolvedColor),\n    };\n  }\n\n  return {\n    ...baseStyles,\n    backgroundColor: 'transparent',\n    ...borderEdges(isHorizontal, thickness, borderStyleFor(variant), resolvedColor),\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-XSSCSRUX.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/layout/Separator/Separator.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { labelledSeparatorLayout, separatorBlockMargin, separatorStyles } from './Separator.styles';\nimport type { SeparatorProps } from './Separator.types';\n\nexport const Separator: React.FC<SeparatorProps> = ({\n  variant = 'solid',\n  orientation = 'horizontal',\n  size = 'md',\n  color,\n  margin,\n  length,\n  children,\n  className,\n  'data-testid': dataTestId,\n}) => {\n  const theme = useTheme();\n  const isHorizontal = orientation === 'horizontal';\n  const blockMargin = separatorBlockMargin(theme, size, margin, isHorizontal);\n  const styles = separatorStyles(theme, { variant, orientation, size, color, blockMargin, length });\n\n  if (children) {\n    // The rules either side of the label sit INSIDE the row, which carries the\n    // margin; their own would add it a second time.\n    const layout = labelledSeparatorLayout(theme, isHorizontal, length);\n    const ruleStyles = { ...styles, margin: 0, ...layout.rule };\n\n    return (\n      <Box\n        className={className}\n        // The plain branch below has always carried the caller's hook; this one\n        // silently dropped it, so a LABELLED separator was the one variant no\n        // test could address except through its own words.\n        data-testid={dataTestId}\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          margin: blockMargin,\n          flexDirection: isHorizontal ? 'row' : 'column',\n          gap: theme.spacing(2),\n          ...layout.group,\n        }}\n      >\n        <Box sx={ruleStyles} />\n        {/*\n          No background behind the label. The two rules and the words are a FLEX\n          ROW — the rules stop where the label starts — so there is nothing for a\n          background to mask, and painting one made the label a coloured pill on\n          every surface that is not `background.default`. On a white card it read\n          as a highlight nobody had asked for.\n        */}\n        <Typography\n          variant=\"body2\"\n          color=\"text.secondary\"\n          sx={{ flexShrink: 0, padding: theme.spacing(0, 1) }}\n        >\n          {children}\n        </Typography>\n        <Box sx={ruleStyles} />\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      className={className}\n      sx={styles}\n      role=\"separator\"\n      aria-orientation={orientation}\n      data-testid={dataTestId}\n    />\n  );\n};\n"],"mappings":";;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,gBAAgB;AACvB,SAAS,gBAAgB;AA6BnB,SAeE,KAfF;AAvBC,IAAM,YAAsC,CAAC;AAAA,EAClD,UAAU;AAAA,EACV,cAAc;AAAA,EACd,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,eAAe,gBAAgB;AACrC,QAAM,cAAc,qBAAqB,OAAO,MAAM,QAAQ,YAAY;AAC1E,QAAM,SAAS,gBAAgB,OAAO,EAAE,SAAS,aAAa,MAAM,OAAO,aAAa,OAAO,CAAC;AAEhG,MAAI,UAAU;AAGZ,UAAM,SAAS,wBAAwB,OAAO,cAAc,MAAM;AAClE,UAAM,aAAa,EAAE,GAAG,QAAQ,QAAQ,GAAG,GAAG,OAAO,KAAK;AAE1D,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QAIA,eAAa;AAAA,QACb,IAAI;AAAA,UACF,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,eAAe,eAAe,QAAQ;AAAA,UACtC,KAAK,MAAM,QAAQ,CAAC;AAAA,UACpB,GAAG,OAAO;AAAA,QACZ;AAAA,QAEA;AAAA,8BAAC,OAAI,IAAI,YAAY;AAAA,UAQrB;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,IAAI,EAAE,YAAY,GAAG,SAAS,MAAM,QAAQ,GAAG,CAAC,EAAE;AAAA,cAEjD;AAAA;AAAA,UACH;AAAA,UACA,oBAAC,OAAI,IAAI,YAAY;AAAA;AAAA;AAAA,IACvB;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,oBAAkB;AAAA,MAClB,eAAa;AAAA;AAAA,EACf;AAEJ;","names":[]}