@motion-proto/live-tokens 0.7.1 → 0.9.0

package/src/system/components/SectionDivider.svelte

@@ -3,13 +3,26 @@
 
   import { onMount, tick } from 'svelte';
 
+  /** Size variant. Each variant owns everything that defines its look:
+   *  typography, geometry, colors AND the intrinsic display properties
+   *  (alignment, eyebrow visibility, description visibility, hairline
+   *  position). Every intrinsic flows through `:root` CSS vars so a designer
+   *  edit cascades to every consumer instance without per-call wiring. */
+  type Variant = 'lg' | 'md' | 'sm';
+
   interface Props {
     title: string;
     description?: string | undefined;
-    variant?: 'canvas' | 'neutral' | 'alternate' | 'primary' | 'accent' | 'special';
+    eyebrow?: string | undefined;
+    variant?: Variant;
   }
 
-  let { title, description = undefined, variant = 'canvas' }: Props = $props();
+  let {
+    title,
+    description = undefined,
+    eyebrow = undefined,
+    variant = 'md',
+  }: Props = $props();
 
   let svgEl: SVGSVGElement | undefined = $state();
   let svgTextEl: SVGTextElement | undefined = $state();
@@ -18,37 +31,25 @@
   let svgX = $state(0);
   let svgY = $state(0);
 
-  // feMorphology radius and feFlood flood-color are non-presentation attributes:
-  // they can't read CSS vars. We read the resolved values off the SVG element
-  // and push them onto the filter primitives, refreshing whenever the editor
-  // mutates inline CSS vars on documentElement. Reading the variant-scoped
-  // internal `--_divider-title-*` vars (set by the .variant-{v} class) keeps
-  // this independent of the variant prop.
+  // 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');
-  // Stable per-instance id so multiple SectionDividers on the same page each
-  // bind their <text> to their own filter.
   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-border-width'));
-    // SVG stroke extends `width/2` on each side; feMorphology radius dilates
-    // by `radius` outward — so radius = width/2 gives the same visible outline.
+    const wPx = parseFloat(cs.getPropertyValue('--_divider-title-outline-width'));
     outlineRadius = String(Number.isFinite(wPx) ? wPx / 2 : 0);
