actual-css 0.1.0

package/src/css/components/button.css

@@ -0,0 +1,216 @@
+/*
+ * Buttons for actions and button-like links.
+ *
+ * .btn is primarily for actionable elements: <button>, <a href>,
+ * input[type="button"|"submit"|"reset"].
+ *
+ * Keeps shared intent, variant, and size behavior with a solid default.
+ *
+ * Disabled state uses the native disabled attribute for buttons and inputs.
+ * Anchors have no native disabled state, so a.btn uses aria-disabled="true"
+ * for disabled styling and activation guards.
+ */
+
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.btn) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+.btn {
+  --btn-font-size: var(--control-font-size);
+  --btn-min-size: var(--control-size);
+  --btn-pad-x: var(--control-pad-x, 1em);
+  --btn-bg: var(--ui-bg, var(--btn-default-bg, var(--intent, var(--neutral))));
+  --btn-fg: var(--ui-fg, var(--btn-default-fg, var(--intent-fg, var(--neutral-fg))));
+  --btn-border: var(--ui-border, var(--btn-default-border, transparent));
+  --btn-radius: var(--radius);
+  --btn-focus-color: var(--intent, var(--focus));
+  --btn-focus-outline-width: calc(var(--border-width) * 2);
+  --btn-hover-bg: var(--ui-hover-bg, var(--btn-bg));
+  --btn-hover-overlay: var(--hover-overlay, rgb(0 0 0 / 0.08));
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+  min-block-size: var(--btn-min-size);
+  padding-block: var(--space-2);
+  padding-block: max(var(--space-1), calc((var(--btn-min-size) - 1lh) / 2));
+  padding-inline: var(--btn-pad-x);
+  border: var(--border-width) solid var(--btn-border-color, var(--btn-border));
+  border-block-end-color: var(
+    --btn-border-block-end-color,
+    var(--btn-border-color, var(--btn-border))
+  );
+  border-block-end-width: var(--btn-border-block-end-width, var(--border-width));
+  border-radius: var(--btn-radius);
+  background: var(--btn-bg);
+  color: var(--btn-fg);
+  font: inherit;
+  font-size: var(--btn-font-size);
+  font-weight: var(--font-weight-strong);
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color var(--duration),
+    border-color var(--duration),
+    color var(--duration),
+    box-shadow var(--duration),
+    transform var(--duration);
+}
+
+@supports (color: color-mix(in oklch, red, white)) {
+  .btn {
+    --btn-focus-ring-color: color-mix(in oklch, var(--btn-focus-color) 28%, transparent);
+  }
+}
+
+/* .solid/.soft/.outline are shared via variants.css. The baseline --btn-*
+   fallbacks make .btn solid by default; .ghost/.link are .btn-only variants. */
+.btn.ghost {
+  --ui-bg: transparent;
+  --ui-fg: var(--intent, var(--text));
+  --ui-border: transparent;
+}
+
+/* Solid/soft get the overlay darkening on hover; outline/ghost/link stay flat.
+   Routed through a variable instead of a :not(.outline, .ghost, .link)
+   exclusion so the hover rule below only has to state the interactive
+   element list once. */
+.btn.outline,
+.btn.ghost,
+.btn.link {
+  --btn-hover-overlay: transparent;
+}
+
+/* The .soft/.outline/.ghost hover recipe (--ui-hover-bg) is shared with
+   .badge in variants.css; the overlay darkening for solid/soft is .btn-specific. */
+@media (hover: hover) {
+  .btn:not(:where(:disabled, [aria-disabled="true"])):hover {
+    background: var(--btn-hover-bg);
+    box-shadow: inset 0 0 0 999px var(--btn-hover-overlay);
+  }
+}
+
+.btn:not(:where(:disabled, [aria-disabled="true"])):active {
+  transform: translateY(1px);
+}
+
+.btn.link {
+  --ui-bg: transparent;
+  --ui-fg: var(--intent, var(--text));
+  --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;
+  border-color: transparent;
+  text-decoration: underline;
+  text-underline-offset: 0.18em;
+}
+
+/* .btn.circle needs no local rule: the .circle utility (utilities.css) loads
+   after components and overrides border-radius at equal specificity. */
+
+@media (hover: hover) {
+  .btn.link:not(:where(:disabled, [aria-disabled="true"])):hover {
+    background: transparent;
+    color: var(--intent, var(--text));
+    text-decoration-thickness: 0.12em;
+  }
+}
+
+.btn:focus-visible {
+  outline: var(--btn-focus-outline-width) solid var(--btn-focus-color);
+  outline-offset: var(--focus-outline-offset);
+  box-shadow: 0 0 0 3px var(--btn-focus-ring-color, var(--focus-ring));
+}
+
+.btn.link:focus-visible {
+  outline-color: currentColor;
+  outline-offset: 0.2em;
+}
+
+.btn:disabled {
+  cursor: not-allowed;
+  opacity: var(--disabled-opacity);
+}
+
+/* Anchors have no native disabled state.
+   a.btn[aria-disabled="true"] only provides disabled styling and blocks pointer
+   activation. For a truly disabled link, remove href or prevent activation in
+   app code. */
+a.btn[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: var(--disabled-opacity);
+  pointer-events: none;
+}
+
+/* Busy */
+.btn[aria-busy="true"]:not(:disabled) {
+  cursor: progress;
+}
+
+.btn[aria-busy="true"] > .spinner {
+  --spinner-size: 1em;
+  --spinner-width: 0.15em;
+}
+
+/* Toggle */
+/* State must outrank the shared .outline/.ghost hover recipes: a pressed
+   button keeps its intent background and foreground while hovered. */
+.btn:is([aria-pressed="true"], [aria-current]:not([aria-current="false"])):not(.link) {
+  --btn-bg: var(--intent, var(--primary));
+  --btn-fg: var(--intent-fg, var(--primary-fg));
+  --btn-border: var(--intent, var(--primary));
+  --ui-hover-bg: var(--btn-bg);
+}
+
+@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]:not([aria-current="false"])):not(.link) {
+    border-color: Highlight;
+    background: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
+
+  @media (hover: hover) {
+    .btn:hover:not(:where(:disabled, [aria-disabled="true"], .link)) {
+      outline: var(--border-width) solid ButtonText;
+      outline-offset: 2px;
+    }
+  }
+
+  .btn:disabled,
+  a.btn[aria-disabled="true"] {
+    border-color: GrayText;
+    background: Canvas;
+    color: GrayText;
+    forced-color-adjust: auto;
+  }
+}

