actual-css 0.9.2 → 0.10.0

package/src/css/core/theme.css

@@ -72,10 +72,10 @@
 
   /* Lines and focus */
   --border: hsl(260 15% 88%);
-  --focus: var(--neutral);
-  /* Pre-color-mix fallback only — superseded below by a derivation from
-     --focus so overriding --neutral/--focus never leaves a stale ring. */
-  --focus-ring: hsl(258 7% 43% / 0.3);
+  /* A primary-hued mid-tone on purpose, one value for both schemes: focus
+     lines must hold 3:1 against --surface and --surface-solid alike (page,
+     fields, a solid band), which rules out the primary itself. */
+  --focus: hsl(268 30% 55%);
   --hover-overlay: hsl(260 20% 10% / 0.04);
 
   /* Radius scale — themes may override the whole scale (e.g. [data-theme="square"]) */
@@ -98,7 +98,6 @@
   --heading: var(--text);
   --selection-bg: var(--primary);
   --selection-fg: var(--primary-fg);
-  --focus-ring-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
 }
 
 /* Soft foreground hooks — the soft ink is the intent rebated toward the local
@@ -107,18 +106,17 @@
    default theme: a custom property bakes its var() references where it is
    declared, so these resolve against root/light/dark tokens on every boundary.
    Presets and custom islands keep their --soft-fg-mix / raw-intent ink unless
-   they declare hooks themselves — :where() keeps this reset from outranking a
-   theme's own declaration (e.g. brutalist's 45% soft-fg-mix). */
-:where([data-theme]:not([data-theme="light"]):not([data-theme="dark"])) {
-  --primary-soft-fg: initial;
-  --secondary-soft-fg: initial;
-  --success-soft-fg: initial;
-  --warning-soft-fg: initial;
-  --danger-soft-fg: initial;
-  --neutral-soft-fg: initial;
-}
-
-:root,
+   they declare hooks themselves.
+
+   Why :where(:root) and why the reset comes second: both rules match when a
+   custom theme sits on <html> itself. A bare :root is (0,1,0) and would
+   outrank the zero-specificity reset, so the same theme resolved a calibrated
+   Ink & Terra ink on <html data-theme="brand"> and the raw --soft-fg-mix ink
+   on <div data-theme="brand"> — one attribute, two soft palettes. Levelling
+   both rules to zero specificity makes source order the tiebreaker, so the
+   reset must stay below. Zero specificity is also what lets a theme declare
+   its own hooks (e.g. brutalist's 45% soft-fg-mix) and win at (0,1,0). */
+:where(:root),
 [data-theme="light"],
 [data-theme="dark"] {
   --secondary-soft-fg: color-mix(in oklab, var(--text) 10%, var(--secondary) 90%);
@@ -128,6 +126,15 @@
   --neutral-soft-fg: color-mix(in oklab, var(--text) 20%, var(--neutral) 80%);
 }
 
+:where([data-theme]:not([data-theme="light"]):not([data-theme="dark"])) {
+  --primary-soft-fg: initial;
+  --secondary-soft-fg: initial;
+  --success-soft-fg: initial;
+  --warning-soft-fg: initial;
+  --danger-soft-fg: initial;
+  --neutral-soft-fg: initial;
+}
+
 /* Native platform controls (checkbox, radio, range, progress) that are not
    restyled by a component class still follow the theme accent. Declared on
    every island: accent-color inherits as a computed value, so islands must
@@ -149,20 +156,6 @@
   --tone-fg: var(--text);
 }
 
-/* Focus ring derivation — color-mix tier. Runs whether or not light-dark()
-   is also supported, so it covers the color-mix-without-light-dark browser
-   tier on its own; the light-dark block below refines it further with the
-   light/dark alpha split once both features are available. Declared on every
-   [data-theme] island (not just the built-in light/dark pair) so custom
-   islands recolor the ring for free; a preset that re-declares --focus-ring
-   later in source order intentionally pins its own ring instead. */
-@supports (color: color-mix(in oklch, red, white)) {
-  :root,
-  [data-theme] {
-    --focus-ring: color-mix(in oklch, var(--focus) 30%, transparent);
-  }
-}
-
 /* Auto dark mode via light-dark(). Resolves based on the element's color-scheme:
     :root (light dark) follows the OS, [data-theme="light"] forces light,
     [data-theme="dark"] forces dark by overriding color-scheme.
@@ -199,22 +192,11 @@
     --text-subtle: light-dark(hsl(258 7% 57%), hsl(258 7% 54%));
 
     --border: light-dark(hsl(260 15% 88%), hsl(262 12% 24%));
-    --focus-ring: light-dark(hsl(258 7% 43% / 0.3), hsl(258 10% 72% / 0.28));
     --hover-overlay: light-dark(hsl(260 20% 10% / 0.04), hsl(0 0% 100% / 0.06));
     --shadow-color: light-dark(hsl(260 25% 10%), hsl(262 40% 2%));
   }
 }
 
-@supports (color: color-mix(in oklch, red, white)) and (color: light-dark(red, blue)) {
-  :root,
-  [data-theme] {
-    --focus-ring: light-dark(
-      color-mix(in oklch, var(--focus) 30%, transparent),
-      color-mix(in oklch, var(--focus) 28%, transparent)
-    );
-  }
-}
-
 @media (prefers-contrast: more) {
   :root,
   /* The repeated attribute intentionally outranks single-attribute preset
@@ -222,7 +204,7 @@
   [data-theme][data-theme] {
     --border-width: 2px;
     --focus-outline-offset: 3px;
-    --focus-ring-width: 4px;
+    --focus-ring-width: 3px;
     --text-muted: var(--text);
     --text-subtle: var(--text);
   }

package/src/css/core/tokens.css

@@ -82,7 +82,7 @@
   --focus-outline-color: currentColor;
   --focus-outline: calc(var(--border-width) * 2) solid var(--focus-outline-color);
   --focus-outline-offset: 2px;
-  --focus-ring-width: 3px;
+  --focus-ring-width: 2px;
 
   /* Status dot positioning — used by .avatar > .badge:empty. The offset is
      the circle-aware inset (1 - 1/√2) / 2 ≈ 14.65%; the ring surrounds the

package/src/css/core/variants.css

@@ -2,13 +2,9 @@
  * Cross-cutting variant token mapping.
  *
  * Variant scope: .solid/.soft/.outline/.surface set --ui-* for components that
- * opt into shared variants. .inverted is a surface modifier, not a variant: it paints
- * the element directly (background/color/border-color) so it works on any bare
- * block, and remaps the shared --ui-* tokens so participating components
- * (.card, .navbar, .alert, .badge) invert through their own rules. Loaded
- * before components, so a component with its own explicit surface (e.g.
- * .accordion) naturally keeps that surface — .inverted never forces a
- * non-participant.
+ * opt into shared variants. A subtree that needs another palette or scheme is
+ * a data-theme island, never a variant: only an island recomputes every token
+ * (fields, states, intents), where a remap of a few --ui-* tokens cannot.
  * Component-specific defaults (.btn solid-by-default, .badge
  * soft-by-default, .alert soft-by-default) live with their components:
  *   components/button.css — .btn default solid + .btn.ghost + .btn.link
@@ -64,28 +60,6 @@
   --ui-border: var(--border);
 }
 
-/* Inverse surface treatment. Paints the element directly (so it works on any
-   bare block) and remaps the shared --ui-* tokens so opt-in components
-   (.card, .navbar) invert through their own rules. Because this loads before
-   component base surfaces, components with their own explicit surface
-   (e.g. .accordion) keep it — participation is opt-in, never forced. --heading
-   is set so global headings (var(--heading, inherit)) do not inherit an outside
-   heading color onto the dark surface; surface-owning descendants derive
-   their contextual aliases from their own local surface. */
-.inverted {
-  --ui-bg: var(--surface-solid);
-  --ui-fg: var(--surface);
-  --ui-border: transparent;
-  --ui-hover-bg: var(--surface-solid);
-
-  --heading: var(--surface);
-  --busy-overlay-bg: var(--surface-solid);
-
-  background: var(--ui-bg);
-  color: var(--ui-fg);
-  border-color: var(--ui-border);
-}
-
 .compact {
   --gap: var(--space-20);
   --density-space: var(--space-20);
@@ -169,10 +143,6 @@
     );
     /* @sync soft-recipe */
   }
