actual-css 0.12.0 → 0.13.0

package/src/css/components/tab.css

@@ -12,8 +12,18 @@
  * author class can then adjust a vertical strip without restating the
  * attribute to reach its specificity.
  *
+ * A horizontal strip is one axis of navigation, so it never wraps: a second
+ * line no longer matches the Left/Right model and reads as a nested level.
+ * When the tabs do not fit, the strip scrolls without a scrollbar; focus
+ * scrolls the active tab into view.
+ *
  * Public hooks:
+ * --tab-flex
  * --tab-gap
+ *
+ * Internal:
+ * --tab-edge
+ * --tab-fade-dir (read inside @keyframes, so it resolves per element)
  */
 /* Intent boundary — inherited intents do not tint this component.
    Local intent classes still win because :where() has zero specificity. */
@@ -24,27 +34,129 @@
 .tabs {
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: var(--space-10);
   margin: 0;
   padding: 0;
+  /* Block overflow is hidden, not auto: overflow-x: auto alone computes the
+     block axis to auto, so a sub-pixel line box would add a vertical
+     scrollbar inside the strip. Nothing paints outside it: the focus outline
+     is inset and the indicator sits inside the tab. */
+  overflow: auto hidden;
+  overscroll-behavior-inline: contain;
+  /* why: a visible bar sits on the indicator and the hairline and reads as a
+     second underline. The strip has its own scroll controls: selecting the
+     clipped tab, or focusing it, brings it into view with the next one
+     hinted by scroll-padding; arrow keys and swipes do the same. */
+  scrollbar-width: none;
+  /* Focus scrolls a tab in with room to spare, hinting at the next one; the
+     edge fade below spans the same inset, so a revealed tab stays clear of it. */
+  --tab-edge: var(--space-60);
+
+  scroll-padding-inline: var(--tab-edge);
   border-block-end: var(--border-width) solid var(--border);
   list-style: none;
 }
 
+/* The landmark around link tabs is not a scroll container, so as a flex or
+   grid item it would keep the strip's full width and push the page into
+   scrolling. Letting it shrink hands the overflow back to the strip.
+   Without :has() the landmark keeps its width; min-inline-size: 0 on the
+   wrapper is the fallback. */
+:where(nav:has(> .tabs)) {
+  min-inline-size: 0;
+}
+
+/* Items keep their size and the strip scrolls instead. Covers both
+   anatomies: .tab directly in a tablist, or <li> in a navigation list.
+   --tab-flex: 1 1 0 shares the width equally; an item still never shrinks
+   below its label (flex items keep min-content), so a strip that cannot fit
+   scrolls as before. */
+.tabs > * {
+  flex: var(--tab-flex, none);
+}
+
 .tabs:where([aria-orientation="vertical"]) {
   display: grid;
+  overflow: visible;
   align-content: start;
   justify-items: stretch;
   border-block-end: 0;
   border-inline-end: var(--border-width) solid var(--border);
 }
 
