@motion-proto/live-tokens 0.70.0 → 0.72.0

package/src/live-tokens/data/themes/halloween.json

@@ -3554,7 +3554,6 @@
         "--sectiondivider-lg-title-font-size": "--font-size-5xl",
         "--sectiondivider-lg-title-line-height": "--line-height-normal",
         "--sectiondivider-lg-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-lg-title-outline-width": "--border-width-4",
         "--sectiondivider-lg-description-font-family": "--font-sans",
         "--sectiondivider-lg-description-font-weight": "--font-weight-medium",
         "--sectiondivider-lg-description-font-size": "--font-size-lg",
@@ -3576,14 +3575,12 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
         "--sectiondivider-md-title-font-size": "--font-size-4xl",
         "--sectiondivider-md-title-line-height": "--line-height-normal",
         "--sectiondivider-md-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-md-title-outline-width": "--border-width-4",
         "--sectiondivider-md-description-font-family": "--font-sans",
         "--sectiondivider-md-description-font-weight": "--font-weight-medium",
         "--sectiondivider-md-description-font-size": "--font-size-lg",
@@ -3605,14 +3602,12 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
         "--sectiondivider-sm-title-font-size": "--font-size-3xl",
         "--sectiondivider-sm-title-line-height": "--line-height-normal",
         "--sectiondivider-sm-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-sm-title-outline-width": "--border-width-4",
         "--sectiondivider-sm-description-font-family": "--font-sans",
         "--sectiondivider-sm-description-font-weight": "--font-weight-medium",
         "--sectiondivider-sm-description-font-size": "--font-size-5xl",
@@ -3634,7 +3629,6 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },
@@ -4075,5 +4069,5 @@
       }
     }
   },
-  "componentSchemaVersion": 25
+  "componentSchemaVersion": 26
 }

package/src/live-tokens/data/themes/midnight-study.json

@@ -3573,7 +3573,6 @@
         "--sectiondivider-lg-title-font-size": "--font-size-5xl",
         "--sectiondivider-lg-title-line-height": "--line-height-normal",
         "--sectiondivider-lg-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-lg-title-outline-width": "--border-width-4",
         "--sectiondivider-lg-description-font-family": "--font-sans",
         "--sectiondivider-lg-description-font-weight": "--font-weight-medium",
         "--sectiondivider-lg-description-font-size": "--font-size-lg",
@@ -3595,14 +3594,12 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
         "--sectiondivider-md-title-font-size": "--font-size-4xl",
         "--sectiondivider-md-title-line-height": "--line-height-normal",
         "--sectiondivider-md-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-md-title-outline-width": "--border-width-4",
         "--sectiondivider-md-description-font-family": "--font-sans",
         "--sectiondivider-md-description-font-weight": "--font-weight-medium",
         "--sectiondivider-md-description-font-size": "--font-size-lg",
@@ -3624,14 +3621,12 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
         "--sectiondivider-sm-title-font-size": "--font-size-3xl",
         "--sectiondivider-sm-title-line-height": "--line-height-normal",
         "--sectiondivider-sm-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-sm-title-outline-width": "--border-width-4",
         "--sectiondivider-sm-description-font-family": "--font-sans",
         "--sectiondivider-sm-description-font-weight": "--font-weight-medium",
         "--sectiondivider-sm-description-font-size": "--font-size-5xl",
@@ -3653,7 +3648,6 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },
@@ -4094,5 +4088,5 @@
       }
     }
   },
-  "componentSchemaVersion": 25
+  "componentSchemaVersion": 26
 }

package/src/live-tokens/data/themes/ocean.json

@@ -3514,7 +3514,6 @@
         "--sectiondivider-lg-title-font-size": "--font-size-5xl",
         "--sectiondivider-lg-title-line-height": "--line-height-normal",
         "--sectiondivider-lg-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-lg-title-outline-width": "--border-width-4",
         "--sectiondivider-lg-description-font-family": "--font-sans",
         "--sectiondivider-lg-description-font-weight": "--font-weight-medium",
         "--sectiondivider-lg-description-font-size": "--font-size-lg",
