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

package/src/radio-group/radio-group.css

@@ -0,0 +1,778 @@
+@layer slotted.components {
+  /**
+   * ── One choice out of a set ────────────────────────────────────────────
+   *
+   * The root is a `div` that arranges its items and, where nothing else has
+   * grouped them, carries `role="radiogroup"`. Each item is a `div` holding a
+   * native `input[type=radio]`, its mark, its label and its description.
+   *
+   * The whole keyboard model is the platform's, because the inputs share a
+   * `name`: Tab lands on the checked item, the arrows move focus and selection
+   * in both axes, the set wraps, and disabled items are skipped — including
+   * the arrow directions of a right-to-left document, which a roving `tabindex`
+   * written once per binding would have to relearn twice.
+   *
+   * Its rules reach the same foundation tokens `checkbox`'s do rather than
+   * `checkbox` itself, so a theme can move one without the other and neither
+   * stylesheet depends on the other's selectors.
+   */
+  [data-ui='radio-group'][data-part='root'] {
+    /**
+     * The circle is the selection scale's, the same square `checkbox` draws
+     * in: 16px at `md`, stated once by the theme and not moved by density.
+     */
+    --_size: var(--slotted-radio-group-size, var(--slotted-selection-size-md, 16px));
+    --_font-size: var(--slotted-control-font-size-md, 13px);
+    /** `--_gap` spaces one choice from the next; `--_label-gap` spaces a
+        circle from its own label, and is the wider of the two. */
+    --_gap: var(--slotted-control-gap-md, 8px);
+    --_label-gap: var(--slotted-control-label-gap-md, 12px);
+    --_line-height: var(--slotted-radio-group-line-height, var(--slotted-line-height-md, 1.5));
+    /**
+     * The air the halo keeps around the circle and past the end of the text:
+     * half the gap between them, for the reason `checkbox` records.
+     */
+    --_halo-spread: calc(var(--_label-gap) / 2);
+    /**
+     * The target: the WCAG 2.2 minimum, hit around the circle by the halo's
+     * own box rather than laid out beside it, for the reason `checkbox`
+     * records — a row is its line, not its line padded out to twenty-four.
+     */
+    --_target: var(--slotted-target-min, 24px);
+    --_lift: calc((var(--_font-size) * var(--_line-height) - var(--_size)) / 2);
+    /** The distance from the label's text to the description under it: the
+        step `field` puts between its own rows, in both variants. */
+    --_description-gap: var(--slotted-space-3, 0.375rem);
+
+    color: var(--slotted-radio-group-color, var(--slotted-text, CanvasText));
+    display: flex;
+    flex-direction: column;
+    font-family: var(--slotted-control-font-family, system-ui, sans-serif);
+    font-size: var(--_font-size);
+    gap: var(--slotted-radio-group-gap, var(--_gap));
+    line-height: var(--_line-height);
+  }
+
+  /**
+   * A choice that carries a description is two rows tall, and one control gap
+   * between two of them puts a description as near the next label as its own.
+   * Proximity then names the wrong owner. The distance doubles exactly where
+   * the second row exists, so a column of bare labels keeps the tighter rhythm
+   * it reads well at, and it is the same doubling the horizontal rule below
+   * already applies.
+   */
+  [data-ui='radio-group'][data-part='root']:has([data-part='description']) {
+    row-gap: var(--slotted-radio-group-gap, calc(var(--_gap) * 2));
+  }
+
+  /**
+   * Horizontal wraps rather than scrolls or clips. A row of choices that runs
+   * past the container is a row whose last option nobody can see, and a set of
+   * options is not a scroll region.
+   */
+  [data-ui='radio-group'][data-part='root'][data-orientation='horizontal'] {
+    flex-direction: row;
+    flex-wrap: wrap;
+    /** Twice the control gap: the distance between two choices has to read as
+        larger than the distance between a box and its own label. */
+    column-gap: calc(var(--_gap) * 2);
+  }
+
+  /* ── Size ─────────────────────────────────────────────────────────────── */
+
+  [data-ui='radio-group'][data-part='root'][data-size='sm'] {
+    --_size: var(--slotted-radio-group-size, var(--slotted-selection-size-sm, 14px));
+    --_font-size: var(--slotted-control-font-size-sm, 12px);
+    --_gap: var(--slotted-control-gap-sm, 6px);
+    --_label-gap: var(--slotted-control-label-gap-sm, 8px);
+    --_tile-inset: var(
+      --slotted-radio-group-tile-inset,
+      var(--slotted-control-padding-inline-sm, 10px)
+    );
+  }
+
+  [data-ui='radio-group'][data-part='root'][data-size='md'] {
+    --_size: var(--slotted-radio-group-size, var(--slotted-selection-size-md, 16px));
+    --_font-size: var(--slotted-control-font-size-md, 13px);
+    --_gap: var(--slotted-control-gap-md, 8px);
+    --_label-gap: var(--slotted-control-label-gap-md, 12px);
+    --_tile-inset: var(
+      --slotted-radio-group-tile-inset,
+      var(--slotted-control-padding-inline-md, 13px)
+    );
+  }
+
+  [data-ui='radio-group'][data-part='root'][data-size='lg'] {
+    --_size: var(--slotted-radio-group-size, var(--slotted-selection-size-lg, 18px));
+    --_font-size: var(--slotted-control-font-size-lg, 14px);
+    --_gap: var(--slotted-control-gap-lg, 8px);
+    --_label-gap: var(--slotted-control-label-gap-lg, 12px);
+    --_tile-inset: var(
+      --slotted-radio-group-tile-inset,
+      var(--slotted-control-padding-inline-lg, 16px)
+    );
+  }
+
+  /* ── One item ─────────────────────────────────────────────────────────── */
+
+  [data-ui='radio-group'] [data-part='item'] {
+    /* The rows are as tall as they read. Stretched, the description drifted
+       away from the label it belongs to; the surplus is the container's. */
+    align-content: start;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    /* The halo sits at a negative stack level, and this is the stacking
+       context it is negative inside of — see `checkbox`. */
+    isolation: isolate;
+    /* The containing block for the halo. */
+    position: relative;
+  }
+
+  /* The direction the halo and the target are placed in — the root's, not the
+     label's, for the reason `checkbox` records. */
+  [data-ui='radio-group'][data-part='root'] {
+    --_direction: ltr;
+  }
+
+  [data-ui='radio-group'][data-part='root']:dir(rtl) {
+    --_direction: rtl;
+  }
+
+  [data-ui='radio-group'] [data-part='control'] {
+    appearance: none;
+    background-color: var(--slotted-radio-group-background, var(--slotted-surface, Canvas));
+    /* The medium step in the strong border colour, as `checkbox` edges its
+       square: a sixteen-pixel circle is edged too lightly at one pixel and too
+       heavily at two. */
+    border: var(--slotted-radio-group-border-width, var(--slotted-border-width-medium, 1.5px)) solid
+      var(--slotted-radio-group-border-color, var(--slotted-border-strong, ButtonBorder));
+    /** A circle, and the one place this family and `checkbox` differ visually. */
+    border-radius: var(--slotted-radius-full, 9999px);
+    block-size: var(--_size);
+    box-sizing: border-box;
+    cursor: pointer;
+    grid-area: 1 / 1;
+    inline-size: var(--_size);
+    margin: 0;
+    margin-block-start: var(--_lift);
+    transition:
+      background-color var(--slotted-control-transition-duration)
+        var(--slotted-control-transition-easing),
+      border-color var(--slotted-control-transition-duration)
+        var(--slotted-control-transition-easing);
+  }
+
+  /**
+   * The dot: the accent's solid step on the surface, inside a circle whose
+   * edge has turned the same colour. The glyph scale's dot is authored at half
+   * its grid, so the `Glyph` element the binding renders, filling the box,
+   * draws a dot of eight pixels in a circle of sixteen — the proportion every surveyed implementation lands
+   * on — and the box the dot is centred in is the control's own, of whole
+   * pixels, so the two are concentric at every step.
+   *
+   * A dot rather than a hole punched in a thick accent edge, which was the
+   * other reading of the item: the hole is four pixels at `sm`, the contract
+   * names the dot glyph as this part's mark, and the mark then enters with the
+   * same growth `checkbox`'s does.
+   */
+  [data-ui='radio-group'] [data-part='indicator'] {
+    --slotted-icon-size: var(--_size);
+
+    block-size: var(--_size);
+    color: var(--slotted-radio-group-mark-color, var(--slotted-tone-accent-solid));
+    /* A flex box, so the icon sits in it as a box and not on a line of text. */
+    display: flex;
+    grid-area: 1 / 1;
+    inline-size: var(--_size);
+    margin-block-start: var(--_lift);
+    opacity: 0;
+    pointer-events: none;
+    /* The mark grows in at the medium step, one above the edge — the same
+       motion `checkbox` gives its check. */
+    scale: 0.6;
+    transition:
+      opacity var(--slotted-duration-medium) var(--slotted-control-transition-easing),
+      scale var(--slotted-duration-medium) var(--slotted-control-transition-easing);
+  }
+
+  [data-ui='radio-group'] [data-part='control']:checked + [data-part='indicator'] {
+    opacity: 1;
+    scale: 1;
+  }
+
+  [data-ui='radio-group'] [data-part='label'] {
+    cursor: pointer;
+    grid-column: 2;
+    grid-row: 1;
+    overflow-wrap: anywhere;
+  }
+
+  /**
+   * The gap between the control and its text is the grid's, not the label's
+   * padding: a padding is laid out in the label's own direction, and a label
+   * in Arabic inside a row in Portuguese put it on the far side, against
+   * nothing, with the text against the control.
+   */
+  [data-ui='radio-group'] [data-part='item']:has(> [data-part='label']) {
+    column-gap: var(--_label-gap);
+  }
+
+  [data-ui='radio-group'][data-part='root']:not([data-variant='tile']) [data-part='label'] {
+    justify-self: start;
+    position: relative;
+  }
+
+  /**
+   * The target and the halo, as `checkbox` draws them and for the reasons it
+   * records: the label's `::before` is the WCAG-minimum square, ending where
+   * the circle ends so it never hangs past the item's end or bottom; its
+   * `::after` is the wash behind the circle and the label, concentric with
+   * the circle, in the accent's text tone rather than its surface tone, which
+   * is a ground and disappeared into the page in `dark` and in
+   * `high-contrast` (CK7). The tile has neither; its surface answers the
+   * pointer.
+   */
+  [data-ui='radio-group'][data-part='root']:not([data-variant='tile']) [data-part='label']::before {
+    block-size: var(--_target);
+    content: '';
+    direction: var(--_direction);
+    inline-size: var(--_target);
+    inset-block-start: calc(var(--_lift) + var(--_size) - var(--_target));
+    inset-inline-start: calc(
+      (var(--_size) - var(--_target)) / 2 - var(--_size) - var(--_label-gap)
+    );
+    position: absolute;
+    z-index: -1;
+  }
+
+  [data-ui='radio-group'][data-part='root']:not([data-variant='tile']) [data-part='label']::after {
+    background-color: var(--slotted-radio-group-halo-color, var(--slotted-tone-accent-text));
+    border-radius: calc(var(--_size) / 2 + var(--_halo-spread));
+    content: '';
+    direction: var(--_direction);
+    inset-block: calc(var(--_lift) - var(--_halo-spread));
+    inset-inline-end: calc(-1.5 * var(--_halo-spread));
+    inset-inline-start: calc(-1 * (var(--_size) + var(--_label-gap) + var(--_halo-spread)));
+    opacity: 0;
+    position: absolute;
+    transition: opacity var(--slotted-control-transition-duration)
+      var(--slotted-control-transition-easing);
+    z-index: -1;
+  }
+
+  /* A label with nothing in it — the Angular binding renders one whether or
+     not content is projected — has no text to wash, so the wash closes around
+     the circle at the same distance on all four sides. */
+  [data-ui='radio-group'][data-part='root']:not([data-variant='tile'])
+    [data-part='label']:empty::after {
+    inset-inline-end: calc(var(--_label-gap) - var(--_halo-spread));
+  }
+
+  [data-ui='radio-group'] [data-part='description'] {
+    color: var(--slotted-radio-group-description-color, var(--slotted-text-muted, GrayText));
+    font-size: var(
+      --slotted-radio-group-description-font-size,
+      var(--slotted-font-size-xs, 0.75rem)
+    );
+    grid-column: 2;
+    grid-row: 2;
+    line-height: var(--slotted-line-height-xs, 1.4);
+    margin: 0;
+    overflow-wrap: anywhere;
+    padding-block-start: var(--_description-gap);
+  }
+
+  /* ── Placement ────────────────────────────────────────────────────────── */
+
+  [data-ui='radio-group'][data-part='root'][data-label-placement='start'] [data-part='item'] {
+    /**
+     * `1fr` and not `max-content`, which was tried first and looked better in
+     * one row than in five: `max-content` sizes each item's first column from
+     * its own label, so a column of choices ends with the boxes at five
+     * different distances from the edge. A control that does not line up with
+     * the control above it is a worse picture than a control at the end of its
+     * row — and the end of the row is where a label-first arrangement puts a
+     * control everywhere it is used, from a settings list to a table cell.
+     */
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  [data-ui='radio-group'][data-part='root'][data-label-placement='start'] [data-part='control'],
+  [data-ui='radio-group'][data-part='root'][data-label-placement='start'] [data-part='indicator'] {
+    grid-area: 1 / 2;
+  }
+
+  [data-ui='radio-group'][data-part='root'][data-label-placement='start'] [data-part='label'],
+  [data-ui='radio-group'][data-part='root'][data-label-placement='start']
+    [data-part='description'] {
+    grid-column: 1;
+  }
+
+  [data-ui='radio-group'][data-part='root'][data-label-placement='start'] [data-part='label'] {
+    justify-self: stretch;
+  }
+
+  [data-ui='radio-group'][data-part='root'][data-label-placement='start']
+    [data-part='label']::before {
+    inset-inline-end: calc(-1 * (var(--_size) + var(--_label-gap)));
+    inset-inline-start: auto;
+  }
+
+  [data-ui='radio-group'][data-part='root'][data-label-placement='start']
+    [data-part='label']::after {
+    inset-inline-end: calc(-1 * (var(--_size) + var(--_label-gap) + var(--_halo-spread)));
+    inset-inline-start: calc(-1.5 * var(--_halo-spread));
+  }
+
+  /* ── States ───────────────────────────────────────────────────────────── */
+
+  /**
+   * Hover is the edge and the halo, and the ground stays — the same answer
+   * `checkbox` gives, lit from the circle and from the label alike because
+   * both are the one target.
+   */
+  [data-ui='radio-group'][data-part='root']:not([data-readonly])
+    [data-part='control']:hover:not(:disabled) {
+    border-color: var(--slotted-radio-group-hover-border-color, var(--slotted-tone-accent-border));
+  }
+
+  [data-ui='radio-group'][data-part='root']:not([data-readonly])
+    [data-part='control']:hover:not(:disabled)
+    ~ [data-part='label']::after,
+  [data-ui='radio-group'][data-part='root']:not([data-readonly])
+    [data-part='control']:not(:disabled)
+    ~ [data-part='label']:hover::after {
+    opacity: var(--slotted-selection-halo-opacity, 0.12);
+  }
+
+  [data-ui='radio-group'][data-part='root']:not([data-readonly])
+    [data-part='control']:active:not(:disabled) {
+    background-color: var(
+      --slotted-radio-group-active-background,
+      var(--slotted-tone-accent-subtle-active)
+    );
+  }
+
+  /**
+   * Chosen is the edge and the dot in the accent's solid step, on the surface
+   * the circle already stood on: the ground does not fill, because the dot is
+   * what says chosen and a filled circle with a white dot is a checkbox with a
+   * different corner.
+   */
+  [data-ui='radio-group'] [data-part='control']:checked {
+    border-color: var(--slotted-radio-group-checked-border-color, var(--slotted-tone-accent-solid));
+  }
+
+  [data-ui='radio-group'][data-part='root']:not([data-readonly])
+    [data-part='control']:checked:hover:not(:disabled) {
+    border-color: var(
+      --slotted-radio-group-checked-hover-border-color,
+      var(--slotted-tone-accent-solid-hover)
+    );
+  }
+
+  [data-ui='radio-group'][data-part='root']:not([data-readonly])
+    [data-part='control']:checked:active:not(:disabled) {
+    border-color: var(
+      --slotted-radio-group-checked-active-border-color,
+      var(--slotted-tone-accent-solid-active)
+    );
+  }
+
+  [data-ui='radio-group'] [data-part='control']:focus-visible {
+    outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
+    outline-offset: var(--slotted-focus-ring-offset, 2px);
+  }
+
+  [data-ui='radio-group'][data-part='root'][data-invalid] {
+    --slotted-focus-ring-color: var(
+      --slotted-radio-group-invalid-focus-ring-color,
+      var(--slotted-focus-ring-color-invalid, Highlight)
+    );
+  }
+
+  /**
+   * The border thickens as well as changing colour. In the `high-contrast`
+   * scheme the theme paints `--slotted-tone-danger-border` the same black as
+   * every other border, so colour alone would make an invalid control identical
+   * to a valid one — and `docs/component-features.md` §2.5 refuses a state that
+   * only colour carries. It thickens by the edge every invalid control adds,
+   * `--slotted-control-invalid-edge-width`, and as a border rather than the
+   * inset shadow a field draws, because a width survives forced colours and a
+   * shadow does not. The box keeps its size, because the border box is what is
+   * measured.
+   */
+  [data-ui='radio-group'][data-part='root'][data-invalid] [data-part='control'] {
+    border-width: calc(
+      var(--slotted-radio-group-border-width, var(--slotted-border-width-medium, 1.5px)) +
+        var(
+          --slotted-radio-group-invalid-edge-width,
+          var(--slotted-control-invalid-edge-width, 1px)
+        )
+    );
+    border-color: var(
+      --slotted-radio-group-invalid-border-color,
+      var(--slotted-tone-danger-border)
+    );
+  }
+
+  [data-ui='radio-group'][data-part='root'][data-invalid] [data-part='control']:checked {
+    border-color: var(
+      --slotted-radio-group-invalid-checked-border-color,
+      var(--slotted-tone-danger-solid)
+    );
+  }
+
+  [data-ui='radio-group'][data-part='root'][data-invalid]
+    [data-part='control']:checked
+    + [data-part='indicator'] {
+    color: var(--slotted-radio-group-invalid-mark-color, var(--slotted-tone-danger-solid));
+  }
+
+  /**
+   * Read-only keeps the ink, the ring and the tab stop. Only the ground of the
+   * unchosen options and the pointer say the value is not the reader's to move,
+   * and the chosen one keeps its accent because the value is real.
+   */
+  [data-ui='radio-group'][data-part='root'][data-readonly] [data-part='control'],
+  [data-ui='radio-group'][data-part='root'][data-readonly] [data-part='label'] {
+    cursor: default;
+  }
+
+  [data-ui='radio-group'][data-part='root'][data-readonly] [data-part='control']:not(:checked) {
+    background-color: var(
+      --slotted-radio-group-readonly-background,
+      /**
+       * The ground `textarea` already gives a read-only value, and not the
+       * sunken surface: at the `light` scheme the sunken step is #f8fafd
+       * against a white surface, a difference a reader cannot see, so the state
+       * existed in the accessibility tree and nowhere on screen.
+       */
+        var(--slotted-tone-secondary-subtle-hover)
+    );
+  }
+
+  [data-ui='radio-group'][data-part='root'][data-disabled] [data-part='control'],
+  [data-ui='radio-group'] [data-part='control']:disabled {
+    background-color: var(
+      --slotted-radio-group-disabled-background,
+      var(--slotted-disabled-background)
+    );
+    border-color: var(--slotted-radio-group-disabled-border-color, var(--slotted-disabled-border));
+    cursor: not-allowed;
+  }
+
+  [data-ui='radio-group'] [data-part='control']:disabled + [data-part='indicator'] {
+    color: var(--slotted-radio-group-disabled-mark-color, var(--slotted-disabled-foreground));
+  }
+
+  [data-ui='radio-group'][data-part='root'][data-disabled] [data-part='label'],
+  [data-ui='radio-group'][data-part='root'][data-disabled] [data-part='description'],
+  [data-ui='radio-group'] [data-part='control']:disabled ~ [data-part='label'],
+  [data-ui='radio-group'] [data-part='control']:disabled ~ [data-part='description'] {
+    color: var(--slotted-radio-group-disabled-color, var(--slotted-disabled-foreground));
+    cursor: not-allowed;
+  }
+
+  /* ── The tile ─────────────────────────────────────────────────────────
+   *
+   * Each item drawn as a framed surface, and the whole of that surface as its
+   * target. The variant is the group's, because a set with one plain item among
+   * four tiles is a set nobody meant to write; the painting is the item's,
+   * because the item is what a reader clicks.
+   *
+   * A plan picker is the case this exists for, and it is an exclusive set:
+   * Cloudscape built a whole `Tiles` family for it and Carbon a selectable
+   * `Tile`. Shipping the variant on `checkbox` and declining it here would have
+   * been half a capability.
+   *
+   * The tile does not arrange itself. `grid` already ships `columns`,
+   * `minItemWidth` and a stretching alignment, so a row of equal-width tiles of
+   * equal height is a `grid` around the items and nothing this family adds.
+   */
+
+  [data-ui='radio-group'][data-part='root'][data-variant='tile'] [data-part='item'] {
+    /* The description sits one step nearer its label inside a frame, as
+       `checkbox` keeps it (CK2). */
+    --_description-gap: var(
+      --slotted-radio-group-tile-description-gap,
+      var(--slotted-space-2, 0.25rem)
+    );
+    /* Current. The gated rules below move these three and nothing else. */
+    --_tile-surface: var(--slotted-radio-group-tile-background, var(--slotted-surface, Canvas));
+    --_tile-edge: var(
+      --slotted-radio-group-tile-border-color,
+      var(--slotted-control-border-color, ButtonBorder)
+    );
+    --_tile-edge-width: var(--slotted-control-border-width, 1px);
+
+    background-color: var(--_tile-surface);
+    border-radius: var(--slotted-radio-group-tile-radius, var(--slotted-radius-md, 6px));
+    /* The shadow a framed control carries at rest. A tile is a framed control,
+       so it reads the control step rather than a surface elevation. */
+    box-shadow: var(--slotted-control-shadow, none);
+    cursor: pointer;
+    padding: var(--_tile-inset);
+    /* The containing block for the edge and for the stretched target. */
+    position: relative;
+    transition:
+      background-color var(--slotted-control-transition-duration)
+        var(--slotted-control-transition-easing),
+      box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);
+  }
+
+  /**
+   * The edge is drawn over the border box and never in flow, so a hairline
+   * becoming a two-pixel chosen edge moves no line of text inside the tile. It
+   * is a border rather than a shadow so that it survives forced colours, where
+   * a shadow is removed outright and a width is not. `card` draws its own edge
+   * the same way and for the same two reasons.
+   */
+  [data-ui='radio-group'][data-part='root'][data-variant='tile'] [data-part='item']::before {
+    border: calc(var(--_tile-edge-width) + var(--_tile-invalid-edge, 0px)) solid var(--_tile-edge);
+    border-radius: inherit;
+    content: '';
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+    transition: border-color var(--slotted-control-transition-duration)
+      var(--slotted-control-transition-easing);
+  }
+
+  /**
+   * The target is the tile. The label already owns the target in the plain
+   * variant; here its hit area stretches over the whole surface, which is the
+   * mechanism `card` uses for a card that resolves to one destination. The
+   * element stays a `<label for>`, so the name, the selection and the arrow
+   * keys are the platform's and nothing is reimplemented.
+   *
+   * Anything a consumer raises above the surface sets `position: relative` on
+   * itself, for the same reason a card's footer does.
+   */
+  [data-ui='radio-group'][data-part='root'][data-variant='tile']
+    [data-part='item']
+    [data-part='label']::after {
+    content: '';
+    inset: 0;
+    position: absolute;
+  }
+
+  /* ── The tile's states ────────────────────────────────────────────────
+   *
+   * Read on the item rather than on the control, because the stretched
+   * target means the pointer is over the label and not over the box for all but
+   * sixteen pixels of the surface. Each rule holds itself back for every
+   * stronger state it can meet, in the order `STATE_PRECEDENCE` declares —
+   * including `checked`, which outranks both: without that guard, hovering a
+   * chosen tile repainted it in the fainter tint an unchosen one shows, so the
+   * pointer made a tile look less chosen than it was.
+   */
+
+  [data-ui='radio-group'][data-part='root'][data-variant='tile']:not([data-readonly]):not(
+      [data-disabled]
+    )
+    [data-part='item']:has([data-part='control']:not(:disabled)):not(
+      :has([data-part='control']:checked)
+    ):hover {
+    --_tile-surface: var(
+      --slotted-radio-group-tile-hover-background,
+      var(--slotted-tone-accent-subtle-hover)
+    );
+    --_tile-edge: var(
+      --slotted-radio-group-tile-hover-border-color,
+      var(--slotted-tone-accent-border)
+    );
+  }
+
+  [data-ui='radio-group'][data-part='root'][data-variant='tile']:not([data-readonly]):not(
+      [data-disabled]
+    )
+    [data-part='item']:has([data-part='control']:not(:disabled)):not(
+      :has([data-part='control']:checked)
+    ):active {
+    --_tile-surface: var(
+      --slotted-radio-group-tile-active-background,
+      var(--slotted-tone-accent-subtle-active)
+    );
+  }
+
+  /**
+   * Chosen says it with the edge, at the solid step and at twice the width. The
+   * ground moves one tint with it, because at tile area an edge alone is a
+   * difference a reader has to look for across a row of five, and the tint
+   * alone is a difference the `high-contrast` scheme flattens to nothing.
+   */
+  [data-ui='radio-group'][data-part='root'][data-variant='tile']:not([data-readonly])
+    [data-part='item']:has([data-part='control']:checked) {
+    --_tile-edge: var(
+      --slotted-radio-group-tile-checked-border-color,
+      var(--slotted-tone-accent-solid)
+    );
+    --_tile-edge-width: var(--slotted-border-width-thick, 2px);
+  }
+
+  /**
+   * The chosen tint is the weaker half of what "chosen" says, so it holds
+   * itself back for read-only, which outranks it. The edge above does not: the
+   * value is real and stays visible, and a read-only set then reads as a set of
+   * secondary grounds with one accent edge on the choice that was made.
+   */
+  [data-ui='radio-group'][data-part='root'][data-variant='tile']:not([data-readonly])
+    [data-part='item']:has([data-part='control']:checked) {
+    --_tile-surface: var(
+      --slotted-radio-group-tile-checked-background,
+      var(--slotted-tone-accent-surface)
+    );
+  }
+
+  /**
+   * A chosen tile still answers the pointer, and it is the edge that moves
+   * rather than the ground: the chosen tint is already the deepest step the
+   * accent tone has below its solid, so a ground that moved would either not
+   * move at all in `light` or land on the tint an unchosen hovered tile shows.
+   */
+  [data-ui='radio-group'][data-part='root'][data-variant='tile']:not([data-readonly]):not(
+      [data-disabled]
+    )
+    [data-part='item']:has([data-part='control']:checked:not(:disabled)):hover {
+    --_tile-edge: var(
+      --slotted-radio-group-tile-checked-hover-border-color,
+      var(--slotted-tone-accent-solid-hover)
+    );
+  }
+
+  [data-ui='radio-group'][data-part='root'][data-variant='tile'][data-invalid] [data-part='item'] {
+    --_tile-edge: var(
+      --slotted-radio-group-tile-invalid-border-color,
+      var(--slotted-tone-danger-border)
+    );
+    /* Added to whatever width the tile's state draws, chosen or not, so an
+       invalid tile is wider than the same tile valid (WCAG 1.4.1). */
+    --_tile-invalid-edge: var(
+      --slotted-radio-group-invalid-edge-width,
+      var(--slotted-control-invalid-edge-width, 1px)
+    );
+  }
+
+  [data-ui='radio-group'][data-part='root'][data-variant='tile'][data-invalid]
+    [data-part='item']:has([data-part='control']:checked) {
+    --_tile-surface: var(
+      --slotted-radio-group-tile-invalid-checked-background,
+      var(--slotted-tone-danger-surface)
+    );
+    --_tile-edge: var(
+      --slotted-radio-group-tile-invalid-checked-border-color,
+      var(--slotted-tone-danger-solid)
+    );
+  }
+
+  /* Read-only keeps the ink and the tab stop; only the ground and the pointer
+     say the value is not the reader's to move. */
+  [data-ui='radio-group'][data-part='root'][data-variant='tile'][data-readonly] [data-part='item'] {
+    --_tile-surface: var(
+      --slotted-radio-group-tile-readonly-background,
+      var(--slotted-tone-secondary-subtle-hover)
+    );
+    /**
+     * The frame holds back for read-only, edge and all, for the reason
+     * `checkbox` records: in the `dark` scheme the read-only ground and the
+     * chosen ground are seven units of blue apart, so the ground alone made a
+     * read-only chosen tile and a chosen tile the same picture. The circle
+     * inside is still painted chosen — it is the mark that says what was
+     * chosen — and the frame says the value is not the reader's to move.
+     */
+    --_tile-edge: var(
+      --slotted-radio-group-tile-readonly-border-color,
+      var(--slotted-border-strong)
+    );
+
+    cursor: default;
+  }
+
+  [data-ui='radio-group'][data-part='root'][data-variant='tile'][data-disabled] [data-part='item'],
+  [data-ui='radio-group'][data-part='root'][data-variant='tile']
+    [data-part='item']:has([data-part='control']:disabled) {
+    --_tile-surface: var(
+      --slotted-radio-group-tile-disabled-background,
+      var(--slotted-disabled-background)
+    );
+    --_tile-edge: var(
+      --slotted-radio-group-tile-disabled-border-color,
+      var(--slotted-disabled-border)
+    );
+
+    /* A tile that cannot be used does not sit above the page. */
+    box-shadow: none;
+    cursor: not-allowed;
+  }
+
+  /**
+   * The ring goes around the tile and the circle loses its own. Drawing both
+   * left a ring around a sixteen-pixel circle inside a ring around the whole
+   * surface, which reads as two controls.
+   */
+  [data-ui='radio-group'][data-part='root'][data-variant='tile']
+    [data-part='item']:has([data-part='control']:focus-visible) {
+    outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
+    outline-offset: var(--slotted-focus-ring-offset, 2px);
+  }
+
+  [data-ui='radio-group'][data-part='root'][data-variant='tile']
+    [data-part='control']:focus-visible {
+    outline: none;
+  }
+
+  /* ── Forced colors ────────────────────────────────────────────────────
+   *
+   * Forced colors overrides the circle's `background-color` and the dot's
+   * `color`, so the dot would vanish into the circle it is drawn in. Restated in system colours, as `checkbox` restates the same pair.
+   */
+  @media (forced-colors: active) {
+    [data-ui='radio-group'] [data-part='control'] {
+      background-color: Field;
+      border-color: FieldText;
+    }
+
+    [data-ui='radio-group'] [data-part='control']:checked {
+      background-color: Field;
+      border-color: Highlight;
+    }
+
+    [data-ui='radio-group'] [data-part='control']:checked + [data-part='indicator'] {
+      color: Highlight;
+    }
+
+    /*
+     * A checked invalid option keeps the checked pair. The theme maps the
+     * danger fill to `ButtonFace`, so the invalid rules above painted the edge
+     * and the dot in the page's white and the dot vanished. The dot is
+     * `Highlight` as for a valid option, and the wider invalid edge takes
+     * `CanvasText`, as does a tile's invalid edge.
+     */
+    [data-ui='radio-group'][data-part='root'][data-invalid] [data-part='control']:checked {
+      background-color: Field;
+      border-color: CanvasText;
+    }
+
+    [data-ui='radio-group'][data-part='root'][data-invalid]
+      [data-part='control']:checked
+      + [data-part='indicator'] {
+      color: Highlight;
+    }
+
+    [data-ui='radio-group'][data-part='root'][data-variant='tile'][data-invalid] [data-part='item'],
+    [data-ui='radio-group'][data-part='root'][data-variant='tile'][data-invalid]
+      [data-part='item']:has([data-part='control']:checked) {
+      --_tile-edge: CanvasText;
+    }
+
+    [data-ui='radio-group'] [data-part='control']:disabled {
+      background-color: Field;
+      border-color: GrayText;
+    }
+
+    [data-ui='radio-group'] [data-part='control']:disabled + [data-part='indicator'] {
+      color: GrayText;
+    }
+  }
+}