actual-css 0.4.0 → 0.4.2

package/src/css/components/navbar.css

@@ -18,6 +18,7 @@
 
 .navbar {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
@@ -45,6 +46,7 @@
 
 .navbar-nav {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--space-10);
@@ -67,6 +69,7 @@
 .nav-link:where([aria-current]:not([aria-current="false"])) {
   background: var(--surface-subtle);
   color: var(--text);
+  font-weight: var(--font-weight-bold);
 }
 
 .nav-link:hover {
@@ -74,7 +77,9 @@
   color: var(--text);
 }
 
-/* Nav list — a vertical navigation list. Used by .drawer for stacked links. */
+/* Nav list — a vertical navigation list. Used by .drawer for stacked links.
+   Links fill each row so the whole line is an interactive target; the
+   horizontal .navbar-nav links keep their intrinsic size. */
 .nav-list {
   display: grid;
   --gap: var(--space-20);
@@ -88,18 +93,6 @@
   margin: 0;
 }
 
-@media (forced-colors: active) {
-  .nav-link:where([aria-current]:not([aria-current="false"])) {
-    outline: var(--border-width) solid Highlight;
-    background: Highlight;
-    color: HighlightText;
-    forced-color-adjust: none;
-  }
-
-  .nav-link:hover:not(:where([aria-current]:not([aria-current="false"]))) {
-    outline: var(--border-width) solid ButtonText;
-    outline-offset: 2px;
-    background: Canvas;
-    color: CanvasText;
-  }
+.nav-list .nav-link {
+  inline-size: 100%;
 }

package/src/css/components/pagination.css

@@ -10,6 +10,7 @@
  */
 .pagination {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--space-10);

package/src/css/components/rating.css

@@ -0,0 +1,101 @@
+/*
+ * Rating — integer star rating drawn on native radio inputs.
+ *
+ * The checked radio remains the functional baseline. :has() progressively
+ * fills preceding stars without reversing DOM or keyboard order. Forced
+ * colors restores the platform radio presentation.
+ *
+ * Public hooks:
+ * --rating-size
+ * --rating-gap
+ * --rating-color
+ * --rating-empty
+ * --rating-star
+ */
+:where(.rating) {
+  --intent: initial;
+}
+
+.rating {
+  --rating-size: 1.25rem;
+  --rating-gap: 0.1rem;
+  --rating-color: var(--intent, var(--warning));
+  --rating-empty: var(--border);
+  --rating-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 16 16'%3E%3Cpath d='M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 0 0 .95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 0 0-.364 1.118l1.07 3.292c.3.922-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 0 0-1.175 0l-2.8 2.034c-.783.57-1.838-.196-1.539-1.118l1.07-3.292a1 1 0 0 0-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 0 0 .951-.69l1.07-3.292Z'/%3E%3C/svg%3E");
+
+  display: inline-flex;
+  gap: 0;
+  color: var(--rating-color);
+}
+
+.rating > input[type="radio"] {
+  appearance: none;
+  flex: 0 0 auto;
+  inline-size: calc(var(--rating-size) + var(--rating-gap));
+  block-size: var(--rating-size);
+  margin: 0;
+  border: 0;
+  background: var(--rating-empty);
+  /* Contiguous radio boxes own hit-testing; the centered mask preserves the
+     star's proportions while leaving a purely visual gap between values. */
+  -webkit-mask: var(--rating-star) center / var(--rating-size) var(--rating-size) no-repeat;
+  mask: var(--rating-star) center / var(--rating-size) var(--rating-size) no-repeat;
+  cursor: pointer;
+  transition: background-color var(--duration);
+}
+
+.rating > input[type="radio"]:checked {
+  background: var(--rating-color);
+}
+
+.rating > input[type="radio"]:disabled {
+  cursor: not-allowed;
+  opacity: var(--disabled-opacity);
+}
+
+.rating > input[type="radio"]:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+  background: var(--rating-color);
+}
+
+/* Browsers without :has() still show the selected native radio as one filled
+   star. The enhancement only adds cumulative checked and hover previews. */
+@supports selector(:has(*)) {
+  .rating > input[type="radio"]:has(~ input[type="radio"]:checked) {
+    background: var(--rating-color);
+  }
+
+  @media (hover: hover) {
+    .rating > input[type="radio"]:not(:disabled):hover,
+    .rating > input[type="radio"]:has(~ input[type="radio"]:not(:disabled):hover) {
+      background: var(--rating-color);
+    }
+
+    /* A hovered value previews exactly that value: later stars are emptied,
+       including a previously checked star beyond the pointer. */
+    .rating > input[type="radio"]:not(:disabled):hover ~ input[type="radio"] {
+      background: var(--rating-empty);
+    }
+  }
+}
+
+.rating.sm {
+  --rating-size: 1rem;
+}
+
+.rating.lg {
+  --rating-size: 1.75rem;
+}
+
+@media (forced-colors: active) {
+  .rating > input[type="radio"] {
+    appearance: auto;
+    inline-size: auto;
+    block-size: auto;
+    background: Canvas;
+    -webkit-mask: none;
+    mask: none;
+    opacity: 1;
+  }
+}

package/src/css/components/steps.css

@@ -0,0 +1,123 @@
+/*
+ * 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.
+ *
+ * Markers come from the list counter; state stays in .complete and
+ * aria-current="step", so the component needs no runtime.
+ *
+ * Public hooks:
+ * --step-size
+ * --step-min
+ * --step-gap
+ * --step-line-size
+ * --step-marker-radius
+ * --step-complete-mark
+ * --step-connector
+ *
+ * Internal:
+ * --step-marker-bg
+ * --step-marker-border
+ * --step-marker-fg
+ * --step-line
+ */
+.steps {
+  --step-size: 1.75rem;
+  --step-min: 7rem;
+  --step-gap: var(--space-20);
+  --step-line-size: var(--border-width);
+  --step-marker-bg: var(--surface);
+  --step-marker-border: var(--border);
+  --step-marker-fg: var(--text-muted);
+  --step-marker-radius: var(--radius-full);
+  --step-line: var(--border);
+
+  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;
+}
+
+.steps > li::before {
+  content: counter(actual-step);
+  position: relative;
+  z-index: 1;
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--step-size);
+  block-size: var(--step-size);
+  border: var(--border-width) solid var(--step-marker-border);
+  border-radius: var(--step-marker-radius);
+  background: var(--step-marker-bg);
+  color: var(--step-marker-fg);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-strong);
+  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));
+}
+
+.steps > li:last-child::after {
+  content: none;
+}
+
+.steps > :is(.complete, [aria-current="step"]) {
+  --step-marker-bg: var(--state-selected);
+  --step-marker-border: var(--state-selected);
+  --step-marker-fg: var(--state-selected-fg);
+
+  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 {
+  border-width: calc(var(--border-width) * 2);
+}
+
+.steps > .complete {
+  --step-line: var(--state-selected);
+}
+
+/* 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 {
+  content: var(--step-complete-mark, counter(actual-step));
+}

package/src/css/components/tab.css

@@ -16,6 +16,7 @@
 
 .tabs {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   gap: var(--space-10);
   margin: 0;
@@ -33,13 +34,14 @@
 }
 
 .tab {
+  /* Positioning context for the selected indicator pseudo. */
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--tab-gap, 0.375em);
   min-block-size: var(--control-size);
   padding-inline: var(--space-30);
   border: 0;