@@ -3536,14 +3535,12 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
         "--sectiondivider-md-title-font-size": "--font-size-4xl",
         "--sectiondivider-md-title-line-height": "--line-height-normal",
         "--sectiondivider-md-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-md-title-outline-width": "--border-width-4",
         "--sectiondivider-md-description-font-family": "--font-sans",
         "--sectiondivider-md-description-font-weight": "--font-weight-medium",
         "--sectiondivider-md-description-font-size": "--font-size-lg",
@@ -3565,14 +3562,12 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
         "--sectiondivider-sm-title-font-size": "--font-size-3xl",
         "--sectiondivider-sm-title-line-height": "--line-height-normal",
         "--sectiondivider-sm-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-sm-title-outline-width": "--border-width-4",
         "--sectiondivider-sm-description-font-family": "--font-sans",
         "--sectiondivider-sm-description-font-weight": "--font-weight-medium",
         "--sectiondivider-sm-description-font-size": "--font-size-5xl",
@@ -3594,7 +3589,6 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },
@@ -4035,5 +4029,5 @@
       }
     }
   },
-  "componentSchemaVersion": 25
+  "componentSchemaVersion": 26
 }

package/src/live-tokens/data/themes/royal-velvet.json

@@ -3545,7 +3545,6 @@
         "--sectiondivider-lg-title-font-size": "--font-size-5xl",
         "--sectiondivider-lg-title-line-height": "--line-height-normal",
         "--sectiondivider-lg-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-lg-title-outline-width": "--border-width-4",
         "--sectiondivider-lg-description-font-family": "--font-sans",
         "--sectiondivider-lg-description-font-weight": "--font-weight-medium",
         "--sectiondivider-lg-description-font-size": "--font-size-lg",
@@ -3567,14 +3566,12 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
         "--sectiondivider-md-title-font-size": "--font-size-4xl",
         "--sectiondivider-md-title-line-height": "--line-height-normal",
         "--sectiondivider-md-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-md-title-outline-width": "--border-width-4",
         "--sectiondivider-md-description-font-family": "--font-sans",
         "--sectiondivider-md-description-font-weight": "--font-weight-medium",
         "--sectiondivider-md-description-font-size": "--font-size-lg",
@@ -3596,14 +3593,12 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
         "--sectiondivider-sm-title-font-size": "--font-size-3xl",
         "--sectiondivider-sm-title-line-height": "--line-height-normal",
         "--sectiondivider-sm-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-sm-title-outline-width": "--border-width-4",
         "--sectiondivider-sm-description-font-family": "--font-sans",
         "--sectiondivider-sm-description-font-weight": "--font-weight-medium",
         "--sectiondivider-sm-description-font-size": "--font-size-5xl",
@@ -3625,7 +3620,6 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },
@@ -4066,5 +4060,5 @@
       }
     }
   },
-  "componentSchemaVersion": 25
+  "componentSchemaVersion": 26
 }

package/src/live-tokens/data/themes/sketchy.json

@@ -3528,7 +3528,6 @@
         "--sectiondivider-lg-title-font-size": "--font-size-5xl",
         "--sectiondivider-lg-title-line-height": "--line-height-normal",
         "--sectiondivider-lg-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-lg-title-outline-width": "--border-width-4",
         "--sectiondivider-lg-description-font-family": "--font-sans",
         "--sectiondivider-lg-description-font-weight": "--font-weight-medium",
         "--sectiondivider-lg-description-font-size": "--font-size-lg",
@@ -3550,14 +3549,12 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
         "--sectiondivider-md-title-font-size": "--font-size-4xl",
         "--sectiondivider-md-title-line-height": "--line-height-normal",
         "--sectiondivider-md-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-md-title-outline-width": "--border-width-4",
         "--sectiondivider-md-description-font-family": "--font-sans",
         "--sectiondivider-md-description-font-weight": "--font-weight-medium",
         "--sectiondivider-md-description-font-size": "--font-size-lg",
@@ -3579,14 +3576,12 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
         "--sectiondivider-sm-title-font-size": "--font-size-3xl",
         "--sectiondivider-sm-title-line-height": "--line-height-normal",
         "--sectiondivider-sm-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-sm-title-outline-width": "--border-width-4",
         "--sectiondivider-sm-description-font-family": "--font-sans",
         "--sectiondivider-sm-description-font-weight": "--font-weight-medium",
         "--sectiondivider-sm-description-font-size": "--font-size-5xl",
