@ps1ui/core 0.0.0 → 0.0.1

package/dist/components.css

@@ -0,0 +1,1870 @@
+/* ==========================================================================
+ * Cascade & overrides — why this file does NOT use @layer
+ * --------------------------------------------------------------------------
+ * Wrapping these styles in `@layer ps1ui { … }` was considered and rejected:
+ * unlayered styles beat layered ones regardless of specificity, and host
+ * design systems (this entry's target audience) invariably ship unlayered
+ * element-level rules (`button { … }`, `input { … }`, `a { … }`). Layering
+ * ps1ui would let every such host rule silently override component classes,
+ * breaking components by default exactly where this entry is meant to be
+ * embedded. So component rules stay unlayered, and selectors like
+ * `.ps1ui-checkbox:checked:hover:not(:disabled)` keep real specificity.
+ *
+ * Overriding ps1ui styles, in preference order:
+ *   1. Redefine `--ps1ui-*` design tokens (the supported theming surface) —
+ *      colors, spacing, radii, fonts all flow from tokens.css.
+ *   2. Match or exceed the component selector's specificity, e.g.
+ *      `.my-app .ps1ui-button { … }`.
+ *   3. If YOUR system is fully layered, import this entry into a low layer
+ *      yourself — `@import "@ps1ui/core/components.css" layer(vendor);` —
+ *      and your layered rules above it win without extra specificity.
+ * ========================================================================== */
+
+/* Palette hexes are mirrored in .storybook/ps1uiTheme.ts — see note there. */
+
+:root {
+  --ps1ui-font-mono:
+    "JetBrains Mono Variable", ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", Consolas,
+    monospace;
+
+  --ps1ui-color-bg: #0b0f14;
+  --ps1ui-color-surface: #0f1520;
+  --ps1ui-color-border: #21262d;
+  --ps1ui-color-border-strong: #30363d;
+  --ps1ui-color-fg: #c7d5df;
+  --ps1ui-color-fg-muted: #8b98a5;
+  /* fg-subtle must maintain ≥ 4.5:1 (WCAG AA) vs BOTH --ps1ui-color-bg and --ps1ui-color-surface.
+     Surface is the tighter case; verified by Text.contrast.test.tsx. */
+  --ps1ui-color-fg-subtle: #7a8593;
+  --ps1ui-color-primary: #7ee787;
+  --ps1ui-color-primary-hover: #56d364;
+  --ps1ui-color-primary-active: #3fb950;
+  --ps1ui-color-primary-fg: #0b0f14;
+  --ps1ui-color-accent: #ffa657;
+  --ps1ui-color-focus-ring-soft: color-mix(in srgb, var(--ps1ui-color-primary) 14%, transparent);
+  --ps1ui-shadow-focus-ring: 0 0 0 3px var(--ps1ui-color-focus-ring-soft);
+
+  /* Syntax-highlight palette for CodeBlock. Every value is verified ≥ 4.5:1 vs
+     BOTH --ps1ui-color-bg and --ps1ui-color-surface by CodeBlock.contrast.test.tsx. */
+  --ps1ui-code-comment: #7a8593;
+  --ps1ui-code-string: #f0c880;
+  --ps1ui-code-keyword: #ff7b95;
+  --ps1ui-code-function: #79c0ff;
+  --ps1ui-code-constant: #ffa657;
+  --ps1ui-code-type: #5eead4;
+  --ps1ui-code-tag: #ff9587;
+  --ps1ui-code-attr: #ffdc99;
+  --ps1ui-code-punctuation: #7a8593;
+  /* Diff-specific: green = added, rose = removed. Kept separate from tag/string so
+     the semantic overlap doesn't leak between grammars (a removed diff line has
+     nothing to do with an HTML <tag>, and an added line isn't a string literal). */
+  --ps1ui-code-inserted: #7ee787;
+  --ps1ui-code-deleted: #ff8896;
+
+  --ps1ui-radius-md: 3px;
+  --ps1ui-radius-lg: 4px;
+
+  --ps1ui-space-xs: 4px;
+  --ps1ui-space-sm: 8px;
+  --ps1ui-space-md: 12px;
+  --ps1ui-space-lg: 16px;
+  --ps1ui-space-xl: 24px;
+  --ps1ui-space-2xl: 32px;
+
+  /* Vertical padding for 1px-bordered controls (Button, Input): border +
+     padding = --ps1ui-space-sm (8px), so this is a derived value, not a new
+     spacing step. */
+  --ps1ui-control-padding-y: 7px;
+
+  /* Container max-widths, in rem so they scale with the user's browser
+     font-size preference (WCAG-friendly). Numeric equivalents at the
+     browser-default 16px root: 40 = 640, 48 = 768, 64 = 1024, 80 = 1280.
+     Doubles as the breakpoint scale — see --ps1ui-breakpoint-* below. */
+  --ps1ui-container-sm: 40rem;
+  --ps1ui-container-md: 48rem;
+  --ps1ui-container-lg: 64rem;
+  --ps1ui-container-xl: 80rem;
+
+  /* Responsive breakpoints, in rem for the same accessibility reason.
+     Values are identical to --ps1ui-container-* by design: a Container
+     of size=lg (64rem) fills at exactly the `lg` breakpoint. These are
+     documentation tokens — @container / @media conditions cannot use
+     `var()` per the CSS spec, so the same numeric values are also
+     hardcoded in each component's CSS. Keep in sync. */
+  --ps1ui-breakpoint-sm: 40rem;
+  --ps1ui-breakpoint-md: 48rem;
+  --ps1ui-breakpoint-lg: 64rem;
+  --ps1ui-breakpoint-xl: 80rem;
+
+  /* Type scale, in rem so text tracks the user's browser font-size preference
+     (same rationale as the container/breakpoint tokens above). All values sit
+     on the 0.125rem (2px) grid; px equivalents at the default 16px root:
+     12 / 14 / 16 / 18 / 22 / 26 / 32. */
+  --ps1ui-font-size-xs: 0.75rem;
+  --ps1ui-font-size-sm: 0.875rem;
+  --ps1ui-font-size-md: 1rem;
+  --ps1ui-font-size-lg: 1.125rem;
+  --ps1ui-font-size-xl: 1.375rem;
+  --ps1ui-font-size-2xl: 1.625rem;
+  --ps1ui-font-size-3xl: 2rem;
+
+  --ps1ui-transition-fast: 120ms ease;
+}
+
+/* PS1Root establishes the app-level responsive containment context.
+   `container-type: inline-size` turns this element into a query context for
+   `@container` rules used by responsive ps1ui components. Named `ps1ui-root`
+   for future targeted queries; unnamed queries in component CSS match this
+   via nearest-ancestor lookup. */
+
+/* Containment side-effect defense (align-self / justify-self / min-width) lives
+   in components.css's shared selector list — see the block header there. */
+
+.ps1ui-root {
+  container: ps1ui-root / inline-size;
+}
+
+.ps1ui-anchor {
+  font-family: var(--ps1ui-font-mono);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
+  border-radius: var(--ps1ui-radius-md);
+  cursor: pointer;
+  transition:
+    color var(--ps1ui-transition-fast),
+    text-decoration-color var(--ps1ui-transition-fast);
+}
+
+/* outline (not box-shadow) so a wrapping inline anchor renders as connected fragments
+   per line-box instead of two disjoint rectangles. Modern browsers follow border-radius. */
+
+.ps1ui-anchor:focus-visible {
+  outline: 2px solid var(--ps1ui-color-primary);
+  outline-offset: 2px;
+}
+
+/* text-decoration-color defaults to currentColor, so setting only `color` per state
+   also shifts the underline. subtle's default intentionally decouples the two — the
+   underline is dimmer than the text — hence the explicit override there. */
+
+.ps1ui-anchor--primary {
+  color: var(--ps1ui-color-primary);
+}
+
+.ps1ui-anchor--primary:hover {
+  color: var(--ps1ui-color-primary-hover);
+}
+
+.ps1ui-anchor--primary:active {
+  color: var(--ps1ui-color-primary-active);
+}
+
+.ps1ui-anchor--subtle {
+  color: inherit;
+  text-decoration-color: var(--ps1ui-color-fg-subtle);
+}
+
+/* Reset text-decoration-color to currentColor so the underline follows the
+   hover/active color shift; without this it would stay pinned to fg-subtle
+   from the base rule. */
+
+.ps1ui-anchor--subtle:hover {
+  color: var(--ps1ui-color-primary);
+  text-decoration-color: currentColor;
+}
+
+.ps1ui-anchor--subtle:active {
+  color: var(--ps1ui-color-primary-active);
+  text-decoration-color: currentColor;
+}
+
+.ps1ui-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ps1ui-space-sm);
+  font-family: var(--ps1ui-font-mono);
+  font-size: var(--ps1ui-font-size-sm);
+  /* Applied at base rather than per-variant so primary and secondary read as
+     equal-weight siblings — variant should encode affordance (fill vs outline),
+     not typography weight. A per-variant weight difference used to make
+     secondary feel "one size smaller" next to primary. */
+  font-weight: 600;
+  line-height: 1;
+  /* 14px: 2× the 7px vertical rhythm; deliberately off the space scale. */
+  padding: var(--ps1ui-control-padding-y) 14px;
+  border-radius: var(--ps1ui-radius-md);
+  border: 1px solid transparent;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  transition:
+    background var(--ps1ui-transition-fast),
+    border-color var(--ps1ui-transition-fast),
+    color var(--ps1ui-transition-fast);
+}
+
+.ps1ui-button:focus-visible {
+  outline: none;
+  border-color: var(--ps1ui-color-primary);
+  box-shadow: var(--ps1ui-shadow-focus-ring);
+}
+
+.ps1ui-button:disabled {
+  cursor: not-allowed;
+}
+
+.ps1ui-button--primary {
+  background: var(--ps1ui-color-primary);
+  color: var(--ps1ui-color-primary-fg);
+  border-color: var(--ps1ui-color-primary);
+}
+
+.ps1ui-button--primary:hover:not(:disabled) {
+  background: var(--ps1ui-color-primary-hover);
+  border-color: var(--ps1ui-color-primary-hover);
+}
+
+.ps1ui-button--primary:active:not(:disabled) {
+  background: var(--ps1ui-color-primary-active);
+  border-color: var(--ps1ui-color-primary-active);
+}
+
+.ps1ui-button--primary:disabled {
+  background: transparent;
+  color: var(--ps1ui-color-fg-subtle);
+  border-color: var(--ps1ui-color-border);
+}
+
+.ps1ui-button--secondary {
+  background: transparent;
+  color: var(--ps1ui-color-fg);
+  /* fg-subtle (~5:1 vs --ps1ui-color-bg) instead of border-strong (~1.7:1) so
+     the 1px outline actually defines the click target on the dark canvas —
+     otherwise the boundary reads as a ghost and the button visually shrinks
+     down to its text glyphs next to a solid primary. */
+  border-color: var(--ps1ui-color-fg-subtle);
+}
+
+.ps1ui-button--secondary:hover:not(:disabled) {
+  border-color: var(--ps1ui-color-primary);
+  background: color-mix(in srgb, var(--ps1ui-color-primary) 6%, transparent);
+}
+
+.ps1ui-button--secondary:active:not(:disabled) {
+  border-color: var(--ps1ui-color-primary-active);
+  background: color-mix(in srgb, var(--ps1ui-color-primary-active) 10%, transparent);
+}
+
+.ps1ui-button--secondary:disabled {
+  color: var(--ps1ui-color-fg-subtle);
+  border-color: var(--ps1ui-color-border);
+}
+
+.ps1ui-checkbox {
+  -moz-appearance: none;
+       appearance: none;
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  flex-shrink: 0;
+  font-family: var(--ps1ui-font-mono);
+  color: var(--ps1ui-color-primary-fg);
+  background: var(--ps1ui-color-bg);
+  border: 1px solid var(--ps1ui-color-border-strong);
+  border-radius: var(--ps1ui-radius-md);
+  cursor: pointer;
+  transition:
+    background var(--ps1ui-transition-fast),
+    border-color var(--ps1ui-transition-fast),
+    box-shadow var(--ps1ui-transition-fast);
+}
+
+.ps1ui-checkbox:hover:not(:disabled) {
+  border-color: var(--ps1ui-color-primary);
+}
+
+.ps1ui-checkbox:focus-visible {
+  outline: none;
+  border-color: var(--ps1ui-color-primary);
+  box-shadow: var(--ps1ui-shadow-focus-ring);
+}
+
+.ps1ui-checkbox:checked,
+.ps1ui-checkbox:indeterminate {
+  background: var(--ps1ui-color-primary);
+  border-color: var(--ps1ui-color-primary);
+}
+
+.ps1ui-checkbox:checked:hover:not(:disabled),
+.ps1ui-checkbox:indeterminate:hover:not(:disabled) {
+  background: var(--ps1ui-color-primary-hover);
+  border-color: var(--ps1ui-color-primary-hover);
+}
+
+.ps1ui-checkbox:checked:active:not(:disabled),
+.ps1ui-checkbox:indeterminate:active:not(:disabled) {
+  background: var(--ps1ui-color-primary-active);
+  border-color: var(--ps1ui-color-primary-active);
+}
+
+/* Checkmark: classic rotated-L trick — draws the right + bottom border of a small
+   rectangle, then rotates 45deg so it reads as a ✓. `:not(:indeterminate)` makes
+   precedence explicit for the mixed DOM state (both .checked and .indeterminate
+   true) so the indeterminate bar wins without relying on source order. Uses
+   `currentColor` so the disabled state can dim the mark by changing `color`.
+   Depends on the pseudo's initial `box-sizing: content-box` so the 2px borders
+   sit OUTSIDE the 4×8 content — base.css's reset intentionally excludes pseudo
+   elements from its `box-sizing: border-box` block for exactly this pattern.
+   Rendered geometry locked in by Checkbox.checkmark-geometry.test.tsx. */
+
+.ps1ui-checkbox:checked:not(:indeterminate)::after {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  width: 4px;
+  height: 8px;
+  border-style: solid;
+  border-color: currentColor;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.ps1ui-checkbox:indeterminate::after {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 6px;
+  width: 10px;
+  height: 2px;
+  background: currentColor;
+  border-radius: 1px;
+}
+
+/* forced-colors force-replaces author backgrounds, so the background-drawn
+   indeterminate bar would vanish — redraw it as a border, which survives as
+   system ink (same 6–8px band; the checked ✓ is already border-drawn and
+   needs nothing). The focus-outline counterpart lives in the grouped
+   forced-colors rule in styles/components.css. Tested in
+   src/styles/forced-colors.test.tsx. */
+
+@media (forced-colors: active) {
+  .ps1ui-checkbox:indeterminate::after {
+    background: none;
+    height: 0;
+    border-top: 2px solid currentColor;
+    border-radius: 0;
+  }
+}
+
+.ps1ui-checkbox:disabled {
+  cursor: not-allowed;
+  color: var(--ps1ui-color-fg-subtle);
+  background: var(--ps1ui-color-surface);
+  border-color: var(--ps1ui-color-border);
+}
+
+.ps1ui-checkbox:disabled:checked,
+.ps1ui-checkbox:disabled:indeterminate {
+  background: var(--ps1ui-color-surface);
+  border-color: var(--ps1ui-color-border);
+}
+
+/* Input custom properties emitted by Container.tsx per set responsive-prop
+   breakpoint (`--_container-<axis>-<bp>`). Registered as non-inheriting for
+   the same reason as Stack — see Stack.css's @property block for the full
+   rationale (CSS Custom Properties Level 1 §2 inheritance default;
+   `unset`/`revert` won't block; only `initial` or `@property inherits:false`
+   works). Any new responsive axis added to Container.tsx must add matching
+   @property blocks here. */
+
+@property --_container-size-base {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_container-size-sm {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_container-size-md {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_container-size-lg {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_container-size-xl {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_container-px-base {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_container-px-sm {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_container-px-md {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_container-px-lg {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_container-px-xl {
+  syntax: "*";
+  inherits: false;
+}
+
+/* Container — max-width + horizontal padding + auto centering.
+   Establishes an inline-size containment context so descendants respond to
+   Container's width via `@container` queries. Named `ps1ui-container` for
+   future targeted queries.
+
+   Responsive values propagate via a CSS custom-property cascade. The
+   component emits `--_container-size-{bp}` / `--_container-px-{bp}` via
+   inline style (see Container.tsx). Each `@container (min-width: X)` block
+   below overrides `--_size` / `--_px` with the value for the matching
+   breakpoint — the fallback chain in `--_size-{bp}` inherits the previous
+   breakpoint's effective value so a partial responsive object cascades
+   naturally.
+
+   Breakpoint thresholds mirror --ps1ui-breakpoint-* in tokens.css; kept
+   inline as literal values because `@container` conditions cannot resolve
+   `var()`. Keep them in sync. */
+
+/* Containment side-effect defense (align-self / justify-self / min-width) lives
+   in components.css's shared selector list — see the block header there. */
+
+.ps1ui-container {
+  container: ps1ui-container / inline-size;
+  width: 100%;
+  margin-inline: auto;
+
+  --_size-base: var(--_container-size-base, var(--ps1ui-container-lg));
+  --_size-sm: var(--_container-size-sm, var(--_size-base));
+  --_size-md: var(--_container-size-md, var(--_size-sm));
+  --_size-lg: var(--_container-size-lg, var(--_size-md));
+  --_size-xl: var(--_container-size-xl, var(--_size-lg));
+
+  --_px-base: var(--_container-px-base, var(--ps1ui-space-lg));
+  --_px-sm: var(--_container-px-sm, var(--_px-base));
+  --_px-md: var(--_container-px-md, var(--_px-sm));
+  --_px-lg: var(--_container-px-lg, var(--_px-md));
+  --_px-xl: var(--_container-px-xl, var(--_px-lg));
+
+  --_size: var(--_size-base);
+  --_px: var(--_px-base);
+
+  max-width: var(--_size);
+  padding-inline: var(--_px);
+}
+
+@container (min-width: 40rem) {
+  .ps1ui-container {
+    --_size: var(--_size-sm);
+    --_px: var(--_px-sm);
+  }
+}
+
+@container (min-width: 48rem) {
+  .ps1ui-container {
+    --_size: var(--_size-md);
+    --_px: var(--_px-md);
+  }
+}
+
+@container (min-width: 64rem) {
+  .ps1ui-container {
+    --_size: var(--_size-lg);
+    --_px: var(--_px-lg);
+  }
+}
+
+@container (min-width: 80rem) {
+  .ps1ui-container {
+    --_size: var(--_size-xl);
+    --_px: var(--_px-xl);
+  }
+}
+
+/* Input custom properties emitted by Grid.tsx per set responsive-prop
+   breakpoint (`--_grid-<axis>-<bp>`). Registered as non-inheriting for the
+   same reason as Stack — see Stack.css's @property block for the full
+   rationale. Any new responsive axis added to Grid.tsx must add matching
+   @property blocks here. */
+
+@property --_grid-columns-base {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_grid-columns-sm {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_grid-columns-md {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_grid-columns-lg {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_grid-columns-xl {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_grid-gap-base {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_grid-gap-sm {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_grid-gap-md {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_grid-gap-lg {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_grid-gap-xl {
+  syntax: "*";
+  inherits: false;
+}
+
+/* Grid — display:grid + N-column tracks + gap.
+   Establishes an inline-size containment context so descendants respond to
+   Grid's width via `@container` queries. Named `ps1ui-grid` for future
+   targeted queries.
+
+   Responsive values propagate via a CSS custom-property cascade. The
+   component emits `--_grid-columns-{bp}` / `--_grid-gap-{bp}` via inline
+   style (see Grid.tsx). Each `@container (min-width: X)` block below
+   overrides `--_columns` / `--_gap` with the value for the matching
+   breakpoint; the fallback chain in `--_columns-{bp}` inherits the
+   previous breakpoint's effective value so a partial responsive object
+   cascades naturally.
+
+   Breakpoint thresholds mirror --ps1ui-breakpoint-* in tokens.css; kept
+   inline as literal values because `@container` conditions cannot resolve
+   `var()`. Keep them in sync. */
+
+/* Containment side-effect defense (align-self / justify-self / min-width) lives
+   in components.css's shared selector list — see the block header there. */
+
+.ps1ui-grid {
+  container: ps1ui-grid / inline-size;
+  display: grid;
+
+  --_columns-base: var(--_grid-columns-base, 1);
+  --_columns-sm: var(--_grid-columns-sm, var(--_columns-base));
+  --_columns-md: var(--_grid-columns-md, var(--_columns-sm));
+  --_columns-lg: var(--_grid-columns-lg, var(--_columns-md));
+  --_columns-xl: var(--_grid-columns-xl, var(--_columns-lg));
+
+  --_gap-base: var(--_grid-gap-base, var(--ps1ui-space-md));
+  --_gap-sm: var(--_grid-gap-sm, var(--_gap-base));
+  --_gap-md: var(--_grid-gap-md, var(--_gap-sm));
+  --_gap-lg: var(--_grid-gap-lg, var(--_gap-md));
+  --_gap-xl: var(--_grid-gap-xl, var(--_gap-lg));
+
+  --_columns: var(--_columns-base);
+  --_gap: var(--_gap-base);
+
+  grid-template-columns: repeat(var(--_columns), minmax(0, 1fr));
+  gap: var(--_gap);
+}
+
+@container (min-width: 40rem) {
+  .ps1ui-grid {
+    --_columns: var(--_columns-sm);
+    --_gap: var(--_gap-sm);
+  }
+}
+
+@container (min-width: 48rem) {
+  .ps1ui-grid {
+    --_columns: var(--_columns-md);
+    --_gap: var(--_gap-md);
+  }
+}
+
+@container (min-width: 64rem) {
+  .ps1ui-grid {
+    --_columns: var(--_columns-lg);
+    --_gap: var(--_gap-lg);
+  }
+}
+
+@container (min-width: 80rem) {
+  .ps1ui-grid {
+    --_columns: var(--_columns-xl);
+    --_gap: var(--_gap-xl);
+  }
+}
+
+/* Input custom properties emitted by GridItem.tsx per set responsive-prop
+   breakpoint (`--_griditem-col-span-<bp>`). Registered as non-inheriting for
+   the same reason as Stack — see Stack.css's @property block for the full
+   rationale. Any new responsive axis added to GridItem.tsx must add matching
+   @property blocks here. */
+
+@property --_griditem-col-span-base {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_griditem-col-span-sm {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_griditem-col-span-md {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_griditem-col-span-lg {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_griditem-col-span-xl {
+  syntax: "*";
+  inherits: false;
+}
+
+/* GridItem — child of Grid that spans multiple column tracks.
+   GridItem is a leaf: it queries an ancestor containment context (typically
+   the parent Grid, which establishes `container: ps1ui-grid / inline-size`),
+   but does NOT establish one itself. Establishing containment on every
+   GridItem would fragment the query surface for descendants and impose a
+   `contain: layout` side effect on every cell — needless overhead for a
+   component whose only job is to declare its own column span.
+
+   Responsive values propagate via a CSS custom-property cascade. The
+   component emits `--_griditem-col-span-{bp}` via inline style (see
+   GridItem.tsx). Each `@container (min-width: X)` block below overrides
+   `--_col-span` with the value for the matching breakpoint; the fallback
+   chain in `--_col-span-{bp}` inherits the previous breakpoint's effective
+   value so a partial responsive object cascades naturally.
+
+   Breakpoint thresholds mirror --ps1ui-breakpoint-* in tokens.css; kept
+   inline as literal values because `@container` conditions cannot resolve
+   `var()`. Keep them in sync.
+
+   Fallback default: `1` — a bare `<GridItem>` with no colSpan behaves
+   exactly like a plain grid child (`grid-column: span 1`), so wrapping
+   existing Grid children in `<GridItem>` never changes layout by itself.
+
+   Used outside a display:grid parent, `grid-column` is an inert property —
+   the item still renders, the declaration is simply ignored. That matches
+   the "no runtime enforcement of parent type" convention used across the
+   library. */
+
+.ps1ui-griditem {
+  --_col-span-base: var(--_griditem-col-span-base, 1);
+  --_col-span-sm: var(--_griditem-col-span-sm, var(--_col-span-base));
+  --_col-span-md: var(--_griditem-col-span-md, var(--_col-span-sm));
+  --_col-span-lg: var(--_griditem-col-span-lg, var(--_col-span-md));
+  --_col-span-xl: var(--_griditem-col-span-xl, var(--_col-span-lg));
+
+  --_col-span: var(--_col-span-base);
+
+  grid-column: span var(--_col-span);
+}
+
+@container (min-width: 40rem) {
+  .ps1ui-griditem {
+    --_col-span: var(--_col-span-sm);
+  }
+}
+
+@container (min-width: 48rem) {
+  .ps1ui-griditem {
+    --_col-span: var(--_col-span-md);
+  }
+}
+
+@container (min-width: 64rem) {
+  .ps1ui-griditem {
+    --_col-span: var(--_col-span-lg);
+  }
+}
+
+@container (min-width: 80rem) {
+  .ps1ui-griditem {
+    --_col-span: var(--_col-span-xl);
+  }
+}
+
+.ps1ui-input {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  font-family: var(--ps1ui-font-mono);
+  font-size: var(--ps1ui-font-size-sm);
+  line-height: 1.4;
+  color: var(--ps1ui-color-fg);
+  background: var(--ps1ui-color-bg);
+  border: 1px solid var(--ps1ui-color-border-strong);
+  border-radius: var(--ps1ui-radius-md);
+  padding: var(--ps1ui-control-padding-y) var(--ps1ui-space-md);
+  transition:
+    border-color var(--ps1ui-transition-fast),
+    box-shadow var(--ps1ui-transition-fast);
+}
+
+.ps1ui-input::-moz-placeholder {
+  color: var(--ps1ui-color-fg-subtle);
+}
+
+.ps1ui-input::placeholder {
+  color: var(--ps1ui-color-fg-subtle);
+}
+
+.ps1ui-input:hover:not(:disabled) {
+  border-color: var(--ps1ui-color-primary);
+}
+
+.ps1ui-input:focus {
+  outline: none;
+  border-color: var(--ps1ui-color-primary);
+  box-shadow: var(--ps1ui-shadow-focus-ring);
+}
+
+.ps1ui-input:disabled {
+  cursor: not-allowed;
+  color: var(--ps1ui-color-fg-subtle);
+  border-color: var(--ps1ui-color-border);
+  background: var(--ps1ui-color-surface);
+}
+
+.ps1ui-label {
+  display: inline-block;
+  font-family: var(--ps1ui-font-mono);
+  font-size: var(--ps1ui-font-size-sm);
+  font-weight: 500;
+  line-height: 1.6;
+  color: var(--ps1ui-color-fg);
+}
+
+/* List — semantic <ul>/<ol> wrapper with terminal-style markers.
+
+   The global reset in base.css sets `list-style: none` on every <ul>/<ol>,
+   which strips the UA bullet/number glyph. List re-introduces a marker via
+   `::before` on each direct <li> — `-` for unordered, `NN.` for ordered —
+   so the "reset removes bullets" side effect turns into an on-brand
+   terminal glyph rather than a hole.
+
+   The ordered marker uses `counter(list-item)` — the browser-maintained
+   list-item counter that already honours `<ol start>`, `<ol reversed>`,
+   and per-item `<li value>`. Using a hand-rolled `counter-reset` /
+   `counter-increment` would silently ignore all three attributes and
+   diverge from what assistive tech announcing the native counter reads.
+
+   `::before` (not `::marker`) is used because `::marker` styleability
+   lands late in some engines (custom `content` on `::marker` only reached
+   Safari 17) and because the inline-block `::before` + negative margin
+   pattern composes cleanly with block-flow content — a nested <List>
+   inside a <li> flows below the item text, with its own indent stacking
+   on top of the outer's. An earlier `display: grid` layout collided here
+   (nested list fell into the marker column and shoved the outer text
+   right); block flow avoids all of it.
+
+   Forced-colors (Windows High Contrast) repaints the `::before` glyph
+   with `CanvasText` — the marker survives as system-foreground ink; no
+   forced-colors-specific defense is needed. */
+
+.ps1ui-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ps1ui-space-xs);
+  padding: 0;
+  margin: 0;
+  color: var(--ps1ui-color-fg);
+  font-family: var(--ps1ui-font-mono);
+  font-size: var(--ps1ui-font-size-sm);
+  line-height: 1.6;
+}
+
+/* Hanging indent — `padding-left` reserves the marker column; the ::before
+   is inline-block with a negative `margin-left` that pulls it into that
+   reservation. Wrapped item text continues from the padding-left position
+   on line 2+, so long items don't slip back under the marker. Block-flow
+   content nested inside the <li> (a sub <List>, a paragraph, etc.) also
+   respects the padding-left, so it renders indented under the item's text
+   rather than under the marker.
+
+   Marker column widths are hard-coded per variant (not lifted to a custom
+   property) because the same numeric value shows up in `padding-left` on
+   the <li> and in `width` / `margin-left` on the ::before; a shared var
+   would need to be either non-inheriting (breaking pseudo-element access)
+   or inheriting (leaking into descendants and violating the codebase's
+   `--_*` = non-inheriting convention). Duplicating a `1ch` / `3ch`
+   literal is the smaller cost.
+
+   Ordered's `3ch` marker column fits `1.` through `99.`; lists past 99
+   items visually break the right-align column — an acceptable trade for
+   the common < 100 case. */
+
+.ps1ui-list--unordered > li {
+  padding-left: calc(1ch + var(--ps1ui-space-sm));
+}
+
+.ps1ui-list--ordered > li {
+  padding-left: calc(3ch + var(--ps1ui-space-sm));
+}
+
+.ps1ui-list > li::before {
+  display: inline-block;
+  padding-right: var(--ps1ui-space-sm);
+  color: var(--ps1ui-color-fg-muted);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.ps1ui-list--unordered > li::before {
+  content: "-";
+  width: 1ch;
+  margin-left: calc((1ch + var(--ps1ui-space-sm)) * -1);
+}
+
+.ps1ui-list--ordered > li::before {
+  content: counter(list-item) ".";
+  width: 3ch;
+  margin-left: calc((3ch + var(--ps1ui-space-sm)) * -1);
+}
+
+/* Breathing room above a nested <List>. Descendant combinator (not child)
+   so the rule still applies when a consumer wraps the sublist in a layout
+   primitive — `<li><Stack><List>…</List></Stack></li>` gets the same gap
+   as `<li><List>…</List></li>`. The outer flex `gap` on `.ps1ui-list`
+   only reaches direct children, so without this rule any nested list
+   loses breathing room. */
+
+.ps1ui-list li .ps1ui-list {
+  margin-top: var(--ps1ui-space-xs);
+}
+
+/* ListItem — no rules of its own.
+
+   The `.ps1ui-listitem` class (naming parallels `.ps1ui-griditem`) is a
+   stable API hook for consumers. All marker / padding / hanging-indent
+   rules live on `.ps1ui-list > li` in List.css so a bare `<li>` inside
+   `<List>` continues to render identically to `<ListItem>`. Keeping this
+   file present (and imported from components.css) matches the
+   per-component file layout the `new-component` skill enforces. */
+
+.ps1ui-card {
+  background: var(--ps1ui-color-surface);
+  border: 1px solid var(--ps1ui-color-border);
+  border-radius: var(--ps1ui-radius-lg);
+  padding: var(--ps1ui-space-xl);
+  color: var(--ps1ui-color-fg);
+  font-family: var(--ps1ui-font-mono);
+  font-size: var(--ps1ui-font-size-sm);
+  line-height: 1.6;
+}
+
+/* Code — inline code chip.
+
+   Companion to <CodeBlock>, but for inline fragments that live inside body
+   text: `<Text>call <Code>useState()</Code> to add state.</Text>`.
+
+   Font-size is `0.9em` (relative) so the chip auto-scales with the surrounding
+   text. Inside a default `<Text size="sm">` (14 px) the chip renders at
+   ~12.6 px, matching a small-caps rhythm without overriding the parent's
+   size axis. Consumers who want an absolute size still can — an inline
+   `style={{ fontSize: ... }}` outranks this rule.
+
+   `overflow-wrap: anywhere` lets long identifiers (`veryLongIdentifier`,
+   `a.b.c.d`, file paths) break inside a narrow container instead of forcing
+   a horizontal scroll on the parent. `break-word` was rejected because it
+   only fires when NO other soft-wrap opportunity exists on the line — that
+   fails the common "long path inside a short label" case. `anywhere` is
+   the correct choice for inline code fragments where preserving whole-word
+   integrity has no value (code has no natural word breaks).
+
+   Font-family is set explicitly (rather than relying on base.css's `code {
+   font-family: var(--ps1ui-font-mono); }` reset) because Code must render
+   the same way when consumed via the components-only CSS entry, which
+   ships no reset. Same reason Card/Text/etc. redeclare font-family.
+
+   No variant axis: inline code is overwhelmingly used at a single visual
+   weight. Consumers who need a colored fragment can override via inline
+   style (`style={{ color: "var(--ps1ui-color-primary)" }}`) or a caller
+   className — the base chip stays a single API surface.
+
+   `padding-block: 0.1em` assumes the parent's line-height leaves at least
+   ~0.1em of vertical slack per side. Inline padding does NOT extend the
+   line box (per CSS 2.1 §10.8), so an outer `line-height: 1` container
+   would paint the chip's background/border into the adjacent line. All
+   in-repo callers (Text = 1.6, Heading = 1.3) leave ample slack;
+   consumers who tighten line-height below ~1.2 need to widen it around
+   inline `<Code>` themselves. */
+
+.ps1ui-code {
+  font-family: var(--ps1ui-font-mono);
+  font-size: 0.9em;
+  padding: 0.1em 0.35em;
+  background: var(--ps1ui-color-surface);
+  border: 1px solid var(--ps1ui-color-border);
+  border-radius: var(--ps1ui-radius-md);
+  color: var(--ps1ui-color-fg);
+  overflow-wrap: anywhere;
+}
+
+.ps1ui-codeblock {
+  margin: 0;
+  padding: var(--ps1ui-space-md) var(--ps1ui-space-lg);
+  background: var(--ps1ui-color-surface);
+  border: 1px solid var(--ps1ui-color-border);
+  border-radius: var(--ps1ui-radius-lg);
+  color: var(--ps1ui-color-fg);
+  font-family: var(--ps1ui-font-mono);
+  font-size: var(--ps1ui-font-size-sm);
+  line-height: 1.6;
+  overflow-x: auto;
+  -moz-tab-size: 2;
+    -o-tab-size: 2;
+       tab-size: 2;
+  /* Explicit `left` (not `start`) — <pre> defaults to text-align: inherit, so a
+     consumer that centers text on an ancestor would center each code line too.
+     `left` (rather than `start`) is deliberate: source code is inherently LTR
+     and should stay left-aligned even inside an RTL context. */
+  text-align: left;
+  /* Force LTR text flow so code renders identically inside `<html dir="rtl">` /
+     `<div dir="rtl">` ancestors — the character order and the horizontal scroll
+     direction both stay consistent with what a developer expects from code. */
+  direction: ltr;
+  /* Explicit `pre` overrides consumer reset CSS that globally sets
+     `pre { white-space: pre-wrap; }` — wrapping would defeat overflow-x: auto
+     and collapse the scrollable-region focus semantics. Per-instance opt-in
+     to wrapping is still possible via `style={{ whiteSpace: "pre-wrap" }}`. */
+  white-space: pre;
+}
+
+.ps1ui-codeblock:focus-visible {
+  outline: none;
+  border-color: var(--ps1ui-color-primary);
+  box-shadow: var(--ps1ui-shadow-focus-ring);
+}
+
+.ps1ui-codeblock code {
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  background: none;
+}
+
+/* Prism token classes, mapped to ps1ui code palette (see tokens.css).
+   Refractor emits hast <span class="token <type>"> nodes; keep this list
+   in sync with the token types produced by Prism grammars. */
+
+.ps1ui-codeblock .token.comment,
+.ps1ui-codeblock .token.prolog,
+.ps1ui-codeblock .token.doctype,
+.ps1ui-codeblock .token.cdata {
+  color: var(--ps1ui-code-comment);
+  font-style: italic;
+}
+
+.ps1ui-codeblock .token.punctuation,
+.ps1ui-codeblock .token.operator {
+  color: var(--ps1ui-code-punctuation);
+}
+
+.ps1ui-codeblock .token.property,
+.ps1ui-codeblock .token.tag,
+.ps1ui-codeblock .token.symbol {
+  color: var(--ps1ui-code-tag);
+}
+
+.ps1ui-codeblock .token.attr-name {
+  color: var(--ps1ui-code-attr);
+}
+
+.ps1ui-codeblock .token.string,
+.ps1ui-codeblock .token.char,
+.ps1ui-codeblock .token.url,
+.ps1ui-codeblock .token.attr-value,
+.ps1ui-codeblock .token.regex {
+  color: var(--ps1ui-code-string);
+}
+
+/* diff: line-level markers get their own hue so "+" reads as added (green) and
+   "-" reads as removed (rose). Distinct from tag/string groups on purpose. */
+
+.ps1ui-codeblock .token.inserted {
+  color: var(--ps1ui-code-inserted);
+}
+
+.ps1ui-codeblock .token.deleted {
+  color: var(--ps1ui-code-deleted);
+}
+
+.ps1ui-codeblock .token.number,
+.ps1ui-codeblock .token.boolean,
+.ps1ui-codeblock .token.constant,
+.ps1ui-codeblock .token.entity {
+  color: var(--ps1ui-code-constant);
+}
+
+.ps1ui-codeblock .token.class-name,
+.ps1ui-codeblock .token.builtin {
+  color: var(--ps1ui-code-type);
+}
+
+.ps1ui-codeblock .token.function,
+.ps1ui-codeblock .token.method {
+  color: var(--ps1ui-code-function);
+}
+
+.ps1ui-codeblock .token.keyword,
+.ps1ui-codeblock .token.selector,
+.ps1ui-codeblock .token.atrule,
+.ps1ui-codeblock .token.important {
+  color: var(--ps1ui-code-keyword);
+}
+
+.ps1ui-codeblock .token.important,
+.ps1ui-codeblock .token.bold {
+  font-weight: 600;
+}
+
+.ps1ui-codeblock .token.italic {
+  font-style: italic;
+}
+
+.ps1ui-details {
+  background: var(--ps1ui-color-surface);
+  border: 1px solid var(--ps1ui-color-border);
+  border-radius: var(--ps1ui-radius-md);
+  color: var(--ps1ui-color-fg);
+  font-family: var(--ps1ui-font-mono);
+  font-size: var(--ps1ui-font-size-sm);
+  line-height: 1.6;
+}
+
+.ps1ui-details__summary {
+  padding: var(--ps1ui-control-padding-y) var(--ps1ui-space-md);
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  color: var(--ps1ui-color-fg);
+  border-radius: var(--ps1ui-radius-md);
+  transition:
+    color var(--ps1ui-transition-fast),
+    box-shadow var(--ps1ui-transition-fast);
+  /* base.css's reset keeps summary's default `display: list-item`; kill the
+     marker so our ::before glyph is the only disclosure indicator. */
+  list-style: none;
+}
+
+/* Older WebKit (Safari < 17) renders a native disclosure triangle via its
+   private ::-webkit-details-marker pseudo — `list-style: none` alone doesn't
+   suppress it there. Explicitly hide it so ::before is the only glyph. */
+
+.ps1ui-details__summary::-webkit-details-marker {
+  display: none;
+}
+
+/* Terminal-style disclosure marker: `▸` when closed, `▾` when open. Fixed
+   inline-block width so the summary text baseline stays put across states —
+   the two glyphs don't measure identically in the JetBrains Mono fallback
+   monospace stack. Colored with fg-muted so the arrow reads as chrome, not
+   content; ::before is not exposed to the a11y tree so this is safe. */
+
+.ps1ui-details__summary::before {
+  content: "▸";
+  display: inline-block;
+  width: 1.25ch;
+  margin-right: var(--ps1ui-space-sm);
+  color: var(--ps1ui-color-fg-muted);
+}
+
+.ps1ui-details[open] > .ps1ui-details__summary::before {
+  content: "▾";
+}
+
+.ps1ui-details__summary:hover {
+  color: var(--ps1ui-color-primary);
+}
+
+/* Focus ring lives on the summary (the interactive element), not on details
+   itself — .ps1ui-details__summary:focus-visible is registered in
+   styles/components.css's forced-colors grouped selector so the box-shadow
+   ring falls back to a real outline in high-contrast mode. */
+
+.ps1ui-details__summary:focus-visible {
+  outline: none;
+  box-shadow: var(--ps1ui-shadow-focus-ring);
+}
+
+.ps1ui-details__body {
+  padding: var(--ps1ui-space-md);
+  border-top: 1px solid var(--ps1ui-color-border);
+}
+
+/* Input custom properties emitted by Stack.tsx per set responsive-prop
+   breakpoint (`--_stack-<axis>-<bp>`). Registered as non-inheriting so a
+   parent Stack's `--_stack-gap-md` (etc.) does NOT cascade into a nested
+   Stack — CSS custom properties inherit by default (css-variables §2), and
+   without this guard the `var(--_stack-<axis>-<bp>, fallback)` chain below
+   picks up the ancestor's value on every descendant and silently overrides
+   the child's own responsive resolution when the matching @container query
+   fires. `syntax: "*"` lets us omit `initial-value` — the default value is
+   the guaranteed-invalid value, which makes the fallback branch of each
+   `var()` in the intermediate chain fire exactly as intended. Only inline
+   styles emitted by Stack.tsx (author-origin, inline specificity) set these
+   per-element, which beats the @property registration in the cascade. If a
+   new responsive axis is added to Stack.tsx, a matching @property block MUST
+   be added here; the nested-Stack regression tests in Stack.test.tsx cover
+   every axis so a forgotten one trips CI immediately. `unset` / `revert` /
+   `revert-layer` are NOT interchangeable with this approach for custom
+   properties — they resolve to the inherited value, defeating the block. */
+
+@property --_stack-direction-base {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-direction-sm {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-direction-md {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-direction-lg {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-direction-xl {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-gap-base {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-gap-sm {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-gap-md {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-gap-lg {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-gap-xl {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-align-base {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-align-sm {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-align-md {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-align-lg {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-align-xl {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-justify-base {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-justify-sm {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-justify-md {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-justify-lg {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-justify-xl {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-wrap-base {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-wrap-sm {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-wrap-md {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-wrap-lg {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_stack-wrap-xl {
+  syntax: "*";
+  inherits: false;
+}
+
+/* Stack — flexbox composition of children along one axis.
+   Establishes an inline-size containment context so descendants respond to
+   Stack's width via `@container` queries. Named `ps1ui-stack` for future
+   targeted queries.
+
+   Responsive values propagate via a CSS custom-property cascade. The
+   component emits `--_stack-{axis}-{bp}` via inline style (see Stack.tsx).
+   Each `@container (min-width: X)` block below overrides `--_{axis}` with
+   the value for the matching breakpoint; the fallback chain in
+   `--_{axis}-{bp}` inherits the previous breakpoint's effective value so a
+   partial responsive object cascades naturally.
+
+   Breakpoint thresholds mirror --ps1ui-breakpoint-* in tokens.css; kept
+   inline as literal values because `@container` conditions cannot resolve
+   `var()`. Keep them in sync.
+
+   Fallback defaults:
+   - direction: `column` — vertical stacks are the mobile-first default
+     for a column-major layout primitive
+   - gap: `--ps1ui-space-md` — matches Container's default padding scale
+   - align: `normal` — the CSS box-alignment initial value; in a flex
+     context, `normal` behaves as `stretch`, matching Flexbox's default
+   - justify: `normal` — behaves as `flex-start` in a flex context
+   - wrap: `nowrap` — the flex-wrap CSS initial value
+   Each default matches the property's own initial-value behaviour so
+   omitting the corresponding prop is equivalent to not writing the
+   declaration at all. */
+
+/* Containment side-effect defense (align-self / justify-self / min-width) lives
+   in components.css's shared selector list — see the block header there. */
+
+.ps1ui-stack {
+  container: ps1ui-stack / inline-size;
+  display: flex;
+
+  --_direction-base: var(--_stack-direction-base, column);
+  --_direction-sm: var(--_stack-direction-sm, var(--_direction-base));
+  --_direction-md: var(--_stack-direction-md, var(--_direction-sm));
+  --_direction-lg: var(--_stack-direction-lg, var(--_direction-md));
+  --_direction-xl: var(--_stack-direction-xl, var(--_direction-lg));
+
+  --_gap-base: var(--_stack-gap-base, var(--ps1ui-space-md));
+  --_gap-sm: var(--_stack-gap-sm, var(--_gap-base));
+  --_gap-md: var(--_stack-gap-md, var(--_gap-sm));
+  --_gap-lg: var(--_stack-gap-lg, var(--_gap-md));
+  --_gap-xl: var(--_stack-gap-xl, var(--_gap-lg));
+
+  --_align-base: var(--_stack-align-base, normal);
+  --_align-sm: var(--_stack-align-sm, var(--_align-base));
+  --_align-md: var(--_stack-align-md, var(--_align-sm));
+  --_align-lg: var(--_stack-align-lg, var(--_align-md));
+  --_align-xl: var(--_stack-align-xl, var(--_align-lg));
+
+  --_justify-base: var(--_stack-justify-base, normal);
+  --_justify-sm: var(--_stack-justify-sm, var(--_justify-base));
+  --_justify-md: var(--_stack-justify-md, var(--_justify-sm));
+  --_justify-lg: var(--_stack-justify-lg, var(--_justify-md));
+  --_justify-xl: var(--_stack-justify-xl, var(--_justify-lg));
+
+  --_wrap-base: var(--_stack-wrap-base, nowrap);
+  --_wrap-sm: var(--_stack-wrap-sm, var(--_wrap-base));
+  --_wrap-md: var(--_stack-wrap-md, var(--_wrap-sm));
+  --_wrap-lg: var(--_stack-wrap-lg, var(--_wrap-md));
+  --_wrap-xl: var(--_stack-wrap-xl, var(--_wrap-lg));
+
+  --_direction: var(--_direction-base);
+  --_gap: var(--_gap-base);
+  --_align: var(--_align-base);
+  --_justify: var(--_justify-base);
+  --_wrap: var(--_wrap-base);
+
+  flex-direction: var(--_direction);
+  gap: var(--_gap);
+  align-items: var(--_align);
+  justify-content: var(--_justify);
+  flex-wrap: var(--_wrap);
+}
+
+@container (min-width: 40rem) {
+  .ps1ui-stack {
+    --_direction: var(--_direction-sm);
+    --_gap: var(--_gap-sm);
+    --_align: var(--_align-sm);
+    --_justify: var(--_justify-sm);
+    --_wrap: var(--_wrap-sm);
+  }
+}
+
+@container (min-width: 48rem) {
+  .ps1ui-stack {
+    --_direction: var(--_direction-md);
+    --_gap: var(--_gap-md);
+    --_align: var(--_align-md);
+    --_justify: var(--_justify-md);
+    --_wrap: var(--_wrap-md);
+  }
+}
+
+@container (min-width: 64rem) {
+  .ps1ui-stack {
+    --_direction: var(--_direction-lg);
+    --_gap: var(--_gap-lg);
+    --_align: var(--_align-lg);
+    --_justify: var(--_justify-lg);
+    --_wrap: var(--_wrap-lg);
+  }
+}
+
+@container (min-width: 80rem) {
+  .ps1ui-stack {
+    --_direction: var(--_direction-xl);
+    --_gap: var(--_gap-xl);
+    --_align: var(--_align-xl);
+    --_justify: var(--_justify-xl);
+    --_wrap: var(--_wrap-xl);
+  }
+}
+
+/* Table — semantic <table> with terminal-style grid borders, wrapped in a
+   horizontal-scroll container.
+
+   Scroll wrapper: `display: table` boxes don't honor overflow, so Table.tsx
+   renders a dedicated `__scroller` div with `overflow-x: auto`. It follows
+   CodeBlock's keyboard contract — tabIndex=0 only while the table actually
+   overflows — and reuses the shared box-shadow focus ring, so
+   `.ps1ui-table__scroller:focus-visible` is registered in the forced-colors
+   grouped selector in styles/components.css (box-shadow is force-stripped in
+   high-contrast mode; the grouped rule restores a real outline).
+
+   Grid borders: `border-collapse: collapse` + a uniform 1px cell border in
+   --ps1ui-color-border draw the closed single-stroke grid a terminal
+   box-drawing table (┌─┬─┐) renders — collapsing is what merges adjacent
+   cell edges into one shared rule. The header row separates on two axes:
+   a surface background and a border-strong bottom rule. That rule is
+   declared on the <th> (cell origin) deliberately — in border-collapse
+   conflict resolution, equal-width equal-style borders from two adjacent
+   cells resolve to the topmost cell's color, so the th's strong bottom edge
+   wins over the first body row's plain top edge. Declaring it on the row or
+   row group instead would lose (cell origin outranks both).
+
+   All rules target `.ps1ui-table <element>` selectors, not the
+   ps1ui-thead/tbody/tr/th/td wrapper classes: a bare <thead>/<tr>/<th>/<td>
+   inside <Table> must render identically to the wrapper components (same
+   contract as `.ps1ui-list > li` vs ListItem). The wrapper classes are
+   stable hooks only.
+
+   Self-sufficiency: `border-collapse` and the <th> font-weight/text-align
+   neutralizations are declared here even though base.css's reset also
+   collapses table borders — the components.css entry ships without the
+   reset, and UA <th> defaults (bold, center) would leak through. */
+
+.ps1ui-table__scroller {
+  overflow-x: auto;
+}
+
+.ps1ui-table__scroller:focus-visible {
+  outline: none;
+  box-shadow: var(--ps1ui-shadow-focus-ring);
+}
+
+/* No width override — the UA's shrink-to-fit keeps the grid hugging its
+   content like a box-drawing table. Call sites that want a full-bleed table
+   (e.g. a props table filling a docs column) opt in with `width: 100%`. */
+
+.ps1ui-table {
+  border-collapse: collapse;
+  color: var(--ps1ui-color-fg);
+  font-family: var(--ps1ui-font-mono);
+  font-size: var(--ps1ui-font-size-sm);
+  line-height: 1.6;
+}
+
+.ps1ui-table th,
+.ps1ui-table td {
+  border: 1px solid var(--ps1ui-color-border);
+  padding: var(--ps1ui-space-sm) var(--ps1ui-space-md);
+  /* `start` (not `left`): tables carry natural-language content and should
+     mirror in RTL contexts — unlike CodeBlock, which pins `left` because
+     source code stays LTR. Explicit on both cell kinds because the UA
+     default for <th> is center. */
+  text-align: start;
+  /* Multi-line cells align their first lines instead of drifting toward
+     vertical centers of unequal-height neighbors. */
+  vertical-align: top;
+}
+
+.ps1ui-table th {
+  background: var(--ps1ui-color-surface);
+  font-weight: 600;
+}
+
+.ps1ui-table thead th {
+  border-bottom-color: var(--ps1ui-color-border-strong);
+}
+
+/* Thead — no rules of its own.
+
+   The `.ps1ui-thead` class is a stable API hook for consumers. All header
+   rendering (surface background, strong bottom rule) lives on
+   `.ps1ui-table thead th` in Table.css so a bare <thead> inside <Table>
+   continues to render identically to <Thead>. Keeping this file present
+   (and imported from components.css) matches the per-component file layout
+   the `new-component` skill enforces — same precedent as ListItem.css. */
+
+/* Tbody — no rules of its own.
+
+   The `.ps1ui-tbody` class is a stable API hook for consumers. All cell
+   rendering lives on `.ps1ui-table th / td` in Table.css so a bare <tbody>
+   inside <Table> continues to render identically to <Tbody>. Keeping this
+   file present (and imported from components.css) matches the per-component
+   file layout the `new-component` skill enforces — same precedent as
+   ListItem.css. */
+
+/* Tr — no rules of its own.
+
+   The `.ps1ui-tr` class is a stable API hook for consumers. All cell
+   rendering lives on `.ps1ui-table th / td` in Table.css so a bare <tr>
+   inside <Table> continues to render identically to <Tr>. Keeping this file
+   present (and imported from components.css) matches the per-component file
+   layout the `new-component` skill enforces — same precedent as
+   ListItem.css. */
+
+/* Th — no rules of its own.
+
+   The `.ps1ui-th` class is a stable API hook for consumers. All header-cell
+   rendering (grid border, padding, surface background, weight) lives on
+   `.ps1ui-table th` in Table.css so a bare <th> inside <Table> continues to
+   render identically to <Th>. Keeping this file present (and imported from
+   components.css) matches the per-component file layout the `new-component`
+   skill enforces — same precedent as ListItem.css. */
+
+/* Td — no rules of its own.
+
+   The `.ps1ui-td` class is a stable API hook for consumers. All data-cell
+   rendering (grid border, padding, alignment) lives on `.ps1ui-table td` in
+   Table.css so a bare <td> inside <Table> continues to render identically to
+   <Td>. Keeping this file present (and imported from components.css) matches
+   the per-component file layout the `new-component` skill enforces — same
+   precedent as ListItem.css. */
+
+/* Input custom properties emitted by Text.tsx per set responsive-prop
+   breakpoint (`--_text-<axis>-<bp>`). Registered as non-inheriting for the
+   same reason as Stack — see Stack.css's @property block for the full
+   rationale. */
+
+@property --_text-size-base {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_text-size-sm {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_text-size-md {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_text-size-lg {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_text-size-xl {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_text-weight-base {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_text-weight-sm {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_text-weight-md {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_text-weight-lg {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_text-weight-xl {
+  syntax: "*";
+  inherits: false;
+}
+
+/* Text — typography primitive.
+   Text is a leaf component: it queries an ancestor containment context (a
+   PS1Root / Container / Grid / Stack), but does NOT establish one itself.
+   Establishing containment on every Text would fragment the query surface
+   for descendants and impose a `contain: layout` side effect on every
+   paragraph — needless overhead for a component that carries no children
+   worth measuring.
+
+   Responsive values propagate via a CSS custom-property cascade. The
+   component emits `--_text-size-{bp}` / `--_text-weight-{bp}` via inline
+   style. Each `@container (min-width: X)` block below overrides `--_size`
+   / `--_weight` with the value for the matching breakpoint; the fallback
+   chain in `--_size-{bp}` inherits the previous breakpoint's effective
+   value so a partial responsive object cascades naturally.
+
+   `weight` fallback is `initial` (= normal / 400). Consumers who want bold
+   text pass `weight="bold"` explicitly; a bare `<Text as="strong">` renders
+   as normal weight (Text is the source of truth for its own typography,
+   NOT the UA `<strong>` style). Users who need the UA-strong appearance
+   should pair `as="strong"` with `weight="bold"` for consistency across
+   engines. */
+
+.ps1ui-text {
+  margin: 0;
+  font-family: var(--ps1ui-font-mono);
+  line-height: 1.6;
+
+  --_size-base: var(--_text-size-base, var(--ps1ui-font-size-sm));
+  --_size-sm: var(--_text-size-sm, var(--_size-base));
+  --_size-md: var(--_text-size-md, var(--_size-sm));
+  --_size-lg: var(--_text-size-lg, var(--_size-md));
+  --_size-xl: var(--_text-size-xl, var(--_size-lg));
+
+  --_weight-base: var(--_text-weight-base, initial);
+  --_weight-sm: var(--_text-weight-sm, var(--_weight-base));
+  --_weight-md: var(--_text-weight-md, var(--_weight-sm));
+  --_weight-lg: var(--_text-weight-lg, var(--_weight-md));
+  --_weight-xl: var(--_text-weight-xl, var(--_weight-lg));
+
+  --_size: var(--_size-base);
+  --_weight: var(--_weight-base);
+
+  font-size: var(--_size);
+  font-weight: var(--_weight);
+}
+
+@container (min-width: 40rem) {
+  .ps1ui-text {
+    --_size: var(--_size-sm);
+    --_weight: var(--_weight-sm);
+  }
+}
+
+@container (min-width: 48rem) {
+  .ps1ui-text {
+    --_size: var(--_size-md);
+    --_weight: var(--_weight-md);
+  }
+}
+
+@container (min-width: 64rem) {
+  .ps1ui-text {
+    --_size: var(--_size-lg);
+    --_weight: var(--_weight-lg);
+  }
+}
+
+@container (min-width: 80rem) {
+  .ps1ui-text {
+    --_size: var(--_size-xl);
+    --_weight: var(--_weight-xl);
+  }
+}
+
+.ps1ui-text--truncate {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.ps1ui-text--truncate-inline {
+  display: inline-block;
+}
+
+.ps1ui-text--body {
+  color: var(--ps1ui-color-fg);
+}
+
+.ps1ui-text--muted {
+  color: var(--ps1ui-color-fg-muted);
+}
+
+.ps1ui-text--subtle {
+  color: var(--ps1ui-color-fg-subtle);
+}
+
+.ps1ui-text--primary {
+  color: var(--ps1ui-color-primary);
+}
+
+.ps1ui-text--accent {
+  color: var(--ps1ui-color-accent);
+}
+
+/* Input custom properties emitted by Heading.tsx per set responsive-prop
+   breakpoint (`--_heading-<axis>-<bp>`). Registered as non-inheriting for
+   the same reason as Stack — see Stack.css's @property block for the full
+   rationale. */
+
+@property --_heading-size-base {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_heading-size-sm {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_heading-size-md {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_heading-size-lg {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_heading-size-xl {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_heading-weight-base {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_heading-weight-sm {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_heading-weight-md {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_heading-weight-lg {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_heading-weight-xl {
+  syntax: "*";
+  inherits: false;
+}
+
+/* Heading — semantic heading primitive with level-driven typography.
+   Like Text, Heading is a leaf: it queries an ancestor containment context
+   but does not establish one itself. See Text.css for the rationale.
+
+   Responsive values propagate via a CSS custom-property cascade. The
+   component emits `--_heading-size-{bp}` / `--_heading-weight-{bp}` via
+   inline style, always at least at `-base` (Heading.tsx normalizes the
+   level's default into the base breakpoint if the caller didn't supply
+   one). Each `@container (min-width: X)` block below overrides `--_size`
+   / `--_weight` for the matching breakpoint; the fallback chain inherits
+   the previous breakpoint's effective value so a partial responsive object
+   cascades naturally.
+
+   Heading.tsx contract: `--_heading-size-base` and `--_heading-weight-base`
+   are ALWAYS emitted via inline style (see Heading.tsx — `size` and
+   `weight` both pass through `withResponsiveBase(..., LEVEL_DEFAULTS[level].
+   size|weight)`, which guarantees the `base` breakpoint is populated for
+   every render). The `--_size-base` / `--_weight-base` fallback branches
+   below are therefore defensive floors only — they should never be reached
+   in normal rendering. If Heading.tsx ever changes to NOT normalize the
+   base breakpoint, these floors keep the component in a legible default
+   (font-size sm, font-weight normal). Text.css uses a live fallback path
+   because Text.tsx does not normalize its size/weight props. */
+
+.ps1ui-heading {
+  margin: 0;
+  font-family: var(--ps1ui-font-mono);
+  color: var(--ps1ui-color-fg);
+  line-height: 1.3;
+
+  /* Defensive-floor fallbacks. Never reached under normal render — see
+     the comment above. Kept as font-size sm / weight normal so a
+     bypassed Heading.tsx contract still yields legible output. */
+  --_size-base: var(--_heading-size-base, var(--ps1ui-font-size-sm));
+  --_size-sm: var(--_heading-size-sm, var(--_size-base));
+  --_size-md: var(--_heading-size-md, var(--_size-sm));
+  --_size-lg: var(--_heading-size-lg, var(--_size-md));
+  --_size-xl: var(--_heading-size-xl, var(--_size-lg));
+
+  --_weight-base: var(--_heading-weight-base, normal);
+  --_weight-sm: var(--_heading-weight-sm, var(--_weight-base));
+  --_weight-md: var(--_heading-weight-md, var(--_weight-sm));
+  --_weight-lg: var(--_heading-weight-lg, var(--_weight-md));
+  --_weight-xl: var(--_heading-weight-xl, var(--_weight-lg));
+
+  --_size: var(--_size-base);
+  --_weight: var(--_weight-base);
+
+  font-size: var(--_size);
+  font-weight: var(--_weight);
+}
+
+@container (min-width: 40rem) {
+  .ps1ui-heading {
+    --_size: var(--_size-sm);
+    --_weight: var(--_weight-sm);
+  }
+}
+
+@container (min-width: 48rem) {
+  .ps1ui-heading {
+    --_size: var(--_size-md);
+    --_weight: var(--_weight-md);
+  }
+}
+
+@container (min-width: 64rem) {
+  .ps1ui-heading {
+    --_size: var(--_size-lg);
+    --_weight: var(--_weight-lg);
+  }
+}
+
+@container (min-width: 80rem) {
+  .ps1ui-heading {
+    --_size: var(--_size-xl);
+    --_weight: var(--_weight-xl);
+  }
+}
+
+/* Containment side-effect defense — applied uniformly to every primitive that
+   establishes a `container-type: inline-size` context (i.e. every layout
+   primitive whose responsive props drive `@container` queries).
+
+   `container-type: inline-size` implies `contain: inline-size`, which treats
+   the element's intrinsic inline-size as 0 for parent sizing. Placing any of
+   these primitives inside a shrink-to-fit flex/grid parent (`align-items:
+   flex-start`, `justify-items: start`, etc.) would otherwise collapse them to
+   0 wide, silently degrading every `@container`-driven descendant.
+
+   `align-self: stretch` and `justify-self: stretch` force fill-cross-axis /
+   fill-inline-track in flex and grid contexts respectively (both no-ops in
+   block context). `min-width: 0` lets the primitive shrink below content-min
+   inside a narrow row parent so inner overflow-scroll surfaces (CodeBlock)
+   take over instead of bursting the row open.
+
+   Adding a new responsive-container primitive means adding its class to this
+   selector list — that's the load-bearing invariant. Per-primitive regression
+   tests (Stack.test.tsx / Container.test.tsx / Grid.test.tsx / PS1Root.test.tsx's
+   "resists collapse via align-self: stretch in shrink-wrap flex parent") catch
+   accidental removal. */
+
+.ps1ui-root,
+.ps1ui-container,
+.ps1ui-grid,
+.ps1ui-stack {
+  align-self: stretch;
+  justify-self: stretch;
+  min-width: 0;
+}
+
+/* forced-colors (Windows High Contrast) strips box-shadow, so every component
+   whose focus ring is box-shadow-based needs a real outline there — one rule,
+   one owner, same precedent as the containment grouped selector above. Add new
+   box-shadow-focus components to this list. Component-specific forced-colors
+   adjustments (e.g. Checkbox's indeterminate bar) stay in their own CSS.
+   Tested in src/styles/forced-colors.test.tsx. */
+
+@media (forced-colors: active) {
+  .ps1ui-button:focus-visible,
+  .ps1ui-checkbox:focus-visible,
+  .ps1ui-codeblock:focus-visible,
+  .ps1ui-details__summary:focus-visible,
+  .ps1ui-input:focus,
+  .ps1ui-table__scroller:focus-visible {
+    outline: 2px solid CanvasText;
+    outline-offset: 2px;
+  }
+}