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

package/src/split-button/split-button.css

@@ -0,0 +1,253 @@
+@layer slotted.components {
+  /**
+   * ── An action and the menu of its alternatives, joined ─────────────────
+   *
+   * The root is a `div` carrying `role="group"`; inside it stand two elements
+   * of the `button` family — a Button carrying this family's `primary` part
+   * and an IconButton carrying `menu-trigger`, rendered as `menu`'s trigger.
+   * `button` selects itself by `data-ui` alone and reads no `data-part` on
+   * its root, so the part slot is free for the family that owns the
+   * composition; what this sheet writes is composition against `button`'s
+   * public contract — `data-ui`, `data-tone`, `data-variant`, `data-shape`,
+   * `data-pressed`, `data-disabled` — and never against its inner DOM, save
+   * the one part `button` declares in public for its icon.
+   *
+   * The family paints two things and only two: the join, and the chevron.
+   * Every tone, variant, size, density, hover, press, focus ring, loading
+   * indicator and disabled reading is `button`'s, which is the reason the two
+   * halves are `button`'s elements rather than this family's own.
+   *
+   * ── The join is `button-group`'s, for two children on one axis ─────────
+   *
+   * `button-group` keys on its own identifier and the root here carries this
+   * family's, so the rules that make one shape of two controls are restated,
+   * each citing the measurement the group made:
+   *
+   * - the two overlap by one border width, so two joined edges occupy one
+   *   column rather than two;
+   * - exactly one border is painted in that column — the leading edge of the
+   *   trigger — because two of them are one line on paper and two different
+   *   lines at 110%, 150% and 175% zoom, where the browser snaps each border
+   *   box to device pixels on its own (five uneven boundaries out of fifteen,
+   *   measured by `button-group` before it wrote the rule);
+   * - the corners on the two ends of the bar survive and the two facing the
+   *   seam go;
+   * - the seam between two solid halves is the tone's darkest step, read from
+   *   `data-tone`, which `button` declares in public;
+   * - the frame is stated by the family under `pressed` and `disabled` for the
+   *   two variants that have one, so a half does not redraw the bar around
+   *   itself;
+   * - only focus is raised.
+   */
+  [data-ui='split-button'][data-part='root'] {
+    --_radius: var(--slotted-split-button-radius, var(--slotted-control-radius, 4px));
+    --_overlap: calc(-1 * var(--slotted-control-border-width, 1px));
+
+    align-items: stretch;
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 0;
+    /* A half raised by focus is raised inside the group, never over the page. */
+    isolation: isolate;
+    /**
+     * A flex item is at least as wide as its content unless it is told
+     * otherwise, so a split button nested in one would refuse to narrow below
+     * its label and push the layout past the edge instead of letting the
+     * label wrap inside its own control, which is `button`'s rule.
+     */
+    min-inline-size: 0;
+    /* A control written inside a sentence sits on the text's centre. */
+    vertical-align: middle;
+  }
+
+  /* ── Width ────────────────────────────────────────────────────────────── */
+
+  /**
+   * Asking for the whole line means the action takes it: the trigger is
+   * square from the control height and stays so, because a wide chevron is a
+   * second button nobody asked for.
+   */
+  [data-ui='split-button'][data-part='root'][data-full-width] {
+    display: flex;
+    inline-size: 100%;
+  }
+
+  [data-ui='split-button'][data-part='root'][data-full-width] > [data-part='primary'] {
+    flex: 1 1 0;
+    min-inline-size: 0;
+  }
+
+  /* ── The shape ────────────────────────────────────────────────────────── */
+
+  [data-ui='split-button'][data-part='root'] > [data-part='primary'] {
+    border-end-end-radius: 0;
+    border-end-start-radius: var(--_radius);
+    border-start-end-radius: 0;
+    border-start-start-radius: var(--_radius);
+    /* A label that outgrows the bar wraps inside its own control rather than
+       pushing the bar past the container. */
+    min-inline-size: 0;
+  }
+
+  [data-ui='split-button'][data-part='root'] > [data-part='menu-trigger'] {
+    border-end-end-radius: var(--_radius);
+    border-end-start-radius: 0;
+    border-start-end-radius: var(--_radius);
+    border-start-start-radius: 0;
+    /* Square from the control height; never shrinks below its own target. */
+    flex: none;
+    margin-inline-start: var(--_overlap);
+  }
+
+  /**
+   * ── The frame belongs to the group ────────────────────────────────────
+   *
+   * `button` repaints its whole border when it is pressed or unavailable —
+   * correctly, for a control standing on its own — and inside a bar that
+   * punches a hole in the frame exactly where that control sits. The family
+   * states the edge for the two variants that have one to state, and it
+   * states it for the states that would otherwise overwrite it.
+   *
+   * The root is selected by its part as well as its family, for the reason
+   * `button-group` records: the rule has to outrank every border rule `button`
+   * writes for the same control whatever order the two sheets load in.
+   */
+  [data-ui='split-button'][data-part='root']
+    > [data-ui='button'][data-variant='outline'][data-pressed],
+  [data-ui='split-button'][data-part='root']
+    > [data-ui='button'][data-variant='outline'][data-disabled],
+  [data-ui='split-button'][data-part='root'] > [data-ui='button'][data-variant='outline']:disabled {
+    border-color: var(--slotted-control-border-color, ButtonBorder);
+  }
+
+  [data-ui='split-button'][data-part='root']
+    > [data-ui='button'][data-variant='ghost'][data-pressed],
+  [data-ui='split-button'][data-part='root']
+    > [data-ui='button'][data-variant='ghost'][data-disabled],
+  [data-ui='split-button'][data-part='root'] > [data-ui='button'][data-variant='ghost']:disabled {
+    border-color: transparent;
+  }
+
+  /**
+   * ── One border in the shared column ───────────────────────────────────
+   *
+   * The primary's trailing edge is taken out of the paint entirely — not
+   * narrowed, because a narrower border box would move its label by half a
+   * pixel — and the trigger's leading edge is the one seen.
+   */
+  [data-ui='split-button'][data-part='root']
+    > [data-ui='button'][data-part='primary'][data-variant] {
+    border-inline-end-color: transparent;
+  }
+
+  /**
+   * ── The seam between two filled halves ────────────────────────────────
+   *
+   * `button` paints a filled control's edge with its own fill, so two joined
+   * solid halves are one uninterrupted rectangle with no way to tell where
+   * the action ends and the menu begins. The seam is the darkest step of the
+   * control's own tone — Primer, Material UI, Ant Design and Bootstrap all
+   * reach for it, and `button-group` measured the alternative: a white line
+   * through a filled bar cuts it into separate buttons instead of dividing
+   * one. It is painted on the trigger's leading edge, the one edge the rule
+   * above leaves in the column.
+   */
+  [data-ui='split-button'][data-part='root'] > [data-tone='accent'] {
+    --_seam: var(--slotted-tone-accent-solid-active);
+  }
+
+  [data-ui='split-button'][data-part='root'] > [data-tone='secondary'] {
+    --_seam: var(--slotted-tone-secondary-solid-active);
+  }
+
+  [data-ui='split-button'][data-part='root'] > [data-tone='success'] {
+    --_seam: var(--slotted-tone-success-solid-active);
+  }
+
+  [data-ui='split-button'][data-part='root'] > [data-tone='warning'] {
+    --_seam: var(--slotted-tone-warning-solid-active);
+  }
+
+  [data-ui='split-button'][data-part='root'] > [data-tone='danger'] {
+    --_seam: var(--slotted-tone-danger-solid-active);
+  }
+
+  [data-ui='split-button'][data-part='root']
+    > [data-ui='button'][data-variant='solid'][data-part='menu-trigger'] {
+    border-inline-start-color: var(--_seam, ButtonBorder);
+  }
+
+  /**
+   * A filled half that is unavailable has no darkest step to draw the seam
+   * in: `button` paints it the disabled ground inside the disabled border,
+   * and the seam takes that border so the bar reads as one unavailable
+   * control rather than as a grey one with a coloured line through it.
+   */
+  [data-ui='split-button'][data-part='root']
+    > [data-ui='button'][data-variant='solid'][data-part='menu-trigger']:disabled,
+  [data-ui='split-button'][data-part='root']
+    > [data-ui='button'][data-variant='solid'][data-part='menu-trigger'][data-disabled] {
+    border-inline-start-color: var(--slotted-disabled-border, ButtonBorder);
+  }
+
+  /**
+   * Only focus is raised. The ring is an outline drawn outside the border
+   * box, so without this the primary's ring is cut by the trigger that
+   * follows it in the DOM. Hover and press repaint a fill and never an edge,
+   * so there is nothing to lift for them — `button-group`'s reading.
+   */
+  [data-ui='split-button'][data-part='root'] > *:focus-visible {
+    z-index: 1;
+  }
+
+  /**
+   * ── The chevron ───────────────────────────────────────────────────────
+   *
+   * The mark `select` draws for "a list opens here", which is the promise a
+   * menu button keeps; not the ellipsis, which says "more" without saying
+   * what opens. It is the `chevron-down` Glyph element the binding renders in
+   * the icon part, stroked in the control's own ink, so it follows the label
+   * into hover, press, disabled, every tone's `on-solid` and forced colours.
+   * `button` sizes it through the icon part; this stylesheet paints nothing.
+   *
+   * It does not turn while the menu is open. None of the six surveyed split
+   * buttons turns it; a mark that flips says the surface will close, while
+   * the surface below is what the reader is looking at. `select` turns its
+   * own because a select's arrow discloses the value's list; a menu button's
+   * chevron is a promise, not a state.
+   */
+
+  /**
+   * ── Loading ───────────────────────────────────────────────────────────
+   *
+   * The primary shows `button`'s own indicator and holds its width and name.
+   * The trigger is `aria-disabled` for the duration — choosing "Save as
+   * draft" while "Save" is in flight is a double submission — and it keeps
+   * its place in the tab sequence and its name, so a reader who reaches it
+   * hears why nothing opens.
+   *
+   * It keeps its paint. `data-disabled` would have `button` paint it the
+   * unavailable grey beside an action still in its tone, and the capture
+   * read that as two controls — one working, one broken. The bar is one
+   * control that is busy, so the trigger stays in the tone and simply stops
+   * answering the pointer; the binding refuses the activation a key would
+   * send. `pointer-events: none` is also what takes hover away without a
+   * state the stylesheet would have to hold back.
+   */
+  [data-ui='split-button'][data-part='root'][data-loading] > [data-part='menu-trigger'] {
+    pointer-events: none;
+  }
+
+  /**
+   * Under forced colours the theme flattens every fill, so a half that is
+   * pressed has only its edge left to say so. `button` makes that edge
+   * `Highlight`; the frame rule above would have taken it away, and this
+   * puts it back — `button-group`'s rule for the same case.
+   */
+  @media (forced-colors: active) {
+    [data-ui='split-button'][data-part='root'] > [data-ui='button'][data-pressed] {
+      border-color: Highlight;
+    }
+  }
+}

