actual-css 0.3.1 → 0.4.1

package/src/css/actual.css

@@ -1,31 +1 @@
-@import "./reset.css";
-@import "./tokens.css";
-@import "./theme.css";
-@import "./base.css";
-@import "./intents.css";
-/* Prose before layout: layout primitives (.stack, .cluster) reset child
-   margins and must win over .prose's flow margins at equal specificity —
-   source order is the tie-breaker, so prose loads first. */
-@import "./prose.css";
-@import "./layout.css";
-@import "./grid.css";
-@import "./variants.css";
-@import "./components/index.css";
-@import "./forms/index.css";
-@import "./utilities.css";
-/* Joined controls are a component, but must load after the controls it groups. */
-@import "./components/join.css";
-@import "./focus.css";
-@import "./print.css";
-
-/*
- * NOTE: The 'optional/' directory contains layout and utility extensions
- * (such as optional grids, split, visual effects, and extra utility classes
- * like .gap-sm, .flex-nowrap, .shadow-sm, etc.). These are intentionally not
- * bundled here. Two entry points ship them:
- *
- *   actual-css/css/optional/index   optional layer only
- *   actual-css/css/actual.full      core + optional
- *
- * Import one of these paths in your project when you need them.
- */
+@import "./core/index.css";

package/src/css/actual.full.css

@@ -1,2 +1,11 @@
-@import "actual.css";
-@import "optional/index.css";
+/* Core, then every shipped functional family in cascade order. Typography
+   precedes Layout because direct-child layout resets intentionally win over
+   equal-specificity prose flow margins. Forms precede Components because of
+   join. Do not alphabetize these top-level imports. */
+@import "./actual.css";
+@import "./typography/index.css";
+@import "./layout/index.css";
+@import "./forms/index.css";
+@import "./components/index.css";
+@import "./effects/index.css";
+@import "./utilities/index.css";

package/src/css/components/alert.css

@@ -20,6 +20,7 @@
  *
  * Internal:
  * --alert-default-bg
+ * --alert-default-fg
  * --alert-default-border
  * --alert-bg
  * --alert-fg
@@ -42,9 +43,10 @@
   --alert-font-size: var(--font-size-md);
   --alert-icon-size: 1.25rem;
   --alert-default-bg: var(--surface-subtle);
+  --alert-default-fg: var(--intent, var(--text));
   --alert-default-border: var(--border);
   --alert-bg: var(--ui-bg, var(--alert-default-bg));
-  --alert-fg: var(--ui-fg, var(--intent, var(--text)));
+  --alert-fg: var(--ui-fg, var(--alert-default-fg));
   --alert-border: var(--ui-border, var(--alert-default-border));
 
   padding-block: var(--alert-pad-block);
@@ -76,15 +78,20 @@
   .alert {
     /* @sync soft-recipe */
     --alert-default-bg: color-mix(
-      in oklch,
+      in oklab,
       var(--surface) var(--soft-bg-mix),
       var(--intent, var(--neutral))
     );
     --alert-default-border: color-mix(
-      in oklch,
+      in oklab,
       var(--surface) var(--soft-border-mix),
       var(--intent, var(--neutral))
     );
+    --alert-default-fg: color-mix(
+      in oklab,
+      var(--text),
+      var(--intent, var(--text)) var(--soft-fg-mix)
+    );
     /* @sync soft-recipe */
   }
 }
