actual-css 0.4.2 → 0.6.0

package/docs/pages/utilities/spacing.md

@@ -4,25 +4,32 @@ Semantic step helpers for gap, padding, and margin — the most common inline-st
 
 ## Class reference
 
-| Class                       | Kind    | Description                                                   |
-|-----------------------------|---------|---------------------------------------------------------------|
-| `.gap-none`                 | Utility | `gap: 0` on the element itself.                               |
-| `.py`                       | Utility | Block (vertical) padding at the current density step.         |
-| `.px`                       | Utility | Inline (horizontal) padding at the current density step.      |
-| `.mbs`                      | Utility | Block-start margin at the current density step.               |
-| `.mbe`                      | Utility | Block-end margin at the current density step.                 |
-| `.gap-sm`                   | Utility | `gap: var(--space-20)` — denser row rhythm. Optional layer.   |
-| `.gap-md`                   | Utility | `gap: var(--space-40)` — default row rhythm. Optional layer.  |
-| `.gap-lg`                   | Utility | `gap: var(--space-50)` — roomier row rhythm. Optional layer.  |
-| `.padding-context`          | Utility | All-side padding at the current density step. Optional layer. |
-| `.gap-context`              | Utility | `gap: var(--gap)`. Optional layer.                            |
-| `.row-gap-context`          | Utility | `row-gap: var(--gap)`. Optional layer.                        |
-| `.column-gap-context`       | Utility | `column-gap: var(--gap)`. Optional layer.                     |
-| `.margin-inline-auto`       | Utility | Horizontally centers a block. Optional layer.                 |
-| `.margin-inline-start-auto` | Utility | Pushes a block toward the inline end. Optional layer.         |
-| `.margin-inline-end-auto`   | Utility | Pushes a block toward the inline start. Optional layer.       |
-| `.margin-block-start-auto`  | Utility | Pushes content toward the block end. Optional layer.          |
-| `.margin-block-end-auto`    | Utility | Pushes content toward the block start. Optional layer.        |
+Base utilities:
+
+| Class       | Description                                              |
+| ----------- | -------------------------------------------------------- |
+| `.gap-none` | `gap: 0` on the element itself.                          |
+| `.py`       | Block (vertical) padding at the current density step.    |
+| `.px`       | Inline (horizontal) padding at the current density step. |
+| `.mbs`      | Block-start margin at the current density step.          |
+| `.mbe`      | Block-end margin at the current density step.            |
+
+Extra utilities:
+
+| Class                       | Description                                   |
+| --------------------------- | --------------------------------------------- |
+| `.gap-sm`                   | `gap: var(--space-20)` — denser row rhythm.   |
+| `.gap-md`                   | `gap: var(--space-40)` — default row rhythm.  |
+| `.gap-lg`                   | `gap: var(--space-50)` — roomier row rhythm.  |
+| `.padding-context`          | All-side padding at the current density step. |
+| `.gap-context`              | `gap: var(--gap)`.                            |
+| `.row-gap-context`          | `row-gap: var(--gap)`.                        |
+| `.column-gap-context`       | `column-gap: var(--gap)`.                     |
+| `.margin-inline-auto`       | Horizontally centers a block.                 |
+| `.margin-inline-start-auto` | Pushes a block toward the inline end.         |
+| `.margin-inline-end-auto`   | Pushes a block toward the inline start.       |
+| `.margin-block-start-auto`  | Pushes content toward the block end.          |
+| `.margin-block-end-auto`    | Pushes content toward the block start.        |
 
 Spacing helpers follow the density context. The default step is
 `--space-40` (1rem); the `.sm` context tightens it to `--space-20` (0.5rem)

package/docs/pages/utilities/text.md

@@ -5,7 +5,7 @@ Lightweight helpers for muted or secondary text without a full color scale.
 ## Class reference
 
 | Class           | Kind    | Description                                              |
-|-----------------|---------|----------------------------------------------------------|
+| --------------- | ------- | -------------------------------------------------------- |
 | `.muted`        | Utility | Secondary text color.                                    |
 | `.text-start`   | Utility | Logical start-aligned text; sets `--text-align`.         |
 | `.text-center`  | Utility | Centered text; sets `--text-align`.                      |

package/llms.txt