package/src/split-button/split-button.tokens.json

@@ -0,0 +1,12 @@
+[
+  "--slotted-control-border-color",
+  "--slotted-control-border-width",
+  "--slotted-control-radius",
+  "--slotted-disabled-border",
+  "--slotted-split-button-radius",
+  "--slotted-tone-accent-solid-active",
+  "--slotted-tone-danger-solid-active",
+  "--slotted-tone-secondary-solid-active",
+  "--slotted-tone-success-solid-active",
+  "--slotted-tone-warning-solid-active"
+]

package/src/splitter/splitter.css

@@ -0,0 +1,336 @@
+@layer slotted.components {
+  /**
+   * A bar between two regions the consumer owns, and nothing else. The family
+   * holds no panels — `docs/history/designs/2026-09-11-splitter-design.md`
+   * section 1 — so this stylesheet paints one element and its two children and
+   * writes no layout at all. A separator that sized the boxes beside it would
+   * be deciding a layout it was only handed a position in.
+   *
+   * The picture is SAP's, read in `SAP/fundamental-styles`
+   * `packages/styles/src/splitter.scss` rather than in the rendered page: two
+   * hairlines that fade out away from a grip in the middle, and that run the
+   * whole track once a hand is on them. Six of the seven surveyed
+   * implementations draw a plain gutter; this is the one that reads as
+   * something to hold.
+   *
+   * `touch-action: none` so a drag is not read as a scroll on the way past.
+   */
+  [data-ui='splitter'] {
+    /**
+     * The track is what the pointer sees and `--slotted-target-min` is what it
+     * gets: `::before` below is a transparent box centred on the track, which
+     * is the construction `drawer`'s resizer already uses to hold the WCAG 2.2
+     * floor without widening the picture. One rem rather than the four pixels
+     * `drawer` uses, because this bar carries a grip and four pixels cannot.
+     */
+    --_track: var(--slotted-space-6, 1rem);
+    --_reach: var(--slotted-target-min, 24px);
+
+    /**
+     * A hairline, not a rule. SAP draws `0.0625rem` and the thin border step is
+     * the same quantity under a name the theme can retune.
+     *
+     * Its resting length is a segment and not the track: a line that already
+     * runs end to end has nowhere to go when a hand arrives, and the growth is
+     * the whole of the feedback. SAP's `4rem` is `--slotted-space-12`.
+     */
+    --_line: var(--slotted-border-width-thin, 1px);
+    --_line-length: var(--slotted-space-12, 4rem);
+
+    /**
+     * SAP's own `2rem` between the grip and each line — but capped against the
+     * track, and that cap is a correction from the first capture.
+     *
+     * A flex gap does not shrink. Two of them at `2rem`, two lines at `4rem`
+     * and the grip ask for two hundred and four pixels of track, so in a region
+     * eighty pixels tall the gaps took everything and both lines were crushed
+     * to nothing: the bar showed a grip floating in a gap and no line at all.
+     * SAP never meets this because its splitter divides application panes,
+     * which are tall by construction; a bar in this library divides whatever
+     * the consumer put beside it.
+     *
+     * A percentage gap resolves against the container's own extent on the axis
+     * it runs along, so `min()` takes the rem step where there is room for it
+     * and a proportion of the track where there is not.
+     */
+    --_gap: min(var(--slotted-space-9, 2rem), 12%);
+
+    /**
+     * The grip is a two-by-three dot matrix on one pitch, which is what SAP's
+     * `vertical-grip` glyph draws. It is built from a gradient rather than from
+     * an icon token because it is not an icon: it carries no meaning a reader
+     * could look up, and a family that put it in the icon scale would let a
+     * theme swap it for something that does.
+     */
+    --_dot: var(--slotted-space-2, 0.25rem);
+
+    /**
+     * Two steps, and the whole of the colour decision.
+     *
+     * `--_rest` is the **strong** border step and not the subtle one, which is
+     * a correction from the first capture: drawn in `--slotted-border-subtle`
+     * the bar was invisible at rest in `light`, and a resizable edge nobody can
+     * see is a capability nobody finds — the argument the grip exists for. The
+     * subtle step is for a rule inside one surface; this is the boundary
+     * between two, which is the step the foundation holds to 3:1.
+     *
+     * `--_active` is a step darker again. The colour is the smaller half of the
+     * feedback: the larger half is the lines running the whole track, which is
+     * what SAP changes and what a hand actually reads.
+     *
+     * The accent is deliberately absent from both. It is the one colour in the
+     * library that means "the keyboard is here", and the rule below spends it
+     * on `:focus-visible` alone. `drawer`'s resizer spends it on hover as well,
+     * which is the defect this family was built to correct; SAP is the only one
+     * of the seven surveyed implementations that keeps the two apart.
+     */
+    --_rest: var(--slotted-splitter-line-color, var(--slotted-border-strong, ButtonBorder));
+    --_active: var(--slotted-splitter-line-active-color, var(--slotted-text-muted, ButtonText));
+
+    /* The repository has no global reset, and this box states its own measure. */
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--_gap);
+    flex-shrink: 0;
+    background: transparent;
+    touch-action: none;
+    transition: gap var(--slotted-control-transition-duration, var(--slotted-duration-short))
+      var(--slotted-control-transition-easing, var(--slotted-easing-standard));
+  }
+
+  /**
+   * Under the hand the gap closes to one step, and the three marks read as one.
+   *
+   * It is not decoration: it is where half the growth comes from. On an
+   * eighty-pixel track the two resting gaps and the grip take thirty-one pixels
+   * of the eighty, so lines that could only grow from sixteen to twenty-four
+   * pixels were a state change nobody could see — the third capture showed
+   * `data-dragging` and rest as the same picture. Closing the gap hands those
+   * pixels to the lines, and the pair roughly doubles instead.
+   */
+  [data-ui='splitter']:not([data-disabled]):hover,
+  [data-ui='splitter']:not([data-disabled]):focus-visible,
+  [data-ui='splitter'][data-dragging] {
+    --_gap: var(--slotted-space-4, 0.5rem);
+  }
+
+  /**
+   * `align-self` and `justify-self` for the same reason `divider` claims both:
+   * the bar's length comes from the container, and a flex parent hands the
+   * cross size over through one while a grid parent hands it over through the
+   * other. A container that packs its children instead of stretching them
+   * would otherwise size the bar from its content.
+   */
+  [data-ui='splitter'][data-orientation='vertical'] {
+    flex-direction: column;
+    inline-size: var(--_track);
+    align-self: stretch;
+    cursor: col-resize;
+  }
+
+  [data-ui='splitter'][data-orientation='horizontal'] {
+    flex-direction: row;
+    block-size: var(--_track);
+    justify-self: stretch;
+    cursor: row-resize;
+  }
+
+  /**
+   * The reach. Transparent, centred on the track, and the reason a sixteen-pixel
+   * picture is a twenty-four-pixel target.
+   */
+  [data-ui='splitter']::before {
+    content: '';
+    position: absolute;
+    --_overhang: calc((var(--_reach) - var(--_track)) / -2);
+  }
+
+  [data-ui='splitter'][data-orientation='vertical']::before {
+    inset-block: 0;
+    inset-inline: var(--_overhang);
+  }
+
+  [data-ui='splitter'][data-orientation='horizontal']::before {
+    inset-inline: 0;
+    inset-block: var(--_overhang);
+  }
+
+  /**
+   * The lines.
+   *
+   * Each fades to transparent *away* from the grip, so the pair reads as one
+   * mark with a middle rather than as two dashes. The gradient is the reason
+   * these are elements and not pseudo-elements: `packages/styles/src/fallbacks.test.mjs`
+   * forbids a system colour inside `::before` or `::after`, and the focus
+   * colour's own last resort is `Highlight`.
+   *
+   * `flex-basis` carries both the resting length and the growth, because a
+   * grow factor does not animate and the extension *is* the feedback.
+   *
+   * At rest the basis is `min(4rem, 20%)`, and both halves of that are
+   * corrections from the first two captures. The rem step alone — SAP's `4rem`
+   * — asked for more track than an eighty-pixel region has, and the gaps, which
+   * do not shrink, crushed both lines to nothing. Filling the track instead
+   * fixed that and broke the other end: a line already occupying everything the
+   * gaps leave has nowhere to grow to, and hover and drag became
+   * indistinguishable from rest.
+   *
+   * A proportion leaves slack at every track length. That slack is what the
+   * hand claims.
+   */
+  [data-ui='splitter'] > [data-part='line'] {
+    flex: 0 1 min(var(--_line-length), 20%);
+    min-block-size: 0;
+    min-inline-size: 0;
+    border-radius: var(--slotted-radius-sm, 2px);
+    transition:
+      flex-basis var(--slotted-control-transition-duration, var(--slotted-duration-short))
+        var(--slotted-control-transition-easing, var(--slotted-easing-standard)),
+      background-color var(--slotted-control-transition-duration, var(--slotted-duration-short))
+        var(--slotted-control-transition-easing, var(--slotted-easing-standard));
+  }
+
+  [data-ui='splitter'][data-orientation='vertical'] > [data-part='line'] {
+    inline-size: var(--_line);
+  }
+
+  [data-ui='splitter'][data-orientation='horizontal'] > [data-part='line'] {
+    block-size: var(--_line);
+  }
+
+  /* Solid at the grip, gone at the far end. Four rules, one per direction. */
+  [data-ui='splitter'][data-orientation='vertical'] > [data-part='line']:first-child {
+    background: linear-gradient(to bottom, transparent, var(--_rest));
+  }
+
+  [data-ui='splitter'][data-orientation='vertical'] > [data-part='line']:last-child {
+    background: linear-gradient(to top, transparent, var(--_rest));
+  }
+
+  [data-ui='splitter'][data-orientation='horizontal'] > [data-part='line']:first-child {
+    background: linear-gradient(to right, transparent, var(--_rest));
+  }
+
+  [data-ui='splitter'][data-orientation='horizontal'] > [data-part='line']:last-child {
+    background: linear-gradient(to left, transparent, var(--_rest));
+  }
+
+  /**
+   * Under the hand, and under the drag: the pair runs the whole track and drops
+   * the gradient for the strong step. `flex-basis: 100%` against
+   * `flex-shrink: 1` is what lets the two of them and the gap share the track
+   * rather than overflow it.
+   *
+   * Hover is held back for `data-disabled`, which is the shared rule from
+   * `packages/styles/src/states.test.mjs`.
+   */
+  [data-ui='splitter']:not([data-disabled]):hover > [data-part='line'],
+  [data-ui='splitter']:not([data-disabled]):focus-visible > [data-part='line'],
+  [data-ui='splitter'][data-dragging] > [data-part='line'] {
+    flex-basis: 100%;
+    background: var(--_active);
+  }
+
+  /**
+   * The keyboard's own signal is the ring, and it is the only place the accent
+   * appears. The lines take the same step they take under the hand.
+   *
+   * They were drawn in the focus colour too, until the capture showed what that
+   * is: a two-pixel accent ring around a sixteen-pixel bar whose interior is
+   * also accent, which reads as a solid blue block rather than as a ring around
+   * a separator. The accent said the same thing twice in the same twelve
+   * pixels, and the second saying cost the first its shape.
+   */
+
+  [data-ui='splitter']:focus-visible {
+    outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
+    outline-offset: calc(-1 * var(--slotted-focus-ring-offset, 2px));
+  }
+
+  /**
+   * The grip. Two columns by three rows on one pitch, drawn with one gradient
+   * and sized from the same step, so a density that retunes the space scale
+   * retunes the mark with it.
+   *
+   * `color` rather than a background colour on each dot: the dots and the lines
+   * are one mark and have to move together, and `currentColor` is the one place
+   * that says so.
+   */
+  [data-ui='splitter'] > [data-part='grip'] {
+    flex: none;
+    color: var(--_rest);
+    background-image: radial-gradient(circle at center, currentColor 40%, transparent 42%);
+    background-size: var(--_dot) var(--_dot);
+    background-repeat: repeat;
+    transition: color var(--slotted-control-transition-duration, var(--slotted-duration-short))
+      var(--slotted-control-transition-easing, var(--slotted-easing-standard));
+  }
+
+  [data-ui='splitter'][data-orientation='vertical'] > [data-part='grip'] {
+    inline-size: calc(2 * var(--_dot));
+    block-size: calc(3 * var(--_dot));
+  }
+
+  [data-ui='splitter'][data-orientation='horizontal'] > [data-part='grip'] {
+    inline-size: calc(3 * var(--_dot));
+    block-size: calc(2 * var(--_dot));
+  }
+
+  [data-ui='splitter']:not([data-disabled]):hover > [data-part='grip'],
+  [data-ui='splitter']:not([data-disabled]):focus-visible > [data-part='grip'],
+  [data-ui='splitter'][data-dragging] > [data-part='grip'] {
+    color: var(--_active);
+  }
+
+  /**
+   * Disabled. The bar keeps its tab stop — a reader who cannot move the
+   * separator can still read its value — so this changes the picture and the
+   * cursor and nothing about the focus.
+   */
+  [data-ui='splitter'][data-disabled] {
+    cursor: default;
+    --_rest: var(--slotted-splitter-disabled-line-color, var(--slotted-disabled-border, GrayText));
+  }
+
+  /**
+   * Forced colours. A gradient resolves to nothing there, so both lines take a
+   * flat system colour and the growth is what is left of the feedback. The
+   * grip's gradient is replaced for the same reason.
+   */
+  @media (forced-colors: active) {
+    [data-ui='splitter'] > [data-part='line'] {
+      background: ButtonBorder;
+      forced-color-adjust: none;
+    }
+
+    [data-ui='splitter']:not([data-disabled]):hover > [data-part='line'],
+    [data-ui='splitter'][data-dragging] > [data-part='line'] {
+      background: ButtonText;
+    }
+
+    [data-ui='splitter'] > [data-part='grip'] {
+      background-image: none;
+      background-color: ButtonBorder;
+    }
+
+    [data-ui='splitter'][data-disabled] > [data-part='line'],
+    [data-ui='splitter'][data-disabled] > [data-part='grip'] {
+      background: GrayText;
+    }
+  }
+
+  /**
+   * The preference is about movement, not about feedback. The lines still reach
+   * the ends of the track and still change step; they simply arrive there
+   * without travelling.
+   */
+  @media (prefers-reduced-motion: reduce) {
+    [data-ui='splitter'] > [data-part='line'],
+    [data-ui='splitter'] > [data-part='grip'] {
+      transition-duration: var(--slotted-duration-instant);
+    }
+  }
+}

package/src/splitter/splitter.tokens.json

@@ -0,0 +1,24 @@
+[
+  "--slotted-border-strong",
+  "--slotted-border-width-thin",
+  "--slotted-control-transition-duration",
+  "--slotted-control-transition-easing",
+  "--slotted-disabled-border",
+  "--slotted-duration-instant",
+  "--slotted-duration-short",
+  "--slotted-easing-standard",
+  "--slotted-focus-ring-color",
+  "--slotted-focus-ring-offset",
+  "--slotted-focus-ring-width",
+  "--slotted-radius-sm",
+  "--slotted-space-12",
+  "--slotted-space-2",
+  "--slotted-space-4",
+  "--slotted-space-6",
+  "--slotted-space-9",
+  "--slotted-splitter-disabled-line-color",
+  "--slotted-splitter-line-active-color",
+  "--slotted-splitter-line-color",
+  "--slotted-target-min",
+  "--slotted-text-muted"
+]