actual-css 0.1.0

package/src/css/forms/form.css

@@ -0,0 +1,57 @@
+/*
+ * Form layout and supporting text.
+ *
+ * Individual controls keep their own files; .choice label layout lives in
+ * choice.css; .form-actions lives in form-actions.css.
+ *
+ * Public API: .field, .field-label, .field-help, .field-error, .field-group,
+ * .required-mark.
+ */
+.field {
+  display: grid;
+  gap: var(--space-1);
+  color: var(--text);
+}
+
+.field-group {
+  min-inline-size: 0;
+  margin: 0;
+  padding: var(--space-3);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius);
+}
+
+.field-group + .field-group {
+  margin-block-start: var(--space-4);
+}
+
+.field-label,
+.field-group > legend {
+  color: var(--text);
+  font-weight: var(--font-weight-strong);
+}
+
+.field-group > legend {
+  padding-block: 0;
+  padding-inline: var(--fieldset-legend-padding-inline, var(--space-1));
+  font-size: var(--font-size-xs);
+}
+
+.field-help {
+  color: var(--text-muted);
+  font-size: var(--font-size-sm);
+}
+
+.field-error {
+  display: none;
+  color: var(--danger);
+  font-size: var(--font-size-sm);
+}
+
+.required-mark {
+  color: var(--danger);
+}
+
+.field.danger .field-help {
+  color: var(--danger);
+}

package/src/css/forms/index.css

@@ -0,0 +1,15 @@
+/* Forms — import order matters: switch.css must follow choice.css so its
+   :not([role="switch"]) exclusion in choice.css still applies.
+   validation.css is part of the default forms bundle, but custom builds may
+   omit it when validation styling is app-owned. */
+@import "./form.css";
+@import "./control.css";
+@import "./input-icon.css";
+@import "./choice.css";
+@import "./choice-card.css";
+@import "./select.css";
+@import "./custom-select.css";
+@import "./native.css";
+@import "./switch.css";
+@import "./validation.css";
+@import "./form-actions.css";

package/src/css/forms/input-icon.css

@@ -0,0 +1,36 @@
+/*
+ * Input Icon — leading decorative icon inside a relative wrapper.
+ *
+ * Icon-library agnostic: selects the wrapper's first child rather than a
+ * specific tag, so it works with an <i> webfont icon, an inline <svg>, or a
+ * <span>. Sizes with --variant-icon-size (variants.css) so .sm/.lg pick up
+ * the same icon scale used elsewhere (alert.css); the input's start padding
+ * grows to match so text never runs under the icon.
+ */
+.input-icon {
+  --input-icon-size: var(--variant-icon-size, 1.25rem);
+
+  display: block;
+  position: relative;
+}
+
+.input-icon > :first-child {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: var(--space-3);
+  transform: translateY(-50%);
+  font-size: var(--input-icon-size);
+  color: var(--text-muted);
+  pointer-events: none;
+}
+
+/* font-size only sizes text-metric icons (webfont <i>, <span>). An inline
+   <svg> with just a viewBox ignores it, so give it explicit dimensions. */
+.input-icon > svg:first-child {
+  inline-size: var(--input-icon-size);
+  block-size: var(--input-icon-size);
+}
+
+.input-icon > .input {
+  padding-inline-start: calc(var(--space-3) * 2 + var(--input-icon-size));
+}

package/src/css/forms/native.css

@@ -0,0 +1,68 @@
+/*
+ * Native-only control polish: file and range inputs that defeat most custom
+ * styling, so the framework stays out of their way and just keeps them readable
+ * and theme-aware.
+ */
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.range) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+.file {
+  color: var(--text-muted);
+}
+
+.file::file-selector-button {
+  margin-inline-end: var(--space-3);
+  padding-block: var(--space-1);
+  padding-inline: var(--space-2);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface-subtle);
+  color: var(--text);
+  font: inherit;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition:
+    background-color var(--duration),
+    border-color var(--duration),
+    color var(--duration);
+}
+
+.file:disabled::file-selector-button {
+  cursor: not-allowed;
+}
+
+@media (hover: hover) {
+  .file:not(:disabled)::file-selector-button:hover {
+    background: var(--border);
+  }
+}
+
+.range {
+  inline-size: 100%;
+  accent-color: var(--intent, var(--primary));
+}
+
+.file:focus-visible,
+.range:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+  box-shadow: var(--focus-ring-shadow);
+}
+
+@media (forced-colors: active) {
+  .file:focus-visible,
+  .range:focus-visible {
+    box-shadow: none;
+  }
+}

package/src/css/forms/select.css

