@sharedex/ui 0.0.0-stage → 0.10.0

package/styles/form.css

@@ -0,0 +1,594 @@
+/*
+ * The default look of the form controls, from the sx tokens. Imported by ../theme.css.
+ *
+ * Same contract as the section defaults (see .claude/rules/tailwind-theme.md): everything in `@layer components`,
+ * every selector in `:where()`, so a utility class on a control always wins. It applies only with `[data-sx-styled]`,
+ * which `unstyled` drops.
+ *
+ * This sheet loads after the effects' sheets, and both have specificity 0, so an effect can't override a property
+ * set here. The look reads hooks instead, which effects set on the field:
+ *   --sx-field-edge         the box's border colour, over the look's own (transparent when an effect draws the outline)
+ *   --sx-field-line         the look's border colour for the field's state (hover, focus, invalid); effects that draw
+ *                           their own outline read it
+ *   --sx-field-label-color  the label's colour (validColor turns it red on an error)
+ *   --sx-field-label-size   the label's size (a floating label rests at the input's size)
+ *   --sx-field-label-weight its weight (a notch cuts its gap to the label's width)
+ *   --sx-field-placeholder  the placeholder's colour (transparent while a floating label rests on it)
+ *
+ * Checkboxes and radios read their own:
+ *   --sx-choice-edge        the drawn box's border colour (transparent when an effect draws its own box)
+ *   --sx-choice-line        the look's border colour for the option's state (rest, hover, checked, invalid)
+ *   --sx-choice-bg          the box's background while off;  --sx-choice-fill  a checkbox's background while on
+ *   --sx-choice-ink         the mark's colour;  --sx-choice-radius  the box's corners
+ *   --sx-choice-text        the option's words (a strikethrough mutes them)
+ *   --sx-switch-thumb / --sx-switch-thumb-on   a switch's thumb, off and on
+ *
+ * Select and Combobox:
+ *   --sx-picker-line        the box's border colour for its state (rest, hover, open or focused, invalid)
+ *   --sx-picker-radius      the list's corners (a bottom sheet rounds only its top)
+ *   --sx-option-radius      an option's corners (a sliding highlight takes the same)
+ *   --sx-option-active      the active option's background (transparent while a highlight slides under it)
+ *
+ * Range:
+ *   --sx-range-rail         the rail's colour;  --sx-range-knob  the thumb's (transparent when an effect draws the thumb)
+ */
+@layer components {
+  :where([data-sx-field][data-sx-styled]) {
+    --sx-field-bw: 1px;
+    --sx-field-line: var(--color-sx-border);
+  }
+  :where([data-sx-field][data-sx-variant="underline"]) {
+    --sx-field-px: 0rem;
+  }
+  :where([data-sx-field][data-sx-styled] > [data-sx-field-label]) {
+    font-size: var(--sx-field-label-size, 0.875rem);
+    font-weight: var(--sx-field-label-weight, 500);
+    color: var(--sx-field-label-color, var(--color-sx-ink));
+  }
+  :where([data-sx-field][data-sx-styled] > [data-sx-field-box]) {
+    min-block-size: 2.75rem;
+    border: var(--sx-field-bw) solid var(--sx-field-edge, var(--sx-field-line));
+    border-radius: var(--radius-sx-control);
+    background: var(--color-sx-secondary);
+    color: var(--color-sx-ink);
+    transition: border-color 200ms var(--ease-sx-out);
+  }
+  :where([data-sx-field][data-sx-variant="filled"]) {
+    --sx-field-line: transparent;
+  }
+  :where([data-sx-field][data-sx-variant="filled"] > [data-sx-field-box]) {
+    background: color-mix(in oklab, var(--color-sx-ink) 6%, var(--color-sx-secondary));
+  }
+  :where([data-sx-field][data-sx-inline][data-sx-styled] > [data-sx-field-box]) {
+    min-block-size: auto;
+    border-width: 0 0 2px;
+    border-radius: 0;
+    background: transparent;
+    color: var(--color-sx-primary);
+    font-weight: 600;
+  }
+  :where([data-sx-field][data-sx-variant="underline"] > [data-sx-field-box]) {
+    border-width: 0 0 var(--sx-field-bw);
+    border-radius: 0;
+    background: transparent;
+  }
+  :where([data-sx-field][data-sx-styled] [data-sx-field-control])::placeholder {
+    color: var(--sx-field-placeholder, var(--color-sx-muted));
+    opacity: 1;
+  }
+  :where([data-sx-field][data-sx-styled] [data-sx-field-icon]) {
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-field][data-sx-styled] > [data-sx-field-description]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-field][data-sx-styled] [data-sx-field-error]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-danger);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-sx-field][data-sx-styled]:not(:has([data-sx-field-control]:disabled)):hover) {
+      --sx-field-line: var(--color-sx-muted);
+    }
+  }
+  :where([data-sx-field][data-sx-styled]:focus-within) {
+    --sx-field-line: var(--color-sx-primary);
+  }
+  :where([data-sx-field][data-sx-styled]:is(:has([data-sx-field-control]:user-invalid), :has([data-sx-field-control][aria-invalid="true"]))) {
+    --sx-field-line: var(--color-sx-danger);
+  }
+  :where([data-sx-field][data-sx-styled]:has([data-sx-field-control]:disabled) > [data-sx-field-box]) {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  /* the field's own tools: quiet until used */
+  :where([data-sx-field][data-sx-styled] :is([data-sx-field-tool], [data-sx-field-counter], [data-sx-field-strength])) {
+    color: var(--color-sx-muted);
+  }
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-sx-field][data-sx-styled] [data-sx-field-tool]:hover) {
+      color: var(--color-sx-ink);
+    }
+  }
+  :where([data-sx-field][data-sx-styled][data-sx-count="over"] [data-sx-field-counter]) {
+    color: var(--color-sx-danger);
+  }
+  :where([data-sx-field][data-sx-styled] [data-sx-field-level]) {
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-field][data-sx-styled] > [data-sx-field-note]) {
+    color: var(--color-sx-ink);
+  }
+
+  /* checkboxes, radios and their groups */
+  :where([data-sx-choice][data-sx-styled]) {
+    --sx-choice-line: var(--color-sx-muted);
+  }
+  :where([data-sx-choice][data-sx-styled] [data-sx-choice-box]) {
+    border: 2px solid var(--sx-choice-edge, var(--sx-choice-line));
+    border-radius: var(--sx-choice-radius, 0.3125em);
+    background: var(--sx-choice-bg, var(--color-sx-secondary));
+    color: var(--sx-choice-ink, var(--color-sx-on-primary));
+    transition: background-color 150ms var(--ease-sx-out), border-color 150ms var(--ease-sx-out);
+  }
+  :where([data-sx-choice][data-sx-styled][data-sx-kind="radio"] [data-sx-choice-box]) {
+    border-radius: var(--sx-choice-radius, 50%);
+    color: var(--sx-choice-ink, var(--color-sx-primary));
+  }
+  :where([data-sx-choice][data-sx-styled][data-sx-kind="switch"] [data-sx-choice-box]) {
+    border-radius: var(--sx-choice-radius, 999px);
+  }
+  :where([data-sx-choice][data-sx-styled][data-sx-kind="switch"] [data-sx-switch-thumb]) {
+    background: var(--sx-switch-thumb, var(--sx-choice-line));
+    color: var(--color-sx-primary);
+    box-shadow: 0 1px 2px color-mix(in oklab, var(--color-sx-ink) 25%, transparent);
+    transition: background-color 150ms var(--ease-sx-out);
+  }
+  :where([data-sx-choice][data-sx-styled][data-sx-kind="switch"]:has([data-sx-choice-control]:checked) [data-sx-switch-thumb]) {
+    background: var(--sx-switch-thumb-on, var(--color-sx-on-primary));
+  }
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-sx-choice][data-sx-styled]:not(:has([data-sx-choice-control]:disabled)):hover) {
+      --sx-choice-line: var(--color-sx-ink);
+    }
+  }
+  :where([data-sx-choice][data-sx-styled]:is(:has([data-sx-choice-control]:checked), :has([data-sx-choice-control]:indeterminate), [data-sx-mixed])) {
+    --sx-choice-line: var(--color-sx-primary);
+  }
+  :where([data-sx-choice][data-sx-styled]:is([data-sx-kind="checkbox"], [data-sx-kind="switch"]):is(:has([data-sx-choice-control]:checked), :has([data-sx-choice-control]:indeterminate), [data-sx-mixed]) [data-sx-choice-box]) {
+    background: var(--sx-choice-fill, var(--color-sx-primary));
+  }
+  :where([data-sx-choice][data-sx-styled]:has([data-sx-choice-control]:user-invalid, [data-sx-choice-control][aria-invalid="true"])) {
+    --sx-choice-line: var(--color-sx-danger);
+  }
+  :where([data-sx-choice][data-sx-styled] [data-sx-choice-text]) {
+    color: var(--sx-choice-text, var(--color-sx-ink));
+  }
+  :where([data-sx-choice][data-sx-styled] [data-sx-choice-description]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-choice][data-sx-styled]:has([data-sx-choice-control]:disabled) [data-sx-choice-row]) {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+  :where([data-sx-group][data-sx-styled] > [data-sx-group-legend]) {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-group][data-sx-styled] > :is([data-sx-group-description], [data-sx-group-count])) {
+    font-size: 0.875rem;
+    color: var(--color-sx-muted);
+  }
+  :where(:is([data-sx-choice], [data-sx-group])[data-sx-styled] [data-sx-choice-error]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-danger);
+  }
+
+  /* Select and Combobox: the box is a field's; the list a card in the top layer */
+  :where([data-sx-picker][data-sx-styled]) {
+    --sx-picker-line: var(--color-sx-border);
+    --sx-option-radius: calc(var(--radius-sx-control) - 0.125rem);
+  }
+  :where([data-sx-picker][data-sx-styled] > [data-sx-picker-label]) {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-picker][data-sx-styled] > [data-sx-picker-box]) {
+    min-block-size: 2.75rem;
+    border: 1px solid var(--sx-picker-line);
+    border-radius: var(--radius-sx-control);
+    background: var(--color-sx-secondary);
+    color: var(--color-sx-ink);
+    transition: border-color 200ms var(--ease-sx-out);
+  }
+  :where([data-sx-picker][data-sx-inline][data-sx-styled] > [data-sx-picker-box]) {
+    min-block-size: auto;
+    border-width: 0 0 2px;
+    border-radius: 0;
+    background: transparent;
+    color: var(--color-sx-primary);
+    font-weight: 600;
+  }
+  :where([data-sx-picker][data-sx-styled] [data-sx-picker-control])::placeholder {
+    color: var(--color-sx-muted);
+    opacity: 1;
+  }
+  :where([data-sx-picker][data-sx-styled] [data-sx-picker-arrow]) {
+    color: var(--color-sx-muted);
+  }
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-sx-picker][data-sx-styled]:not(:has([data-sx-picker-control]:disabled)):hover) {
+      --sx-picker-line: var(--color-sx-muted);
+    }
+  }
+  :where([data-sx-picker][data-sx-styled]:is(:focus-within, [data-sx-open])) {
+    --sx-picker-line: var(--color-sx-primary);
+  }
+  :where([data-sx-picker][data-sx-styled]:has([data-sx-picker-control]:user-invalid, [data-sx-picker-control][aria-invalid="true"])) {
+    --sx-picker-line: var(--color-sx-danger);
+  }
+  :where([data-sx-picker][data-sx-styled]:has([data-sx-picker-control]:disabled) > [data-sx-picker-box]) {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+  :where([data-sx-picker][data-sx-styled] [data-sx-chip]) {
+    background: color-mix(in oklab, var(--color-sx-primary) 14%, var(--color-sx-secondary));
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-picker][data-sx-styled] [data-sx-picker-popup]) {
+    border: 1px solid var(--color-sx-border);
+    border-radius: var(--sx-picker-radius, var(--radius-sx-control));
+    background: var(--color-sx-secondary);
+    color: var(--color-sx-ink);
+    box-shadow: var(--shadow-sx-card);
+  }
+  :where([data-sx-picker][data-sx-styled] [data-sx-option]) {
+    border-radius: var(--sx-option-radius);
+  }
+  :where([data-sx-picker][data-sx-styled] [data-sx-option][data-active]) {
+    background: var(--sx-option-active, color-mix(in oklab, var(--color-sx-primary) 14%, transparent));
+  }
+  :where([data-sx-picker][data-sx-styled] [data-sx-option][aria-selected="true"]) {
+    font-weight: 500;
+  }
+  :where([data-sx-picker][data-sx-styled] [data-sx-option-check]) {
+    color: var(--color-sx-primary);
+  }
+  :where([data-sx-picker][data-sx-styled] :is([data-sx-option][aria-disabled="true"], [data-sx-option-note])) {
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-picker][data-sx-styled] > [data-sx-picker-description]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-picker][data-sx-styled] [data-sx-picker-error]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-danger);
+  }
+  @supports (appearance: base-select) {
+    :where([data-sx-picker][data-sx-styled] select)::picker(select) {
+      padding: 0.25rem;
+      border: 1px solid var(--color-sx-border);
+      border-radius: var(--sx-picker-radius, var(--radius-sx-control));
+      background: var(--color-sx-secondary);
+      color: var(--color-sx-ink);
+      box-shadow: var(--shadow-sx-card);
+    }
+    :where([data-sx-picker][data-sx-styled] select option) {
+      border-radius: var(--sx-option-radius);
+    }
+    :where([data-sx-picker][data-sx-styled] select option:focus-visible) {
+      background: color-mix(in oklab, var(--color-sx-primary) 14%, transparent);
+    }
+    @media (hover: hover) and (pointer: fine) {
+      :where([data-sx-picker][data-sx-styled] select option:hover) {
+        background: color-mix(in oklab, var(--color-sx-primary) 14%, transparent);
+      }
+    }
+    :where([data-sx-picker][data-sx-styled] select option:checked) {
+      font-weight: 500;
+    }
+  }
+
+  /* Range: a quiet rail, a solid thumb on a light ring */
+  :where([data-sx-range][data-sx-styled] [data-sx-range-label]) {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-range][data-sx-styled] [data-sx-range-output]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-range][data-sx-styled] [data-sx-range-track]) {
+    background: var(--sx-range-rail, color-mix(in oklab, var(--color-sx-ink) 14%, transparent));
+  }
+  :where([data-sx-range][data-sx-styled] [data-sx-range-thumb]) {
+    border: 2px solid var(--color-sx-secondary);
+    background: var(--sx-range-knob, var(--color-sx-primary));
+    box-shadow: 0 1px 3px color-mix(in oklab, var(--color-sx-ink) 30%, transparent);
+  }
+  :where([data-sx-range][data-sx-styled]:has([data-sx-range-control][aria-invalid="true"])) {
+    --sx-range-rail: color-mix(in oklab, var(--color-sx-danger) 30%, transparent);
+  }
+  :where([data-sx-range][data-sx-styled]:has([data-sx-range-control]:disabled) [data-sx-range-box]) {
+    opacity: 0.55;
+  }
+  :where([data-sx-range][data-sx-styled] [data-sx-range-description]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-range][data-sx-styled] [data-sx-range-error]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-danger);
+  }
+  @media (forced-colors: active) {
+    :where([data-sx-range][data-sx-styled] [data-sx-range-thumb]) {
+      border-color: Canvas;
+      background: CanvasText;
+    }
+  }
+
+  /* OtpField: one box per character, the one you are on ringed (base sheet) */
+  :where([data-sx-otp][data-sx-styled] > [data-sx-otp-label]) {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-otp][data-sx-styled] [data-sx-otp-slot]) {
+    border: 1px solid var(--sx-otp-line, var(--color-sx-border));
+    border-radius: var(--radius-sx-control);
+    background: var(--color-sx-secondary);
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-otp][data-sx-styled] [data-sx-otp-slot][data-filled]) {
+    --sx-otp-line: var(--color-sx-muted);
+  }
+  :where([data-sx-otp][data-sx-styled]:has([data-sx-otp-control]:user-invalid, [data-sx-otp-control][aria-invalid="true"]) [data-sx-otp-slot]) {
+    --sx-otp-line: var(--color-sx-danger);
+  }
+  :where([data-sx-otp][data-sx-styled]:has([data-sx-otp-control]:disabled) [data-sx-otp-slots]) {
+    opacity: 0.55;
+  }
+  :where([data-sx-otp][data-sx-styled] [data-sx-otp-gap]) {
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-otp][data-sx-styled] > [data-sx-otp-description]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-otp][data-sx-styled] [data-sx-otp-error]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-danger);
+  }
+
+  /* ChipGroup: quiet pills, tinted with a check when on. Hooks: --sx-chip-edge (the border while on; chipMerge clears it)
+     and --sx-chip-bw (the border's width, which chipMerge's pill covers) */
+  :where([data-sx-chips][data-sx-styled]) {
+    --sx-chip-bw: 1px;
+  }
+  :where([data-sx-chips][data-sx-styled] > [data-sx-chips-legend]) {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-chips][data-sx-styled] [data-sx-chip-option]) {
+    border: var(--sx-chip-bw) solid var(--sx-chip-line, var(--color-sx-border));
+    background: var(--color-sx-secondary);
+    color: var(--color-sx-ink);
+    font-size: 0.875rem;
+  }
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-sx-chips][data-sx-styled] [data-sx-chip-option]:not(:has([data-sx-chip-control]:disabled)):hover) {
+      --sx-chip-line: var(--color-sx-muted);
+    }
+  }
+  :where([data-sx-chips][data-sx-styled] [data-sx-chip-option]:has([data-sx-chip-control]:checked)) {
+    border-color: var(--sx-chip-edge, color-mix(in oklab, var(--color-sx-primary) 45%, var(--color-sx-secondary)));
+    background: color-mix(in oklab, var(--color-sx-primary) 14%, var(--color-sx-secondary));
+  }
+  :where([data-sx-chips][data-sx-styled] [data-sx-chip-check]) {
+    color: var(--color-sx-primary);
+  }
+  :where([data-sx-chips][data-sx-styled]:has([data-sx-chip-control][aria-invalid="true"]) [data-sx-chip-option]) {
+    --sx-chip-line: var(--color-sx-danger);
+  }
+  :where([data-sx-chips][data-sx-styled] > [data-sx-chips-description]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-chips][data-sx-styled] [data-sx-chips-error]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-danger);
+  }
+  @media (forced-colors: active) {
+    :where([data-sx-chips][data-sx-styled] [data-sx-chip-option]) {
+      border-color: ButtonText;
+    }
+  }
+
+  /* InlineEdit: the text shows a quiet pencil and a hint of a box on hover; the field is a field's */
+  :where([data-sx-inline][data-sx-styled] [data-sx-inline-icon]) {
+    color: var(--color-sx-muted);
+    opacity: 0.6;
+  }
+  :where([data-sx-inline][data-sx-styled][data-sx-empty] [data-sx-inline-text]) {
+    color: var(--color-sx-muted);
+  }
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-sx-inline][data-sx-styled] [data-sx-inline-view]:not(:disabled):hover) {
+      border-color: var(--color-sx-border);
+      background: color-mix(in oklab, var(--color-sx-ink) 4%, transparent);
+    }
+    :where([data-sx-inline][data-sx-styled] [data-sx-inline-view]:not(:disabled):hover [data-sx-inline-icon]) {
+      opacity: 1;
+    }
+  }
+  :where([data-sx-inline][data-sx-styled] [data-sx-inline-control]) {
+    border-color: var(--color-sx-primary);
+    background: var(--color-sx-secondary);
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-inline][data-sx-styled] [data-sx-inline-control]:user-invalid) {
+    border-color: var(--color-sx-danger);
+  }
+  :where([data-sx-inline][data-sx-styled] [data-sx-inline-done]) {
+    color: var(--color-sx-success);
+  }
+
+  /* FileDrop: a dashed zone, quiet cards. Hooks: --sx-file-line (the zone's line; fileReject turns it red),
+     --sx-file-bar (a card's progress), --sx-file-button-bg / -ink / -line / -radius (the browser's own file button) */
+  :where([data-sx-file][data-sx-styled] > [data-sx-file-label]) {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-file][data-sx-styled] [data-sx-file-zone]) {
+    border: 2px dashed var(--sx-file-line, var(--color-sx-border));
+    border-radius: var(--radius-sx-card);
+    background: var(--color-sx-secondary);
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-file][data-sx-styled] [data-sx-file-icon]) {
+    color: var(--color-sx-primary);
+  }
+  :where([data-sx-file][data-sx-styled] [data-sx-file-control])::file-selector-button {
+    border: 1px solid var(--sx-file-button-line, var(--color-sx-border));
+    border-radius: var(--sx-file-button-radius, var(--radius-sx-control));
+    background: var(--sx-file-button-bg, var(--color-sx-secondary));
+    color: var(--sx-file-button-ink, var(--color-sx-ink));
+    font-weight: 500;
+  }
+  :where([data-sx-file][data-sx-styled] [data-sx-file-card]) {
+    border: 1px solid var(--color-sx-border);
+    border-radius: var(--radius-sx-control);
+    background: var(--color-sx-secondary);
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-file][data-sx-styled] [data-sx-file-thumb]) {
+    background: color-mix(in oklab, var(--color-sx-ink) 6%, var(--color-sx-secondary));
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-file][data-sx-styled] [data-sx-file-size]) {
+    font-size: 0.8125rem;
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-file][data-sx-styled] [data-sx-file-bar]) {
+    background: color-mix(in oklab, var(--color-sx-ink) 10%, transparent);
+    color: var(--sx-file-bar, var(--color-sx-primary));
+  }
+  :where([data-sx-file][data-sx-styled] [data-sx-file-done]) {
+    color: var(--color-sx-success);
+  }
+  :where([data-sx-file][data-sx-styled] [data-sx-file-actions] > button) {
+    color: var(--color-sx-muted);
+  }
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-sx-file][data-sx-styled] [data-sx-file-actions] > button:not(:disabled):hover) {
+      color: var(--color-sx-ink);
+    }
+  }
+  :where([data-sx-file][data-sx-styled] [data-sx-file-page]) {
+    background: color-mix(in oklab, var(--color-sx-secondary) 88%, transparent);
+    color: var(--color-sx-ink);
+    font-weight: 600;
+  }
+  :where([data-sx-file][data-sx-styled] > [data-sx-file-description]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-file][data-sx-styled] [data-sx-file-error]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-danger);
+  }
+  :where([data-sx-file][data-sx-styled]:has([data-sx-file-control][aria-invalid="true"])) {
+    --sx-file-line: var(--color-sx-danger);
+  }
+
+  /* FormSteps: a quiet rail, numbered dots, the current one ringed. Hook: --sx-steps-color (stepProgress sets it) */
+  :where([data-sx-steps][data-sx-styled] [data-sx-steps-progress]) {
+    color: var(--sx-steps-color, var(--color-sx-primary));
+  }
+  :where([data-sx-steps][data-sx-styled] [data-sx-steps-rail]) {
+    background: var(--color-sx-border);
+  }
+  :where([data-sx-steps][data-sx-styled] [data-sx-step-dot]) {
+    border: 2px solid var(--color-sx-border);
+    background: var(--color-sx-secondary);
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-steps][data-sx-styled] :is([data-sx-step-mark][data-sx-done], [data-sx-step-mark][aria-current="step"]) [data-sx-step-dot]) {
+    border-color: var(--sx-steps-color, var(--color-sx-primary));
+    color: var(--sx-steps-color, var(--color-sx-primary));
+  }
+  :where([data-sx-steps][data-sx-styled] [data-sx-step-mark][data-sx-done] [data-sx-step-dot]) {
+    background: var(--sx-steps-color, var(--color-sx-primary));
+    color: var(--color-sx-on-primary);
+  }
+  :where([data-sx-steps][data-sx-styled] [data-sx-step-name]) {
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-steps][data-sx-styled] [data-sx-step-mark][aria-current="step"] [data-sx-step-name]) {
+    color: var(--color-sx-ink);
+    font-weight: 500;
+  }
+
+  /* FormSwap: the sliding panel in the primary colour */
+  :where([data-sx-swap][data-sx-styled] [data-sx-swap-panel]) {
+    border-radius: var(--radius-sx-card);
+    background: var(--color-sx-primary);
+    color: var(--color-sx-on-primary);
+  }
+  :where([data-sx-swap][data-sx-styled] [data-sx-swap-check]) {
+    color: var(--color-sx-success);
+  }
+
+  /* ErrorSummary, SaveStatus, PasswordRules */
+  :where([data-sx-error-summary][data-sx-styled]) {
+    padding: 1rem 1.25rem;
+    border: 2px solid var(--color-sx-danger);
+    border-radius: var(--radius-sx-card);
+    background: var(--color-sx-secondary);
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-error-summary][data-sx-styled] [data-sx-error-summary-title]) {
+    margin: 0 0 0.5rem;
+    font-size: 1.125rem;
+    font-weight: 600;
+  }
+  :where([data-sx-error-summary][data-sx-styled] li + li) {
+    margin-block-start: 0.25rem;
+  }
+  :where([data-sx-error-summary][data-sx-styled] a) {
+    color: var(--color-sx-danger);
+    font-weight: 500;
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+  :where([data-sx-save][data-sx-styled]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-save="saved"][data-sx-styled] > svg) {
+    color: var(--color-sx-success);
+  }
+  :where([data-sx-save="error"][data-sx-styled]) {
+    color: var(--color-sx-danger);
+  }
+  :where([data-sx-password-rules][data-sx-styled]) {
+    font-size: 0.875rem;
+    color: var(--color-sx-muted);
+  }
+  :where([data-sx-password-rules][data-sx-styled] [data-sx-met]) {
+    color: var(--color-sx-ink);
+  }
+  :where([data-sx-password-rules][data-sx-styled] [data-sx-met] svg) {
+    color: var(--color-sx-success);
+  }
+}

