actual-css 0.1.0

package/src/css/dialog-fallback.css

@@ -0,0 +1,56 @@
+/*
+ * Legacy dialog fallback — presentation for the dialog-fallback.js shim
+ * (browsers without native <dialog>: Safari <= 15.3, Firefox <= 97).
+ *
+ * Isolated in its own file so a custom bundle can opt out by dropping this
+ * import; the JS side is disabled with data-dialog-fallback="false" on the
+ * root element or on a dialog. Must load before component styles so ties
+ * such as dialog.modal's padding resolve in the component's favor.
+ *
+ * The whole file is inert on modern browsers: rules key on the
+ * .dialog-fallback marker written by the shim, so browsers that support
+ * <dialog> but not :modal are never affected either.
+ */
+@supports not (selector(dialog:modal)) {
+  /* Browsers without native <dialog> ship no UA dialog styles at all;
+     approximate them. :where() keeps specificity at dialog[open] level so
+     component styles such as dialog.modal still override the emulation. */
+  dialog[open]:where(.dialog-fallback) {
+    position: absolute;
+    inset-inline: 0;
+    width: -moz-fit-content;
+    width: fit-content;
+    max-inline-size: calc(100% - 2rem);
+    margin: auto;
+    padding: var(--space-4, 1em);
+    border: var(--border-width, 1px) solid var(--border, currentColor);
+    background: var(--surface-raised, #fff);
+    color: var(--text, inherit);
+  }
+
+  /* Open modally: fixed near the top (no fit-content in the block axis on
+     these browsers, so no vertical centering) and above menus, below
+     tooltips. Legacy-only layer, hence no z-index token. The spread shadow is
+     the visible backdrop: the dialog is its own stacking context, where a
+     negative z-index child paints above the element's background, so the
+     dimming cannot live on the ::before. */
+  dialog[open].is-fallback-modal {
+    position: fixed;
+    inset-block: 8vh auto;
+    max-block-size: 84vh;
+    overflow: auto;
+    z-index: 40;
+    box-shadow: 0 0 0 100vmax var(--backdrop-fill, rgb(0 0 0 / 35%));
+  }
+
+  /* Transparent stand-in for ::backdrop, hit-testing only. Clicks on it hit
+     the dialog element outside its own box, which dialog.js already treats as
+     a backdrop click, and it blocks pointer interaction with the page behind
+     the modal. */
+  dialog[open].is-fallback-modal::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+  }
+}

package/src/css/focus.css

@@ -0,0 +1,13 @@
+/* Focus baseline — loaded after components so its legacy fallback also covers
+   controls that reset their native outline. Modern browsers hide it for focus
+   that is not keyboard-relevant; components layer local state on top. */
+:focus {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+}
+
+@supports selector(:focus-visible) {
+  :focus:not(:focus-visible) {
+    outline: none;
+  }
+}

package/src/css/forms/choice-card.css