@@ -0,0 +1,36 @@
+/*
+ * Select — chevron and appearance layer on top of the shared text-control
+ * recipe.
+ *
+ * Base geometry and interaction states come from control.css (select shares
+ * the --control-* tokens). This file only removes the native arrow and draws
+ * the CSS chevron, so the picker (appearance: base-select) enhancement in
+ * custom-select.css can be opted out independently. Add .native to a specific
+ * select to opt out of the enhancement.
+ */
+.select:is(:not([multiple], [size]), :not([multiple])[size="1"]) {
+  appearance: none;
+  padding-inline-end: calc(var(--space-3) + var(--space-6));
+  background-image: var(--icon-chevron-image);
+  background-position: center right var(--space-3);
+  background-size: 1rem auto;
+  background-repeat: no-repeat;
+}
+
+/* The chevron sits on the inline-end side; flip it in RTL so it follows
+   the padding-inline-end space reserved for it. */
+.select:is(:not([multiple], [size]), :not([multiple])[size="1"]):dir(rtl) {
+  background-position: center left var(--space-3);
+}
+
+/* Both forced-colors and prefers-contrast hand the arrow back to the
+   browser instead of guessing a higher-contrast recolor of our own icon —
+   simpler than maintaining contrast variants, and native rendering already
+   matches whatever contrast mode the user picked. */
+@media (forced-colors: active), (prefers-contrast: more) {
+  .select:is(:not([multiple], [size]), :not([multiple])[size="1"]) {
+    appearance: auto;
+    background-image: none;
+    padding-inline-end: var(--space-3);
+  }
+}

package/src/css/forms/switch.css

