@slotted/styles 0.0.0-stage → 0.1.0-beta.0

package/src/slider/slider.tokens.json

@@ -0,0 +1,75 @@
+[
+  "--slotted-border-strong",
+  "--slotted-border-width-thick",
+  "--slotted-border-width-thin",
+  "--slotted-control-border-color",
+  "--slotted-control-border-width",
+  "--slotted-control-font-family",
+  "--slotted-control-font-size-lg",
+  "--slotted-control-font-size-md",
+  "--slotted-control-font-size-sm",
+  "--slotted-control-gap-lg",
+  "--slotted-control-gap-md",
+  "--slotted-control-gap-sm",
+  "--slotted-control-icon-size-lg",
+  "--slotted-control-icon-size-md",
+  "--slotted-control-icon-size-sm",
+  "--slotted-control-invalid-edge-width",
+  "--slotted-control-shadow",
+  "--slotted-control-shadow-focus-geometry",
+  "--slotted-control-transition-duration",
+  "--slotted-control-transition-easing",
+  "--slotted-disabled-background",
+  "--slotted-disabled-border",
+  "--slotted-disabled-foreground",
+  "--slotted-focus-ring-color",
+  "--slotted-focus-ring-color-invalid",
+  "--slotted-focus-ring-offset",
+  "--slotted-focus-ring-width",
+  "--slotted-font-size-xs",
+  "--slotted-font-weight-medium",
+  "--slotted-line-height-sm",
+  "--slotted-line-height-xs",
+  "--slotted-radius-full",
+  "--slotted-radius-sm",
+  "--slotted-slider-bubble-background",
+  "--slotted-slider-bubble-color",
+  "--slotted-slider-color",
+  "--slotted-slider-disabled-border-color",
+  "--slotted-slider-disabled-indicator-color",
+  "--slotted-slider-disabled-thumb-color",
+  "--slotted-slider-disabled-track-color",
+  "--slotted-slider-indicator-color",
+  "--slotted-slider-invalid-edge-width",
+  "--slotted-slider-invalid-focus-ring-color",
+  "--slotted-slider-invalid-indicator-color",
+  "--slotted-slider-invalid-thumb-border-color",
+  "--slotted-slider-length",
+  "--slotted-slider-mark-color",
+  "--slotted-slider-mark-label-color",
+  "--slotted-slider-output-color",
+  "--slotted-slider-readonly-indicator-color",
+  "--slotted-slider-readonly-thumb-border-color",
+  "--slotted-slider-thumb-border-color",
+  "--slotted-slider-thumb-color",
+  "--slotted-slider-thumb-hover-background",
+  "--slotted-slider-thumb-shadow",
+  "--slotted-slider-thumb-size",
+  "--slotted-slider-track-border-color",
+  "--slotted-slider-track-color",
+  "--slotted-slider-track-size",
+  "--slotted-space-1",
+  "--slotted-space-2",
+  "--slotted-space-3",
+  "--slotted-surface",
+  "--slotted-surface-inverse",
+  "--slotted-surface-sunken",
+  "--slotted-target-min",
+  "--slotted-text",
+  "--slotted-text-inverse",
+  "--slotted-text-muted",
+  "--slotted-tone-accent-solid",
+  "--slotted-tone-accent-surface",
+  "--slotted-tone-danger-border",
+  "--slotted-tone-danger-solid"
+]

package/src/sparkline/sparkline.css

