actual-css 0.4.2 → 0.6.0

package/src/css/components/status-bar.css

@@ -1,9 +1,12 @@
 /*
  * Status bar — singleton floating status area.
  *
- * One element in the HTML, empty by default, hidden when :empty but kept in the
- * accessibility tree so it stays a reliable live region. JavaScript only sets
- * text content; the visual shows and hides with the content.
+ * One element in the HTML, empty by default. .is-open is the visual state, set
+ * by status.js like any other surface: it lands after the message is written
+ * and lifts before the bar is cleared, so the bar leaves in the exact state it
+ * was shown in — same text, same width, same intent color — instead of snapping
+ * to a neutral empty pill mid-exit. Emptying the text is the *end* of the exit,
+ * not its trigger.
  *
  * Consumes intent like badge or alert. No need for status-bar-specific modifier
  * classes — .danger / .success / .warning / .neutral from intents.css drive
@@ -17,6 +20,7 @@
  * Internal:
  * --status-bg
  * --status-fg
+ * --status-viewport-offset (written by status.js while the bar is open)
  */
 
 /* Intent boundary — inherited intents do not tint this component.
@@ -31,7 +35,9 @@
   --status-fg: var(--intent-fg, var(--surface));
 
   position: fixed;
-  inset-block-end: var(--space-40);
+  /* Fixed positioning tracks the layout viewport, which the mobile software
+     keyboard covers. status.js writes the occluded band into the offset. */
+  inset-block-end: calc(var(--space-40) + var(--status-viewport-offset, 0px));
   inset-inline: var(--space-40);
   z-index: var(--z-status);
 
@@ -53,22 +59,32 @@
   color: var(--status-fg);
   box-shadow: var(--shadow-popout);
 
-  opacity: 1;
-  scale: 1;
-  translate: 0 0;
+  /* Closed by default. Opacity, not visibility or display: the bar has to stay
+     in the accessibility tree to work as a live region. */
+  opacity: 0;
+  translate: 0 var(--space-30);
   pointer-events: none;
 
+  /* Exit is shorter than entry so dismissed feedback gets out of the way.
+     background stays a shorthand so --status-bg still accepts gradients;
+     solid colors expose an interpolable computed background-color. The
+     intent color follows the state/interaction `ease`, not the presence
+     curves. */
   transition:
-    opacity var(--duration-slow) var(--ease),
-    scale var(--duration-slow) var(--ease),
-    translate var(--duration-slow) var(--ease);
+    opacity var(--duration-fast) var(--ease-exit),
+    translate var(--duration) var(--ease-exit),
+    background-color var(--duration) ease;
 }
 