@@ -0,0 +1,127 @@
+/*
+ * Switch controls for checkbox inputs with switch semantics.
+ *
+ * The switch remains an input control, not a decorative toggle. Checked, hover,
+ * focus-visible, and disabled states stay clear.
+ */
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.switch) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+.switch {
+  --switch-bg: var(--border);
+  --switch-border: var(--border);
+  --switch-knob: var(--surface-raised);
+  --switch-width: calc(var(--control-size) * 1.16);
+  --switch-block-size: calc(var(--control-size) * 0.63);
+  --switch-knob-margin: calc(var(--switch-block-size) * 0.12);
+  --switch-knob-size: calc(var(--switch-block-size) - 2 * var(--switch-knob-margin));
+  --switch-travel: calc(
+    var(--switch-width) -
+    var(--switch-knob-size) -
+    2 *
+    var(--border-width) -
+    2 *
+    var(--switch-knob-margin)
+  );
+
+  position: relative;
+  display: inline-grid;
+  align-items: center;
+  justify-content: start;
+  inline-size: var(--switch-width);
+  block-size: var(--switch-block-size);
+  margin: 0;
+  border: var(--border-width) solid var(--form-invalid-border, var(--switch-border));
+  border-radius: var(--radius-full);
+  background: var(--switch-bg);
+  appearance: none;
+  cursor: pointer;
+}
+
+.switch::before {
+  content: "";
+  inline-size: var(--switch-knob-size);
+  block-size: var(--switch-knob-size);
+  margin-inline: var(--switch-knob-margin);
+  border-radius: var(--radius-full);
+  background: var(--switch-knob);
+  box-shadow: var(--shadow);
+  transition:
+    transform var(--duration),
+    background-color var(--duration),
+    box-shadow var(--duration);
+}
+
+@media (hover: hover) {
+  .switch:hover:not(:disabled) {
+    --switch-border: var(--intent, var(--primary));
+  }
+}
+
+.switch:checked {
+  --switch-bg: var(--intent, var(--primary));
+  --switch-border: var(--intent, var(--primary));
+  --switch-knob: var(--intent-fg, var(--primary-fg));
+}
+
+.switch:checked::before {
+  transform: translateX(var(--switch-travel));
+}
+
+/* The knob travels toward inline-end; in RTL that is leftward, so the
+    translateX sign flips. translateX is physical, not logical. */
+.switch:checked:dir(rtl)::before {
+  transform: translateX(calc(var(--switch-travel) * -1));
+}
+
+.switch:focus-visible {
+  --switch-border: var(--focus);
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.switch:disabled {
+  --switch-bg: var(--surface-subtle);
+  --switch-border: var(--border);
+  --switch-knob: var(--text-subtle);
+  opacity: 1;
+  cursor: not-allowed;
+}
+
+@media (forced-colors: active) {
+  /* --switch-knob must be set on the element, not on ::before: a custom
+     property declared on the pseudo would shadow the :checked override. */
+  .switch {
+    --switch-border: ButtonText;
+    --switch-knob: ButtonText;
+  }
+
+  .switch::before {
+    box-shadow: none;
+  }
+
+  .switch:checked {
+    --switch-bg: Highlight;
+    --switch-border: Highlight;
+    --switch-knob: HighlightText;
+    forced-color-adjust: none;
+  }
+
+  .switch:disabled {
+    --switch-bg: Canvas;
+    --switch-border: GrayText;
+    --switch-knob: GrayText;
+    forced-color-adjust: auto;
+  }
+}

package/src/css/forms/validation.css

@@ -0,0 +1,63 @@
+/*
+ * Form validation states.
+ *
+ * Imported by default through forms/index.css. Custom builds may omit this
+ * file when an app wants to own validation styling completely.
+ */
+
+.field.danger {
+  --form-invalid-border: var(--danger);
+}
+
+.field.danger > .field-error {
+  display: block;
+}
+
+@supports selector(:has(*)) {
+  .field:has([aria-invalid="true"]) > .field-error,
+  .needs-validation.was-validated .field:has(:invalid) > .field-error {
+    display: block;
+  }
+}
+
+:where(.input, .textarea, .select, .check, .radio, .switch)[aria-invalid="true"],
+.needs-validation.was-validated :is(.input, .textarea, .select, .check, .radio, .switch):invalid {
+  --form-invalid-border: var(--danger);
+}
+
+/* Override checked/indeterminate background so both border and fill signal
+   danger instead of showing a red border around a primary-colored control. */
+.check[aria-invalid="true"]:is(:checked, :indeterminate),
+.radio[aria-invalid="true"]:checked {
+  --choice-bg: var(--danger);
+}
+
+.switch[aria-invalid="true"]:checked {
+  --switch-bg: var(--danger);
+}
+
+/* Choice cards hide their native input, so invalid state must surface on the
+   card itself. Sets the same --form-invalid-border hook the card's border
+   consumes. */
+@supports selector(:has(*)) {
+  .choice-card:has([aria-invalid="true"]),
+  .needs-validation.was-validated .choice-card:has(:invalid) {
+    --form-invalid-border: var(--danger);
+  }
+}
+
+@supports selector(:user-invalid) {
+  .needs-validation :is(.input, .textarea, .select, .check, .radio, .switch):user-invalid {
+    --form-invalid-border: var(--danger);
+  }
+}
+
+@supports selector(:has(:user-invalid)) {
+  .needs-validation .field:has(:user-invalid) > .field-error {
+    display: block;
+  }
+
+  .needs-validation .choice-card:has(:user-invalid) {
+    --form-invalid-border: var(--danger);
+  }
+}

package/src/css/grid.css

@@ -0,0 +1,95 @@
+.grid {
+  display: grid;
+  gap: var(--gap);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr));
+}
+
+/* Query-container wrapper that opts .grid-2/3/4/6 into responsive
+ * collapse. Wrap a .grid-2/3/4/6 inside .container-query to make the
+ * column count collapse on narrow wrappers. Without this wrapper,
+ * .grid-2/3/4/6 stay at their full column count. */
+/* Fixed-column grids at their full count by default.
+ *   .grid-2: 2 cols
+ *   .grid-3: 3 cols
+ *   .grid-4: 4 cols
+ *   .grid-6: 6 cols
+ * When placed inside .container-query, the column count collapses
+ * on narrow wrappers. The intermediate 2-col step applies to
+ * .grid-3/.grid-4; .grid-6 starts at 2 columns because it is meant
+ * for compact items that do not need a full single-column stack.
+ *   .grid-2: 1 col -> 2 cols
+ *   .grid-3: 1 col -> 2 cols -> 3 cols
+ *   .grid-4: 1 col -> 2 cols -> 4 cols
+ *   .grid-6: 2 cols -> 3 cols -> 6 cols */
+.grid-2,
+.grid-3,
+.grid-4,
+.grid-6 {
+  display: grid;
+  gap: var(--gap);
+}
+
+.grid-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.grid-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.grid-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+.grid-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+@container (width < 28rem) {
+  .container-query .grid-2,
+  .container-query .grid-3,
+  .container-query .grid-4 {
+    grid-template-columns: 1fr;
+  }
+
+  .container-query .grid-6 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container (28rem <= width < 48rem) {
+  .container-query .grid-3,
+  .container-query .grid-4 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container (28rem <= width < 64rem) {
+  .container-query .grid-6 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@supports not (container-type: inline-size) {
+  @media (max-width: 63.999rem) {
+    .container-query .grid-6 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 47.999rem) {
+    .container-query .grid-3,
+    .container-query .grid-4 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 27.999rem) {
+    .container-query .grid-2,
+    .container-query .grid-3,
+    .container-query .grid-4 {
+      grid-template-columns: 1fr;
+    }
+
+    .container-query .grid-6 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+}

package/src/css/intents.css

@@ -0,0 +1,33 @@
+/*
+ * Intent classes do not style elements directly.
+ * They only expose --intent and --intent-fg.
+ * Components and variants decide how to consume them. Each component that
+ * consumes --intent or --ui-* must open a local intent boundary in a :where()
+ * block that resets --intent / --intent-fg / --ui-* to initial. Parent intents
+ * do not leak into nested components. Local intent classes (.primary, .danger,
+ * etc.) still apply because they have higher specificity than :where().
+ */
+.primary {
+  --intent: var(--primary);
+  --intent-fg: var(--primary-fg);
+}
+.secondary {
+  --intent: var(--secondary);
+  --intent-fg: var(--secondary-fg);
+}
+.success {
+  --intent: var(--success);
+  --intent-fg: var(--success-fg);
+}
+.warning {
+  --intent: var(--warning);
+  --intent-fg: var(--warning-fg);
+}
+.danger {
+  --intent: var(--danger);
+  --intent-fg: var(--danger-fg);
+}
+.neutral {
+  --intent: var(--neutral);
+  --intent-fg: var(--neutral-fg);
+}

package/src/css/layout.css

@@ -0,0 +1,80 @@
+.container-query {
+  container-type: inline-size;
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+}
+
+.stack > * {
+  margin: 0;
+}
+
+.cluster {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: var(--cluster-align, center);
+  justify-content: var(--cluster-justify, flex-start);
+  gap: var(--gap);
+}
+
+.center {
+  box-sizing: content-box;
+  max-inline-size: var(--center-size, 72rem);
+  margin-inline: auto;
+  padding-inline: var(--center-pad, 1rem);
+}
+
+.frame {
+  overflow: hidden;
+  aspect-ratio: var(--frame-ratio, 16 / 9);
+}
+
+.frame > :where(img, video, iframe, canvas, svg) {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+.app-shell {
+  min-block-size: var(--viewport-block);
+  display: flex;
+  flex-direction: column;
+}
+
+/* Media object: fixed-width leading element (avatar, icon, image) + flexible
+   trailing content. Replaces the repeated "auto minmax(0, 1fr)" pattern in
+   author cards, comments, meta rows, and similar compositions. */
+.media {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--gap);
+  align-items: start;
+}
+
+/* Sidebar layout: content + aside using grid. Use this when the aside is
+   sticky or the content is multi-section. The aside width is tunable with
+   --sidebar-layout-size. */
+.sidebar-layout {
+  display: grid;
+  gap: var(--gap);
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@container (width >= 64rem) {
+  .container-query .sidebar-layout {
+    grid-template-columns: minmax(0, 1fr) var(--sidebar-layout-size, 18rem);
+    align-items: start;
+  }
+}
+
+@supports not (container-type: inline-size) {
+  @media (min-width: 64rem) {
+    .container-query .sidebar-layout {
+      grid-template-columns: minmax(0, 1fr) var(--sidebar-layout-size, 18rem);
+      align-items: start;
+    }
+  }
+}

package/src/css/optional/index.css

@@ -0,0 +1,5 @@
+@import "scroller.css";
+@import "scroll-snap.css";
+@import "typography-fluid.css";
+@import "utilities-extra.css";
+@import "layout-extra.css";

package/src/css/optional/layout-extra.css

@@ -0,0 +1,55 @@
+/*
+ * Additional layout primitives not included in the core bundle.
+ *
+ * Import this file explicitly when a project needs these patterns.
+ */
+.switcher {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap);
+}
+
+.switcher > * {
+  flex-basis: calc((var(--switcher-threshold, 40rem) - 100%) * 999);
+  flex-grow: 1;
+  min-inline-size: 0;
+}
+
+/*
+ * Sticky, frosted top bar shell for app/dashboard shells (persistent
+ * sidebar + topbar layouts). Owns positioning, stacking, and the frosted
+ * background only — row content (search, breadcrumb, actions) stays local
+ * to the page.
+ *
+ * Not for marketing/editorial site headers — those are one-off visual
+ * identity per page; see docs/patterns.md's Header Navigation section.
+ * This is for the structural app-shell topbar, which recurs unchanged
+ * across app UIs regardless of brand.
+ */
+.topbar {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: var(--z-sticky);
+  isolation: isolate;
+  display: flex;
+  align-items: center;
+  gap: var(--gap);
+  padding-block: var(--space-3);
+  padding-inline: var(--space-4);
+  border-block-end: var(--border-width) solid var(--border);
+  background: var(--surface);
+}
+
+/* Both conditions are required: the translucent background contains var(),
+   so a browser with backdrop-filter but not color-mix (e.g. Safari < 16.2)
+   would accept the declaration at parse time, fail it at computed-value
+   time, and lose the background entirely instead of keeping the opaque
+   fallback above. */
+@supports ((backdrop-filter: blur(1rem)) or (-webkit-backdrop-filter: blur(1rem))) and
+  (background: color-mix(in oklch, red 50%, transparent)) {
+  .topbar {
+    background: color-mix(in oklch, var(--surface) 88%, transparent);
+    backdrop-filter: blur(0.75rem);
+    -webkit-backdrop-filter: blur(0.75rem);
+  }
+}