-    const c = cs.getPropertyValue('--_divider-title-stroke-color').trim();
+    const c = cs.getPropertyValue('--_divider-title-outline-color').trim();
     outlineColor = c || '#000';
   }
 
   function measure(): void {
     if (!svgTextEl) return;
     const bb = svgTextEl.getBBox();
-    // Size the SVG to the glyph bbox exactly and map that bbox onto the
-    // canvas via viewBox. Otherwise svgH = bb.y + bb.height carries any
-    // empty band between y=0 and the glyph top (and any extra at the
-    // bottom of the bbox), leaving the title vertically unbalanced inside
-    // the container's symmetric top/bottom padding.
     svgX = bb.x;
     svgY = bb.y;
     svgW = Math.ceil(bb.width);
@@ -64,396 +65,463 @@
   onMount(() => {
     measure();
     syncFilter();
-    // CSS-var edits (font-size/family/weight) change the rendered bbox but
-    // never change the `title` prop — so re-measure on every style mutation
-    // alongside the filter sync.
     const obs = new MutationObserver(() => { measure(); syncFilter(); });
     obs.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
     return () => obs.disconnect();
   });
 </script>
 
-<div class="section-divider variant-{variant}">
-  <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>
-  {#if description}
-    <p class="divider-description">{description}</p>
-  {/if}
-</div>
+<!-- In dev, render every variant-controlled block so the editor can flip
+     intrinsics live; CSS hides the unused ones via container style queries.
+     In prod, Vite folds `import.meta.env.DEV` to `false` and strips the dev
+     branch; the else branch's PRUNE_FOR markers are resolved by the
+     `buildPruneReplace` preprocessor (vite-plugin/pruneMarkers/) into static
+     `{#if variant === ...}` guards driven by the production component-config. -->
+{#if import.meta.env.DEV}
+  <div class="section-divider variant-{variant}">
+    <span class="divider-eyebrow">{eyebrow ?? ''}</span>
+    <span class="sd-hairline sd-hairline--row sd-hairline-above-label" aria-hidden="true"></span>
+    <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>
+      <span class="sd-hairline sd-hairline--side sd-hairline-through-label" aria-hidden="true"></span>
+    </div>
+    <span class="sd-hairline sd-hairline--row sd-hairline-below-label" aria-hidden="true"></span>
+    <span class="sd-hairline sd-hairline--row sd-hairline-above-description" aria-hidden="true"></span>
+    <div class="description-row">
+      <span class="sd-hairline sd-hairline--side sd-hairline-through-description" aria-hidden="true"></span>
+      <span class="description-inline">
+        <p class="divider-description">{description ?? ''}</p>
+      </span>
+      <span class="sd-hairline sd-hairline--side sd-hairline-through-description" aria-hidden="true"></span>
+    </div>
+    <span class="sd-hairline sd-hairline--row sd-hairline-below-description" aria-hidden="true"></span>
+  </div>
+{:else}
+  <div class="section-divider variant-{variant}">
+    <!--PRUNE_FOR sectiondivider eyebrow-display != none default=none-->
+    <span class="divider-eyebrow">{eyebrow ?? ''}</span>
+    <!--END_PRUNE-->
+    <!--PRUNE_FOR sectiondivider hairline == above-label default=none-->
+    <span class="sd-hairline sd-hairline--row sd-hairline-above-label" aria-hidden="true"></span>
+    <!--END_PRUNE-->
+    <div class="title-row">
+      <!--PRUNE_FOR sectiondivider hairline == through-label default=none-->
+      <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>
+      <!--PRUNE_FOR sectiondivider hairline == through-label default=none-->
+      <span class="sd-hairline sd-hairline--side sd-hairline-through-label" aria-hidden="true"></span>
+      <!--END_PRUNE-->
+    </div>
+    <!--PRUNE_FOR sectiondivider hairline == below-label default=none-->
+    <span class="sd-hairline sd-hairline--row sd-hairline-below-label" aria-hidden="true"></span>
+    <!--END_PRUNE-->
+    <!--PRUNE_FOR sectiondivider hairline == above-description default=none-->
+    <span class="sd-hairline sd-hairline--row sd-hairline-above-description" aria-hidden="true"></span>
+    <!--END_PRUNE-->
+    <!--PRUNE_FOR sectiondivider description-display != none default=flex-->
+    <div class="description-row">
+      <!--PRUNE_FOR sectiondivider hairline == through-description default=none-->
+      <span class="sd-hairline sd-hairline--side sd-hairline-through-description" aria-hidden="true"></span>
+      <!--END_PRUNE-->
+      <span class="description-inline">
+        <p class="divider-description">{description ?? ''}</p>
+      </span>
+      <!--PRUNE_FOR sectiondivider hairline == through-description default=none-->
+      <span class="sd-hairline sd-hairline--side sd-hairline-through-description" aria-hidden="true"></span>
+      <!--END_PRUNE-->
+    </div>
+    <!--END_PRUNE-->
+    <!--PRUNE_FOR sectiondivider hairline == below-description default=none-->
+    <span class="sd-hairline sd-hairline--row sd-hairline-below-description" aria-hidden="true"></span>
+    <!--END_PRUNE-->
+  </div>
+{/if}
 
 <style>
-  /* Per-variant slots. Properties the editor links across variants
-     (typography, padding, outline, radius) ship with identical defaults so
-     they read as one linked group out of the box; gradient angle, stop
-     colors, and stop positions are authored per variant and are not linked. */
+  /* Each size variant owns its full token set: typography, geometry, colors
+     AND intrinsic display properties (alignment, eyebrow/description
+     visibility, hairline position, eyebrow text-transform). There is no
+     separate color axis — variants are full presets the designer composes
+     in the editor. The instance picks one variant; that's it. */
   :global(:root) {
-    /* Canvas */
-    --sectiondivider-canvas-padding: var(--space-16);
-    --sectiondivider-canvas-title: var(--text-primary);
-    --sectiondivider-canvas-title-font-family: var(--font-display);
-    --sectiondivider-canvas-title-font-size: var(--font-size-5xl);
-    --sectiondivider-canvas-title-font-weight: var(--font-weight-normal);
-    --sectiondivider-canvas-title-line-height: var(--line-height-xs);
-    --sectiondivider-canvas-title-border-width: var(--border-width-4);
-    --sectiondivider-canvas-title-stroke-color: var(--surface-canvas-lowest);
-    /* Title stroke defaults intentionally diverge per variant — the property
-       is linkable but ships unlinked, with each variant matching its own
-       surface-lowest so stroke + gradient read as one family. */
-    --sectiondivider-canvas-description: var(--text-secondary);
-    --sectiondivider-canvas-description-font-family: var(--font-sans);
-    --sectiondivider-canvas-description-font-size: var(--font-size-md);
-    --sectiondivider-canvas-description-font-weight: var(--font-weight-normal);
-    --sectiondivider-canvas-description-line-height: var(--line-height-md);
-    --sectiondivider-canvas-gradient-angle: var(--gradient-angle-diagonal);
-    --sectiondivider-canvas-gradient-stop-1-color: var(--surface-canvas-highest);
-    --sectiondivider-canvas-gradient-stop-1-position: var(--gradient-stop-start);
-    --sectiondivider-canvas-gradient-stop-2-color: var(--surface-canvas-higher);
-    --sectiondivider-canvas-gradient-stop-2-position: var(--gradient-stop-mid);
-    --sectiondivider-canvas-gradient-stop-3-color: var(--surface-canvas);
-    --sectiondivider-canvas-gradient-stop-3-position: var(--gradient-stop-end);
-    --sectiondivider-canvas-radius: var(--radius-lg);
-    --sectiondivider-canvas-border: var(--color-transparent);
-    --sectiondivider-canvas-border-width: var(--border-width-0);
-    --sectiondivider-canvas-shadow: var(--shadow-none);
-
-    /* Neutral */
-    --sectiondivider-neutral-padding: var(--space-16);
-    --sectiondivider-neutral-title: var(--text-primary);
-    --sectiondivider-neutral-title-font-family: var(--font-display);
-    --sectiondivider-neutral-title-font-size: var(--font-size-5xl);
-    --sectiondivider-neutral-title-font-weight: var(--font-weight-normal);
-    --sectiondivider-neutral-title-line-height: var(--line-height-xs);
-    --sectiondivider-neutral-title-border-width: var(--border-width-4);
-    --sectiondivider-neutral-title-stroke-color: var(--surface-neutral-lowest);
-    --sectiondivider-neutral-description: var(--text-secondary);
-    --sectiondivider-neutral-description-font-family: var(--font-sans);
-    --sectiondivider-neutral-description-font-size: var(--font-size-md);
-    --sectiondivider-neutral-description-font-weight: var(--font-weight-normal);
-    --sectiondivider-neutral-description-line-height: var(--line-height-md);
-    --sectiondivider-neutral-gradient-angle: var(--gradient-angle-diagonal);
-    --sectiondivider-neutral-gradient-stop-1-color: var(--surface-neutral-highest);
-    --sectiondivider-neutral-gradient-stop-1-position: var(--gradient-stop-start);
-    --sectiondivider-neutral-gradient-stop-2-color: var(--surface-neutral-higher);
-    --sectiondivider-neutral-gradient-stop-2-position: var(--gradient-stop-mid);
-    --sectiondivider-neutral-gradient-stop-3-color: var(--surface-neutral);
-    --sectiondivider-neutral-gradient-stop-3-position: var(--gradient-stop-end);
-    --sectiondivider-neutral-radius: var(--radius-lg);
-    --sectiondivider-neutral-border: var(--color-transparent);
-    --sectiondivider-neutral-border-width: var(--border-width-0);
-    --sectiondivider-neutral-shadow: var(--shadow-none);
-
-    /* Alternate */
-    --sectiondivider-alternate-padding: var(--space-16);
-    --sectiondivider-alternate-title: var(--text-primary);
-    --sectiondivider-alternate-title-font-family: var(--font-display);
-    --sectiondivider-alternate-title-font-size: var(--font-size-5xl);
-    --sectiondivider-alternate-title-font-weight: var(--font-weight-normal);
-    --sectiondivider-alternate-title-line-height: var(--line-height-xs);
-    --sectiondivider-alternate-title-border-width: var(--border-width-4);
-    --sectiondivider-alternate-title-stroke-color: var(--surface-alternate-lowest);
-    --sectiondivider-alternate-description: var(--text-secondary);
-    --sectiondivider-alternate-description-font-family: var(--font-sans);
-    --sectiondivider-alternate-description-font-size: var(--font-size-md);
-    --sectiondivider-alternate-description-font-weight: var(--font-weight-normal);
-    --sectiondivider-alternate-description-line-height: var(--line-height-md);
-    --sectiondivider-alternate-gradient-angle: var(--gradient-angle-diagonal);
-    --sectiondivider-alternate-gradient-stop-1-color: var(--surface-alternate-highest);
-    --sectiondivider-alternate-gradient-stop-1-position: var(--gradient-stop-start);
-    --sectiondivider-alternate-gradient-stop-2-color: var(--surface-alternate-higher);
-    --sectiondivider-alternate-gradient-stop-2-position: var(--gradient-stop-mid);
-    --sectiondivider-alternate-gradient-stop-3-color: var(--surface-alternate);
-    --sectiondivider-alternate-gradient-stop-3-position: var(--gradient-stop-end);
-    --sectiondivider-alternate-radius: var(--radius-lg);
-    --sectiondivider-alternate-border: var(--color-transparent);
-    --sectiondivider-alternate-border-width: var(--border-width-0);
-    --sectiondivider-alternate-shadow: var(--shadow-none);
+    /* Large */
+    --sectiondivider-lg-title-font-family: var(--font-display);
+    --sectiondivider-lg-title-font-weight: var(--font-weight-normal);
+    --sectiondivider-lg-title-font-size: var(--font-size-5xl);
+    --sectiondivider-lg-title-line-height: var(--line-height-xs);
+    --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-normal);
+    --sectiondivider-lg-description-font-size: var(--font-size-lg);
+    --sectiondivider-lg-description-line-height: var(--line-height-md);
+    --sectiondivider-lg-eyebrow-font-family: var(--font-sans);
+    --sectiondivider-lg-eyebrow-font-weight: var(--font-weight-medium);
+    --sectiondivider-lg-eyebrow-font-size: var(--font-size-md);
+    --sectiondivider-lg-eyebrow-letter-spacing: var(--letter-spacing-wide);
+    --sectiondivider-lg-padding: var(--space-16);
+    --sectiondivider-lg-title-padding: var(--space-0);
+    --sectiondivider-lg-description-padding: var(--space-0);
+    --sectiondivider-lg-eyebrow-padding: var(--space-0);
+    --sectiondivider-lg-radius: var(--radius-lg);
+    --sectiondivider-lg-border-width: var(--border-width-0);
+    --sectiondivider-lg-shadow: var(--shadow-none);
+    --sectiondivider-lg-hairline-thickness: var(--border-width-1);
+    --sectiondivider-lg-background: linear-gradient(135deg, var(--surface-canvas-highest) 0%, var(--surface-canvas-higher) 50%, var(--surface-canvas) 100%);
+    --sectiondivider-lg-title: var(--text-primary);
+    --sectiondivider-lg-description: var(--text-secondary);
+    --sectiondivider-lg-eyebrow: var(--text-tertiary);
+    --sectiondivider-lg-border: var(--color-transparent);
+    --sectiondivider-lg-title-outline-color: var(--surface-canvas-lowest);
+    --sectiondivider-lg-hairline-color: var(--border-canvas-medium);
 
-    /* Primary */
-    --sectiondivider-primary-padding: var(--space-16);
-    --sectiondivider-primary-title: var(--text-primary);
-    --sectiondivider-primary-title-font-family: var(--font-display);
-    --sectiondivider-primary-title-font-size: var(--font-size-5xl);
-    --sectiondivider-primary-title-font-weight: var(--font-weight-normal);
-    --sectiondivider-primary-title-line-height: var(--line-height-xs);
-    --sectiondivider-primary-title-border-width: var(--border-width-4);
-    --sectiondivider-primary-title-stroke-color: var(--surface-brand-lowest);
-    --sectiondivider-primary-description: var(--text-secondary);
-    --sectiondivider-primary-description-font-family: var(--font-sans);
-    --sectiondivider-primary-description-font-size: var(--font-size-md);
-    --sectiondivider-primary-description-font-weight: var(--font-weight-normal);
-    --sectiondivider-primary-description-line-height: var(--line-height-md);
-    --sectiondivider-primary-gradient-angle: var(--gradient-angle-diagonal);
-    --sectiondivider-primary-gradient-stop-1-color: var(--surface-brand-highest);
-    --sectiondivider-primary-gradient-stop-1-position: var(--gradient-stop-start);
-    --sectiondivider-primary-gradient-stop-2-color: var(--surface-brand-higher);
-    --sectiondivider-primary-gradient-stop-2-position: var(--gradient-stop-mid);
-    --sectiondivider-primary-gradient-stop-3-color: var(--surface-brand);
-    --sectiondivider-primary-gradient-stop-3-position: var(--gradient-stop-end);
-    --sectiondivider-primary-radius: var(--radius-lg);
-    --sectiondivider-primary-border: var(--color-transparent);
-    --sectiondivider-primary-border-width: var(--border-width-0);
-    --sectiondivider-primary-shadow: var(--shadow-none);
+    /* Medium */
+    --sectiondivider-md-title-font-family: var(--font-display);
+    --sectiondivider-md-title-font-weight: var(--font-weight-normal);
+    --sectiondivider-md-title-font-size: var(--font-size-4xl);
+    --sectiondivider-md-title-line-height: var(--line-height-xs);
+    --sectiondivider-md-title-letter-spacing: var(--letter-spacing-normal);
+    --sectiondivider-md-title-outline-width: var(--border-width-3);
+    --sectiondivider-md-description-font-family: var(--font-sans);
+    --sectiondivider-md-description-font-weight: var(--font-weight-normal);
+    --sectiondivider-md-description-font-size: var(--font-size-md);
+    --sectiondivider-md-description-line-height: var(--line-height-md);
+    --sectiondivider-md-eyebrow-font-family: var(--font-sans);
+    --sectiondivider-md-eyebrow-font-weight: var(--font-weight-medium);
+    --sectiondivider-md-eyebrow-font-size: var(--font-size-sm);
+    --sectiondivider-md-eyebrow-letter-spacing: var(--letter-spacing-wide);
+    --sectiondivider-md-padding: var(--space-12);
+    --sectiondivider-md-title-padding: var(--space-0);
+    --sectiondivider-md-description-padding: var(--space-0);
+    --sectiondivider-md-eyebrow-padding: var(--space-0);
+    --sectiondivider-md-radius: var(--radius-md);
+    --sectiondivider-md-border-width: var(--border-width-0);
+    --sectiondivider-md-shadow: var(--shadow-none);
+    --sectiondivider-md-hairline-thickness: var(--border-width-1);
+    --sectiondivider-md-background: linear-gradient(135deg, var(--surface-canvas-highest) 0%, var(--surface-canvas-higher) 50%, var(--surface-canvas) 100%);
+    --sectiondivider-md-title: var(--text-primary);
+    --sectiondivider-md-description: var(--text-secondary);
+    --sectiondivider-md-eyebrow: var(--text-tertiary);
+    --sectiondivider-md-border: var(--color-transparent);
+    --sectiondivider-md-title-outline-color: var(--surface-canvas-lowest);
+    --sectiondivider-md-hairline-color: var(--border-canvas-medium);
 
-    /* Accent */
-    --sectiondivider-accent-padding: var(--space-16);
-    --sectiondivider-accent-title: var(--text-primary);
-    --sectiondivider-accent-title-font-family: var(--font-display);
-    --sectiondivider-accent-title-font-size: var(--font-size-5xl);
-    --sectiondivider-accent-title-font-weight: var(--font-weight-normal);
-    --sectiondivider-accent-title-line-height: var(--line-height-xs);
-    --sectiondivider-accent-title-border-width: var(--border-width-4);
-    --sectiondivider-accent-title-stroke-color: var(--surface-accent-lowest);
-    --sectiondivider-accent-description: var(--text-secondary);
-    --sectiondivider-accent-description-font-family: var(--font-sans);
-    --sectiondivider-accent-description-font-size: var(--font-size-md);
-    --sectiondivider-accent-description-font-weight: var(--font-weight-normal);
-    --sectiondivider-accent-description-line-height: var(--line-height-md);
-    --sectiondivider-accent-gradient-angle: var(--gradient-angle-diagonal);
-    --sectiondivider-accent-gradient-stop-1-color: var(--surface-accent-highest);
-    --sectiondivider-accent-gradient-stop-1-position: var(--gradient-stop-start);
-    --sectiondivider-accent-gradient-stop-2-color: var(--surface-accent-higher);
-    --sectiondivider-accent-gradient-stop-2-position: var(--gradient-stop-mid);
-    --sectiondivider-accent-gradient-stop-3-color: var(--surface-accent);
-    --sectiondivider-accent-gradient-stop-3-position: var(--gradient-stop-end);
-    --sectiondivider-accent-radius: var(--radius-lg);
-    --sectiondivider-accent-border: var(--color-transparent);
-    --sectiondivider-accent-border-width: var(--border-width-0);
-    --sectiondivider-accent-shadow: var(--shadow-none);
+    /* Small */
+    --sectiondivider-sm-title-font-family: var(--font-display);
+    --sectiondivider-sm-title-font-weight: var(--font-weight-normal);
+    --sectiondivider-sm-title-font-size: var(--font-size-3xl);
+    --sectiondivider-sm-title-line-height: var(--line-height-xs);
+    --sectiondivider-sm-title-letter-spacing: var(--letter-spacing-normal);
+    --sectiondivider-sm-title-outline-width: var(--border-width-2);
+    --sectiondivider-sm-description-font-family: var(--font-sans);
+    --sectiondivider-sm-description-font-weight: var(--font-weight-normal);
+    --sectiondivider-sm-description-font-size: var(--font-size-sm);
+    --sectiondivider-sm-description-line-height: var(--line-height-md);
+    --sectiondivider-sm-eyebrow-font-family: var(--font-sans);
+    --sectiondivider-sm-eyebrow-font-weight: var(--font-weight-medium);
+    --sectiondivider-sm-eyebrow-font-size: var(--font-size-xs);
+    --sectiondivider-sm-eyebrow-letter-spacing: var(--letter-spacing-wide);
+    --sectiondivider-sm-padding: var(--space-8);
+    --sectiondivider-sm-title-padding: var(--space-0);
+    --sectiondivider-sm-description-padding: var(--space-0);
+    --sectiondivider-sm-eyebrow-padding: var(--space-0);
+    --sectiondivider-sm-radius: var(--radius-sm);
+    --sectiondivider-sm-border-width: var(--border-width-0);
+    --sectiondivider-sm-shadow: var(--shadow-none);
+    --sectiondivider-sm-hairline-thickness: var(--border-width-1);
+    --sectiondivider-sm-background: linear-gradient(135deg, var(--surface-canvas-highest) 0%, var(--surface-canvas-higher) 50%, var(--surface-canvas) 100%);
+    --sectiondivider-sm-title: var(--text-primary);
+    --sectiondivider-sm-description: var(--text-secondary);
+    --sectiondivider-sm-eyebrow: var(--text-tertiary);
+    --sectiondivider-sm-border: var(--color-transparent);
+    --sectiondivider-sm-title-outline-color: var(--surface-canvas-lowest);
+    --sectiondivider-sm-hairline-color: var(--border-canvas-medium);
 
-    /* Special */
-    --sectiondivider-special-padding: var(--space-16);
-    --sectiondivider-special-title: var(--text-primary);
-    --sectiondivider-special-title-font-family: var(--font-display);
-    --sectiondivider-special-title-font-size: var(--font-size-5xl);
-    --sectiondivider-special-title-font-weight: var(--font-weight-normal);
-    --sectiondivider-special-title-line-height: var(--line-height-xs);
-    --sectiondivider-special-title-border-width: var(--border-width-4);
-    --sectiondivider-special-title-stroke-color: var(--surface-special-lowest);
-    --sectiondivider-special-description: var(--text-secondary);
-    --sectiondivider-special-description-font-family: var(--font-sans);
-    --sectiondivider-special-description-font-size: var(--font-size-md);
-    --sectiondivider-special-description-font-weight: var(--font-weight-normal);
-    --sectiondivider-special-description-line-height: var(--line-height-md);
-    --sectiondivider-special-gradient-angle: var(--gradient-angle-diagonal);
-    --sectiondivider-special-gradient-stop-1-color: var(--surface-special-highest);
-    --sectiondivider-special-gradient-stop-1-position: var(--gradient-stop-start);
-    --sectiondivider-special-gradient-stop-2-color: var(--surface-special-higher);
-    --sectiondivider-special-gradient-stop-2-position: var(--gradient-stop-mid);
-    --sectiondivider-special-gradient-stop-3-color: var(--surface-special);
-    --sectiondivider-special-gradient-stop-3-position: var(--gradient-stop-end);
-    --sectiondivider-special-radius: var(--radius-lg);
-    --sectiondivider-special-border: var(--color-transparent);
-    --sectiondivider-special-border-width: var(--border-width-0);
-    --sectiondivider-special-shadow: var(--shadow-none);
+    /* Intrinsic defaults. These keys cascade to `:root` via the editor's
+       alias bucket; un-edited variants fall back to these. The defaults
+       match the legacy "config bucket" semantics: center alignment, hidden
+       eyebrow, visible description, hidden hairline, normal-case eyebrow. */
+    --sectiondivider-lg-align: center;
+    --sectiondivider-md-align: center;
+    --sectiondivider-sm-align: center;
+    --sectiondivider-lg-eyebrow-display: none;
+    --sectiondivider-md-eyebrow-display: none;
+    --sectiondivider-sm-eyebrow-display: none;
+    --sectiondivider-lg-description-display: flex;
+    --sectiondivider-md-description-display: flex;
+    --sectiondivider-sm-description-display: flex;
+    --sectiondivider-lg-hairline: none;
+    --sectiondivider-md-hairline: none;
+    --sectiondivider-sm-hairline: none;
+    --sectiondivider-lg-eyebrow-text-transform: none;
+    --sectiondivider-md-eyebrow-text-transform: none;
+    --sectiondivider-sm-eyebrow-text-transform: none;
   }
 
   .section-divider {
+    /* `container-name` lets the per-variant intrinsic vars below drive
+       style-query rules that reveal exactly one hairline and react to the
+       align/description-display values. No `container-type` is set so the
+       column layout stays in normal flow — style queries don't require it. */
+    container-name: sd;
+    position: relative;
     margin: var(--space-24) 0;
-    padding: var(--_divider-padding) calc(var(--_divider-padding) * 1.5);
+    padding:
+      var(--_divider-padding-top)
+      var(--_divider-padding-right)
+      var(--_divider-padding-bottom)
+      var(--_divider-padding-left);
     border-radius: var(--_divider-radius);
     border: var(--_divider-border-width) solid var(--_divider-border);
     box-shadow: var(--_divider-shadow);
-    background: linear-gradient(
-      var(--_divider-gradient-angle),
-      var(--_divider-stop-1-color) var(--_divider-stop-1-position),
-      var(--_divider-stop-2-color) var(--_divider-stop-2-position),
-      var(--_divider-stop-3-color) var(--_divider-stop-3-position)
-    );
+    background: var(--_divider-bg);
+    display: flex;
+    flex-direction: column;
+    align-items: var(--_divider-align);
+    text-align: var(--_divider-align);
+    --_divider-justify: var(--_divider-align);
   }
 
-  /* Each variant class collapses its per-variant slots onto one set of
-     internal `--_divider-*` vars; the rest of the styles only consume those,
-     so adding a variant means adding a class and a :root block. */
-  .variant-canvas {
-    --_divider-padding: var(--sectiondivider-canvas-padding);
-    --_divider-radius: var(--sectiondivider-canvas-radius);
-    --_divider-border: var(--sectiondivider-canvas-border);
-    --_divider-border-width: var(--sectiondivider-canvas-border-width);
-    --_divider-shadow: var(--sectiondivider-canvas-shadow);
-    --_divider-gradient-angle: var(--sectiondivider-canvas-gradient-angle);
-    --_divider-stop-1-color: var(--sectiondivider-canvas-gradient-stop-1-color);
-    --_divider-stop-1-position: var(--sectiondivider-canvas-gradient-stop-1-position);
-    --_divider-stop-2-color: var(--sectiondivider-canvas-gradient-stop-2-color);
-    --_divider-stop-2-position: var(--sectiondivider-canvas-gradient-stop-2-position);
-    --_divider-stop-3-color: var(--sectiondivider-canvas-gradient-stop-3-color);
-    --_divider-stop-3-position: var(--sectiondivider-canvas-gradient-stop-3-position);
-    --_divider-title: var(--sectiondivider-canvas-title);
-    --_divider-title-font-family: var(--sectiondivider-canvas-title-font-family);
-    --_divider-title-font-size: var(--sectiondivider-canvas-title-font-size);
-    --_divider-title-font-weight: var(--sectiondivider-canvas-title-font-weight);
-    --_divider-title-line-height: var(--sectiondivider-canvas-title-line-height);
-    --_divider-title-border-width: var(--sectiondivider-canvas-title-border-width);
-    --_divider-title-stroke-color: var(--sectiondivider-canvas-title-stroke-color);
-    --_divider-description: var(--sectiondivider-canvas-description);
-    --_divider-description-font-family: var(--sectiondivider-canvas-description-font-family);
-    --_divider-description-font-size: var(--sectiondivider-canvas-description-font-size);
-    --_divider-description-font-weight: var(--sectiondivider-canvas-description-font-weight);
-    --_divider-description-line-height: var(--sectiondivider-canvas-description-line-height);
+  /* Variant pipes — one full token set per variant, including the intrinsics
+     that now cascade through CSS vars instead of runtime props. */
+  .variant-lg {
+    --_divider-title-font-family: var(--sectiondivider-lg-title-font-family);
+    --_divider-title-font-weight: var(--sectiondivider-lg-title-font-weight);
+    --_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);
+    --_divider-description-line-height: var(--sectiondivider-lg-description-line-height);
+    --_divider-eyebrow-font-family: var(--sectiondivider-lg-eyebrow-font-family);
+    --_divider-eyebrow-font-weight: var(--sectiondivider-lg-eyebrow-font-weight);
+    --_divider-eyebrow-font-size: var(--sectiondivider-lg-eyebrow-font-size);
+    --_divider-eyebrow-letter-spacing: var(--sectiondivider-lg-eyebrow-letter-spacing);
+    --_divider-padding-top: var(--sectiondivider-lg-padding-top, var(--sectiondivider-lg-padding));
+    --_divider-padding-right: var(--sectiondivider-lg-padding-right, calc(var(--sectiondivider-lg-padding) * 1.5));
+    --_divider-padding-bottom: var(--sectiondivider-lg-padding-bottom, var(--sectiondivider-lg-padding));
+    --_divider-padding-left: var(--sectiondivider-lg-padding-left, calc(var(--sectiondivider-lg-padding) * 1.5));
+    --_divider-radius: var(--sectiondivider-lg-radius);
+    --_divider-border-width: var(--sectiondivider-lg-border-width);
+    --_divider-shadow: var(--sectiondivider-lg-shadow);
+    --_divider-hairline-thickness: var(--sectiondivider-lg-hairline-thickness);
+    --_divider-bg: var(--sectiondivider-lg-background);
+    --_divider-title: var(--sectiondivider-lg-title);
+    --_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);
+    --_divider-description-display: var(--sectiondivider-lg-description-display);
+    --_divider-hairline: var(--sectiondivider-lg-hairline);
+    --_divider-eyebrow-text-transform: var(--sectiondivider-lg-eyebrow-text-transform);
   }
 
-  .variant-neutral {
-    --_divider-padding: var(--sectiondivider-neutral-padding);
-    --_divider-radius: var(--sectiondivider-neutral-radius);
-    --_divider-border: var(--sectiondivider-neutral-border);
-    --_divider-border-width: var(--sectiondivider-neutral-border-width);
-    --_divider-shadow: var(--sectiondivider-neutral-shadow);
-    --_divider-gradient-angle: var(--sectiondivider-neutral-gradient-angle);
-    --_divider-stop-1-color: var(--sectiondivider-neutral-gradient-stop-1-color);
-    --_divider-stop-1-position: var(--sectiondivider-neutral-gradient-stop-1-position);
-    --_divider-stop-2-color: var(--sectiondivider-neutral-gradient-stop-2-color);
-    --_divider-stop-2-position: var(--sectiondivider-neutral-gradient-stop-2-position);
-    --_divider-stop-3-color: var(--sectiondivider-neutral-gradient-stop-3-color);
-    --_divider-stop-3-position: var(--sectiondivider-neutral-gradient-stop-3-position);
-    --_divider-title: var(--sectiondivider-neutral-title);
-    --_divider-title-font-family: var(--sectiondivider-neutral-title-font-family);
-    --_divider-title-font-size: var(--sectiondivider-neutral-title-font-size);
-    --_divider-title-font-weight: var(--sectiondivider-neutral-title-font-weight);
-    --_divider-title-line-height: var(--sectiondivider-neutral-title-line-height);
-    --_divider-title-border-width: var(--sectiondivider-neutral-title-border-width);
-    --_divider-title-stroke-color: var(--sectiondivider-neutral-title-stroke-color);
-    --_divider-description: var(--sectiondivider-neutral-description);
-    --_divider-description-font-family: var(--sectiondivider-neutral-description-font-family);
-    --_divider-description-font-size: var(--sectiondivider-neutral-description-font-size);
-    --_divider-description-font-weight: var(--sectiondivider-neutral-description-font-weight);
-    --_divider-description-line-height: var(--sectiondivider-neutral-description-line-height);
+  .variant-md {
+    --_divider-title-font-family: var(--sectiondivider-md-title-font-family);
+    --_divider-title-font-weight: var(--sectiondivider-md-title-font-weight);
+    --_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);
+    --_divider-description-line-height: var(--sectiondivider-md-description-line-height);
+    --_divider-eyebrow-font-family: var(--sectiondivider-md-eyebrow-font-family);
+    --_divider-eyebrow-font-weight: var(--sectiondivider-md-eyebrow-font-weight);
+    --_divider-eyebrow-font-size: var(--sectiondivider-md-eyebrow-font-size);
+    --_divider-eyebrow-letter-spacing: var(--sectiondivider-md-eyebrow-letter-spacing);
+    --_divider-padding-top: var(--sectiondivider-md-padding-top, var(--sectiondivider-md-padding));
+    --_divider-padding-right: var(--sectiondivider-md-padding-right, calc(var(--sectiondivider-md-padding) * 1.5));
+    --_divider-padding-bottom: var(--sectiondivider-md-padding-bottom, var(--sectiondivider-md-padding));
+    --_divider-padding-left: var(--sectiondivider-md-padding-left, calc(var(--sectiondivider-md-padding) * 1.5));
+    --_divider-radius: var(--sectiondivider-md-radius);
+    --_divider-border-width: var(--sectiondivider-md-border-width);
+    --_divider-shadow: var(--sectiondivider-md-shadow);
+    --_divider-hairline-thickness: var(--sectiondivider-md-hairline-thickness);
+    --_divider-bg: var(--sectiondivider-md-background);
+    --_divider-title: var(--sectiondivider-md-title);
+    --_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);
+    --_divider-description-display: var(--sectiondivider-md-description-display);
+    --_divider-hairline: var(--sectiondivider-md-hairline);
+    --_divider-eyebrow-text-transform: var(--sectiondivider-md-eyebrow-text-transform);
   }
 