@@ -3608,7 +3603,6 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },
@@ -4049,5 +4043,5 @@
       }
     }
   },
-  "componentSchemaVersion": 25
+  "componentSchemaVersion": 26
 }

package/src/live-tokens/data/themes/spring-meadow.json

@@ -3501,7 +3501,6 @@
         "--sectiondivider-lg-title-font-size": "--font-size-5xl",
         "--sectiondivider-lg-title-line-height": "--line-height-normal",
         "--sectiondivider-lg-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-lg-title-outline-width": "--border-width-4",
         "--sectiondivider-lg-description-font-family": "--font-sans",
         "--sectiondivider-lg-description-font-weight": "--font-weight-medium",
         "--sectiondivider-lg-description-font-size": "--font-size-lg",
@@ -3523,14 +3522,12 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
         "--sectiondivider-md-title-font-size": "--font-size-4xl",
         "--sectiondivider-md-title-line-height": "--line-height-normal",
         "--sectiondivider-md-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-md-title-outline-width": "--border-width-4",
         "--sectiondivider-md-description-font-family": "--font-sans",
         "--sectiondivider-md-description-font-weight": "--font-weight-medium",
         "--sectiondivider-md-description-font-size": "--font-size-lg",
@@ -3552,14 +3549,12 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
         "--sectiondivider-sm-title-font-size": "--font-size-3xl",
         "--sectiondivider-sm-title-line-height": "--line-height-normal",
         "--sectiondivider-sm-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-sm-title-outline-width": "--border-width-4",
         "--sectiondivider-sm-description-font-family": "--font-sans",
         "--sectiondivider-sm-description-font-weight": "--font-weight-medium",
         "--sectiondivider-sm-description-font-size": "--font-size-5xl",
@@ -3581,7 +3576,6 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },
@@ -4022,5 +4016,5 @@
       }
     }
   },
-  "componentSchemaVersion": 25
+  "componentSchemaVersion": 26
 }

package/src/live-tokens/data/themes/sunset.json

@@ -3553,7 +3553,6 @@
         "--sectiondivider-lg-title-font-size": "--font-size-5xl",
         "--sectiondivider-lg-title-line-height": "--line-height-normal",
         "--sectiondivider-lg-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-lg-title-outline-width": "--border-width-4",
         "--sectiondivider-lg-description-font-family": "--font-sans",
         "--sectiondivider-lg-description-font-weight": "--font-weight-medium",
         "--sectiondivider-lg-description-font-size": "--font-size-lg",
@@ -3575,14 +3574,12 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
         "--sectiondivider-md-title-font-size": "--font-size-4xl",
         "--sectiondivider-md-title-line-height": "--line-height-normal",
         "--sectiondivider-md-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-md-title-outline-width": "--border-width-4",
         "--sectiondivider-md-description-font-family": "--font-sans",
         "--sectiondivider-md-description-font-weight": "--font-weight-medium",
         "--sectiondivider-md-description-font-size": "--font-size-lg",
@@ -3604,14 +3601,12 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
         "--sectiondivider-sm-title-font-size": "--font-size-3xl",
         "--sectiondivider-sm-title-line-height": "--line-height-normal",
         "--sectiondivider-sm-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-sm-title-outline-width": "--border-width-4",
         "--sectiondivider-sm-description-font-family": "--font-sans",
         "--sectiondivider-sm-description-font-weight": "--font-weight-medium",
         "--sectiondivider-sm-description-font-size": "--font-size-5xl",
@@ -3633,7 +3628,6 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },
@@ -4074,5 +4068,5 @@
       }
     }
   },
-  "componentSchemaVersion": 25
+  "componentSchemaVersion": 26
 }

package/src/system/components/SectionDivider.svelte

@@ -1,8 +1,4 @@
 <script lang="ts">
