@codenhub/styles 0.0.4 → 0.1.0

package/dist/tw/components/form.css

@@ -0,0 +1,601 @@
+@reference "tailwindcss";
+@import "../theme.css";
+@reference "../box.css";
+
+/* What all six text controls share: the box, the chrome, and two bounds that
+   exist because presentation cascades -- a cascaded-fill cap so a container's
+   `.solid` cannot fill a field with its own text colour, and an edge floor so a
+   container's `.edgeless` cannot leave a field or an unchecked toggle with no
+   boundary (WCAG 1.4.11). `switch` opts out of the floor on two of its own
+   fills, the only component that can, because its knob still carries the state;
+   `.checkbox` and `.radio` have nothing outside their line and cannot.
+
+   No derived hover: on something you type into, only the line responds to a
+   pointer. See model.md#the-bounds-that-survive-and-the-test-for-keeping-one. */
+@utility text-control {
+  @apply box;
+
+  /* The resting geometry, stated whole for the same reason every component
+     states it: `box` reads these three with no fallback, so a slot left out is
+     an undefined `var()` inside a `color-mix()` and the declaration reading it
+     collapses to its initial value rather than reporting anything. `text-control`
+     is typeable on its own, so it owes them exactly as a component does. */
+  --_d-fill: 0%;
+  --_d-fg-on-fill: 0%;
+  --_d-border: 100%;
+
+  /* The cap used to be 12%, which is exactly what `.soft` asks for, so `min()`
+     handed `.solid` and `.soft` the same tint and three fill names rendered two
+     boxes. 6% is a quiet wash, and it is the cap rather than a presentation:
+     `.soft` names the tint it wants and takes it whole below, so what this
+     governs is `.solid` and the container that cascades one onto a field nobody
+     classed.
+
+     Named rather than written into the `min()`, because the soft hover below is
+     derived from it and the two must not drift apart. Typed text is
+     `--intent-color` over a wash of its own tone, past 10:1 in both themes at
+     any value this cap is likely to take, so the bound still does what it was
+     written for. */
+  --_fill-cap: 6%;
+  /* The floor is zero everywhere except a checked toggle, which needs a ground
+     under its mark. A container's `.ghost` would otherwise leave a checked
+     checkbox as a tick floating on the page -- our own cascade producing the
+     broken result, which is the test a bound has to pass. */
+  --_fill-floor: 0%;
+  --_fill: calc(
+    clamp(
+        var(--_fill-floor),
+        min(var(--ui-fill, var(--_d-fill)), var(--_fill-cap), var(--intent-fill-max, 100%)),
+        100%
+      ) *
+      var(--ui-bg-alpha, 1)
+  );
+  /* The ink follows *this* control's fill, not `box`'s. `box` ramps against
+     `--_capped`, which knows `--intent-fill-max` but not `--_fill-cap`, so on a
+     control it would read a fill far higher than the one actually painted: a
+     `.primary.solid` checkbox has `--ui-fill: 100%` and an unbounded intent, so
+     `box` would call for the contrast tone while the plate sits at 20%. White
+     tick on light grey.
+
+     Ramping against `--_fill` keeps the two in step at every bound, including
+     the checked state that lifts them. */
+  --_on-fill: min(var(--ui-fg-on-fill, var(--_d-fg-on-fill)), max(0%, calc(var(--_fill) * 2 - 100%)));
+  /* The resting line is a fraction of the intent rather than all of it, and the
+     fraction is what makes the pointer visible. Drawn at full strength a control
+     already sits at its intent's darkest, and hover moves it to a neighbouring
+     tone -- `--color-primary` to `--color-primary-hover` is one step in the
+     palette, which reads as nothing. Only the neutral family looked right,
+     because its resting tone is a border token and its hover is the text one,
+     two places apart.
+
+     Resting at 60% gives every intent that distance: hover and focus both take
+     the tone whole, so the line arrives rather than shifts. A toggle sets this
+     back to 100% -- its line is a silhouette rather than a field's edge, and
+     there is nothing else marking an unchecked box. */
+  --_line-rest: 60%;
+  /* Two seams rather than one composed result. `--_line-tone` is what colour the
+     line is, and the states below move it; `--_line` folds in P3's blend toward
+     the fill, exactly as `box` does it, so the two agree and a state never has to
+     restate the blend to keep it.
+
+     Written as a single `--_line` that states overwrote, a hovered or focused
+     control lost the blend along with the tone, because replacing a composed
+     result drops every term it was composed from. Same failure as the edge
+     below, one property over. */
+  --_line-tone: color-mix(in oklab, var(--intent-border) var(--_line-rest), transparent);
+  --_line: color-mix(in oklab, var(--intent-color) var(--_fill), var(--_line-tone));
+  /* The edge floor, as an input to `box` rather than a rewrite of its result.
+     The line is drawn whatever a *container's* edge class says, because a
+     `.edgeless` toolbar would otherwise leave a field with no mark of where
+     typing goes and a toggle with no silhouette at all (WCAG 1.4.11). That is
+     our own cascade producing the broken result, so our own floor answers it.
+
+     An element's own `.edgeless` lowers the floor -- see the rule below the
+     utility -- which is a consumer naming what they want rather than a cascade
+     reaching something nobody classed. `.checkbox` and `.radio` are left off
+     that rule and keep the floor absolute: they have nothing outside their line,
+     so removing it removes the control.
+
+     This used to be `--_edge: color-mix(...)` written after `@apply box`, which
+     dropped `--ui-border` out of the composition entirely. `.edged` and
+     `.edgeless` were both inert on all six text controls, and `--_d-border` was
+     declared and never read on each of them. */
+  --_edge-floor: 100%;
+
+  @apply w-full appearance-none;
+
+  box-sizing: border-box;
+
+  &::placeholder {
+    color: var(--color-text-secondary);
+  }
+
+  &:hover:not(:disabled, [aria-disabled="true"], [data-disabled], :focus-visible) {
+    --_line-tone: var(--intent-hover);
+  }
+
+  /* The line moves to the intent on top of the `reset.css` `:focus-visible`
+     outline -- a second signal, not a replacement. This must NOT suppress the
+     outline: `&:focus { outline-none }` nested here lands in the utilities layer
+     and beats `reset.css`'s `@layer base` ring, killing the keyboard ring too. */
+  &:focus-visible {
+    --_line-tone: var(--intent-color);
+  }
+
+  /* R8, P6: `:checked` lifts the bounds and lets the fill class compose, rather
+     than pinning `--_fill`/`--_fg` (which made every checked toggle render
+     identically). The floor keeps a mark on a ground when a container's `.ghost`
+     would take it away. Lives here, not on the toggles, because a text input is
+     never `:checked`. */
+  &:checked {
+    --_fill-cap: 100%;
+    --_fill-floor: 12%;
+  }
+
+  /* Native decorations a field replaces with its own artwork. */
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration,
+  &::-webkit-calendar-picker-indicator,
+  &::-webkit-inner-spin-button,
+  &::-webkit-clear-button {
+    -webkit-appearance: none;
+    display: none !important;
+    opacity: 0;
+    pointer-events: none;
+    width: 0;
+    height: 0;
+  }
+}
+
+/* A fill class on the element names its own cap; the 6% cascade cap in the
+   utility is for a container reaching a field nobody classed. Both raise
+   `--_fill-cap` rather than writing `--_fill` (P6), which is also what keeps
+   `.soft` < `.solid` -- written as a rewrite the louder name rendered the
+   quieter box, measured and inverted on `.ipt`, `.checkbox` and `.radio`.
+   20% clears `.soft`'s 12% and matches the plate a `.solid` badge draws.
+
+   `.switch` is deliberately absent: its track caps at 40% in its own utility,
+   and an unlayered rule here would overrule that. See model.md#the-bounds-that-survive-and-the-test-for-keeping-one. */
+:is(.text-control, .ipt, .textarea, .select, .input-group).soft {
+  --_fill-cap: 12%;
+}
+
+:is(.text-control, .ipt, .textarea, .select, .input-group).solid {
+  --_fill-cap: 20%;
+}
+
+/* A checked toggle fills with its own intent, so neutral has to drop its 20%
+   cap here. Declared where the intents are (0-2-0, unlayered): inside
+   `text-control` `.neutral` would overrule it and a checked toggle would fill to
+   a fifth of its colour. */
+:is(.text-control, .checkbox, .radio, .switch, input):checked {
+  --intent-fill-max: 100%;
+}
+
+/* The element's own `.edgeless` lowers the floor `text-control` raises -- a
+   class on the element is a consumer's request, a class on a container is a
+   cascade. `.checkbox` and `.radio` are absent: an unchecked one is a
+   transparent square/circle with nothing but its line, so the floor is absolute
+   and `.edgeless` on them is published unsupported. `.input-group` is on it
+   because the group is the field boundary now. */
+:is(.text-control, .ipt, .textarea, .select, .switch, .input-group).edgeless {
+  --_edge-floor: 0%;
+}
+
+/* An invalid control is destructive whatever else it was asked to be. A plain
+   unlayered rule, not `&[aria-invalid]` inside `@utility`: the intent reset is
+   unlayered too and would overrule a layered version (leaving a grey line and
+   only the hint marking the error). `:is()` gives it 0-2-0 to outrank an intent
+   class. `--intent-hover` is redirected with the others so the line does not go
+   grey under the pointer. The `:has()` arm bridges an inner control's state to
+   an `.input-group`. */
+:is(
+  .text-control,
+  .ipt,
+  .textarea,
+  .select,
+  .checkbox,
+  .radio,
+  .switch,
+  .input-group,
+  input,
+  textarea,
+  select
+)[aria-invalid="true"],
+.input-group:has(> :is(.ipt, .textarea, .select, .text-control, input, textarea, select)[aria-invalid="true"]) {
+  --intent-color: var(--color-destructive);
+  --intent-hover: var(--color-destructive-hover);
+  --intent-border: var(--color-destructive);
+}
+
+/* A ghost, edged, unelevated text control. */
+@utility ipt {
+  @apply text-control h-(--control-height,2.5rem) px-3 py-2;
+
+  /* After the `@apply`, not before: it inlines `text-control`'s own resting
+     geometry at that point, so a component's defaults written above it lose to
+     the utility they are meant to specialise. */
+  --_d-fill: 0%;
+  --_d-fg-on-fill: 0%;
+  --_d-border: 100%;
+  --_d-elevation: 0;
+
+  /* Typed text is the intent colour at full strength -- on the three text
+     inputs, not `text-control`, because a toggle's mark takes `box`'s composed
+     `--_fg` instead. */
+  --_fg: var(--intent-color);
+
+  min-height: var(--control-height);
+}
+
+@utility field {
+  --field-gap: 0.35rem;
+
+  @apply flex w-full flex-col gap-(--field-gap);
+}
+
+@utility label {
+  font-size: 1rem;
+  font-weight: 500;
+  letter-spacing: 0.025em;
+}
+
+@utility hint {
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+  font-weight: 400;
+  letter-spacing: 0.05em;
+  line-height: 100%;
+
+  &.error {
+    color: var(--intent-color);
+  }
+}
+
+/* A ghost, edged, unelevated multi-line text control. */
+@utility textarea {
+  @apply text-control px-3 py-2;
+
+  --_d-fill: 0%;
+  --_d-fg-on-fill: 0%;
+  --_d-border: 100%;
+  --_d-elevation: 0;
+
+  /* Typed text is the intent colour at full strength -- on the three text
+     inputs, not `text-control`, because a toggle's mark takes `box`'s composed
+     `--_fg` instead. */
+  --_fg: var(--intent-color);
+
+  @apply min-h-28 resize-y;
+}
+
+/* The same control with a native list behind it. The chevron is drawn from two
+   gradients rather than masked, because `appearance: none` removes the platform
+   arrow and a background image is the only thing a replaced element can paint. */
+@utility select {
+  @apply text-control h-(--control-height,2.5rem) py-2 pr-10 pl-3;
+
+  --_d-fill: 0%;
+  --_d-fg-on-fill: 0%;
+  --_d-border: 100%;
+  --_d-elevation: 0;
+
+  /* Typed text is the intent colour at full strength -- on the three text
+     inputs, not `text-control`, because a toggle's mark takes `box`'s composed
+     `--_fg` instead. */
+  --_fg: var(--intent-color);
+
+  min-height: var(--control-height);
+  background-image:
+    linear-gradient(45deg, transparent 50%, currentColor 50%),
+    linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position:
+    calc(100% - 1rem) center,
+    calc(100% - 0.6875rem) center;
+  background-repeat: no-repeat;
+  background-size: 0.3125rem 0.3125rem;
+}
+
+/* A wrapper that owns the field box so a control can carry adornments beside it
+   -- a leading or trailing icon today, an affix or an in-field button later. It
+   composes `text-control` for the border, radius, fill cap, aesthetic shape,
+   and the invalid and disabled handling a lone field carries; `:focus-within`
+   stands in for the `:focus-visible` a wrapper cannot have. The control inside
+   goes flush: its own box paint is switched off below, so the boundary is drawn
+   once, by the group.
+
+   No icons ship. Any element works in a slot -- an inline `<svg>`, an `<img>`,
+   or a class from an icon set such as `@codenhub/icons` -- placed before the
+   control for a leading adornment and after it for a trailing one. See
+   docs/usage/forms.md#icons. */
+@utility input-group {
+  @apply text-control flex w-full items-center gap-2;
+
+  /* After the `@apply`, for the reason `ipt` states it: `text-control` inlines
+     its own resting geometry there, so a default written above it loses to the
+     utility meant to specialise it. Ghost, edged, flat -- a field boundary and
+     nothing more. */
+  --_d-fill: 0%;
+  --_d-fg-on-fill: 0%;
+  --_d-border: 100%;
+  --_d-elevation: 0;
+
+  --input-group-pad: 0.75rem;
+
+  min-height: var(--control-height);
+  padding-inline: var(--input-group-pad);
+
+  /* The focus ring the wrapper cannot get from `:focus-visible` -- a `<div>` is
+     not focusable, and `:has(:focus-visible)` is unreliable because the inner
+     control only matches `:focus-visible` while the document itself has focus.
+     `:focus-within` is the honest stand-in: the `reset.css` outline every
+     control draws, plus `box`'s inset layer when a clipping aesthetic asks for
+     one, and the focus line tone a field states for itself. The control inside
+     drops its own ring below so the group shows one. The cost is that the ring
+     also shows on a mouse click, which a lone field's does not. */
+  &:focus-within {
+    --_line-tone: var(--intent-color);
+
+    outline: var(--focus-ring-width) solid var(--focus-ring);
+    outline-offset: var(--focus-ring-offset);
+    box-shadow: var(--_focus-stack, var(--_shadow));
+  }
+
+  /* A disabled control inside dims the whole group. `.input-group.disabled` and
+     the aria/data spellings are already handled by `box`'s own rule, carried in
+     by `text-control`; this is the child-driven case a wrapper cannot see
+     without `:has()`. */
+  &:has(> :is(.ipt, .textarea, .select, .text-control, input, textarea, select):disabled) {
+    @apply cursor-not-allowed;
+
+    opacity: 0.58;
+  }
+
+  /* The control goes flush: the group drew the box, so the control paints no
+     fill, no line and no ring, and gives its horizontal padding to the group.
+     `border: none` rather than a transparent 1px, so the control does not add
+     its own width inside the group. */
+  & > :is(.ipt, .textarea, .select, .text-control, input, textarea, select) {
+    --_fill-cap: 0%;
+
+    flex: 1 1 auto;
+    min-width: 0;
+    padding-inline: 0;
+    border: none;
+    background-color: transparent;
+    box-shadow: none;
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: none;
+    }
+  }
+
+  /* Anything else in the group -- an icon, affix text -- does not stretch and
+     reads as secondary. A nested `<button>` keeps its own styling. */
+  & > :not(.ipt, .textarea, .select, .text-control, input, textarea, select, button) {
+    @apply inline-flex flex-none items-center;
+
+    color: var(--color-text-secondary);
+  }
+}
+
+/* The three toggles compose `text-control` for its bounds, not its chrome: the
+   edge floor keeps a container's `.edgeless` from erasing the closed silhouette
+   (WCAG 1.4.11), and the checked state that lifts the fill bounds lives there.
+   They raise the fill cap to 20% -- the 6% one keeps typed text legible and a
+   toggle has none; 20% is a `.solid` badge's plate and separates the three
+   fills. `.ghost` is unsupported (an unchecked ghost toggle is the silhouette
+   it already has, a checked one a mark on nothing); the registry records it and
+   the checked fill floor clamps a cascaded one. See model.md#unsupported-values. */
+@utility checkbox {
+  @apply text-control inline-grid size-4 cursor-pointer place-content-center;
+
+  --_d-fill: 100%;
+  --_d-fg-on-fill: 100%;
+  --_fill-cap: 20%;
+  --_line-rest: 100%;
+  --_d-border: 100%;
+  --_d-elevation: 0;
+
+  /* Capped at its own radius: a control radius is sized for a 40px control, and
+     14px of it on a 16px box renders as a circle, which is the one shape a
+     checkbox must not be. A squaring aesthetic still reaches it. */
+  border-radius: min(var(--ui-radius, var(--radius-small)), var(--radius-small));
+
+  /* Chip geometry: the tight silhouette, and an inset edge no thicker than the
+     line the aesthetic draws elsewhere. A 16px box cannot spend four pixels a
+     side on an edge -- under `.pixel` that leaves an eight-pixel hole and an
+     unchecked box reads as a filled one. Our own aesthetic on our own component
+     produces that, so our own `min()` answers it. */
+  --_ss: min(var(--ui-shadow-spread, 0px), var(--ui-border-width, var(--border-width)));
+
+  clip-path: var(--ui-clip-tight, var(--ui-clip, none));
+
+  /* `text-control` trades the outline for its own line colour, which reads on a
+     40px field and not on a 16px box. The ring goes back as a shadow layer
+     rather than as an `outline`, so a clipping aesthetic clips it with
+     everything else and its own inset focus layer still paints over the top. */
+  &:focus-visible {
+    --_shadow: var(--_shadow-parts), 0 0 0 var(--focus-ring-width) var(--focus-ring);
+  }
+
+  &::after {
+    @apply block size-3 opacity-0 transition-opacity duration-(--motion-duration-normal) ease-(--motion-ease);
+
+    /* The mark takes the box's own foreground, which `box` already mixed against
+       this component's intent and fill, so a checked box in any intent has a
+       mark that reads against it. */
+    background-color: currentcolor;
+    content: "";
+    mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
+    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
+    mask-size: contain;
+    -webkit-mask-size: contain;
+  }
+
+  &:checked::after {
+    @apply opacity-100;
+  }
+}
+
+/* The same control with a round silhouette and a dot for its mark. */
+@utility radio {
+  @apply text-control inline-grid size-4 cursor-pointer place-content-center rounded-full;
+
+  --_d-fill: 100%;
+  --_d-fg-on-fill: 100%;
+  --_fill-cap: 20%;
+  --_line-rest: 100%;
+  --_d-border: 100%;
+  --_d-elevation: 0;
+
+  /* The inset edge is capped for the reason given on `checkbox`, but the
+     silhouette is not taken: the circle is the only thing telling a radio from a
+     checkbox at a glance, and a stepped polygon would square it. An inset shadow
+     follows `border-radius`, so the edge stays round without one. */
+  --_ss: min(var(--ui-shadow-spread, 0px), var(--ui-border-width, var(--border-width)));
+
+  clip-path: none;
+
+  /* The ring, for the reason given on `checkbox`. */
+  &:focus-visible {
+    --_shadow: var(--_shadow-parts), 0 0 0 var(--focus-ring-width) var(--focus-ring);
+  }
+
+  &::after {
+    @apply block size-2 scale-0 rounded-full opacity-0 transition-[transform,opacity] duration-(--motion-duration-normal) ease-(--motion-ease);
+
+    background-color: currentcolor;
+    content: "";
+  }
+
+  /* A checked radio thickens its ring and takes the intent whole on the line;
+     the fill is left to the presentation. The dot takes `box`'s composed
+     foreground, which walks to the contrast tone as the plate fills, so a
+     filled circle still carries a readable dot. `--_line-tone` rather than
+     `--_edge`, so `text-control`'s edge floor still draws the ring under a
+     container's `.edgeless`. */
+  &:checked {
+    --_line-tone: var(--intent-color);
+
+    /* Twice the line the aesthetic draws, which is the 2px the original pinned
+       at the default hairline, and capped so a thick aesthetic cannot close the
+       circle over its own dot: 3px leaves 10px of interior for an 8px mark. */
+    border-width: min(calc(var(--_width) * 2), 3px);
+  }
+
+  &:checked::after {
+    @apply scale-100 opacity-100;
+  }
+}
+
+/* A2: every dimension derives from the border width `box` resolved, so the knob
+   cannot drift out of a track a thick aesthetic widened. A switch caps its fill
+   higher than the other toggles because its track is the whole component. */
+@utility switch {
+  @apply text-control relative cursor-pointer;
+
+  --_d-fill: 100%;
+  --_d-fg-on-fill: 100%;
+  --_line-rest: 100%;
+  --_d-border: 100%;
+  --_d-elevation: 0;
+
+  /* 40%, measured: at `text-control`'s 6% the three fills collapsed to two looks
+     and the switch had to vary its *line* per fill class -- the one place a fill
+     class decided an edge. 40% separates all three (29/67/144 sRGB steps on the
+     light page, against ~20 for a visible one) without reaching a checked
+     track's 100%, so the knob's position still says which. `axes.spec.ts`
+     asserts all three. `--intent-fill-max` still caps neutral at 20%. A cap
+     rather than a resting value, because it answers the cascade case. */
+  --_fill-cap: 40%;
+
+  --switch-height: 1.25rem;
+  --switch-width: 2.5rem;
+  --switch-gap: 1px;
+  --switch-inset: calc(var(--_width) + var(--switch-gap));
+  --switch-knob: calc(var(--switch-height) - var(--switch-inset) * 2);
+  --switch-travel: calc(var(--switch-width) - var(--switch-inset) * 2 - var(--switch-knob));
+
+  height: var(--switch-height);
+  width: var(--switch-width);
+  /* Pill by default; a squaring aesthetic reaches the track and the knob together. */
+  border-radius: var(--ui-radius, calc(infinity * 1px));
+
+  /* Chip geometry, for the reason given on `checkbox`: a 20px track has no more
+     room for a thick inset edge than a 16px box does. */
+  --_ss: min(var(--ui-shadow-spread, 0px), var(--ui-border-width, var(--border-width)));
+
+  clip-path: var(--ui-clip-tight, var(--ui-clip, none));
+
+  /* The ring, for the reason given on `checkbox`. */
+  &:focus-visible {
+    --_shadow: var(--_shadow-parts), 0 0 0 var(--focus-ring-width) var(--focus-ring);
+  }
+
+  &::after {
+    @apply absolute transition-[translate,background-color] duration-(--motion-duration-normal) ease-(--motion-ease);
+
+    /* The knob is the one part that does not take the box's foreground: an
+       unchecked track is unfilled, so a knob in that colour would be the same
+       tone as the label beside it. Checked, it takes the mark colour like the
+       other two toggles. */
+    background-color: var(--color-text-secondary);
+    border-radius: var(--ui-radius, calc(infinity * 1px));
+    content: "";
+    height: var(--switch-knob);
+    width: var(--switch-knob);
+    top: var(--switch-gap);
+    inset-inline-start: var(--switch-gap);
+  }
+
+  &:checked::after {
+    background-color: currentcolor;
+    /* translate has no logical form, so the checked travel is named as a
+       physical x offset and mirrored under :dir(rtl) to travel toward the
+       opposite edge, matching the inset-inline-start resting position. */
+    translate: var(--switch-travel);
+
+    :dir(rtl) & {
+      translate: calc(-1 * var(--switch-travel));
+    }
+  }
+}
+
+@media (forced-colors: active) {
+  .checkbox,
+  .radio,
+  .switch {
+    /* Keep these explicit system colors from being forced back to transparent. */
+    forced-color-adjust: none;
+    background-color: Canvas;
+    border-color: CanvasText;
+    transition: none;
+  }
+
+  .checkbox:checked,
+  .radio:checked,
+  .switch:checked {
+    background-color: Highlight;
+    border-color: Highlight;
+
+    &::after {
+      background-color: HighlightText;
+    }
+  }
+
+  .text-control:focus-visible,
+  .ipt:focus-visible,
+  .textarea:focus-visible,
+  .select:focus-visible,
+  .checkbox:focus-visible,
+  .radio:focus-visible,
+  .switch:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+}

package/dist/tw/components/index.css

@@ -0,0 +1,18 @@
+@reference "tailwindcss";
+@import "tailwindcss/utilities.css";
+@source not "../../dist";
+@source not "../../tests";
+@source not "../../dev";
+@source not "../../debug";
+@source not "../../playground";
+@import "../theme.css";
+@import "../typography.css";
+@import "../box.css";
+@import "./button.css";
+@import "./feedback.css";
+@import "./form.css";
+@import "./loader.css";
+@import "./surface.css";
+@import "./tooltip.css";
+
+@source inline("text-display text-title-lg text-title text-title-sm text-label-lg text-label text-body btn field label hint ipt email password url tel search date datetime month week time icon left right textarea select checkbox radio switch alert badge skeleton progress tooltip card panel interactive flush compact spacious neutral solid soft ghost edged edgeless flat raised floating loader");