-  .variant-alternate {
-    --_divider-padding: var(--sectiondivider-alternate-padding);
-    --_divider-radius: var(--sectiondivider-alternate-radius);
-    --_divider-border: var(--sectiondivider-alternate-border);
-    --_divider-border-width: var(--sectiondivider-alternate-border-width);
-    --_divider-shadow: var(--sectiondivider-alternate-shadow);
-    --_divider-gradient-angle: var(--sectiondivider-alternate-gradient-angle);
-    --_divider-stop-1-color: var(--sectiondivider-alternate-gradient-stop-1-color);
-    --_divider-stop-1-position: var(--sectiondivider-alternate-gradient-stop-1-position);
-    --_divider-stop-2-color: var(--sectiondivider-alternate-gradient-stop-2-color);
-    --_divider-stop-2-position: var(--sectiondivider-alternate-gradient-stop-2-position);
-    --_divider-stop-3-color: var(--sectiondivider-alternate-gradient-stop-3-color);
-    --_divider-stop-3-position: var(--sectiondivider-alternate-gradient-stop-3-position);
-    --_divider-title: var(--sectiondivider-alternate-title);
-    --_divider-title-font-family: var(--sectiondivider-alternate-title-font-family);
-    --_divider-title-font-size: var(--sectiondivider-alternate-title-font-size);
-    --_divider-title-font-weight: var(--sectiondivider-alternate-title-font-weight);
-    --_divider-title-line-height: var(--sectiondivider-alternate-title-line-height);
-    --_divider-title-border-width: var(--sectiondivider-alternate-title-border-width);
-    --_divider-title-stroke-color: var(--sectiondivider-alternate-title-stroke-color);
-    --_divider-description: var(--sectiondivider-alternate-description);
-    --_divider-description-font-family: var(--sectiondivider-alternate-description-font-family);
-    --_divider-description-font-size: var(--sectiondivider-alternate-description-font-size);
-    --_divider-description-font-weight: var(--sectiondivider-alternate-description-font-weight);
-    --_divider-description-line-height: var(--sectiondivider-alternate-description-line-height);
+  .variant-sm {
+    --_divider-title-font-family: var(--sectiondivider-sm-title-font-family);
+    --_divider-title-font-weight: var(--sectiondivider-sm-title-font-weight);
+    --_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);
+    --_divider-description-line-height: var(--sectiondivider-sm-description-line-height);
+    --_divider-eyebrow-font-family: var(--sectiondivider-sm-eyebrow-font-family);
+    --_divider-eyebrow-font-weight: var(--sectiondivider-sm-eyebrow-font-weight);
+    --_divider-eyebrow-font-size: var(--sectiondivider-sm-eyebrow-font-size);
+    --_divider-eyebrow-letter-spacing: var(--sectiondivider-sm-eyebrow-letter-spacing);
+    --_divider-padding-top: var(--sectiondivider-sm-padding-top, var(--sectiondivider-sm-padding));
+    --_divider-padding-right: var(--sectiondivider-sm-padding-right, calc(var(--sectiondivider-sm-padding) * 1.5));
+    --_divider-padding-bottom: var(--sectiondivider-sm-padding-bottom, var(--sectiondivider-sm-padding));
+    --_divider-padding-left: var(--sectiondivider-sm-padding-left, calc(var(--sectiondivider-sm-padding) * 1.5));
+    --_divider-radius: var(--sectiondivider-sm-radius);
+    --_divider-border-width: var(--sectiondivider-sm-border-width);
+    --_divider-shadow: var(--sectiondivider-sm-shadow);
+    --_divider-hairline-thickness: var(--sectiondivider-sm-hairline-thickness);
+    --_divider-bg: var(--sectiondivider-sm-background);
+    --_divider-title: var(--sectiondivider-sm-title);
+    --_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);
+    --_divider-description-display: var(--sectiondivider-sm-description-display);
+    --_divider-hairline: var(--sectiondivider-sm-hairline);
+    --_divider-eyebrow-text-transform: var(--sectiondivider-sm-eyebrow-text-transform);
   }
 