@@ -230,7 +237,7 @@
 @supports (color: color-mix(in oklch, red, white)) {
   .alert.admonition > .alert-title {
     background: color-mix(
-      in oklch,
+      in oklab,
       var(--surface) var(--soft-bg-mix),
       var(--intent, var(--neutral))
     );
@@ -258,3 +265,9 @@
 .alert.admonition > .alert-body > :last-child {
   margin-block-end: 0;
 }
+@media print {
+  .alert {
+    border: var(--border-width) solid CanvasText;
+    break-inside: avoid;
+  }
+}

package/src/css/components/app-nav.css

@@ -0,0 +1,76 @@
+/*
+ * Primary application navigation. The component owns the navigation surface
+ * and item states; app-layout owns whether that surface is a bottom bar or
+ * labelled side navigation.
+ *
+ * Public hooks:
+ * --app-nav-size
+ * --app-nav-gap
+ */
+:where(.app-nav) {
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+}
+
+.app-nav {
+  --app-nav-size: 4rem;
+  --app-nav-gap: var(--space-10);
+
+  position: sticky;
+  inset-block-end: 0;
+  z-index: var(--z-sticky);
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  gap: var(--app-nav-gap);
+  min-block-size: calc(var(--app-nav-size) + env(safe-area-inset-bottom));
+  padding-block: var(--space-10) max(var(--space-10), env(safe-area-inset-bottom));
+  padding-inline: var(--space-10);
+  border-block-start: var(--border-width) solid var(--ui-border, var(--border));
+  background: var(--ui-bg, var(--surface));
+  color: var(--ui-fg, var(--text-muted));
+}
+
+.app-nav > a {
+  display: grid;
+  grid-template-rows: auto auto;
+  place-content: center;
+  justify-items: center;
+  gap: var(--space-10);
+  min-inline-size: 0;
+  min-block-size: var(--control-size-lg);
+  padding-inline: var(--space-10);
+  border-radius: var(--radius);
+  color: inherit;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-tight);
+  text-align: center;
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+
+.app-nav > a > :where(svg, img, [aria-hidden="true"]) {
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.app-nav > a:hover {
+  background: var(--surface-subtle);
+  color: var(--text);
+}
+
+.app-nav > a:where([aria-current]:not([aria-current="false"])) {
+  background: var(--state-selected);
+  color: var(--state-selected-fg);
+  font-weight: var(--font-weight-bold);
+}
+
+@media print {
+  .app-nav {
+    display: none;
+  }
+}

package/src/css/components/avatar.css

@@ -69,6 +69,9 @@
   }
 }
 
+/* The initials element (a span or an accessible <abbr title="…">) fills the box.
+   text-decoration: none neutralizes the UA dotted underline on <abbr title="…">
+   inside the circular avatar. */
 .avatar > :first-child:not(:where(img, picture, .badge)) {
   display: inline-grid;
   place-items: center;
@@ -76,6 +79,7 @@
   block-size: 100%;
   overflow: hidden;
   border-radius: inherit;
+  text-decoration: none;
 }
 
 .avatar > img,

package/src/css/components/badge.css

@@ -35,7 +35,7 @@
 .badge {
   --badge-size: var(--density-compact-size);
   --badge-pad-x: 0.55em;
-  --badge-font-size: 0.8125rem;
+  --badge-font-size: var(--font-size-xs);
   --badge-dot-size: 0.5rem;
   --badge-default-bg: var(--surface-subtle);
   --badge-default-fg: var(--intent, var(--text));
@@ -76,15 +76,20 @@
   .badge {
     /* @sync soft-recipe */
     --badge-default-bg: color-mix(
-      in oklch,
+      in oklab,
       var(--surface) var(--soft-bg-mix),
       var(--intent, var(--neutral))
     );
     --badge-default-border: color-mix(
-      in oklch,
+      in oklab,
       var(--surface) var(--soft-border-mix),
       var(--intent, var(--neutral))
     );
+    --badge-default-fg: color-mix(
+      in oklab,
+      var(--text),
+      var(--intent, var(--text)) var(--soft-fg-mix)
+    );
     /* @sync soft-recipe */
   }
 }
@@ -104,8 +109,8 @@
   display: inline-grid;
   place-items: center;
   flex: 0 0 auto;
-  min-inline-size: 1.5rem;
-  min-block-size: 1.5rem;
+  min-inline-size: var(--density-compact-size);
+  min-block-size: var(--density-compact-size);
   margin-block: -0.25rem;
   margin-inline-start: -0.15em;
   margin-inline-end: -0.45em;
@@ -136,7 +141,7 @@
 
   :is(a.badge, button.badge):where(:not(.solid, .outline, :empty)) {
     --badge-default-hover-bg: color-mix(
-      in oklch,
+      in oklab,
       var(--surface) calc(var(--soft-bg-mix) - var(--soft-hover-alpha)),
       var(--intent, var(--neutral))
     );
@@ -152,6 +157,7 @@
 }
 
 :where(a.badge, button.badge):not(:where(:disabled, [aria-disabled="true"], .outline)):hover {
+  /* Huge inset spread paints the overlay over the pill radius (see button.css). */
   box-shadow: inset 0 0 0 999px var(--hover-overlay);
 }
 
@@ -174,20 +180,14 @@ a.badge[aria-disabled="true"] {
     background: ButtonText;
   }
 
-  :where(a.badge, button.badge):hover:not(:where(:disabled, [aria-disabled="true"])) {
-    outline: var(--border-width) solid ButtonText;
-    outline-offset: 2px;
-  }
-
-  .badge > button:not(:disabled):hover {
-    outline: var(--border-width) solid currentColor;
-    outline-offset: 1px;
-  }
-
-  button.badge:disabled,
   .badge[aria-disabled="true"] {
-    border-color: GrayText;
-    background: Canvas;
     color: GrayText;
+    border-color: GrayText;
+  }
+}
+@media print {
+  .badge {
+    border: var(--border-width) solid CanvasText;
+    break-inside: avoid;
   }
 }