-  border-block-end: 2px solid transparent;
   border-radius: 0;
   background: transparent;
   color: var(--text-muted);
@@ -51,8 +53,6 @@
 
 .tabs[aria-orientation="vertical"] .tab {
   justify-content: flex-start;
-  border-block-end: 0;
-  border-inline-end: 2px solid transparent;
   padding-inline-end: var(--space-40);
 }
 
@@ -73,28 +73,27 @@
 }
 
 .tab[aria-selected="true"] {
-  border-block-end-color: var(--intent, var(--state-selected));
   color: var(--intent, var(--state-selected));
+  /* Second, layout-free selected cue — the underline alone is color-only in
+     forced colors. */
+  font-weight: var(--font-weight-bold);
 }
 
-.tabs[aria-orientation="vertical"] .tab[aria-selected="true"] {
-  border-block-end-color: transparent;
-  border-inline-end-color: var(--intent, var(--state-selected));
+/* The selected indicator lives on a positioned pseudo so that only the active
+   tab owns an underline: a transparent border on every tab would surface in
+   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 {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  border-block-end: 2px solid currentColor;
 }
 
-@media (forced-colors: active) {
-  .tab:hover:not(:where(:disabled, [aria-disabled="true"])) {
-    text-decoration: underline;
-    text-underline-offset: 0.18em;
-  }
-
-  .tab[aria-selected="true"] {
-    border-block-end-color: Highlight;
-    color: Highlight;
-  }
-
-  .tabs[aria-orientation="vertical"] .tab[aria-selected="true"] {
-    border-block-end-color: transparent;
-    border-inline-end-color: Highlight;
-  }
+.tabs[aria-orientation="vertical"] .tab[aria-selected="true"]::after {
+  inset-block: 0;
+  inset-inline: auto 0;
+  border-block-end: 0;
+  border-inline-end: 2px solid currentColor;
 }

package/src/css/components/tooltip.css

@@ -24,6 +24,7 @@
   max-inline-size: min(24rem, calc(var(--viewport-inline) - 2rem));
   padding: 0.25em 0.6em;
   border-radius: var(--radius-sm);
+  border: var(--border-width) solid transparent;
   background: var(--tooltip-bg);
   color: var(--tooltip-fg);
   font-size: var(--font-size-xs);
@@ -102,16 +103,6 @@
   clip-path: polygon(0 50%, 100% 0, 100% 100%);
 }
 
-@media (forced-colors: active) {
-  .tooltip {
-    --tooltip-bg: Canvas;
-    --tooltip-fg: CanvasText;
-  }
-
-  .tooltip::before {
-    display: none;
-  }
-}
 @media print {
   .tooltip {
     display: none !important;

package/src/css/core/focus.css

@@ -15,12 +15,4 @@
   :focus:not(:focus-visible) {
     outline: none;
   }
-
-  /* Pointer focus must still signal in high-contrast mode, where the shared
-     box-shadow rings are disabled (--focus-ring-shadow: none). */
-  @media (forced-colors: active) {
-    :focus:not(:focus-visible) {
-      outline: var(--focus-outline);
-    }
-  }
 }

