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

package/src/currency-field/currency-field.css

@@ -0,0 +1,787 @@
+@layer slotted.components {
+  /**
+   * ── One amount, in one currency ────────────────────────────────────────
+   *
+   * The frame `number-field` established, around a control that holds money.
+   * The shape is the same because the reason is: a `spinbutton`, like a
+   * `textbox`, may hold only non-interactive presentational children, so the
+   * two steppers are siblings of the control inside a frame with no role.
+   *
+   * What this family paints that the sibling does not is the alignment. An
+   * amount is read from its last digit — a column of them is compared on the
+   * cents — and under cents-first entry the caret lives at that edge, so the
+   * value is set against the reading end unless a consumer says otherwise.
+   *
+   * Every rule keys on `data-ui` and `data-part`. The field around the control
+   * mirrors its state onto the frame rather than styling through, so a control
+   * used outside a field looks the same as one inside it.
+   */
+  [data-ui='currency-field'][data-part='root'] {
+    /**
+     * Type, height, inline padding, gap and glyph size all come from the
+     * control scales — the only ones the theme restates per density — so an
+     * amount 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);
+    /** The floor under the glyph scale at the dense step (SL3); a family token so a theme can retune it. */
+    --_icon-floor: var(--slotted-currency-field-icon-size-min, 14px);
+    --_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));
+    --_inner-size: var(--slotted-control-inner-size-md, 24px);
+
+    /**
+     * The stepper's cross measurement — the column's width when the two halves
+     * are stacked, and each button's width when they are split. The glyph plus
+     * a step of air on each side — the box every inner control in the library
+     * draws (R2) — capped at the inner size of a control at this step
+     * (`--slotted-control-inner-size-*`) and floored at the WCAG 2.2 minimum.
+     */
+    --_stepper-size: var(
+      --slotted-currency-field-stepper-size,
+      max(
+        var(--slotted-target-min, 24px),
+        min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, 0.25rem)), var(--_inner-size))
+      )
+    );
+
+    /**
+     * The split buttons are the inner controls `text-field` draws: the glyph
+     * plus a step of air, capped at the inner size, inset concentrically — the
+     * air beside a button equals the air above and below it, and its corner is
+     * the frame's less that air (docs/history/designs/2026-10-01-currency-field-reui-dossier.md § 3).
+     */
+    --_action-size: var(
+      --slotted-currency-field-action-size,
+      min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, 0.25rem)), var(--_inner-size))
+    );
+    --_inset: max(
+      0px,
+      calc(
+        (var(--_height) - 2 * var(--slotted-control-border-width, 1px) - var(--_action-size)) / 2
+      )
+    );
+    --_action-radius: max(
+      var(--slotted-radius-xs, 2px),
+      calc(var(--slotted-currency-field-radius, var(--slotted-control-radius, 4px)) - var(--_inset))
+    );
+
+    /**
+     * The stacked column is inset by the smallest step rather than by
+     * `--_inset`: two halves share the frame's height, and the larger air
+     * would leave each half 12 pixels tall at `md`.
+     */
+    --_column-inset: var(--slotted-space-1, 2px);
+    --_column-radius: max(
+      var(--slotted-radius-xs, 2px),
+      calc(
+        var(--slotted-currency-field-radius, var(--slotted-control-radius, 4px)) -
+          var(--_column-inset)
+      )
+    );
+
+    align-items: center;
+    background-color: var(
+      --slotted-currency-field-background,
+      var(--slotted-control-surface, Field)
+    );
+    /**
+     * The control step of the border scale rather than the strong one: a
+     * separator between two surfaces and the edge of a control are the same
+     * ratio and not the same weight.
+     */
+    border: var(--slotted-control-border-width, 1px) solid
+      var(--slotted-currency-field-border-color, var(--slotted-control-border-color, ButtonBorder));
+    border-radius: var(--slotted-currency-field-radius, var(--slotted-control-radius, 4px));
+    box-shadow: var(--slotted-currency-field-shadow, var(--slotted-control-shadow, none));
+    box-sizing: border-box;
+    color: var(--slotted-currency-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%;
+    /* A control in a grid track narrower than its intrinsic width has to shrink. */
+    min-inline-size: 0;
+    /* A minimum rather than a height: the frame is the taller of the control
+       scale and whatever a consumer put in an adornment. */
+    min-block-size: var(--_height);
+    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 control. It gives up its own frame entirely and keeps everything that
+   * makes it a text control: the value, the caret, the selection and every
+   * native attribute a consumer wrote.
+   *
+   * The figures are tabular without an axis to ask for it. An amount whose
+   * digits change width as they are typed over is an amount that moves under
+   * the reader's eye, and under cents-first entry every keystroke rewrites the
+   * whole string — so the setting matters more here than anywhere else.
+   */
+  [data-ui='currency-field'] > [data-part='input'] {
+    background-color: transparent;
+    /* The frame's border box, not its content box: on a coarse pointer the frame
+       is the touch target's height and the control it holds is too. Stretched
+       rather than a percentage of the frame, which is indefinite wherever the
+       frame is not stretched itself — a search field in a bar measured 17
+       pixels. The control paints no ground, so the frame's edge still shows. */
+    align-self: stretch;
+    margin-block: calc(var(--slotted-control-border-width, 1px) * -1);
+    border: 0;
+    color: inherit;
+    flex: 1 1 auto;
+    font: inherit;
+    font-variant-numeric: tabular-nums;
+    /* The frame draws the ring for it, so two rings never nest. */
+    outline: none;
+    padding: 0;
+    /* The intrinsic width of an `input` is about twenty characters, and a flex
+       item refuses to shrink below it without this. */
+    min-inline-size: 0;
+    text-overflow: ellipsis;
+    /**
+     * The value is its own bidi run, ordered by its own content.
+     *
+     * A formatted amount has no strong character in it — digits, a sign, two
+     * separators and a symbol are all weak or neutral — so in a right-to-left
+     * document the whole run takes the paragraph's direction and `-R$ 1.480,00`
+     * prints with the sign after the amount. `plaintext` resolves a run with no
+     * strong character to left-to-right, which is the order every numbering
+     * system writes a number in.
+     */
+    unicode-bidi: plaintext;
+  }
+
+  [data-ui='currency-field'] > [data-part='input']::placeholder {
+    color: var(--slotted-currency-field-placeholder-color, var(--slotted-text-muted, GrayText));
+    text-overflow: ellipsis;
+  }
+
+  /* ── Alignment ────────────────────────────────────────────────────────
+   *
+   * The two rules below are the only place this family names a side, and they
+   * name it because they have to. `unicode-bidi: plaintext` pins the value's
+   * run to left-to-right, and a logical `text-align` resolves against that
+   * pinned direction rather than against the document's — so `end` in a
+   * right-to-left form would align the amount to the left of its own frame
+   * while the reader's eye is at the right. There is no logical value that
+   * means "the document's end edge, whatever the run inside is doing".
+   */
+
+  [data-ui='currency-field'][data-align='end'] > [data-part='input'] {
+    text-align: right;
+  }
+
+  [data-ui='currency-field'][data-align='end']:dir(rtl) > [data-part='input'] {
+    text-align: left;
+  }
+
+  [data-ui='currency-field'][data-align='start'] > [data-part='input'] {
+    text-align: left;
+  }
+
+  [data-ui='currency-field'][data-align='start']:dir(rtl) > [data-part='input'] {
+    text-align: right;
+  }
+
+  /* ── Size ─────────────────────────────────────────────────────────────
+   *
+   * Three steps, matching the field the control sits in and every sibling
+   * control beside it. One library, one scale.
+   */
+
+  [data-ui='currency-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));
+    --_inner-size: var(--slotted-control-inner-size-sm, 22px);
+  }
+
+  [data-ui='currency-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));
+    --_inner-size: var(--slotted-control-inner-size-md, 24px);
+  }
+
+  [data-ui='currency-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));
+    --_inner-size: var(--slotted-control-inner-size-lg, 28px);
+  }
+
+  /* ── Variant ──────────────────────────────────────────────────────────
+   *
+   * The three every framed control in this library ships: `outline` takes the
+   * ground it is placed on, `subtle` sinks into the page, and `plain` shows
+   * nothing at rest, which is what a dense table of amounts needs.
+   */
+
+  [data-ui='currency-field'][data-part='root'][data-variant='subtle'] {
+    background-color: var(
+      --slotted-currency-field-subtle-background,
+      var(--slotted-surface-sunken, Canvas)
+    );
+    border-color: var(
+      --slotted-currency-field-subtle-border-color,
+      var(--slotted-border-subtle, ButtonBorder)
+    );
+  }
+
+  /* No edge, no lift, no ground and no corner of its own: the cell it sits in
+     is the box, the row is the ground, a cell has no corner, and the resting
+     shadow would draw the cell where there is none. */
+  [data-ui='currency-field'][data-part='root'][data-variant='plain'] {
+    background-color: transparent;
+    border-color: transparent;
+    border-radius: var(--slotted-radius-none, 0px);
+    box-shadow: none;
+  }
+
+  /**
+   * The one rule the theme cannot write for the family. A transparent border
+   * has no system colour to be remapped to, so the `plain` control would lose
+   * its only edge exactly where an edge matters most.
+   */
+  @media (forced-colors: active) {
+    [data-ui='currency-field'][data-part='root'][data-variant='plain'] {
+      border-color: ButtonBorder;
+    }
+  }
+
+  /* ── Adornments ───────────────────────────────────────────────────────
+   *
+   * A symbol beside the amount rather than inside it. A symbol that belongs
+   * inside the value arrives through `Intl` as part of the string the control
+   * holds, is selected with it, is copied with it and is parsed back out of
+   * it. This one is none of those things, which is the whole distinction.
+   */
+  [data-ui='currency-field'] > [data-part='start'],
+  [data-ui='currency-field'] > [data-part='end'] {
+    align-items: center;
+    color: var(--slotted-currency-field-adornment-color, var(--slotted-text-muted, GrayText));
+    display: inline-flex;
+    /* Never squeezed: the value gives up width first, because the value is the
+       part that can scroll. */
+    flex: 0 0 auto;
+    gap: var(--slotted-space-2, 0.25rem);
+    line-height: 1;
+    /**
+     * Its own bidi run, ordered by its own content, so `R$` reads as itself in
+     * a right-to-left document instead of resolving to the paragraph.
+     */
+    unicode-bidi: plaintext;
+
+    --slotted-icon-size: var(--_icon-size);
+  }
+
+  [data-ui='currency-field'] > [data-part='start'] > svg,
+  [data-ui='currency-field'] > [data-part='end'] > svg {
+    block-size: var(--_icon-size);
+    inline-size: var(--_icon-size);
+  }
+
+  /**
+   * Optical alignment between the two kinds of adornment: a glyph fills the
+   * whole box and its artwork does not, while a character fills only its own
+   * advance width. An adornment that draws no glyph takes the margin the glyph
+   * box already has, on both sides — the measurement `text-field` derived.
+   */
+  [data-ui='currency-field'] > [data-part='start']:not(:has(svg, img, [data-ui='icon'])),
+  [data-ui='currency-field'] > [data-part='end']:not(:has(svg, img, [data-ui='icon'])) {
+    padding-inline: calc(var(--_icon-size) / 8);
+  }
+
+  /**
+   * A mark that moves the amount when it is dragged sideways — the sibling's
+   * gesture, drawn as the sibling draws it. The adornment holding it stands
+   * the frame's full height, so the target is the frame's height rather than
+   * the mark's.
+   *
+   * Hover lifts the mark from the adornments' quiet ink to the value's: the
+   * mark is not a button, it has no ground to change, and the cursor alone
+   * said nothing a reader would look at.
+   */
+  [data-ui='currency-field']
+    > :is([data-part='start'], [data-part='end']):has(> [data-part='scrub']) {
+    align-self: stretch;
+  }
+
+  [data-ui='currency-field'] [data-part='scrub'] {
+    align-items: center;
+    align-self: stretch;
+    cursor: ew-resize;
+    display: inline-flex;
+    gap: var(--slotted-space-2, 0.25rem);
+    /* The drag is the gesture; a pan or a text selection would take it. */
+    touch-action: none;
+    transition: color var(--slotted-control-transition-duration)
+      var(--slotted-control-transition-easing);
+    /* Its own bidi run, like the adornment around it: as a flex container its
+       text is a new block, and `R$` in a right-to-left document read `$R`. */
+    unicode-bidi: plaintext;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  [data-ui='currency-field']:not([data-disabled]):not([data-readonly])
+    [data-part='scrub']:is(:hover, [data-scrubbing]) {
+    color: var(--slotted-currency-field-scrub-active-color, var(--slotted-text, CanvasText));
+  }
+
+  [data-ui='currency-field']:is([data-disabled], [data-readonly]) [data-part='scrub'] {
+    cursor: default;
+    touch-action: auto;
+  }
+
+  /* ── The two steppers ─────────────────────────────────────────────────
+   *
+   * Withdrawn by default on this family — an invoice total is typed, not
+   * nudged — and drawn exactly as the sibling draws them when a product asks
+   * for them. Real buttons, out of the tab order, with real names and
+   * `aria-controls`. Their glyphs are the `Glyph` element the binding
+   * renders: a character is never an icon.
+   */
+  [data-ui='currency-field'] > [data-part='stepper'] > button,
+  [data-ui='currency-field'] > [data-part='decrement'],
+  [data-ui='currency-field'] > [data-part='increment'] {
+    align-items: center;
+    appearance: none;
+    background-color: transparent;
+    border: 0;
+    color: var(--slotted-currency-field-stepper-color, var(--slotted-text-muted, GrayText));
+    cursor: pointer;
+    display: inline-flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    padding: 0;
+    /* The containing block of the hit area recovered below. */
+    position: relative;
+    /* No tap delay waiting for a second tap the button cannot use. */
+    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 `icon` box inside each button is drawn at the control's own icon
+     step rather than at the icon family's default. */
+  [data-ui='currency-field'] [data-part='decrement'],
+  [data-ui='currency-field'] [data-part='increment'] {
+    --slotted-icon-size: var(--_icon-size);
+  }
+
+  /**
+   * Stacked, the marks are chevrons: two halves of one column, pointing at the
+   * direction the value moves. The binding draws the down chevron in both, and
+   * the up one is that artwork turned half a turn.
+   *
+   * Split, they are the minus and the plus — one pair on one grid. Less and
+   * more do not change with the reading direction, where a chevron along the
+   * inline axis would read as "previous" and "next" and would have to mirror.
+   */
+  [data-ui='currency-field'][data-stepper='stacked'] [data-part='increment'] > [data-ui='icon'] {
+    rotate: 0.5turn;
+  }
+
+  /* ── Stacked: one column at the inline end ────────────────────────────
+   *
+   * The column stands `--_column-inset` inside the frame's edge, in the block
+   * axis and at the inline end, with no rule of its own: each half paints a
+   * ground concentric with the frame when it is hovered, pressed or at its
+   * bound, and that ground is the only edge a half needs. The value, the
+   * column and its halves are one surface. The paint gives the inset back to
+   * the pointer: each half's hit area reaches the frame.
+   */
+  [data-ui='currency-field'][data-part='root'][data-stepper='stacked'] {
+    padding-inline-end: 0;
+  }
+
+  [data-ui='currency-field'] > [data-part='stepper'] {
+    align-self: stretch;
+    box-sizing: content-box;
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    inline-size: var(--_stepper-size);
+    padding-block: var(--_column-inset);
+    padding-inline-end: var(--_column-inset);
+  }
+
+  [data-ui='currency-field'] > [data-part='stepper'] > button {
+    /* Two halves of the column, whatever the frame's height turns out to be. */
+    block-size: 50%;
+    border-radius: var(--_column-radius);
+    inline-size: 100%;
+  }
+
+  [data-ui='currency-field']
+    > [data-part='stepper']
+    > :is([data-part='increment'], [data-part='decrement'])::after {
+    content: '';
+    inset-inline: 0 calc(var(--_column-inset) * -1);
+    position: absolute;
+  }
+
+  [data-ui='currency-field'] > [data-part='stepper'] > [data-part='increment']::after {
+    inset-block: calc(var(--_column-inset) * -1) 0;
+  }
+
+  [data-ui='currency-field'] > [data-part='stepper'] > [data-part='decrement']::after {
+    inset-block: 0 calc(var(--_column-inset) * -1);
+  }
+
+  /**
+   * The glyph box is the control's own, bounded by the half that holds it: a
+   * chevron's artwork occupies about a quarter of its box, so a box shrunk to
+   * leave visible air would leave a mark a few pixels tall beside a minus and a
+   * plus drawn at full size.
+   *
+   * Size containment keeps the drawing out of the column's intrinsic height.
+   * While the frame measures its content the half has no height yet, so the
+   * percentage falls back to the `<svg>`'s own square, and two of them plus the
+   * divider would stand taller than the value and grow the frame.
+   */
+  [data-ui='currency-field'] > [data-part='stepper'] > button > [data-ui='icon'] {
+    block-size: min(var(--_icon-size), 100%);
+    contain: size;
+  }
+
+  /* ── Split: one button at each end ────────────────────────────────────
+   *
+   * Each button is a square inner control inset concentrically, and the
+   * frame's padding is that inset on both sides. No rule divides a button from
+   * the value: the ground it paints is its edge.
+   */
+  [data-ui='currency-field'][data-part='root'][data-stepper='split'] {
+    gap: 0;
+    padding-inline: var(--_inset);
+  }
+
+  [data-ui='currency-field'][data-stepper='split'] > [data-part='decrement'],
+  [data-ui='currency-field'][data-stepper='split'] > [data-part='increment'] {
+    block-size: var(--_action-size);
+    border-radius: var(--_action-radius);
+    inline-size: var(--_action-size);
+  }
+
+  [data-ui='currency-field'][data-stepper='split'] > [data-part='start'] {
+    padding-inline-start: var(--_gap);
+  }
+
+  [data-ui='currency-field'][data-stepper='split'] > [data-part='end'] {
+    padding-inline-end: var(--_gap);
+  }
+
+  /**
+   * The value keeps its own alignment between the two buttons rather than
+   * being centred the way a quantity is: a quantity is a token between a minus
+   * and a plus, and an amount is still a figure to be compared down a column.
+   *
+   * Its inset is the frame's own padding rather than the gap the sibling
+   * family uses, so the digits sit the same distance from the edge in all
+   * three arrangements. Read down a column mixing them, an amount with a
+   * stepper beside it would otherwise be five pixels off every amount without
+   * one — which is the comparison `align="end"` exists to make.
+   */
+  [data-ui='currency-field'][data-stepper='split'] > [data-part='input'] {
+    padding-inline: var(--_padding-inline);
+  }
+
+  /**
+   * The hit area, recovered outside the paint. At `sm` with `dense` the whole
+   * control is 24 pixels tall, so a button bounded by the frame cannot also be
+   * 24 in both axes. This grows the target to the minimum and leaves a larger
+   * one alone — the correction `docs/token-foundation.md` leaves to the family.
+   */
+  [data-ui='currency-field'][data-stepper='split'] > [data-part='decrement']::after,
+  [data-ui='currency-field'][data-stepper='split'] > [data-part='increment']::after {
+    content: '';
+    inset: min(0px, calc((100% - var(--slotted-target-min, 24px)) / 2));
+    position: absolute;
+  }
+
+  /**
+   * On a finger the target is the comfortable size. The paint stays the inset
+   * square a mouse sees; only the hit area grows.
+   *
+   * Split, each button's hit area reaches 44 in both axes. Stacked, each half
+   * keeps its own half of the column in the block axis — reaching the frame's
+   * edge, as on a fine pointer — and reaches 44 in the inline axis, over the
+   * value's edge and past the frame's.
+   */
+  @media (pointer: coarse) {
+    [data-ui='currency-field'][data-stepper='split']
+      > :is([data-part='decrement'], [data-part='increment'])::after {
+      inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
+    }
+
+    [data-ui='currency-field']
+      > [data-part='stepper']
+      > :is([data-part='increment'], [data-part='decrement'])::after {
+      inset-inline: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
+    }
+  }
+
+  /* ── Stepper states ───────────────────────────────────────────────────
+   *
+   * Written strongest last, and each weaker one guarded against the stronger
+   * ones it can meet, which is the order `STATE_PRECEDENCE` sets.
+   */
+
+  [data-ui='currency-field'] [data-part='decrement']:hover:not(:disabled),
+  [data-ui='currency-field'] [data-part='increment']:hover:not(:disabled) {
+    background-color: var(
+      --slotted-currency-field-stepper-hover-background,
+      var(--slotted-tone-secondary-subtle-hover)
+    );
+  }
+
+  [data-ui='currency-field'] [data-part='decrement']:active:not(:disabled),
+  [data-ui='currency-field'] [data-part='increment']:active:not(:disabled) {
+    background-color: var(
+      --slotted-currency-field-stepper-active-background,
+      var(--slotted-tone-secondary-subtle-active)
+    );
+  }
+
+  /**
+   * A stepper at its bound is disabled rather than silently inert, so its name
+   * still announces and its appearance says why nothing happens. The ground
+   * says it as well as the ink: the disabled foreground and the resting
+   * stepper colour are two steps of one neutral.
+   */
+  [data-ui='currency-field'] [data-part='decrement']:disabled,
+  [data-ui='currency-field'] [data-part='increment']:disabled {
+    background-color: var(
+      --slotted-currency-field-stepper-disabled-background,
+      var(--slotted-disabled-background)
+    );
+    color: var(--slotted-currency-field-stepper-disabled-color, var(--slotted-disabled-foreground));
+    cursor: not-allowed;
+  }
+
+  /**
+   * The steppers are out of the tab order, so this answers the pointer path on
+   * touch and a screen-reader cursor activating one directly. It sits inside
+   * the frame's own edge, so the ring never doubles the border.
+   */
+  [data-ui='currency-field'] [data-part='decrement']:focus-visible,
+  [data-ui='currency-field'] [data-part='increment']: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);
+  }
+
+  /* ── Frame states ─────────────────────────────────────────────────────── */
+
+  [data-ui='currency-field'][data-part='root']:hover:not([data-disabled]):not([data-readonly]):not(
+      [data-invalid]
+    ) {
+    border-color: var(
+      --slotted-currency-field-hover-border-color,
+      var(--slotted-tone-accent-border)
+    );
+  }
+
+  [data-ui='currency-field'][data-part='root'][data-variant='subtle']:hover:not(
+      [data-disabled]
+    ):not([data-readonly]):not([data-invalid]) {
+    background-color: var(
+      --slotted-currency-field-subtle-hover-background,
+      var(--slotted-tone-secondary-subtle-hover)
+    );
+  }
+
+  [data-ui='currency-field'][data-part='root'][data-variant='plain']:hover:not([data-disabled]):not(
+      [data-readonly]
+    ):not([data-invalid]) {
+    background-color: var(
+      --slotted-currency-field-plain-hover-background,
+      var(--slotted-tone-secondary-subtle-hover)
+    );
+    /* The accent edge the other variants take would draw the cell's outline. */
+    border-color: transparent;
+  }
+
+  /**
+   * The ring belongs to the frame and answers the control's focus: a browser
+   * matches `:focus-visible` on a text input for a pointer press as well as for
+   * a Tab, which is right for a control whose caret is the thing that moved.
+   */
+  [data-ui='currency-field'][data-part='root']:has(> [data-part='input']:focus-visible) {
+    /* The resting shadow, recoloured: the lift under the control and the ring
+       around it are one colour, and the state decides which colour that is. */
+    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='currency-field'][data-part='root'][data-variant='plain']:has(
+      > [data-part='input']:focus-visible
+    ) {
+    box-shadow: none;
+    outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
+  }
+
+  /**
+   * Invalid outranks hover and is written after it for that reason. The ring is
+   * retargeted rather than repainted: every rule that draws focus reads
+   * `--slotted-focus-ring-color`, so pointing that one name at the invalid
+   * colour on the element moves the outline, the shadow and both steppers'
+   * rings at once.
+   */
+  [data-ui='currency-field'][data-part='root'][data-invalid] {
+    --slotted-focus-ring-color: var(
+      --slotted-currency-field-invalid-focus-ring-color,
+      var(--slotted-focus-ring-color-invalid, Highlight)
+    );
+    --_invalid-edge-width: var(
+      --slotted-currency-field-invalid-edge-width,
+      var(--slotted-control-invalid-edge-width, 1px)
+    );
+    --_invalid-edge-color: var(
+      --slotted-currency-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-currency-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='currency-field'][data-part='root'][data-invalid]:has(
+      > [data-part='input']:focus-visible
+    ) {
+    box-shadow:
+      var(--_invalid-edge),
+      var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px)
+        var(--slotted-focus-ring-color, Highlight);
+  }
+
+  [data-ui='currency-field'][data-part='root'][data-variant='plain'][data-invalid]:has(
+      > [data-part='input']:focus-visible
+    ) {
+    /* 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='currency-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='currency-field'][data-part='root'][data-invalid]:has(
+        > [data-part='input']:focus-visible
+      ) {
+      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='currency-field'][data-part='root'][data-variant='plain'][data-invalid]:has(
+        > [data-part='input']:focus-visible
+      ) {
+      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, selectable and legible, and must not be
+   * mistakable for disabled: the amount is still real and still submitted. The
+   * ground says "not yours to change", the edge steps down to the separator
+   * weight, and the ink stays at full strength.
+   */
+  [data-ui='currency-field'][data-part='root'][data-readonly] {
+    background-color: var(
+      --slotted-currency-field-readonly-background,
+      var(--slotted-tone-secondary-subtle-hover)
+    );
+    border-color: var(
+      --slotted-currency-field-readonly-border-color,
+      var(--slotted-border-subtle, ButtonBorder)
+    );
+    cursor: default;
+  }
+
+  /**
+   * `:disabled` on the control is matched beside `data-disabled` on the frame,
+   * because a control can be disabled by something that never told it so: a
+   * disabled `fieldset` disables every control inside it.
+   */
+  [data-ui='currency-field'][data-part='root'][data-disabled],
+  [data-ui='currency-field'][data-part='root']:has(> [data-part='input']:disabled) {
+    background-color: var(
+      --slotted-currency-field-disabled-background,
+      var(--slotted-disabled-background)
+    );
+    border-color: var(
+      --slotted-currency-field-disabled-border-color,
+      var(--slotted-disabled-border)
+    );
+    /* Nothing a person cannot reach is lifted off the page. */
+    box-shadow: none;
+    color: var(--slotted-currency-field-disabled-color, var(--slotted-disabled-foreground));
+    cursor: not-allowed;
+  }
+
+  /**
+   * Muted to the colour the theme measures rather than faded by opacity: an
+   * amount nobody can read is a field nobody can check.
+   */
+  [data-ui='currency-field'][data-part='root'][data-disabled] > [data-part='start'],
+  [data-ui='currency-field'][data-part='root'][data-disabled] > [data-part='end'] {
+    color: var(--slotted-disabled-foreground);
+  }
+}