@reliability-design/web 1.4.8 → 1.4.9

package/dist/index.mjs

@@ -105,11 +105,23 @@ RelAccordion.styles = css`
       pointer-events: none;
     }
 
+    /* No CSS border property here, deliberately. Figma's Plain stroke is
+       strokeAlign=INSIDE, which OVERLAYS the content: verified against the
+       live file, the Head frame is 539 wide inside a 539 component in every
+       one of the 24 variants, Plain and Shadow alike. A CSS border insets
+       its children instead, which pushed the header in by 1px on all four
+       sides — so the hover wash stopped 1px short of the card edge and a
+       ring of untinted --rel-bg-neutral survived around it. That ring is
+       what read as "a border appears on hover", and it appeared on EVERY
+       variant because the border lived on this shared base; Shadow merely
+       set border-color: transparent, which still reserves the 1px.
+       An outline with a negative offset reproduces strokeAlign=INSIDE
+       exactly: no layout inset, painted on top, follows border-radius, and
+       not clipped by this element's own overflow: hidden. */
     .accordion {
       background: var(--rel-bg-neutral);
       box-sizing: border-box;
       border-radius: var(--_acc-radius, var(--rel-border-radius-xs));
-      border: 1px solid var(--rel-border-subtle);
       overflow: hidden;
       box-shadow: var(--rel-shadows-sm);
     }
@@ -118,8 +130,9 @@ RelAccordion.styles = css`
       --_acc-radius: var(--rel-border-radius-xs);
     }
 
+    /* Live Figma: Style=Shadow carries NO stroke at all (strokes: []). */
     :host([appearance="shadow"]) .accordion {
-      border-color: transparent;
+      outline: none;
       box-shadow: var(--rel-shadows-sm);
     }
 
@@ -127,11 +140,32 @@ RelAccordion.styles = css`
       --_acc-radius: 0px;
     }
 
+    /* Live Figma: Style=Plain is strokeWeight 1, strokeAlign INSIDE. */
     :host([appearance="plain"]) .accordion {
-      border-color: var(--rel-border-subtle);
+      outline: 1px solid var(--rel-border-subtle);
+      outline-offset: -1px;
       box-shadow: none;
     }
 
+    /* box-shadow is NOT painted in forced-colors mode (Windows High Contrast)
+       but outline is — the same UA behaviour styles/focus-ring.ts documents,
+       and the reason its outer ring is an outline rather than a third shadow
+       layer. It matters more here than there: appearance="shadow" has no
+       stroke in Figma, so once the shadow is dropped the card has NO boundary
+       at all and the header, body and page all read as one surface.
+       This used to work by accident — while the base rule declared a 1px solid
+       transparent border, the UA forced that transparent border to a visible
+       colour. Removing the border to fix the hover inset took the accident
+       away with it, so the edge is restored deliberately.
+       CanvasText rather than a token: in forced-colors the user's palette is
+       the whole point. Plain already has an outline and simply re-asserts it. */
+    @media (forced-colors: active) {
+      .accordion {
+        outline: 1px solid CanvasText;
+        outline-offset: -1px;
+      }
+    }
+
     /* ── Header ───────────────────────────────────────────────── */
 
     .header {
@@ -552,8 +586,12 @@ RelAlert.styles = css2`
       gap: var(--rel-spacing-lg);
       padding: var(--rel-spacing-md);
       border-radius: var(--rel-border-radius-sm);
-      min-width: 360px;
       box-sizing: border-box;