@@ -0,0 +1,158 @@
+/*
+ * Choice cards — card-style radio and checkbox labels.
+ *
+ * Each .choice-card is a <label> wrapping a native radio or checkbox. When
+ * :has() is supported the input is visually hidden and the card mirrors its
+ * state: checked border and tint, checkmark badge (round for radio, rounded
+ * square for checkbox), focus ring, disabled dimming. Without :has() the
+ * native input stays visible so selection state never disappears.
+ *
+ * The badge overhangs the top-right corner by 0.375em; ancestors with
+ * overflow: hidden will clip it. Pair with grid or flex utilities for group
+ * layout.
+ */
+:where(.choice-card) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+.choice-card {
+  --choice-card-pad: var(--variant-space, var(--space-4));
+  --choice-card-radius: var(--radius);
+  --choice-card-border: var(--border);
+  --choice-card-bg: var(--surface);
+  --choice-card-check-size: 1.5em;
+
+  position: relative;
+  display: block;
+  padding: var(--choice-card-pad);
+  border: var(--border-width) solid var(--form-invalid-border, var(--choice-card-border));
+  border-radius: var(--choice-card-radius);
+  background: var(--choice-card-bg);
+  color: var(--text);
+  cursor: pointer;
+  transition:
+    border-color var(--duration),
+    background-color var(--duration),
+    box-shadow var(--duration);
+}
+
+/* The native input is visually hidden but stays focusable and participates in
+   form submission and keyboard navigation (sr-only pattern). Guarded: without
+   :has() the card cannot mirror the input's state, so the visible native
+   control is the fallback affordance. */
+@supports selector(:has(*)) {
+  .choice-card > :is(input[type="radio"], input[type="checkbox"]) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+/* Focus ring on the label follows the hidden input's focus. */
+.choice-card:has(:focus-visible) {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.choice-card:has(:disabled) {
+  opacity: var(--disabled-opacity);
+  cursor: not-allowed;
+}
+
+@media (hover: hover) {
+  .choice-card:hover:not(:has(:disabled)) {
+    --choice-card-border: var(--text-subtle);
+  }
+}
+
+/* Checked border — shared by radio and checkbox */
+.choice-card:has(:checked) {
+  --choice-card-border: var(--intent, var(--primary));
+}
+
+/* Subtle background tint on checked — modern browsers only */
+@supports (color: color-mix(in oklch, red, white)) {
+  .choice-card:has(:checked) {
+    --choice-card-bg: color-mix(in oklch, var(--surface) 96%, var(--intent, var(--primary)));
+  }
+}
+
+/* Checkmark badge — always rendered at scale(0) and scaled in on check, so
+   the entrance can transition (a pseudo created on :checked could not). */
+.choice-card::before,
+.choice-card::after {
+  content: "";
+  position: absolute;
+  inset-inline-end: -0.375em;
+  inset-block-start: -0.375em;
+  inline-size: var(--choice-card-check-size);
+  block-size: var(--choice-card-check-size);
+  transform: scale(0);
+  transition: transform var(--duration);
+}
+
+/* Badge disc — circle for radio, rounded square for checkbox */
+.choice-card::before {
+  background: var(--intent, var(--primary));
+  box-shadow: 0 0 0 2px var(--surface);
+  z-index: 1;
+}
+
+.choice-card:has(input[type="radio"])::before {
+  border-radius: var(--radius-full);
+}
+
+.choice-card:has(input[type="checkbox"])::before {
+  border-radius: var(--radius-sm);
+}
+
+/* Check mark */
+.choice-card::after {
+  background: var(--intent-fg, var(--primary-fg));
+  -webkit-mask: var(--icon-check-mask) center / 60% no-repeat;
+  mask: var(--icon-check-mask) center / 60% no-repeat;
+  z-index: 2;
+}
+
+.choice-card:has(:checked)::before,
+.choice-card:has(:checked)::after {
+  transform: scale(1);
+}
+
+@media (forced-colors: active) {
+  .choice-card {
+    --choice-card-border: ButtonText;
+    --choice-card-bg: Canvas;
+  }
+
+  .choice-card:has(:checked) {
+    --choice-card-border: Highlight;
+    /* Pin the background: with forced-color-adjust: none the color-mix tint
+       above would actually render, uncontrolled in high-contrast themes. */
+    --choice-card-bg: Canvas;
+    forced-color-adjust: none;
+  }
+
+  .choice-card:has(:checked)::before {
+    background: Highlight;
+    box-shadow: 0 0 0 2px Canvas;
+  }
+
+  .choice-card:has(:checked)::after {
+    background: HighlightText;
+  }
+}

package/src/css/forms/choice.css

@@ -0,0 +1,196 @@
+/*
+ * Checkbox and radio controls.
+ *
+ * Native inputs keep their behavior while sharing custom geometry, checked,
+ * focus, and disabled states across semantic forms and classed aliases. This
+ * file also owns the .choice label layout (input + label text) so the whole
+ * concept lives in one file.
+ *
+ * Switches (input[role="switch"]) are excluded so switch.css owns their
+ * geometry and states. switch.css is imported after this file.
+ */
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.choice, .check, .radio) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+/* A classed .choice is the component surface. Let its nested input consume a
+   local intent without reopening inherited page-level intents. */
+:where(.choice) :where(input[type="checkbox"]:not([role="switch"]), input[type="radio"]) {
+  --intent: inherit;
+  --intent-fg: inherit;
+}
+
+.choice {
+  --choice-control-offset: 0.25em;
+
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+  color: var(--text);
+  font-size: var(--control-font-size);
+  cursor: pointer;
+}
+
+/* Optical alignment: nudge the control down so the checkbox/radio sits
+   visually centered with the first line of label text, not flush with the
+   top of the line-box. Default 0.25em (~4px at 16px) places the control just
+   below the cap-height, matching what Bootstrap, Material, and most polished
+   form libraries ship. Multi-line labels still keep the control at the top
+   thanks to align-items: flex-start. Override per-instance via
+   --choice-control-offset for themes with a different line-height or control
+   size. */
+.choice > :is(input[type="checkbox"]:not([role="switch"]), input[type="radio"]) {
+  flex: 0 0 auto;
+  margin-block-start: var(--choice-control-offset);
+}
+
+.choice > span > .field-help {
+  display: block;
+}
+
+.choice:has(:disabled) {
+  color: var(--text-subtle);
+  cursor: not-allowed;
+}
+
+/* Control geometry. --choice-* are the per-state tokens. */
+.check,
+.radio {
+  --choice-border: var(--border);
+  --choice-bg: var(--surface);
+  --choice-mark: var(--primary-fg);
+
+  position: relative;
+  vertical-align: middle;
+  display: inline-grid;
+  place-content: center;
+  inline-size: 1.125em;
+  block-size: 1.125em;
+  margin-inline: 0;
+  margin-block-end: 0;
+  border: var(--border-width) solid var(--form-invalid-border, var(--choice-border));
+  background: var(--choice-bg);
+  color: var(--choice-mark);
+  appearance: none;
+  cursor: pointer;
+}
+
+.check {
+  border-radius: var(--radius-sm);
+}
+
+.radio {
+  border-radius: var(--radius-full);
+}
+
+.check::before,
+.radio::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  transform: scale(0);
+  transition: transform var(--duration);
+}
+
+.check::before {
+  inline-size: 0.58em;
+  block-size: 0.34em;
+  border-inline-start: 2px solid currentColor;
+  border-block-end: 2px solid currentColor;
+  transform: translateY(-0.06em) rotate(-45deg) scale(0);
+}
+
+.radio::before {
+  inline-size: 0.5em;
+  block-size: 0.5em;
+  border-radius: var(--radius-full);
+  background: currentColor;
+}
+
+.check:checked,
+.radio:checked {
+  --choice-border: var(--intent, var(--primary));
+  --choice-bg: var(--intent, var(--primary));
+  --choice-mark: var(--intent-fg, var(--primary-fg));
+}
+
+.check:checked::before {
+  transform: translateY(-0.06em) rotate(-45deg) scale(1);
+}
+
+.check:indeterminate {
+  --choice-border: var(--intent, var(--primary));
+  --choice-bg: var(--intent, var(--primary));
+  --choice-mark: var(--intent-fg, var(--primary-fg));
+}
+
+.check:indeterminate::before {
+  border-inline-start: 0;
+  inline-size: 0.6em;
+  block-size: 0;
+  border-block-end: 2px solid currentColor;
+  transform: scale(1);
+}
+
+.radio:checked::before {
+  transform: scale(1);
+}
+
+@media (hover: hover) {
+  .check:hover:not(:checked, :indeterminate, :disabled),
+  .radio:hover:not(:checked, :indeterminate, :disabled) {
+    --choice-border: var(--text-subtle);
+  }
+}
+
+.check:focus-visible,
+.radio:focus-visible {
+  --choice-border: var(--focus);
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.check:disabled,
+.radio:disabled {
+  --choice-bg: var(--surface-subtle);
+  --choice-border: var(--border);
+  --choice-mark: var(--text-subtle);
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+@media (forced-colors: active) {
+  .check,
+  .radio {
+    --choice-border: ButtonText;
+    --choice-bg: Canvas;
+    --choice-mark: ButtonText;
+  }
+
+  .check:checked,
+  .radio:checked,
+  .check:indeterminate {
+    --choice-border: Highlight;
+    --choice-bg: Highlight;
+    --choice-mark: HighlightText;
+    forced-color-adjust: none;
+  }
+
+  .check:disabled,
+  .radio:disabled {
+    --choice-border: GrayText;
+    --choice-bg: Canvas;
+    --choice-mark: GrayText;
+  }
+}

package/src/css/forms/control.css

@@ -0,0 +1,106 @@
+/*
+ * Text controls — input, textarea, select.
+ *
+ * Neutral geometry and interaction states shared across all text-like
+ * controls. select shares this base recipe; its chevron/appearance layer
+ * lives in select.css. checkbox, radio, range, switch, and file have their
+ * own files.
+ *
+ * --control-* are the per-state control tokens, reserved for control geometry.
+ * State selectors only flip tokens; non-text controls do not consume them, so
+ * matching those selectors is a no-op. The .field wrapper uses --field-*
+ * (form.css).
+ *
+ * --control-border-block-end-color/-width are unset extension points, mirroring
+ * --btn-border-block-end-* (button.css), for themes that give text controls an
+ * underline-style lower edge instead of a uniform border.
+ */
+.input,
+.textarea,
+.select {
+  --control-border: var(--border);
+  --control-bg: var(--surface);
+  --control-fg: var(--text);
+  --control-ring: none;
+  --control-cursor: auto;
+  --control-opacity: 1;
+
+  appearance: none;
+  inline-size: 100%;
+  min-block-size: var(--control-size);
+  padding-inline: var(--space-3);
+  border: var(--border-width) solid var(--form-invalid-border, var(--control-border));
+  border-block-end-color: var(
+    --form-invalid-border,
+    var(--control-border-block-end-color, var(--control-border))
+  );
+  border-block-end-width: var(--control-border-block-end-width, var(--border-width));
+  border-radius: var(--radius);
+  background: var(--control-bg);
+  color: var(--control-fg);
+  font-size: var(--control-font-size);
+  box-shadow: var(--control-ring);
+  cursor: var(--control-cursor);
+  opacity: var(--control-opacity);
+  outline: none;
+  transition:
+    border-color var(--duration),
+    box-shadow var(--duration),
+    background-color var(--duration),
+    color var(--duration);
+}
+
+.textarea {
+  min-block-size: 6rem;
+  padding-block: var(--space-2);
+  resize: vertical;
+}
+
+@media (hover: hover) {
+  .input:hover:not(:disabled),
+  .textarea:hover:not(:disabled) {
+    --control-border: var(--text-subtle);
+  }
+
+  .select:hover:not(:disabled) {
+    --control-bg: var(--surface-subtle);
+  }
+}
+
+.input:focus-visible,
+.textarea:focus-visible,
+.select:focus-visible {
+  --control-border: var(--focus);
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.input[readonly],
+.textarea[readonly] {
+  --control-bg: var(--surface-subtle);
+  --control-border: var(--border);
+}
+
+.input:disabled,
+.textarea:disabled,
+.select:disabled {
+  --control-bg: var(--surface-subtle);
+  --control-fg: var(--text-subtle);
+  --control-border: var(--border);
+  --control-cursor: not-allowed;
+  --control-opacity: 1;
+}
+
+.input::placeholder,
+.textarea::placeholder {
+  color: var(--text-muted);
+}
+
+@media (forced-colors: active) {
+  .input:focus-visible,
+  .textarea:focus-visible,
+  .select:focus-visible {
+    box-shadow: none;
+  }
+}

package/src/css/forms/custom-select.css

@@ -0,0 +1,93 @@
+/*
+ * Customizable select — appearance: base-select picker enhancement.
+ *
+ * Progressive enhancement on top of the native .select baseline in select.css.
+ * Wrapped in @supports and gated on fine pointer devices so it never blocks a
+ * layout. Add .native to a specific select to opt out.
+ *
+ * No layout or interaction contract may depend on appearance: base-select.
+ * Arbitrary menu and popover behavior belongs elsewhere.
+ */
+@media (forced-colors: none) and (prefers-contrast: no-preference) and (hover: hover) and (
+    pointer: fine
+  ) {
+  @supports (appearance: base-select) {
+    .select:not([multiple], .native, [size]:not([size="1"])) {
+      appearance: base-select;
+      align-items: center;
+
+      &::picker(select) {
+        appearance: base-select;
+        max-height: min(24rem, calc(var(--viewport-block) * 0.7));
+        margin-block: var(--space-2);
+        padding: 0;
+        border: var(--border-width) solid var(--border);
+        border-radius: var(--radius);
+        background-color: var(--surface-raised);
+        color: inherit;
+        box-shadow: var(--shadow-popout);
+      }
+
+      &:open {
+        --control-border: var(--border);
+        --control-bg: var(--surface-raised);
+        outline: none;
+        box-shadow: var(--focus-ring-shadow);
+      }
+
+      &::picker-icon {
+        display: none;
+      }
+
+      & option {
+        position: relative;
+        padding-block: var(--space-2);
+        padding-inline: var(--space-3);
+        white-space: normal;
+        transition-property: color, background-color;
+        transition-duration: var(--duration);
+
+        &:not(:disabled):hover {
+          background-color: var(--surface-subtle);
+          color: var(--text);
+          cursor: pointer;
+        }
+
+        &:not(:disabled):focus-visible {
+          background-color: var(--primary);
+          color: var(--primary-fg);
+          outline: none;
+        }
+
+        &:active {
+          background-color: var(--surface-subtle);
+          color: var(--text);
+        }
+
+        &::checkmark {
+          content: "";
+          display: block;
+          inline-size: 1rem;
+          block-size: 1rem;
+          background-color: currentColor;
+          -webkit-mask-image: var(--icon-check-mask);
+          mask-image: var(--icon-check-mask);
+          -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+          -webkit-mask-size: contain;
+          mask-size: contain;
+          -webkit-mask-position: center;
+          mask-position: center;
+        }
+      }
+
+      & optgroup {
+        padding-block-start: 0.5em;
+
+        & option:first-child {
+          margin-block-start: 0.5em;
+        }
+      }
+    }
+  }
+}

package/src/css/forms/form-actions.css

@@ -0,0 +1,43 @@
+/*
+ * Form actions — bottom form bar with sticky variant.
+ *
+ * A flex cluster of buttons/actions that closes a form. The sticky variant
+ * docks to the viewport bottom with a translucent blur where supported; at
+ * rest it stays visually neutral so it does not double as a separator.
+ */
+.form-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap);
+  align-items: center;
+  margin-block-start: var(--form-actions-margin-block-start, var(--space-5));
+}
+
+/* Opt-in sticky variant. When the bar is not stuck (at rest) the translucent
+   surface and backdrop-blur are visually neutral. Content scrolling behind
+   the bar reveals the blur as a natural separator instead of relying on a
+   shadow. */
+.form-actions.sticky {
+  position: sticky;
+  inset-block-end: var(--form-actions-sticky-block-offset, 0px);
+  z-index: var(--z-sticky);
+  isolation: isolate;
+
+  margin-inline: calc(var(--form-actions-sticky-inline-offset, 0px) * -1);
+  padding: var(--form-actions-sticky-padding, var(--space-3));
+
+  border-block-start: var(--border-width) solid var(--border);
+  background: var(--surface);
+  -webkit-backdrop-filter: blur(1rem);
+  backdrop-filter: blur(1rem);
+}
+
+/* The translucent surface needs @supports, not a double declaration: the
+   value contains var(), so a browser without color-mix() cannot reject it at
+   parse time — it wins the cascade, then fails at computed-value time and
+   the background disappears instead of falling back to the opaque line. */
+@supports (background: color-mix(in oklch, red 50%, transparent)) {
+  .form-actions.sticky {
+    background: color-mix(in oklch, var(--surface) 88%, transparent);
+  }
+}