-  import { run } from 'svelte/legacy';
-
-  import { onMount, tick } from 'svelte';
-
   /** Size variant. Each variant owns everything that defines its style:
    *  typography, geometry, colors AND the intrinsic display properties
    *  (alignment, eyebrow visibility, description visibility, hairline
@@ -23,69 +19,6 @@
     eyebrow = undefined,
     variant = 'md',
   }: Props = $props();
-
-  let svgEl: SVGSVGElement | undefined = $state();
-  let svgTextEl: SVGTextElement | undefined = $state();
-  let svgW = $state(0);
-  let svgH = $state(0);
-  let svgX = $state(0);
-  let svgY = $state(0);
-
-  // feMorphology radius and feFlood flood-color are non-presentation attributes
-  // and can't read CSS vars. Read resolved values off the SVG element and push
-  // them onto the filter primitives, refreshing on doc-level inline-var changes.
-  let outlineRadius = $state('0');
-  let outlineColor = $state('#000');
-  const filterId = `sd-outline-${Math.random().toString(36).slice(2, 10)}`;
-
-  function syncFilter(): void {
-    if (!svgEl) return;
-    const cs = getComputedStyle(svgEl);
-    const wPx = parseFloat(cs.getPropertyValue('--_divider-title-outline-width'));
-    outlineRadius = String(Number.isFinite(wPx) ? wPx / 2 : 0);
-    const c = cs.getPropertyValue('--_divider-title-outline-color').trim();
-    outlineColor = c || '#000';
-  }
-
-  function measure(): void {
-    if (!svgTextEl) return;
-    const bb = svgTextEl.getBBox();
-    svgX = bb.x;
-    svgY = bb.y;
-    svgW = Math.ceil(bb.width);
-    svgH = Math.ceil(bb.height);
-  }
-
-  run(() => {
-    if (title) {
-      tick().then(() => { measure(); syncFilter(); });
-    }
-  });
-
-  onMount(() => {
-    let mounted = true;
-    const sync = () => { measure(); syncFilter(); };
-    measure();
-    syncFilter();
-    const obs = new MutationObserver(sync);
-    obs.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
-
-    // A font-family variable changes before its webfont necessarily finishes
-    // loading. Re-run getBBox when the real face becomes available so the SVG
-    // viewBox and outline do not stay sized for the fallback font.
-    const fonts = document.fonts;
-    const onFontsLoaded = () => {
-      if (mounted) sync();
-    };
-    fonts?.addEventListener('loadingdone', onFontsLoaded);
-    void fonts?.ready.then(onFontsLoaded);
-
-    return () => {
-      mounted = false;
-      obs.disconnect();
-      fonts?.removeEventListener('loadingdone', onFontsLoaded);
-    };
-  });
 </script>
 
 <!-- In dev, render every variant-controlled block so the editor can flip
@@ -101,31 +34,7 @@
     <div class="title-row">
       <span class="sd-hairline sd-hairline--side sd-hairline-through-label" aria-hidden="true"></span>
       <span class="title-inline">
-        <svg
-          bind:this={svgEl}
-          class="divider-label"
-          width={svgW || undefined}
-          height={svgH || undefined}
-          viewBox={svgW && svgH ? `${svgX} ${svgY} ${svgW} ${svgH}` : undefined}
-          aria-label={title}
-          role="img"
-        >
-          <defs>
-            <filter id={filterId} x="-50%" y="-50%" width="200%" height="200%">
-              <feMorphology in="SourceAlpha" operator="dilate" radius={outlineRadius} result="dilated" />
-              <feFlood flood-color={outlineColor} result="color" />
-              <feComposite in="color" in2="dilated" operator="in" result="outline" />
-              <feComposite in="SourceGraphic" in2="outline" operator="over" />
-            </filter>
-          </defs>
-          <text
-            bind:this={svgTextEl}
-            x="0"
-            y="0"
-            dominant-baseline="hanging"
-            filter="url(#{filterId})"
-          >{title}</text>
-        </svg>
+        <span class="divider-label">{title}</span>
       </span>
       <span class="sd-hairline sd-hairline--side sd-hairline-through-label" aria-hidden="true"></span>
     </div>
@@ -153,31 +62,7 @@
       <span class="sd-hairline sd-hairline--side sd-hairline-through-label" aria-hidden="true"></span>
       <!--END_PRUNE-->
       <span class="title-inline">
-        <svg
-          bind:this={svgEl}
-          class="divider-label"
-          width={svgW || undefined}
-          height={svgH || undefined}
-          viewBox={svgW && svgH ? `${svgX} ${svgY} ${svgW} ${svgH}` : undefined}
-          aria-label={title}
-          role="img"
-        >
-          <defs>
-            <filter id={filterId} x="-50%" y="-50%" width="200%" height="200%">
-              <feMorphology in="SourceAlpha" operator="dilate" radius={outlineRadius} result="dilated" />
-              <feFlood flood-color={outlineColor} result="color" />
-              <feComposite in="color" in2="dilated" operator="in" result="outline" />
-              <feComposite in="SourceGraphic" in2="outline" operator="over" />
-            </filter>
-          </defs>
-          <text
-            bind:this={svgTextEl}
-            x="0"
-            y="0"
-            dominant-baseline="hanging"
-            filter="url(#{filterId})"
-          >{title}</text>
-        </svg>
+        <span class="divider-label">{title}</span>
       </span>
       <!--PRUNE_FOR sectiondivider hairline == through-label default=none-->
       <span class="sd-hairline sd-hairline--side sd-hairline-through-label" aria-hidden="true"></span>
@@ -221,7 +106,6 @@
     --sectiondivider-lg-title-font-size: var(--font-size-5xl);
     --sectiondivider-lg-title-line-height: var(--line-height-normal);
     --sectiondivider-lg-title-letter-spacing: var(--letter-spacing-normal);
-    --sectiondivider-lg-title-outline-width: var(--border-width-4);
     --sectiondivider-lg-description-font-family: var(--font-sans);
     --sectiondivider-lg-description-font-weight: var(--font-weight-medium);
     --sectiondivider-lg-description-font-size: var(--font-size-lg);
@@ -243,7 +127,6 @@
     --sectiondivider-lg-description: var(--text-alternate);
     --sectiondivider-lg-eyebrow: var(--text-brand);
     --sectiondivider-lg-border: var(--color-transparent);
-    --sectiondivider-lg-title-outline-color: var(--color-transparent);
     --sectiondivider-lg-hairline-color: var(--border-brand-medium);
 
     /* Medium */
