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

package/src/time-field/time-field.css

@@ -0,0 +1,719 @@
+@layer slotted.components {
+  /**
+   * ── The segmented time control ─────────────────────────────────────────
+   *
+   * The frame `date-field` draws, holding hour, minute, second and day period
+   * instead of year, month and day. The frame carries no role: `role="group"`
+   * is on the row, because the APG's spin-button example names the group as
+   * what tells a screen-reader user that the buttons are one time.
+   *
+   * There is no `input[type=time]` under any of it, for the reason
+   * `date-field` refuses `input[type=date]`: the browser's own control cannot
+   * be styled past its closed state, its panel is drawn by the operating
+   * system and answers no scheme, no density and no direction, and its field
+   * order is the browser's locale rather than the application's. The value
+   * reaches a form through a hidden input carrying `HH:mm:ss`.
+   */
+  [data-ui='time-field'][data-part='root'] {
+    /**
+     * Type, height, inline padding, gap and glyph size come from the control
+     * scales — the only ones the theme restates per density — so a time in a
+     * dense table shrinks whole rather than in parts.
+     */
+    --_font-size: var(--slotted-control-font-size-md, 13px);
+    --_height: var(--slotted-control-height-md, 34px);
+    --_padding-inline: var(--slotted-control-padding-inline-md, 13px);
+    --_gap: var(--slotted-control-gap-md, 8px);
+    --_icon-floor: var(--slotted-time-field-icon-size-min, 14px);
+    --_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));
+
+    /* The same inner-control box every family in the library draws: the glyph,
+       and one step of air on each side, bounded by the frame's own height. */
+    --_action-size: var(
+      --slotted-time-field-action-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)
+        )
+      )
+    );
+
+    align-items: center;
+    background-color: var(--slotted-time-field-background, var(--slotted-control-surface, Field));
+    border: var(--slotted-control-border-width, 1px) solid
+      var(--slotted-time-field-border-color, var(--slotted-control-border-color, ButtonBorder));
+    border-radius: var(--slotted-time-field-radius, var(--slotted-control-radius, 4px));
+    box-shadow: var(--slotted-time-field-shadow, var(--slotted-control-shadow, none));
+    box-sizing: border-box;
+    color: var(--slotted-time-field-color, var(--slotted-text, CanvasText));
+    display: flex;
+    font-family: var(--slotted-control-font-family, system-ui, sans-serif);
+    font-size: var(--_font-size);
+    gap: var(--_gap);
+    inline-size: 100%;
+    min-block-size: var(--_height);
+    min-inline-size: 0;
+    padding-inline: var(--_padding-inline);
+    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),
+      box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);
+  }
+
+  /**
+   * The button inside the frame is inset by its own gutter less than the value
+   * is, so the *glyph* ends the same distance from the border as the digits
+   * begin from it — the arithmetic `text-field` records, holding at every step
+   * and every density.
+   */
+  [data-ui='time-field'][data-part='root']:has(> [data-part='clear']:last-child) {
+    padding-inline-end: max(
+      0px,
+      calc(var(--_padding-inline) - (var(--_action-size) - var(--_icon-size)) / 2)
+    );
+  }
+
+  /**
+   * The row of segments. It takes the whole of the space the adornments leave
+   * and puts the time at the reading edge, so an empty field and a full one
+   * start in the same place.
+   */
+  [data-ui='time-field'] [data-part='segments'] {
+    align-items: center;
+    /* It says what it is before it is pressed. A time is typed, so the pointer
+       over it is a caret — and the row rather than only the segments, because
+       the gap between two fields is part of the control the reader aims at. */
+    cursor: text;
+    display: flex;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    /* One line, whatever the frame's width: the row is clipped at the frame's
+       edge, as a text input clips a long value, and a field the reader steps
+       into is scrolled into view. The rule `date-field` records. */
+    overflow: hidden;
+    /* Digits that do not shift under one another as a value is typed over, and
+       four fields that keep their columns while the reader steps. */
+    font-variant-numeric: tabular-nums;
+
+    /**
+     * The sequence runs left to right in every document, because a clock time
+     * is a numeric run and that is how the bidirectional algorithm renders one:
+     * `Intl.DateTimeFormat` writes `٠٢:٣٠ م` for `ar-EG` with the hour leftmost,
+     * and it hands the parts back in that same order for every locale it knows.
+     *
+     * A flex row that took the paragraph's direction reversed them, and the
+     * right-to-left capture read `30:14` — a time nobody wrote, in a field that
+     * had done nothing wrong but inherit. The isolation keeps the decision
+     * inside the row, so the frame around it still reads with the document.
+     */
+    direction: ltr;
+    unicode-bidi: isolate;
+  }
+
+  /**
+   * The row is still placed with the document, though: a right-to-left form
+   * puts its values at the right edge, and a row whose own direction is now
+   * left-to-right would otherwise start at the left of a full-width box.
+   *
+   * `:dir()` rather than an ancestor `[dir]` selector, because the row's own
+   * `direction` above does not change what `:dir()` answers — that comes from
+   * the document — which is the reason every other family in this library
+   * reaches for it too.
+   */
+  [data-ui='time-field'] [data-part='segments']:dir(rtl) {
+    justify-content: flex-end;
+  }
+
+  /**
+   * One field of the time.
+   *
+   * Its width is stated rather than measured, so the row does not move when a
+   * single digit becomes two: `1ch` is the advance of a digit in a tabular
+   * face, and `--_digits` is how many the field can hold.
+   */
+  [data-ui='time-field'] [data-part='segment'] {
+    --_digits: 2;
+
+    background-color: transparent;
+    border-radius: var(--slotted-time-field-segment-radius, var(--slotted-radius-xs, 2px));
+    box-sizing: content-box;
+    /* The caret belongs to no segment: the whole field is replaced by typing,
+       and a caret between two digits would offer an edit the family refuses. */
+    caret-color: transparent;
+    color: inherit;
+    cursor: text;
+    font: inherit;
+    /* A field never shrinks under its digits: a row narrower than its value
+       overflows and is clipped at the frame, the way an input clips text. A
+       flex item shrunk to its minimum drew `mm` as `mr`. */
+    flex: 0 0 auto;
+    min-inline-size: var(--slotted-time-field-segment-min-inline-size, calc(var(--_digits) * 1ch));
+    padding-inline: var(
+      --slotted-time-field-segment-padding-inline,
+      var(--slotted-space-1, 0.125rem)
+    );
+    text-align: center;
+    transition:
+      background-color var(--slotted-control-transition-duration)
+        var(--slotted-control-transition-easing),
+      color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);
+    /* A spin button is operated by keys and by the pointer; nothing in it is
+       text a reader selects, and a drag across it would look like one. */
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  /**
+   * The day period holds a word rather than digits, so it is sized by what it
+   * holds with a floor under it. `es-MX` writes `a.m.`, `en-US` writes `AM`
+   * and a locale may write more; a box cut to two characters would clip the
+   * first of those, and `max-content` with a floor clips none of them. The
+   * digit face is dropped here for the same reason: tabular figures inside a
+   * word letter-space it.
+   */
+  [data-ui='time-field'] [data-part='segment'][data-field='dayPeriod'] {
+    font-variant-numeric: normal;
+    min-inline-size: var(--slotted-time-field-period-min-inline-size, 2ch);
+    /* An abbreviation, in whatever case the locale itself writes it. */
+    text-transform: none;
+    white-space: nowrap;
+  }
+
+  /**
+   * A field with no value yet. It is muted rather than hidden, because the
+   * placeholder is the format — `hh:mm` in the reader's own words rather than
+   * in English — and a time being typed has to keep saying what is missing.
+   */
+  [data-ui='time-field'] [data-part='segment'][data-placeholder] {
+    color: var(--slotted-time-field-placeholder-color, var(--slotted-text-muted, GrayText));
+  }
+
+  /**
+   * The separator the locale writes. It is decoration: the group's accessible
+   * name already carries the whole time in words, so a screen reader reading
+   * "colon" between two numbers would be reading punctuation aloud.
+   */
+  [data-ui='time-field'] [data-part='literal'] {
+    color: var(--slotted-time-field-literal-color, var(--slotted-text-muted, GrayText));
+    flex: 0 0 auto;
+    /* Its own bidi run: a colon between two numbers takes the paragraph's
+       direction, and in a right-to-left document the time read back to front. */
+    unicode-bidi: plaintext;
+    user-select: none;
+  }
+
+  /* ── The relative expression ──────────────────────────────────────────
+   *
+   * The one entry no surveyed implementation has: a time written as a duration
+   * from now, resolved in view before it is accepted. It replaces the segments
+   * rather than sitting beside them, because both of them writing one value
+   * would be two controls disagreeing about which is the time.
+   *
+   * It is a real `input`, so a mobile keyboard opens and the platform supplies
+   * every text-editing key the reader already knows.
+   */
+  [data-ui='time-field'] [data-part='duration'] {
+    appearance: none;
+    background-color: transparent;
+    border: 0;
+    color: inherit;
+    flex: 1 1 auto;
+    font: inherit;
+    /* An expression is arithmetic, so its digits line up like the value's. */
+    font-variant-numeric: tabular-nums;
+    min-inline-size: 0;
+    outline: none;
+    padding: 0;
+
+    /**
+     * `+40m` is a left-to-right construct wherever it is typed: the sign leads,
+     * the unit follows the number, and the grammar is symbols rather than
+     * words. Left to the document it read `40m+` in the right-to-left capture.
+     */
+    direction: ltr;
+    unicode-bidi: isolate;
+  }
+
+  /* Left-to-right content in a right-to-left field still sits at the reading
+     edge, which is the treatment every form gives a phone number or an IBAN. */
+  [data-ui='time-field'] [data-part='duration']:dir(rtl) {
+    text-align: right;
+  }
+
+  [data-ui='time-field'] [data-part='duration']::placeholder {
+    color: var(--slotted-time-field-placeholder-color, var(--slotted-text-muted, GrayText));
+  }
+
+  /**
+   * What the expression resolves to, before anything commits.
+   *
+   * It is the answer rather than the question, so it takes the accent ink and
+   * the expression keeps the value's. The chevron between them is the mark the
+   * library already has for "and then"; it is direction-sensitive, so it turns
+   * with the document rather than pointing out of it.
+   */
+  [data-ui='time-field'] [data-part='preview'] {
+    /**
+     * One line box, not a flex row. The chevron sits *in* the line rather than
+     * beside it, which is the only way it can be aligned to the text at all —
+     * a flex box centres its children on the whole line box, and the letters
+     * do not live in the middle of that.
+     */
+    --_mark: 1cap;
+
+    color: var(--slotted-time-field-preview-color, var(--slotted-tone-accent-text));
+    display: block;
+    flex: 0 0 auto;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  /**
+   * The mark, on the text's own axis.
+   *
+   * Two things were wrong and only together: it was drawn at the control glyph
+   * size — sixteen pixels of chevron beside a nine-pixel capital, which is a
+   * control's mark standing in a sentence — and it was centred on the line box
+   * rather than on the band the letters occupy, so it read high. `1cap` is the
+   * size `status-indicator` already uses for a mark inside a line of text, and
+   * the `vertical-align` is the formula `docs/build-briefing.md` records under
+   * _Decisions already taken_: half the difference between the band and the
+   * mark, which lands the mark's centre on the middle of the band.
+   *
+   * The band is the midpoint of cap and x-height, which is the one `toast`
+   * chose after reading all three at four times the type size: `1cap` alone
+   * reads high, because every glyph in the scale overshoots a capital, and
+   * `1ex` alone reads low, because the mark then hangs below the descenders.
+   *
+   * The mark is the chevron the binding renders as the preview's first child,
+   * marked `directional`: it points along the reading direction, so the `icon`
+   * family turns it in a right-to-left context.
+   */
+  [data-ui='time-field'] [data-part='preview'] > [data-ui='icon'] {
+    --slotted-icon-size: var(--_mark);
+
+    margin-inline-end: var(--slotted-space-1, 0.125rem);
+    vertical-align: calc((((1cap + 1ex) / 2) - var(--_mark)) / 2);
+  }
+
+  /**
+   * A duration that ran past midnight. It resolves into a different day, and
+   * this library holds no day beside a time — so the preview changes tone and
+   * the family writes the day beside the time. Colour alone never says it:
+   * `docs/component-features.md` §2.5 refuses that, and a reader on a screen
+   * reader hears the same words the sighted reader sees.
+   */
+  [data-ui='time-field'] [data-part='preview'][data-crosses-midnight] {
+    color: var(--slotted-time-field-preview-next-color, var(--slotted-tone-warning-text));
+  }
+
+  /**
+   * While an expression is open the frame says so, because the control now
+   * takes text where a moment ago it took digits one field at a time. The
+   * border is the accent the preview is written in, so the two marks are one
+   * statement rather than two.
+   */
+  [data-ui='time-field'][data-part='root'][data-relative] {
+    border-color: var(
+      --slotted-time-field-relative-border-color,
+      var(--slotted-tone-accent-border)
+    );
+  }
+
+  /* ── Size ─────────────────────────────────────────────────────────────
+   *
+   * Three steps, matching the field the control sits in. A `size="sm"` field
+   * holding an `md` control is a field and a control disagreeing about one row.
+   */
+
+  [data-ui='time-field'][data-part='root'][data-size='sm'] {
+    --_font-size: var(--slotted-control-font-size-sm, 12px);
+    --_height: var(--slotted-control-height-sm, 30px);
+    --_padding-inline: var(--slotted-control-padding-inline-sm, 10px);
+    --_gap: var(--slotted-control-gap-sm, 6px);
+    --_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px));
+  }
+
+  [data-ui='time-field'][data-part='root'][data-size='md'] {
+    --_font-size: var(--slotted-control-font-size-md, 13px);
+    --_height: var(--slotted-control-height-md, 34px);
+    --_padding-inline: var(--slotted-control-padding-inline-md, 13px);
+    --_gap: var(--slotted-control-gap-md, 8px);
+    --_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));
+  }
+
+  [data-ui='time-field'][data-part='root'][data-size='lg'] {
+    --_font-size: var(--slotted-control-font-size-lg, 14px);
+    --_height: var(--slotted-control-height-lg, 38px);
+    --_padding-inline: var(--slotted-control-padding-inline-lg, 16px);
+    --_gap: var(--slotted-control-gap-lg, 8px);
+    --_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px));
+  }
+
+  /* ── Variant ──────────────────────────────────────────────────────────
+   *
+   * The three steps `text-field` set, so a form holding a name and a time
+   * shows one frame twice rather than two frames.
+   */
+
+  [data-ui='time-field'][data-part='root'][data-variant='subtle'] {
+    background-color: var(
+      --slotted-time-field-subtle-background,
+      var(--slotted-surface-sunken, Canvas)
+    );
+    border-color: var(
+      --slotted-time-field-subtle-border-color,
+      var(--slotted-border-subtle, ButtonBorder)
+    );
+  }
+
+  [data-ui='time-field'][data-part='root'][data-variant='plain'] {
+    background-color: transparent;
+    border-color: transparent;
+    border-radius: var(--slotted-radius-none, 0px);
+    box-shadow: none;
+  }
+
+  /* ── Adornments ───────────────────────────────────────────────────────
+   *
+   * Named for the reading direction rather than for a side, and quieter than
+   * the value: an adornment annotates, and a reader looking for the time
+   * should not have to step over it.
+   */
+  [data-ui='time-field'] > [data-part='start'],
+  [data-ui='time-field'] > [data-part='end'] {
+    --slotted-icon-size: var(--_icon-size);
+
+    align-items: center;
+    color: var(--slotted-time-field-adornment-color, var(--slotted-text-muted, GrayText));
+    display: inline-flex;
+    flex: 0 0 auto;
+    gap: var(--slotted-space-2, 0.25rem);
+    line-height: 1;
+    unicode-bidi: plaintext;
+  }
+
+  [data-ui='time-field'] > [data-part='start'] > svg,
+  [data-ui='time-field'] > [data-part='end'] > svg {
+    block-size: var(--_icon-size);
+    inline-size: var(--_icon-size);
+  }
+
+  /* ── The clear button ─────────────────────────────────────────────────
+   *
+   * A real button, with the `Glyph` element the binding renders rather than a
+   * character, and held to the target minimum by the family rather than by the
+   * page.
+   */
+  [data-ui='time-field'] > [data-part='clear'] {
+    align-items: center;
+    appearance: none;
+    background-color: transparent;
+    block-size: var(--_action-size);
+    border: 0;
+    border-radius: var(--slotted-time-field-radius, var(--slotted-control-radius, 4px));
+    color: var(--slotted-time-field-action-color, var(--slotted-text-muted, GrayText));
+    cursor: pointer;
+    display: inline-flex;
+    flex: 0 0 auto;
+    inline-size: var(--_action-size);
+    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. At `sm` with `dense` the whole
+   * control is 24 pixels tall — the WCAG 2.2 minimum — so nothing drawn inside
+   * it can also be 24. This grows the target back in both axes and leaves a
+   * larger one alone, which is the correction `docs/token-foundation.md`
+   * leaves to the family rather than to the theme.
+   */
+  [data-ui='time-field'] > [data-part='clear']::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. After an end
+     adornment — a picker's trigger — it does not reach back across it. */
+  @media (pointer: coarse) {
+    [data-ui='time-field'] > [data-part='clear']::after {
+      inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
+    }
+
+    [data-ui='time-field'] > [data-part='end'] + [data-part='clear']::after {
+      inset-inline-start: 0;
+    }
+  }
+
+  /* The cross is drawn at the control's own icon step. */
+  [data-ui='time-field'] > [data-part='clear'] {
+    --slotted-icon-size: var(--_icon-size);
+  }
+
+  [data-ui='time-field'] > [data-part='clear']:hover:not(:disabled):not([data-disabled]) {
+    background-color: var(
+      --slotted-time-field-action-hover-background,
+      var(--slotted-tone-secondary-subtle-hover)
+    );
+  }
+
+  [data-ui='time-field'] > [data-part='clear']:active:not(:disabled):not([data-disabled]) {
+    background-color: var(
+      --slotted-time-field-action-active-background,
+      var(--slotted-tone-secondary-subtle-active)
+    );
+  }
+
+  /**
+   * The button carries its own ring rather than borrowing the frame's. Tabbing
+   * from the last segment to the clear button has to move something visible,
+   * and a ring around the whole frame would sit still while focus moved inside
+   * it.
+   */
+  [data-ui='time-field'] > [data-part='clear']: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);
+  }
+
+  /* ── States ───────────────────────────────────────────────────────────
+   *
+   * Written strongest last, and each weaker one guarded against every stronger
+   * one it can meet, which is the order `STATE_PRECEDENCE` sets.
+   */
+
+  [data-ui='time-field'][data-part='root']:hover:not([data-disabled]):not([data-readonly]):not(
+      [data-invalid]
+    ) {
+    border-color: var(--slotted-time-field-hover-border-color, var(--slotted-tone-accent-border));
+  }
+
+  [data-ui='time-field'][data-part='root'][data-variant='subtle']:hover:not([data-disabled]):not(
+      [data-readonly]
+    ):not([data-invalid]) {
+    background-color: var(
+      --slotted-time-field-subtle-hover-background,
+      var(--slotted-tone-secondary-subtle-hover)
+    );
+  }
+
+  [data-ui='time-field'][data-part='root'][data-variant='plain']:hover:not([data-disabled]):not(
+      [data-readonly]
+    ):not([data-invalid]) {
+    background-color: var(
+      --slotted-time-field-plain-hover-background,
+      var(--slotted-tone-secondary-subtle-hover)
+    );
+    border-color: transparent;
+  }
+
+  /**
+   * Focus is two marks and they answer two different questions.
+   *
+   * The frame's ring says the control has the reader's attention, exactly as
+   * every other control in the library says it. The band on one segment says
+   * which field a key will move, and no ring can say that: a second outline
+   * two pixels inside the first would be two rings nested, and at `dense`
+   * there is not room for two.
+   *
+   * Both are `:focus` and not `:focus-visible`, which is the rule `date-field`
+   * paid for: a browser matches `:focus-visible` on a text input for a pointer
+   * press as well as for a Tab, and refuses it for a `div` a pointer focused.
+   * Every segment here is a `div`, so a clicked field would look exactly as it
+   * had before the press. The expression is an `input` and takes the frame's
+   * ring on `:focus-within` for the same reason from the other side.
+   */
+  [data-ui='time-field'][data-part='root']:has([data-part='segment']:focus),
+  [data-ui='time-field'][data-part='root']:has([data-part='duration']:focus) {
+    box-shadow: var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px)
+      var(--slotted-focus-ring-color, Highlight);
+    outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
+    outline-offset: var(--slotted-focus-ring-offset, 2px);
+  }
+
+  /**
+   * The ring of a control whose box is not its own is drawn inside that box,
+   * the way the inner controls draw theirs inside the frame: two pixels past
+   * the control is two pixels over the next row's rule. No lift either — a
+   * shadow that appears only under focus is a cell that changes size when it
+   * is used.
+   */
+  [data-ui='time-field'][data-part='root'][data-variant='plain']:has([data-part='segment']:focus),
+  [data-ui='time-field'][data-part='root'][data-variant='plain']:has([data-part='duration']:focus) {
+    box-shadow: none;
+    outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
+  }
+
+  [data-ui='time-field'] [data-part='segment']:focus {
+    background-color: var(
+      --slotted-time-field-segment-focus-background,
+      var(--slotted-tone-accent-solid)
+    );
+    color: var(--slotted-time-field-segment-focus-color, var(--slotted-tone-accent-on-solid));
+    /* The frame already draws the ring, so the segment does not draw a second. */
+    outline: none;
+  }
+
+  /**
+   * Invalid outranks hover and is written after it: a control reporting an
+   * error should not stop looking wrong because the pointer is over it. The
+   * ring is retargeted rather than repainted, so the frame's outline, the
+   * shadow under it and the ring on the clear button all move at once.
+   */
+  [data-ui='time-field'][data-part='root'][data-invalid] {
+    --slotted-focus-ring-color: var(
+      --slotted-time-field-invalid-focus-ring-color,
+      var(--slotted-focus-ring-color-invalid, Highlight)
+    );
+    --_invalid-edge-width: var(
+      --slotted-time-field-invalid-edge-width,
+      var(--slotted-control-invalid-edge-width, 1px)
+    );
+    --_invalid-edge-color: var(
+      --slotted-time-field-invalid-border-color,
+      var(--slotted-tone-danger-border)
+    );
+    --_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);
+
+    border-color: var(--slotted-time-field-invalid-border-color, var(--slotted-tone-danger-border));
+    /*
+     * Width as well as colour (WCAG 1.4.1), the edge `text-field` draws: in
+     * `high-contrast` the danger border is the resting edge's black. The line
+     * is a shadow inside the border, so neither box nor text moves, and it
+     * takes the resting lift's place.
+     */
+    box-shadow: var(--_invalid-edge);
+  }
+
+  [data-ui='time-field'][data-part='root'][data-invalid]:has([data-part='segment']:focus),
+  [data-ui='time-field'][data-part='root'][data-invalid]:has([data-part='duration']:focus) {
+    box-shadow:
+      var(--_invalid-edge),
+      var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px)
+        var(--slotted-focus-ring-color, Highlight);
+  }
+
+  [data-ui='time-field'][data-part='root'][data-variant='plain'][data-invalid]:has(
+      [data-part='segment']:focus
+    ),
+  [data-ui='time-field'][data-part='root'][data-variant='plain'][data-invalid]:has(
+      [data-part='duration']:focus
+    ) {
+    /* The ring lies inside the box here, over the border and an edge as wide as
+       it; the edge reaches past the ring. */
+    box-shadow: inset 0 0 0
+      calc(
+        var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) +
+          var(--_invalid-edge-width)
+      )
+      var(--_invalid-edge-color);
+  }
+
+  /*
+   * Forced colours remove every box shadow, and the edge with them. The
+   * width comes back as an outline inside the border, and a focused invalid
+   * control draws its ring double, which a valid ring is not.
+   */
+  @media (forced-colors: active) {
+    [data-ui='time-field'][data-part='root'][data-invalid] {
+      outline: var(--_invalid-edge-width) solid CanvasText;
+      outline-offset: calc(
+        -1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width))
+      );
+    }
+
+    [data-ui='time-field'][data-part='root'][data-invalid]:has([data-part='segment']:focus),
+    [data-ui='time-field'][data-part='root'][data-invalid]:has([data-part='duration']:focus) {
+      outline: calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double
+        var(--slotted-focus-ring-color, Highlight);
+      outline-offset: var(--slotted-focus-ring-offset, 2px);
+    }
+
+    [data-ui='time-field'][data-part='root'][data-variant='plain'][data-invalid]:has(
+        [data-part='segment']:focus
+      ),
+    [data-ui='time-field'][data-part='root'][data-variant='plain'][data-invalid]:has(
+        [data-part='duration']:focus
+      ) {
+      outline: calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double
+        var(--slotted-focus-ring-color, Highlight);
+      outline-offset: calc(
+        -1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width))
+      );
+    }
+  }
+
+  /**
+   * Read-only stays focusable, readable and copyable, and must not be
+   * mistakable for disabled: the value is still real and still submitted. The
+   * ground says "not yours to change" and the ink says nothing at all.
+   */
+  [data-ui='time-field'][data-part='root'][data-readonly],
+  [data-ui='time-field'][data-part='root'][data-readonly] [data-part='segments'],
+  [data-ui='time-field'][data-part='root'][data-readonly] [data-part='segment'] {
+    cursor: default;
+  }
+
+  [data-ui='time-field'][data-part='root'][data-readonly] {
+    background-color: var(
+      --slotted-time-field-readonly-background,
+      var(--slotted-tone-secondary-subtle-hover)
+    );
+  }
+
+  /**
+   * Muted to the colour the theme measures rather than faded by opacity: a
+   * time nobody can read is a field nobody can check, and a disabled form
+   * still has to say what it holds.
+   */
+  [data-ui='time-field'][data-part='root'][data-disabled] {
+    background-color: var(
+      --slotted-time-field-disabled-background,
+      var(--slotted-disabled-background)
+    );
+    border-color: var(--slotted-time-field-disabled-border-color, var(--slotted-disabled-border));
+    /* Nothing a person cannot reach is lifted off the page. */
+    box-shadow: none;
+    color: var(--slotted-time-field-disabled-color, var(--slotted-disabled-foreground));
+    cursor: not-allowed;
+  }
+
+  [data-ui='time-field'][data-part='root'][data-disabled] [data-part='segments'],
+  [data-ui='time-field'][data-part='root'][data-disabled] [data-part='segment'] {
+    cursor: not-allowed;
+  }
+
+  [data-ui='time-field'][data-part='root'][data-disabled] > [data-part='start'],
+  [data-ui='time-field'][data-part='root'][data-disabled] > [data-part='end'],
+  [data-ui='time-field'][data-part='root'][data-disabled] [data-part='literal'],
+  [data-ui='time-field'][data-part='root'][data-disabled] [data-part='segment'][data-placeholder] {
+    color: var(--slotted-disabled-foreground);
+  }
+
+  @media (forced-colors: active) {
+    /* A transparent border has no system colour to be remapped to, so the
+       `plain` control would lose its only edge where an edge matters most. */
+    [data-ui='time-field'][data-part='root'][data-variant='plain'] {
+      border-color: ButtonBorder;
+    }
+
+    /* The preview's two tones both map to the same system ink, so the border
+       is what is left to say the control is in a different mode. */
+    [data-ui='time-field'][data-part='root'][data-relative] {
+      border-color: Highlight;
+    }
+  }
+}