-  .variant-primary {
-    --_divider-padding: var(--sectiondivider-primary-padding);
-    --_divider-radius: var(--sectiondivider-primary-radius);
-    --_divider-border: var(--sectiondivider-primary-border);
-    --_divider-border-width: var(--sectiondivider-primary-border-width);
-    --_divider-shadow: var(--sectiondivider-primary-shadow);
-    --_divider-gradient-angle: var(--sectiondivider-primary-gradient-angle);
-    --_divider-stop-1-color: var(--sectiondivider-primary-gradient-stop-1-color);
-    --_divider-stop-1-position: var(--sectiondivider-primary-gradient-stop-1-position);
-    --_divider-stop-2-color: var(--sectiondivider-primary-gradient-stop-2-color);
-    --_divider-stop-2-position: var(--sectiondivider-primary-gradient-stop-2-position);
-    --_divider-stop-3-color: var(--sectiondivider-primary-gradient-stop-3-color);
-    --_divider-stop-3-position: var(--sectiondivider-primary-gradient-stop-3-position);
-    --_divider-title: var(--sectiondivider-primary-title);
-    --_divider-title-font-family: var(--sectiondivider-primary-title-font-family);
-    --_divider-title-font-size: var(--sectiondivider-primary-title-font-size);
-    --_divider-title-font-weight: var(--sectiondivider-primary-title-font-weight);
-    --_divider-title-line-height: var(--sectiondivider-primary-title-line-height);
-    --_divider-title-border-width: var(--sectiondivider-primary-title-border-width);
-    --_divider-title-stroke-color: var(--sectiondivider-primary-title-stroke-color);
-    --_divider-description: var(--sectiondivider-primary-description);
-    --_divider-description-font-family: var(--sectiondivider-primary-description-font-family);
-    --_divider-description-font-size: var(--sectiondivider-primary-description-font-size);
-    --_divider-description-font-weight: var(--sectiondivider-primary-description-font-weight);
-    --_divider-description-line-height: var(--sectiondivider-primary-description-line-height);
+  /* Per-element padding. Each type element (title / description / eyebrow) owns
+     its own padding tokens, replacing the section-level `gap`. The user gets
+     explicit per-side control via the editor's padding selector. Falls back
+     through: side var → single-value var → 0. Variant-scoped so each preset
+     can carry its own per-element rhythm. */
+  .variant-lg .title-row {
+    padding:
+      var(--sectiondivider-lg-title-padding-top, var(--sectiondivider-lg-title-padding, 0))
+      var(--sectiondivider-lg-title-padding-right, var(--sectiondivider-lg-title-padding, 0))
+      var(--sectiondivider-lg-title-padding-bottom, var(--sectiondivider-lg-title-padding, 0))
+      var(--sectiondivider-lg-title-padding-left, var(--sectiondivider-lg-title-padding, 0));
   }
-
-  .variant-accent {
-    --_divider-padding: var(--sectiondivider-accent-padding);
-    --_divider-radius: var(--sectiondivider-accent-radius);
-    --_divider-border: var(--sectiondivider-accent-border);
-    --_divider-border-width: var(--sectiondivider-accent-border-width);
-    --_divider-shadow: var(--sectiondivider-accent-shadow);
-    --_divider-gradient-angle: var(--sectiondivider-accent-gradient-angle);
-    --_divider-stop-1-color: var(--sectiondivider-accent-gradient-stop-1-color);
-    --_divider-stop-1-position: var(--sectiondivider-accent-gradient-stop-1-position);
-    --_divider-stop-2-color: var(--sectiondivider-accent-gradient-stop-2-color);
-    --_divider-stop-2-position: var(--sectiondivider-accent-gradient-stop-2-position);
-    --_divider-stop-3-color: var(--sectiondivider-accent-gradient-stop-3-color);
-    --_divider-stop-3-position: var(--sectiondivider-accent-gradient-stop-3-position);
-    --_divider-title: var(--sectiondivider-accent-title);
-    --_divider-title-font-family: var(--sectiondivider-accent-title-font-family);
-    --_divider-title-font-size: var(--sectiondivider-accent-title-font-size);
-    --_divider-title-font-weight: var(--sectiondivider-accent-title-font-weight);
-    --_divider-title-line-height: var(--sectiondivider-accent-title-line-height);
-    --_divider-title-border-width: var(--sectiondivider-accent-title-border-width);
-    --_divider-title-stroke-color: var(--sectiondivider-accent-title-stroke-color);
-    --_divider-description: var(--sectiondivider-accent-description);
-    --_divider-description-font-family: var(--sectiondivider-accent-description-font-family);
-    --_divider-description-font-size: var(--sectiondivider-accent-description-font-size);
-    --_divider-description-font-weight: var(--sectiondivider-accent-description-font-weight);
-    --_divider-description-line-height: var(--sectiondivider-accent-description-line-height);
+  .variant-lg .description-row {
+    padding:
+      var(--sectiondivider-lg-description-padding-top, var(--sectiondivider-lg-description-padding, 0))
+      var(--sectiondivider-lg-description-padding-right, var(--sectiondivider-lg-description-padding, 0))
+      var(--sectiondivider-lg-description-padding-bottom, var(--sectiondivider-lg-description-padding, 0))
+      var(--sectiondivider-lg-description-padding-left, var(--sectiondivider-lg-description-padding, 0));
   }
-
-  .variant-special {
-    --_divider-padding: var(--sectiondivider-special-padding);
-    --_divider-radius: var(--sectiondivider-special-radius);
-    --_divider-border: var(--sectiondivider-special-border);
-    --_divider-border-width: var(--sectiondivider-special-border-width);
-    --_divider-shadow: var(--sectiondivider-special-shadow);
-    --_divider-gradient-angle: var(--sectiondivider-special-gradient-angle);
-    --_divider-stop-1-color: var(--sectiondivider-special-gradient-stop-1-color);
-    --_divider-stop-1-position: var(--sectiondivider-special-gradient-stop-1-position);
-    --_divider-stop-2-color: var(--sectiondivider-special-gradient-stop-2-color);
-    --_divider-stop-2-position: var(--sectiondivider-special-gradient-stop-2-position);
-    --_divider-stop-3-color: var(--sectiondivider-special-gradient-stop-3-color);
-    --_divider-stop-3-position: var(--sectiondivider-special-gradient-stop-3-position);
-    --_divider-title: var(--sectiondivider-special-title);
-    --_divider-title-font-family: var(--sectiondivider-special-title-font-family);
-    --_divider-title-font-size: var(--sectiondivider-special-title-font-size);
-    --_divider-title-font-weight: var(--sectiondivider-special-title-font-weight);
-    --_divider-title-line-height: var(--sectiondivider-special-title-line-height);
-    --_divider-title-border-width: var(--sectiondivider-special-title-border-width);
-    --_divider-title-stroke-color: var(--sectiondivider-special-title-stroke-color);
-    --_divider-description: var(--sectiondivider-special-description);
-    --_divider-description-font-family: var(--sectiondivider-special-description-font-family);
-    --_divider-description-font-size: var(--sectiondivider-special-description-font-size);
-    --_divider-description-font-weight: var(--sectiondivider-special-description-font-weight);
-    --_divider-description-line-height: var(--sectiondivider-special-description-line-height);
+  .variant-lg .divider-eyebrow {
+    padding:
+      var(--sectiondivider-lg-eyebrow-padding-top, var(--sectiondivider-lg-eyebrow-padding, 0))
+      var(--sectiondivider-lg-eyebrow-padding-right, var(--sectiondivider-lg-eyebrow-padding, 0))
+      var(--sectiondivider-lg-eyebrow-padding-bottom, var(--sectiondivider-lg-eyebrow-padding, 0))
+      var(--sectiondivider-lg-eyebrow-padding-left, var(--sectiondivider-lg-eyebrow-padding, 0));
+  }
+  .variant-md .title-row {
+    padding:
+      var(--sectiondivider-md-title-padding-top, var(--sectiondivider-md-title-padding, 0))
+      var(--sectiondivider-md-title-padding-right, var(--sectiondivider-md-title-padding, 0))
+      var(--sectiondivider-md-title-padding-bottom, var(--sectiondivider-md-title-padding, 0))
+      var(--sectiondivider-md-title-padding-left, var(--sectiondivider-md-title-padding, 0));
+  }
+  .variant-md .description-row {
+    padding:
+      var(--sectiondivider-md-description-padding-top, var(--sectiondivider-md-description-padding, 0))
+      var(--sectiondivider-md-description-padding-right, var(--sectiondivider-md-description-padding, 0))
+      var(--sectiondivider-md-description-padding-bottom, var(--sectiondivider-md-description-padding, 0))
+      var(--sectiondivider-md-description-padding-left, var(--sectiondivider-md-description-padding, 0));
+  }
+  .variant-md .divider-eyebrow {
+    padding:
+      var(--sectiondivider-md-eyebrow-padding-top, var(--sectiondivider-md-eyebrow-padding, 0))
+      var(--sectiondivider-md-eyebrow-padding-right, var(--sectiondivider-md-eyebrow-padding, 0))
+      var(--sectiondivider-md-eyebrow-padding-bottom, var(--sectiondivider-md-eyebrow-padding, 0))
+      var(--sectiondivider-md-eyebrow-padding-left, var(--sectiondivider-md-eyebrow-padding, 0));
+  }
+  .variant-sm .title-row {
+    padding:
+      var(--sectiondivider-sm-title-padding-top, var(--sectiondivider-sm-title-padding, 0))
+      var(--sectiondivider-sm-title-padding-right, var(--sectiondivider-sm-title-padding, 0))
+      var(--sectiondivider-sm-title-padding-bottom, var(--sectiondivider-sm-title-padding, 0))
+      var(--sectiondivider-sm-title-padding-left, var(--sectiondivider-sm-title-padding, 0));
+  }
+  .variant-sm .description-row {
+    padding:
+      var(--sectiondivider-sm-description-padding-top, var(--sectiondivider-sm-description-padding, 0))
+      var(--sectiondivider-sm-description-padding-right, var(--sectiondivider-sm-description-padding, 0))
+      var(--sectiondivider-sm-description-padding-bottom, var(--sectiondivider-sm-description-padding, 0))
+      var(--sectiondivider-sm-description-padding-left, var(--sectiondivider-sm-description-padding, 0));
+  }
+  .variant-sm .divider-eyebrow {
+    padding:
+      var(--sectiondivider-sm-eyebrow-padding-top, var(--sectiondivider-sm-eyebrow-padding, 0))
+      var(--sectiondivider-sm-eyebrow-padding-right, var(--sectiondivider-sm-eyebrow-padding, 0))
+      var(--sectiondivider-sm-eyebrow-padding-bottom, var(--sectiondivider-sm-eyebrow-padding, 0))
+      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. Filter values are pushed onto
-     <feMorphology>/<feFlood> from JS — those attrs can't read CSS vars. */
+     outline instead of double-stacking. */
   svg.divider-label {
     display: block;
     overflow: visible;
@@ -461,23 +529,106 @@
   }
   svg.divider-label text {
     font-family: var(--_divider-title-font-family);
-    font-size: var(--_divider-title-font-size);
     font-weight: var(--_divider-title-font-weight);
+    font-size: var(--_divider-title-font-size);
+    letter-spacing: var(--_divider-title-letter-spacing);
     fill: currentColor;
   }
 
+  .title-row {
+    display: flex;
+    width: 100%;
+    justify-content: var(--_divider-justify);
+    align-items: center;
+    gap: 0.75em;
+  }
+  .title-inline {
+    display: inline-flex;
+  }
+
+  /* Eyebrow visibility + uppercase flow from per-variant CSS vars. */
+  .divider-eyebrow {
+    display: var(--_divider-eyebrow-display);
+    font-family: var(--_divider-eyebrow-font-family);
+    font-weight: var(--_divider-eyebrow-font-weight);
+    font-size: var(--_divider-eyebrow-font-size);
+    letter-spacing: var(--_divider-eyebrow-letter-spacing);
+    color: var(--_divider-eyebrow);
+    text-transform: var(--_divider-eyebrow-text-transform);
+  }
+
+  /* Description visibility from the per-variant `description-display` var.
+     The row keeps its flex layout when shown; `none` removes it from the
+     flow entirely. */
+  .description-row {
+    display: var(--_divider-description-display);
+    width: 100%;
+    justify-content: var(--_divider-justify);
+    align-items: center;
+    gap: 0.75em;
+  }
+  .description-inline {
+    display: inline-flex;
+  }
   .divider-description {
-    margin: var(--space-4) 0 0;
+    margin: 0;
     font-family: var(--_divider-description-font-family);
-    font-size: var(--_divider-description-font-size);
     font-weight: var(--_divider-description-font-weight);
+    font-size: var(--_divider-description-font-size);
     line-height: var(--_divider-description-line-height);
     color: var(--_divider-description);
+    font-style: italic;
+  }
+
+  /* Hairlines: all six render unconditionally; container style queries
+     reveal exactly one per the variant's `--_divider-hairline` value. */
+  .sd-hairline {
+    display: none;
+    background: var(--_divider-hairline-color);
+    height: var(--_divider-hairline-thickness);
+  }
+  .sd-hairline--row {
+    width: 100%;
+  }
+  .sd-hairline--side {
+    flex: 1;
+    min-width: 0;
+  }
+
+  @container sd style(--_divider-hairline: above-label) {
+    .sd-hairline-above-label { display: block; }
+  }
+  @container sd style(--_divider-hairline: through-label) {
+    .sd-hairline-through-label { display: block; }
+  }
+  @container sd style(--_divider-hairline: below-label) {
+    .sd-hairline-below-label { display: block; }
+  }
+  @container sd style(--_divider-hairline: above-description) {
+    .sd-hairline-above-description { display: block; }
+  }
+  @container sd style(--_divider-hairline: through-description) {
+    .sd-hairline-through-description { display: block; }
+  }
+  @container sd style(--_divider-hairline: below-description) {
+    .sd-hairline-below-description { display: block; }
+  }
+
+  /* When description is hidden, any description-targeted hairline is hidden
+     too — the gap follows the description. No editor-side snap logic needed. */
+  @container sd style(--_divider-description-display: none) {
+    .sd-hairline-above-description,
+    .sd-hairline-through-description,
+    .sd-hairline-below-description { display: none; }
   }
 
-  @media (max-width: 600px) {
-    .section-divider {
-      padding: var(--space-12) var(--space-16);
+  /* In start alignment the text hugs the left edge, so the leading side
+     hairline would have zero width — hide it and let the trailing one
+     stretch to the right edge. Container style query rather than a class. */
+  @container sd style(--_divider-align: start) {
+    .title-row .sd-hairline--side:first-child,
+    .description-row .sd-hairline--side:first-child {
+      display: none;
     }
   }
 </style>