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

package/src/sparkline/sparkline.css

@@ -11,7 +11,7 @@
    * chooses its own width: it is a thing read beside a value, and the value's
    * container is what has the room. The height is the family's, by size step.
    */
-  [data-ui='sparkline'] {
+  [data-ui-sparkline] {
     /* The height of the box, by size. Three steps of the space scale rather
        than of control geometry: a sparkline is content, not a control, and a
        dense table asks for `size="sm"` rather than for a shorter `md`. */
@@ -55,7 +55,7 @@
      * and wins; a series slot says which one it is; a sparkline that names
      * neither reads the colour its container states — a card's trend region
      * writes `--slotted-sparkline-color` from its own tone — or the first slot
-     * of the data scale, which is the theme's own blue.
+     * of the data scale, which takes the accent seed's hue.
      */
     --_color: var(--slotted-sparkline-color, var(--slotted-data-1));
 
@@ -65,53 +65,57 @@
     inline-size: 100%;
     /* The box is the drawing; there is no line box to leave room under. */
     line-height: 0;
-    min-inline-size: 0;
+    /* The nominal width of the grid. A percentage of a box sized by its
+       content — an auto table column — is the content's width, and a drawing
+       is no content: the sparkline started at zero and stretched once the
+       column settled. */
+    min-inline-size: var(--slotted-sparkline-min-inline-size, 6rem);
     vertical-align: middle;
   }
 
-  [data-ui='sparkline'][data-size='sm'] {
+  [data-ui-sparkline][data-size='sm'] {
     --_size: var(--slotted-sparkline-block-size-sm, var(--slotted-space-7, 1.25rem));
     --_stroke: var(--slotted-sparkline-line-width-sm, var(--slotted-border-width-medium, 1.5px));
     --_marker: var(--slotted-sparkline-marker-size-sm, var(--slotted-space-2, 0.25rem));
     --_ring: var(--slotted-sparkline-ring-width-sm, var(--slotted-border-width-medium, 1.5px));
   }
 
-  [data-ui='sparkline'][data-size='lg'] {
+  [data-ui-sparkline][data-size='lg'] {
     --_size: var(--slotted-sparkline-block-size-lg, var(--slotted-space-11, 3rem));
     --_marker: var(--slotted-sparkline-marker-size-lg, var(--slotted-space-4, 0.5rem));
   }
 
   /* ── Series: which one of eight this is ──────────────────────────────── */
 
-  [data-ui='sparkline'][data-series='1'] {
+  [data-ui-sparkline][data-series='1'] {
     --_color: var(--slotted-data-1);
   }
 
-  [data-ui='sparkline'][data-series='2'] {
+  [data-ui-sparkline][data-series='2'] {
     --_color: var(--slotted-data-2);
   }
 
-  [data-ui='sparkline'][data-series='3'] {
+  [data-ui-sparkline][data-series='3'] {
     --_color: var(--slotted-data-3);
   }
 
-  [data-ui='sparkline'][data-series='4'] {
+  [data-ui-sparkline][data-series='4'] {
     --_color: var(--slotted-data-4);
   }
 
-  [data-ui='sparkline'][data-series='5'] {
+  [data-ui-sparkline][data-series='5'] {
     --_color: var(--slotted-data-5);
   }
 
-  [data-ui='sparkline'][data-series='6'] {
+  [data-ui-sparkline][data-series='6'] {
     --_color: var(--slotted-data-6);
   }
 
-  [data-ui='sparkline'][data-series='7'] {
+  [data-ui-sparkline][data-series='7'] {
     --_color: var(--slotted-data-7);
   }
 
-  [data-ui='sparkline'][data-series='8'] {
+  [data-ui-sparkline][data-series='8'] {
     --_color: var(--slotted-data-8);
   }
 
@@ -123,33 +127,37 @@
    * shape rather than found. `neutral` is the comparison series and the aside,
    * in the step the page uses for one.
    */
-  [data-ui='sparkline'][data-tone='neutral'] {
+  [data-ui-sparkline][data-tone='neutral'] {
     --_color: var(--slotted-text-muted, GrayText);
   }
 
-  [data-ui='sparkline'][data-tone='accent'] {
+  [data-ui-sparkline][data-tone='accent'] {
     --_color: var(--slotted-tone-accent-text);
   }
 
-  [data-ui='sparkline'][data-tone='secondary'] {
+  [data-ui-sparkline][data-tone='secondary'] {
     --_color: var(--slotted-tone-secondary-text);
   }
 
-  [data-ui='sparkline'][data-tone='success'] {
+  [data-ui-sparkline][data-tone='success'] {
     --_color: var(--slotted-tone-success-text);
   }
 
-  [data-ui='sparkline'][data-tone='warning'] {
+  [data-ui-sparkline][data-tone='info'] {
+    --_color: var(--slotted-tone-info-text);
+  }
+
+  [data-ui-sparkline][data-tone='warning'] {
     --_color: var(--slotted-tone-warning-text);
   }
 
-  [data-ui='sparkline'][data-tone='danger'] {
+  [data-ui-sparkline][data-tone='danger'] {
     --_color: var(--slotted-tone-danger-text);
   }
 
   /* ── The drawing ───────────────────────────────────────────────────────── */
 
-  [data-ui='sparkline'] [data-part='plot'] {
+  [data-ui-sparkline] [data-part-plot] {
     block-size: 100%;
     display: block;
     inline-size: 100%;
@@ -165,12 +173,11 @@
    * of forty sparklines does not mint forty gradients. `mask-image` applies to
    * an SVG child from CSS in every engine that ships `@layer`.
    */
-  [data-ui='sparkline'] [data-part='area'] {
+  [data-ui-sparkline] [data-part-area] {
     fill: var(--_color);
     fill-opacity: var(--_area-opacity);
     mask-image: linear-gradient(to bottom, black, transparent);
     stroke: none;
-    transition: d var(--slotted-duration-medium) var(--slotted-easing-standard);
   }
 
   /**
@@ -179,26 +186,23 @@
    * stretched to the box; once measured, the grid is the box and the effect
    * changes nothing.
    */
-  [data-ui='sparkline'] [data-part='line'] {
+  [data-ui-sparkline] [data-part-line] {
     fill: none;
     stroke: var(--_color);
     stroke-linecap: round;
     stroke-linejoin: round;
     stroke-width: var(--_stroke);
-    transition: d var(--slotted-duration-medium) var(--slotted-easing-standard);
     vector-effect: non-scaling-stroke;
   }
 
-  [data-ui='sparkline'] [data-part='bar'] {
+  [data-ui-sparkline] [data-part-bar] {
     fill: var(--_bar-dim);
     stroke: none;
-    transition:
-      d var(--slotted-duration-medium) var(--slotted-easing-standard),
-      fill var(--slotted-duration-short) var(--slotted-easing-standard);
+    transition: fill var(--slotted-duration-short) var(--slotted-easing-standard);
   }
 
   /* The current period is the one the value beside the chart is about. */
-  [data-ui='sparkline'] [data-part='bar'][data-current] {
+  [data-ui-sparkline] [data-part-bar][data-current] {
     fill: var(--_color);
   }
 
@@ -207,7 +211,7 @@
    * that is not data, and the dash is what says so before the colour does.
    * The dash lengths are geometry of the stroke, not a scale step.
    */
-  [data-ui='sparkline'] [data-part='reference'] {
+  [data-ui-sparkline] [data-part-reference] {
     fill: none;
     stroke: var(--_reference-color);
     stroke-dasharray: 2 3;
@@ -226,20 +230,38 @@
    * in the colour of the ground so the disc stays legible where it lands on
    * the line.
    */
-  [data-ui='sparkline'] [data-part='ring'],
-  [data-ui='sparkline'] [data-part='marker'] {
+  [data-ui-sparkline] [data-part-ring],
+  [data-ui-sparkline] [data-part-marker] {
     fill: none;
     stroke-linecap: round;
-    transition: d var(--slotted-duration-medium) var(--slotted-easing-standard);
     vector-effect: non-scaling-stroke;
   }
 
-  [data-ui='sparkline'] [data-part='ring'] {
+  /**
+   * A new series eases into place; a new box does not. The binding writes
+   * `data-animate` for the render whose `data` changed and not for one whose
+   * box changed: a path that eased to a column width settling after mount
+   * read as the series growing from nothing.
+   */
+  @media (prefers-reduced-motion: no-preference) {
+    [data-ui-sparkline][data-animate]
+      :is([data-part-area], [data-part-line], [data-part-ring], [data-part-marker]) {
+      transition: d var(--slotted-duration-medium) var(--slotted-easing-standard);
+    }
+
+    [data-ui-sparkline][data-animate] [data-part-bar] {
+      transition:
+        d var(--slotted-duration-medium) var(--slotted-easing-standard),
+        fill var(--slotted-duration-short) var(--slotted-easing-standard);
+    }
+  }
+
+  [data-ui-sparkline] [data-part-ring] {
     stroke: var(--_ring-color);
     stroke-width: calc(var(--_marker) + 2 * var(--_ring));
   }
 
-  [data-ui='sparkline'] [data-part='marker'] {
+  [data-ui-sparkline] [data-part-marker] {
     stroke: var(--_color);
     stroke-width: var(--_marker);
   }
@@ -250,7 +272,7 @@
    * inline end. The grid is mirrored rather than recomputed, so both
    * bindings hand the engine the same box and the same order.
    */
-  [data-ui='sparkline']:dir(rtl) [data-part='plot'] {
+  [data-ui-sparkline]:dir(rtl) [data-part-plot] {
     transform: scaleX(-1);
   }
 
@@ -263,19 +285,19 @@
    * one `CanvasText`, and the wash goes.
    */
   @media (forced-colors: active) {
-    [data-ui='sparkline'] [data-part='area'] {
+    [data-ui-sparkline] [data-part-area] {
       display: none;
     }
 
-    [data-ui='sparkline'] [data-part='bar'] {
+    [data-ui-sparkline] [data-part-bar] {
       fill: GrayText;
     }
 
-    [data-ui='sparkline'] [data-part='bar'][data-current] {
+    [data-ui-sparkline] [data-part-bar][data-current] {
       fill: CanvasText;
     }
 
-    [data-ui='sparkline'] [data-part='ring'] {
+    [data-ui-sparkline] [data-part-ring] {
       stroke: Canvas;
     }
   }

package/src/sparkline/sparkline.tokens.json

@@ -31,6 +31,7 @@
   "--slotted-sparkline-marker-size",
   "--slotted-sparkline-marker-size-lg",
   "--slotted-sparkline-marker-size-sm",
+  "--slotted-sparkline-min-inline-size",
   "--slotted-sparkline-reference-color",
   "--slotted-sparkline-ring-color",
   "--slotted-sparkline-ring-width",
@@ -39,6 +40,7 @@
   "--slotted-text-muted",
   "--slotted-tone-accent-text",
   "--slotted-tone-danger-text",
+  "--slotted-tone-info-text",
   "--slotted-tone-secondary-text",
   "--slotted-tone-success-text",
   "--slotted-tone-warning-text"

package/src/spinner/spinner.css

@@ -4,221 +4,124 @@
    * way — a button that is working, a select or combobox whose options are
    * still on their way — is drawn here, and a host names it and places it.
    *
-   * It was a glyph before this: Lucide's `loader-circle`, a three-quarter arc
-   * with two cut ends, masked over the ink and set turning. It read as what
-   * it was, a static shape being rotated, and at the small step its stroke
-   * was heavier than anything beside it. What is drawn now is the pattern
-   * Material and the platform's own progress ring settle on: an arc that
+   * The pattern is Material's and the platform's progress ring: an arc that
    * chases itself around a faint track, growing from its head and closing
    * from its tail, so the eye reads work rather than a wheel.
    *
-   * Three layers, one mask. The track is the whole circle in the host's ink
-   * at a fifth of its strength — the same step every family uses for a
-   * band or a rail on its own ground — and it is what stands when motion is
-   * off. The arc is a conic gradient from the tail angle to the head angle,
-   * in full ink. Two dots the width of the stroke sit at the two angles and
-   * give the arc the round caps a conic gradient cannot draw. The annulus is
-   * cut by a radial mask a pixel wide at the edge, so the stroke is drawn
-   * rather than stepped. Everything is measured from the box, so the ring is
-   * the same drawing at every step a host can ask for.
+   * 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.
    *
-   * Three angles move it, and none is a rotation of the box. A turning box
-   * is rasterised once and spun as a bitmap; a gradient repainted by angle is
-   * as sharp on the last frame as on the first. In the first half of a cycle
-   * the head runs ahead on an ease and the tail holds, so the arc opens from
-   * a sliver to most of the circle; in the second half the head holds and
-   * the tail runs the same distance, so the arc closes from behind. Neither
-   * end ever moves backward. A linear turn under both keeps the whole
-   * travelling through the eased ends, and it is a turn and a hundred
-   * degrees per cycle because that is what the two resets add up to: the
-   * last frame of a cycle is the first frame of the next, to the degree.
+   * 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.
    *
-   * `currentColor` is what lets the ring take whatever ink its host is
-   * already writing with — the label's colour on a filled button, the tone
-   * on a bare one, the muted text of a field — and answer every scheme
-   * without a colour of its own.
+   * 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 box is the host's glyph box, read through `--slotted-spinner-size`:
-   * a host that sizes its icons sizes the ring the same way, so the ring
-   * that stands in for a glyph is the size of the glyph it replaces. Left
-   * alone it is the medium control icon. The icon set keeps two units of
-   * twenty-four clear inside that box, and the ring keeps the same inset, so
-   * the swap is between two shapes of one measure.
+   * 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
+   * glyph is between two shapes of one measure.
    */
-  [data-ui='spinner'] {
+  [data-ui-spinner] {
     --_size: var(--slotted-spinner-size, var(--slotted-control-icon-size-md, 16px));
-    --_ring: calc(var(--_size) * 5 / 6);
-    /**
-     * The stroke of the icon set at this size — two units of twenty-four —
-     * and never thinner than the medium hairline, which is where a 12px
-     * ring would otherwise fall below a pixel.
-     */
-    --_stroke: max(var(--slotted-border-width-medium, 1.5px), calc(var(--_size) / 12));
-    /** The radius the stroke is centred on: where the caps sit. */
-    --_radius: calc((var(--_ring) - var(--_stroke)) / 2);
-    --_track: color-mix(in oklab, currentColor 20%, transparent);
-    --_start: calc(var(--_turn) + var(--_tail));
-    --_end: calc(var(--_turn) + var(--_head));
-    --_cap: calc(var(--_stroke) / 2);
 
-    animation:
-      slotted-spinner-turn var(--slotted-duration-loop-slow) linear infinite,
-      slotted-spinner-head var(--slotted-duration-loop-slow) linear infinite,
-      slotted-spinner-tail var(--slotted-duration-loop-slow) linear infinite;
-    background-image:
-      radial-gradient(
-        circle at calc(50% + var(--_radius) * sin(var(--_end)))
-          calc(50% - var(--_radius) * cos(var(--_end))),
-        currentColor calc(var(--_cap) - 0.5px),
-        transparent calc(var(--_cap) + 0.5px)
-      ),
-      radial-gradient(
-        circle at calc(50% + var(--_radius) * sin(var(--_start)))
-          calc(50% - var(--_radius) * cos(var(--_start))),
-        currentColor calc(var(--_cap) - 0.5px),
-        transparent calc(var(--_cap) + 0.5px)
-      ),
-      conic-gradient(
-        from var(--_start),
-        currentColor 0deg,
-        currentColor calc(var(--_head) - var(--_tail)),
-        transparent calc(var(--_head) - var(--_tail))
-      ),
-      conic-gradient(var(--_track) 0 100%);
-    background-origin: content-box;
-    background-clip: content-box;
+    /* 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);
-    box-sizing: border-box;
+    color: inherit;
     display: inline-block;
     /* A ring that shrinks is not a ring: it keeps its size in a flex row. */
     flex: none;
-    inline-size: var(--_size);
     /*
-     * Cut in lengths rather than in percentages of the ray: Chrome paints
-     * `calc(100% - 2px)` as a stop in a radial gradient as a ramp several
-     * pixels wide, and the ring came out as a soft donut. Two lengths a pixel
-     * apart are a stroke with an anti-aliased edge.
+     * Not adjusting keeps `currentcolor`, the host's ink, which forced colours
+     * have already set, on a stroke the system would otherwise repaint.
      */
-    mask-image: radial-gradient(
-      circle,
-      transparent calc(var(--_ring) / 2 - var(--_stroke) - 0.5px),
-      #000 calc(var(--_ring) / 2 - var(--_stroke) + 0.5px),
-      #000 calc(var(--_ring) / 2 - 0.5px),
-      transparent calc(var(--_ring) / 2 + 0.5px)
-    );
+    forced-color-adjust: none;
+    inline-size: var(--_size);
     opacity: 1;
-    /* The inset the icon set keeps, so the ring is drawn where a glyph is. */
-    padding: calc((var(--_size) - var(--_ring)) / 2);
     scale: 1;
-    /**
-     * A ring arrives rather than appears. A host inserts it on the frame the
-     * wait begins, and the first frame is the start of a fade rather than a
-     * cut, in the control's own transition step.
-     */
     transition:
       opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),
       scale var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);
     vertical-align: middle;
   }
 
-  @starting-style {
-    [data-ui='spinner'] {
-      opacity: 0;
-      scale: 0.6;
-    }
+  [data-ui-spinner] > svg {
+    block-size: 100%;
+    display: block;
+    fill: none;
+    inline-size: 100%;
+    stroke: currentColor;
+    stroke-width: 2.25;
   }
 
-  /**
-   * A frozen ring still communicates waiting: the track, and an arc of most
-   * of a turn resting on it. Stopping it entirely is less distracting than
-   * replacing one continuous motion with a slower one.
-   */
-  @media (prefers-reduced-motion: reduce) {
-    [data-ui='spinner'] {
-      --_head: 270deg;
-
-      animation: none;
-    }
+  /* The track: the whole circle at a fifth of the ink's strength. */
+  [data-ui-spinner] > svg > circle:first-child {
+    stroke-opacity: 0.2;
   }
 
-  @media (forced-colors: active) {
-    /*
-     * The ring is painted with a background, and forced colours replace a
-     * background that is not one of the system's own colours: the ring goes
-     * and the box it sat in stays. `forced-color-adjust: none` keeps
-     * `currentcolor`, which is the host's ink, already forced to the right
-     * value.
-     */
-    [data-ui='spinner'] {
-      forced-color-adjust: none;
-    }
+  /*
+   * 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;
   }
-}
-
-/**
- * Registered so the three angles interpolate: an unregistered custom property
- * flips between its keyframes instead of turning. Without the registration
- * the ring stands as it does under reduced motion rather than as nothing.
- */
-@property --_turn {
-  inherits: false;
-  initial-value: 0deg;
-  syntax: '<angle>';
-}
 
-@property --_head {
-  inherits: false;
-  initial-value: 20deg;
-  syntax: '<angle>';
-}
-
-@property --_tail {
-  inherits: false;
-  initial-value: 0deg;
-  syntax: '<angle>';
-}
-
-/**
- * The linear turn under both ends. A full turn and the hundred degrees the
- * two resets below leave over — the tail ends 260 degrees on from where it
- * starts, the head likewise — so the angle a cycle ends on is the angle the
- * next begins on, and the loop has no seam.
- */
-@keyframes slotted-spinner-turn {
-  to {
-    --_turn: 460deg;
+  @keyframes slotted-spinner-turn {
+    to {
+      rotate: 360deg;
+    }
   }
-}
 
-/**
- * The head opens the arc in the first half of the cycle and holds in the
- * second; the tail holds in the first and closes it in the second. The ease
- * is written on the keyframe it leaves from, so each half eases on its own
- * and the hold between them is a hold. An arc of twenty degrees to two
- * hundred and eighty: never nothing, never a closed circle.
- */
-@keyframes slotted-spinner-head {
-  0% {
-    --_head: 20deg;
-
-    animation-timing-function: ease-in-out;
+  @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;
+    }
   }
 
-  50%,
-  100% {
-    --_head: 280deg;
+  @starting-style {
+    [data-ui-spinner] {
+      opacity: 0;
+      scale: 0.6;
+    }
   }
-}
-
-@keyframes slotted-spinner-tail {
-  0%,
-  50% {
-    --_tail: 0deg;
 
-    animation-timing-function: ease-in-out;
-  }
+  /* Still: a track with an arc of three quarters resting on it. */
+  @media (prefers-reduced-motion: reduce) {
+    [data-ui-spinner],
+    [data-ui-spinner] > svg > circle:last-child {
+      animation: none;
+    }
 
-  100% {
-    --_tail: 260deg;
+    [data-ui-spinner] > svg > circle:last-child {
+      stroke-dasharray: 75 150;
+    }
   }
 }

package/src/spinner/spinner.tokens.json

@@ -1,5 +1,4 @@
 [
-  "--slotted-border-width-medium",
   "--slotted-control-icon-size-md",
   "--slotted-control-transition-duration",
   "--slotted-control-transition-easing",