package/src/css/components/breadcrumb.css

@@ -42,7 +42,7 @@
   border-radius: var(--radius-sm);
 }
 
-.breadcrumb :where(a, span):where([aria-current]:not([aria-current="false"])) {
+.breadcrumb :where(li, a, span):where([aria-current]:not([aria-current="false"])) {
   color: var(--text);
   font-weight: var(--font-weight-medium);
 }

package/src/css/components/button.css

@@ -92,7 +92,8 @@
 
 .btn.icon-only {
   inline-size: var(--btn-min-size);
-  padding-inline: 0;
+  block-size: var(--btn-min-size);
+  padding: 0;
 }
 
 @supports (color: color-mix(in oklch, red, white)) {
@@ -133,7 +134,7 @@
 
   .btn.soft {
     --ui-hover-bg: color-mix(
-      in oklch,
+      in oklab,
       var(--surface) calc(var(--soft-bg-mix) - var(--soft-hover-alpha)),
       var(--intent, var(--neutral))
     );
@@ -149,6 +150,9 @@
    the overlay darkening for solid/soft is .btn-specific. */
 .btn:not(:where(:disabled, [aria-disabled="true"])):hover {
   background: var(--ui-hover-bg, var(--btn-default-hover-bg));
+  /* Huge inset spread paints the overlay over any border-radius without a
+     pseudo-element; a plain background would replace the fill instead of
+     darkening it. */
   box-shadow: inset 0 0 0 999px var(--btn-hover-overlay);
 }
 
@@ -161,14 +165,15 @@
   --ui-fg: var(--intent, currentColor);
   --ui-border: transparent;
   --btn-radius: var(--radius-sm);
-  --btn-border-block-end-color: transparent;
-  --btn-border-block-end-width: var(--border-width);
 
   min-block-size: auto;
   padding-inline: 0;
   inline-size: fit-content;
   max-inline-size: 100%;
-  border-color: transparent;
+  /* No border at all: a link reads through its underline, and the inherited
+     .btn border made transparent would turn into a visible box in forced
+     colors. :focus-visible keeps its own outline. */
+  border: 0;
   text-decoration: underline;
   text-underline-offset: 0.18em;
 }
@@ -229,36 +234,19 @@ a.btn[aria-disabled="true"] {
 }
 
 @media (forced-colors: active) {
-  .btn {
-    border-color: ButtonText;
-    background: ButtonFace;
-    color: ButtonText;
-    box-shadow: none;
-  }
-
-  .btn.link {
-    border-color: transparent;
-    background: Canvas;
-    color: LinkText;
-  }
-
-  .btn:is([aria-pressed="true"], [aria-current="page"]):not(.link) {
-    border-color: Highlight;
-    background: Highlight;
-    color: HighlightText;
-    forced-color-adjust: none;
+  a.btn[aria-disabled="true"] {
+    color: GrayText;
+    border-color: GrayText;
   }
+}
 
-  .btn:hover:not(:where(:disabled, [aria-disabled="true"], .link)) {
-    outline: var(--border-width) solid ButtonText;
-    outline-offset: 2px;
+@media print {
+  :is(button, input[type="button"], input[type="submit"], input[type="reset"]).btn {
+    display: none !important;
   }
 
-  .btn:disabled,
-  a.btn[aria-disabled="true"] {
-    border-color: GrayText;
-    background: Canvas;
-    color: GrayText;
-    forced-color-adjust: auto;
+  a.btn[href^="http"]::after {
+    content: " (" attr(href) ")";
+    font-size: 0.875em;
   }
 }

package/src/css/components/card.css

@@ -2,11 +2,16 @@
  * Cards provide a neutral raised surface for grouped content.
  *
  * Surface, border, radius, padding, density, and elevation stay local here.
- * Direct header/footer children are structural slots. Page layout remains the
- * job of markup and layout primitives outside the card.
+ * Direct header/footer children are structural slots; a direct footer is
+ * anchored to the card's bottom edge when extra block space is available (so
+ * price/action rows align across equal-height cards in a grid). A bare card
+ * owns its direct-child rhythm; a layout primitive on the same element takes
+ * over that layout. Page layout remains the job of markup and layout
+ * primitives outside the card.
  *
  * Public hooks:
  * --card-pad
+ * --card-gap
  * --card-radius
  * --card-max-inline-size
  *
@@ -30,6 +35,7 @@
 
 .card {
   --card-pad: var(--space-40);
+  --card-gap: var(--space-30);
   --card-radius: var(--radius-lg);
   --card-max-inline-size: none;
   --card-bg: var(--ui-bg, var(--surface-raised));
@@ -47,8 +53,23 @@
   border-radius: var(--card-radius);
 }
 
-.card > * {
+/* The box lives at zero specificity so a layout primitive applied to the same
+   element owns it. components/ is imported after layout/, so a plain .card
+   declaration would beat .media (and any other non-column primitive) on source
+   order alone and silently flatten `class="card media"` into a column. The
+   column is still the default a bare .card gets, and > footer's margin-auto
+   bottom-anchoring depends on it. */
+:where(.card) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-gap);
+}
+
+/* Native block margins would add to flex gap because flex-item margins never
+   collapse. Zero specificity keeps intentional child utilities available. */
+:where(.card) > * {
   min-inline-size: 0;
+  margin-block: 0;
 }
 
 .card > :where(header, footer) {
@@ -69,12 +90,10 @@
   align-items: var(--items-align, flex-start);
 }
 
-.card > :first-child {
-  margin-block-start: 0;
-}
-
-.card > :last-child {
-  margin-block-end: 0;
+/* A direct footer is pinned to the bottom when the card has free space.
+   Specificity beats .stack > * so a .card.stack keeps this contract. */
+.card > footer {
+  margin-block-start: auto;
 }
 
 .card.raised {
@@ -126,3 +145,9 @@
 .card > :where(header, footer, figure).bleed {
   padding: var(--card-pad);
 }
+@media print {
+  .card {
+    border: var(--border-width) solid CanvasText;
+    break-inside: avoid;
+  }
+}

package/src/css/{optional → components}/chat.css

@@ -97,9 +97,3 @@
     column-gap: 0;
   }
 }
-
-@media (forced-colors: active) {
-  .chat-bubble {
-    border-color: CanvasText;
-  }
-}

package/src/css/components/drawer.css

@@ -108,8 +108,8 @@ dialog.drawer nav {
   }
 }
 
-/* RTL: swap closed transform directions so the drawer slides from the correct
-   inline side. */
+/* Safari before 16.4 does not support :dir(); keep the ancestor-attribute
+   path as the Minimal-tier fallback. */
 [dir="rtl"] dialog.drawer {
   --drawer-closed-translate: 100%;
 }
@@ -118,9 +118,23 @@ dialog.drawer nav {
   --drawer-closed-translate: -100%;
 }
 
-@media (forced-colors: active) {
-  dialog.drawer::backdrop {
-    background: Canvas;
+/* :dir() follows inherited HTML directionality and handles nested direction
+   changes. Explicit ltr rules neutralize an outer RTL fallback selector. */
+@supports selector(:dir(rtl)) {
+  dialog.drawer:dir(ltr) {
+    --drawer-closed-translate: -100%;
+  }
+
+  dialog.drawer[data-side="end"]:dir(ltr) {
+    --drawer-closed-translate: 100%;
+  }
+
+  dialog.drawer:dir(rtl) {
+    --drawer-closed-translate: 100%;
+  }
+
+  dialog.drawer[data-side="end"]:dir(rtl) {
+    --drawer-closed-translate: -100%;
   }
 }
 
@@ -137,3 +151,8 @@ dialog.drawer > header,
 dialog.drawer > form > header {
   padding-inline-end: calc(var(--control-size) + var(--space-30));
 }
+@media print {
+  dialog.drawer[open] {
+    display: none !important;
+  }
+}

package/src/css/{optional → components}/fab.css

@@ -68,6 +68,7 @@
   max-inline-size: 16rem;
   padding: var(--space-10) var(--space-20);
   border-radius: var(--radius);
+  border: var(--border-width) solid transparent;
   background: var(--surface);
   color: var(--text);
   box-shadow: var(--shadow);
@@ -90,13 +91,6 @@
   transform: rotate(45deg);
 }
 
-@media (forced-colors: active) {
-  .fab-label {
-    border: var(--border-width) solid CanvasText;
-    box-shadow: none;
-  }
-}
-
 @media print {
   .fab {
     display: none;

package/src/css/components/flyout.css

@@ -170,3 +170,8 @@
 /* Vertical dividers — .menu-separator (menu.css) is the canonical way to
    separate menu items. Flyout panels that are not menus use auto grid gap
    declared on .flyout itself. */
+@media print {
+  .flyout {
+    display: none !important;
+  }
+}

package/src/css/components/index.css

@@ -1,42 +1,52 @@
 /* Controls */
-@import "button.css";
-@import "badge.css";
-@import "alert.css";
-@import "actions.css";
+@import "./button.css";
+@import "./badge.css";
+@import "./alert.css";
+@import "./actions.css";
 
 /* Surfaces */
-@import "card.css";
-@import "surface.css";
-@import "modal.css";
-@import "drawer.css";
+@import "./card.css";
+@import "./surface.css";
+@import "./modal.css";
+@import "./drawer.css";
 
 /* Overlays */
-@import "flyout.css";
-@import "menu.css";
-@import "tooltip.css";
+@import "./flyout.css";
+@import "./menu.css";
+@import "./tooltip.css";
 
 /* Disclosure */
-@import "accordion.css";
+@import "./accordion.css";
 
 /* Feedback */
-@import "spinner.css";
-@import "skeleton.css";
-@import "busy.css";
-@import "progress.css";
-@import "status-bar.css";
+@import "./spinner.css";
+@import "./skeleton.css";
+@import "./busy.css";
+@import "./progress.css";
+@import "./status-bar.css";
 
 /* Display */
-@import "avatar.css";
-@import "key.css";
-@import "overline.css";
+@import "./avatar.css";
+@import "./indicator.css";
+@import "./key.css";
+@import "./chat.css";
+@import "./fab.css";
+@import "./rating.css";
+@import "./steps.css";
 
 /* Navigation */
-@import "navbar.css";
-@import "breadcrumb.css";
-@import "pagination.css";
-@import "tab.css";
-@import "scrollspy.css";
+@import "./app-nav.css";
+@import "./navbar.css";
+@import "./breadcrumb.css";
+@import "./pagination.css";
+@import "./tab.css";
+@import "./scrollspy.css";
 
 /* Data */
-@import "table.css";
-@import "meter.css";
+@import "./list.css";
+@import "./table.css";
+@import "./meter.css";
+
+/* Composed controls — imported last so equal-specificity corner rules remain
+   later than the controls they group. */
+@import "./join.css";

package/src/css/components/indicator.css

@@ -0,0 +1,47 @@
+/*
+ * Indicator — generic corner positioning for overlaid component content.
+ *
+ * The container only establishes the containing block. The item owns no
+ * paint, size, or ring so badges and other components keep their own visual
+ * contract.
+ *
+ * Internal:
+ * --indicator-translate-x
+ * --indicator-translate-y
+ */
+.indicator {
+  position: relative;
+}
+
+.indicator-item {
+  --indicator-translate-x: 50%;
+  --indicator-translate-y: -50%;
+
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  z-index: 1;
+  transform: translate(var(--indicator-translate-x), var(--indicator-translate-y));
+}
+
+.indicator-item.start {
+  --indicator-translate-x: -50%;
+
+  inset-inline-start: 0;
+  inset-inline-end: auto;
+}
+
+.indicator-item.bottom {
+  --indicator-translate-y: 50%;
+
+  inset-block-start: auto;
+  inset-block-end: 0;
+}
+
+.indicator-item:dir(rtl) {
+  --indicator-translate-x: -50%;
+}
+
+.indicator-item.start:dir(rtl) {
+  --indicator-translate-x: 50%;
+}