@@ -0,0 +1,282 @@
+@layer slotted.components {
+  /**
+   * The first SVG the library draws. The geometry — where a point is, how
+   * wide a bar is — is computed in `@slotted/core/sparkline` from the box the
+   * binding measured, so this sheet decides only what the marks are made of:
+   * the colour, the stroke, the marker, the wash under a line and the height
+   * of the box.
+   *
+   * The root is inline-block and takes the whole inline size of what holds
+   * it — a card's trend region, a table cell — because a sparkline never
+   * 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'] {
+    /* 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`. */
+    --_size: var(--slotted-sparkline-block-size, var(--slotted-space-9, 2rem));
+    --_stroke: var(--slotted-sparkline-line-width, var(--slotted-border-width-thick, 2px));
+    /* A marker six pixels across — four at sm, eight at lg — with a ring in
+       the colour of the ground, so it stays legible where it crosses the
+       line. Smaller than the eight pixels a chart's hover target needs: a
+       sparkline has no hover, and a disc a third the height of a 20-pixel
+       box was the first thing the reviewer saw. */
+    --_marker: var(--slotted-sparkline-marker-size, var(--slotted-space-3, 0.375rem));
+    --_ring: var(--slotted-sparkline-ring-width, var(--slotted-border-width-thick, 2px));
+    --_ring-color: var(--slotted-sparkline-ring-color, var(--slotted-surface-raised, Canvas));
+    /* The wash under a line: the series colour fading from this share at the
+       line to nothing at the bottom edge. A number rather than a token step,
+       recorded in the token file: no scale in the foundation holds an
+       opacity for a fill that is read through, and the two that hold one for
+       a band (`highlight`, `selection`) are calibrated for text sitting on
+       them, which nothing does here. */
+    --_area-opacity: var(--slotted-sparkline-area-opacity, 0.18);
+    /* Every bar but the current one is drawn in the colour mixed at this
+       share with the line between two surfaces, so the last period reads as
+       the one the value is about. Mixed with a colour rather than faded
+       with opacity: a bar at half opacity is a tint the page cannot
+       promise a ratio for — pale blue on white in `high-contrast` — where
+       `--slotted-border-strong` holds 3:1 against every surface in every
+       scheme and lends it to the mix. */
+    --_bar-share: var(--slotted-sparkline-bar-share, 62%);
+    --_bar-dim: color-mix(
+      in oklab,
+      var(--_color) var(--_bar-share),
+      var(--slotted-border-strong, ButtonBorder)
+    );
+    --_reference-color: var(
+      --slotted-sparkline-reference-color,
+      var(--slotted-border-strong, ButtonBorder)
+    );
+
+    /**
+     * The colour, resolved in one order. A tone says how the series is doing
+     * 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.
+     */
+    --_color: var(--slotted-sparkline-color, var(--slotted-data-1));
+
+    block-size: var(--_size);
+    box-sizing: border-box;
+    display: inline-block;
+    inline-size: 100%;
+    /* The box is the drawing; there is no line box to leave room under. */
+    line-height: 0;
+    min-inline-size: 0;
+    vertical-align: middle;
+  }
+
+  [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'] {
+    --_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'] {
+    --_color: var(--slotted-data-1);
+  }
+
+  [data-ui='sparkline'][data-series='2'] {
+    --_color: var(--slotted-data-2);
+  }
+
+  [data-ui='sparkline'][data-series='3'] {
+    --_color: var(--slotted-data-3);
+  }
+
+  [data-ui='sparkline'][data-series='4'] {
+    --_color: var(--slotted-data-4);
+  }
+
+  [data-ui='sparkline'][data-series='5'] {
+    --_color: var(--slotted-data-5);
+  }
+
+  [data-ui='sparkline'][data-series='6'] {
+    --_color: var(--slotted-data-6);
+  }
+
+  [data-ui='sparkline'][data-series='7'] {
+    --_color: var(--slotted-data-7);
+  }
+
+  [data-ui='sparkline'][data-series='8'] {
+    --_color: var(--slotted-data-8);
+  }
+
+  /* ── Tone: how the series is doing, in the tone's text role ──────────────
+   *
+   * The `text` role rather than `border` or `solid`: it is the one role every
+   * scheme holds to the reading ratio against the surface, and a two-pixel
+   * line needs more than the 3:1 a border is calibrated for to be read as a
+   * 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'] {
+    --_color: var(--slotted-text-muted, GrayText);
+  }
+
+  [data-ui='sparkline'][data-tone='accent'] {
+    --_color: var(--slotted-tone-accent-text);
+  }
+
+  [data-ui='sparkline'][data-tone='secondary'] {
+    --_color: var(--slotted-tone-secondary-text);
+  }
+
+  [data-ui='sparkline'][data-tone='success'] {
+    --_color: var(--slotted-tone-success-text);
+  }
+
+  [data-ui='sparkline'][data-tone='warning'] {
+    --_color: var(--slotted-tone-warning-text);
+  }
+
+  [data-ui='sparkline'][data-tone='danger'] {
+    --_color: var(--slotted-tone-danger-text);
+  }
+
+  /* ── The drawing ───────────────────────────────────────────────────────── */
+
+  [data-ui='sparkline'] [data-part='plot'] {
+    block-size: 100%;
+    display: block;
+    inline-size: 100%;
+    /* The marker's ring may sit half a pixel past the edge at the extremes;
+       clipping it would flatten the dot. The engine insets the grid so the
+       marks stay inside, and this is the margin for rounding. */
+    overflow: visible;
+  }
+
+  /**
+   * The wash: the series colour, faded to nothing at the bottom by a mask
+   * rather than by a gradient element, so the `svg` needs no `id` and a page
+   * 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'] {
+    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);
+  }
+
+  /**
+   * `vector-effect: non-scaling-stroke` is what keeps the line two pixels
+   * during the one frame before the box is measured, when the nominal grid is
+   * stretched to the box; once measured, the grid is the box and the effect
+   * changes nothing.
+   */
+  [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'] {
+    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);
+  }
+
+  /* The current period is the one the value beside the chart is about. */
+  [data-ui='sparkline'] [data-part='bar'][data-current] {
+    fill: var(--_color);
+  }
+
+  /**
+   * A reference is a hairline and it is dashed: it is the one line in the box
+   * 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'] {
+    fill: none;
+    stroke: var(--_reference-color);
+    stroke-dasharray: 2 3;
+    stroke-linecap: round;
+    stroke-width: var(--slotted-border-width-thin, 1px);
+    vector-effect: non-scaling-stroke;
+  }
+
+  /**
+   * The marker and its ring: two zero-length paths with round caps, one over
+   * the other, each a disc whose diameter is its stroke width. Not circles —
+   * a `circle` is scaled with the grid, and the grid is stretched to the box
+   * for the one frame before the box is measured, so a circle there is an
+   * ellipse; a stroke under `vector-effect: non-scaling-stroke` is measured
+   * on the screen and stays round whatever the grid does. The ring is drawn
+   * 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'] {
+    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'] {
+    stroke: var(--_ring-color);
+    stroke-width: calc(var(--_marker) + 2 * var(--_ring));
+  }
+
+  [data-ui='sparkline'] [data-part='marker'] {
+    stroke: var(--_color);
+    stroke-width: var(--_marker);
+  }
+
+  /**
+   * In a right-to-left document the series reads from the right, as the
+   * text does: the last point, the one the value is about, sits at the
+   * 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'] {
+    transform: scaleX(-1);
+  }
+
+  /**
+   * Under forced colours the theme has already mapped the data scale and the
+   * tones to `CanvasText`, so a line and a marker keep their ink. What the
+   * theme cannot do is undo the mix in the bars or the wash: a bar mixed from
+   * two system colours is a colour the mode does not have, and the wash is a
+   * tint it has no colour for. The earlier bars take `GrayText`, the current
+   * one `CanvasText`, and the wash goes.
+   */
+  @media (forced-colors: active) {
+    [data-ui='sparkline'] [data-part='area'] {
+      display: none;
+    }
+
+    [data-ui='sparkline'] [data-part='bar'] {
+      fill: GrayText;
+    }
+
+    [data-ui='sparkline'] [data-part='bar'][data-current] {
+      fill: CanvasText;
+    }
+
+    [data-ui='sparkline'] [data-part='ring'] {
+      stroke: Canvas;
+    }
+  }
+}

