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

package/src/time-picker/time-picker.css

@@ -0,0 +1,665 @@
+@layer slotted.components {
+  /**
+   * ── A time field, a trigger, and a list of times behind them ───────────
+   *
+   *   ┌─ root ──────────────────────────────────────────────────────────┐
+   *   │  ┌─ control ─────────────────────────────────────────────────┐  │
+   *   │  │  time-field                                    ┌ trigger ┐ │  │
+   *   │  └───────────────────────────────────────────────────────────┘  │
+   *   └─────────────────────────────────────────────────────────────────┘
+   *          ┌─ positioner ─ the layer ────────────────────────────────┐
+   *          │  ┌─ content ─ the surface ──────────────────────────┐   │
+   *          │  │  head: now │ presets                             │   │
+   *          │  │  list ─ option · option · option                 │   │
+   *          │  │  footer                                          │   │
+   *          │  └──────────────────────────────────────────────────┘   │
+   *          └────────────────────────────────────────────────────────┘
+   *
+   * `time-field` inside keeps its own `data-ui`, so nothing here restyles a
+   * segment: this stylesheet owns the frame that holds the field, the trigger,
+   * and the layer the list stands on. A list of times at a step has one axis,
+   * which is why the surface is a listbox and not a grid — and why this family
+   * composes `select`'s machinery rather than `calendar`'s.
+   *
+   * One shape, at every step. A column per unit was drawn and withdrawn — the
+   * field already types every second — and so was an hour heading over the
+   * rows, which repeated the hour each row already carries. What is left is a
+   * list, and the length of it is answered by where the panel opens, by
+   * type-ahead, and by PageUp and PageDown.
+   */
+  [data-ui='time-picker'][data-part='root'] {
+    display: block;
+    /* The anchor the positioner measures is the control, and a block root
+       lets the frame take the width the form gave it. */
+    inline-size: 100%;
+  }
+
+  /**
+   * The box the positioner measures, and nothing else.
+   *
+   * It draws no frame: the `time-field` inside it draws its own, and the
+   * trigger is handed to that field's `end` slot by the binding.
+   */
+  [data-ui='time-picker'] [data-part='control'] {
+    --_icon-size: var(--slotted-control-icon-size-md, 16px);
+    --_height: var(--slotted-control-height-md, 34px);
+
+    align-items: center;
+    display: flex;
+    inline-size: 100%;
+    min-inline-size: 0;
+    position: relative;
+  }
+
+  [data-ui='time-picker'][data-part='root'][data-size='sm'] [data-part='control'] {
+    --_icon-size: var(--slotted-control-icon-size-sm, 14px);
+    --_height: var(--slotted-control-height-sm, 30px);
+  }
+
+  [data-ui='time-picker'][data-part='root'][data-size='lg'] [data-part='control'] {
+    --_icon-size: var(--slotted-control-icon-size-lg, 18px);
+    --_height: var(--slotted-control-height-lg, 38px);
+  }
+
+  /**
+   * The button that opens the list. It sits inside the field's frame, at the
+   * reading end, and takes the same inner-control box every other family puts
+   * inside a frame.
+   *
+   * It is always drawn. Angular Material records why: ChromeOS turns
+   * `Alt`+`ArrowDown` into `PageDown` before the browser sees it, so the chord
+   * cannot be the only way in.
+   *
+   * The mark is a clock and not a chevron, for the reason `date-picker`'s is a
+   * calendar: a chevron says "a list of choices opens here", and what opens
+   * here is a clock's worth of them. The glyph names the kind of value the
+   * control holds, which is the one thing about it that never changes — so it
+   * does not turn while the surface is open either. It is a `Glyph` the
+   * binding draws inside an `icon` box, at the field's icon step.
+   */
+  [data-ui='time-picker'] [data-part='trigger'] {
+    --slotted-icon-size: var(--_icon-size);
+
+    align-items: center;
+    appearance: none;
+    background-color: transparent;
+    block-size: var(
+      --slotted-time-picker-trigger-size,
+      min(
+        calc(var(--_icon-size) + 2 * var(--slotted-space-2, 0.25rem)),
+        calc(
+          var(--_height) - var(--slotted-control-border-width, 1px) * 2 -
+            var(--slotted-space-2, 0.25rem)
+        )
+      )
+    );
+    border: 0;
+    border-radius: var(--slotted-time-picker-radius, var(--slotted-control-radius, 4px));
+    color: var(--slotted-time-picker-trigger-color, var(--slotted-text-muted, GrayText));
+    cursor: pointer;
+    display: inline-flex;
+    flex: 0 0 auto;
+    inline-size: var(
+      --slotted-time-picker-trigger-size,
+      min(
+        calc(var(--_icon-size) + 2 * var(--slotted-space-2, 0.25rem)),
+        calc(
+          var(--_height) - var(--slotted-control-border-width, 1px) * 2 -
+            var(--slotted-space-2, 0.25rem)
+        )
+      )
+    );
+    justify-content: center;
+    padding: 0;
+    position: relative;
+    touch-action: manipulation;
+    transition:
+      background-color var(--slotted-control-transition-duration)
+        var(--slotted-control-transition-easing),
+      color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  /* The hit area, recovered outside the paint, exactly as every other inner
+     control in the library recovers it. */
+  [data-ui='time-picker'] [data-part='trigger']::after {
+    content: '';
+    inset: min(0px, calc((100% - var(--slotted-target-min, 24px)) / 2));
+    position: absolute;
+  }
+
+  /* On a finger the target is the comfortable size in both axes and the box
+     is the one a mouse sees: the ground and the focus ring stay square, and
+     the hit area above grows to 44 pixels around them. Before the field's
+     clear it does not reach across it. */
+  @media (pointer: coarse) {
+    [data-ui='time-picker'] [data-part='trigger']::after {
+      inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
+    }
+
+    [data-ui='time-picker']
+      [data-part='end']:has(+ [data-part='clear']:not([hidden]))
+      > [data-part='trigger']::after {
+      inset-inline-end: 0;
+    }
+  }
+
+  [data-ui='time-picker'] [data-part='trigger']:hover:not(:disabled):not([data-disabled]) {
+    background-color: var(
+      --slotted-time-picker-trigger-hover-background,
+      var(--slotted-tone-secondary-subtle-hover)
+    );
+  }
+
+  [data-ui='time-picker'] [data-part='trigger']:active:not(:disabled):not([data-disabled]) {
+    background-color: var(
+      --slotted-time-picker-trigger-active-background,
+      var(--slotted-tone-secondary-subtle-active)
+    );
+  }
+
+  /* Its own ring: tabbing from the last segment to the trigger has to move
+     something visible, and the frame's ring would sit still. */
+  [data-ui='time-picker'] [data-part='trigger']:focus-visible {
+    outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
+    outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
+  }
+
+  [data-ui='time-picker'][data-part='root'][data-invalid] {
+    --slotted-focus-ring-color: var(
+      --slotted-time-picker-invalid-focus-ring-color,
+      var(--slotted-focus-ring-color-invalid, Highlight)
+    );
+  }
+
+  [data-ui='time-picker'] [data-part='trigger']:disabled {
+    color: var(--slotted-disabled-foreground);
+    cursor: not-allowed;
+  }
+
+  /* ── The layer ────────────────────────────────────────────────────────
+   *
+   * What `packages/core/src/positioner` writes `position`, `left` and `top`
+   * onto. The painted surface is one element in, as every anchored family in
+   * the library is built.
+   */
+  [data-ui='time-picker'][data-part='positioner'] {
+    /* Only the block inset: the positioner writes `left` and never `right`,
+       and `inset-inline-start` would resolve to `right` in a right-to-left
+       document and win over the measured value. */
+    position: absolute;
+    inset-block-start: 0;
+
+    box-sizing: border-box;
+    isolation: isolate;
+    /* The layer is only a frame around the surface; the surface takes the
+       pointer, and the frame must not swallow a press meant for the page. */
+    pointer-events: none;
+    z-index: calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0));
+
+    /* The layer arrives along the axis it opens on and never along the inline
+       one, which is the rule `select` records. */
+    --_enter-distance: var(--slotted-space-2, 0.25rem);
+    opacity: 0;
+    translate: 0 calc(-1 * var(--_enter-distance));
+    transition:
+      opacity var(--slotted-duration-short) var(--slotted-easing-exit),
+      translate var(--slotted-duration-short) var(--slotted-easing-exit);
+  }
+
+  [data-ui='time-picker'][data-part='positioner'][data-side='top'] {
+    translate: 0 var(--_enter-distance);
+  }
+
+  /* A lateral side has no block direction to arrive from, so it only fades. */
+  [data-ui='time-picker'][data-part='positioner']:is([data-side='left'], [data-side='right']) {
+    translate: 0 0;
+  }
+
+  [data-ui='time-picker'][data-part='positioner'][data-open] {
+    opacity: 1;
+    translate: 0 0;
+    transition: none;
+  }
+
+  /**
+   * The entrance is a keyframe animation and not a transition, for the reason
+   * `select` records: a transition starts from the style the browser computed
+   * last, and the positioner writes `data-side` in the same style update as
+   * the family opens the layer. A layer written open in static markup — the
+   * harness, a docs snippet — is simply there, and is photographed where it
+   * stands.
+   */
+  [data-ui='time-picker'][data-part='positioner'][data-open][data-positioned] {
+    animation: slotted-time-picker-enter-down var(--slotted-duration-medium)
+      var(--slotted-easing-enter);
+  }
+
+  [data-ui='time-picker'][data-part='positioner'][data-open][data-positioned][data-side='top'] {
+    animation-name: slotted-time-picker-enter-up;
+  }
+
+  [data-ui='time-picker'][data-part='positioner'][data-open][data-positioned]:is(
+      [data-side='left'],
+      [data-side='right']
+    ) {
+    animation-name: slotted-time-picker-fade;
+  }
+
+  @keyframes slotted-time-picker-enter-down {
+    from {
+      opacity: 0;
+      translate: 0 calc(-1 * var(--_enter-distance));
+    }
+  }
+
+  @keyframes slotted-time-picker-enter-up {
+    from {
+      opacity: 0;
+      translate: 0 var(--_enter-distance);
+    }
+  }
+
+  @keyframes slotted-time-picker-fade {
+    from {
+      opacity: 0;
+    }
+  }
+
+  /* Stillness keeps the fade and drops the movement. */
+  @media (prefers-reduced-motion: reduce) {
+    [data-ui='time-picker'][data-part='positioner'],
+    [data-ui='time-picker'][data-part='positioner'][data-side='top'],
+    [data-ui='time-picker'][data-part='positioner'][data-side='left'],
+    [data-ui='time-picker'][data-part='positioner'][data-side='right'] {
+      translate: 0 0;
+      transition: opacity var(--slotted-duration-short) var(--slotted-easing-exit);
+    }
+
+    [data-ui='time-picker'][data-part='positioner'][data-open][data-positioned],
+    [data-ui='time-picker'][data-part='positioner'][data-open][data-positioned][data-side='top'],
+    [data-ui='time-picker'][data-part='positioner'][data-open][data-positioned][data-side='left'],
+    [data-ui='time-picker'][data-part='positioner'][data-open][data-positioned][data-side='right'] {
+      animation-name: slotted-time-picker-fade;
+    }
+  }
+
+  /* The anchor scrolled out of its own clipper. The list is still open and
+     still belongs to a control the reader can no longer see. */
+  [data-ui='time-picker'][data-part='positioner'][data-detached] {
+    visibility: hidden;
+  }
+
+  /**
+   * The surface.
+   *
+   * A grid of `auto` tracks rather than a wrapping flex row, for the reason
+   * `date-picker` records: a footer running the whole width as a flex item
+   * needs `flex-basis: 100%`, which is a percentage against a container being
+   * shrink-wrapped from its contents, and the browser resolves the circle by
+   * making the surface wider than anything in it.
+   *
+   * Its inline size is the anchor's, floored so a narrow field does not
+   * produce a column too tight to read a time in, and capped so a wide form
+   * does not stretch one column of times across a page.
+   */
+  [data-ui='time-picker'] [data-part='content'] {
+    background-color: var(--slotted-time-picker-surface, var(--slotted-surface-raised, Canvas));
+    border: var(--slotted-border-width-thin, 1px) solid
+      var(--slotted-time-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));
+    border-radius: var(--slotted-time-picker-content-radius, var(--slotted-radius-lg, 8px));
+    box-shadow: var(--slotted-time-picker-content-shadow, var(--slotted-shadow-md));
+    box-sizing: border-box;
+    color: var(--slotted-time-picker-content-color, var(--slotted-text, CanvasText));
+    /**
+     * One row's height, stated once, because the panel's cap is counted in
+     * rows: eight and a half of them at every density. Read from the control
+     * scale rather than from the target floor alone, so a dense panel shrinks
+     * its rows and its cap together — the first dense capture shrank only the
+     * cap and showed six options where the comfortable one showed nine, which
+     * is density changing what a reader can see rather than how much room it
+     * takes.
+     *
+     * The pitch is the row plus the air under it, because that is what the cap
+     * has to count: eight row *heights* left the ninth row entirely outside
+     * the box, and the half-row that says the list scrolls was never drawn.
+     */
+    --_row: max(var(--slotted-target-min, 24px), var(--slotted-control-height-sm, 30px));
+    --_row-pitch: calc(var(--_row) + var(--slotted-space-1, 0.125rem));
+
+    display: grid;
+    gap: var(--slotted-space-2, 0.25rem);
+    grid-template-areas: 'head' 'list' 'footer';
+    grid-template-columns: minmax(0, 1fr);
+    /**
+     * The anchor's width, floored so a narrow field does not produce a column
+     * too tight to read a time in, and capped so a wide form does not stretch
+     * one column of times across a page.
+     *
+     * The fallback is the floor rather than `auto` or `100%`: the property is
+     * written by the positioner and is absent wherever the surface is drawn
+     * without one — the harness, a docs snippet — and `min(auto, …)` is not a
+     * value, so the whole declaration would be dropped. `100%` is no answer
+     * either, and `table` paid for it in the same week: a percentage against a
+     * block being shrink-wrapped from its contents resolves to the contents.
+     */
+    inline-size: max(
+      var(--slotted-time-picker-content-min-inline-size, 11rem),
+      min(var(--slotted-positioner-anchor-width, 11rem), 20rem)
+    );
+    padding: var(--slotted-time-picker-content-padding, var(--slotted-space-3, 0.375rem));
+    /* The layer above gave up the pointer; the surface takes it back. */
+    pointer-events: auto;
+  }
+
+  /**
+   * The shortcuts take a column of their own only when there are any — and the
+   * surface stops being the anchor's width when they do. A second column
+   * inside a box sized to the field leaves the times about a hundred pixels
+   * wide, which is a column of numbers nobody chose that shape for; the
+   * surface shrink-wraps its two columns instead, capped by the room the
+   * positioner measured.
+   */
+  [data-ui='time-picker'] [data-part='content']:has([data-part='presets']) {
+    grid-template-areas: 'presets head' 'presets list' 'footer footer';
+    grid-template-columns: auto minmax(9rem, 1fr);
+    inline-size: auto;
+    max-inline-size: min(28rem, var(--slotted-positioner-available-width, 28rem));
+  }
+
+  /**
+   * The head: one press for the current time, which is what a reader who never
+   * discovers that `+` opens an expression still has.
+   */
+  [data-ui='time-picker'] [data-part='head'] {
+    align-items: center;
+    display: flex;
+    gap: var(--slotted-space-2, 0.25rem);
+    grid-area: head;
+    justify-content: flex-start;
+    padding-block-end: var(--slotted-space-2, 0.25rem);
+  }
+
+  [data-ui='time-picker'] [data-part='now'] {
+    appearance: none;
+    background-color: transparent;
+    border: 0;
+    border-radius: var(--slotted-time-picker-option-radius, var(--slotted-radius-sm, 4px));
+    color: var(--slotted-time-picker-now-color, var(--slotted-tone-accent-text));
+    cursor: pointer;
+    font: inherit;
+    min-block-size: var(--slotted-target-min, 24px);
+    padding-block: var(--slotted-space-1, 0.125rem);
+    /* The option's own inset, so the control and the times it stands above run
+       down one left edge rather than two a few pixels apart. */
+    padding-inline: var(--slotted-space-3, 0.375rem);
+    touch-action: manipulation;
+    transition: background-color var(--slotted-control-transition-duration)
+      var(--slotted-control-transition-easing);
+  }
+
+  [data-ui='time-picker'] [data-part='now']:hover:not(:disabled):not([data-disabled]) {
+    background-color: var(
+      --slotted-time-picker-option-hover-background,
+      var(--slotted-tone-secondary-subtle-hover)
+    );
+  }
+
+  [data-ui='time-picker'] [data-part='now']:focus-visible {
+    outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
+    outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
+  }
+
+  /**
+   * The consumer's own shortcuts. This family ships no list of them: "start of
+   * the shift" is a business clock, and a library that guessed at one would be
+   * guessing at an industry. What it ships is the column they stand in.
+   */
+  [data-ui='time-picker'] [data-part='presets'] {
+    align-items: flex-start;
+    border-inline-end: var(--slotted-border-width-thin, 1px) solid
+      var(--slotted-time-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));
+    display: flex;
+    flex-direction: column;
+    gap: var(--slotted-space-2, 0.25rem);
+    grid-area: presets;
+    padding-inline-end: var(--slotted-space-3, 0.375rem);
+  }
+
+  /* ── The list ─────────────────────────────────────────────────────────
+   *
+   * One column of times, capped in control heights so the cap holds at every
+   * density and every type step, and scrolled rather than truncated: a day of
+   * quarter-hours is ninety-six rows and every one of them is choosable.
+   */
+  [data-ui='time-picker'] [data-part='list'] {
+    display: flex;
+    flex-direction: column;
+    /**
+     * One step of air between rows, so the chosen row's painted ground and the
+     * focused row's inset ring never share an edge. Touching, the two read as
+     * one band with a dark underline rather than as two states of two rows.
+     */
+    gap: var(--slotted-space-1, 0.125rem);
+    grid-area: list;
+    /* Eight rows and half of the ninth. The half is the point: a list cut on a
+       row boundary looks like the whole list, and a reader who cannot see that
+       ninety-six times are available never scrolls for them. */
+    max-block-size: var(--slotted-time-picker-list-block-size, calc(var(--_row-pitch) * 8.5));
+    min-inline-size: 0;
+    overflow-y: auto;
+    /**
+     * No reserved gutter. The list's length is fixed for the life of the
+     * panel — the step, the bounds and the predicate are all settled before it
+     * opens — so there is no crossing of the scroll threshold to protect the
+     * rows from, and a gutter reserved on one side alone left every row ending
+     * twenty-one pixels short of the panel it sits in.
+     */
+    /* A highlight moved by a key lands whole rather than half under the edge. */
+    scroll-padding-block: var(--slotted-space-2, 0.25rem);
+  }
+
+  /**
+   * One time.
+   *
+   * The whole time on every row, which is what a reader choosing a slot wants
+   * to read: `09:15` says more at a glance than a `15` in a column of minutes,
+   * and the column shape exists for the steps where a flat list cannot.
+   */
+  [data-ui='time-picker'] [data-part='option'] {
+    align-items: center;
+    background-color: transparent;
+    border-radius: var(--slotted-time-picker-option-radius, var(--slotted-radius-sm, 4px));
+    color: inherit;
+    cursor: pointer;
+    display: flex;
+    flex: 0 0 auto;
+    font-variant-numeric: tabular-nums;
+    gap: var(--slotted-space-2, 0.25rem);
+    /* The row *is* `--_row`: no block padding on top of it, so eight rows are
+       eight rows and the cap that counts them is arithmetic rather than an
+       estimate. A time never wraps, so there is nothing for the padding to
+       protect. */
+    min-block-size: var(--_row);
+    padding-inline: var(--slotted-space-3, 0.375rem);
+    transition:
+      background-color var(--slotted-control-transition-duration)
+        var(--slotted-control-transition-easing),
+      color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  /* ── Option states ────────────────────────────────────────────────────
+   *
+   * Written strongest last, and each weaker one guarded against every stronger
+   * one it can meet, which is the order `STATE_PRECEDENCE` sets: the chosen
+   * time outranks the highlight, and the highlight outranks the pointer.
+   */
+
+  /**
+   * The pointer is the weakest of the four, so it stands down for all three of
+   * the others — not only for `disabled`.
+   *
+   * Specificity is what makes this a rule rather than an ordering: a hover
+   * selector carrying `:hover` and one `:not()` outweighs a plain
+   * `[data-selected]`, so the chosen row turned grey under the pointer however
+   * far down the file its own rule was written. `states.test.mjs` guards the
+   * `disabled` half of `STATE_PRECEDENCE` and nothing else, which is why this
+   * one was found by a reader rather than by a test.
+   */
+  [data-ui='time-picker']
+    [data-part='option']:hover:not([data-disabled]):not([data-selected]):not([data-current]) {
+    background-color: var(
+      --slotted-time-picker-option-hover-background,
+      var(--slotted-tone-secondary-subtle-hover)
+    );
+  }
+
+  /**
+   * Where a key will act. Focus is real here — the reader is inside the list
+   * and a roving tabindex moves them — so the ring is the one every other
+   * focusable row in the library draws, inset so it is not clipped by the
+   * scroller's own edge. It stands down for the chosen row, which outranks it.
+   */
+  [data-ui='time-picker'] [data-part='option'][data-current]:not([data-selected]) {
+    background-color: var(
+      --slotted-time-picker-option-current-background,
+      var(--slotted-tone-secondary-subtle-active)
+    );
+  }
+
+  [data-ui='time-picker'] [data-part='option']:focus-visible {
+    outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
+    outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
+  }
+
+  [data-ui='time-picker'] [data-part='option'][data-selected] {
+    background-color: var(
+      --slotted-time-picker-option-selected-background,
+      var(--slotted-tone-accent-solid)
+    );
+    color: var(--slotted-time-picker-option-selected-color, var(--slotted-tone-accent-on-solid));
+  }
+
+  /**
+   * The chosen row still answers the pointer — one step along its own tone,
+   * rather than the grey every other row takes. Measured on the default theme:
+   * rgb(29 78 216) at rest and rgb(42 91 220) under the pointer, which is the
+   * same blue and a visible change. A row that swapped colour family under the
+   * pointer read as a different row, and that is the defect this pair replaces.
+   */
+  [data-ui='time-picker'] [data-part='option'][data-selected]:hover:not([data-disabled]) {
+    background-color: var(
+      --slotted-time-picker-option-selected-hover-background,
+      var(--slotted-tone-accent-solid-hover)
+    );
+  }
+
+  /**
+   * A time a bound or the predicate refuses. It stays in the list by default,
+   * because a list that silently drops rows is a list whose step the reader
+   * cannot infer — and it is muted to the colour the theme measures rather
+   * than faded by opacity, so it stays readable.
+   */
+  [data-ui='time-picker'] [data-part='option'][data-disabled] {
+    background-color: transparent;
+    color: var(--slotted-disabled-foreground);
+    cursor: not-allowed;
+  }
+
+  /**
+   * Nothing available at all — `min` above `max`, or a predicate that refuses
+   * every step. It is a sentence rather than an empty box: MUI draws nothing
+   * here and Ant draws an empty column, and both read as a broken component.
+   */
+  [data-ui='time-picker'] [data-part='empty'] {
+    align-items: center;
+    color: var(--slotted-time-picker-label-color, var(--slotted-text-muted, GrayText));
+    display: flex;
+    grid-area: list;
+    justify-content: center;
+    min-block-size: calc(var(--_row) * 2);
+    padding: var(--slotted-space-4, 0.5rem);
+    text-align: center;
+    text-wrap: balance;
+  }
+
+  [data-ui='time-picker'] [data-part='footer'] {
+    align-items: center;
+    border-block-start: var(--slotted-border-width-thin, 1px) solid
+      var(--slotted-time-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));
+    display: flex;
+    gap: var(--slotted-space-2, 0.25rem);
+    grid-area: footer;
+    justify-content: flex-end;
+    padding-block-start: var(--slotted-space-3, 0.375rem);
+  }
+
+  /* ── Narrow, on a finger ──────────────────────────────────────────────
+   *
+   * §2.7 of `docs/component-features.md` asks for it by name: a popover on the
+   * desktop and a sheet in a narrow viewport. The DOM does not change, so the
+   * decision is testable without a device — and the query is on the viewport
+   * rather than on a container because a layer in a portal has no container to
+   * ask, and the question really is how much screen there is.
+   */
+  @media (max-width: 480px) and (pointer: coarse) {
+    [data-ui='time-picker'][data-part='positioner'][data-presentation='sheet'] {
+      /* The positioner's own measurement is overridden here on purpose: a
+         sheet is not placed against an anchor, it is placed against the
+         screen. */
+      inset: auto 0 0;
+      position: fixed;
+      translate: 0 var(--slotted-space-9, 2rem);
+    }
+
+    [data-ui='time-picker'][data-part='positioner'][data-presentation='sheet'][data-open] {
+      translate: 0 0;
+    }
+
+    [data-ui='time-picker'][data-part='positioner'][data-presentation='sheet']
+      [data-part='content'] {
+      border-end-end-radius: 0;
+      border-end-start-radius: 0;
+      border-inline: 0;
+      border-block-end: 0;
+      inline-size: var(--slotted-time-picker-sheet-inline-size, 100%);
+    }
+
+    /* A sheet has the screen's height to spend, so the list takes more of it
+       rather than staying at the popover's eight rows and a half. */
+    [data-ui='time-picker'][data-part='positioner'][data-presentation='sheet'] [data-part='list'] {
+      max-block-size: 50vh;
+    }
+
+    [data-ui='time-picker'][data-part='positioner'][data-presentation='sheet']
+      [data-part='presets'] {
+      /* Beside the list there is no room for a column of shortcuts, so they
+         become a row above it and keep their labels. */
+      border-inline-end: 0;
+      border-block-end: var(--slotted-border-width-thin, 1px) solid
+        var(--slotted-time-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));
+      flex-direction: row;
+      flex-wrap: wrap;
+      padding-block-end: var(--slotted-space-3, 0.375rem);
+      padding-inline-end: 0;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* The chosen row and the highlighted row both lose their painted grounds,
+       so each says what it is with a system pair the operating system
+       guarantees legible together. */
+    [data-ui='time-picker'] [data-part='option'][data-selected] {
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+
+    [data-ui='time-picker'] [data-part='option'][data-current]:not([data-selected]) {
+      outline: var(--slotted-focus-ring-width, 2px) solid Highlight;
+      outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
+    }
+  }
+}