package/src/css/core/theme.css

@@ -188,16 +188,6 @@
   }
 }
 
-@media (forced-colors: active) {
-  :root,
-  [data-theme] {
-    --focus-outline-color: Highlight;
-    --focus-ring-shadow: none;
-
-    --backdrop-fill: Canvas;
-  }
-}
-
 @media (prefers-contrast: more) {
   :root,
   /* The repeated attribute intentionally outranks single-attribute preset

package/src/css/core/tokens.css

@@ -156,9 +156,8 @@
 @media (forced-colors: active) {
   :root,
   [data-theme] {
-    --state-selected: Highlight;
-    --state-selected-fg: HighlightText;
     --state-disabled: GrayText;
+    --disabled-opacity: 1;
   }
 }
 

package/src/css/effects/aura.css

@@ -32,6 +32,7 @@
   display: inline-grid;
   padding: var(--aura-width);
   border-radius: calc(var(--aura-radius) + var(--aura-width));
+  border: var(--border-width) solid transparent;
   background: var(--aura-color);
   background: conic-gradient(from var(--aura-angle), transparent 0 65%, var(--aura-color));
 }
@@ -81,13 +82,3 @@
     --aura-radius: var(--radius-full);
   }
 }
-
-@media (forced-colors: active) {
-  .aura {
-    background: CanvasText;
-  }
-
-  .aura::before {
-    display: none;
-  }
-}

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

@@ -131,27 +131,18 @@
   transform: scale(1);
 }
 
+/* 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,
+   so no forced-color-adjust is needed. The pseudo is not focusable — the
+   outline is a separator against the card, not a focus channel. */
 @media (forced-colors: active) {
-  .choice-card {
-    --choice-card-border: ButtonText;
-    --choice-card-bg: Canvas;
-  }
-
-  .choice-card:has(:checked) {
-    --choice-card-border: Highlight;
-    /* Pin the selected surface to the system canvas: only the essential
-       marker pseudos opt out of remapping, never the interactive card host. */
-    --choice-card-bg: Canvas;
-  }
-
   .choice-card:has(:checked)::before {
     background: Highlight;
-    box-shadow: 0 0 0 2px Canvas;
-    forced-color-adjust: none;
+    outline: 2px solid Canvas;
   }
 
   .choice-card:has(:checked)::after {
     background: HighlightText;
-    forced-color-adjust: none;
   }
 }

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

@@ -17,6 +17,7 @@
  */
 .form-actions {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   gap: var(--gap);
   align-items: var(--form-actions-align, center);

package/src/css/forms/otp.css

@@ -79,7 +79,12 @@
    but it sits in the clipped input extension once every cell is filled, so
    the focused edge must be unambiguous on its own — hence the doubled width,
    not only the color swap. Width is safe to change: box-sizing is border-box
-   and the cells have a fixed inline/block size, so nothing reflows. */
+   and the cells have a fixed inline/block size, so nothing reflows.
+
+   The <input> must be the first direct child, with one cell <span> per
+   character after it: the state rules select the cells as following siblings
+   (input:focus ~ span, input:disabled ~ span, …), so that order is part of the
+   contract. */
 .otp > input:focus ~ span {
   --otp-cell-border: var(--focus);
   --otp-cell-border-width: calc(var(--border-width) * 2);
@@ -103,7 +108,7 @@
 
 .otp > input:disabled ~ span {
   --otp-cell-bg: var(--surface-subtle);
-
+  --otp-cell-border: var(--state-disabled);
   opacity: var(--disabled-opacity);
 }
 

package/src/css/forms/range.css

@@ -93,11 +93,21 @@
   opacity: var(--disabled-opacity);
 }
 
-/* Forced colors: map the custom thumb/track to system colors. The focus
-   indicator stays visible through the transparent outline on :focus-visible. */
+/* 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. */
 @media (forced-colors: active) {
   .range {
-    --range-thumb-bg: ButtonText;
-    --range-track-bg: Canvas;
+    --range-track-bg: CanvasText;
+    --range-thumb-bg: ButtonFace;
+  }
+
+  .range::-webkit-slider-thumb {
+    border: var(--border-width) solid ButtonText;
+  }
+
+  .range::-moz-range-thumb {
+    border: var(--border-width) solid ButtonText;
   }
 }

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

@@ -0,0 +1,102 @@
+/*
+ * Specialized application shell recipe: one exact DOM structure uses a
+ * bottom navigation bar when narrow and a labelled side navigation when space
+ * permits. The main region owns scrolling, keeping both pieces of application
+ * chrome available without fixed offsets. This is not a generic page wrapper
+ * or a public-site layout; all three direct regions are part of the contract.
+ *
+ * Public hook:
+ * --app-nav-side-size
+ */
+.app-layout {
+  --app-nav-side-size: 12rem;
+
+  display: grid;
+  grid-template:
+    "topbar" auto
+    "main" minmax(0, 1fr)
+    "nav" auto
+    / minmax(0, 1fr);
+  block-size: var(--viewport-block);
+  min-inline-size: 0;
+  overflow: hidden;
+}
+
+.app-layout > .topbar {
+  grid-area: topbar;
+  padding-block-start: calc(var(--space-30) + env(safe-area-inset-top));
+}
+
+.app-layout > .app-main {
+  grid-area: main;
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: auto;
+}
+
+.app-layout > .app-nav {
+  grid-area: nav;
+}
+
+/* The main grid area keeps the FAB clear of bottom navigation without making
+   either component copy the other's geometry. */
+.app-layout > .fab {
+  position: relative;
+  grid-area: main;
+  place-self: end;
+  inset: auto;
+  margin: var(--fab-offset);
+}
+
+@media (min-width: 48rem) {
+  .app-layout {
+    grid-template:
+      "nav topbar" auto
+      "nav main" minmax(0, 1fr)
+      / var(--app-nav-side-size) minmax(0, 1fr);
+  }
+
+  .app-layout > .app-nav {
+    position: sticky;
+    inset-block: 0;
+    grid-auto-flow: row;
+    grid-auto-rows: minmax(var(--control-size-lg), auto);
+    grid-auto-columns: auto;
+    align-content: start;
+    gap: var(--space-20);
+    min-block-size: 0;
+    padding-block: max(var(--space-20), env(safe-area-inset-top))
+      max(var(--space-20), env(safe-area-inset-bottom));
+    padding-inline: var(--space-20);
+    border-block-start: 0;
+    border-inline-end: var(--border-width) solid var(--ui-border, var(--border));
+  }
+
+  .app-layout > .app-nav > a {
+    grid-template-rows: auto;
+    grid-template-columns: 1.5rem minmax(0, 1fr);
+    place-content: center start;
+    align-items: center;
+    justify-items: start;
+    gap: var(--space-30);
+    padding-inline: var(--space-30);
+    text-align: start;
+  }
+
+  /* Side navigation no longer occupies the viewport's bottom safe area. */
+  .app-layout > .fab {
+    margin-block-end: max(var(--fab-offset), env(safe-area-inset-bottom));
+  }
+}
+
+@media print {
+  .app-layout {
+    display: block;
+    block-size: auto;
+    overflow: visible;
+  }
+
+  .app-layout > .app-main {
+    overflow: visible;
+  }
+}

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

@@ -1,4 +1,4 @@
-/* Full-height application shell. */
+/* Full-height single-column document shell. */
 .app-shell {
   min-block-size: var(--viewport-block);
   display: flex;

package/src/css/layout/center.css

@@ -7,6 +7,7 @@
  */
 .center {
   box-sizing: content-box;
+  inline-size: calc(100% - var(--center-pad, 1rem) * 2);
   max-inline-size: var(--center-size, 72rem);
   margin-inline: auto;
   padding-inline: var(--center-pad, 1rem);

package/src/css/layout/cluster.css

@@ -10,6 +10,7 @@
  */
 .cluster {
   display: flex;
+  flex-direction: row;
   flex-wrap: var(--cluster-wrap, wrap);
   align-items: var(--cluster-align, center);
   justify-content: var(--cluster-justify, flex-start);