+/* Edge fade: with no scrollbar, the strip fades the edges it can still scroll
+   toward. It runs on the strip's own inline timeline, which is inactive on a
+   strip that fits or a vertical rail, so those stay unmasked. Keep the
+   @supports: without scroll timelines the animation would end at once and pin
+   its last mask. It follows scroll, not time, so reduced motion keeps it. */
+@supports (animation-timeline: scroll()) {
+  .tabs {
+    --tab-fade-dir: to right;
+
+    animation: actual-tabs-fade linear both;
+    animation-timeline: scroll(self inline);
+  }
+
+  /* Gradient keywords are physical; :dir() follows the strip's own
+     direction, so an LTR island in an RTL page keeps its fade on the right. */
+  .tabs:dir(rtl) {
+    --tab-fade-dir: to left;
+  }
+}
+
+/* A strip that loads on a current link tab starts scrolled to it. Horizontal
+   only: the strip is then its nearest scroll container, while a vertical
+   rail would hand the target to the page. Engines without the property start
+   at the first tab, and the fade says there is more. */
+:where(.tabs:not([aria-orientation="vertical"]))
+.tab:is([aria-current="page"], [aria-current="true"]) {
+  /* biome-ignore lint/correctness/noUnknownProperty: CSS Scroll Snap 2 property that Biome's list predates; an engine without it drops the declaration. */
+  scroll-initial-target: nearest;
+}
+
+/* Forced colors keep every label at full contrast. */
+@media (forced-colors: active) {
+  .tabs {
+    animation: none;
+  }
+}
+
+/* mask-image does not interpolate, so each mask holds until halfway to the
+   next keyframe: the start fade appears within the first pixels of scroll and
+   the end fade drops at the very end. */
+@keyframes actual-tabs-fade {
+  0% {
+    mask-image: linear-gradient(
+      var(--tab-fade-dir),
+      #000 calc(100% - var(--tab-edge)),
+      transparent
+    );
+  }
+
+  1%,
+  99% {
+    mask-image: linear-gradient(
+      var(--tab-fade-dir),
+      transparent,
+      #000 var(--tab-edge) calc(100% - var(--tab-edge)),
+      transparent
+    );
+  }
+
+  100% {
+    mask-image: linear-gradient(var(--tab-fade-dir), transparent, #000 var(--tab-edge));
+  }
+}
+
 .tab {
   /* Positioning context for the selected indicator pseudo. */
   position: relative;
   display: inline-flex;
   align-items: center;
+  /* A tab wider than its label (--tab-flex) centers it; at natural width this
+     changes nothing, and a vertical rail resets it to the start below. */
+  justify-content: center;
   gap: var(--tab-gap, 0.375em);
   min-block-size: var(--control-size);
   padding-inline: var(--space-30);
@@ -58,12 +170,18 @@
      the strip. The active state is carried by color and the indicator line. */
   font-weight: var(--font-weight-semibold);
   text-decoration: none;
+  /* A label breaking inside a one-line strip is the same defect as the strip
+     wrapping. */
+  white-space: nowrap;
   cursor: pointer;
 }
 
+/* A vertical strip has no inline axis to protect: long labels wrap within the
+   rail instead of overflowing it. */
 .tabs:where([aria-orientation="vertical"]) .tab {
   justify-content: flex-start;
   padding-inline-end: var(--space-40);
+  white-space: normal;
 }
 
 .tab:is(:disabled, [aria-disabled="true"]) {
@@ -94,8 +212,13 @@
   border-end-end-radius: 0;
 }
 
+/* A link tab is current on aria-current="page". "true" is for the one place
+   where no page token fits: a navigation flyout trigger whose panel holds the
+   current page. State selectors name their values, never the attribute's
+   presence, so "false" (what React and Vue serialize for a false binding)
+   stays inert. */
 .tab[aria-selected="true"],
-.tab[aria-current="page"] {
+.tab:is([aria-current="page"], [aria-current="true"]) {
   color: var(--intent, var(--state-selected));
 }
 
@@ -104,7 +227,7 @@
    forced colors and erase the distinction. currentColor follows the palette the
    UA forces, so no forced-colors block is needed. */
 .tab[aria-selected="true"]::after,
-.tab[aria-current="page"]::after {
+.tab:is([aria-current="page"], [aria-current="true"])::after {
   content: "";
   position: absolute;
   inset-inline: 0;
@@ -113,9 +236,16 @@
 }
 
 .tabs:where([aria-orientation="vertical"]) .tab[aria-selected="true"]::after,
-.tabs:where([aria-orientation="vertical"]) .tab[aria-current="page"]::after {
+.tabs:where([aria-orientation="vertical"])
+  .tab:is([aria-current="page"], [aria-current="true"])::after {
   inset-block: 0;
   inset-inline: auto 0;
   border-block-end: 0;
   border-inline-end: 2px solid currentColor;
 }
+
+/* A shared width (--tab-flex) lands on the <li> of a link tab; the tab fills
+   it, so the indicator and the hit area span the whole share. */
+.tabs > li > .tab {
+  inline-size: 100%;
+}

package/src/css/core/focus.css

@@ -21,14 +21,16 @@
    Documented exception: an invalid field focuses in --form-invalid-border
    (danger), so the error stays visible at the point of correction. The border
    carries the same hook; report:theme-contrast measures that line at 3:1
-   against the field's background alongside --focus. */
+   against the field's background alongside --focus.
+
+   Public hooks:
+   --focus-outline (fallback-only: replaces the whole generic line)
+*/
 :focus {
-  outline: var(--focus-outline);
+  outline: var(--focus-outline, var(--focus-ring-width) solid var(--focus-outline-color));
   outline-offset: var(--focus-outline-offset);
 }
 
-@supports selector(:focus-visible) {
-  :focus:not(:focus-visible) {
-    outline: none;
-  }
+:focus:not(:focus-visible) {
+  outline: none;
 }

package/src/css/core/theme.css

@@ -8,7 +8,9 @@
  * Derived: "Theme-derived aliases", Tone subsystem, Backdrop fill — reference
  * other tokens; hard-coded overrides on a custom theme will break the intent.
  * Exception: --surface-opaque and --surface-solid-fg are public; a theme with
- * translucent surfaces overrides them with opaque values.
+ * translucent surfaces overrides them with opaque values. --border-control is
+ * public too: the resting edge of a neutral control, apart from structural
+ * separators.
  * Internal: --hgroup-gap.
  */
 :root {
@@ -110,6 +112,9 @@
      never a fill. --surface-solid-fg is the ink on --surface-solid. */
   --surface-opaque: var(--surface);
   --surface-solid-fg: var(--surface);
+  /* The edge that tells a control apart from the surface, where --border only
+     separates surfaces: fields, choices, switch, OTP cells, choice cards. */
+  --border-control: var(--border);
 }
 
 /* Soft foreground hooks — the soft ink is the intent rebated toward the local

package/src/css/core/tokens.css

@@ -81,9 +81,11 @@
      without a component ring (links, summary, plain items). Components draw
      the themed ring instead: --focus-ring-width solid --focus. See focus.css
      for the two contracts. Both share --focus-ring-width: they differ in
-     color only. */
+     color only. No --focus-outline alias here: declared on :root it would be
+     inherited already computed, so a theme island or a region setting
+     --focus-ring-width would not reach it. focus.css composes the line on the
+     focused element instead. */
   --focus-outline-color: currentColor;
-  --focus-outline: var(--focus-ring-width) solid var(--focus-outline-color);
   --focus-outline-offset: 2px;
   --focus-ring-width: 2px;
 

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

@@ -38,7 +38,7 @@
   --choice-card-pad: var(--density-space, var(--space-40));
   --choice-card-gap: var(--space-30);
   --choice-card-radius: var(--radius);
-  --choice-card-border: var(--border);
+  --choice-card-border: var(--border-control);
   --choice-card-bg: var(--surface);
   --choice-card-check-size: 1.25em;
 

package/src/css/forms/choice.css

@@ -144,7 +144,7 @@
 /* Control geometry. --choice-* are the per-state tokens. */
 .check,
 .radio {
-  --choice-border: var(--border);
+  --choice-border: var(--border-control);
   --choice-bg: var(--surface);
   --choice-mark: var(--primary-fg);
 

package/src/css/forms/control.css

@@ -30,7 +30,7 @@
 .input,
 .textarea,
 .select {
-  --control-border: var(--border);
+  --control-border: var(--border-control);
   --control-bg: var(--surface);
   --control-fg: var(--text);
   --control-cursor: auto;

package/src/css/forms/floating-field.css

@@ -9,10 +9,13 @@
  * messages stay in the surrounding .field, not inside the cell, so the
  * resting label can center on the control alone.
  *
- * The control must precede the label: the float is driven by the general
- * sibling combinator and :placeholder-shown. Injected nodes may appear between
- * the control and the label (password managers, extension wrappers); the cell
- * contract stays a single control plus one label. Every .input/.textarea needs
+ * The cell reads its control's state through :has(), so the label may come
+ * before or after the control (a form theme rendering label then widget needs
+ * no reordering). Injected sibling nodes are tolerated (password managers,
+ * extension wrappers) as long as the control stays a direct child; the cell
+ * contract stays a single control plus one label, since a second control
+ * would float the label on either one's state.
+ * Every .input/.textarea needs
  * placeholder=" " to expose a reliable empty state — without it the label
  * only reacts to focus.
  *
@@ -62,23 +65,22 @@
 }
 
 /* Single-line controls rest in the middle until they receive a value. */
-.floating-field > :is(.input, .select) ~ .field-label {
+.floating-field:has(> :is(.input, .select)) > .field-label {
   inset-block-start: 50%;
   transform: translateY(-50%);
 }
 
 /* An empty textarea label follows the control's normal first-line position;
    the control itself keeps the extra headroom reserved for its floated state. */
-.floating-field > .textarea ~ .field-label {
+.floating-field:has(> .textarea) > .field-label {
   inset-block-start: calc(1em + var(--border-width));
   transform: none;
 }
 
 /* :autofill covers prefilled values before interaction, when the browser may
    not have propagated the value to the placeholder state yet. */
-.floating-field
-  > :is(.input, .textarea):is(:focus, :autofill, :not(:placeholder-shown))
-  ~ .field-label {
+.floating-field:has(> :is(.input, .textarea):is(:focus, :autofill, :not(:placeholder-shown)))
+> .field-label {
   inset-block-start: var(--floating-label-top);
   transform: none;
   font-size: var(--font-size-xs);
@@ -88,16 +90,16 @@
 /* Controls without a dependable :placeholder-shown empty state stay floated:
    select always, and date/time inputs whose placeholder rendering is
    inconsistent across engines (Firefox shows none). */
-.floating-field
+.floating-field:has(
   > :is(
-    .select,
-    .input[type="date"],
-    .input[type="time"],
-    .input[type="datetime-local"],
-    .input[type="month"],
-    .input[type="week"]
-  )
-  ~ .field-label {
+      .select,
+      .input[type="date"],
+      .input[type="time"],
+      .input[type="datetime-local"],
+      .input[type="month"],
+      .input[type="week"]
+    )
+) > .field-label {
   inset-block-start: var(--floating-label-top);
   transform: none;
   font-size: var(--font-size-xs);

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

@@ -21,15 +21,12 @@
  * --form-actions-sticky-padding (owned by .form-actions.sticky)
  */
 
-/* The policy hooks write the properties themselves rather than relaying
-   --cluster-*: a relay would inherit into any .cluster nested in the row.
-   These are equal-specificity overrides of .cluster, so they win only because
-   forms load after layout in the official bundle (tests/css-audit.test.js
-   guards the order); utilities load later and keep the author's last word. On
-   this row --cluster-justify/--cluster-align have no effect. */
+/* The role relays its policy into the row's cluster hooks. Cluster hooks stop
+   at every nested .cluster, so the relay cannot leak, and this class beats the
+   cluster's zero-specificity reset in any import order. */
 .form-actions {
-  align-items: var(--form-actions-align, center);
-  justify-content: var(--form-actions-justify, flex-start);
+  --cluster-align: var(--form-actions-align, center);
+  --cluster-justify: var(--form-actions-justify, flex-start);
 }
 
 /* Opt-in sticky variant. When the bar is not stuck (at rest) the translucent

package/src/css/forms/native.css

@@ -25,7 +25,7 @@
     calc((var(--control-size) - 1lh - 2 * var(--border-width)) / 2)
   );
   padding-inline: var(--space-20);
-  border: var(--border-width) solid var(--border);
+  border: var(--border-width) solid var(--border-control);
   border-radius: var(--radius-sm);
   background: var(--surface-subtle);
   color: var(--text);
@@ -59,7 +59,7 @@
   inline-size: var(--control-size);
   block-size: var(--control-size);
   padding: var(--border-width);
-  border: var(--border-width) solid var(--border);
+  border: var(--border-width) solid var(--border-control);
   border-radius: var(--radius);
   background: var(--surface);
   cursor: pointer;

package/src/css/forms/otp.css

@@ -21,7 +21,7 @@
   --otp-cell-size: var(--control-size);
   --otp-gap: var(--space-10);
   --otp-font-size: 1.5em;
-  --otp-cell-border: var(--border);
+  --otp-cell-border: var(--border-control);
   --otp-cell-bg: var(--surface);
   --otp-caret-space: calc((var(--otp-cell-size) - 1ch) / 2 + var(--otp-gap) + 1px);
 
@@ -107,10 +107,9 @@
   --otp-cell-border: var(--danger);
 }
 
-@supports selector(:user-invalid) {
-  .needs-validation .otp > input:user-invalid ~ span {
-    --otp-cell-border: var(--danger);
-  }
+/* biome-ignore lint/style/noDescendingSpecificity: all invalid routes write the same border, so their order cannot change the state. Keep :user-invalid separate so unsupported engines retain the other routes. */
+.needs-validation .otp > input:user-invalid ~ span {
+  --otp-cell-border: var(--danger);
 }
 
 .otp > input:disabled {

package/src/css/forms/switch.css

@@ -29,7 +29,7 @@
 
 .switch {
   --switch-bg: var(--border);
-  --switch-border: var(--border);
+  --switch-border: var(--border-control);
   --switch-knob: var(--surface-raised);
   --switch-block-size: calc(var(--choice-control-size) + 0.125em);
   --switch-width: calc(var(--switch-block-size) * 1.8);

package/src/css/forms/validation.css

@@ -5,6 +5,8 @@
  *
  * Imported by default through forms/index.css. Custom builds may omit this
  * file when an app wants to own validation styling completely.
+ * Without :has(), automatic error display and choice-card borders drop;
+ * native control states and the explicit .field.danger route stay available.
  *
  * State coverage (which states each component ships) is audited in
  * tests/validation.test.js and summarized in docs/pages/forms/validation.md —
@@ -26,11 +28,14 @@
   display: block;
 }
 
-@supports selector(:has(*)) {
-  .field:has([aria-invalid="true"]) > .field-error,
-  .needs-validation.was-validated .field:has(:invalid) > .field-error {
-    display: block;
-  }
+.field:has([aria-invalid="true"]) > .field-error,
+.needs-validation.was-validated .field:has(:invalid) > .field-error {
+  display: block;
+}
+
+/* biome-ignore lint/style/noDescendingSpecificity: every invalid route reveals the error; keep :user-invalid separate so unsupported engines retain the other routes. */
+.needs-validation .field:has(:user-invalid) > .field-error {
+  display: block;
 }
 
 :where(.input, .textarea, .select, .check, .radio, .switch)[aria-invalid="true"],
@@ -54,39 +59,27 @@
   --switch-bg: var(--danger);
 }
 
-@supports selector(:user-invalid) {
-  .needs-validation .check:is(:checked, :indeterminate):user-invalid,
-  .needs-validation .radio:checked:user-invalid {
-    --choice-bg: var(--danger);
-  }
+.needs-validation .check:is(:checked, :indeterminate):user-invalid,
+.needs-validation .radio:checked:user-invalid {
+  --choice-bg: var(--danger);
+}
 
-  .needs-validation .switch:checked:user-invalid {
-    --switch-bg: var(--danger);
-  }
+.needs-validation .switch:checked:user-invalid {
+  --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);
-  }
+.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);
-  }
+.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);
-  }
+.needs-validation .choice-card:has(:user-invalid) {
+  --form-invalid-border: var(--danger);
 }

package/src/css/layout/center.css

@@ -7,6 +7,8 @@
  * --center-size
  * --center-pad
  */
+/* The hooks inherit on purpose: a site's content width is page policy, so a
+   theme sets them once on :root for every .center. */
 .center {
   box-sizing: content-box;
   inline-size: calc(100% - var(--center-pad, 1rem) * 2);

package/src/css/layout/cluster.css

@@ -10,7 +10,21 @@
  *
  * Child contract: direct-child margins are reset, spacing comes from --gap.
  * A ul/ol/menu keeps its semantics but loses list chrome (see below).
+ *
+ * The hooks describe this row's own geometry, so they stop at each cluster:
+ * set them on the cluster itself, or target nested rows with a selector. The
+ * gap token is context rhythm and keeps inheriting.
  */
+
+/* Instance boundary: an ancestor's value never reaches a nested cluster.
+   Zero specificity, so any class or inline style on the cluster wins without
+   depending on import order; `initial` makes the var() fallbacks apply. */
+:where(.cluster) {
+  --cluster-align: initial;
+  --cluster-justify: initial;
+  --cluster-wrap: initial;
+}
+
 .cluster {
   display: flex;
   flex-direction: row;

package/src/css/layout/grid.css

@@ -22,6 +22,13 @@
  * the thresholds were arrived at: docs/design-notes/grid.md.
  */
 
+/* Instance boundary: a nested grid never takes its parent's track template.
+   Zero specificity, so a class or inline style on the grid itself wins. */
+:where(.grid) {
+  --grid-columns: initial;
+  --grid-min: initial;
+}
+
 /* --grid-columns replaces the intrinsic auto-fit template: once set, the grid
    no longer collapses on its own and the author owns narrow-container
    collapse. */

package/src/css/layout/scroller.css

@@ -13,7 +13,16 @@
  * draw their native scrollbar — the intended fallback, not a broken state.
  *
  * Styles the scrollbar only; it does not create the overflow. Pair it with
- * .overflow-auto or a component that already scrolls.
+ * .overflow-auto or a component that already scrolls (horizontal steps, a
+ * table wrap; tabs hide their bar and fade their own edges). No edge fade
+ * here: a mask would dictate the strip's scroll-padding and focus geometry for
+ * a decorative cue, and an item clipped at the edge already says the strip
+ * continues.
+ *
+ * Not on touch: Chromium trades the overlay scrollbar of a touch screen,
+ * hidden at rest, for a classic always-visible one as soon as scrollbar-color
+ * or scrollbar-width is set. On a phone that painted a permanent bar under
+ * every strip; the native overlay is the better cue there.
  *
  * Public hooks:
  * --scroller-track
@@ -22,9 +31,16 @@
 .scroller {
   --scroller-track: transparent;
   --scroller-thumb: var(--border);
+}
 
-  scrollbar-color: var(--scroller-thumb) var(--scroller-track);
-  scrollbar-width: thin;
+/* Any primary pointer but touch: a keyboard-only or pointerless device
+   (pointer: none) draws classic scrollbars too. `all and` keeps the negation
+   valid in Media Queries 3 parsers. */
+@media not all and (pointer: coarse) {
+  .scroller {
+    scrollbar-color: var(--scroller-thumb) var(--scroller-track);
+    scrollbar-width: thin;
+  }
 }
 
 /* Opt-in gutter: reserves space so the layout does not shift when

package/src/css/layout/sidebar-layout.css

@@ -17,6 +17,9 @@
  * visual, reading and keyboard order all agree — the role rules swap so the
  * aside still takes its preferred width and the main still reclaims the row.
  */
+/* No instance reset, unlike .cluster and .grid: the regions read the hooks,
+   and a layout nested as a region takes its own size from its parent's
+   values, so the hooks must reach it. */
 .sidebar-layout {
   display: flex;
   flex-direction: row;

package/src/css/layout/switcher.css

@@ -12,6 +12,9 @@
  *
  * Child contract: every direct child is a peer; the flex-basis applies to all.
  */
+/* No instance reset, unlike .cluster and .grid: the children read the hook,
+   and a switcher nested as a direct child takes its own flex-basis from its
+   parent's value, so the hook must reach it. */
 .switcher {
   display: flex;
   flex-direction: row;

package/src/css/utilities/extra.css

@@ -84,9 +84,9 @@
   flex-wrap: nowrap;
 }
 
-/* The property is written directly, never relayed through the cluster hook:
-   a relay would inherit into every .cluster nested inside. Utilities load last,
-   so the direct declaration already beats .cluster at equal specificity. */
+/* The property is written directly, so the utility works on any flex row, not
+   only a .cluster. Utilities load last, so the direct declaration beats
+   .cluster at equal specificity. */
 .justify-content-start {
   justify-content: flex-start;
 }

package/src/js/full.js

@@ -4,6 +4,8 @@
  * Each module self-registers via observer: importing this bundle enables
  * common behaviors. No DOMContentLoaded ceremony, no init calls.
  * Injected content wires automatically; removal cleans up automatically.
+ * The entry also exposes the public enhancement API from the same module
+ * graph, so adopters extend the runtime they already run.
  *
  * A plain `<script src="actual.full.js"></script>` (no bundler, no import) still
  * gets the full runtime, including declarative triggers like status's
@@ -25,3 +27,5 @@ import "./range.js";
 import "./validation.js";
 import "./status.js";
 import "./index.js";
+
+export { applyEnhancement, default as enhance, registerEnhancement } from "./enhance.js";