@vectoriox/iox-ui 5.27.0 → 5.29.0

package/styles/iox-forms.css

@@ -119,7 +119,8 @@
 .iox-es-field .iox-field__control:focus-visible {
   border-color: var(--iox-accent-text);
   box-shadow: var(--iox-field-focus);
-  outline: none;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 .iox-es-field .iox-field__label {
   font-family: var(--iox-font-body);
@@ -127,6 +128,13 @@
   font-weight: var(--iox-field-label-weight);
   color: var(--iox-text);
 }
+/* A radio's choice reads like the label beside it: the look's body type in the look's text. */
+.iox-es-field .iox-field__option {
+  font-family: var(--iox-font-body);
+  font-size: var(--iox-size-body);
+  color: var(--iox-text);
+  cursor: pointer;
+}
 .iox-es-field .iox-field__help {
   font-size: var(--iox-size-small);
   color: var(--iox-text-muted);
@@ -139,21 +147,141 @@
   border-color: var(--iox-danger);
 }
 /* DS9 (contrast audit): the placeholder is themed (the UA's #757575 read 1:1 in a Brand section); the
-   native controls, the focus edge and the switch read `accent-text` — the accent GATED as text on every
+   focus edge, the switch and the range thumb read `accent-text` — the accent GATED as text on every
    ground — never the `accent` fill (Pop's orange on its yellow panel: 2.13:1); the off track is
-   `text-muted` under a `bg` thumb (the decorative `line` it wore read 1.06:1). WCAG 1.4.11: 3:1. */
+   `text-muted` under a `bg` thumb (the decorative `line` it wore read 1.06:1). WCAG 1.4.11: 3:1.
+   Focus: the transparent outline is what forced-colors mode paints once it drops the box-shadow ring. */
 .iox-es-field .iox-field__control::placeholder {
   color: var(--iox-text-muted);
   opacity: 1;
 }
-/* Native-appearance controls (checkbox, radio, range — and the switch, a checkbox) draw themselves:
-   the box baseline must not frame them. `:where()` keeps this at the baseline's specificity, so the
-   switch rules below still paint the track. */
-.iox-es-field .iox-field__control:where([type='checkbox'], [type='radio'], [type='range']) {
+.iox-es-field .iox-field__control:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+/* The switch and the range draw themselves: the box baseline must not frame them. `:where()` keeps this
+   at the baseline's specificity, so the switch rules below still paint the track. */
+.iox-es-field .iox-field__control:where(.iox-field__control--switch, [type='range']) {
   border: none;
   padding: 0;
   background: transparent;
-  accent-color: var(--iox-accent-text);
+}
+/* Checkbox and radio, drawn by the look (2026-10-19 — `accent-color` only TINTED the browser's own box,
+   so every flavor showed a browser default). 1.25em of the control's own size (the body step) · the
+   field's edge width in `line-strong` (≥ 3:1 on every ground) · the surface fill · `radius-xs` (a radio
+   is round) · checked: the `accent` fill, an `accent-text` edge and a mark in `accent-ink` (≥ 4.5:1 on
+   the fill). The mark is a BORDER — a rotated corner, a radio's dot a zero-size circle of border — so
+   forced-colors mode repaints it in the system ink (a background mark would vanish). Not mirrored in
+   RTL: a check mark is not a direction. Every motion reads dur-fast, which reduced motion sets to 0ms. */
+.iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']) {
+  appearance: none;
+  -webkit-appearance: none;
+  display: inline-grid;
+  place-content: center;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+  inline-size: 1.25em;
+  block-size: 1.25em;
+  vertical-align: middle;
+  cursor: pointer;
+  background: var(--iox-surface);
+  border-color: var(--iox-line-strong);
+  border-radius: var(--iox-radius-xs);
+  transition: background var(--iox-dur-fast) var(--iox-ease-standard), border-color var(--iox-dur-fast) var(--iox-ease-standard), box-shadow var(--iox-dur-fast) var(--iox-ease-standard);
+}
+.iox-es-field .iox-field__control[type='radio'] {
+  border-radius: 50%;
+}
+.iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio'])::before {
+  content: '';
+  inline-size: 0.28em;
+  block-size: 0.56em;
+  border-style: solid;
+  border-color: var(--iox-accent-ink);
+  border-width: 0 0.14em 0.14em 0;
+  transform: translateY(-0.08em) rotate(45deg) scale(0);
+  transition: transform var(--iox-dur-fast) var(--iox-ease-standard);
+}
+.iox-es-field .iox-field__control[type='radio']::before {
+  inline-size: 0;
+  block-size: 0;
+  border-width: 0.25em;
+  border-radius: 50%;
+  transform: scale(0);
+}
+.iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):hover {
+  border-color: var(--iox-accent-text);
+}
+.iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):checked {
+  background: var(--iox-accent);
+  border-color: var(--iox-accent-text);
+}
+.iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):checked:hover {
+  background: var(--iox-accent-hover);
+}
+.iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):checked::before {
+  transform: translateY(-0.08em) rotate(45deg) scale(1);
+}
+.iox-es-field .iox-field__control[type='radio']:checked::before {
+  transform: scale(1);
+}
+.iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):focus-visible {
+  box-shadow: var(--iox-focus-ring);
+}
+/* Range: the track is `line-strong`, the thumb `accent-text` on a `bg` ring, the focus ring on the THUMB.
+   One rule per vendor pseudo-element — a selector list mixing -webkit- and -moz- is dropped whole by
+   the engine that does not know the other. */
+.iox-es-field .iox-field__control:where([type='range']) {
+  appearance: none;
+  -webkit-appearance: none;
+  inline-size: 100%;
+  block-size: 1.25em;
+  cursor: pointer;
+}
+.iox-es-field .iox-field__control:where([type='range'])::-webkit-slider-runnable-track {
+  block-size: 0.25em;
+  border-radius: var(--iox-radius-pill);
+  background: var(--iox-line-strong);
+  outline: 1px solid transparent;
+}
+.iox-es-field .iox-field__control:where([type='range'])::-moz-range-track {
+  block-size: 0.25em;
+  border-radius: var(--iox-radius-pill);
+  background: var(--iox-line-strong);
+  outline: 1px solid transparent;
+}
+.iox-es-field .iox-field__control:where([type='range'])::-webkit-slider-thumb {
+  appearance: none;
+  -webkit-appearance: none;
+  inline-size: 1.25em;
+  block-size: 1.25em;
+  border-radius: 50%;
+  background: var(--iox-accent-text);
+  border: 2px solid var(--iox-bg);
+  box-sizing: border-box;
+  cursor: pointer;
+  margin-block-start: -0.5em;
+}
+.iox-es-field .iox-field__control:where([type='range'])::-moz-range-thumb {
+  appearance: none;
+  -webkit-appearance: none;
+  inline-size: 1.25em;
+  block-size: 1.25em;
+  border-radius: 50%;
+  background: var(--iox-accent-text);
+  border: 2px solid var(--iox-bg);
+  box-sizing: border-box;
+  cursor: pointer;
+}
+.iox-es-field .iox-field__control:where([type='range']):focus-visible {
+  box-shadow: none;
+}
+.iox-es-field .iox-field__control:where([type='range']):focus-visible::-webkit-slider-thumb {
+  box-shadow: var(--iox-focus-ring);
+}
+.iox-es-field .iox-field__control:where([type='range']):focus-visible::-moz-range-thumb {
+  box-shadow: var(--iox-focus-ring);
 }
 .iox-es-field .iox-field__control--switch {
   background: var(--iox-text-muted);