-
-  .inverted {
-    --ui-hover-bg: color-mix(in oklch, var(--surface-solid) 88%, black);
-  }
 }
 
 /* Interactive hover recipes live in the components that consume them:

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

@@ -13,12 +13,18 @@
  * overflow: hidden will clip it. Pair with grid or flex utilities for group
  * layout.
  *
+ * .chip is the compact pill form (filter chips, selectable tags): control
+ * height, and a leading dot that turns into the check in a fixed slot, so
+ * checking never moves the label.
+ *
  * Public hooks:
  * --choice-card-pad
  * --choice-card-radius
  * --choice-card-border
  * --choice-card-bg
  * --choice-card-check-size
+ * --choice-chip-dot (read-only, on .chip ::before: the check-slot centre as a
+ *   circle() position, for a theme that grows the dot into a fill)
  */
 :where(.choice-card) {
   --intent: initial;
@@ -68,8 +74,8 @@
 
 /* Focus ring on the label follows the hidden input's focus. */
 .choice-card:has(:focus-visible) {
-  outline: 2px solid transparent;
-  box-shadow: var(--focus-ring-shadow);
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: var(--focus-outline-offset);
 }
 
 .choice-card:has(:disabled) {
@@ -114,11 +120,13 @@
   z-index: 1;
 }
 
-.choice-card:has(input[type="radio"])::before {
+/* :where() keeps the shape at single-class weight, so .chip can reshape the
+   layer without out-arguing the input-type test. */
+.choice-card:where(:has(input[type="radio"]))::before {
   border-radius: var(--radius-full);
 }
 
-.choice-card:has(input[type="checkbox"])::before {
+.choice-card:where(:has(input[type="checkbox"]))::before {
   border-radius: var(--radius-sm);
 }
 
@@ -135,6 +143,54 @@
   transform: scale(1);
 }
 
+/* Chip — the rules above stay in force; this section only relocates the
+   indicator. Must follow them: several ties are won by source order. */
+.choice-card.chip {
+  --choice-card-pad: 0 var(--control-pad-x);
+  --choice-card-radius: var(--radius-full);
+  --choice-card-check-size: 1em;
+
+  display: inline-flex;
+  align-items: center;
+  min-block-size: var(--control-size);
+  line-height: 1.2;
+  /* The dot layer sits under the label at z-index -1. */
+  isolation: isolate;
+}
+
+/* ::before is a full-bleed layer clipped to a dot centred on the check slot,
+   so a theme can grow the same clip into a selected fill. The chip itself
+   must not clip (its focus ring is an outline), hence the inherited radius. */
+.choice-card.chip::before {
+  --choice-chip-dot: calc(var(--control-pad-x) + var(--choice-card-check-size) / 2) 50%;
+
+  inset: 0;
+  inline-size: auto;
+  block-size: auto;
+  border-radius: inherit;
+  box-shadow: none;
+  background: var(--text-subtle);
+  transform: none;
+  clip-path: circle(0.1875em at var(--choice-chip-dot));
+  z-index: -1;
+  transition: clip-path var(--duration);
+}
+
+.choice-card.chip:has(:checked)::before {
+  clip-path: circle(0 at var(--choice-chip-dot));
+}
+
+/* The check keeps the card's scale-in, in flow ahead of the label. */
+.choice-card.chip::after {
+  position: static;
+  order: -1;
+  flex: none;
+  margin-inline-end: 0.375em;
+  background: var(--intent, var(--state-selected));
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
 /* The native input is hidden and the checked marker is custom-drawn: without
    this repair, forced colors pushes disc and check to the same system color
    and the state disappears. Highlight/Canvas/HighlightText are preserved as-is,
@@ -149,4 +205,18 @@
   .choice-card:has(:checked)::after {
     background: HighlightText;
   }
+
+  /* A chip has no disc behind its check: the check carries the state alone,
+     and dropping the checked layer also drops any theme fill. */
+  .choice-card.chip::before {
+    background: CanvasText;
+  }
+
+  .choice-card.chip:has(:checked)::before {
+    content: none;
+  }
+
+  .choice-card.chip:has(:checked)::after {
+    background: CanvasText;
+  }
 }

package/src/css/forms/choice.css

@@ -228,9 +228,8 @@
 
 .check:focus-visible,
 .radio:focus-visible {
-  --choice-border: var(--focus);
-  outline: 2px solid transparent;
-  box-shadow: var(--focus-ring-shadow);
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: var(--focus-outline-offset);
 }
 
 .check:disabled,

package/src/css/forms/control.css

@@ -24,6 +24,8 @@
  * --control-cursor
  * --control-border-block-end-color
  * --control-border-block-end-width
+ * --control-hover-border (input and textarea)
+ * --control-hover-bg (select)
  */
 .input,
 .textarea,
@@ -68,19 +70,24 @@
 
 .input:hover:not(:disabled),
 .textarea:hover:not(:disabled) {
-  --control-border: var(--text-subtle);
+  --control-border: var(--control-hover-border, var(--text-subtle));
 }
 
 .select:hover:not(:disabled) {
-  --control-bg: var(--surface-subtle);
+  --control-bg: var(--control-hover-bg, var(--surface-subtle));
 }
 
-.input:focus-visible,
-.textarea:focus-visible,
-.select:focus-visible {
-  --control-border: var(--focus);
-  outline: 2px solid transparent;
-  box-shadow: var(--focus-ring-shadow);
+/* Field focus is an inset outline: offset = -width keeps every pixel inside
+   the control's border box (any smaller offset bleeds outward), so it covers
+   the border, never touches a .join neighbour or a scrollport edge, and needs
+   no group treatment. Width follows --focus-ring-width, including its
+   prefers-contrast step. Border = shape and validation, outline = focus. */
+.input:focus-visible:not(:disabled),
+.textarea:focus-visible:not(:disabled),
+.select:focus-visible:not(:disabled) {
+  outline: var(--focus-ring-width) solid var(--form-invalid-border, var(--focus));
+  outline-offset: calc(var(--focus-ring-width) * -1);
+  box-shadow: none;
 }
 
 .input[readonly],

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

@@ -9,7 +9,6 @@
  * Arbitrary menu and popover behavior belongs elsewhere.
  *
  * Internal:
- * --control-border
  * --control-bg
  */
 /* This enhancement is excluded from forced-colors, where the native/shared
@@ -34,11 +33,12 @@
         box-shadow: var(--shadow-popout);
       }
 
+      /* Same inset outline as a focused field (control.css). */
       &:open {
-        --control-border: var(--border);
         --control-bg: var(--surface-raised);
-        outline: none;
-        box-shadow: var(--focus-ring-shadow);
+        outline: var(--focus-ring-width) solid var(--form-invalid-border, var(--focus));
+        outline-offset: calc(var(--focus-ring-width) * -1);
+        box-shadow: none;
       }
 
       &::picker-icon {

package/src/css/forms/native.css

@@ -44,8 +44,8 @@
 }
 
 .file:focus-visible {
-  outline: 2px solid transparent;
-  box-shadow: var(--focus-ring-shadow);
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: var(--focus-outline-offset);
 }
 
 /* Native color picker — keep the browser's dialog and selected-color UI. The
@@ -81,8 +81,8 @@
 }
 
 .color:focus-visible {
-  outline: 2px solid transparent;
-  box-shadow: var(--focus-ring-shadow);
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: var(--focus-outline-offset);
 }
 
 @media (forced-colors: active) {

package/src/css/forms/range.css

@@ -75,20 +75,22 @@
 }
 
 /*
- * The 1px surface-coloured separator keeps the ring visually distinct from
- * the small, coloured thumb — unlike a full-size input where the same gap
- * would read as an unwanted void.
+ * A thumb pseudo-element takes no reliable outline, so its ring is a solid
+ * --focus shadow (the transparent outline above covers forced colors). The
+ * 1px surface-coloured separator keeps the ring visually distinct from the
+ * small, coloured thumb — unlike a full-size input where the same gap would
+ * read as an unwanted void.
  */
 .range:focus-visible::-webkit-slider-thumb {
   box-shadow:
     0 0 0 1px var(--surface),
-    0 0 0 calc(1px + var(--focus-ring-width)) var(--focus-ring);
+    0 0 0 calc(1px + var(--focus-ring-width)) var(--focus);
 }
 
 .range:focus-visible::-moz-range-thumb {
   box-shadow:
     0 0 0 1px var(--surface),
-    0 0 0 calc(1px + var(--focus-ring-width)) var(--focus-ring);
+    0 0 0 calc(1px + var(--focus-ring-width)) var(--focus);
 }
 
 .range:disabled {
@@ -98,20 +100,33 @@
 }
 
 /* Forced colors: the track must stay a visible line against the page (Canvas
-   would merge with it) and the thumb needs a real boundary to remain
-   distinguishable from the track. Disabled keeps GrayText via :disabled.
-   Focus stays on the transparent outline of :focus-visible. */
+  would merge with it) and the thumb needs a real boundary to remain
+  distinguishable from the track. Disabled keeps GrayText via :disabled.
+  Focus stays on the transparent outline of :focus-visible. Track and thumb
+  fills are written on the properties, not only the hooks: an application
+  hook override at the same specificity loads after this file and would win
+  the variable, leaving a Canvas-remapped fill. */
 @media (forced-colors: active) {
   .range {
     --range-track-bg: CanvasText;
     --range-thumb-bg: ButtonFace;
   }
 
+  .range::-webkit-slider-runnable-track {
+    background: CanvasText;
+  }
+
+  .range::-moz-range-track {
+    background: CanvasText;
+  }
+
   .range::-webkit-slider-thumb {
+    background: ButtonFace;
     border: var(--border-width) solid ButtonText;
   }
 
   .range::-moz-range-thumb {
+    background: ButtonFace;
     border: var(--border-width) solid ButtonText;
   }
 }

package/src/css/forms/switch.css

@@ -128,9 +128,8 @@
 }
 
 .switch:focus-visible {
-  --switch-border: var(--focus);
-  outline: 2px solid transparent;
-  box-shadow: var(--focus-ring-shadow);
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: var(--focus-outline-offset);
 }
 
 .switch:disabled {

package/src/css/layout/app-layout.css

@@ -7,7 +7,7 @@
  *
  * Docs: docs/pages/layout/app-layout.md
  *
- * Public hook:
+ * Public hooks:
  * --app-nav-side-size
  */
 .app-layout {

package/src/css/layout/column-layout.css

@@ -4,12 +4,12 @@
  * Docs: docs/pages/layout/column-layout.md
  *
  * Neither space-driven like .grid nor count-driven like .grid-N: this is a
- * coordinate system. The author places regions with .column-span-N /
- * .column-start-N and owns narrow-container recomposition. There is
- * deliberately no automatic collapse — no threshold, no hidden
- * .container-query behavior, no breakpoint variants. A single framework
- * threshold cannot be right for arbitrary per-region compositions, and a
- * hidden default would have to be undone rather than extended.
+ * coordinate system. Each direct child places itself with two numbers,
+ * --column-start and --column-span, and the author owns narrow-container
+ * recomposition. There is deliberately no automatic collapse — no threshold,
+ * no hidden .container-query behavior, no breakpoint variants. A single
+ * framework threshold cannot be right for arbitrary per-region compositions,
+ * and a hidden default would have to be undone rather than extended.
  *
  * See docs/design-notes/column-layout.md.
  *
@@ -21,11 +21,12 @@
  *   media + flexible content        -> .media
  *   exact custom track templates    -> --grid-columns on .grid
  *
- * Child contract: each direct child is placed on the canvas via its own
- * .column-span-N / .column-start-N.
- *
  * Unlike .grid-N, the track template does not read --gap, so the gap
  * utilities are exact here at every width.
+ *
+ * Public hooks:
+ * --column-start (the start line, 1-12; unset = auto-placed)
+ * --column-span (the width in canvas units, 1-12; unset = to the canvas end)
  */
 .column-layout {
   display: grid;
@@ -33,114 +34,28 @@
   grid-template-columns: repeat(12, minmax(0, 1fr));
 }
 
-/* Three zero-specificity tiers, applied in this order and only ever separated
- * by source order. ORDER IS LOAD-BEARING:
+/* One rule covers the four placements:
+ *   neither          auto-placed, spanning the whole canvas
+ *   span only        auto-placed over N units, so 8 + 4 flows onto one row
+ *   start only       from line S to the canvas end (span 13 - S)
+ *   start and span   explicit; keep S + N - 1 <= 12
  *
- *   1. the child reset       auto-placed, spanning the whole canvas
- *   2. .column-start-*       a definite start line, running to the canvas end
- *   3. .column-span-*        the end only, so it refines either of the above
+ * The start stays `auto` unless set: a definite start on every child would
+ * take all of them out of auto-placement, and an 8 + 4 pair would stack.
  *
- * Moving tier 3 above tier 2 makes every start+span pair run to column 12;
- * moving either above tier 1 makes every placement full-span. Both failures
- * are silent. tests/css-audit.test.js locks the order and
- * tests/browser/column-layout.test.js locks the resulting geometry.
- *
- * Zero specificity is the point: an application's own container-query rules
- * override placement additively, with a single-class selector and without
- * having to undo framework specificity first.
- */
-
-/* Tier 1. A child with no placement class stays a readable full-width region
- * instead of collapsing to one twelfth. Expressed as a span, not as
- * `1 / -1`: a definite start line would give every child a definite column
- * position and disable auto-placement, so `.column-span-8` next to
- * `.column-span-4` would stack instead of composing 8 + 4.
+ * The reset makes the two hooks inputs of this grid item rather than an
+ * inherited context: a nested .column-layout keeps the coordinates it was
+ * given for its own placement, and its children start from nothing. Zero
+ * specificity, so any author rule on the child wins.
  *
  * min-inline-size: 0 keeps the item box inside its track so the canvas never
  * grows past its container. It does not stop content from painting outside a
  * narrow track — that distinction is the primitive's contract, not a bug. */
 :where(.column-layout) > * {
-  grid-column-end: span 12;
-  min-inline-size: 0;
-}
-
-/* Tier 2. A definite start line, running to the end of the canvas unless a
- * .column-span-* refines the end. `column-start-9` alone is therefore the
- * last four columns rather than an implicit 21-line overflow. */
-:where(.column-start-1) {
-  grid-column: 1 / -1;
-}
-:where(.column-start-2) {
-  grid-column: 2 / -1;
-}
-:where(.column-start-3) {
-  grid-column: 3 / -1;
-}
-:where(.column-start-4) {
-  grid-column: 4 / -1;
-}
-:where(.column-start-5) {
-  grid-column: 5 / -1;
-}
-:where(.column-start-6) {
-  grid-column: 6 / -1;
-}
-:where(.column-start-7) {
-  grid-column: 7 / -1;
-}
-:where(.column-start-8) {
-  grid-column: 8 / -1;
-}
-:where(.column-start-9) {
-  grid-column: 9 / -1;
-}
-:where(.column-start-10) {
-  grid-column: 10 / -1;
-}
-:where(.column-start-11) {
-  grid-column: 11 / -1;
-}
-:where(.column-start-12) {
-  grid-column: 12 / -1;
-}
+  --column-start: initial;
+  --column-span: initial;
 
-/* Tier 3. The end only. Combined with a start, keep the placement inside the
- * canvas: S + N - 1 <= 12. Exceeding it adds an auto-sized implicit column,
- * which reshapes every 1fr track — the whole canvas loses its alignment, not
- * just the offending region. */
-:where(.column-span-1) {
-  grid-column-end: span 1;
-}
-:where(.column-span-2) {
-  grid-column-end: span 2;
-}
-:where(.column-span-3) {
-  grid-column-end: span 3;
-}
-:where(.column-span-4) {
-  grid-column-end: span 4;
-}
-:where(.column-span-5) {
-  grid-column-end: span 5;
-}
-:where(.column-span-6) {
-  grid-column-end: span 6;
-}
-:where(.column-span-7) {
-  grid-column-end: span 7;
-}
-:where(.column-span-8) {
-  grid-column-end: span 8;
-}
-:where(.column-span-9) {
-  grid-column-end: span 9;
-}
-:where(.column-span-10) {
-  grid-column-end: span 10;
-}
-:where(.column-span-11) {
-  grid-column-end: span 11;
-}
-:where(.column-span-12) {
-  grid-column-end: span 12;
+  grid-column-start: var(--column-start, auto);
+  grid-column-end: span var(--column-span, calc(13 - var(--column-start, 1)));
+  min-inline-size: 0;
 }