package/styles/hero.css

@@ -0,0 +1,108 @@
+/* Hero: split | centered | media-background */
+
+@layer components {
+  /* ---------- layout ---------- */
+
+  :where([data-sx-section="hero"] [data-sx-part="hero-inner"]) {
+    grid-template-areas: "text" "media";
+    align-items: center;
+  }
+  :where([data-sx-section="hero"] [data-sx-part="hero-text"]) {
+    grid-area: text;
+  }
+  :where([data-sx-section="hero"] [data-sx-part="hero-media"]) {
+    grid-area: media;
+    aspect-ratio: 4 / 3;
+  }
+
+  /* split: text beside media once there's room */
+  @container (min-width: 44rem) {
+    :where([data-sx-section="hero"][data-sx-layout="split"] [data-sx-part="hero-inner"]) {
+      grid-template-columns: 1fr 1fr;
+      grid-template-areas: "text media";
+    }
+  }
+
+  /* centered: one column, text centred above the media */
+  :where([data-sx-section="hero"][data-sx-layout="centered"] [data-sx-part="hero-text"]) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-self: center;
+    max-width: 48rem;
+    text-align: center;
+  }
+  :where([data-sx-section="hero"][data-sx-layout="centered"] [data-sx-part="hero-actions"]) {
+    justify-content: center;
+  }
+  :where([data-sx-section="hero"][data-sx-layout="centered"] [data-sx-part="hero-media"]) {
+    aspect-ratio: 16 / 9;
+  }
+
+  /* media-background: the media covers the whole section, text sits on top */
+  :where([data-sx-section="hero"][data-sx-layout="media-background"]) {
+    display: grid;
+    align-items: end;
+    min-block-size: 36rem;
+  }
+  :where([data-sx-section="hero"][data-sx-layout="media-background"] [data-sx-part="hero-inner"]) {
+    grid-template-areas: "text";
+  }
+  :where([data-sx-section="hero"][data-sx-layout="media-background"] [data-sx-part="hero-media"]) {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    aspect-ratio: auto;
+  }
+  :where([data-sx-section="hero"][data-sx-layout="media-background"] [data-sx-part="hero-text"]) {
+    position: relative;
+    z-index: 1;
+    max-width: 44rem;
+  }
+
+  /* ---------- visual ---------- */
+
+  :where([data-sx-styled][data-sx-section="hero"] h1[data-sx-part="hero-title"]) {
+    font-size: var(--text-sx-display);
+    line-height: var(--text-sx-display--line-height);
+  }
+  :where([data-sx-styled][data-sx-section="hero"] p[data-sx-part="hero-description"]) {
+    font-size: 1.125em;
+  }
+
+  /* media-background: a scrim keeps the text readable on any image */
+  :where([data-sx-styled][data-sx-layout="media-background"] [data-sx-part="hero-media"]) {
+    border-radius: 0;
+  }
+  :where([data-sx-styled][data-sx-layout="media-background"] [data-sx-part="hero-media"])::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      to top,
+      color-mix(in oklab, var(--color-sx-ink) 82%, transparent),
+      color-mix(in oklab, var(--color-sx-ink) 20%, transparent)
+    );
+  }
+  :where([data-sx-styled][data-sx-layout="media-background"] [data-sx-part="hero-text"]) {
+    color: var(--color-sx-secondary);
+  }
+  :where([data-sx-styled][data-sx-layout="media-background"] :is([data-sx-part="hero-eyebrow"], p[data-sx-part="hero-description"])) {
+    color: color-mix(in oklab, var(--color-sx-secondary) 85%, transparent);
+  }
+  :where(
+      [data-sx-styled][data-sx-layout="media-background"] a[data-sx-part="hero-action"][data-sx-variant="secondary"],
+      [data-sx-styled][data-sx-layout="media-background"] [data-sx-part="hero-action"][data-sx-variant="outline"] > [data-sx-btn-body] > [data-sx-btn-face]
+    ) {
+    border-color: color-mix(in oklab, var(--color-sx-secondary) 60%, transparent);
+    color: var(--color-sx-secondary);
+  }
+
+  /* The page's one orchestrated moment: the hero text rises in on load,
+     unless the section's reveal prop plays one instead (data-sx-sr). */
+  @media (prefers-reduced-motion: no-preference) {
+    :where([data-sx-styled][data-sx-section="hero"] [data-sx-part="hero-text"]:not([data-sx-sr])) {
+      animation: sx-section-rise 700ms var(--ease-sx-out) both;
+    }
+  }
+}