@@ -252,7 +135,6 @@
     --sectiondivider-md-title-font-size: var(--font-size-4xl);
     --sectiondivider-md-title-line-height: var(--line-height-normal);
     --sectiondivider-md-title-letter-spacing: var(--letter-spacing-normal);
-    --sectiondivider-md-title-outline-width: var(--border-width-4);
     --sectiondivider-md-description-font-family: var(--font-sans);
     --sectiondivider-md-description-font-weight: var(--font-weight-medium);
     --sectiondivider-md-description-font-size: var(--font-size-lg);
@@ -274,7 +156,6 @@
     --sectiondivider-md-description: var(--text-secondary);
     --sectiondivider-md-eyebrow: var(--text-tertiary);
     --sectiondivider-md-border: var(--color-transparent);
-    --sectiondivider-md-title-outline-color: var(--color-transparent);
     --sectiondivider-md-hairline-color: var(--border-brand-medium);
 
     /* Small */
@@ -283,7 +164,6 @@
     --sectiondivider-sm-title-font-size: var(--font-size-3xl);
     --sectiondivider-sm-title-line-height: var(--line-height-normal);
     --sectiondivider-sm-title-letter-spacing: var(--letter-spacing-normal);
-    --sectiondivider-sm-title-outline-width: var(--border-width-4);
     --sectiondivider-sm-description-font-family: var(--font-sans);
     --sectiondivider-sm-description-font-weight: var(--font-weight-medium);
     --sectiondivider-sm-description-font-size: var(--font-size-5xl);
@@ -305,7 +185,6 @@
     --sectiondivider-sm-description: var(--text-secondary);
     --sectiondivider-sm-eyebrow: var(--text-tertiary);
     --sectiondivider-sm-border: var(--color-transparent);