package/src/css/components/card.css

@@ -0,0 +1,140 @@
+/*
+ * 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.
+ */
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.card) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+.card {
+  --card-pad: var(--space-4);
+  --card-radius: var(--radius-lg);
+  --card-max-inline-size: none;
+
+  max-inline-size: var(--card-max-inline-size);
+  padding: var(--card-pad);
+  background: var(--ui-bg, var(--surface));
+  color: var(--ui-fg, var(--text));
+  border: var(--border-width) solid var(--ui-border, var(--border));
+  border-radius: var(--card-radius);
+}
+
+.card > * {
+  min-inline-size: 0;
+}
+
+.card > :where(header, footer) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: var(--items-align, center);
+  justify-content: space-between;
+  gap: var(--space-3);
+  min-inline-size: 0;
+}
+
+.card > :where(header, footer) > * {
+  min-inline-size: 0;
+  margin-block: 0;
+}
+
+.card > header {
+  align-items: var(--items-align, flex-start);
+}
+
+.card > :first-child {
+  margin-block-start: 0;
+}
+
+.card > :last-child {
+  margin-block-end: 0;
+}
+
+.card.raised {
+  box-shadow: var(--shadow);
+}
+.card.subtle {
+  background: var(--surface-subtle);
+}
+.card.inverted {
+  background: var(--surface-solid);
+  color: var(--surface);
+  border-color: transparent;
+  --heading: var(--surface);
+  --busy-overlay-bg: var(--surface-solid);
+}
+
+.card.compact {
+  --card-pad: var(--space-2);
+}
+
+/* Full-bleed children */
+.card > .bleed {
+  margin-inline: calc(var(--card-pad) * -1);
+  max-inline-size: none;
+}
+
+.card > .bleed:first-child {
+  margin-block-start: calc(var(--card-pad) * -1);
+  border-start-start-radius: inherit;
+  border-start-end-radius: inherit;
+}
+
+.card > .bleed:last-child {
+  margin-block-end: calc(var(--card-pad) * -1);
+  border-end-start-radius: inherit;
+  border-end-end-radius: inherit;
+}
+
+/* Media bleed */
+.card > :where(img, picture, video, canvas, svg).bleed {
+  display: block;
+  inline-size: calc(100% + var(--card-pad) * 2);
+  max-inline-size: none;
+}
+
+.card > picture.bleed {
+  overflow: hidden;
+}
+
+.card > picture.bleed > img {
+  display: block;
+  inline-size: 100%;
+  block-size: auto;
+}
+
+/* Padded structural bleed */
+.card > :where(header, footer, figure).bleed {
+  padding: var(--card-pad);
+}
+
+@media (forced-colors: active) {
+  .card {
+    border-color: ButtonText;
+    background: Canvas;
+    color: CanvasText;
+  }
+
+  .card.raised {
+    box-shadow: none;
+  }
+
+  .card.inverted {
+    --heading: CanvasText;
+
+    border-color: ButtonText;
+    background: Canvas;
+    color: CanvasText;
+  }
+}