-.status-bar:empty {
-  opacity: 0;
-  scale: 0.96;
-  translate: 0 var(--space-20);
-  pointer-events: none;
+.status-bar.is-open {
+  opacity: 1;
+  translate: 0 0;
+  /* Entry takes a little longer and decelerates, making the message legible
+     before its motion settles. */
+  transition:
+    opacity var(--duration) var(--ease-enter),
+    translate var(--duration-slow) var(--ease-enter),
+    background-color var(--duration) ease;
 }
 @media print {
   .status-bar {

package/src/css/components/steps.css

@@ -1,20 +1,54 @@
 /*
- * Steps — semantic ordered-list progression. One intrinsic layout: items fill
- * the row when they fit and hold a minimum width otherwise, so the sequence
- * scrolls horizontally only when it genuinely cannot fit. No breakpoint decides
- * this — the item minimum tracks the real content, not an arbitrary width.
+ * Steps — semantic ordered-list progression for a multi-step process.
  *
- * Markers come from the list counter; state stays in .complete and
- * aria-current="step", so the component needs no runtime.
+ * One primitive, two explicit compositions. Both classes are required:
+ *
+ *   <ol class="steps steps-horizontal">  horizontal, 2 to 5 stages
+ *   <ol class="steps steps-vertical">    vertical, any number of stages
+ *
+ * `.steps` is what a step *is* — the counter, the marker, `.step-label`,
+ * `.step-complete`, `aria-current="step"`. It carries no orientation, so it is
+ * never written alone. `.steps-horizontal` and `.steps-vertical` are what a
+ * sequence *looks like*, and they are peers: neither is the default the other
+ * has to exclude, so no rule says `:not(...)` and no rule undoes another's
+ * layout.
+ *
+ * Orientation and labels are independent dimensions. `.step-label` is optional
+ * in either orientation; when a sequence carries names, every step carries
+ * one:
+ *
+ *                 empty steps           .step-label on every step
+ *   horizontal    compact progression   named sequence, stacked or inline
+ *   vertical      compact rail          named sequence, labels beside markers
+ *
+ * An empty step is a marker and nothing else, so it is compact by structure —
+ * `> li:empty` in both orientations, no variant class, and nothing authored
+ * only to be hidden again. The page around it owns the step name.
+ *
+ * A label may be an `a[href]`, which is the whole interactive surface: the
+ * marker is never navigable, so navigating a flow means naming its
+ * destinations. Anything else focusable in a step is out of contract.
+ *
+ * The framework never hides an authored label to solve a layout problem. A
+ * labelled row that outgrows its space scrolls. An `actual-container` size
+ * context buys it one thing: the wide representation, marker beside label.
+ *
+ * See docs/design-notes/steps.md for the threshold, the selector shapes, the
+ * rejected alternatives, and why there is no forced-colors branch.
+ *
+ * Each public hook is followed by the class that owns it.
  *
  * Public hooks:
- * --step-size
- * --step-min
- * --step-gap
- * --step-line-size
- * --step-marker-radius
- * --step-complete-mark
- * --step-connector
+ * --step-size              .steps
+ * --step-inline-gap        .steps
+ * --step-line-size         .steps
+ * --step-marker-radius     .steps
+ * --step-complete-mark     .steps
+ * --step-min               .steps-horizontal
+ * --step-gap               .steps-horizontal
+ * --step-connector         .steps-horizontal
+ * --step-inline-connector  .steps-horizontal
+ * --step-vertical-gap      .steps-vertical
  *
  * Internal:
  * --step-marker-bg
@@ -22,10 +56,12 @@
  * --step-marker-fg
  * --step-line
  */
+
+/* Step primitive --------------------------------------------------------- */
+
 .steps {
   --step-size: 1.75rem;
-  --step-min: 7rem;
-  --step-gap: var(--space-20);
+  --step-inline-gap: var(--space-20);
   --step-line-size: var(--border-width);
   --step-marker-bg: var(--surface);
   --step-marker-border: var(--border);
@@ -35,29 +71,14 @@
 
   counter-reset: actual-step;
   display: flex;
-  flex-direction: row;
-  inline-size: 100%;
   margin: 0;
   padding: 0;
   list-style: none;
-  /* Fill when it fits, scroll when it cannot: items never shrink below
-     --step-min, so labels keep a readable width and the sequence scrolls
-     horizontally instead of squishing. overscroll-behavior keeps the scroll
-     from chaining to the page. */
-  overflow-x: auto;
-  overscroll-behavior-inline: contain;
 }
 
 .steps > li {
   position: relative;
-  display: grid;
-  flex: 1 0 var(--step-min);
-  grid-template-rows: var(--step-size) auto;
-  gap: var(--step-gap);
-  justify-items: center;
-  min-inline-size: max(var(--step-size), var(--step-min));
   color: var(--text-muted);
-  text-align: center;
   counter-increment: actual-step;
 }
 
@@ -78,46 +99,259 @@
   line-height: 1;
 }
 
-.steps > li::after {
-  content: "";
-  position: absolute;
-  inset-block-start: calc((var(--step-size) - var(--step-line-size)) / 2);
-  inset-inline-start: calc(50% + var(--step-size) / 2);
-  inline-size: calc(100% - var(--step-size));
-  block-size: var(--step-line-size);
-  /* A custom property resolves its var() before inheritance, so a default
-     --step-connector: var(--step-line) on .steps would freeze the parent line
-     color and a .complete child's connector would never follow its own line.
-     Falling back to the local --step-line here keeps each connector in sync;
-     an explicit --step-connector still wins when the author sets one. */
-  background: var(--step-connector, var(--step-line));
+/* The marker carries the state, so the label reads a notch below it — set on
+   the component, never per representation: a size that changed with the layout
+   would resize the text under a reader dragging a window. `color: inherit` is
+   here rather than in a rule of its own for `a.step-label`, because a span
+   inherits its ink anyway; only a link has anything to take back, and taking it
+   back for every label costs nothing and one rule less. A navigable label keeps
+   its underline, hover and focus ring — just not a link color, which would read
+   ahead of the marker states.
+
+   Scoped to `.steps`, unlike `.menu-item-text` and the framework's other
+   sub-part classes: a bare `.step-label` weighs (0,1,0), exactly tying
+   `.prose :where(a)`, so a stepper in prose would be decided by bundle order. */
+.steps .step-label {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-tight);
+  color: inherit;
 }
 
-.steps > li:last-child::after {
-  content: none;
+/* Each composition gives the connector its own geometry and background, so the
+   only shared fact is which steps get one — every step but the last. Stated as
+   the condition rather than as a `content: none` rule undoing a `content: ""`
+   rule: a pseudo-element with no content generates no box, so a composition can
+   address `> li::after` freely and still not trail a line past the last step. */
+.steps > li:not(:last-child)::after {
+  content: "";
 }
 
-.steps > :is(.complete, [aria-current="step"]) {
+/* Prefixed like `.step-label`, unlike the framework's bare `.primary` /
+   `.outline` modifiers: those qualify a component on its own element, this
+   marks one item inside one. A bare `.complete` would also claim a very
+   ordinary English word globally, for a single component's single state. */
+.steps > .step-complete {
   --step-marker-bg: var(--state-selected);
   --step-marker-border: var(--state-selected);
   --step-marker-fg: var(--state-selected-fg);
+  --step-line: var(--state-selected);
+
+  color: var(--text);
+}
+
+/* Complete owns the accented connector that reaches the current step, so the
+   connector leaving current goes back to neutral. Declared after
+   .step-complete at equal specificity: current wins on every channel. */
+.steps > [aria-current="step"] {
+  --step-marker-bg: var(--surface);
+  --step-marker-border: var(--state-selected);
+  --step-marker-fg: var(--state-selected);
+  --step-line: var(--border);
 
   color: var(--text);
 }
 
-/* Thicker border is the selected affordance in every mode — structural, and it
-   never competes with the outline channel owned by focus. */
-.steps > :is(.complete, [aria-current="step"])::before {
+.steps > [aria-current="step"]::before {
   border-width: calc(var(--border-width) * 2);
 }
 
-.steps > .complete {
-  --step-line: var(--state-selected);
+/* Weight marks "where I am now". Complete needs none: its filled disc already
+   reads as strongly. */
+.steps > [aria-current="step"] .step-label {
+  font-weight: var(--font-weight-strong);
 }
 
-/* A finished step may replace its number with a mark (e.g. a check glyph):
-   --step-complete-mark accepts any content value and falls back to the
-   counter, so existing numbered steppers are unchanged. */
-.steps > .complete::before {
+.steps > .step-complete:not([aria-current="step"])::before {
   content: var(--step-complete-mark, counter(actual-step));
 }
+
+/* Horizontal ------------------------------------------------------------- */
+
+.steps-horizontal {
+  --step-min: 7rem;
+  --step-gap: var(--space-20);
+
+  inline-size: 100%;
+  overflow-x: auto;
+  /* Stated, never left to `overflow-x` alone: one scrolling axis computes the
+     other to `auto`, and a row hugs fractional content closely enough that a
+     rounding difference then raises a phantom vertical scrollbar. */
+  overflow-y: hidden;
+  overscroll-behavior-inline: contain;
+}
+
+/* A scroll container clips at the padding edge, so a navigable row reserves the
+   focus ring's own width and offset. Only this composition scrolls, and only a
+   link has a ring to protect. */
+.steps-horizontal:has(a[href]) {
+  padding-block: calc(var(--focus-outline-offset) + var(--border-width) * 2);
+}
+
+/* One explicit row, the marker's: a `.step-label` is auto-placed into an
+   implicit second row, and two tracks are also the only thing `gap` has to sit
+   between. So an empty step measures exactly `--step-size`, and the rule below
+   takes back nothing. `var(--step-size) auto` would build that second row
+   whether or not a label ever arrives, and the compact form would then have to
+   remove both the track and the gap. */
+.steps-horizontal > li {
+  display: grid;
+  flex: 1 0 var(--step-min);
+  grid-template-rows: var(--step-size);
+  gap: var(--step-gap);
+  justify-items: center;
+  min-inline-size: max(var(--step-size), var(--step-min));
+  text-align: center;
+}
+
+/* An empty step is a marker and nothing else, so it needs a marker's width
+   rather than a reading width. That is what lets five of them fit a phone with
+   no size context and no variant class.
+
+   `justify-items` is not an override of the row's centring: the marker is
+   centred because a label sits under it and the two share a centre, and with no
+   label there is nothing to centre against. The marker takes the start of its
+   own share instead, the connector below fills the rest of it, and the last
+   step has no share to fill — so the track runs edge to edge and lines up with
+   the text around it, the way the inline representation does.
+
+   `:empty` says exactly what the markup says, the way `.badge:empty` does, and
+   it reads the item's own content: bare text in an `<li>` keeps a reading width
+   like its wrapped peers, where `> li:has(.step-label)` would give it a marker
+   floor and skew the row. It also predates `:has()` by a decade, so the compact
+   form reaches the Degraded tier and only the inline bonus needs `:has()`. */
+.steps-horizontal > li:empty {
+  flex: 1 1 0;
+  justify-items: start;
+  min-inline-size: var(--step-size);
+}
+
+.steps-horizontal > li:empty::after {
+  inset-inline-start: var(--step-size);
+}
+
+.steps-horizontal > li:empty:last-child {
+  flex: 0 0 auto;
+}
+
+/* The pseudo-element is marker-height so --step-connector may be any complete
+   background value. */
+.steps-horizontal > li::after {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: calc(50% + var(--step-size) / 2);
+  inline-size: calc(100% - var(--step-size));
+  block-size: var(--step-size);
+  background: var(
+    --step-connector,
+    linear-gradient(var(--step-line), var(--step-line)) center /
+    100% var(--step-line-size) no-repeat
+  );
+}
+
+/*
+ * The one horizontal container query. Past 60rem a labelled row has the room
+ * to put marker and label inline and still leave the connector a real region
+ * between groups, rather than a stub. Calibrated on five steps — the widest
+ * supported row, and therefore the binding case — and it counts nothing, so it
+ * serves every count. Below it, stacked; a marker row is already the shape
+ * this query produces and stays out of it.
+ *
+ * Horizontal is a 2-5 step component. Outside that domain the rule simply
+ * applies as written, because a row that is out of contract is not owed a
+ * curated fallback.
+ */
+@supports (container-type: inline-size) {
+  @container actual-container (inline-size >= 60rem) {
+    .steps-horizontal:has(.step-label) > li {
+      display: flex;
+      flex: 1 1 auto;
+      align-items: center;
+      gap: var(--step-inline-gap);
+      min-inline-size: 0;
+      text-align: start;
+      white-space: nowrap;
+    }
+
+    .steps-horizontal:has(.step-label) > li::after {
+      position: static;
+      flex: 1 1 2rem;
+      inline-size: auto;
+      block-size: var(--step-size);
+      margin-inline-end: var(--step-inline-gap);
+      background: var(
+        --step-inline-connector,
+        var(
+          --step-connector,
+          linear-gradient(var(--step-line), var(--step-line)) center /
+          100% var(--step-line-size) no-repeat
+        )
+      );
+    }
+
+    .steps-horizontal:has(.step-label) > li:last-child {
+      flex: 0 0 auto;
+    }
+  }
+}
+
+/* Vertical --------------------------------------------------------------- */
+
+.steps-vertical {
+  --step-vertical-gap: var(--space-40);
+
+  flex-direction: column;
+  gap: var(--step-vertical-gap);
+}
+
+/* `justify-items` looks like a reset and is not one — nothing here resets
+   anything, since the horizontal rules never applied. Grid items blockify, so
+   without it a label stretches the whole 1fr track: 264px against 75px for an
+   `a.step-label`, a full-width focus ring the row does not give the same link. */
+.steps-vertical > li {
+  display: grid;
+  grid-template-columns: var(--step-size) minmax(0, 1fr);
+  align-items: start;
+  justify-items: start;
+  gap: var(--step-inline-gap);
+  min-block-size: var(--step-size);
+}
+
+/* An empty step is a marker rail. The column cannot use the row's implicit
+   second track, because `grid-auto-flow` is `row`: an auto-placed label would
+   land *under* its marker. Its second track is therefore explicit, and this
+   takes it back.
+
+   Silent in a stretched column, where the item fills its line whatever its
+   tracks say. It bites in a shrink-to-fit box — which is what a sticky
+   progress rail usually is — where the label track and the gap to it make the
+   rail `--step-inline-gap` wider than the markers it draws: measured 36px
+   against 28px. No `gap: 0` needed; one track has nothing to sit beside. */
+.steps-vertical > li:empty {
+  grid-template-columns: var(--step-size);
+}
+
+/* The row starts at the top so a wrapped label begins level with its marker.
+   align-self only bites on a single line, which would otherwise float above
+   the marker's centre.
+
+   The one `.step-label` rule that keeps a child combinator: `align-self` is a
+   grid-item property, so this declaration is meaningless on anything but a
+   direct child of the row. Elsewhere the label is addressed as a descendant —
+   the framework owns the structure, and repeating it buys nothing. */
+.steps-vertical > li > .step-label {
+  align-self: center;
+}
+
+/* The vertical track publishes no hook of its own: a horizontal connector value
+   cannot transpose onto this geometry, and this selector is already a reachable
+   override for the design that finally asks. */
+.steps-vertical > li::after {
+  position: absolute;
+  inset-block-start: var(--step-size);
+  inset-inline-start: calc((var(--step-size) - var(--step-line-size)) / 2);
+  inline-size: var(--step-line-size);
+  block-size: calc(100% - var(--step-size) + var(--step-vertical-gap));
+  background:
+    linear-gradient(var(--step-line), var(--step-line)) center / var(--step-line-size) 100%
+    no-repeat;
+}

package/src/css/components/surface.css

@@ -19,7 +19,9 @@
   z-index: calc(var(--z-menu) - 1);
   background: var(--backdrop-fill);
   opacity: 1;
-  transition: opacity var(--duration) var(--ease);
+  /* A scrim never travels; it fades on the neutral `ease`. Duration matches
+     the flyout sheet it accompanies so it never lags the panel. */
+  transition: opacity var(--duration-fast) ease;
 }
 
 .surface-backdrop[hidden] {
@@ -36,8 +38,8 @@
 @supports (transition-behavior: allow-discrete) {
   .surface-backdrop {
     transition:
-      opacity var(--duration) var(--ease),
-      display var(--duration) allow-discrete;
+      opacity var(--duration-fast) ease,
+      display var(--duration-fast) allow-discrete;
   }
 }
 @media print {

package/src/css/components/tooltip.css

@@ -32,31 +32,28 @@
   overflow-wrap: anywhere;
   pointer-events: auto;
   user-select: none;
+  /* Tooltips fade only: the anchor edge, marked by the arrow, must stay put
+     during motion, and a 4% scale was perceptible on small text. Scaling moves
+     the arrow tip away from its trigger on every placement. */
   opacity: 1;
-  scale: 1;
-  transition:
-    opacity var(--duration-fast) var(--ease),
-    scale var(--duration-fast) var(--ease);
+  transition: opacity var(--duration-fast) ease;
 }
 
 .tooltip[hidden] {
   display: none;
   opacity: 0;
-  scale: 0.96;
 }
 
 @starting-style {
   .tooltip:not([hidden]) {
     opacity: 0;
-    scale: 0.96;
   }
 }
 
 @supports (transition-behavior: allow-discrete) {
   .tooltip {
     transition:
-      opacity var(--duration-fast) var(--ease),
-      scale var(--duration-fast) var(--ease),
+      opacity var(--duration-fast) ease,
       display var(--duration-fast) allow-discrete;
   }
 }

package/src/css/core/base.css

@@ -3,6 +3,9 @@
  *
  * Sits between reset (browser defaults) and prose (rich content scope).
  * These styles apply everywhere — cards, dialogs, heroes — not only in prose.
+ *
+ * Public hooks:
+ * --link
  */
 
 body {
@@ -12,8 +15,11 @@ body {
   line-height: var(--line-height);
 }
 
+/* Bare links inherit their ink by default, so nothing changes unless a theme
+   opts in by setting --link. Because this is an element selector, any component
+   rule that colors its own anchors still wins. */
 a {
-  color: inherit;
+  color: var(--link, inherit);
   text-underline-offset: 0.18em;
 }
 

package/src/css/core/intents.css

@@ -31,3 +31,9 @@
   --intent: var(--neutral);
   --intent-fg: var(--neutral-fg);
 }
+
+/* Paint an inherited or local intent on a simple foreground element without
+   turning the intent classes into general-purpose color utilities. */
+.intent-color {
+  color: var(--intent);
+}

package/src/css/core/tokens.css

@@ -8,8 +8,8 @@
    *
    * Derived: "Theme-derived aliases" and "State tokens" reference intent and
    * surface tokens and follow the theme; do not hard-code values into them.
-   * Internal: indicator offsets, --bar-height, --disabled-opacity and the
-   * like are consumed by components, not authored.
+   * Internal: indicator offsets, --disabled-opacity and the like are
+   * consumed by components, not authored.
    *
    * Component-local hooks and internal state relays live with their
    * components. See docs/pages/foundations/tokens.md for the public/internal
@@ -33,9 +33,10 @@
   --font-size-md: 1rem;
   --font-size-lg: 1.125rem;
 
-  /* Spacing — official steps are named in tens so the scale stays open for
-     application themes to intercalate intermediate values (--space-15,
-     --space-45…) without colliding with future framework steps. */
+  /* Spacing — official steps are named in tens so the scale stays open.
+     Actual CSS will never define a --space-* that is not a multiple of 10:
+     the intermediate names (--space-15, --space-45…) are reserved for
+     applications, and no future framework step can collide with them. */
   --gap: 0.75rem;
   --density-space: var(--space-40);
   --density-compact-size: 1.5rem;
@@ -53,14 +54,25 @@
   --shadow-popout: 0 0.25rem 0.75rem rgb(0 0 0 / 0.15);
 
   /* Motion — see reset.css for the prefers-reduced-motion hard reset.
-     --duration drives component transitions (hover/focus); the dedicated
-     animation rates below tune one-shot open/close and decorative loops. */
+     --duration scales component transitions (hover/focus); the dedicated
+     animation rates below tune one-shot open/close and decorative loops.
+     Generic state/interaction motion uses the CSS default `ease` directly
+     (registered nowhere). --ease-enter/--ease-exit express the character of
+     one-shot presence changes, owned by the open/closed state rules that
+     separate them (status-bar, drawer, modal). The pair follows the standard
+     M3 rhythm; the more aggressive emphasized-decelerate entrance is
+     deliberately not offered because it only pays off on 250–400ms motions,
+     beyond this vocabulary. Toggles that share one transition list at
+     --duration-fast (flyout, tooltip) and pure-opacity backdrops stay on
+     `ease`: at 100ms the curve has almost no resolving time, and a scrim is
+     not traveling anywhere. */
   --duration: 150ms;
   --duration-fast: 100ms;
   --duration-slow: 200ms;
   --duration-spin: 0.75s;
   --duration-shimmer: 1.2s;
-  --ease: ease;
+  --ease-enter: cubic-bezier(0.2, 0, 0, 1);
+  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
 
   /* Focus ring — shared by every interactive component's :focus-visible */
   --focus-outline-color: currentColor;
@@ -78,7 +90,9 @@
   --backdrop-opacity: 0.45;
   --backdrop-fill: rgb(0 0 0 / var(--backdrop-opacity));
 
-  /* Progress / meter track height */
+  /* Bar thickness shared by .progress and .meter — two conceptual variants of
+     the same geometry. Public: set it on the element or on an application
+     class rather than reaching for a size variant. */
   --bar-height: 0.65rem;
 
   /* Controls — inputs and buttons share --control-size so heights always match.
@@ -135,6 +149,7 @@
   --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238a8594' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
   --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
   --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E");
+  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
 
   /* Viewport size tokens — fallback vh/vw with dvh/vi enhancement.
      Consumed by full-viewport components (app-shell, drawer, modal, flyout).