@@ -16,19 +16,37 @@ Actual CSS uses a small public grammar: `.component [intent] [variant] [size] [m
 - `actual-css/full` — the complete framework: core plus every component, form, layout, typography, effect, and utility family.
 - `actual-css/js` — the enhancement loader only; it discovers `data-enhance` markers and loads enhancers on demand.
 - `actual-css/js/full` — the complete runtime with all built-in enhancers pre-registered.
-- `actual-css/reserved-classes.json` — machine-readable list of every class name the framework can generate. Use it to validate class usage in HTML (an "unknown class" checker) instead of guessing names from other frameworks.
+- `actual-css/reserved-classes.json` — machine-readable list of the framework-owned class namespace. Use it to check whether a class belongs to Actual CSS and to validate claimed framework classes; application-specific classes are expected to exist outside this manifest.
 - Individual families and modules are importable separately (`actual-css/css/components`, `actual-css/css/layout/grid`, `actual-css/js/dialog`, …); see [README](README.md) and [Modular imports](docs/pages/guides/modular-import.md).
 
+Forms are the one family with two aggregate entrypoints:
+`actual-css/css/forms` is the native-control baseline; use
+`actual-css/css/forms/all` for the complete forms family.
+
 The composition guides in [README](README.md) and [Progressive Enhancements](docs/pages/enhancements/overview.md)
 show supported CSS modules and individual enhancer imports without duplicating
 the full export list here.
 
 Presentation (`class`) and behavior (`data-enhance`) are separate layers.
-Behaviour primitives (`enhance`, `floating`, `surface`, `keys`, `menu`, `focus`,
-`events`) are independently importable for building custom widgets.
-See [enhancement contract](docs/design-notes/enhancement-contract.md) and
+Behaviour primitives are independently importable for building custom widgets,
+including `enhance`, `surface`, `floating`, `focus-group`, `keys`, `input`,
+`command`, `menu`, `focus`, `escape`, and `events`. See
+[enhancement contract](docs/design-notes/enhancement-contract.md) and
 [widget primitives](docs/design-notes/widget-primitives.md).
 
+## Choosing a page shell
+
+Before choosing a content layout, choose the page shell:
+
+- Normal scrolling page, marketing/editorial site, or ordinary application page
+  → semantic landmarks; optionally `.app-shell` and `.navbar`.
+- Persistent topbar + independently scrolling main + adaptive bottom/side
+  primary navigation → `.app-layout`.
+
+Do not choose `.app-layout` merely because the product is an application. Its
+viewport-sized shell, internal scrolling, and adaptive navigation are one
+combined contract. See [layout choices](docs/pages/layout/choosing.md).
+
 ## Choosing a layout primitive
 
 Pick from the relationship between children, not the number of children in one mockup:
@@ -41,6 +59,11 @@ Pick from the relationship between children, not the number of children in one m
 - Explicit region placement on a shared 12-column canvas → `.column-layout`
 - Vertical flow → `.stack`; wrapping inline items → `.cluster`
 
+`.container-query` establishes the framework's shared
+`actual-container / inline-size` container for components that explicitly
+respond to allocated space; it is not a general prerequisite for responsive
+layouts.
+
 Use `--grid-columns` on `.grid` for exact track templates that do not match a
 built-in layout contract: arbitrary structural counts (seven calendar days),
 asymmetric fractional tracks, or mixed intrinsic/flexible tracks. See

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "actual-css",
-  "version": "0.4.2",
+  "version": "0.6.0",
   "description": "Plain CSS component framework with semantic classes, universal variants, small tokens, theme hooks, and progressive enhancements.",
   "type": "module",
   "packageManager": "bun@1.4.0",
@@ -115,6 +115,7 @@
     "build:docs": "bun run build:themes && bun scripts/build-docs.js",
     "watch:docs": "bun run build:themes && bun scripts/build-docs.js --watch",
     "check:docs": "bun scripts/check-docs.js",
+    "format:docs": "bun scripts/format-doc-tables.js",
     "check:doc-classes": "bun scripts/check-doc-classes.js",
     "check:compat": "bun scripts/check-compat.js",
     "check:css-api": "bun scripts/check-css-api.js",
@@ -136,7 +137,7 @@
     "check:sync": "bun scripts/check-sync.js",
     "test": "bun test",
     "test:changed": "bun test --changed=master",
-    "build:all": "bun run lint && bun run build:dist && bun run build:js && bun run build:docs && bun run check:docs && bun run check:doc-classes && bun run check:compat && bun run check:css-api && bun run check:color-space && bun run check:architecture && bun run check:enhance && bun run generate:reserved && bun run check:reserved && bun run check:sync && bun run check:links && bun run check:templates && bun run test && bun run build:size",
+    "build:all": "bun run lint && bun run build:dist && bun run build:js && bun run format:docs && bun run build:docs && bun run check:docs && bun run check:doc-classes && bun run check:compat && bun run check:css-api && bun run check:color-space && bun run check:architecture && bun run check:enhance && bun run generate:reserved && bun run check:reserved && bun run check:sync && bun run check:links && bun run check:templates && bun run test && bun run build:size",
     "prepublishOnly": "bun run build:all"
   },
   "devDependencies": {

package/scripts/reserved-classes.json

@@ -75,10 +75,10 @@
   "column-start-8",
   "column-start-9",
   "compact",
-  "complete",
   "container-query",
   "cursor-pointer",
   "danger",
+  "data-list",
   "dialog-close",
   "dialog-confirmation",
   "dialog-icon",
@@ -134,6 +134,7 @@
   "inline-size-full",
   "input",
   "input-icon",
+  "intent-color",
   "inverted",
   "is-open",
   "is-sheet",
@@ -241,11 +242,16 @@
   "stack",
   "start",
   "status-bar",
+  "step-complete",
+  "step-label",
   "steps",
+  "steps-horizontal",
+  "steps-vertical",
   "sticky",
   "stretch",
   "subtle",
   "success",
+  "surface",
   "surface-backdrop",
   "switch",
   "switcher",
@@ -269,6 +275,7 @@
   "textarea",
   "tooltip",
   "topbar",
+  "touch-target",
   "truncate",
   "user-select-none",
   "visibility-hidden",

package/src/css/components/data-list.css

@@ -0,0 +1,27 @@
+/*
+ * Data list — term/value pairs for the properties of a single object.
+ *
+ * Expects alternating <dt>/<dd> children: one term, one value per property.
+ * A plain <dl> handles richer relationships (several terms or descriptions)
+ * and stays untouched by this component.
+ *
+ * Why margin resets: neutralizes .prose list margins if .data-list appears
+ * inside an authored rich-text scope; the grid owns row/column rhythm.
+ */
+.data-list {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: baseline;
+  gap: var(--space-20) var(--space-40);
+}
+
+.data-list > dt {
+  min-inline-size: 0;
+  margin-block-start: 0;
+  font-weight: var(--font-weight-strong);
+}
+
+.data-list > dd {
+  min-inline-size: 0;
+  margin: 0;
+}

package/src/css/components/drawer.css

@@ -13,11 +13,16 @@
  *
  * Internal:
  * --drawer-closed-translate (side/RTL positioning state)
+ * --drawer-motion-duration (shared by panel and ::backdrop so exit duration
+ *   changes in one place; entry state redefines it longer)
  */
 dialog.drawer {
   --drawer-size: 20rem;
   --drawer-pad: var(--space-40);
   --drawer-closed-translate: -100%;
+  /* Exit is shorter than entry so the panel clears quickly; the scrim reads
+     the same variable through inheritance and never lags the panel. */
+  --drawer-motion-duration: var(--duration);
 
   /* Keep the surface anchored to the viewport in the top layer. This also
      provides the containing block for the absolutely positioned close button.
@@ -41,16 +46,20 @@ dialog.drawer {
   opacity: 0;
   transform: translateX(var(--drawer-closed-translate));
   transition:
-    opacity var(--duration-slow),
-    transform var(--duration-slow);
+    opacity var(--drawer-motion-duration) var(--ease-exit),
+    transform var(--drawer-motion-duration) var(--ease-exit);
 }
 
 dialog.drawer[open] {
+  --drawer-motion-duration: var(--duration-slow);
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
   gap: var(--space-40);
   opacity: 1;
   transform: translateX(0);
+  transition:
+    opacity var(--drawer-motion-duration) var(--ease-enter),
+    transform var(--drawer-motion-duration) var(--ease-enter);
 }
 
 /* Backdrop color sourced from components/surface.css so it matches .modal
@@ -58,7 +67,9 @@ dialog.drawer[open] {
 dialog.drawer::backdrop {
   background: var(--backdrop-fill);
   opacity: 0;
-  transition: opacity var(--duration-slow);
+  /* Scrim curve stays neutral `ease`; only the panel's character curves
+     apply. Duration follows --drawer-motion-duration through inheritance. */
+  transition: opacity var(--drawer-motion-duration) ease;
 }
 
 dialog.drawer[data-side="end"] {
@@ -94,17 +105,25 @@ dialog.drawer nav {
 @supports (transition-behavior: allow-discrete) {
   dialog.drawer {
     transition:
-      opacity var(--duration-slow),
-      transform var(--duration-slow),
-      overlay var(--duration-slow) allow-discrete,
-      display var(--duration-slow) allow-discrete;
+      opacity var(--drawer-motion-duration) var(--ease-exit),
+      transform var(--drawer-motion-duration) var(--ease-exit),
+      overlay var(--drawer-motion-duration) allow-discrete,
+      display var(--drawer-motion-duration) allow-discrete;
+  }
+
+  dialog.drawer[open] {
+    transition:
+      opacity var(--drawer-motion-duration) var(--ease-enter),
+      transform var(--drawer-motion-duration) var(--ease-enter),
+      overlay var(--drawer-motion-duration) allow-discrete,
+      display var(--drawer-motion-duration) allow-discrete;
   }
 
   dialog.drawer::backdrop {
     transition:
-      opacity var(--duration-slow),
-      overlay var(--duration-slow) allow-discrete,
-      display var(--duration-slow) allow-discrete;
+      opacity var(--drawer-motion-duration) ease,
+      overlay var(--drawer-motion-duration) allow-discrete,
+      display var(--drawer-motion-duration) allow-discrete;
   }
 }
 
@@ -140,7 +159,7 @@ dialog.drawer nav {
 
 @media (prefers-reduced-motion: no-preference) {
   dialog.drawer.is-static {
-    animation: actual-dialog-static var(--duration-slow) var(--ease);
+    animation: actual-dialog-static var(--duration-slow) ease;
   }
 }
 

package/src/css/components/fab.css

@@ -1,14 +1,17 @@
 /*
  * Fixed floating action placement and a native-details speed dial.
- * Button owns the action's size, shape, and intent; FAB only owns placement.
+ * Button owns the trigger's size, shape, and intent; FAB owns placement and
+ * the speed dial's structural open/close markers (--icon-plus / --icon-close).
  *
  * Public hooks:
  * --fab-offset
  * --fab-gap
+ * --fab-icon-size
  */
 .fab {
   --fab-offset: var(--space-40);
   --fab-gap: var(--space-20);
+  --fab-icon-size: 1.5rem;
 
   position: fixed;
   z-index: var(--z-menu);
@@ -17,6 +20,9 @@
 }
 
 .fab > summary {
+  /* Centers the toggle markers: the summary is the markers' positioned
+     context, not just the app-button class. */
+  position: relative;
   list-style: none;
   cursor: pointer;
 }
@@ -25,11 +31,35 @@
   display: none;
 }
 
-/* A lone decorative plus can communicate the open/close state without
-   requiring a second icon or JavaScript-managed content. */
-.fab > summary > [aria-hidden="true"]:only-child {
-  display: inline-block;
-  transition: transform var(--duration);
+/* The speed dial trigger is an icon-only toggle. FAB owns both structural
+   markers: masked pseudo-elements swap the shared plus (closed) and close
+   (open) glyphs at the same size, so the two states never drift apart. */
+.fab > summary::before,
+.fab > summary::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  inline-size: var(--fab-icon-size);
+  block-size: var(--fab-icon-size);
+  background: currentColor;
+  opacity: 0;
+  transform: scale(0.8);
+  transition:
+    opacity var(--duration),
+    transform var(--duration);
+}
+
+.fab > summary::before {
+  -webkit-mask: var(--icon-plus) center / contain no-repeat;
+  mask: var(--icon-plus) center / contain no-repeat;
+  opacity: 1;
+  transform: none;
+}
+
+.fab > summary::after {
+  -webkit-mask: var(--icon-close) center / contain no-repeat;
+  mask: var(--icon-close) center / contain no-repeat;
 }
 
 .fab-actions {
@@ -87,8 +117,14 @@
   transition-delay: 0s;
 }
 
-.fab[open] > summary > [aria-hidden="true"]:only-child {
-  transform: rotate(45deg);
+.fab[open] > summary::before {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+.fab[open] > summary::after {
+  opacity: 1;
+  transform: none;
 }
 
 @media print {

package/src/css/components/flyout.css

@@ -73,11 +73,10 @@
   box-shadow: var(--shadow-popout);
   list-style: none;
   opacity: 1;
-  scale: 1;
-  transition:
-    opacity var(--duration-fast) var(--ease),
-    scale var(--duration-fast) var(--ease),
-    translate var(--duration-fast) var(--ease);
+  /* Anchored flyouts fade in and out; scaling around the center would detach
+     the anchored edge from its trigger on wide panels. The sheet presentation
+     below adds its own translate motion. */
+  transition: opacity var(--duration-fast) ease;
 }
 
 .flyout.is-open:not(.is-sheet) {
@@ -87,7 +86,6 @@
 @starting-style {
   .flyout.is-open {
     opacity: 0;
-    scale: 0.98;
   }
 }
 
@@ -109,22 +107,24 @@
     max(var(--space-30), env(safe-area-inset-bottom));
   border-end-start-radius: 0;
   border-end-end-radius: 0;
+  /* Sheet motion is a directional slide from the viewport edge; it replaces
+     the base fade-only recipe. */
+  transition:
+    opacity var(--duration-fast) ease,
+    translate var(--duration-fast) ease;
 }
 
 .flyout[hidden] {
   display: none;
   opacity: 0;
-  scale: 0.98;
 }
 
 .flyout.is-sheet[hidden] {
-  scale: 1;
   translate: 0 var(--space-30);
 }
 
 @starting-style {
   .flyout.is-sheet.is-open {
-    scale: 1;
     translate: 0 var(--space-30);
   }
 }
@@ -132,9 +132,14 @@
 @supports (transition-behavior: allow-discrete) {
   .flyout {
     transition:
-      opacity var(--duration-fast) var(--ease),
-      scale var(--duration-fast) var(--ease),
-      translate var(--duration-fast) var(--ease),
+      opacity var(--duration-fast) ease,
+      display var(--duration-fast) allow-discrete;
+  }
+
+  .flyout.is-sheet {
+    transition:
+      opacity var(--duration-fast) ease,
+      translate var(--duration-fast) ease,
       display var(--duration-fast) allow-discrete;
   }
 }

package/src/css/components/index.css

@@ -43,6 +43,7 @@
 @import "./scrollspy.css";
 
 /* Data */
+@import "./data-list.css";
 @import "./list.css";
 @import "./table.css";
 @import "./meter.css";

package/src/css/components/list.css

@@ -33,7 +33,9 @@
 .list > li > .list-item {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
+  /* Regions align to the first line, so leading, title, and trailing controls
+     share one horizontal line while supporting text wraps beneath. */
+  align-items: start;
   gap: var(--list-item-gap);
   min-block-size: var(--list-item-min-size);
   padding-block: var(--list-item-pad-block);

package/src/css/components/meter.css

@@ -1,8 +1,16 @@
 /*
- * Meter — native gauge for known-range values.
+ * Meter — native and segmented gauges for known-range values.
  *
  * Maps the three standard meter zones (optimum / suboptimum / even-less-good)
  * to the shared success / warning / danger intent colors.
+ *
+ * Thickness is a dimension, not a density step: the bar always spans its
+ * container and only gets thinner or thicker, so --bar-height is the API and
+ * .sm/.lg are deliberately not supported.
+ *
+ * Public hooks:
+ * --meter-value
+ * --bar-height
  */
 
 .meter {
@@ -17,6 +25,25 @@
   background: var(--surface-subtle);
 }
 
+/* A non-native meter is a weighted flex container. The element type keeps the
+   native <meter> API and the composed segmented API distinct without another
+   public variant class. */
+.meter:not(meter) {
+  --intent: initial;
+
+  display: flex;
+}
+
+.meter:not(meter) > * {
+  flex: var(--meter-value, 1) 1 0;
+  min-inline-size: 0;
+  background: var(--intent);
+}
+
+.meter:not(meter) > * + * {
+  border-inline-start: var(--border-width) solid var(--surface);
+}
+
 .meter::-webkit-meter-bar {
   -webkit-appearance: none;
   block-size: var(--bar-height);

package/src/css/components/modal.css

@@ -39,12 +39,14 @@ dialog.modal {
    * Keep the open dialog root untransformed. Fixed overlays mounted inside a
    * modal dialog use viewport coordinates; transform/translate/scale on this
    * element would make them position against the dialog instead. The closed
-   * state can still carry a small transform for enter/exit motion.
+   * state can still carry a small transform for enter/exit motion. The lift
+   * is a pure vertical offset: scaling a wide panel around its center drags
+   * both edges, which reads as horizontal movement.
    */
-  transform: translateY(0.35rem) scale(0.98);
+  transform: translateY(0.35rem);
   transition:
-    opacity var(--duration),
-    transform var(--duration);
+    opacity var(--duration) var(--ease-exit),
+    transform var(--duration) var(--ease-exit);
 }
 
 dialog.modal > form,
@@ -163,33 +165,46 @@ dialog.modal.dialog-confirmation > form > footer {
 dialog.modal[open] {
   opacity: 1;
   transform: none;
+  transition:
+    opacity var(--duration) var(--ease-enter),
+    transform var(--duration) var(--ease-enter);
 }
 
 @starting-style {
   dialog.modal[open] {
     opacity: 0;
-    transform: translateY(0.35rem) scale(0.98);
+    transform: translateY(0.35rem);
   }
 }
 
 dialog.modal::backdrop {
   background: var(--backdrop-fill);
   opacity: 0;
-  transition: opacity var(--duration);
+  /* Scrim curve stays neutral `ease`; only the panel carries the character
+     curves. */
+  transition: opacity var(--duration) ease;
 }
 
 @supports (transition-behavior: allow-discrete) {
   dialog.modal {
     transition:
-      opacity var(--duration),
-      transform var(--duration),
+      opacity var(--duration) var(--ease-exit),
+      transform var(--duration) var(--ease-exit),
+      overlay var(--duration) allow-discrete,
+      display var(--duration) allow-discrete;
+  }
+
+  dialog.modal[open] {
+    transition:
+      opacity var(--duration) var(--ease-enter),
+      transform var(--duration) var(--ease-enter),
       overlay var(--duration) allow-discrete,
       display var(--duration) allow-discrete;
   }
 
   dialog.modal::backdrop {
     transition:
-      opacity var(--duration),
+      opacity var(--duration) ease,
       overlay var(--duration) allow-discrete,
       display var(--duration) allow-discrete;
   }
@@ -214,13 +229,15 @@ html.has-modal-open.had-scrollbar {
 }
 
 @media (prefers-reduced-motion: no-preference) {
+  /* Wrong-close feedback and view-transition transport are motion quirks, not
+     presence enter/exit, so they stay on the plain CSS default easing. */
   dialog.modal.is-static {
-    animation: actual-dialog-static var(--duration-slow) var(--ease);
+    animation: actual-dialog-static var(--duration-slow) ease;
   }
 
   ::view-transition-group(actual-dialog) {
     animation-duration: var(--duration);
-    animation-timing-function: var(--ease);
+    animation-timing-function: ease;
   }
 }
 

package/src/css/components/progress.css

@@ -4,9 +4,14 @@
  * Consumes the shared --intent/--primary for the value bar and --bar-height
  * for thickness. Indeterminate state animates a shimmer using --duration-shimmer.
  *
+ * Thickness is a dimension, not a density step: the bar always spans its
+ * container and only gets thinner or thicker, so --bar-height is the API and
+ * .sm/.lg are deliberately not supported.
+ *
  * Public hooks:
  * --progress-track
  * --progress-value
+ * --bar-height
  */
 /* Intent boundary — inherited intents do not tint this component.
    Local intent classes still win because :where() has zero specificity. */