+      /* No min-width. Figma's Alert is a fixed 400 with minWidth UNSET on all
+         twelve variants (verified on the live file), so a 360px floor was
+         code-invented. It stopped the alert fitting any column narrower than
+         360px and is what forced the docs Variants grid to minmax(360px, 1fr).
+         A consumer who wants a floor can set one on the host. */
     }
 
     /* Figma "Frame 10": the leading icon and the content column, 12px apart.
@@ -566,10 +604,17 @@ RelAlert.styles = css2`
       min-width: 0;
     }
 
+    /* Figma "Content": layoutGrow 1, layoutSizingHorizontal FILL — it takes the
+       width left over beside the leading icon. Without flex it hugged its text,
+       so a short message left the column narrow and a long one wrapped earlier
+       than it needed to. min-width: 0 is the companion every flex child needs
+       before it is allowed to shrink below its content. */
     .rel-content {
       display: flex;
       flex-direction: column;
       gap: var(--rel-spacing-3xs);
+      flex: 1;
+      min-width: 0;
     }
 
     .rel-message1 {
@@ -653,9 +698,16 @@ RelAlert.styles = css2`
     /* COLORS — semantic status tokens carry both light and dark modes.
        Base classes are the SUBTLE style (Figma Style=Subtle): tone light fill,
        no border, tone-colored title. */
-    .rel-alert {
-      border: 1px solid transparent;
-    }
+    /* No border here. Only Style=Outline has a stroke in Figma — Solid and
+       Subtle report strokes: NONE on the live file — and Outline's is
+       strokeAlign: INSIDE, which OVERLAYS the content rather than insetting it.
+       A CSS border does inset, so declaring a transparent one on the shared
+       base made every variant's content box 1px tighter than Figma and
+       reserved a pixel that only one appearance ever paints in.
+       The outline block below draws the real thing with outline-offset: -1px,
+       which reproduces inside-aligned stroke exactly: no layout inset, painted
+       on top, and it follows border-radius. Same fix as rel-accordion, which
+       had the identical bug. */
 
     .alert-neutral {
       background: var(--rel-bg-neutral);
@@ -752,26 +804,45 @@ RelAlert.styles = css2`
     /* Outline style (Figma Style=Outline): no fill, tone border, tone title */
     :host([appearance="outline"]) .rel-alert {
       background: transparent;
+      outline: 1px solid transparent;
+      outline-offset: -1px;
     }
 
     :host([appearance="outline"]) .alert-neutral {
-      border-color: var(--rel-border-default);
+      outline-color: var(--rel-border-default);
     }
 
     :host([appearance="outline"]) .alert-info {
-      border-color: var(--rel-border-info);
+      outline-color: var(--rel-border-info);
     }
 
     :host([appearance="outline"]) .alert-success {
-      border-color: var(--rel-border-success);
+      outline-color: var(--rel-border-success);
     }
 
     :host([appearance="outline"]) .alert-warning {
-      border-color: var(--rel-border-warning);
+      outline-color: var(--rel-border-warning);
     }
 
     :host([appearance="outline"]) .alert-destructive {
-      border-color: var(--rel-border-danger);
+      outline-color: var(--rel-border-danger);
+    }
+
+    /* Every appearance keeps a boundary in forced-colors mode (Windows High
+       Contrast), where the UA overrides fills and a Solid or Subtle alert would
+       otherwise be indistinguishable from the page. This used to work by
+       accident: while the shared base declared a 1px transparent border, the UA
+       forced it to a visible colour. Removing that border to fix the content
+       inset took the accident with it, so the edge is restored deliberately —
+       outline rather than border because outline is painted in that mode and
+       because it does not re-introduce the inset. CanvasText, not a token: in
+       forced-colors the user's palette is the point. Outline appearance simply
+       re-asserts what it already has. Same treatment as rel-accordion. */
+    @media (forced-colors: active) {
+      .rel-alert {
+        outline: 1px solid CanvasText;
+        outline-offset: -1px;
+      }
     }
 
     /* Close-icon colour on Subtle and Outline: the tone colour, matching the
@@ -1127,16 +1198,28 @@ var RelTextfield = class extends LitElement3 {
     </div>`;
     const belowTemplate = html3`<div part="helper" class="${["textfield-support", isError ? "error" : "", belowText ? "" : "empty"].filter(Boolean).join(" ")}" id="${describedById}" aria-live="polite">${this.helperIcon && belowText ? html3`<rel-icon part="helper-icon" name="${this.helperIcon}" aria-hidden="true"></rel-icon>` : ""}${belowText ?? ""}</div>`;
     if (this.variant === "legend") {
-      const fieldsetClass = ["field-fieldset", this.multiline ? "multiline" : ""].filter(Boolean).join(" ");
+      const legendContainerClass = [
+        "textfield-container",
+        this.isDisabled ? "disabled" : "",
+        this.multiline ? "multiline" : "",
+        prefixClear ? "prefix-clear" : ""
+      ].filter(Boolean).join(" ");
       return html3`
         <div class="${wrapperClasses}">
-          <fieldset part="control" class="${fieldsetClass}" @mousedown="${this.handleControlMousedown}"><legend class="field-legend" id="${legendId}">${labelHidden ? "" : this.label ?? ""}${this.required && !labelHidden ? html3`<span class="required-mark" aria-hidden="true">*</span>` : ""}</legend>
-            <div class="field-row">
-              ${prefixTemplate}
-              <div class="textfield-field">${inputTemplate}</div>
-              ${suffixTemplate}
-            </div>
-          </fieldset>
+          <div part="control" class="${legendContainerClass}" @mousedown="${this.handleControlMousedown}">
+            <!-- aria-hidden on the FIELDSET, and deliberately not countered on
+                 the legend: aria-hidden="false" cannot un-hide a descendant of
+                 a hidden element, so writing it would only mislead. Hiding is
+                 correct here — the fieldset now wraps nothing but the legend,
+                 so leaving it exposed would announce an empty group before the
+                 field. The name still works: accname step 2B includes hidden
+                 nodes when they are reached through aria-labelledby, which is
+                 how the input gets its name from this legend's id. -->
+            <fieldset class="legend-outline" aria-hidden="true"><legend class="field-legend" id="${legendId}"><span class="legend-text">${labelHidden ? "" : this.label ?? ""}${this.required && !labelHidden ? html3`<span class="required-mark" aria-hidden="true">*</span>` : ""}</span></legend></fieldset>
+            ${prefixTemplate}
+            <div class="textfield-field">${inputTemplate}</div>
+            ${suffixTemplate}
+          </div>
           ${belowTemplate}
         </div>
       `;
@@ -1249,7 +1332,23 @@ RelTextfield.styles = css3`
 
     :host([floatinglabel]) .textfield-label {
       position: absolute;
-      left: var(--_rel-tf-pad-x, var(--rel-spacing-sm));
+      /* ZERO, and the Figma numbers are why. Live spec, TextField Size=Medium
+         Label Type=Floating: the "Inner Content" frame sits at dx=0 with
+         padding-left 12, and the "Floating Label" frame sits at dx=12 with its
+         own padding-left 4 — so the label BOX aligns with the content edge and
+         its TEXT lands 4px in, that 4px being the notch padding rather than an
+         indent.
+         .textfield-field already begins at the control's border plus inline
+         padding, i.e. at the content edge, so left: 0 puts the box exactly
+         where Figma puts it. The old --_rel-tf-pad-x applied that inset a
+         SECOND time and pushed the text to 29px from the control edge; briefly
+         correcting it to -4px then over-shot the other way to 13px and left
+         almost no border between the corner and the notch. Figma's own value is
+         16px from the control edge; we land on 17px, the extra 1px being our
+         border, which Figma's inside-aligned stroke absorbs into its padding.
+         With a prefix affix present .textfield-field starts after it, so the
+         label follows the icon. */
+      left: 0;
       top: 50%;
       transform: translateY(-50%);
       color: var(--rel-text-placeholder);
@@ -1280,19 +1379,59 @@ RelTextfield.styles = css3`
        but a ring and a notch cannot coexist on one box — see the legend
        variant's own note below — and Recipe B requires the ring. The surface
        colour is therefore a documented seam: --rel-textfield-surface. */
+    /* TWO OVERLAPPING strips, not one exact one. The reference: the label is
+       top: 0 against .textfield-field, whose top edge is the container's
+       CONTENT-box top, so in the label's own coordinates 50% is one
+       border-width below the border-box top. Measured from there the ring
+       occupies [50% - notch, 50% - border] and the border [50% - border, 50%].
+       A single strip cut to exactly that band leaked at some zoom levels and
+       not others (v1.4.9 "slash" report): the border and box-shadow are
+       pixel-snapped by Blink, while a strip inside a translateY(-50%) label
+       rasterises at a fractional offset, so at 105%, 115%, 135% zoom, and at
+       Windows 125% scaling with NO zoom, their edges disagreed by under a
+       device pixel and a hairline of ring or border showed through the text.
+       No offset tuning can fix that; it is right at one scale factor only.
+       So each strip overshoots into paint of ITS OWN colour, and every edge
+       lands either on same-colour paint or inside the other strip's opaque
+       interior:
+         ::before  surface colour, the whole band + 2px above + 2px below
+         ::after   the control's FILL, the border + 3px below, painted on top
+       The strips must OVERLAP, not abut. Abutting them at the ring/border
+       junction leaked a constant quarter of the ring colour: two anti-aliased
+       edges on one device row cover a*(1-a) of what is underneath, 0.25 at
+       a = 0.5. Measured as exactly 61/244 before the overlap, 0 after.
+       The overshoot is 2px, not 1: the strip snaps to the grid in the label's
+       own (fractionally offset) space and the ring in the container's, so
+       the two can disagree by up to a full device pixel, and a 1px overshoot
+       still left a 34/255 residue on the ring's outermost row at 105% zoom.
+       Every term derives from --_rel-tf-notch-h / --_rel-tf-border-w, so a
+       ring change carries through. The ::after fill is the container's own
+       background, not the surface seam, so the overshoot into the interior
+       is invisible. Gate: qa/paint-geometry.mjs SLASH pass, zoom x DSF. */
     :host([floatinglabel]) .textfield-wrapper.focused .textfield-label::before,
     :host([floatinglabel]) .textfield-wrapper.has-value .textfield-label::before {
       content: "";
       position: absolute;
       left: 0;
       right: 0;
-      top: 50%;
-      height: var(--_rel-tf-notch-h, 1px);
-      transform: translateY(-50%);
+      top: calc(50% - var(--_rel-tf-notch-h, 1px) - 2px);
+      height: calc(var(--_rel-tf-notch-h, 1px) + 4px);
       background: var(--rel-textfield-surface, var(--rel-bg-neutral));
       z-index: -1;
     }
 
+    :host([floatinglabel]) .textfield-wrapper.focused .textfield-label::after,
+    :host([floatinglabel]) .textfield-wrapper.has-value .textfield-label::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: calc(50% - var(--_rel-tf-border-w, 1px));
+      height: calc(var(--_rel-tf-border-w, 1px) + 3px);
+      background: var(--rel-bg-neutral);
+      z-index: -1;
+    }
+
     /* Figma keeps the docked label on --rel-text-label and ramps it per size:
        body/md/regular (L), body/sm/regular (M), body/xs/regular (S). */
     :host([floatinglabel]) .textfield-wrapper.focused .textfield-label,
@@ -1366,6 +1505,9 @@ RelTextfield.styles = css3`
     :host([floatinglabel]) .textfield-wrapper.disabled .textfield-label::before {
       background: var(--rel-textfield-surface, var(--rel-bg-neutral-elevated-2));
     }
+    :host([floatinglabel]) .textfield-wrapper.disabled .textfield-label::after {
+      background: var(--rel-bg-neutral-elevated-2);
+    }
 
     /* Container */
     .textfield-container {
@@ -1778,11 +1920,17 @@ RelTextfield.styles = css3`
       color: var(--rel-text-placeholder);
     }
 
-    :host([floatinglabel]) .textfield-input::placeholder {
+    /* Hiding the placeholder only makes sense where a floating label is
+       standing in its place. The legend variant has no floating label — its
+       label lives in the notch at every state, and the legend branch renders
+       no .textfield-label at all — so applying this there left an empty field
+       at rest: no placeholder AND no label. Excluding legend restores the
+       placeholder for the one variant that has nothing to replace it. */
+    :host([floatinglabel]:not([variant="legend"])) .textfield-input::placeholder {
       opacity: 0;
     }
 
-    :host([floatinglabel]) .textfield-wrapper.focused .textfield-input::placeholder {
+    :host([floatinglabel]:not([variant="legend"])) .textfield-wrapper.focused .textfield-input::placeholder {
       opacity: 1;
     }
 
@@ -1850,56 +1998,134 @@ RelTextfield.styles = css3`
     /* ── Legend (notched-outline) variant ──
        Native <fieldset>/<legend>: the legend notches the top border and stays
        fixed in place across all states (no float/animation). */
-    :host([variant="legend"]) .field-fieldset {
-      position: relative;
+    /* The container keeps a TRANSPARENT border rather than dropping it. The
+       border is 1px of layout that the default variant also has, and the
+       inline padding is measured from inside it — remove it and a legend
+       field's text sits 1px left of its default-variant neighbour in the same
+       form. The visible stroke is painted by .legend-outline on top, exactly
+       over this transparent one, so the two never double up (including in
+       forced-colors, where they coincide rather than stack). */
+    :host([variant="legend"]) .textfield-container {
+      border-color: transparent;
+      background: transparent;
+      /* The legend protrudes above the top edge; overflow: hidden from the
+         base rule would slice its top half off. */
+      overflow: visible;
+    }
+
+    /* The decorative outline layer. inset: 0 makes its border box identical to
+       the container's, so the painted outline IS --_rel-tf-h — 32 / 40 / 48,
+       with no legend-half subtracted, which is the whole bug this replaced.
+       pointer-events: none keeps clicks going to the control beneath, and the
+       content is lifted above it rather than this being pushed to z-index: -1,
+       because .textfield-container is position: relative with z-index: auto
+       and therefore does NOT create a stacking context — a negative z-index
+       here could slip behind an ancestor's background. */
+    :host([variant="legend"]) .legend-outline {
+      position: absolute;
+      /* NOT inset: 0. An absolutely positioned box's insets resolve against
+         its containing block's PADDING box, and the container keeps a 1px
+         transparent border (see above), so inset: 0 put this layer's border
+         box 1px inside the container's on every side — a painted outline 2px
+         short of the ladder at every size, measured 30/38/46 against 32/40/48.
+         Pulling out by the border width lands the two border boxes exactly on
+         each other, which is what makes the painted height the ladder value. */
+      inset: calc(-1 * var(--_rel-tf-border-w, 1px));
+      /* The legend has a small height (see .field-legend), and Blink then
+         paints the fieldset's top border (legend-height - border) / 2 lower
+         than the layer's top edge. Pull the top edge up by that outset so the
+         painted line stays exactly on the container's top edge and the
+         painted height stays on the 32 / 40 / 48 ladder. Only the top moves;
+         the bottom stays put. */
+      --_rel-tf-legend-h: 3px;
+      --_rel-tf-legend-outset: calc(
+        (var(--_rel-tf-legend-h) - var(--_rel-tf-border-w, 1px)) / 2
+      );
+      top: calc(-1 * var(--_rel-tf-border-w, 1px) - var(--_rel-tf-legend-outset));
       margin: 0;
       min-inline-size: 0;
-      padding: 0;
+      /* Aligns the legend TEXT with the input text. The legend carries its own
+         --rel-spacing-2xs of side padding to cut the notch a little wider than
+         the glyphs, so the layer insets by that much less than the control's
+         own inline padding. Derived from --_rel-tf-pad-x rather than restated,
+         which is what makes the small size line up: the old rule hard-coded
+         --rel-spacing-sm and could not see the size ramp at all, because
+         --_rel-tf-pad-x is declared on .textfield-container and the legend
+         variant never rendered one. */
+      padding-inline: calc(
+        var(--_rel-tf-pad-x, var(--rel-spacing-sm)) - var(--rel-spacing-2xs)
+      );
+      padding-block: 0;
       border: 1px solid var(--rel-border-default);
       border-radius: var(--rel-border-radius-xs);
       background: var(--rel-bg-neutral);
+      pointer-events: none;
       transition: border-color 0.2s;
     }
 
+    /* Lift the real content above the decorative layer. */
+    :host([variant="legend"]) .textfield-field,
+    :host([variant="legend"]) .textfield-affix {
+      position: relative;
+      z-index: 1;
+    }
+
+    /* The legend is taken OUT OF FLOW — height: 0 with visible overflow.
+       Blink draws a fieldset's top border through the legend's VERTICAL
+       MIDDLE, so an in-flow legend pushes the painted line down by half its
+       own line-height: measured 23 / 30 / 37 against the 32 / 40 / 48 ladder,
+       which is exactly half of the 18 / 20 / 22 legend line-heights. Collapsing
+       the legend's height puts its middle on the layer's top edge, so the
+       border is drawn there and the painted outline is the full ladder value.
+       The notch still cuts, because the gap spans the legend's WIDTH and that
+       is unaffected. The text is then lifted back onto the line by
+       .legend-text, which needs its own element: translateY(-50%) on a
+       zero-height box resolves to zero, so the transform has to live on a
+       child that still has height. */
+    /* NOT height: 0 any more, and the reason is Blink's cutout rule. The gap
+       it cuts in the top border for the legend is max(legend height, border
+       width) tall, measured from the layer's top edge. A zero-height legend
+       therefore gets a cutout EXACTLY the border's height — and at any
+       fractional scale factor (Windows 125%: DSF 1.25) the pixel-snapped
+       border lands partly outside that rect, so it painted straight through
+       the legend text at half strength (measured 122/244 on every legend cell
+       at DSF 1.25, clean at DSF 1). A 3px legend makes the cutout 3px tall
+       with a pixel of margin either side of the border. The price is Blink's
+       other rule — the border is drawn through the legend's vertical middle,
+       (3 - 1) / 2 = 1px down — which .legend-outline cancels by starting 1px
+       higher, so the painted outline is still the ladder value. The text is
+       lifted onto that line by .legend-text below. */
     :host([variant="legend"]) .field-legend {
-      margin-left: var(--rel-spacing-sm);
+      display: block;
+      height: var(--_rel-tf-legend-h, 3px);
+      overflow: visible;
+      margin: 0;
       padding: 0 var(--rel-spacing-2xs);
       color: var(--rel-text-label);
-      font-family: var(--rel-body-sm-medium-font-family);
-      font-weight: var(--rel-body-sm-medium-font-weight);
-      font-size: var(--rel-body-sm-medium-font-size);
-      line-height: var(--rel-body-sm-medium-line-height);
-      letter-spacing: var(--rel-body-sm-medium-letter-spacing);
+      /* REGULAR, not medium. Figma's floated label is 400 at every size — the
+         same finding already recorded at rel-select.ts. This rule used to be
+         the only one in the ramp at 500, so the DEFAULT size rendered heavier
+         than both small and large, which set their own regular weights below. */
+      font-family: var(--rel-body-sm-regular-font-family);
+      font-weight: var(--rel-body-sm-regular-font-weight);
+      font-size: var(--rel-body-sm-regular-font-size);
+      line-height: var(--rel-body-sm-regular-line-height);
+      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
     }
 
-    :host([variant="legend"]) .textfield-input {
-      width: 100%;
-      box-sizing: border-box;
+    /* Carries the legend's text back onto the border line the zero-height
+       legend now sits on. inline-block so it has a height of its own for the
+       percentage to resolve against. */
+    :host([variant="legend"]) .legend-text {
+      display: inline-block;
+      /* Centre the text on the painted line, which sits at the legend's
+         vertical middle (half the legend's height below its top). */
+      transform: translateY(calc(-50% + var(--_rel-tf-legend-h, 3px) / 2));
     }
 
-    /* Legend on the same 32/40/48 scale. The fieldset's border box excludes
-       the legend's protruding top half, so sizing the fieldset itself keeps
-       the visible outline at exactly --_rel-tf-h; the row fills the remaining
-       content area and centres the input. Multiline keeps auto height. */
-    :host([variant="legend"]) .field-fieldset:not(.multiline) {
+    :host([variant="legend"]) .textfield-input {
+      width: 100%;
       box-sizing: border-box;
-      height: var(--_rel-tf-h, 40px);
-      /* Flex column so the row fills the content box below the legend (a
-         percentage height on the row doesn't resolve inside a fieldset). The
-         <legend> is never a flex item, so the notch is unaffected. */
-      display: flex;
-      flex-direction: column;
-    }
-    :host([variant="legend"]) .field-fieldset:not(.multiline) .field-row {
-      flex: 1;
-      min-height: 0;
-    }
-    :host([variant="legend"]) .field-fieldset:not(.multiline) .textfield-input {
-      padding-top: 0;
-      padding-bottom: 0;
-      /* Fill the row so the whole outline is clickable (see the default
-         variant's note above). */
-      align-self: stretch;
     }
 
     /* labelStyle="none" + legend: nothing to seat in the notch, so drop the
@@ -1907,58 +2133,73 @@ RelTextfield.styles = css3`
     :host([label-style="none"][variant="legend"]) .field-legend {
       display: none;
     }
-
-    /* Legend: prefix | field | suffix sit in a flex row under the legend. The
-       fieldset's content box starts below the legend's midline, so a fill
-       prefix can't reach the top border here — square it off instead. */
-    :host([variant="legend"]) .field-row {
-      display: flex;
-      align-items: center;
-    }
-    :host([variant="legend"]) .textfield-affix.prefix.fill {
-      border-radius: 0;
+    /* No legend rendered means no outset either, so the layer goes back to
+       sitting exactly on the container's border box. */
+    :host([label-style="none"][variant="legend"]) .legend-outline {
+      top: calc(-1 * var(--_rel-tf-border-w, 1px));
     }
 
-    /* Hover */
-    :host([variant="legend"]) .field-fieldset:hover {
-      border-color: var(--rel-border-accent);
+    /* A fill prefix used to be squared off because the fieldset's content box
+       started below the legend's midline, so it could not reach the top
+       border. The content now rides the ordinary container row, whose top IS
+       the border, so the fill prefix can keep the control's own radius. */
+
+    /* Every state below paints on the OUTLINE LAYER, not the container: the
+       container's own border is transparent by design. The container must also
+       be told to drop the shared focus ring — see the note on focus. */
+    :host([variant="legend"]) .textfield-wrapper:not(.focused):not(.error):not(.disabled)
+      .textfield-container:hover .legend-outline {
       border-color: var(--rel-text-placeholder);
     }
 
-    /* Focus — border-color only. A box-shadow/outline ring hugs the full
-       rectangular border-box and would draw across the notch, appearing to
-       strike through the legend. The legend also recolors on focus (below). */
-    :host([variant="legend"]) .textfield-wrapper.focused .field-fieldset,
-    :host([variant="legend"]) .field-fieldset:focus-within {
-      border-color: var(--rel-border-strong);
+    /* Focus — border-color only, no ring. A box-shadow or outline ring hugs
+       the full rectangular border box and would draw straight across the
+       notch, reading as a line struck through the legend. That is the same
+       collision the floating label has on the other variants, except here
+       there is no mask strip to hide it, so the ring is dropped outright and
+       the legend recolours instead. */
+    :host([variant="legend"]) .textfield-wrapper.focused .textfield-container,
+    :host([variant="legend"]) .textfield-container:focus-within {
       box-shadow: none;
+      border-color: transparent;
+    }
+    :host([variant="legend"]) .textfield-wrapper.focused .legend-outline,
+    :host([variant="legend"]) .textfield-container:focus-within .legend-outline {
+      border-color: var(--rel-border-strong);
     }
     :host([variant="legend"]) .textfield-wrapper.focused .field-legend,
-    :host([variant="legend"]) .field-fieldset:focus-within .field-legend {
+    :host([variant="legend"]) .textfield-container:focus-within .field-legend {
       color: var(--rel-border-strong);
     }
 
     /* Error */
-    :host([variant="legend"]) .textfield-wrapper.error .field-fieldset {
-      border-color: var(--rel-border-danger);
+    :host([variant="legend"]) .textfield-wrapper.error .textfield-container {
       box-shadow: none;
+      border-color: transparent;
+    }
+    :host([variant="legend"]) .textfield-wrapper.error .legend-outline {
+      border-color: var(--rel-border-danger);
     }
     :host([variant="legend"]) .textfield-wrapper.error .field-legend {
       color: var(--rel-text-danger);
     }
 
-    /* Disabled */
-    :host([variant="legend"]) .textfield-wrapper.disabled .field-fieldset {
+    /* Disabled — the fill moves to the layer with the stroke, since the
+       container is transparent and would otherwise paint the dulled surface
+       underneath the layer's own background. */
+    :host([variant="legend"]) .textfield-wrapper.disabled .textfield-container {
+      background: transparent;
+    }
+    :host([variant="legend"]) .textfield-wrapper.disabled .legend-outline {
       background: var(--rel-bg-neutral-elevated-2);
       border-color: var(--rel-border-accent);
-      cursor: not-allowed;
     }
     :host([variant="legend"]) .textfield-wrapper.disabled .field-legend {
       color: var(--rel-text-disabled);
     }
 
     /* Readonly */
-    :host([variant="legend"]) .textfield-wrapper.readonly .field-fieldset {
+    :host([variant="legend"]) .textfield-wrapper.readonly .textfield-container {
       cursor: default;
     }
 
@@ -2177,20 +2418,28 @@ var RelCheckbox = class extends LitElement4 {
             .checked=${this.status === "checked"}
             .indeterminate=${this.status === "indeterminate"}
             aria-checked="${this.status === "indeterminate" ? "mixed" : nothing3}"
+            aria-label="${this.fieldAriaLabel ?? nothing3}"
             @click=${this.toggle}
             @blur=${() => this._onTouched()}
             ?disabled=${this.state === "disabled"}
           />
 
+          <!-- Both marks are Figma's own paths, read from the live Published DS
+               file (set 8418:1987) on 2026-09-25 and left in their authored
+               16-unit box. Figma knocks these out of the filled square; we paint
+               them in the inverse tone over it instead, which is the same
+               picture and keeps the existing per-state fill rules working.
+               Do not re-scale the coordinates — the svg is sized to the drawn
+               square so one unit here is one Figma unit. -->
           <span class="box">
-            <svg class="check-icon" viewBox="0 0 18 14" fill="var(--rel-text-inverse)">
+            <svg class="check-icon" viewBox="0 0 16 16" fill="var(--rel-text-inverse)">
               <path
-                d="M6.44 14L0.5 7.36l1.49-1.66L6.44 10.68 16.01 0 17.5 1.66z"
+                d="M6.22222 12.4444L1.77778 8L3.03111 6.74667L6.22222 9.92889L12.9689 3.18222L14.2222 4.44444L6.22222 12.4444Z"
               />
             </svg>
 
-            <svg class="indeterminate-icon" viewBox="0 0 16 2" fill="var(--rel-text-inverse)">
-              <rect width="16" height="2" />
+            <svg class="indeterminate-icon" viewBox="0 0 16 16" fill="var(--rel-text-inverse)">
+              <rect x="3.55556" y="7.11111" width="8.88889" height="1.77778" />
             </svg>
           </span>
 
@@ -2291,11 +2540,25 @@ RelCheckbox.styles = css4`
        The inset is expressed as a ratio rather than four fractional pixel
        values, so it stays exact at any device pixel ratio and follows the
        frame if the ramp ever changes.
-       NOTE: the 2px border weight is UNVERIFIED against Figma. The control is
-       flattened artwork (a filled VECTOR, not a frame with a stroke — see
-       figma-bug E), so the spec gives the square's outer size but says nothing
-       about its stroke. Carried forward from the previous implementation pending the unflattening
-       request; one line to change if the designer publishes it. */
+
+       The control was UNFLATTENED in the 2026-09-23 Published DS revision, so
+       the stroke and the marks are no longer guesses. Verified against the live
+       file (set 8418:1987, node paths read 2026-09-25): the artwork box is 16
+       units wide and EVERY value in it is 16/9 = 1.7778 units —
+
+         corner radius              1.7778  (outer rect: C0.8 0 0 0.8 0 1.77778)
+         border thickness           1.7778  (outer 0…16 hollowed to 1.7778…14.2222)
+         indeterminate dash height  1.7778  (y 7.11111 → 8.88889)
+         indeterminate dash width   8.8889  (x 3.55556 → 12.4444, centred on 8)
+
+       Because the artwork box IS the drawn square (both are 0.8 × the frame),
+       one sixteenth of the square is one unit, so a ninth of the square is the
+       single number that governs radius, border and dash alike. That is why
+       they are derived below rather than tabulated per size: four hand-written
+       radii are what let large and extra-large silently share medium's 4px.
+       Figma leaves the INNER corner square, which border-radius reproduces
+       for free — an outer radius equal to the border width leaves no inner
+       curve. */
     .box {
       width: var(--_rel-cb-size);
       height: var(--_rel-cb-size);
@@ -2306,6 +2569,12 @@ RelCheckbox.styles = css4`
       flex-shrink: 0;
     }
 
+    /* ONE box-shadow declaration, and every state contributes by setting
+       --_rel-cb-border-color instead of restating the shadow. Restating it per
+       state is the trap rel-stepper's connector hit and styles/focus-ring.ts
+       documents at length: box-shadow is a single property, so two rules that
+       both declare it do not compose — specificity picks a winner and the loser
+       vanishes silently. */
     .box::before {
       content: "";
       position: absolute;
@@ -2313,11 +2582,30 @@ RelCheckbox.styles = css4`
       inset: 10%;
       box-sizing: border-box;
       border-radius: var(--_rel-cb-radius);
-      border: 2px solid var(--rel-text-default);
+      /* Resting wall colour; the state rules below override just this. */
+      --_rel-cb-border-color: var(--rel-text-default);
+      box-shadow: inset 0 0 0 var(--_rel-cb-border) var(--_rel-cb-border-color);
       background: transparent;
       transition: all 0.2s;
     }
 
+    /* box-shadow is NOT painted in forced-colors mode (Windows High Contrast) —
+       the same UA behaviour that styles/focus-ring.ts keeps its outer ring on an
+       outline for. For a focus ring that costs a refinement; here it would erase
+       the ENTIRE affordance, because the wall is all there is to see on an
+       unchecked box. So forced-colors gets a real border back.
+
+       Safe to add rather than swap: the 10% inset pins all four edges, so the
+       drawn square's outer edge is 80% of the frame whatever the wall is made
+       of, and the shadow it sits beside is not painted here anyway. Bound to
+       CanvasText because the forced palette, not the token, is what the user
+       asked for. */
+    @media (forced-colors: active) {
+      .box::before {
+        border: 1px solid CanvasText;
+      }
+    }
+
     /* Figma puts the focus ring on the WHOLE component at 1.5px OUTSIDE, not
        around the control alone. Matches rel-radio, which already does this. */
     .wrapper:has(input:focus-visible) {
@@ -2329,9 +2617,16 @@ RelCheckbox.styles = css4`
     }
 
     svg {
-      /* Proportional to the frame, so the mark tracks the drawn square. */
-      width: 55%;
-      height: 55%;
+      /* Both marks are authored in Figma's 16-unit artwork box, and that box is
+         the drawn square — 80% of the frame, the same as ::before's inset. So
+         the svg covers the square exactly and every coordinate inside it is a
+         Figma unit; position and size fall out of the path instead of being
+         re-derived here. This was 55%/55% against an 8:1 viewBox, which (with
+         preserveAspectRatio defaulting to meet) rendered the dash at 55%/8 =
+         6.875% of the frame — 1.6× thinner than Figma's 11.11%, and fractional
+         at every size, which is what made it look blurred. */
+      width: 80%;
+      height: 80%;
       position: relative;
       display: none;
     }
@@ -2347,7 +2642,7 @@ RelCheckbox.styles = css4`
        tokens for this same glyph. */
     .checked .box::before {
       background: var(--rel-text-default);
-      border-color: var(--rel-text-default);
+      --_rel-cb-border-color: var(--rel-text-default);
     }
 
     .checked .check-icon {
@@ -2369,13 +2664,13 @@ RelCheckbox.styles = css4`
        glyph with --rel-text-danger, a text token, never a border-* one; the two
        are the same value in light mode but diverge in dark (red-300 vs -400). */
     .error .box::before {
-      border-color: var(--rel-text-danger);
+      --_rel-cb-border-color: var(--rel-text-danger);
     }
 
     /* Error checked — error fill, transparent checkmark */
     .error.checked .box::before {
       background: var(--rel-action-danger-fill);
-      border-color: var(--rel-action-danger-fill);
+      --_rel-cb-border-color: var(--rel-action-danger-fill);
     }
 
     /* Figma State=Error tints the SUPPORTING text danger; the label stays
@@ -2398,7 +2693,7 @@ RelCheckbox.styles = css4`
        (gray-500 vs gray-700) and identical to --rel-text-caption, so a hovered
        label was indistinguishable from supporting text. */
     .default .row:hover .box::before {
-      border-color: var(--rel-text-label);
+      --_rel-cb-border-color: var(--rel-text-label);
     }
 
     .default .row:hover .label {
@@ -2407,7 +2702,7 @@ RelCheckbox.styles = css4`
 
     .default.checked .row:hover .box::before {
       background: var(--rel-text-label);
-      border-color: var(--rel-text-label);
+      --_rel-cb-border-color: var(--rel-text-label);
     }
 
     .default.indeterminate .row:hover .indeterminate-icon {
@@ -2463,19 +2758,80 @@ RelCheckbox.styles = css4`
        role and compact indent token. The drawn square is 80% of the frame
        (see .box::before above), so these numbers are footprints, not squares:
          small        16  body-sm / body-xs  indent xl  (24)
-         medium       18  body-md / body-xs  indent xl  (24)
-         large        20  body-lg / body-sm  indent 2xl (28)
-         extra-large  24  body-xl / body-md  indent 3xl (32)
-       Medium is the base declared here; the other three override. */
+         medium       18  body-md / body-sm  indent xl  (24)
+         large        20  body-lg / body-md  indent 2xl (28)
+         extra-large  24  body-xl / body-lg  indent 3xl (32)
+       Verified against the live Published DS file 2026-09-25: .Check Control is
+       16/18/20/24 across all 15 variants per size. This ramp is correct — do
+       not "fix" it because the three lower steps look alike; Figma's own steps
+       are 2px apart and the difference it leans on is the type role.
+       Supporting text (2026-09-26 Trello ticket, "visual adjustment"): ONE step
+       below the label on the body scale at every size — 12/10, 14/12, 16/14,
+       20/16. It used to be two steps below at medium and above. The live file
+       (lastModified 2026-09-23) carries the new pair at Small, Medium and
+       Extra-Large; its Large variants still say body-sm (12) for supporting,
+       which would give Medium and Large the same supporting size and breaks
+       the ticket's own rule, so Large follows the ticket (body-md) and the
+       Figma omission is flagged to the designer rather than copied.
+
+       Only the FRAME and the type roles vary per size. Radius and border are
+       derived from the frame (a ninth of the drawn square, see .box::before),
+       so they cannot fall out of step the way four literals did: large and
+       extra-large previously declared no radius at all and inherited medium's
+       4px, leaving a 24px box and an 18px box with the same corner. */
+    /* DO NOT ROUND THESE. The expression lands on fractional pixels at two of
+       the four sizes and that is deliberate:
+
+         small        16px frame → 12.8px square → 1.4222px   (2.84 device px @2x)
+         medium       18px frame → 14.4px square → 1.6px      (3.2)
+         large        20px frame → 16px   square → 1.7778px   (3.56)
+         extra-large  24px frame → 19.2px square → 2.1333px   (4.27)
+
+       The fractions are downstream of the FRAME ramp, which is Figma's and
+       already shipped, so rounding the derived value would break the fixed
+       relationship between the radius and the square it sits on — and that
+       relationship is the only thing making the four sizes read as one control
+       rather than four drawings.
+
+       The blur this replaced was not caused by fractionality. It was a 1.6x
+       ERROR: the dash rendered 1.10px where Figma wanted 1.78px, because an 8:1
+       viewBox was being letterboxed into a square box. Fixing the ratio fixes
+       the symptom; rounding on top would be a second, unrelated invention —
+       and inventing a tidier-looking number than the derived one is exactly
+       what produced the rel-radio Small regression that 1.4.9 reverts.
+
+       ── WHY THE WALL IS AN INSET SHADOW AND NOT A BORDER ──
+       Because border-width is the one length here that the engine refuses to
+       keep. Blink snaps it to whole CSS pixels at used-value time: declared as
+       a border, the derived value computed to 1 / 1 / 1 / 2px for the four
+       sizes, and read the same at device pixel ratios 1, 2 AND 3, while the
+       radius on the very same element read 1.42222px throughout. One property
+       keeping its fraction is the control group for the other losing it, so
+       that is snapping and not a getComputedStyle artefact (measured
+       2026-09-25).
+
+       Snapped, the faithful value painted WORSE than the flat 2px guess it
+       replaced — sum of absolute painted error 1.933px against 1.333px:
+
+         size  Figma    as border   error   flat 2px   error
+         s     1.4222   1px         0.422   2px        0.578
+         m     1.6      1px         0.600   2px        0.400
+         l     1.7778   1px         0.778   2px        0.222
+         xl    2.1333   2px         0.133   2px        0.133
+
+       box-shadow spread is NOT snapped — it antialiases sub-pixel — so an inset
+       shadow paints the derived value exactly at every size and the error goes
+       to ~0, with no CSS round() and so no browser-floor question. */
     :host {
       --_rel-cb-size: 18px;
-      --_rel-cb-radius: 4px;
+      /* drawn square = frame × 0.8; every Figma value in it = square ÷ 9 */
+      --_rel-cb-radius: calc(var(--_rel-cb-size) * 0.8 / 9);
+      --_rel-cb-border: calc(var(--_rel-cb-size) * 0.8 / 9);
       --_rel-cb-indent: var(--rel-spacing-xl);
     }
 
     :host([size="small"]) {
       --_rel-cb-size: 16px;
-      --_rel-cb-radius: 3px;
       --_rel-cb-indent: var(--rel-spacing-xl);
     }
 
@@ -2499,11 +2855,11 @@ RelCheckbox.styles = css4`
     }
 
     .text {
-      font-family: var(--rel-body-xs-regular-font-family);
-      font-weight: var(--rel-body-xs-regular-font-weight);
-      font-size: var(--rel-body-xs-regular-font-size);
-      line-height: var(--rel-body-xs-regular-line-height);
-      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
+      font-family: var(--rel-body-sm-regular-font-family);
+      font-weight: var(--rel-body-sm-regular-font-weight);
+      font-size: var(--rel-body-sm-regular-font-size);
+      line-height: var(--rel-body-sm-regular-line-height);
+      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
     }
 
     :host([size="small"]) .label {
@@ -2514,6 +2870,14 @@ RelCheckbox.styles = css4`
       letter-spacing: var(--rel-body-sm-regular-letter-spacing);
     }
 
+    :host([size="small"]) .text {
+      font-family: var(--rel-body-xs-regular-font-family);
+      font-weight: var(--rel-body-xs-regular-font-weight);
+      font-size: var(--rel-body-xs-regular-font-size);
+      line-height: var(--rel-body-xs-regular-line-height);
+      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
+    }
+
     :host([size="large"]) .label {
       font-family: var(--rel-body-lg-regular-font-family);
       font-weight: var(--rel-body-lg-regular-font-weight);
@@ -2523,11 +2887,11 @@ RelCheckbox.styles = css4`
     }
 
     :host([size="large"]) .text {
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
+      font-family: var(--rel-body-md-regular-font-family);
+      font-weight: var(--rel-body-md-regular-font-weight);
+      font-size: var(--rel-body-md-regular-font-size);
+      line-height: var(--rel-body-md-regular-line-height);
+      letter-spacing: var(--rel-body-md-regular-letter-spacing);
     }
 
     :host([size="extra-large"]) .label {
@@ -2539,11 +2903,11 @@ RelCheckbox.styles = css4`
     }
 
     :host([size="extra-large"]) .text {
-      font-family: var(--rel-body-md-regular-font-family);
-      font-weight: var(--rel-body-md-regular-font-weight);
-      font-size: var(--rel-body-md-regular-font-size);
-      line-height: var(--rel-body-md-regular-line-height);
-      letter-spacing: var(--rel-body-md-regular-letter-spacing);
+      font-family: var(--rel-body-lg-regular-font-family);
+      font-weight: var(--rel-body-lg-regular-font-weight);
+      font-size: var(--rel-body-lg-regular-font-size);
+      line-height: var(--rel-body-lg-regular-line-height);
+      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
     }
   `;
 __decorateClass([
@@ -2573,6 +2937,9 @@ __decorateClass([
 __decorateClass([
   property4({ type: String, reflect: true })
 ], RelCheckbox.prototype, "alignment", 2);
+__decorateClass([
+  property4({ type: String, attribute: "field-aria-label" })
+], RelCheckbox.prototype, "fieldAriaLabel", 2);
 RelCheckbox = __decorateClass([
   customElement4("rel-checkbox")
 ], RelCheckbox);
@@ -3658,6 +4025,14 @@ var RelAutocomplete = class extends LitElement7 {
   get optionCheckboxSize() {
     return this.size;
   }
+  /** Native tooltip carrying the row's full text. Both lines truncate to one
+   *  line with an ellipsis, so a long supporting line is otherwise unrecoverable
+   *  by sight; hovering the row reveals it. Only rows that carry a second line
+   *  get one, so plain lists do not sprout tooltips. */
+  rowTitle(item) {
+    return item.supportingText ? `${item.label}
+${item.supportingText}` : nothing4;
+  }
   get selectAllStatus() {
     const filtered = this.filteredItems.filter((i) => !i.disabled);
     if (filtered.length === 0) return "unchecked";
@@ -3935,6 +4310,7 @@ var RelAutocomplete = class extends LitElement7 {
                         role="option"
                         aria-selected="${this.selectedValues.includes(item.value)}"
                         aria-disabled="${item.disabled ? "true" : nothing4}"
+                        title="${this.rowTitle(item)}"
                         @mousedown="${(e) => e.preventDefault()}"
                         @click="${() => this.toggleMultiOption(item)}"
                         @pointerenter="${() => {
@@ -3958,6 +4334,7 @@ var RelAutocomplete = class extends LitElement7 {
                     role="option"
                     aria-selected="${item.value === this.value}"
                     aria-disabled="${item.disabled ? "true" : nothing4}"
+                    title="${this.rowTitle(item)}"
                     @mousedown="${(e) => e.preventDefault()}"
                     @click="${() => this.selectItem(item)}"
                     @pointerenter="${() => {
@@ -4000,7 +4377,11 @@ RelAutocomplete.styles = css8`
        surface with a 4px radius and shadow/md, and no border. ── */
     .ac-panel {
       position: fixed;
-      z-index: 1001;
+      /* Only consulted on the no-Popover-API fallback path: once the panel is
+         promoted to the top layer, z-index is inert and stacking is by
+         promotion order. Shared with the pickers so the whole overlay family
+         is overridable from one place. */
+      z-index: var(--rel-overlay-fallback-z, 1001);
       display: none;
       /* Reset native [popover] UA styles (the panel is promoted to the
          top layer so transformed ancestors — e.g. a centered rel-modal
@@ -4086,13 +4467,32 @@ RelAutocomplete.styles = css8`
     }
 
     /* Hover and the keyboard highlight share Figma's Hover wash; Active —
-       the committed selection — reuses it and bumps the label to medium. */
-    .ac-option:hover,
+       the committed selection — reuses it and bumps the label to medium.
+
+       NOTE there is deliberately no :hover in this rule. The pointerenter
+       handler already moves highlightedIndex onto the hovered row, so hover
+       is expressed through .highlighted and a :hover selector here would be
+       redundant — except in one case, where it was a real defect: arrowing
+       the list moves .highlighted but CANNOT clear a CSS :hover, so the row
+       the mouse happens to rest on stayed lit alongside the keyboard cursor
+       and the committed selection. Three rows painted the same wash for
+       three different meanings, and the user could not tell which one Enter
+       would commit. Measured before the fix: rows 0/2/4 all rgb(243,243,243)
+       with row 2 carrying :hover and .highlighted=false. */
     .ac-option.highlighted,
     .ac-option[aria-selected="true"] {
       background: var(--rel-autocomplete-option-hover, var(--rel-action-overlay-hover));
     }
 
+    /* The Select-all row is the one row with no pointerenter handler (it is
+       not in the options list, so it has no index to highlight), so it keeps
+       a plain :hover. rel-select instead carries a selectAllHighlighted
+       state for this; autocomplete has no such state and does not need one
+       for a row that cannot be reached by the arrow keys. */
+    .ac-select-all:hover {
+      background: var(--rel-autocomplete-option-hover, var(--rel-action-overlay-hover));
+    }
+
     .ac-option:active {
       background: var(--rel-autocomplete-option-pressed, var(--rel-action-overlay-pressed));
     }
@@ -4190,6 +4590,28 @@ RelAutocomplete.styles = css8`
       letter-spacing: var(--rel-body-sm-regular-letter-spacing);
     }
 
+    /* Multi-select rows delegate to a nested rel-checkbox, which wraps its
+       text by default, so the SAME item rendered as one truncated line in
+       single mode and as three wrapped lines — or a sideways-overflowing
+       identifier — under multiple (measured 2026-09-26: row 58px vs 120px,
+       panel scrollWidth 326 in a 320 panel). The checkbox's label and helper
+       are exposed as parts, so the row can reach them from here and apply the
+       same one-line ellipsis; the host itself needs min-width: 0 or the flex
+       row lets it grow past the panel instead of shrinking its text. */
+    .ac-option > rel-checkbox {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .ac-option > rel-checkbox::part(label),
+    .ac-option > rel-checkbox::part(helper) {
+      display: block;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
     :host([size="large"]) .ac-option-supporting {
       font-family: var(--rel-body-md-regular-font-family);
       font-weight: var(--rel-body-md-regular-font-weight);
@@ -6554,9 +6976,23 @@ RelCarousel.styles = css14`
       height: 100%;
     }
 
+    /* The height override stretches a content-height slide to fill the fixed
+       viewport, so a caption that used to hug its text was left anchored to
+       the top of a much taller box — measured 84px of content top-aligned in
+       180px, i.e. ~96px of dead space beneath it. Figma centres it: every
+       vertical variant has the Content slot on justify=CENTER align=CENTER.
+       Centring needs a formatting context the slide does not otherwise have,
+       hence the flex display. It is behind a hook because forcing flex onto a
+       consumer's slotted element can reflow that element's own children —
+       set --rel-carousel-slide-display: block to opt out. Scoped to vertical
+       only: horizontal slides are content-height, so there is nothing to
+       centre and no reason to touch their box model. */
     :host([orientation="vertical"]) ::slotted(*) {
       width: 100% !important;
       height: var(--rel-carousel-slide-height, 100%) !important;
+      display: var(--rel-carousel-slide-display, flex);
+      flex-direction: column;
+      justify-content: center;
     }
 
     .track.dragging {
@@ -6676,6 +7112,50 @@ RelCarousel.styles = css14`
       transform: none;
     }
 
+    /* Vertical orientation: the arrows ride the axis the carousel actually
+       moves on. Without this they kept the horizontal placement — measured
+       prev at x=32 y=98 and next at x=264 y=98, i.e. mid-left and mid-right,
+       identical to the horizontal case — so they flanked the caption from
+       both sides while the motion was up and down. Figma nests both arrow
+       buttons in a layout=col Stack for the vertical variants. */
+    :host([orientation="vertical"]) .nav-button {
+      top: auto;
+      left: 50%;
+      right: auto;
+      transform: translateX(-50%);
+    }
+
+    :host([orientation="vertical"]) .nav-button.prev {
+      top: var(--rel-spacing-xs);
+      left: 50%;
+    }
+
+    :host([orientation="vertical"]) .nav-button.next {
+      bottom: var(--rel-spacing-xs);
+      right: auto;
+    }
+
+    /* chevron-left becomes up, chevron-right becomes down. Applied to the
+       bottom-arrows row too: those buttons still page the carousel along the
+       vertical axis, so a left/right glyph would misdescribe them wherever
+       they sit. */
+    :host([orientation="vertical"]) .nav-button svg {
+      transform: rotate(90deg);
+    }
+
+    /* Type=Bottom Arrows keeps its arrows inline in the indicators row even
+       when the carousel is vertical. This rule has to restate the reset
+       because the vertical block above outranks the plain .dots .nav-button
+       selector (0,3,0 against 0,2,0). */
+    :host([orientation="vertical"]) .dots .nav-button {
+      position: static;
+      transform: none;
+      top: auto;
+      bottom: auto;
+      left: auto;
+      right: auto;
+    }
+
     .nav-button svg {
       width: 16px;
       height: 16px;
@@ -6910,6 +7390,7 @@ RelCardMedia = __decorateClass([
 import { LitElement as LitElement15, html as html15, css as css16, nothing as nothing8 } from "lit";
 import { customElement as customElement15, property as property15, state as state6, query as query3 } from "lit/decorators.js";
 import { live } from "lit/directives/live.js";
+import "@reliability-design/icons/rel-icon";
 
 // src/components/rel-date-picker/date-format.ts
 function formatDatePattern(date, pattern, locale = "en-US") {
@@ -7270,6 +7751,34 @@ var RelDatePicker = class extends LitElement15 {
     this.onReposition = () => {
       if (this.open) this.updatePopoverPosition();
     };
+    /* Outside scroll CLOSES the panel; it used to reposition.
+     *
+     * Repositioning is what produced the reported "panel floats over the site
+     * header" bug: the panel is in the top layer, so it paints above all normal
+     * content by definition, and tracking a trigger that scrolls under a sticky
+     * nav leaves a calendar anchored to something nobody can see. No z-index can
+     * fix that — the top layer is not in the page's stacking order at all.
+     *
+     * rel-select reached the same conclusion for its own listbox and its comment
+     * records the other half of the reason: re-deriving fixed coordinates on
+     * every scroll event is fragile and was making the panel jump to the top of
+     * the viewport. This is that pattern, so the family now behaves alike.
+     *
+     * Scrolling the panel's OWN content must not close it. The test is
+     * CONTAINMENT, not equality with one known scroller: the panel is itself
+     * `overflow-y: auto` today, but the same guard has to hold for any scroller
+     * nested inside it (rel-time-picker's per-column lists are exactly that
+     * case), and an equality test would silently close the panel the first time
+     * one is added.
+     *
+     * resize still repositions — a resize keeps the trigger on screen, so there
+     * is nothing to run away from. */
+    this.onPageScroll = (e) => {
+      if (!this.open) return;
+      const panel = this.popoverElement;
+      if (panel && e.composedPath().includes(panel)) return;
+      this.closeCalendarPopover(false);
+    };
     this.updatePopoverPosition = () => {
       const panel = this.popoverElement;
       const anchor = this.triggerButton;
@@ -7395,7 +7904,7 @@ var RelDatePicker = class extends LitElement15 {
     document.removeEventListener("click", this.handleClickOutside);
     document.removeEventListener("keydown", this.handleEscapeKey);
     window.removeEventListener("resize", this.onReposition);
-    window.removeEventListener("scroll", this.onReposition, true);
+    window.removeEventListener("scroll", this.onPageScroll, true);
     this.hideTopLayer();
   }
   updated(changedProperties) {
@@ -7409,7 +7918,7 @@ var RelDatePicker = class extends LitElement15 {
     if (changedProperties.has("open")) {
       if (!this.open) {
         window.removeEventListener("resize", this.onReposition);
-        window.removeEventListener("scroll", this.onReposition, true);
+        window.removeEventListener("scroll", this.onPageScroll, true);
         this.hideTopLayer();
         this.focusPanelOnOpen = true;
         this.panelView = "days";
@@ -7417,7 +7926,7 @@ var RelDatePicker = class extends LitElement15 {
       }
       this.showTopLayer();
       window.addEventListener("resize", this.onReposition);
-      window.addEventListener("scroll", this.onReposition, true);
+      window.addEventListener("scroll", this.onPageScroll, true);
       const focusPanel = this.focusPanelOnOpen;
       this.focusPanelOnOpen = true;
       if (focusPanel) {
@@ -7929,6 +8438,28 @@ var RelDatePicker = class extends LitElement15 {
    * Index of the single grid cell carrying tabindex="0". The old expression
    * (`isSelected || (index === 0 && !value)`) left the grid with ZERO tab
    * stops once the user arrowed around without a selection.
+   *
+   * KNOWN GAP (deferred from 1.4.9, needs a ticket covering BOTH calendars):
+   * `focusedDate` is read here as the first candidate but is never assigned
+   * anywhere in this file, so it is permanently null and the tab stop tracks
+   * the SELECTION rather than focus. Tab out of the grid and back and you
+   * return to the selected day, not the day you left.
+   *
+   * Wiring it from each cell's `@focus` was tried and is NOT sufficient, which
+   * is why this is still open. Measured 2026-09-25 by driving real keys: from
+   * Sun 27 Sep, one ArrowDown lands focus on Sun 25 Oct instead of Sun 4 Oct,
+   * because handleDayKeydown moves by grid INDEX and then lets the view flip
+   * month, so index+7 addresses a different date in the new grid. lit reuses
+   * the same button elements across that re-render, so the focused element
+   * never changes and NO focus event fires — the handler cannot observe the
+   * move it is supposed to record.
+   *
+   * The real fix is to navigate by DATE and set the rove explicitly before
+   * focusing, the way rel-range-picker.moveGridFocusTo already does (verified
+   * correct in the same run: Sep 27 → Oct 4 → Oct 11, tab stop and focus
+   * agreeing at every step). That is a rewrite of this component's arrow-key
+   * model, not a contained fix, and it must land on both calendars together or
+   * they diverge again.
    */
   getRovingIndex(days) {
     const candidates = [
@@ -8143,11 +8674,11 @@ var RelDatePicker = class extends LitElement15 {
               ?disabled=${this.disabled}
               @click=${this.handleIconClick}
             >
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-                <path
-                  d="M4 2h1V1h2v1h2V1h2v1h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 3H4v7h8V5z"
-                />
-              </svg>
+              <!-- Figma pins this suffix to node 5137:1877, which resolves to
+                   COMPONENT_SET 5137:1876 "Calendar Month" — verified against
+                   the live Published DS file 2026-09-25. This was a hand-drawn
+                   inline path that matched no icon in the set. -->
+              <rel-icon name="calendar-month"></rel-icon>
             </button>
           </span>
         </div>
@@ -8506,18 +9037,28 @@ RelDatePicker.styles = css16`
     }
 
     /* Figma's suffix icon is 18px at medium; rel-textfield ramps 16 / 18 / 20
-       across the size scale, so the trigger follows the same ramp. */
-    .icon-button svg {
+       across the size scale, so the trigger follows the same ramp.
+       Both selectors are needed and neither is redundant: the CLEAR (×) button
+       is still a raw inline <svg>, while the calendar suffix is now a
+       <rel-icon> whose own svg lives in a shadow root that .icon-button svg
+       cannot reach. Sizing the rel-icon ELEMENT works because a declaration
+       from the outer tree beats the :host([size]) rules inside it — which is
+       also why the element carries no size attribute: one source for the
+       ramp, not two that have to agree. */
+    .icon-button svg,
+    .icon-button rel-icon {
       width: 18px;
       height: 18px;
     }
 
-    .date-picker-wrapper.small .icon-button svg {
+    .date-picker-wrapper.small .icon-button svg,
+    .date-picker-wrapper.small .icon-button rel-icon {
       width: 16px;
       height: 16px;
     }
 
-    .date-picker-wrapper.large .icon-button svg {
+    .date-picker-wrapper.large .icon-button svg,
+    .date-picker-wrapper.large .icon-button rel-icon {
       width: 20px;
       height: 20px;
     }
@@ -8541,7 +9082,14 @@ RelDatePicker.styles = css16`
       position: absolute;
       top: calc(100% + 8px);
       left: 0;
-      z-index: 2147483647;
+      /* Fallback stacking ONLY: while the panel is in the top layer this is
+         inert, because top-layer elements are not in the page stacking order at
+         all and order of promotion decides. It applies solely where the Popover
+         API is unavailable. One overridable hook across every overlay, so a
+         consumer with its own stacking scheme sets it once; the default matches
+         rel-select / rel-autocomplete / rel-popover / rel-menubar. This was
+         2147483647, which cannot be layered against anything. */
+      z-index: var(--rel-overlay-fallback-z, 1001);
       background: var(--rel-bg-neutral);
       border-radius: var(--rel-border-radius-sm);
       /* Figma ".Date Picker Calendar" is a shadowed card with no border.
@@ -9205,6 +9753,21 @@ var RelRangePicker = class extends LitElement16 {
     this.onReposition = () => {
       if (this.open && this.mode === "popover") this.updatePopoverPosition();
     };
+    /* Outside scroll CLOSES the panel; it used to reposition. Same change as
+     * rel-date-picker and rel-time-picker — see the long note in
+     * rel-date-picker.onPageScroll for why tracking the trigger is what put the
+     * panel over the sticky site header, and why z-index cannot fix it.
+     *
+     * ONLY in popover mode. `popup` mode centres the shell in the viewport behind
+     * a backdrop and never anchors to the trigger, so there is no trigger to
+     * scroll away from and closing on scroll would just be a dialog that vanishes
+     * when the page moves. Guarded exactly as onReposition above is. */
+    this.onPageScroll = (e) => {
+      if (!this.open || this.mode !== "popover") return;
+      const panel = this.popoverEl;
+      if (panel && e.composedPath().includes(panel)) return;
+      this.cancelPopover();
+    };
     this.updatePopoverPosition = () => {
       const panel = this.popoverEl;
       if (!panel || !this.open || this.mode !== "popover") return;
@@ -9417,7 +9980,7 @@ var RelRangePicker = class extends LitElement16 {
     document.removeEventListener("click", this.handleClickOutside);
     document.removeEventListener("keydown", this.handleGlobalKeydown);
     window.removeEventListener("resize", this.onReposition);
-    window.removeEventListener("scroll", this.onReposition, true);
+    window.removeEventListener("scroll", this.onPageScroll, true);
     this.hideTopLayer();
   }
   updated(changed) {
@@ -9431,10 +9994,10 @@ var RelRangePicker = class extends LitElement16 {
       if (this.open) {
         this.showTopLayer();
         window.addEventListener("resize", this.onReposition);
-        window.addEventListener("scroll", this.onReposition, true);
+        window.addEventListener("scroll", this.onPageScroll, true);
       } else {
         window.removeEventListener("resize", this.onReposition);
-        window.removeEventListener("scroll", this.onReposition, true);
+        window.removeEventListener("scroll", this.onPageScroll, true);
         this.hideTopLayer();
       }
     }
@@ -10048,6 +10611,21 @@ var RelRangePicker = class extends LitElement16 {
    * The cell that carries tabindex="0". Prefers the last roved date, then the
    * draft start, then today, then the first selectable day — always exactly
    * one Tab stop, even after arrowing away with nothing selected.
+   *
+   * `focusedDate` is written by moveGridFocusTo, which sets it from the DATE
+   * before moving focus rather than reading it back off a focus event. That
+   * ordering is what makes the arrow keys correct across a month boundary —
+   * verified 2026-09-25 by driving real keys: Sep 27 → Oct 4 → Oct 11 with the
+   * tab stop and focus agreeing at every step, including the view change.
+   * rel-date-picker moves by grid INDEX instead and lands on the wrong date
+   * there; see the note on its getRovingIndex. Do not "simplify" this to a
+   * focus listener — lit reuses the same cell elements across the re-render, so
+   * the focused element does not change and no focus event fires.
+   *
+   * Still open for BOTH calendars: focus arriving from a click or from Tab does
+   * not update the rove, only the arrow keys do. Deferred from 1.4.9 as a
+   * shared ticket, since fixing one calendar alone reintroduces the divergence
+   * the shared period-page module exists to prevent.
    */
   getRovingIso(days) {
     const inView = days.filter((d) => d.isCurrentMonth);
@@ -10103,7 +10681,14 @@ var RelRangePicker = class extends LitElement16 {
               aria-label=${triggerLabel || this.placeholder}
               @click=${() => this.toggleOpen()}
             >
-              <rel-icon name="calendar-range"></rel-icon>
+              <!-- Deliberately the SAME icon as rel-date-picker, at the user's
+                   request, so the two triggers read as one family. Figma does
+                   NOT specify a trigger icon here: the range-picker spec lines
+                   only carry node 5137:2842, which resolves to "Plus" and
+                   appears in 440 places across the component specs — it is the
+                   un-overridden INSTANCE_SWAP default, not a choice. So this is
+                   ours to pick, and it should move with the date picker. -->
+              <rel-icon name="calendar-month"></rel-icon>
             </rel-button>
           ` : html16`
             <div
@@ -10158,9 +10743,7 @@ var RelRangePicker = class extends LitElement16 {
                   ?disabled=${this.disabled}
                   @click=${this.handleIconClick}
                 >
-                  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-                    <path d="M4 2h1V1h2v1h2V1h2v1h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 3H4v7h8V5z"/>
-                  </svg>
+                  <rel-icon name="calendar-month"></rel-icon>
                 </button>
               </span>
             </div>
@@ -10531,9 +11114,18 @@ RelRangePicker.styles = css17`
       color: var(--rel-text-default);
     }
 
-    .icon-button svg {
+    /* Both selectors, deliberately. The calendar trigger is a <rel-icon>,
+       whose own svg lives in a shadow root that a plain .icon-button svg
+       selector cannot reach — so sizing only the raw svg would leave it at its
+       component default. The clear (x) button is still a hand-drawn inline
+       svg, so the raw selector has to stay as well. Sizing the rel-icon
+       ELEMENT works because a declaration from the outer tree beats the
+       :host([size]) rules inside it. Same fix as rel-date-picker. */
+    .icon-button svg,
+    .icon-button rel-icon {
       width: 16px;
       height: 16px;
+      --rel-icon-size: 16px;
     }
 
     /* ── Popover shell ── */
@@ -10561,7 +11153,14 @@ RelRangePicker.styles = css17`
       position: absolute;
       top: calc(100% + 8px);
       left: 0;
-      z-index: 2147483647;
+      /* Fallback stacking ONLY: while the panel is in the top layer this is
+         inert, because top-layer elements are not in the page stacking order at
+         all and order of promotion decides. It applies solely where the Popover
+         API is unavailable. One overridable hook across every overlay, so a
+         consumer with its own stacking scheme sets it once; the default matches
+         rel-select / rel-autocomplete / rel-popover / rel-menubar. This was
+         2147483647, which cannot be layered against anything. */
+      z-index: var(--rel-overlay-fallback-z, 1001);
       border-radius: var(--rel-border-radius-sm, 8px);
       background: var(--rel-bg-neutral);
       /* Figma effectStyle=shadow/xl — the token now exists. */
@@ -10595,7 +11194,8 @@ RelRangePicker.styles = css17`
       width: auto;
       height: auto;
       border: none;
-      z-index: 2147483646;
+      /* One below the shell, so the backdrop never covers its own panel. */
+      z-index: calc(var(--rel-overlay-fallback-z, 1001) - 1);
       background: rgba(0,0,0,0.4);
     }
 
@@ -12315,18 +12915,27 @@ var RelRadio = class extends LitElement23 {
     };
     this._onTouched = () => {
     };
+    /** Whether the author wrote `density` themselves, as opposed to inheriting
+     *  the default. Read once at connect: Lit reflects during update, which is
+     *  after this runs, so the attribute is present here only if authored. */
+    this.densityExplicit = false;
   }
   willUpdate(changed) {
     if (changed.has("size")) {
       const canonical = SIZE_ALIASES5[this.size];
       if (canonical) this.size = canonical;
     }
-    if ((changed.has("alignment") || changed.has("density")) && this.alignment === "trailing" && this.density === "compact") {
+    const densityChosen = this.densityExplicit || changed.get("density") !== void 0;
+    if ((changed.has("alignment") || changed.has("density")) && this.alignment === "trailing" && this.density === "compact" && densityChosen) {
       console.warn(
         '[rel-radio] density="compact" has no trailing layout; rendering comfortable density.'
       );
     }
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.densityExplicit = this.hasAttribute("density");
+  }
   /** Trailing has no compact layout in the spec — trailing wins. */
   get effectiveDensity() {
     return this.alignment === "trailing" ? "comfortable" : this.density;
@@ -12594,13 +13203,22 @@ RelRadio.styles = css24`
       letter-spacing: var(--rel-body-lg-regular-letter-spacing);
     }
 
+    /* Supporting text sits ONE step below the label on the body scale at every
+       size — 14/12 small, 16/14 medium, 20/16 large (2026-09-26 Trello ticket,
+       "visual adjustment", confirmed by the designer as applying to every
+       label + supporting pair, not just the checkbox). It used to be two steps
+       below. The Figma ticket covered the Checkbox set only; extending the
+       rule to Radio was proposed from the code side and approved by the
+       designer on 2026-09-26, so the Radio Button set (lastModified
+       2026-09-23) still shows the old two-step pairs (body-xs / body-sm /
+       body-md) and will be updated to match the code, not the other way. */
     .radio-supporting {
       color: var(--rel-text-caption);
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
+      font-family: var(--rel-body-md-regular-font-family);
+      font-weight: var(--rel-body-md-regular-font-weight);
+      font-size: var(--rel-body-md-regular-font-size);
+      line-height: var(--rel-body-md-regular-line-height);
+      letter-spacing: var(--rel-body-md-regular-letter-spacing);
     }
 
     /* Compact density — supporting text sits under the whole row, indented
@@ -12660,11 +13278,11 @@ RelRadio.styles = css24`
     }
 
     :host([size="large"]) .radio-supporting {
-      font-family: var(--rel-body-md-regular-font-family);
-      font-weight: var(--rel-body-md-regular-font-weight);
-      font-size: var(--rel-body-md-regular-font-size);
-      line-height: var(--rel-body-md-regular-line-height);
-      letter-spacing: var(--rel-body-md-regular-letter-spacing);
+      font-family: var(--rel-body-lg-regular-font-family);
+      font-weight: var(--rel-body-lg-regular-font-weight);
+      font-size: var(--rel-body-lg-regular-font-size);
+      line-height: var(--rel-body-lg-regular-line-height);
+      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
     }
 
     :host([size="large"]) .radio-supporting.indent {
@@ -12681,39 +13299,29 @@ RelRadio.styles = css24`
       letter-spacing: var(--rel-body-sm-semibold-letter-spacing);
     }
 
-    /* Small's own control (ticket 11b). The ramp is 16 / 20 / 24, and every
-       number falls out of the invariant the other two sizes already keep:
-       the RING is inset 2px from the BOX on each side (box - 4), and the DOT
-       is half the ring. M is 20/16/8, L is 24/20/10, so S is 16/12/6 — all
-       integers, so the 2px ring stays crisp at 1x and 2x. Deriving from the
-       stated ring/box = 0.8 instead would have given 12.8 and a 6.4 dot,
-       which is where a 2px border on a fractional circle goes soft. */
-    :host([size="small"]) .radio-custom {
-      width: 16px;
-      height: 16px;
-    }
+    /* SMALL DELIBERATELY DECLARES NO CONTROL — it shares medium's 20px box,
+       16px ring and 8px dot, and only the TYPE below steps down.
 
-    :host([size="small"]) .radio-custom::before {
-      width: 12px;
-      height: 12px;
-    }
+       v1.4.8 ticket 11b gave Small its own 16/12/6 control, derived from the
+       premise "the ramp is 16 / 20 / 24". That premise was never read off
+       Figma, and it is wrong. Verified against the LIVE Published DS file on
+       2026-09-25 (set "Radio Button" 8408:395, 45 variants): .Radio Control
+       measures 20×20 in all 15 Small variants, 20×20 in all 15 Medium, and
+       24×24 in all 15 Large. Figma discriminates Small from Medium by type
+       alone. memory/project_web_components.md recorded exactly this on
+       2026-08-21 — "S and M share the 20px control, only typography steps
+       down" — before 1.4.8 overrode it.
 
-    :host([size="small"]) .radio-custom::after {
-      width: 6px;
-      height: 6px;
-    }
+       So the correct Small is the ABSENCE of a rule. Adding one back means
+       re-deriving it from Figma, not from the invariant the other two sizes
+       happen to satisfy: that invariant (ring = box − 4, dot = ring ÷ 2) is a
+       coincidence of rounding, since Figma's ring is proportional at 0.8 and
+       our Large ring is a deliberate 19.2 → 20. */
 
-    /* The compact indent is box + the 8px row gap, bound to the token that
-       equals it — 2xl (28) for M, 3xl (32) for L, so xl (24) for a 16px S. */
+    /* The compact indent is box + the 8px row gap, so Small takes medium's
+       2xl (28) along with medium's 20px box. */
     :host([size="small"]) .radio-supporting.indent {
-      padding-left: var(--rel-spacing-xl);
-    }
-
-    /* The option avatar matches the control box at every size (20 at M, 24 at
-       L), so it follows Small down to 16. */
-    :host([size="small"]) .radio-avatar {
-      width: 16px;
-      height: 16px;
+      padding-left: var(--rel-spacing-2xl);
     }
 
     :host([size="small"]) .radio-label {
@@ -12725,11 +13333,11 @@ RelRadio.styles = css24`
     }
 
     :host([size="small"]) .radio-supporting {
-      font-family: var(--rel-body-xs-regular-font-family);
-      font-weight: var(--rel-body-xs-regular-font-weight);
-      font-size: var(--rel-body-xs-regular-font-size);
-      line-height: var(--rel-body-xs-regular-line-height);
-      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
+      font-family: var(--rel-body-sm-regular-font-family);
+      font-weight: var(--rel-body-sm-regular-font-weight);
+      font-size: var(--rel-body-sm-regular-font-size);
+      line-height: var(--rel-body-sm-regular-line-height);
+      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
     }
 
     /* Error state (Figma State=Error) — ring, dot, and supporting text go
@@ -13344,12 +13952,23 @@ RelMenu._css = `
       flex: 1 1 auto;
     }
 
-    /* Submenu affordance \u2014 same rel-icon chevron the menubar uses. */
+    /* Submenu affordance \u2014 same rel-icon chevron the menubar uses.
+
+       No opacity here: verified against the live Figma file, "Chevron Right"
+       is opacity 1 on both the instance and its vector, on every State and
+       Size, bound to the same colour variable as the row label beside it.
+       The 0.6 that used to sit here dulled it to a mid grey.
+
+       The colour is declared rather than inherited on purpose. rel-menu
+       renders to the LIGHT DOM (createRenderRoot returns this), so these
+       selectors are unscoped globals and an inherited colour would travel
+       through the consumer's page cascade \u2014 an app setting a colour on any
+       ancestor would have been repainting this chevron. */
     .submenu-chevron {
       margin-left: auto;
       display: inline-flex;
       align-items: center;
-      opacity: 0.6;
+      color: var(--rel-text-default);
       pointer-events: none;
     }
 
@@ -16700,12 +17319,12 @@ var RelSegmentedButton = class extends LitElement35 {
   setActive(option) {
     if (!option.disabled) {
       this.active = option.value;
+      const detail = { value: option.value };
       this.dispatchEvent(
-        new CustomEvent("changed", {
-          detail: { value: option.value },
-          bubbles: true,
-          composed: true
-        })
+        new CustomEvent("rel-change", { detail, bubbles: true, composed: true })
+      );
+      this.dispatchEvent(
+        new CustomEvent("changed", { detail, bubbles: true, composed: true })
       );
     }
   }
@@ -17156,6 +17775,14 @@ var RelSelect = class extends LitElement36 {
   get optionCheckboxSize() {
     return this.size;
   }
+  /** Native tooltip carrying the row's full text. Both lines truncate to one
+   *  line with an ellipsis, so a long supporting line is otherwise unrecoverable
+   *  by sight; hovering the row reveals it. Only rows that carry a second line
+   *  get one, so plain lists do not sprout tooltips. */
+  rowTitle(option) {
+    return option.supportingText ? `${option.label}
+${option.supportingText}` : nothing18;
+  }
   get selectAllStatus() {
     const filtered = this.filteredOptions;
     if (filtered.length === 0) return "unchecked";
@@ -17174,13 +17801,27 @@ var RelSelect = class extends LitElement36 {
     window.removeEventListener("resize", this.updatePosition);
     window.removeEventListener("scroll", this.onPageScroll, true);
   }
+  /**
+   * BOTH events fire, deliberately — do not delete either.
+   *
+   * This repo is split down the middle on the convention, not inconsistent in
+   * one place: rel-select and rel-segmented-button emit `changed`, while
+   * rel-switch, rel-checkbox and rel-radio emit `rel-change`. Renaming
+   * `changed` would break every existing rel-select consumer, so 1.4.9 adds
+   * the prefixed name alongside it rather than moving anyone. New code should
+   * listen for `rel-change`; `changed` stays for as long as 1.x does.
+   *
+   * One `detail` object is shared by both dispatches so the two events cannot
+   * drift apart — a listener on one sees exactly what a listener on the other
+   * sees.
+   */
   emitChange() {
+    const detail = { value: this.multiple ? this.selectedValues : this.selected };
     this.dispatchEvent(
-      new CustomEvent("changed", {
-        detail: { value: this.multiple ? this.selectedValues : this.selected },
-        bubbles: true,
-        composed: true
-      })
+      new CustomEvent("changed", { detail, bubbles: true, composed: true })
+    );
+    this.dispatchEvent(
+      new CustomEvent("rel-change", { detail, bubbles: true, composed: true })
     );
   }
   openListbox() {
@@ -17624,6 +18265,7 @@ var RelSelect = class extends LitElement36 {
                       role="option"
                       aria-selected="${this.selectedValues.includes(option.value)}"
                       aria-label="${option.label}"
+                      title="${this.rowTitle(option)}"
                       @pointerenter="${() => {
         this.highlightedIndex = index;
         this.selectAllHighlighted = false;
@@ -17655,6 +18297,7 @@ var RelSelect = class extends LitElement36 {
                       part="option" class="select-option ${index === this.highlightedIndex ? "highlighted" : ""}"
                       role="option"
                       aria-selected="${option.value === this.selected}"
+                      title="${this.rowTitle(option)}"
                       @mousedown="${(e) => e.preventDefault()}"
                       @click="${() => this.selectSingleOption(option)}"
                       @pointerenter="${() => this.highlightedIndex = index}"
@@ -17975,12 +18618,40 @@ RelSelect.styles = css34`
       --_rel-sel-icon: 16px;
     }
 
+    /* Border geometry, in one place, so the mask strip below is DERIVED from
+       the paint it has to cover rather than restating it. Declared on the
+       wrapper and not on .select-trigger because .floating-label is the
+       trigger's SIBLING, not its child, and would not inherit from it. */
+    .select-wrapper {
+      --_rel-sel-border-w: 1px;
+      --_rel-sel-ring-w: 0px;
+      --_rel-sel-notch-h: calc(var(--_rel-sel-border-w) + var(--_rel-sel-ring-w));
+    }
+
+    .select-wrapper.focused {
+      --_rel-sel-ring-w: 2px;
+    }
+
     .floating-label {
       position: absolute;
+      /* Matches Figma directly and needs no arithmetic: the live spec puts the
+         "Floating Label" frame at dx=12 from the Input frame's edge, and this
+         element's containing block (.select-container) IS the trigger's outer
+         edge, so --_rel-sel-pad lands it exactly there. rel-textfield needs a
+         different value (0) for the same result, because ITS containing block
+         already starts inside the border and padding. Do not copy one into the
+         other — I briefly "corrected" this one to subtract the notch padding
+         and moved a label that was already right. */
       left: var(--_rel-sel-pad, var(--rel-spacing-sm));
       top: 50%;
       transform: translateY(-50%);
-      background: var(--rel-select-bg, var(--rel-bg-neutral));
+      /* NO background here. It used to paint --rel-select-bg across the
+         label's whole ~20px line box to hide a 1px border, which erased about
+         10px of the trigger's interior and 10px of whatever sat above it.
+         Figma does not do that: the "Floating Label" frame is a strip whose
+         HEIGHT EQUALS THE BORDER IT MASKS — size=45x1 at rest and 45x2 when
+         focused (rel-select.md). rel-textfield already moved off the chip for
+         exactly this reason; the strip is now on ::before below. */
       /* Figma pads the floating-label chip by --rel-spacing-2xs; this was a
          raw 4px that happened to match but was not on the scale. */
       padding: 0 var(--rel-spacing-2xs);
@@ -18026,6 +18697,8 @@ RelSelect.styles = css34`
     .select-wrapper.has-value .floating-label,
     .select-wrapper.open .floating-label {
       top: 0;
+      /* Same inset as the resting rule above, so the label does not shift
+         horizontally as it floats. */
       left: var(--_rel-sel-pad, var(--rel-spacing-sm));
       /* Figma's floated label is REGULAR 400, not medium 500. */
       font-family: var(--rel-body-sm-regular-font-family);
@@ -18054,10 +18727,66 @@ RelSelect.styles = css34`
       letter-spacing: var(--rel-body-xs-regular-letter-spacing);
     }
 
-    /* Focus thickens the border to 2px; the chip rides up with it so it stays
-       optically centred on the stroke rather than sinking into the field. */
-    .select-wrapper.focused .floating-label {
-      top: -2px;
+    /* The mask: TWO OVERLAPPING strips, same idea as rel-textfield, different
+       reference — and the reference is the whole reason this cannot be copied
+       across. In rel-textfield the label is positioned inside the control, so
+       its 50% is one border-width BELOW the border-box top. Here
+       .floating-label is a SIBLING of .select-trigger inside
+       .select-container, so its 50% IS the trigger's border-box top. Measured
+       from there the focus outline occupies [50% - ringW, 50%] (outlines draw
+       outside the border box) and the border [50%, 50% + borderW].
+       A single strip cut to exactly that band leaked at some zoom levels and
+       not others (v1.4.9 "slash" report): border and outline are
+       pixel-snapped by Blink, while a strip inside a translateY(-50%) label
+       rasterises at a fractional offset, so their edges disagreed by under a
+       device pixel and a hairline showed through the text. So each strip
+       overshoots into paint of ITS OWN colour, and the two overlap so no two
+       anti-aliased edges share a row (abutting edges leak a*(1-a) of the band
+       — measured as exactly a quarter of the ring colour on rel-textfield):
+         ::before  surface colour, ring + border + 2px above + 2px below
+         ::after   the trigger's FILL, border + 3px below, painted on top
+       2px of overshoot, not 1: the strip and the band snap to the device grid
+       in different coordinate spaces and can disagree by a full pixel. */
+    .select-wrapper.focused .floating-label::before,
+    .select-wrapper.has-value .floating-label::before,
+    .select-wrapper.open .floating-label::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: calc(50% - var(--_rel-sel-ring-w, 0px) - 2px);
+      height: calc(var(--_rel-sel-notch-h, 1px) + 4px);
+      background: var(--rel-select-surface, var(--rel-select-bg, var(--rel-bg-neutral)));
+      z-index: -1;
+    }
+
+    .select-wrapper.focused .floating-label::after,
+    .select-wrapper.has-value .floating-label::after,
+    .select-wrapper.open .floating-label::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 50%;
+      height: calc(var(--_rel-sel-border-w, 1px) + 3px);
+      background: var(--rel-select-bg, var(--rel-bg-neutral));
+      z-index: -1;
+    }
+
+    /* Figma swaps the strip's fill on the disabled variant
+       (--rel-bg-neutral-elevated-2), matching the disabled trigger fill at
+       .select-wrapper.disabled .select-trigger. rel-select had no equivalent of
+       rel-textfield's disabled swap at all, so the old chip painted
+       --rel-bg-neutral over a trigger filled --rel-bg-neutral-elevated-2: a
+       visibly lighter block sitting on the field. */
+    .select-wrapper.disabled .floating-label::before {
+      background: var(
+        --rel-select-surface-disabled,
+        var(--rel-select-bg-disabled, var(--rel-bg-neutral-elevated-2))
+      );
+    }
+    .select-wrapper.disabled .floating-label::after {
+      background: var(--rel-select-bg-disabled, var(--rel-bg-neutral-elevated-2));
     }
 
     /* The real placeholder hides while the float-label rests in its spot,
@@ -18113,7 +18842,12 @@ RelSelect.styles = css34`
     /* ── Dropdown listbox ── */
     .select-listbox {
       position: fixed;
-      z-index: 1001;
+      /* Only consulted on the no-Popover-API fallback path: once the listbox
+         is promoted to the top layer, z-index is inert and stacking is by
+         promotion order. Shared with the pickers so the whole overlay family
+         is overridable from one place instead of disagreeing (they were on
+         2147483647, which beat consumer app chrome unconditionally). */
+      z-index: var(--rel-overlay-fallback-z, 1001);
       display: none;
       /* Reset native [popover] UA styles (the listbox is promoted to the
          top layer so transformed ancestors — e.g. a centered rel-modal
@@ -18338,6 +19072,26 @@ RelSelect.styles = css34`
       white-space: nowrap;
     }
 
+    /* Multi-select rows delegate to a nested rel-checkbox, which wraps its
+       text by default, so the same option truncated to one line in single
+       mode and wrapped to three (or overflowed the panel sideways on an
+       unbroken identifier) under multiple. The checkbox's label and helper
+       are parts, so the row reaches them from here and applies the same
+       one-line ellipsis. Same fix as rel-autocomplete, same date. */
+    .checkbox-option > rel-checkbox {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .checkbox-option > rel-checkbox::part(label),
+    .checkbox-option > rel-checkbox::part(helper) {
+      display: block;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
     /* One line, truncated like the label. supportingText used to render only in
        multi-select rows (through rel-checkbox); single-select rows drop it on
        the floor, which made the same option object render differently
@@ -20580,6 +21334,7 @@ var RelStepper = class extends LitElement41 {
     this.orientation = "horizontal";
     this.size = "large";
     this.type = "default";
+    this.connector = "solid";
   }
   willUpdate(changed) {
     if (changed.has("size") && this.size === "small") {
@@ -20590,6 +21345,14 @@ var RelStepper = class extends LitElement41 {
         "Figma has no Size axis on the Stepper: the connector geometry is fixed, so size no longer changes anything. Retune the connector with the CSS hook instead."
       );
     }
+    if (changed.has("textAlign") && this.textAlign !== "below" && !this.labelPlacement) {
+      warnDeprecated(
+        "rel-stepper",
+        "textAlign",
+        "label-placement",
+        'Use label-placement="inverted" for textalign="below" and label-placement="centered" for textalign="right".'
+      );
+    }
   }
   isDone(step) {
     return step.status === "done";
@@ -20972,9 +21735,15 @@ RelStepper.styles = css39`
     /********************************************
      * Connector Lines
      ********************************************/
+    /* The line colour is held in a custom property rather than written straight
+       to background, because the dashed variant below needs the SAME colour
+       inside a gradient. With the colour in background the state rules and the
+       dash pattern would each have to win the same declaration, and whichever
+       came last would erase the other. */
     .connector {
       position: absolute;
-      background: var(--rel-bg-neutral-elevated-2);
+      --_rel-stepper-line-color: var(--rel-bg-neutral-elevated-2);
+      background: var(--_rel-stepper-line-color);
       z-index: 1;
     }
 
@@ -20986,7 +21755,6 @@ RelStepper.styles = css39`
       transform: translateY(-50%);
       height: 1px;
       position: absolute;
-      background: var(--rel-bg-neutral-elevated-2);
     }
 
     .rel-stepper.horizontal .rel-step:last-child .connector {
@@ -21021,6 +21789,37 @@ RelStepper.styles = css39`
       display: none;
     }
 
+    /* ── connector="dot" (Figma ".Line Types" Type=Dot, set 6437:428) ──
+       Verified against the LIVE Published DS file 2026-09-25: both Dot variants
+       carry RECTANGLE "Line" 1×20 with strokeWeight=1 and strokeDashes=[2,2],
+       i.e. a 1px line, 2px on, 2px off. (The Default variants carry no dashes;
+       the COMPONENT_SET node's own [10,5] is the set frame's border, not a
+       variant value.)
+
+       A repeating gradient rather than a dashed border-style, because the dashed
+       border style is engine-defined — no browser lets you state a 2/2 period,
+       and each one picks its own dash length from the border width. The
+       gradient is exact and stays exact at any device pixel ratio.
+
+       The line thickness still comes from the height/width declared above, so
+       this only replaces the paint. Colour comes through the custom property so
+       done / progress steps dash in their own tone. */
+    :host([connector="dot"]) .rel-stepper.horizontal .connector {
+      background: repeating-linear-gradient(
+        to right,
+        var(--_rel-stepper-line-color) 0 2px,
+        transparent 2px 4px
+      );
+    }
+
+    :host([connector="dot"]) .rel-stepper.vertical .connector {
+      background: repeating-linear-gradient(
+        to bottom,
+        var(--_rel-stepper-line-color) 0 2px,
+        transparent 2px 4px
+      );
+    }
+
     /********************************************
      * Step States
      ********************************************/
@@ -21046,11 +21845,11 @@ RelStepper.styles = css39`
     }
 
     .rel-step.done .connector {
-      background: var(--rel-border-strong);
+      --_rel-stepper-line-color: var(--rel-border-strong);
     }
 
     .rel-step.progress .connector {
-      background: var(--rel-border-strong);
+      --_rel-stepper-line-color: var(--rel-border-strong);
     }
 
     /* Figma "Content": body/md/medium, text default; Inactive at 40% */
@@ -21136,6 +21935,9 @@ __decorateClass([
 __decorateClass([
   property40({ type: String, reflect: true })
 ], RelStepper.prototype, "type", 2);
+__decorateClass([
+  property40({ type: String, reflect: true })
+], RelStepper.prototype, "connector", 2);
 __decorateClass([
   property40({ type: String, reflect: true, attribute: "label-placement" })
 ], RelStepper.prototype, "labelPlacement", 2);
@@ -21690,6 +22492,13 @@ var RelTab = class extends LitElement43 {
         composed: true
       })
     );
+    this.dispatchEvent(
+      new CustomEvent("rel-change", {
+        detail: index,
+        bubbles: true,
+        composed: true
+      })
+    );
   }
   onKeyDown(event, index) {
     if (event.key === "Enter" || event.key === " ") {
@@ -22071,6 +22880,23 @@ var RelTimePicker = class extends LitElement44 {
     this.onReposition = () => {
       if (this.open) this.updatePopoverPosition();
     };
+    /* Outside scroll CLOSES the panel; it used to reposition. Same change as
+     * rel-date-picker and rel-range-picker, and the pattern rel-select has used
+     * all along — see the long note in rel-date-picker.onPageScroll for why
+     * repositioning is what produced the "panel floats over the sticky header"
+     * report, and why no z-index can fix it.
+     *
+     * This component is the reason the exemption tests CONTAINMENT rather than
+     * equality with the panel: the hour / minute / period columns are
+     * `overflow-y: auto` in their own right (`.column-list`), so a scroll that
+     * must NOT close the panel very often has one of them as its target, not the
+     * panel. Discards the draft, like every other outside dismissal. */
+    this.onPageScroll = (e) => {
+      if (!this.open) return;
+      const panel = this.popoverElement;
+      if (panel && e.composedPath().includes(panel)) return;
+      this.cancelPopover(false);
+    };
     this.updatePopoverPosition = () => {
       const panel = this.popoverElement;
       const anchor = this.triggerButton;
@@ -22130,7 +22956,7 @@ var RelTimePicker = class extends LitElement44 {
     document.removeEventListener("click", this.handleClickOutside);
     document.removeEventListener("keydown", this.handleEscapeKey);
     window.removeEventListener("resize", this.onReposition);
-    window.removeEventListener("scroll", this.onReposition, true);
+    window.removeEventListener("scroll", this.onPageScroll, true);
     this.hideTopLayer();
   }
   // `open` is a public reflected property (consumers may set it directly,
@@ -22140,7 +22966,7 @@ var RelTimePicker = class extends LitElement44 {
     if (changedProperties.has("open")) {
       if (!this.open) {
         window.removeEventListener("resize", this.onReposition);
-        window.removeEventListener("scroll", this.onReposition, true);
+        window.removeEventListener("scroll", this.onPageScroll, true);
         this.hideTopLayer();
         this.focusPanelOnOpen = true;
         return;
@@ -22148,7 +22974,7 @@ var RelTimePicker = class extends LitElement44 {
       this.resetDraftFromValue();
       this.showTopLayer();
       window.addEventListener("resize", this.onReposition);
-      window.addEventListener("scroll", this.onReposition, true);
+      window.addEventListener("scroll", this.onPageScroll, true);
       const focusPanel = this.focusPanelOnOpen;
       this.focusPanelOnOpen = true;
       setTimeout(() => {
@@ -23125,7 +23951,14 @@ RelTimePicker.styles = css42`
       position: absolute;
       top: calc(100% + 8px);
       left: 0;
-      z-index: 2147483647;
+      /* Fallback stacking ONLY: while the panel is in the top layer this is
+         inert, because top-layer elements are not in the page stacking order at
+         all and order of promotion decides. It applies solely where the Popover
+         API is unavailable. One overridable hook across every overlay, so a
+         consumer with its own stacking scheme sets it once; the default matches
+         rel-select / rel-autocomplete / rel-popover / rel-menubar. This was
+         2147483647, which cannot be layered against anything. */
+      z-index: var(--rel-overlay-fallback-z, 1001);
       background: var(--rel-bg-surface);
       border: 1px solid var(--rel-border-subtle);
       border-radius: var(--rel-border-radius-sm);
@@ -24680,7 +25513,11 @@ var RelUpload = class extends LitElement47 {
   }
   renderRow(f) {
     return html47`
-      <div class="row ${f.status}">
+      <!-- role="listitem" is required, not decorative: the container at
+           .rows carries role="list", and a list whose children are plain divs
+           fails axe's aria-required-children. It was failing on the uploading,
+           failure, disabled and delayed stories alike. -->
+      <div class="row ${f.status}" role="listitem">
         <rel-icon name="document" size="md"></rel-icon>
 
         <div class="row-content">
@@ -24785,8 +25622,19 @@ RelUpload.styles = css45`
       font-family: var(--rel-fonts-font-family);
     }
 
+    /* not-allowed must live on the HOST, which keeps pointer-events: auto.
+       It used to sit on .dropzone, where it was unreachable: .dropzone is
+       inside .body, .body is pointer-events: none when disabled, and an
+       element that is not a hit target never has its cursor consulted —
+       the cursor resolves from the nearest ancestor that IS one. Measured on
+       a disabled upload before the fix: .dropzone computed not-allowed
+       while the user saw the default arrow. getComputedStyle agreed with the
+       CSS and disagreed with the screen, so anyone re-verifying this must
+       HOVER it rather than read the computed value.
+       rel-button hit the same trap and documents the same resolution. */
     :host([disabled]) {
       opacity: 0.6;
+      cursor: not-allowed;
     }
 
     :host([disabled]) .body {
@@ -24799,7 +25647,6 @@ RelUpload.styles = css45`
        instead of a faded live one. */
     :host([disabled]) .dropzone {
       background: var(--rel-bg-neutral-elevated-2);
-      cursor: not-allowed;
     }
 
     .body {