-    --sectiondivider-sm-title-outline-color: var(--color-transparent);
     --sectiondivider-sm-hairline-color: color-mix(in srgb, var(--border-brand-medium) 50%, transparent);
 
     /* Intrinsic defaults. These keys cascade to `:root` via the editor's
@@ -361,7 +240,6 @@
     --_divider-title-font-size: var(--sectiondivider-lg-title-font-size);
     --_divider-title-line-height: var(--sectiondivider-lg-title-line-height);
     --_divider-title-letter-spacing: var(--sectiondivider-lg-title-letter-spacing);
-    --_divider-title-outline-width: var(--sectiondivider-lg-title-outline-width);
     --_divider-description-font-family: var(--sectiondivider-lg-description-font-family);
     --_divider-description-font-weight: var(--sectiondivider-lg-description-font-weight);
     --_divider-description-font-size: var(--sectiondivider-lg-description-font-size);
@@ -383,7 +261,6 @@
     --_divider-description: var(--sectiondivider-lg-description);
     --_divider-eyebrow: var(--sectiondivider-lg-eyebrow);
     --_divider-border: var(--sectiondivider-lg-border);
-    --_divider-title-outline-color: var(--sectiondivider-lg-title-outline-color);
     --_divider-hairline-color: var(--sectiondivider-lg-hairline-color);
     --_divider-align: var(--sectiondivider-lg-align);
     --_divider-eyebrow-display: var(--sectiondivider-lg-eyebrow-display);
@@ -398,7 +275,6 @@
     --_divider-title-font-size: var(--sectiondivider-md-title-font-size);
     --_divider-title-line-height: var(--sectiondivider-md-title-line-height);
     --_divider-title-letter-spacing: var(--sectiondivider-md-title-letter-spacing);
-    --_divider-title-outline-width: var(--sectiondivider-md-title-outline-width);
     --_divider-description-font-family: var(--sectiondivider-md-description-font-family);
     --_divider-description-font-weight: var(--sectiondivider-md-description-font-weight);
     --_divider-description-font-size: var(--sectiondivider-md-description-font-size);
@@ -420,7 +296,6 @@
     --_divider-description: var(--sectiondivider-md-description);
     --_divider-eyebrow: var(--sectiondivider-md-eyebrow);
     --_divider-border: var(--sectiondivider-md-border);
-    --_divider-title-outline-color: var(--sectiondivider-md-title-outline-color);
     --_divider-hairline-color: var(--sectiondivider-md-hairline-color);
     --_divider-align: var(--sectiondivider-md-align);
     --_divider-eyebrow-display: var(--sectiondivider-md-eyebrow-display);
@@ -435,7 +310,6 @@
     --_divider-title-font-size: var(--sectiondivider-sm-title-font-size);
     --_divider-title-line-height: var(--sectiondivider-sm-title-line-height);
     --_divider-title-letter-spacing: var(--sectiondivider-sm-title-letter-spacing);
-    --_divider-title-outline-width: var(--sectiondivider-sm-title-outline-width);
     --_divider-description-font-family: var(--sectiondivider-sm-description-font-family);
     --_divider-description-font-weight: var(--sectiondivider-sm-description-font-weight);
     --_divider-description-font-size: var(--sectiondivider-sm-description-font-size);
@@ -457,7 +331,6 @@
     --_divider-description: var(--sectiondivider-sm-description);
     --_divider-eyebrow: var(--sectiondivider-sm-eyebrow);
     --_divider-border: var(--sectiondivider-sm-border);
-    --_divider-title-outline-color: var(--sectiondivider-sm-title-outline-color);
     --_divider-hairline-color: var(--sectiondivider-sm-hairline-color);
     --_divider-align: var(--sectiondivider-sm-align);
     --_divider-eyebrow-display: var(--sectiondivider-sm-eyebrow-display);
@@ -535,27 +408,14 @@
       var(--sectiondivider-sm-eyebrow-padding-left, var(--sectiondivider-sm-eyebrow-padding, 0));
   }
 
-  /* Title rendered as a single <text> through a feMorphology dilate + flood +
-     composite filter. Dilating the alpha treats all glyphs as one combined
-     shape, so neighbor-glyph overlaps (CQ, AC etc.) merge into a single
-     outline instead of double-stacking. */
-  svg.divider-label {
+  .divider-label {
     display: block;
-    overflow: visible;
     color: var(--_divider-title);
-    /* The title is type that happens to be drawn as an SVG, so Sketch mode
-       reads it as one glyph and pushes it as far as it pushes a 16px icon.
-       At heading size any travel pulls the letters apart, so it stays crisp.
-       `none` drops the ink mask along with the displacement. */
-    --sketch-icon-off: none;
-  }
-  svg.divider-label text {
     font-family: var(--_divider-title-font-family);
     font-weight: var(--_divider-title-font-weight);
     font-size: var(--_divider-title-font-size);
     line-height: var(--_divider-title-line-height);
     letter-spacing: var(--_divider-title-letter-spacing);
-    fill: currentColor;
   }
 
   .title-row {