package/src/sparkline/sparkline.tokens.json

@@ -0,0 +1,45 @@
+[
+  "--slotted-border-strong",
+  "--slotted-border-width-medium",
+  "--slotted-border-width-thick",
+  "--slotted-border-width-thin",
+  "--slotted-data-1",
+  "--slotted-data-2",
+  "--slotted-data-3",
+  "--slotted-data-4",
+  "--slotted-data-5",
+  "--slotted-data-6",
+  "--slotted-data-7",
+  "--slotted-data-8",
+  "--slotted-duration-medium",
+  "--slotted-duration-short",
+  "--slotted-easing-standard",
+  "--slotted-space-11",
+  "--slotted-space-2",
+  "--slotted-space-3",
+  "--slotted-space-4",
+  "--slotted-space-7",
+  "--slotted-space-9",
+  "--slotted-sparkline-area-opacity",
+  "--slotted-sparkline-bar-share",
+  "--slotted-sparkline-block-size",
+  "--slotted-sparkline-block-size-lg",
+  "--slotted-sparkline-block-size-sm",
+  "--slotted-sparkline-color",
+  "--slotted-sparkline-line-width",
+  "--slotted-sparkline-line-width-sm",
+  "--slotted-sparkline-marker-size",
+  "--slotted-sparkline-marker-size-lg",
+  "--slotted-sparkline-marker-size-sm",
+  "--slotted-sparkline-reference-color",
+  "--slotted-sparkline-ring-color",
+  "--slotted-sparkline-ring-width",
+  "--slotted-sparkline-ring-width-sm",
+  "--slotted-surface-raised",
+  "--slotted-text-muted",
+  "--slotted-tone-accent-text",
+  "--slotted-tone-danger-text",
+  "--slotted-tone-secondary-text",
+  "--slotted-tone-success-text",
+  "--slotted-tone-warning-text"
+]

package/src/spinner/spinner.css

@@ -0,0 +1,224 @@
+@layer slotted.components {
+  /**
+   * One ring, drawn once. The indeterminate wait every family shows the same
+   * 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
+   * 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.
+   *
+   * 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.
+   *
+   * `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.
+   *
+   * 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.
+   */
+  [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;
+    block-size: var(--_size);
+    box-sizing: border-box;
+    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.
+     */
+    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)
+    );
+    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;
+    }
+  }
+
+  /**
+   * 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;
+    }
+  }
+
+  @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;
+    }
+  }
+}
+
+/**
+ * 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;
+  }
+}
+
+/**
+ * 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;
+  }
+
+  50%,
+  100% {
+    --_head: 280deg;
+  }
+}
+
+@keyframes slotted-spinner-tail {
+  0%,
+  50% {
+    --_tail: 0deg;
+
+    animation-timing-function: ease-in-out;
+  }
+
+  100% {
+    --_tail: 260deg;
+  }
+}

package/src/spinner/spinner.tokens.json

@@ -0,0 +1,8 @@
+[
+  "--slotted-border-width-medium",
+  "--slotted-control-icon-size-md",
+  "--slotted-control-transition-duration",
+  "--slotted-control-transition-easing",
+  "--slotted-duration-loop-slow",
+  "--slotted-spinner-size"
+]