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

package/src/datetime-field/datetime-field.css

@@ -0,0 +1,850 @@
+@layer slotted.components {
+  /**
+   * ── The segmented datetime control ──────────────────────────────────────
+   *
+   * One frame, one `role="group"` and one value, holding all seven fields the
+   * two halves have between them. It is not a `date-field` beside a
+   * `time-field`: two nested family roots would be two groups, two values and
+   * two segment states, and the order of the halves and the literal between
+   * them come from one combined `Intl.DateTimeFormat` that neither of them can
+   * see. The frame carries no role of its own — the APG's spin-button example
+   * names the group as what tells a screen-reader user that the buttons are
+   * one value.
+   *
+   * There is no `input[type=datetime-local]` under any of it, for the reason
+   * both siblings refuse their own native input: the browser's 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 `YYYY-MM-DDTHH:mm:ss`.
+   */
+  [data-ui='datetime-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 datetime 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-datetime-field-icon-size-min, 14px);
+    --_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));
+
+    /**
+     * The distance between the two halves, and the only place in the row that
+     * is wider than a segment's own padding. Seven fields in one line read as
+     * one long number without it; with it they read as a date and a time, which
+     * is what the value is.
+     */
+    --_half-gap: var(--slotted-datetime-field-half-gap, var(--slotted-space-3, 0.375rem));
+
+    /* 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-datetime-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-datetime-field-background,
+      var(--slotted-control-surface, Field)
+    );
+    border: var(--slotted-control-border-width, 1px) solid
+      var(--slotted-datetime-field-border-color, var(--slotted-control-border-color, ButtonBorder));
+    border-radius: var(--slotted-datetime-field-radius, var(--slotted-control-radius, 4px));
+    box-shadow: var(--slotted-datetime-field-shadow, var(--slotted-control-shadow, none));
+    box-sizing: border-box;
+    color: var(--slotted-datetime-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);
+    /* The row inside can take two lines, so the frame's height is a floor and
+       not a fixed measure, and the padding block keeps the two lines off the
+       border rather than letting them sit against it. */
+    padding-block: var(--slotted-datetime-field-padding-block, var(--slotted-space-1, 0.125rem));
+    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='datetime-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 halves. It takes the whole of the space the adornments leave and
+   * puts the value at the reading edge, so an empty field and a full one start
+   * in the same place.
+   *
+   * **It is one line, at every width.** Seven fields do not fit a narrow
+   * container in every locale; the row used to wrap between its two halves,
+   * and a control two lines tall broke every row it stood in — a filter row,
+   * a table cell, a toolbar — and read as a different control from the field
+   * beside it. It is now clipped at the frame's edge, the way a text input
+   * clips a value longer than itself, and the half the reader steps into is
+   * scrolled into view, because a clipped box is still a scroll container to
+   * the focus. Each half stays one flex item, so the value never breaks
+   * inside a date or inside a time.
+   */
+  [data-ui='datetime-field'] [data-part='segments'] {
+    align-items: center;
+    column-gap: var(--_half-gap);
+    /* It says what it is before it is pressed. A datetime 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;
+    overflow: hidden;
+  }
+
+  /**
+   * One half, and the reason the row can only break in one place.
+   *
+   * The sequence inside runs left to right in every document, because a date
+   * and a clock time are both numeric runs and that is how the bidirectional
+   * algorithm renders one: `Intl.DateTimeFormat` writes `٠٢:٣٠ م` for `ar-EG`
+   * with the hour leftmost, and hands the parts back in that 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 but inherit. The isolation keeps the decision
+   * inside the half, so the frame around it still reads with the document.
+   */
+  [data-ui='datetime-field'] [data-part='half'] {
+    align-items: center;
+    direction: ltr;
+    display: flex;
+    flex: 0 0 auto;
+    /* Digits that do not shift under one another as a value is typed over, and
+       seven fields that keep their columns while the reader steps. */
+    font-variant-numeric: tabular-nums;
+    unicode-bidi: isolate;
+  }
+
+  /**
+   * The halves are still placed with the document, though: a right-to-left form
+   * puts its values at the right edge, and a row whose halves are now
+   * left-to-right would otherwise start at the left of a full-width box.
+   *
+   * `:dir()` rather than an ancestor `[dir]` selector, because the halves' 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='datetime-field'] [data-part='segments']:dir(rtl) {
+    justify-content: flex-end;
+  }
+
+  /**
+   * One field of the value.
+   *
+   * 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='datetime-field'] [data-part='segment'] {
+    --_digits: 2;
+
+    background-color: transparent;
+    border-radius: var(--slotted-datetime-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-datetime-field-segment-min-inline-size,
+      calc(var(--_digits) * 1ch)
+    );
+    padding-inline: var(
+      --slotted-datetime-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 one field with four digits rather than two. Stated here rather than in
+     the markup, so a year is the same width in both bindings and the harness. */
+  [data-ui='datetime-field'] [data-part='segment'][data-field='year'] {
+    --_digits: 4;
+  }
+
+  /**
+   * 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 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='datetime-field'] [data-part='segment'][data-field='dayPeriod'] {
+    font-variant-numeric: normal;
+    min-inline-size: var(--slotted-datetime-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 — `dd/mm/aaaa hh:mm` in the reader's own words
+   * rather than in English — and a value being typed has to keep saying what
+   * is missing.
+   */
+  [data-ui='datetime-field'] [data-part='segment'][data-placeholder] {
+    color: var(--slotted-datetime-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 value in words, so a screen reader reading
+   * "slash" between two numbers would be reading punctuation aloud.
+   */
+  [data-ui='datetime-field'] [data-part='literal'] {
+    color: var(--slotted-datetime-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 literal the locale writes *between* the halves — a comma in `pt-BR`,
+   * `en-US` and `de-DE`, a bare space in `fr-FR`, `ja-JP` and `zh-CN`. It sits
+   * at the end of the first half rather
+   * than between the two, so a wrap leaves it at the end of its line, which is
+   * where a comma in a sentence goes. A boundary the locale writes as
+   * whitespace is not drawn at all, and the row's column gap separates the
+   * halves instead.
+   */
+  [data-ui='datetime-field'] [data-part='literal'][data-boundary] {
+    margin-inline-end: 0;
+  }
+
+  /* ── The relative expression ──────────────────────────────────────────
+   *
+   * The entry no surveyed implementation has, widened here by two unit letters:
+   * `+2d` and `+1w` are a datetime 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 datetime.
+   *
+   * It is a real `input`, so a mobile keyboard opens and the platform supplies
+   * every text-editing key the reader already knows.
+   */
+  [data-ui='datetime-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;
+
+    /**
+     * `+2d` 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 `2d+` 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='datetime-field'] [data-part='duration']:dir(rtl) {
+    text-align: right;
+  }
+
+  [data-ui='datetime-field'] [data-part='duration']::placeholder {
+    color: var(--slotted-datetime-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='datetime-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-datetime-field-preview-color, var(--slotted-tone-accent-text));
+    display: block;
+    flex: 0 0 auto;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+
+    /**
+     * The preview is a whole datetime in words and digits — `12 set, 14:40` —
+     * rather than the single numeric run `time-field` shows, so it is laid out
+     * by its own content and not by the paragraph around it. Left to the
+     * document, the right-to-left capture read `set, 14:40 12`: three runs
+     * reordered, and a date nobody wrote. `plaintext` gives an Arabic preview
+     * the same courtesy from the other side.
+     */
+    unicode-bidi: plaintext;
+  }
+
+  /**
+   * The mark, on the text's own axis. `1cap` is the size a mark inside a line
+   * of text takes, 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,
+   * chosen after all three were read at four times the type size.
+   *
+   * 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='datetime-field'] [data-part='preview'] > [data-ui='icon'] {
+    --slotted-icon-size: var(--_mark);
+
+    /**
+     * The gap is on both sides rather than on the end alone. The preview's own
+     * direction is resolved from its content — `12 set, 14:40` reads
+     * left-to-right, `15:20` has no strong character and takes the paragraph's
+     * — so which side of the mark the words land on is not known here. A single
+     * end margin left the chevron flush against the digits in exactly the row
+     * that had no strong character to state a direction with.
+     */
+    margin-inline: var(--slotted-space-1, 0.125rem);
+    vertical-align: calc((((1cap + 1ex) / 2) - var(--_mark)) / 2);
+  }
+
+  /**
+   * A duration that landed on a different day.
+   *
+   * `time-field` paints this in the warning tone, because a `PlainTime` has no
+   * day and the crossing is a fact the reader has to be warned about. Here the
+   * day is part of the value: `+2d` is *supposed* to move it, and a warning
+   * every time the reader asks for one would be crying wolf. What the preview
+   * does instead is say the date out loud — the family writes it into the
+   * preview whenever it differs from today — and this rule only lifts the date
+   * out of the surrounding time so the eye lands on the part that moved.
+   */
+  [data-ui='datetime-field'] [data-part='preview'][data-rolls-day] > [data-part='preview-date'] {
+    color: var(--slotted-datetime-field-preview-day-color, var(--slotted-tone-accent-text));
+    font-weight: var(--slotted-font-weight-semibold, 600);
+  }
+
+  /**
+   * 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='datetime-field'][data-part='root'][data-relative] {
+    border-color: var(
+      --slotted-datetime-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='datetime-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='datetime-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='datetime-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 datetime
+   * shows one frame twice rather than two frames.
+   */
+
+  [data-ui='datetime-field'][data-part='root'][data-variant='subtle'] {
+    background-color: var(
+      --slotted-datetime-field-subtle-background,
+      var(--slotted-surface-sunken, Canvas)
+    );
+    border-color: var(
+      --slotted-datetime-field-subtle-border-color,
+      var(--slotted-border-subtle, ButtonBorder)
+    );
+  }
+
+  [data-ui='datetime-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 datetime
+   * should not have to step over it.
+   */
+  [data-ui='datetime-field'] > [data-part='start'],
+  [data-ui='datetime-field'] > [data-part='end'] {
+    --slotted-icon-size: var(--_icon-size);
+
+    align-items: center;
+    color: var(--slotted-datetime-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='datetime-field'] > [data-part='start'] > svg,
+  [data-ui='datetime-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. It empties both halves: half a value is not a value this family
+   * holds.
+   */
+  [data-ui='datetime-field'] > [data-part='clear'] {
+    align-items: center;
+    appearance: none;
+    background-color: transparent;
+    block-size: var(--_action-size);
+    border: 0;
+    border-radius: var(--slotted-datetime-field-radius, var(--slotted-control-radius, 4px));
+    color: var(--slotted-datetime-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='datetime-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='datetime-field'] > [data-part='clear']::after {
+      inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
+    }
+
+    [data-ui='datetime-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='datetime-field'] > [data-part='clear'] {
+    --slotted-icon-size: var(--_icon-size);
+  }
+
+  [data-ui='datetime-field'] > [data-part='clear']:hover:not(:disabled):not([data-disabled]) {
+    background-color: var(
+      --slotted-datetime-field-action-hover-background,
+      var(--slotted-tone-secondary-subtle-hover)
+    );
+  }
+
+  [data-ui='datetime-field'] > [data-part='clear']:active:not(:disabled):not([data-disabled]) {
+    background-color: var(
+      --slotted-datetime-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='datetime-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='datetime-field'][data-part='root']:hover:not([data-disabled]):not([data-readonly]):not(
+      [data-invalid]
+    ):not([data-incomplete]) {
+    border-color: var(
+      --slotted-datetime-field-hover-border-color,
+      var(--slotted-tone-accent-border)
+    );
+  }
+
+  [data-ui='datetime-field'][data-part='root'][data-variant='subtle']:hover:not(
+      [data-disabled]
+    ):not([data-readonly]):not([data-invalid]) {
+    background-color: var(
+      --slotted-datetime-field-subtle-hover-background,
+      var(--slotted-tone-secondary-subtle-hover)
+    );
+  }
+
+  [data-ui='datetime-field'][data-part='root'][data-variant='plain']:hover:not([data-disabled]):not(
+      [data-readonly]
+    ):not([data-invalid]) {
+    background-color: var(
+      --slotted-datetime-field-plain-hover-background,
+      var(--slotted-tone-secondary-subtle-hover)
+    );
+    border-color: transparent;
+  }
+
+  /**
+   * One half written and the other empty.
+   *
+   * It is not `invalid`: nothing the reader wrote is wrong, and a form that
+   * shouted at a half-typed value would shout at every value on the way in. It
+   * is not silence either — a date sitting above an empty time is exactly the
+   * state a reader walks away from, and G3 of the inventory is that walk. So
+   * the frame takes the warning border, one tone short of the danger the
+   * refused value gets, and only once the reader has left the control: while a
+   * segment inside still has focus they are mid-entry and there is nothing to
+   * report yet.
+   *
+   * It sits under `invalid` and above `hover` in the precedence order, and each
+   * of the two is guarded by specificity rather than by source order.
+   *
+   * **The tone is the second signal here, not the first.** The high-contrast
+   * scheme collapses every tone border to black — the theme's decision, and the
+   * one `invalid` already lives with — so a state carried by colour alone would
+   * have nothing left to say there. It is not carried by colour: the missing
+   * half is drawing its placeholder, in the reader's own words, beside a half
+   * that is drawing digits. That contrast is shape and it survives every scheme,
+   * forced colours, and a reader who cannot tell amber from grey, which is what
+   * `docs/component-features.md` §2.5 asks for. The border is what makes the
+   * whole control legible at a glance from across a long form.
+   *
+   * A broken border was drawn here instead and read as an alarm rather than a
+   * reminder — louder at rest than `invalid` is, for a state that is weaker
+   * than it.
+   */
+  [data-ui='datetime-field'][data-part='root'][data-incomplete]:not([data-disabled]):not(
+      [data-readonly]
+    ):not([data-invalid]):not(:focus-within) {
+    border-color: var(
+      --slotted-datetime-field-incomplete-border-color,
+      var(--slotted-tone-warning-border)
+    );
+  }
+
+  /**
+   * 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 the same way from the other side.
+   */
+  [data-ui='datetime-field'][data-part='root']:has([data-part='segment']:focus),
+  [data-ui='datetime-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='datetime-field'][data-part='root'][data-variant='plain']:has(
+      [data-part='segment']:focus
+    ),
+  [data-ui='datetime-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='datetime-field'] [data-part='segment']:focus {
+    background-color: var(
+      --slotted-datetime-field-segment-focus-background,
+      var(--slotted-tone-accent-solid)
+    );
+    color: var(--slotted-datetime-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 incomplete and is written after both: a control
+   * reporting an error should not stop looking wrong because the pointer is
+   * over it, and a value a bound refuses is wrong whether or not it is whole.
+   * 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='datetime-field'][data-part='root'][data-invalid] {
+    --slotted-focus-ring-color: var(
+      --slotted-datetime-field-invalid-focus-ring-color,
+      var(--slotted-focus-ring-color-invalid, Highlight)
+    );
+    --_invalid-edge-width: var(
+      --slotted-datetime-field-invalid-edge-width,
+      var(--slotted-control-invalid-edge-width, 1px)
+    );
+    --_invalid-edge-color: var(
+      --slotted-datetime-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-datetime-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='datetime-field'][data-part='root'][data-invalid]:has([data-part='segment']:focus),
+  [data-ui='datetime-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='datetime-field'][data-part='root'][data-variant='plain'][data-invalid]:has(
+      [data-part='segment']:focus
+    ),
+  [data-ui='datetime-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='datetime-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='datetime-field'][data-part='root'][data-invalid]:has([data-part='segment']:focus),
+    [data-ui='datetime-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='datetime-field'][data-part='root'][data-variant='plain'][data-invalid]:has(
+        [data-part='segment']:focus
+      ),
+    [data-ui='datetime-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='datetime-field'][data-part='root'][data-readonly],
+  [data-ui='datetime-field'][data-part='root'][data-readonly] [data-part='segments'],
+  [data-ui='datetime-field'][data-part='root'][data-readonly] [data-part='segment'] {
+    cursor: default;
+  }
+
+  [data-ui='datetime-field'][data-part='root'][data-readonly] {
+    background-color: var(
+      --slotted-datetime-field-readonly-background,
+      var(--slotted-tone-secondary-subtle-hover)
+    );
+  }
+
+  /**
+   * Muted to the colour the theme measures rather than faded by opacity: a
+   * datetime nobody can read is a field nobody can check, and a disabled form
+   * still has to say what it holds.
+   */
+  [data-ui='datetime-field'][data-part='root'][data-disabled] {
+    background-color: var(
+      --slotted-datetime-field-disabled-background,
+      var(--slotted-disabled-background)
+    );
+    border-color: var(
+      --slotted-datetime-field-disabled-border-color,
+      var(--slotted-disabled-border)
+    );
+    /* Nothing a person cannot reach is lifted off the page. */
+    box-shadow: none;
+    color: var(--slotted-datetime-field-disabled-color, var(--slotted-disabled-foreground));
+    cursor: not-allowed;
+  }
+
+  [data-ui='datetime-field'][data-part='root'][data-disabled] [data-part='segments'],
+  [data-ui='datetime-field'][data-part='root'][data-disabled] [data-part='segment'] {
+    cursor: not-allowed;
+  }
+
+  [data-ui='datetime-field'][data-part='root'][data-disabled] > [data-part='start'],
+  [data-ui='datetime-field'][data-part='root'][data-disabled] > [data-part='end'],
+  [data-ui='datetime-field'][data-part='root'][data-disabled] [data-part='literal'],
+  [data-ui='datetime-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='datetime-field'][data-part='root'][data-variant='plain'] {
+      border-color: ButtonBorder;
+    }
+
+    /* Warning, accent and danger all map to the same system ink, so the two
+       modes that are told apart by tone need a second signal. The expression
+       borrows the highlight; the incomplete frame borrows the thicker border
+       the system reserves for something asking to be finished. */
+    [data-ui='datetime-field'][data-part='root'][data-relative] {
+      border-color: Highlight;
+    }
+
+    /* The broken line above is already shape rather than tone, so forced
+       colours need nothing added here; the rule is stated in the scheme block
+       and inherited. */
+  }
+}