actual-css 0.2.0 → 0.3.1

package/dist/optional.css

@@ -0,0 +1,1048 @@
+/*
+ * One-time code input with visual cells and one native input.
+ *
+ * Add one direct span per accepted character. The cells determine the
+ * component width; the overlaid input remains the only interactive control.
+ *
+ * Public hooks:
+ * --otp-cell-size
+ * --otp-gap
+ * --otp-font-size
+ *
+ * Internal:
+ * --otp-cell-border
+ * --otp-cell-bg
+ */
+.otp {
+  --otp-cell-size: var(--control-size);
+  --otp-gap: var(--space-10);
+  --otp-font-size: 1.5rem;
+  --otp-cell-border: var(--border);
+  --otp-cell-bg: var(--surface);
+
+  position: relative;
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: var(--otp-cell-size);
+  inline-size: fit-content;
+  max-inline-size: 100%;
+  gap: var(--otp-gap);
+  border-radius: var(--radius);
+  direction: ltr;
+}
+
+.otp > span {
+  inline-size: var(--otp-cell-size);
+  block-size: var(--otp-cell-size);
+  border: var(--border-width) solid var(--otp-cell-border);
+  border-radius: var(--radius);
+  background: var(--otp-cell-bg);
+  transition:
+    border-color var(--duration),
+    background-color var(--duration),
+    box-shadow var(--duration);
+}
+
+/* The native input owns focus, selection, autofill, paste, and one-time-code
+   integration. Its spacing aligns monospace glyphs with the visual cells. */
+.otp > input {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  margin: 0;
+  padding: 0 calc((var(--otp-cell-size) - 1ch) / 2);
+  border: 0;
+  outline: 2px solid transparent;
+  box-shadow: none;
+  background: transparent;
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: var(--otp-font-size);
+  font-variant-numeric: tabular-nums;
+  line-height: var(--otp-cell-size);
+  letter-spacing: calc(var(--otp-cell-size) + var(--otp-gap) - 1ch);
+  text-align: start;
+  appearance: none;
+}
+
+.otp:focus-within {
+  box-shadow: var(--focus-ring-shadow);
+}
+
+.otp > input:focus ~ span {
+  --otp-cell-border: var(--focus);
+}
+
+.otp > input[aria-invalid="true"] ~ span,
+.needs-validation.was-validated .otp > input:invalid ~ span {
+  --otp-cell-border: var(--danger);
+}
+
+@supports selector(:user-invalid) {
+  .needs-validation .otp > input:user-invalid ~ span {
+    --otp-cell-border: var(--danger);
+  }
+}
+
+.otp > input:disabled {
+  color: var(--state-disabled);
+  cursor: not-allowed;
+}
+
+.otp > input:disabled ~ span {
+  --otp-cell-bg: var(--surface-subtle);
+
+  opacity: var(--disabled-opacity);
+}
+
+@media (forced-colors: active) {
+  .otp:focus-within {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
+    box-shadow: none;
+  }
+
+  .otp > input:focus ~ span {
+    --otp-cell-border: Highlight;
+  }
+
+  .otp > input[aria-invalid="true"] ~ span,
+  .needs-validation.was-validated .otp > input:invalid ~ span {
+    --otp-cell-border: Mark;
+  }
+}
+
+/*
+ * Message rows composed from an optional avatar, metadata, and bubble.
+ *
+ * Public hooks:
+ * --chat-gap
+ * --chat-max-size
+ *
+ * Internal:
+ * --chat-bubble-bg
+ * --chat-bubble-fg
+ * --chat-bubble-border
+ */
+.chat {
+  --chat-gap: var(--space-30);
+  --chat-max-size: min(85%, 40rem);
+
+  display: grid;
+  grid-auto-rows: min-content;
+  column-gap: var(--chat-gap);
+}
+
+.chat-start {
+  grid-template-columns: auto minmax(0, 1fr);
+  justify-items: start;
+}
+
+.chat-end {
+  grid-template-columns: minmax(0, 1fr) auto;
+  justify-items: end;
+}
+
+.chat-avatar {
+  grid-row: 1 / span 3;
+  align-self: end;
+}
+
+.chat-start > .chat-avatar {
+  grid-column: 1;
+}
+
+.chat-end > .chat-avatar {
+  grid-column: 2;
+}
+
+.chat-header,
+.chat-footer {
+  display: flex;
+  gap: var(--space-10);
+  color: var(--text-muted);
+  font-size: var(--font-size-xs);
+}
+
+.chat-start > :is(.chat-header, .chat-bubble, .chat-footer) {
+  grid-column: 2;
+}
+
+.chat-end > :is(.chat-header, .chat-bubble, .chat-footer) {
+  grid-column: 1;
+}
+
+/* Intent boundary — an outer intent does not tint nested messages. */
+:where(.chat-bubble) {
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+}
+
+.chat-bubble {
+  --chat-bubble-bg: var(--ui-bg, var(--intent, var(--surface-subtle)));
+  --chat-bubble-fg: var(--ui-fg, var(--intent-fg, var(--text)));
+  --chat-bubble-border: var(--ui-border, transparent);
+
+  inline-size: fit-content;
+  max-inline-size: var(--chat-max-size);
+  padding: var(--space-20) var(--space-30);
+  border: var(--border-width) solid var(--chat-bubble-border);
+  border-radius: var(--radius-lg);
+  background: var(--chat-bubble-bg);
+  color: var(--chat-bubble-fg);
+  overflow-wrap: anywhere;
+}
+
+.chat-start > .chat-bubble {
+  border-end-start-radius: var(--radius-sm);
+}
+
+.chat-end > .chat-bubble {
+  border-end-end-radius: var(--radius-sm);
+}
+
+/* Remove the reserved avatar gutter when a message has no avatar. This is a
+   cosmetic enhancement; the two-column baseline remains fully readable. */
+@supports selector(:has(*)) {
+  .chat:not(:has(> .chat-avatar)) {
+    column-gap: 0;
+  }
+}
+
+@media (forced-colors: active) {
+  .chat-bubble {
+    border-color: CanvasText;
+  }
+}
+
+/*
+ * Decorative intent-colored frame for one direct child.
+ *
+ * Public hooks:
+ * --aura-color
+ * --aura-width
+ * --aura-blur
+ * --aura-radius
+ * --aura-duration
+ */
+@property --aura-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+
+/* Intent boundary — an outer intent does not tint nested aura frames. */
+:where(.aura) {
+  --intent: initial;
+  --intent-fg: initial;
+}
+
+.aura {
+  --aura-color: var(--intent, var(--primary));
+  --aura-width: 2px;
+  --aura-blur: 0.75rem;
+  --aura-radius: var(--radius-lg);
+  --aura-duration: 6s;
+
+  position: relative;
+  isolation: isolate;
+  display: inline-grid;
+  padding: var(--aura-width);
+  border-radius: calc(var(--aura-radius) + var(--aura-width));
+  background: var(--aura-color);
+  background: conic-gradient(from var(--aura-angle), transparent 0 65%, var(--aura-color));
+}
+
+.aura::before {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  border-radius: inherit;
+  background: inherit;
+  filter: blur(var(--aura-blur));
+  opacity: 0.45;
+  pointer-events: none;
+  content: "";
+}
+
+.aura > * {
+  position: relative;
+}
+
+.aura-glow {
+  background: var(--aura-color);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .aura:not(.aura-glow) {
+    animation: aura-rotate var(--aura-duration) linear infinite;
+  }
+}
+
+@keyframes aura-rotate {
+  to {
+    --aura-angle: 360deg;
+  }
+}
+
+@supports selector(:has(*)) {
+  .aura:has(> .btn) {
+    --aura-radius: var(--radius);
+  }
+
+  .aura:has(> :is(.card, .alert)) {
+    --aura-radius: var(--radius-lg);
+  }
+
+  .aura:has(> .badge) {
+    --aura-radius: var(--radius-full);
+  }
+}
+
+@media (forced-colors: active) {
+  .aura {
+    background: CanvasText;
+  }
+
+  .aura::before {
+    display: none;
+  }
+}
+
+/*
+ * Fixed floating action placement and a native-details speed dial.
+ * Button owns the action's size, shape, and intent; FAB only owns placement.
+ *
+ * Public hooks:
+ * --fab-offset
+ * --fab-gap
+ */
+.fab {
+  --fab-offset: var(--space-40);
+  --fab-gap: var(--space-20);
+
+  position: fixed;
+  z-index: var(--z-menu);
+  inset-block-end: max(var(--fab-offset), env(safe-area-inset-bottom));
+  inset-inline-end: var(--fab-offset);
+}
+
+.fab > summary {
+  list-style: none;
+  cursor: pointer;
+}
+
+.fab > summary::-webkit-details-marker {
+  display: none;
+}
+
+/* A lone decorative plus can communicate the open/close state without
+   requiring a second icon or JavaScript-managed content. */
+.fab > summary > [aria-hidden="true"]:only-child {
+  display: inline-block;
+  transition: transform var(--duration);
+}
+
+.fab-actions {
+  position: absolute;
+  inset-inline-end: 0;
+  inset-block-end: calc(100% + var(--fab-gap));
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--fab-gap);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(var(--space-10));
+  transition:
+    opacity var(--duration),
+    transform var(--duration),
+    visibility 0s linear var(--duration);
+}
+
+/* One action is one compact row. Keeping this relationship inside FAB avoids
+   wrapping and prevents labels from becoming visually associated with the
+   preceding or following button. */
+.fab-action {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--fab-gap);
+  inline-size: max-content;
+  max-inline-size: calc(var(--viewport-inline) - var(--fab-offset) - var(--fab-offset));
+}
+
+.fab-label {
+  flex: 0 1 auto;
+  overflow: hidden;
+  max-inline-size: 16rem;
+  padding: var(--space-10) var(--space-20);
+  border-radius: var(--radius);
+  background: var(--surface);
+  color: var(--text);
+  box-shadow: var(--shadow);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-tight);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fab[open] > .fab-actions {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateY(0);
+  transition-delay: 0s;
+}
+
+.fab[open] > summary > [aria-hidden="true"]:only-child {
+  transform: rotate(45deg);
+}
+
+@media (forced-colors: active) {
+  .fab-label {
+    border: var(--border-width) solid CanvasText;
+    box-shadow: none;
+  }
+}
+
+@media print {
+  .fab {
+    display: none;
+  }
+}
+
+/*
+ * Floating labels — optional composition over the text controls
+ * (.input, .textarea, .select) and .field-label.
+ *
+ * The cell owns a control plus its label; the label overlays the control and
+ * floats to the top when the control is focused or non-empty. Help and error
+ * messages stay in the surrounding .field, not inside the cell, so the
+ * resting label can center on the control alone.
+ *
+ * The control must precede the label: the float is driven by the sibling
+ * combinator and :placeholder-shown. Every .input/.textarea needs
+ * placeholder=" " to expose a reliable empty state — without it the label
+ * only reacts to focus.
+ *
+ * Density flows through --control-size: .sm/.lg shrink the control geometry
+ * and the reserved headroom with it, leaving typography untouched.
+ *
+ * Public hooks:
+ * --floating-pad-block-start
+ */
+.floating-field {
+  --floating-pad-block-start: calc(var(--control-size) / 2 + var(--space-20));
+
+  /* Grid blockifies the control, removing the inline descender gap a textarea
+     would otherwise leave under itself. */
+  position: relative;
+  display: grid;
+}
+
+.floating-field > :is(.input, .textarea, .select) {
+  /* Headroom for the floated label is always reserved, so the value never
+     jumps when the label floats. Half the control centers the resting label;
+     the extra step clears the floated label's bottom edge. */
+  padding-block-start: var(--floating-pad-block-start);
+  padding-block-end: var(--space-10);
+}
+
+.floating-field > .field-label {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: calc(var(--space-30) + var(--border-width));
+  transform: translateY(-50%);
+  color: var(--text-muted);
+  font-size: var(--control-font-size);
+  font-weight: var(--font-weight);
+  pointer-events: none;
+  transition:
+    inset-block-start var(--duration),
+    transform var(--duration),
+    font-size var(--duration),
+    color var(--duration);
+}
+
+/* A textarea's resting label aligns with the first text line instead of
+   centering in the (tall) control. */
+.floating-field > .textarea + .field-label {
+  inset-block-start: var(--floating-pad-block-start);
+  transform: none;
+}
+
+/* :autofill covers prefilled values before interaction, when the browser may
+   not have propagated the value to the placeholder state yet. */
+.floating-field
+  > :is(.input, .textarea):is(:focus, :autofill, :not(:placeholder-shown))
+  + .field-label {
+  inset-block-start: var(--space-10);
+  transform: none;
+  font-size: var(--font-size-xs);
+}
+
+/* Controls without a dependable :placeholder-shown empty state stay floated:
+   select always, and date/time inputs whose placeholder rendering is
+   inconsistent across engines (Firefox shows none). */
+.floating-field
+  > :is(
+    .select,
+    .input[type="date"],
+    .input[type="time"],
+    .input[type="datetime-local"],
+    .input[type="month"],
+    .input[type="week"]
+  )
+  + .field-label {
+  inset-block-start: var(--space-10);
+  transform: none;
+  font-size: var(--font-size-xs);
+}
+
+/*
+ * Scroller — optional custom scrollbar styling for overflow regions.
+ *
+ * Apply to any scroll container (.overflow-auto, sidebars, long tables). Both
+ * scrollbar-color (Firefox) and ::-webkit-scrollbar (Safari/Chromium) are
+ * styled; the thumb lands as a thin, theme-aware affordance with a hover
+ * state.
+ *
+ * Public hooks:
+ * --scroller-size
+ * --scroller-padding
+ * --scroller-track
+ * --scroller-thumb
+ * --scroller-thumb-hover
+ */
+.scroller {
+  --scroller-size: 0.625rem;
+  --scroller-padding: 0.125rem;
+  --scroller-track: transparent;
+  --scroller-thumb: var(--border);
+  --scroller-thumb-hover: var(--text-muted);
+
+  scrollbar-color: var(--scroller-thumb) var(--scroller-track);
+  scrollbar-width: thin;
+}
+
+/* Opt-in gutter: reserves space so the layout does not shift when
+   the scrollbar appears. Use alongside a known-overflow container. */
+.scroller.stable-gutter {
+  scrollbar-gutter: stable;
+}
+
+.scroller::-webkit-scrollbar {
+  width: var(--scroller-size);
+  height: var(--scroller-size);
+}
+
+.scroller::-webkit-scrollbar-track {
+  background: var(--scroller-track);
+}
+
+.scroller::-webkit-scrollbar-thumb {
+  border: var(--scroller-padding) solid transparent;
+  border-radius: var(--radius-full);
+  background: var(--scroller-thumb);
+  background-clip: content-box;
+}
+
+.scroller::-webkit-scrollbar-thumb:hover {
+  background: var(--scroller-thumb-hover);
+  background-clip: content-box;
+}
+
+.scroller::-webkit-scrollbar-corner {
+  background: var(--scroller-track);
+}
+
+@supports (color: color-mix(in oklch, red, white)) {
+  .scroller {
+    --scroller-thumb: color-mix(in oklch, var(--text-muted), transparent 55%);
+    --scroller-thumb-hover: color-mix(in oklch, var(--text-muted), transparent 30%);
+  }
+}
+
+/*
+ * Scroll snap — optional horizontal rails for niche card strips and simple
+ * touch-friendly overflow areas.
+ *
+ * This is not a full carousel. For previous/next controls, pagination,
+ * active state, drag behavior, looping, or robust desktop mouse interaction,
+ * use a dedicated carousel library.
+ *
+ * Public hooks:
+ * --scroll-snap-gap
+ * --scroll-snap-align
+ * --scroll-snap-item-size
+ * --scroll-snap-padding
+ */
+.scroll-snap {
+  --scroll-snap-gap: var(--gap);
+  --scroll-snap-align: start;
+  --scroll-snap-item-size: auto;
+
+  display: flex;
+  gap: var(--scroll-snap-gap);
+  overflow-x: auto;
+}
+
+.scroll-snap > * {
+  flex: 0 0 var(--scroll-snap-item-size);
+}
+
+@supports (scroll-snap-type: x mandatory) {
+  .scroll-snap {
+    overscroll-behavior-inline: contain;
+    scroll-padding-inline: var(--scroll-snap-padding, var(--scroll-snap-gap));
+    scroll-snap-type: x mandatory;
+  }
+
+  .scroll-snap > * {
+    scroll-snap-align: var(--scroll-snap-align);
+  }
+
+  .scroll-snap[data-snap="center"] {
+    --scroll-snap-align: center;
+  }
+}
+
+@supports (scroll-snap-type: inline mandatory) {
+  .scroll-snap {
+    scroll-snap-type: inline mandatory;
+  }
+}
+
+.scroll-snap[data-scrollbar="hidden"] {
+  scrollbar-width: none;
+}
+
+.scroll-snap[data-scrollbar="hidden"]::-webkit-scrollbar {
+  display: none;
+}
+
+/*
+ * Optional fluid typography module.
+ *
+ * Not imported by actual.css. Import this file manually after actual.css when
+ * you need display, title, and lead sizes that scale with the viewport. Typical
+ * use cases: marketing pages, landing pages, hero sections, documentation
+ * homepages.
+ *
+ * Do not use this for body text, app UI, or the default prose scale. Fluid
+ * sizing is not the foundation of the typography system — it is a small opt-in
+ * surface for display text on content-heavy pages.
+ *
+ * Public API:
+ *   --fluid-display, --fluid-title, --fluid-lead  (size tokens, clamp())
+ *   .text-display, .text-title, .text-lead        (composed classes)
+ *
+ * Public hooks:
+ * --fluid-display
+ * --fluid-title
+ * --fluid-lead
+ *
+ * Values are generated from scripts/rfs.ts over the 360px -> 1440px range.
+ */
+:root {
+  --fluid-display: clamp(2.75rem, calc(2.25rem + 2.222vw), 4.25rem);
+  --fluid-title: clamp(2rem, calc(1.75rem + 1.111vw), 2.75rem);
+  --fluid-lead: clamp(1.125rem, calc(1.0833rem + 0.185vw), 1.25rem);
+}
+
+@supports (inline-size: 100vi) {
+  :root {
+    --fluid-display: clamp(2.75rem, calc(2.25rem + 2.222vi), 4.25rem);
+    --fluid-title: clamp(2rem, calc(1.75rem + 1.111vi), 2.75rem);
+    --fluid-lead: clamp(1.125rem, calc(1.0833rem + 0.185vi), 1.25rem);
+  }
+}
+
+.text-display {
+  font-size: var(--fluid-display);
+  line-height: var(--line-height-tight);
+  text-wrap: balance;
+}
+
+.text-title {
+  font-size: var(--fluid-title);
+  line-height: var(--line-height-tight);
+  text-wrap: balance;
+}
+
+.text-lead {
+  font-size: var(--fluid-lead);
+  line-height: var(--line-height-relaxed);
+}
+
+/*
+ * Optional utility helpers.
+ *
+ * These classes are intentionally not part of the core API.
+ * They are escape hatches for layout nudges, not a full atomic scale.
+ *
+ * Core principle:
+ * - .sm / .lg provide local rhythm through --gap and --density-space.
+ * - utilities consume the current context instead of defining their own -sm/-lg scale.
+ * - optional utilities extend core utilities, they do not re-express them.
+ * - follow verbose .{property}-{value} naming.
+ *
+ * Internal:
+ * --cluster-justify (local relay consumed by .cluster)
+ */
+
+/* Display */
+.display-block {
+  display: block;
+}
+
+.display-inline {
+  display: inline;
+}
+
+.display-inline-block {
+  display: inline-block;
+}
+
+.display-flex {
+  display: flex;
+}
+
+.display-inline-flex {
+  display: inline-flex;
+}
+
+.display-grid {
+  display: grid;
+}
+
+/* Position */
+.position-relative {
+  position: relative;
+}
+
+.position-absolute {
+  position: absolute;
+}
+
+.position-fixed {
+  position: fixed;
+}
+
+.position-sticky {
+  position: sticky;
+}
+
+/* Sizing */
+.inline-size-full {
+  inline-size: 100%;
+}
+
+.block-size-full {
+  block-size: 100%;
+}
+
+.min-inline-size-0 {
+  min-inline-size: 0;
+}
+
+.min-block-size-0 {
+  min-block-size: 0;
+}
+
+.max-inline-size-none {
+  max-inline-size: none;
+}
+
+/* Flex / alignment */
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.gap-sm {
+  gap: var(--space-20);
+}
+
+.gap-md {
+  gap: var(--space-40);
+}
+
+.gap-lg {
+  gap: var(--space-50);
+}
+
+.justify-content-start {
+  --cluster-justify: flex-start;
+  justify-content: flex-start;
+}
+
+.justify-content-center {
+  --cluster-justify: center;
+  justify-content: center;
+}
+
+.justify-content-end {
+  --cluster-justify: flex-end;
+  justify-content: flex-end;
+}
+
+.justify-content-space-between {
+  --cluster-justify: space-between;
+  justify-content: space-between;
+}
+
+.align-self-start {
+  align-self: start;
+}
+
+.align-self-center {
+  align-self: center;
+}
+
+.align-self-end {
+  align-self: end;
+}
+
+/* Spacing */
+.padding-context {
+  padding: var(--density-space);
+}
+
+.margin-inline-auto {
+  margin-inline: auto;
+}
+
+.margin-inline-start-auto {
+  margin-inline-start: auto;
+}
+
+.margin-inline-end-auto {
+  margin-inline-end: auto;
+}
+
+.margin-block-start-auto {
+  margin-block-start: auto;
+}
+
+.margin-block-end-auto {
+  margin-block-end: auto;
+}
+
+.gap-context {
+  gap: var(--gap);
+}
+
+.row-gap-context {
+  row-gap: var(--gap);
+}
+
+.column-gap-context {
+  column-gap: var(--gap);
+}
+
+/* Overflow */
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-clip {
+  overflow: clip;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+/* Text */
+.white-space-normal {
+  white-space: normal;
+}
+
+.text-break {
+  overflow-wrap: break-word;
+}
+
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+.text-lowercase {
+  text-transform: lowercase;
+}
+
+.text-capitalize {
+  text-transform: capitalize;
+}
+
+.font-weight-normal {
+  font-weight: var(--font-weight);
+}
+
+.font-weight-medium {
+  font-weight: var(--font-weight-medium);
+}
+
+.font-weight-strong {
+  font-weight: var(--font-weight-strong);
+}
+
+.font-weight-bold {
+  font-weight: var(--font-weight-bold);
+}
+
+/* Radius */
+.radius-sm-context {
+  border-radius: var(--radius-sm);
+}
+
+.radius-context {
+  border-radius: var(--radius);
+}
+
+.radius-lg-context {
+  border-radius: var(--radius-lg);
+}
+
+/* Border */
+.border-context {
+  border: var(--border-width) solid var(--border);
+}
+
+.border-block-start {
+  border-block-start: var(--border-width) solid var(--border);
+}
+
+.border-block-end {
+  border-block-end: var(--border-width) solid var(--border);
+}
+
+.border-inline-start {
+  border-inline-start: var(--border-width) solid var(--border);
+}
+
+.border-inline-end {
+  border-inline-end: var(--border-width) solid var(--border);
+}
+
+/* Surface */
+.background-surface {
+  background: var(--surface);
+  color: var(--text);
+}
+
+.background-raised {
+  background: var(--surface-raised);
+  color: var(--text);
+}
+
+.background-subtle {
+  background: var(--surface-subtle);
+  color: var(--text);
+}
+
+/* Shadow */
+.shadow-context {
+  box-shadow: var(--shadow);
+}
+
+.shadow-popout-context {
+  box-shadow: var(--shadow-popout);
+}
+
+/* Interaction */
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.pointer-events-none {
+  pointer-events: none;
+}
+
+.user-select-none {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* Visibility */
+.display-none {
+  display: none;
+}
+
+.visibility-hidden {
+  visibility: hidden;
+}
+
+/*
+ * Additional layout primitives not included in the core bundle.
+ *
+ * Import this file explicitly when a project needs these patterns.
+ *
+ * Public hooks:
+ * --switcher-threshold
+ */
+.switcher {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap);
+}
+
+.switcher > * {
+  flex-basis: calc((var(--switcher-threshold, 40rem) - 100%) * 999);
+  flex-grow: 1;
+  min-inline-size: 0;
+}
+
+/*
+ * Sticky, frosted top bar shell for app/dashboard shells (persistent
+ * sidebar + topbar layouts). Owns positioning, stacking, and the frosted
+ * background only — row content (search, breadcrumb, actions) stays local
+ * to the page.
+ *
+ * Not for marketing/editorial site headers — those are one-off visual
+ * identity per page; see docs/pages/patterns/overview.md's Header Navigation
+ * section. This is for the structural app-shell topbar, which recurs unchanged
+ * across app UIs regardless of brand.
+ */
+.topbar {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: var(--z-sticky);
+  isolation: isolate;
+  display: flex;
+  align-items: center;
+  gap: var(--gap);
+  padding-block: var(--space-30);
+  padding-inline: var(--space-40);
+  border-block-end: var(--border-width) solid var(--border);
+  background: var(--surface);
+}
+
+/* Both conditions are required: the translucent background contains var(),
+   so a browser with backdrop-filter but not color-mix (e.g. Safari < 16.2)
+   would accept the declaration at parse time, fail it at computed-value
+   time, and lose the background entirely instead of keeping the opaque
+   fallback above. */
+@supports ((backdrop-filter: blur(1rem)) or (-webkit-backdrop-filter: blur(1rem))) and
+  (background: color-mix(in oklch, red 50%, transparent)) {
+  .topbar {
+    background: color-mix(in oklch, var(--surface) 88%, transparent);
+    backdrop-filter: blur(0.75rem);
+    -webkit-backdrop-filter: blur(0.75rem);
+  }
+}