@slotted/styles 0.1.0-beta.10 → 0.1.0-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slotted/styles",
-  "version": "0.1.0-beta.10",
+  "version": "0.1.0-beta.11",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/action-bar/action-bar.css

@@ -380,6 +380,11 @@
    * breakpoint is. While it is raised the collapse does not run: a column has
    * room for every action, and a surface holding what did not fit would be a
    * menu for nothing.
+   *
+   * A bar that holds an overflow control does not stack: it keeps one row, the
+   * actions without a counterpart stay and the rest fold into the menu. It
+   * stacked once, hid its control, and three actions with counterparts stood
+   * in a bar 164 pixels tall on a 358 pixel phone.
    */
   @container slotted-action-bar (width < 24rem) {
     /**
@@ -388,7 +393,7 @@
      * the order a form is read in, and only the paint is reversed. `stretch`
      * fills the column, because a column of natural widths is a ragged edge.
      */
-    [data-ui-action-bar] [data-part-actions] {
+    [data-ui-action-bar]:not(:has([data-part-overflow])) [data-part-actions] {
       --_stacked: 1;
 
       align-items: stretch;
@@ -397,26 +402,15 @@
       margin-inline: 0;
     }
 
-    [data-ui-action-bar] [data-part-action] > * {
+    [data-ui-action-bar]:not(:has([data-part-overflow])) [data-part-action] > * {
       inline-size: 100%;
     }
 
-    /**
-     * While the bar is a column there is no overflow, because a column has room
-     * for every action — the binding stops measuring, and the rule says the same
-     * thing on the side a reader is looking at. Without it the trigger is
-     * painted at the top of the column by the reversal, which is where the
-     * action that confirms belongs.
-     */
-    [data-ui-action-bar] [data-part-overflow] {
-      display: none;
-    }
-
     /**
      * A rule that divided two controls in a row divides two rows here, so it
      * turns with them.
      */
-    [data-ui-action-bar] [data-part-separator] {
+    [data-ui-action-bar]:not(:has([data-part-overflow])) [data-part-separator] {
       block-size: var(--slotted-border-width-thin, 1px);
       inline-size: auto;
       margin-block: calc(var(--_gap) / 2);
@@ -424,14 +418,14 @@
       min-block-size: 0;
     }
 
-    [data-ui-action-bar] [data-part-status] {
+    [data-ui-action-bar]:not(:has([data-part-overflow])) [data-part-status] {
       flex: 1 1 100%;
     }
 
     /* What the consumer put in the status, addressed as the part's child and
        never by a class of its own: while the bar is a column the status fills
        the row, as an action does two rules above. */
-    [data-ui-action-bar] [data-part-status] > * {
+    [data-ui-action-bar]:not(:has([data-part-overflow])) [data-part-status] > * {
       align-content: space-between;
       inline-size: 100%;
     }

package/src/button/button.css

@@ -676,14 +676,20 @@
   }
 
   /**
-   * The label carries a wrapping line height of its own: the control's line
-   * height is 1, which centres a single line inside the box and crushes the
-   * second one. A token longer than the container breaks instead of escaping.
+   * The label is one line at its own width. It broke anywhere once, which made
+   * a button in a row as narrow as one letter: squeezed, "Corrigir" became
+   * three lines and broke inside the word. A row of buttons now overflows, or
+   * a toolbar folds what does not fit; a control held narrower than its label
+   * by its container — `max-inline-size: 100%` — cuts the label with an
+   * ellipsis rather than spilling it past the border. The line height is the
+   * text step's, which the trim below reads.
    */
   [data-ui-button] [data-part-label] {
     line-height: var(--slotted-line-height-sm, 1.45);
     min-inline-size: 0;
-    overflow-wrap: anywhere;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   /**

package/src/button-group/button-group.css

@@ -15,8 +15,9 @@
    * the ends of the bar and nowhere else — and states no distance between its
    * controls. A joined bar does not wrap and does not stack: its shape is the
    * whole point of it, and no surveyed implementation flips that shape at a
-   * width the consumer cannot see coming. A label that outgrows the bar wraps
-   * inside its own control, which is `button`'s rule and not this family's.
+   * width the consumer cannot see coming. A label that outgrows the bar ends
+   * in an ellipsis inside its own control, which is `button`'s rule and not
+   * this family's.
    *
    * The children are the consumer's own elements, selected as direct children.
    * Primer wraps each child in a div of its own and pays for it twice: its

package/src/command-palette/command-palette.css

@@ -135,6 +135,25 @@
     overflow: clip;
   }
 
+  /**
+   * A theme draws the panel as a material with this filter beside a surface
+   * with alpha: `--slotted-command-palette-backdrop-filter`, `none` unless set.
+   * The root is the one layer that paints a ground under either presentation.
+   * A reader who asked for less transparency gets no filter, and under forced
+   * colours the ground is the system's.
+   */
+  [data-ui-command-palette] {
+    -webkit-backdrop-filter: var(--slotted-command-palette-backdrop-filter, none);
+    backdrop-filter: var(--slotted-command-palette-backdrop-filter, none);
+  }
+
+  @media (prefers-reduced-transparency: reduce), (forced-colors: active) {
+    [data-ui-command-palette] {
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+  }
+
   /* ── Size ─────────────────────────────────────────────────────────────── */
 
   [data-ui-command-palette][data-size='sm'] {

package/src/command-palette/command-palette.tokens.json

@@ -2,6 +2,7 @@
   "--slotted-border-subtle",
   "--slotted-border-width-thin",
   "--slotted-command-palette-active",
+  "--slotted-command-palette-backdrop-filter",
   "--slotted-command-palette-border-color",
   "--slotted-command-palette-footer-surface",
   "--slotted-command-palette-highlight",

package/src/data-grid/data-grid.css

@@ -812,10 +812,11 @@
 
   /* The last column's handle stays inside the row: half a target hanging
      past the last cell was twelve pixels of overflow on a row nothing could
-     scroll to. */
+     scroll to. The last column header, not the row's last child: the pop-in
+     header follows it when columns yield to the frame. */
   [data-ui-data-grid]
     [data-part-header-row]
-    > [data-part-column-header]:last-child
+    > [data-part-column-header]:not(:has(~ [data-part-column-header]))
     > [data-part-resizer] {
     inline-size: calc(var(--slotted-target-min, 24px) / 2);
     inset-inline-end: 0;
@@ -840,6 +841,30 @@
     background-color: var(--_cursor);
   }
 
+  /**
+   * Under `resizeMode="deferred"` the drag moves this line and nothing else:
+   * it stands on the column's edge, spans the scroller's visible height and
+   * slides by `translate`, which lays nothing out; the width is applied once,
+   * on release.
+   */
+  [data-ui-data-grid] [data-part-resizer] > [data-part-resize-guide] {
+    background-color: var(
+      --slotted-data-grid-resize-guide-color,
+      var(--slotted-focus-ring-color, Highlight)
+    );
+    inline-size: var(
+      --slotted-data-grid-resize-guide-width,
+      var(--slotted-border-width-thick, 2px)
+    );
+    inset-block-start: 0;
+    inset-inline-start: calc(
+      50% - var(--slotted-data-grid-resize-guide-width, var(--slotted-border-width-thick, 2px)) / 2
+    );
+    pointer-events: none;
+    position: absolute;
+    z-index: 2;
+  }
+
   /**
    * ── Reordering ─────────────────────────────────────────────────────────
    *
@@ -2414,6 +2439,11 @@
    * ── Scheme and platform ────────────────────────────────────────────────
    */
   @media (forced-colors: active) {
+    [data-ui-data-grid] [data-part-resizer] > [data-part-resize-guide] {
+      background-color: Highlight;
+      forced-color-adjust: none;
+    }
+
     [data-ui-data-grid] [role='gridcell'][data-current],
     [data-ui-data-grid] [role='columnheader'][data-current] {
       box-shadow: inset 0 0 0 var(--_ring-width) Highlight;

package/src/data-grid/data-grid.tokens.json

@@ -45,6 +45,8 @@
   "--slotted-data-grid-pin-shadow-size",
   "--slotted-data-grid-radius",
   "--slotted-data-grid-range-surface",
+  "--slotted-data-grid-resize-guide-color",
+  "--slotted-data-grid-resize-guide-width",
   "--slotted-data-grid-row-block-size",
   "--slotted-data-grid-row-color-selected",
   "--slotted-data-grid-row-max-block-size",

package/src/detail-panel/detail-panel.css

@@ -318,7 +318,9 @@
    * column above.
    */
   [data-ui-detail-panel] > [data-part-footer] {
-    background-color: var(--_ground);
+    -webkit-backdrop-filter: var(--slotted-detail-panel-footer-backdrop-filter, none);
+    backdrop-filter: var(--slotted-detail-panel-footer-backdrop-filter, none);
+    background-color: var(--slotted-detail-panel-footer-background, var(--_ground));
     border-block-start: var(--_rule-size) solid var(--_rule);
     inset-block-end: var(--slotted-page-sticky-bottom, 0px);
     margin-block-start: auto;
@@ -326,4 +328,17 @@
     position: sticky;
     z-index: var(--slotted-z-index-sticky, 100);
   }
+
+  /**
+   * A theme draws the footer as a material with its own ground and filter,
+   * apart from the ground a sticky section header reads. A reader who asked
+   * for less transparency gets no filter, and under forced colours the ground
+   * is the system's.
+   */
+  @media (prefers-reduced-transparency: reduce), (forced-colors: active) {
+    [data-ui-detail-panel] > [data-part-footer] {
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+  }
 }

package/src/detail-panel/detail-panel.tokens.json

@@ -6,6 +6,8 @@
   "--slotted-detail-panel-aside-size-md",
   "--slotted-detail-panel-aside-size-sm",
   "--slotted-detail-panel-border",
+  "--slotted-detail-panel-footer-backdrop-filter",
+  "--slotted-detail-panel-footer-background",
   "--slotted-detail-panel-gap-lg",
   "--slotted-detail-panel-gap-md",
   "--slotted-detail-panel-gap-sm",

package/src/dialog/dialog.css

@@ -356,6 +356,21 @@
      */
     opacity: 0;
     transition: opacity var(--slotted-duration-short) var(--slotted-easing-exit);
+
+    /**
+     * A theme draws the panel as a material with a surface that has alpha and
+     * this filter, `none` unless set. The panel's own fade keeps the filter
+     * drawn; an ancestor's opacity below one is what removes it.
+     */
+    -webkit-backdrop-filter: var(--slotted-dialog-backdrop-filter, none);
+    backdrop-filter: var(--slotted-dialog-backdrop-filter, none);
+  }
+
+  @media (prefers-reduced-transparency: reduce), (forced-colors: active) {
+    [data-ui-dialog] > [data-part-viewport] > [data-part-content] {
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
   }
 
   /**
@@ -1045,6 +1060,29 @@
     overflow: visible;
   }
 
+  /**
+   * The children fade in the panel's place, at the panel's durations. A plain
+   * panel paints nothing, so the picture is the same; what changes is that no
+   * ancestor of a child's material is below full opacity, which in Chromium
+   * would draw no backdrop filter until the fade ended — a command palette
+   * drawn as a material showed the page sharp behind it for the whole fade.
+   */
+  [data-ui-dialog][data-surface='plain'] > [data-part-viewport] > [data-part-content] {
+    opacity: 1;
+    transition: none;
+  }
+  [data-ui-dialog][data-surface='plain'] > [data-part-viewport] > [data-part-content] > * {
+    opacity: 0;
+    transition: opacity var(--slotted-duration-short) var(--slotted-easing-exit);
+  }
+  [data-ui-dialog][data-surface='plain'][data-open]
+    > [data-part-viewport]
+    > [data-part-content]
+    > * {
+    opacity: 1;
+    transition: opacity var(--slotted-duration-long) var(--slotted-easing-standard);
+  }
+
   [data-ui-dialog][data-surface='plain']
     > [data-part-viewport]
     > [data-part-content]

package/src/dialog/dialog.tokens.json

@@ -8,6 +8,7 @@
   "--slotted-control-radius",
   "--slotted-control-transition-duration",
   "--slotted-control-transition-easing",
+  "--slotted-dialog-backdrop-filter",
   "--slotted-dialog-body-color",
   "--slotted-dialog-border-color",
   "--slotted-dialog-close-active-background",

package/src/drawer/drawer.css

@@ -412,7 +412,9 @@
     transition:
       translate var(--_slide),
       inline-size var(--_move),
-      block-size var(--_move);
+      block-size var(--_move),
+      border-start-start-radius var(--_move),
+      border-start-end-radius var(--_move);
   }
 
   [data-ui-drawer][data-mode='overlay']:not([data-open]) > [data-part-panel] {
@@ -525,6 +527,22 @@
     border-start-end-radius: var(--slotted-drawer-radius, var(--_radius));
   }
 
+  /**
+   * A sheet that reaches the top of the layer is the screen, Material 3's
+   * expanded bottom sheet: its top corners square — a theme keeps a radius
+   * with `--slotted-drawer-radius-expanded` — and its header clears the safe
+   * area the status bar takes. The binding writes `data-expanded` while the
+   * extent is the whole layer, and under `size="full"`.
+   */
+  [data-ui-drawer][data-side='bottom'][data-expanded] > [data-part-panel] {
+    border-start-start-radius: var(--slotted-drawer-radius-expanded, 0px);
+    border-start-end-radius: var(--slotted-drawer-radius-expanded, 0px);
+  }
+
+  [data-ui-drawer][data-side='bottom'][data-expanded] > [data-part-panel] > [data-part-header] {
+    padding-block-start: calc(var(--_padding-block) + env(safe-area-inset-top, 0px));
+  }
+
   /**
    * A sheet's separator takes the first row, so the three that follow move down
    * one. `top` needs no such rule: its separator is the fourth row and the

package/src/drawer/drawer.tokens.json

@@ -23,6 +23,7 @@
   "--slotted-drawer-extent-xl",
   "--slotted-drawer-footer-surface",
   "--slotted-drawer-radius",
+  "--slotted-drawer-radius-expanded",
   "--slotted-drawer-resizer-line-active-color",
   "--slotted-drawer-resizer-line-color",
   "--slotted-drawer-rule-color",

package/src/page/page.css

@@ -147,6 +147,22 @@
     translate: 0 100%;
   }
 
+  /**
+   * A theme draws the footer as a material with a ground that has alpha and
+   * `--slotted-page-footer-backdrop-filter`, `none` unless set. The footer's
+   * own fade keeps the filter drawn: only an ancestor's opacity removes it.
+   */
+  [data-ui-page] > [data-part-footer] {
+    -webkit-backdrop-filter: var(--slotted-page-footer-backdrop-filter, none);
+    backdrop-filter: var(--slotted-page-footer-backdrop-filter, none);
+  }
+  @media (prefers-reduced-transparency: reduce), (forced-colors: active) {
+    [data-ui-page] > [data-part-footer] {
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+  }
+
   [data-ui-page] > [data-part-footer] > * > [data-part-actions] {
     align-items: center;
     display: flex;

package/src/page/page.tokens.json

@@ -7,6 +7,7 @@
   "--slotted-font-family-sans",
   "--slotted-page-background-sunken",
   "--slotted-page-background-surface",
+  "--slotted-page-footer-backdrop-filter",
   "--slotted-page-footer-background",
   "--slotted-page-footer-border",
   "--slotted-page-footer-padding-block",

package/src/page-header/page-header.css

@@ -77,6 +77,14 @@
     --_rule-size: var(--slotted-border-width-thin, 1px);
     --_duration: var(--slotted-duration-medium);
     --_easing: var(--slotted-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+    /**
+     * How the ground changes when `plain` takes it back, or a material takes
+     * over, as content passes under the chrome. A duration of nought makes the
+     * change instant.
+     */
+    --_ground-transition: background-color
+      var(--slotted-page-header-ground-duration, var(--_duration))
+      var(--slotted-page-header-ground-easing, var(--_easing));
 
     background-color: var(--_ground);
     color: var(--_text);
@@ -98,7 +106,9 @@
      * is the slide of the header area under the title and never a fight with
      * the scroll, during which the offset is constant.
      */
-    transition: inset-block-start var(--_duration) var(--_easing);
+    transition:
+      inset-block-start var(--_duration) var(--_easing),
+      var(--_ground-transition);
     /**
      * Above every other sticky thing on the page — a section's header, a
      * table's column header, a pinned corner — so what a short section pushes
@@ -189,7 +199,9 @@
   [data-ui-page-header][data-variant='floating'] > * > [data-part-title-area] {
     border-start-end-radius: calc(var(--_radius) - var(--_rule-size));
     border-start-start-radius: calc(var(--_radius) - var(--_rule-size));
-    transition: inset-block-start var(--_duration) var(--_easing);
+    transition:
+      inset-block-start var(--_duration) var(--_easing),
+      var(--_ground-transition);
   }
   [data-ui-page-header][data-variant='floating'][data-stuck] {
     --_sticky-inset: var(--slotted-page-header-inset, var(--slotted-space-4, 0.5rem));
@@ -231,6 +243,7 @@
     overflow-anchor: none;
     padding-block: var(--_padding-block) var(--slotted-space-4, 0.5rem);
     position: sticky;
+    transition: var(--_ground-transition);
     z-index: 2;
   }
 
@@ -254,8 +267,24 @@
    * transparent at rest, filters nothing at rest.
    */
   [data-ui-page-header][data-stuck] {
-    -webkit-backdrop-filter: var(--slotted-page-header-backdrop-filter, none);
-    backdrop-filter: var(--slotted-page-header-backdrop-filter, none);
+    -webkit-backdrop-filter: var(--slotted-page-header-backdrop-filter, var(--_backdrop, none));
+    backdrop-filter: var(--slotted-page-header-backdrop-filter, var(--_backdrop, none));
+  }
+
+  /**
+   * `material`: stuck, the chrome is the theme's material — the ground
+   * `--slotted-surface-material` and the filter `--slotted-material-backdrop`
+   * — in every variant. At rest each variant keeps its own ground. The family
+   * tokens still win, and the pill keeps the opaque surface, because half of
+   * it hangs below the root over content the root's filter does not reach.
+   * The theme makes both material tokens opaque under reduced transparency.
+   */
+  [data-ui-page-header][data-material][data-stuck] {
+    --_ground: var(
+      --slotted-page-header-background,
+      var(--slotted-surface-material, var(--_surface))
+    );
+    --_backdrop: var(--slotted-material-backdrop, none);
   }
 
   /**
@@ -1138,6 +1167,30 @@
       > [data-part-marks] {
       grid-column: 1 / -1;
     }
+    /* A rich title — a visual, marks or a subheading — leaves a whole row free under it, and a toolbar
+       that folds takes that row: beside the title it had the 40 per cent the title left, and
+       folded every action on a 390 pixel phone. Beside a plain title it stays on the title row. */
+    [data-ui-page-header]
+      > *
+      > [data-part-title-area]
+      > [data-part-title-row]:has(
+        > [data-part-actions] > [data-ui-toolbar][data-overflow='menu']
+      ):has(
+        > [data-part-visual],
+        > [data-part-title] > :is([data-part-subheading], [data-part-marks]:not(:empty))
+      ) {
+      flex-wrap: wrap;
+    }
+    [data-ui-page-header]
+      > *
+      > [data-part-title-area]
+      > [data-part-title-row]:has(
+        > [data-part-visual],
+        > [data-part-title] > :is([data-part-subheading], [data-part-marks]:not(:empty))
+      )
+      > [data-part-actions]:has(> [data-ui-toolbar][data-overflow='menu']) {
+      flex: 1 1 100%;
+    }
     /* One line, as snapped: the phone has no second one to give it. */
     [data-ui-page-header]
       > *

package/src/page-header/page-header.tokens.json

@@ -31,12 +31,15 @@
   "--slotted-line-height-md",
   "--slotted-line-height-sm",
   "--slotted-line-height-xl",
+  "--slotted-material-backdrop",
   "--slotted-page-header-backdrop-filter",
   "--slotted-page-header-background",
   "--slotted-page-header-border",
   "--slotted-page-header-control-size",
   "--slotted-page-header-description-measure",
   "--slotted-page-header-gap",
+  "--slotted-page-header-ground-duration",
+  "--slotted-page-header-ground-easing",
   "--slotted-page-header-heading-size-lg",
   "--slotted-page-header-heading-size-md",
   "--slotted-page-header-heading-size-sm",
@@ -58,6 +61,7 @@
   "--slotted-space-5",
   "--slotted-space-6",
   "--slotted-surface",
+  "--slotted-surface-material",
   "--slotted-target-comfortable",
   "--slotted-target-min",
   "--slotted-text",

package/src/spinner/spinner.css

@@ -8,19 +8,25 @@
    * chases itself around a faint track, growing from its head and closing
    * from its tail, so the eye reads work rather than a wheel.
    *
-   * The drawing is vector. Two SVG images mask the host's ink: the track, the
-   * whole circle at a fifth of the ink's strength, and the arc, a stroke with
-   * round caps whose dash grows and travels by its own animation. The images
-   * are rasterised again on every frame at the box's size, so the stroke is
-   * as sharp at twelve pixels as at twenty-four, its ends are round, and
-   * nothing is cut at a fractional edge.
+   * The drawing is vector and inline: the host writes an `svg` of two circles
+   * inside the box, the track and the arc, stroked in the host's ink. No
+   * image is fetched. The ring was two SVG images used as masks, written as
+   * `data:` URLs, and a page whose policy allows images from its own origin
+   * alone refused both: the ring was absent.
    *
-   * It was gradients before this — a conic arc, two radial caps and a radial
-   * mask, three angles animated as custom properties. A conic gradient's hard
-   * stop has no antialiasing, so the arc stepped from frame to frame like a
-   * GIF; the half-pixel stops of the caps and the mask blurred a ring of
-   * thirteen pixels; and a ring of five sixths of the box sat on a fractional
-   * inset the mask clipped.
+   * The turn is the box's `rotate`, which the compositor runs: the arc used to
+   * turn inside the mask image, which is rasterised again on the main thread
+   * for every frame, and with the main thread busy for two seconds the ring
+   * drew no frame at all (`tools/harness/scenarios/spinner-busy.mjs`). The
+   * dash still opens and travels on the main thread; under load the arc keeps
+   * turning at the length it had.
+   *
+   * It was gradients before the masks — a conic arc, two radial caps and a
+   * radial mask, three angles animated as custom properties. A conic
+   * gradient's hard stop has no antialiasing, so the arc stepped from frame to
+   * frame like a GIF, and the half-pixel stops of the caps and the mask
+   * blurred a ring of thirteen pixels. A stroke has round caps and is
+   * antialiased at every size.
    *
    * The geometry is the icon set's: in a box of twenty-four units the ring is
    * twenty across and the stroke is two and a quarter, so the swap with a
@@ -28,31 +34,20 @@
    */
   [data-ui-spinner] {
     --_size: var(--slotted-spinner-size, var(--slotted-control-icon-size-md, 16px));
-    --_track: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.875' fill='none' stroke='%23000' stroke-opacity='0.2' stroke-width='2.25'/%3E%3C/svg%3E");
-    /*
-     * The arc: a dash of one to seventy hundredths of the circle that opens
-     * in the first half of the cycle and travels on in the second, while the
-     * whole circle turns under it. Each half eases on its own.
-     */
-    --_arc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Ccircle cx='12' cy='12' r='8.875' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' pathLength='100' stroke-dasharray='1 150' transform='rotate(-90 12 12)'%3E%3Canimate attributeName='stroke-dasharray' values='1 150;70 150;70 150' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.42 0 0.58 1;0.42 0 0.58 1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-28;-99' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.42 0 0.58 1;0.42 0 0.58 1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
 
-    background-color: currentColor;
+    /* A turn and a dash out of step, so the arc never comes back to the same place. */
+    animation: slotted-spinner-turn calc(var(--slotted-duration-loop-slow) * 1.25) linear infinite;
     block-size: var(--_size);
+    color: inherit;
     display: inline-block;
     /* A ring that shrinks is not a ring: it keeps its size in a flex row. */
     flex: none;
     /*
-     * The ring is painted with a background, and forced colours replace a
-     * background that is not one of the system's own: the ring would go and
-     * the box stay. Not adjusting keeps `currentcolor`, the host's ink, which
-     * forced colours have already set.
+     * Not adjusting keeps `currentcolor`, the host's ink, which forced colours
+     * have already set, on a stroke the system would otherwise repaint.
      */
     forced-color-adjust: none;
     inline-size: var(--_size);
-    mask-image: var(--_arc), var(--_track);
-    mask-position: center;
-    mask-repeat: no-repeat;
-    mask-size: 100% 100%;
     opacity: 1;
     scale: 1;
     transition:
@@ -61,6 +56,56 @@
     vertical-align: middle;
   }
 
+  [data-ui-spinner] > svg {
+    block-size: 100%;
+    display: block;
+    fill: none;
+    inline-size: 100%;
+    stroke: currentColor;
+    stroke-width: 2.25;
+  }
+
+  /* The track: the whole circle at a fifth of the ink's strength. */
+  [data-ui-spinner] > svg > circle:first-child {
+    stroke-opacity: 0.2;
+  }
+
+  /*
+   * The arc: a dash of one to seventy hundredths of the circle that opens in
+   * the first half of the cycle and travels on in the second, from the top.
+   * Each half eases on its own.
+   */
+  [data-ui-spinner] > svg > circle:last-child {
+    animation: slotted-spinner-arc var(--slotted-duration-loop-slow) infinite;
+    rotate: -90deg;
+    stroke-dasharray: 1 150;
+    stroke-linecap: round;
+    transform-origin: center;
+  }
+
+  @keyframes slotted-spinner-turn {
+    to {
+      rotate: 360deg;
+    }
+  }
+
+  @keyframes slotted-spinner-arc {
+    0% {
+      animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
+      stroke-dasharray: 1 150;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
+      stroke-dasharray: 70 150;
+      stroke-dashoffset: -28;
+    }
+    100% {
+      stroke-dasharray: 70 150;
+      stroke-dashoffset: -99;
+    }
+  }
+
   @starting-style {
     [data-ui-spinner] {
       opacity: 0;
@@ -68,14 +113,15 @@
     }
   }
 
-  /**
-   * A frozen ring still communicates waiting: the track, and an arc of three
-   * quarters resting on it. Stopping it entirely is less distracting than
-   * replacing one continuous motion with a slower one.
-   */
+  /* Still: a track with an arc of three quarters resting on it. */
   @media (prefers-reduced-motion: reduce) {
-    [data-ui-spinner] {
-      --_arc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.875' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' pathLength='100' stroke-dasharray='75 150' transform='rotate(-90 12 12)'/%3E%3C/svg%3E");
+    [data-ui-spinner],
+    [data-ui-spinner] > svg > circle:last-child {
+      animation: none;
+    }
+
+    [data-ui-spinner] > svg > circle:last-child {
+      stroke-dasharray: 75 150;
     }
   }
 }

package/src/spinner/spinner.tokens.json

@@ -2,5 +2,6 @@
   "--slotted-control-icon-size-md",
   "--slotted-control-transition-duration",
   "--slotted-control-transition-easing",
+  "--slotted-duration-loop-slow",
   "--slotted-spinner-size"
 ]

package/src/tabs/tabs.css

@@ -464,10 +464,12 @@
    * label it keeps a minimum length, centred on the content. It stands
    * `--slotted-tabs-marker-offset` above the list's edge, over the track, and the axes are physical in this one rule
    * because the measurement is: the position is from the list's left edge.
-   * Position and length are both layout properties, so one thread advances
-   * both edges in the same frame: a composited `translate` beside a
-   * main-thread `inline-size` drifted apart while the panel rendered, and the
-   * bar grew and shrank on its way between tabs of unequal widths.
+   * At rest the bar is laid out by `left` and `inline-size`, so its ends keep
+   * their radius; it slides by `translate` and `scale` together, both on the
+   * compositor, so both edges advance in the same frame. A composited
+   * `translate` beside a main-thread `inline-size` drifted apart while the
+   * panel rendered, and a slide of `left` and `inline-size` lost every frame
+   * to a panel rendering on the same thread.
    */
   [data-ui-tabs] > :where([data-part-list]) > [data-part-marker] {
     --_start-inset: var(--_marker-inset);
@@ -503,28 +505,33 @@
   }
 
   /**
-   * It slides only when the selection moves: `data-moving` arrives with a
-   * position whose tab changed, and leaves with a re-measurement of the same
-   * tab, so the first position, a font arriving and a resized list place the
-   * bar without motion. The slide takes the medium duration on a curve that
-   * starts and ends slowly, `--slotted-tabs-marker-easing`: the control
-   * duration on the theme's decelerating curve covered a third of the
-   * distance in its first frame and read as a jump. Under reduced motion it
-   * jumps.
+   * It slides only when the selection moves: `createIndicator` places the bar
+   * on the new tab, writes the shift and the scale from the box it was drawn
+   * in, and raises `data-moving`, which starts the slide from there back to
+   * nought; a re-measurement of the same tab drops it, so the first position,
+   * a font arriving and a resized list place the bar without motion. The slide
+   * takes the medium duration on a curve that starts and ends slowly,
+   * `--slotted-tabs-marker-easing`: the control duration on the theme's
+   * decelerating curve covered a third of the distance in its first frame and
+   * read as a jump. Under reduced motion it jumps.
    */
   [data-ui-tabs] > :where([data-part-list]) > [data-part-marker][data-moving] {
     --_marker-easing: var(--slotted-tabs-marker-easing, cubic-bezier(0.4, 0, 0.2, 1));
 
-    transition:
-      left var(--slotted-duration-medium) var(--_marker-easing),
-      top var(--slotted-duration-medium) var(--_marker-easing),
-      inline-size var(--slotted-duration-medium) var(--_marker-easing),
-      block-size var(--slotted-duration-medium) var(--_marker-easing);
+    animation: slotted-tabs-marker-slide var(--slotted-duration-medium) var(--_marker-easing);
+    transform-origin: 0 0;
+  }
+
+  @keyframes slotted-tabs-marker-slide {
+    from {
+      translate: var(--_indicator-shift, 0px 0px);
+      scale: var(--_indicator-scale, 1 1);
+    }
   }
 
   @media (prefers-reduced-motion: reduce) {
     [data-ui-tabs] > :where([data-part-list]) > [data-part-marker][data-moving] {
-      transition: none;
+      animation: none;
     }
   }
 

package/src/toast/toast.css

@@ -381,6 +381,25 @@
    * tone is in the mark and in nothing else, which is enough — it is the
    * silhouette that survives forced colours anyway.
    */
+  /**
+   * A theme that paints the raised message with a surface that has alpha blurs
+   * what passes under it: `--slotted-toast-backdrop-filter`, `none` unless set.
+   * Only `raised` floats over content it does not own; `soft` and `solid` are
+   * tone grounds. A reader who asked for less transparency gets no filter, and
+   * under forced colours the ground is the system's.
+   */
+  [data-ui-toast] > [data-part-list] > [data-part-item][data-variant='raised'] {
+    -webkit-backdrop-filter: var(--slotted-toast-backdrop-filter, none);
+    backdrop-filter: var(--slotted-toast-backdrop-filter, none);
+  }
+
+  @media (prefers-reduced-transparency: reduce), (forced-colors: active) {
+    [data-ui-toast] > [data-part-list] > [data-part-item][data-variant='raised'] {
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+  }
+
   [data-ui-toast] > [data-part-list] > [data-part-item][data-variant='soft'] {
     --_ground: var(--_tone-surface);
     --_edge: var(--_tone-border);

package/src/toast/toast.tokens.json

@@ -36,6 +36,7 @@
   "--slotted-text",
   "--slotted-text-muted",
   "--slotted-toast-actions-gap",
+  "--slotted-toast-backdrop-filter",
   "--slotted-toast-border-color",
   "--slotted-toast-border-width",
   "--slotted-toast-close-radius",