package/src/css/components/drawer.css

@@ -0,0 +1,122 @@
+/*
+ * Drawer — modal side-sheet built on the native dialog element.
+ *
+ * Top-layer rendering, ::backdrop, Escape, and modal focus come from the
+ * native dialog. CSS owns progressive enter/exit motion where browsers support
+ * discrete display/overlay transitions. The drawer is a layout shell only —
+ * navigation content inside uses .nav-link and .accordion, which carry their
+ * own link/summary styling.
+ */
+dialog.drawer {
+  --drawer-size: 20rem;
+  --drawer-pad: var(--space-4);
+  --drawer-closed-translate: -100%;
+
+  inline-size: min(calc(var(--viewport-inline) * 0.9), var(--drawer-size));
+  block-size: var(--viewport-block);
+  max-inline-size: none;
+  max-block-size: var(--viewport-block);
+  margin: 0;
+  padding: var(--drawer-pad);
+  border: 0;
+  border-inline-end: var(--border-width) solid var(--border);
+  border-radius: 0;
+  background: var(--surface-raised);
+  color: var(--text);
+  box-shadow: var(--shadow);
+  opacity: 0;
+  transform: translateX(var(--drawer-closed-translate));
+  transition:
+    opacity var(--duration-slow),
+    transform var(--duration-slow);
+}
+
+dialog.drawer[open] {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: var(--space-4);
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* Backdrop color sourced from components/surface.css so it matches .modal
+   and .surface-backdrop across the dialog family. */
+dialog.drawer::backdrop {
+  background: var(--backdrop-fill);
+  opacity: 0;
+  transition: opacity var(--duration-slow);
+}
+
+dialog.drawer[data-side="end"] {
+  --drawer-closed-translate: 100%;
+
+  margin-inline-start: auto;
+  margin-inline-end: 0;
+  border-inline-end: 0;
+  border-inline-start: var(--border-width) solid var(--border);
+}
+
+dialog.drawer[open]::backdrop {
+  opacity: 1;
+}
+
+@starting-style {
+  dialog.drawer[open] {
+    opacity: 0;
+    transform: translateX(var(--drawer-closed-translate));
+  }
+
+  dialog.drawer[open]::backdrop {
+    opacity: 0;
+  }
+}
+
+/* Scrollable navigation region inside the drawer. */
+dialog.drawer nav {
+  min-block-size: 0;
+  overflow-y: auto;
+}
+
+@supports (transition-behavior: allow-discrete) {
+  dialog.drawer {
+    transition:
+      opacity var(--duration-slow),
+      transform var(--duration-slow),
+      overlay var(--duration-slow) allow-discrete,
+      display var(--duration-slow) allow-discrete;
+  }
+
+  dialog.drawer::backdrop {
+    transition:
+      opacity var(--duration-slow),
+      overlay var(--duration-slow) allow-discrete,
+      display var(--duration-slow) allow-discrete;
+  }
+}
+
+/* RTL: swap closed transform directions so the drawer slides from the correct
+   inline side. */
+[dir="rtl"] dialog.drawer {
+  --drawer-closed-translate: 100%;
+}
+
+[dir="rtl"] dialog.drawer[data-side="end"] {
+  --drawer-closed-translate: -100%;
+}
+
+@media (forced-colors: active) {
+  dialog.drawer {
+    border-inline-end-color: ButtonText;
+    background: Canvas;
+    color: CanvasText;
+    box-shadow: none;
+  }
+
+  dialog.drawer[data-side="end"] {
+    border-inline-start-color: ButtonText;
+  }
+
+  dialog.drawer::backdrop {
+    background: Canvas;
+  }
+}

package/src/css/components/flyout.css

@@ -0,0 +1,243 @@
+/*
+ * Flyout — floating panel for actions and links.
+ *
+ * JavaScript owns positioning (position: fixed + left/top), state
+ * (hidden + .is-open), focus, and keyboard behavior. CSS owns the surfaced
+ * panel appearance, item styles, and animation.
+ *
+ * Runtime markers (managed by surface.js): .is-open marks an open flyout,
+ * .is-sheet marks "auto" resolved to bottom-sheet presentation on coarse
+ * pointers. Authors opt into mobile behavior with
+ * [data-flyout-mobile="sheet|auto|none|anchored"].
+ * --flyout-trigger-width is set by surface.js while an open flyout is positioned.
+ */
+
+.flyout-trigger {
+  position: relative;
+  display: inline-block;
+}
+
+/* Stretch: for a flyout trigger that must span its container — e.g. the
+   last row of a full-width sidebar nav list. Stretches both the
+   positioning wrapper and its trigger control. Named for the effect
+   (stretch to fill), not the display value, to avoid reading like a
+   generic display-block utility. */
+.flyout-trigger.stretch {
+  display: block;
+  inline-size: 100%;
+}
+
+.flyout-trigger.stretch > [aria-haspopup="menu"] {
+  inline-size: 100%;
+}
+
+.flyout {
+  z-index: var(--z-menu);
+  /* No-JS fallback: below the trigger inside the relative .flyout-trigger.
+     surface.js switches an open flyout to position: fixed with measured
+     coordinates; this only covers a flyout revealed without the runtime. */
+  position: absolute;
+  inset-block-start: calc(100% + var(--space-1));
+  inset-inline-start: 0;
+  display: grid;
+  gap: var(--space-1);
+  inline-size: var(--flyout-inline-size, max-content);
+  min-inline-size: min(
+    var(--flyout-trigger-width, 0px),
+    min(var(--flyout-max-inline-size, 20rem), calc(var(--viewport-inline) - var(--space-6)))
+  );
+  max-inline-size: min(
+    var(--flyout-max-inline-size, 20rem),
+    calc(var(--viewport-inline) - var(--space-6))
+  );
+  max-block-size: min(24rem, var(--available-height, calc(var(--viewport-block) - var(--space-6))));
+  overflow: auto;
+  margin: 0;
+  padding: var(--space-1);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-raised);
+  box-shadow: var(--shadow-popout);
+  list-style: none;
+  opacity: 1;
+  scale: 1;
+  transition:
+    opacity var(--duration-fast, var(--duration)) var(--ease, ease),
+    scale var(--duration-fast, var(--duration)) var(--ease, ease),
+    translate var(--duration-fast, var(--duration)) var(--ease, ease);
+}
+
+.flyout.is-open:not(.is-sheet) {
+  inset: auto;
+}
+
+@starting-style {
+  .flyout.is-open {
+    opacity: 0;
+    scale: 0.98;
+  }
+}
+
+/* Bottom-sheet presentation. surface.js toggles .is-sheet when the flyout is
+   opened on coarse pointer / narrow viewports. */
+.flyout.is-sheet {
+  position: fixed;
+  inset-inline: 0;
+  inset-block-start: auto;
+  inset-block-end: 0;
+  inline-size: auto;
+  min-inline-size: 0;
+  max-inline-size: none;
+  max-block-size: min(calc(var(--viewport-block) * 0.75), 32rem);
+  overflow: auto;
+  grid-template-columns: 1fr;
+  padding: max(var(--space-3), env(safe-area-inset-top)) var(--space-3)
+    max(var(--space-3), env(safe-area-inset-bottom));
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.flyout[hidden] {
+  display: none;
+  opacity: 0;
+  scale: 0.98;
+}
+
+.flyout.is-sheet[hidden] {
+  scale: 1;
+  translate: 0 var(--space-3);
+}
+
+@starting-style {
+  .flyout.is-sheet.is-open {
+    scale: 1;
+    translate: 0 var(--space-3);
+  }
+}
+
+@supports (transition-behavior: allow-discrete) {
+  .flyout {
+    transition:
+      opacity var(--duration-fast, var(--duration)) var(--ease, ease),
+      scale var(--duration-fast, var(--duration)) var(--ease, ease),
+      translate var(--duration-fast, var(--duration)) var(--ease, ease),
+      display var(--duration-fast, var(--duration)) allow-discrete;
+  }
+}
+
+.flyout > li {
+  margin: 0;
+}
+
+.flyout > :where(section, footer) {
+  min-inline-size: 0;
+  padding: var(--space-2);
+}
+
+.flyout > section > :where(h1, h2, h3, h4, h5, h6) {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-strong);
+}
+
+.flyout > section > ul {
+  display: grid;
+  gap: var(--space-1);
+  margin: var(--space-1) 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.flyout > section > ul > li {
+  margin: 0;
+}
+
+/* Item contract: a button, link, or menuitem placed directly in the flyout
+   or directly in any of its <li> (bare list, or grouped section > ul > li).
+   menu.js mirrors this contract in MENU_ITEM_SELECTOR — keep them in sync.
+   :where(li) keeps specificity at a single class (0,1,0) so consumer
+   overrides behave the same as a plain .flyout > rule. */
+:is(.flyout, .flyout :where(li)) > :where(button, a, [role="menuitem"]) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--space-2);
+  inline-size: 100%;
+  min-block-size: var(--control-size);
+  padding-inline: var(--space-2);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--text);
+  font: inherit;
+  font-weight: var(--font-weight);
+  text-decoration: none;
+  text-align: start;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+:is(.flyout.is-sheet, .flyout.is-sheet :where(li)) > :where(button, a, [role="menuitem"]) {
+  min-block-size: var(--control-size-lg);
+}
+
+:is(.flyout, .flyout :where(li)) > :where(button, a, [role="menuitem"]):focus-visible {
+  background: var(--surface-subtle);
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+  box-shadow: var(--focus-ring-shadow);
+}
+
+:is(.flyout, .flyout :where(li))
+  > :where(button, a, [role="menuitem"]):is(:disabled, [aria-disabled="true"]) {
+  cursor: not-allowed;
+  opacity: var(--disabled-opacity);
+}
+
+:is(.flyout, .flyout :where(li)) > :where(a, [role="menuitem"])[aria-disabled="true"] {
+  pointer-events: none;
+}
+
+@media (hover: hover) {
+  :is(.flyout, .flyout :where(li))
+    > :where(button, a, [role="menuitem"]):hover:not(
+      :where(:focus-visible, :disabled, [aria-disabled="true"])
+    ) {
+    background: var(--surface-subtle);
+    outline: none;
+  }
+}
+
+.flyout > hr,
+.flyout > li > hr {
+  inline-size: 100%;
+  margin: 0;
+  margin-block: var(--space-1);
+  border: 0;
+  border-block-start: var(--border-width) solid var(--border);
+}
+
+@media (forced-colors: active) {
+  .flyout {
+    border-color: ButtonText;
+    background: Canvas;
+    color: CanvasText;
+    box-shadow: none;
+  }
+
+  :is(.flyout, .flyout :where(li)) > :where(button, a, [role="menuitem"]):focus-visible {
+    background: Canvas;
+    color: CanvasText;
+  }
+
+  @media (hover: hover) {
+    :is(.flyout, .flyout :where(li))
+      > :where(button, a, [role="menuitem"]):hover:not(:where(:disabled, [aria-disabled="true"])) {
+      outline: var(--border-width) solid ButtonText;
+      outline-offset: -1px;
+      background: Canvas;
+      color: CanvasText;
+    }
+  }
+}