actual-css 0.3.0 → 0.4.0

package/dist/optional.min.css

@@ -1 +0,0 @@
-.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); } .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; } } .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; } :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); } @supports selector(:has(*)) { .chat:not(:has(> .chat-avatar)) { column-gap: 0; } } @media (forced-colors: active) { .chat-bubble { border-color: CanvasText; } } @property --aura-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; } :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; } } .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; } .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); } .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-field { --floating-pad-block-start: calc(var(--control-size) / 2 + var(--space-20)); position: relative; display: grid; } .floating-field > :is(.input, .textarea, .select) { 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); } .floating-field > .textarea + .field-label { inset-block-start: var(--floating-pad-block-start); transform: none; } .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); } .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 { --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; } .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 { --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; } :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); } .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-relative { position: relative; } .position-absolute { position: absolute; } .position-fixed { position: fixed; } .position-sticky { position: sticky; } .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-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; } .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-hidden { overflow: hidden; } .overflow-clip { overflow: clip; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .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-sm-context { border-radius: var(--radius-sm); } .radius-context { border-radius: var(--radius); } .radius-lg-context { border-radius: var(--radius-lg); } .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); } .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-context { box-shadow: var(--shadow); } .shadow-popout-context { box-shadow: var(--shadow-popout); } .cursor-pointer { cursor: pointer; } .pointer-events-none { pointer-events: none; } .user-select-none { -webkit-user-select: none; user-select: none; } .display-none { display: none; } .visibility-hidden { visibility: hidden; } .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; } .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); } @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); } }

package/docs/pages/guides/optional-components.md

@@ -1,33 +0,0 @@
-# Optional components
-
-Optional components extend Actual with specialized patterns while keeping the
-same tokens, intents, variants, and density grammar as the core. They add no
-global design tokens and require no JavaScript.
-
-Import the complete optional layer after the core:
-
-```css
-@import "actual-css/css";
-@import "actual-css/css/optional";
-```
-
-`actual-css/css/optional` resolves to the minified optional bundle
-(`dist/optional.min.css`). Alternatively, import only the modules a project
-uses from the source tree:
-
-```css
-@import "actual-css/css/optional/fab";
-@import "actual-css/css/optional/floating-field";
-```
-
-| Module | Use | Import | Documentation |
-|---|---|---|---|
-| OTP | One native one-time-code input with visual cells | `actual-css/css/optional/otp` | [OTP](../forms/otp.md) |
-| Chat | Start/end message rows and bubbles | `actual-css/css/optional/chat` | [Chat](../components/chat.md) |
-| Aura | Decorative intent-colored frame and glow | `actual-css/css/optional/aura` | [Aura](../components/aura.md) |
-| FAB | Fixed action placement and native speed dial | `actual-css/css/optional/fab` | [FAB](../components/fab.md) |
-| Floating field | Floating labels over the text controls | `actual-css/css/optional/floating-field` | [Floating labels](../forms/floating-field.md) |
-
-Component-prefixed custom properties documented on each page are author hooks.
-Color and sizing otherwise stay with the existing intent, variant, control,
-and button APIs.

package/src/css/grid.css

@@ -1,96 +0,0 @@
-/*
- * Responsive equal-width grids, with fixed-column presets below.
- *
- * Public hooks:
- * --grid-min
- * --grid-columns
- */
-.grid {
-  display: grid;
-  gap: var(--gap);
-  grid-template-columns: var(
-      --grid-columns,
-      repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr))
-    );
-}
-
-/* Fixed-column grids at their full count by default: .grid-2/3/4/6 stay at
-   2/3/4/6 columns unless wrapped in .container-query, which collapses the
-   column count on narrow wrappers (a 2-col intermediate step for
-   .grid-3/.grid-4; .grid-6 starts at 2 columns because it is meant for
-   compact items that do not need a full single-column stack). */
-.grid-2,
-.grid-3,
-.grid-4,
-.grid-6 {
-  display: grid;
-  gap: var(--gap);
-}
-
-.grid-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-.grid-3 {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-.grid-4 {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-.grid-6 {
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-}
-
-/* Container queries are the preferred responsive path; browsers without them
-   ignore these rules and get the equivalent @media rules from the
-   @supports not (container-type) block below — same columns, same breakpoints. */
-@container (width < 28rem) {
-  .container-query .grid-2,
-  .container-query .grid-3,
-  .container-query .grid-4 {
-    grid-template-columns: 1fr;
-  }
-
-  .container-query .grid-6 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@container (28rem <= width < 48rem) {
-  .container-query .grid-3,
-  .container-query .grid-4 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@container (28rem <= width < 64rem) {
-  .container-query .grid-6 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-@supports not (container-type: inline-size) {
-  @media (max-width: 63.999rem) {
-    .container-query .grid-6 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-  }
-
-  @media (max-width: 47.999rem) {
-    .container-query .grid-3,
-    .container-query .grid-4 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-
-  @media (max-width: 27.999rem) {
-    .container-query .grid-2,
-    .container-query .grid-3,
-    .container-query .grid-4 {
-      grid-template-columns: 1fr;
-    }
-
-    .container-query .grid-6 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-}

package/src/css/layout.css

@@ -1,108 +0,0 @@
-/*
- * Core layout primitives: stack, cluster, center, frame, app-shell, media,
- * sidebar-layout. Each primitive owns a single, readable behavior; they are
- * meant to compose in markup.
- *
- * Public hooks:
- * --cluster-align
- * --cluster-justify
- * --cluster-wrap
- * --center-size
- * --center-pad
- * --frame-ratio
- * --sidebar-layout-size
- *
- * Child contracts:
- * .stack owns vertical rhythm: direct-child margins are reset, spacing comes
- *   from --gap.
- * .cluster owns inline rhythm: direct-child margins are reset, spacing comes
- *   from --gap.
- * .frame sizes direct media children (img/video/iframe/canvas/svg) to fill the
- *   frame.
- */
-.container-query {
-  container-type: inline-size;
-}
-
-.stack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap);
-}
-
-.stack > * {
-  margin: 0;
-}
-
-.cluster {
-  display: flex;
-  flex-wrap: var(--cluster-wrap, wrap);
-  align-items: var(--cluster-align, center);
-  justify-content: var(--cluster-justify, flex-start);
-  gap: var(--gap);
-}
-
-.cluster > * {
-  margin: 0;
-}
-
-.center {
-  box-sizing: content-box;
-  max-inline-size: var(--center-size, 72rem);
-  margin-inline: auto;
-  padding-inline: var(--center-pad, 1rem);
-}
-
-.frame {
-  overflow: hidden;
-  aspect-ratio: var(--frame-ratio, 16 / 9);
-}
-
-.frame > :where(img, video, iframe, canvas, svg) {
-  inline-size: 100%;
-  block-size: 100%;
-  object-fit: cover;
-}
-
-.app-shell {
-  min-block-size: var(--viewport-block);
-  display: flex;
-  flex-direction: column;
-}
-
-/* Media object: fixed-width leading element (avatar, icon, image) + flexible
-   trailing content. Replaces the repeated "auto minmax(0, 1fr)" pattern in
-   author cards, comments, meta rows, and similar compositions. */
-.media {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  gap: var(--gap);
-  align-items: start;
-}
-
-/* Sidebar layout: content + aside using grid. Use this when the aside is
-   sticky or the content is multi-section. The aside width is tunable with
-   --sidebar-layout-size. */
-.sidebar-layout {
-  display: grid;
-  gap: var(--gap);
-  grid-template-columns: minmax(0, 1fr);
-}
-
-/* Container queries are the preferred path; without them the @supports not
-   block below restores the same columns at the same viewport breakpoint. */
-@container (width >= 64rem) {
-  .container-query .sidebar-layout {
-    grid-template-columns: minmax(0, 1fr) var(--sidebar-layout-size, 18rem);
-    align-items: start;
-  }
-}
-
-@supports not (container-type: inline-size) {
-  @media (min-width: 64rem) {
-    .container-query .sidebar-layout {
-      grid-template-columns: minmax(0, 1fr) var(--sidebar-layout-size, 18rem);
-      align-items: start;
-    }
-  }
-}

package/src/css/optional/index.css

@@ -1,10 +0,0 @@
-@import "otp.css";
-@import "chat.css";
-@import "aura.css";
-@import "fab.css";
-@import "floating-field.css";
-@import "scroller.css";
-@import "scroll-snap.css";
-@import "typography-fluid.css";
-@import "utilities-extra.css";
-@import "layout-extra.css";

package/src/css/optional/scroller.css

@@ -1,63 +0,0 @@
-/*
- * 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%);
-  }
-}

package/src/css/print.css

@@ -1,47 +0,0 @@
-@media print {
-  :root,
-  body {
-    /* Save some ink in dark mode */
-    color-scheme: light;
-    background: #fff;
-    color: #000;
-  }
-
-  .flyout,
-  .tooltip,
-  .surface-backdrop,
-  .status-bar,
-  .spinner,
-  dialog.modal[open],
-  dialog.drawer[open] {
-    display: none !important;
-  }
-
-  button.btn,
-  input[type="button"].btn,
-  input[type="submit"].btn,
-  input[type="reset"].btn {
-    display: none !important;
-  }
-
-  a.btn[href^="http"]::after {
-    content: " (" attr(href) ")";
-    font-size: 0.875em;
-  }
-
-  .card,
-  .alert,
-  .badge {
-    border: var(--border-width) solid CanvasText;
-    break-inside: avoid;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    break-after: avoid;
-  }
-}

package/src/css/themes/corporate.css

@@ -1,60 +0,0 @@
-[data-theme="corporate"] {
-  color-scheme: light dark;
-
-  --primary: hsl(214 82% 44%);
-  --primary-fg: white;
-  --secondary: hsl(250 45% 48%);
-  --secondary-fg: white;
-  --success: hsl(152 62% 32%);
-  --success-fg: white;
-  --warning: hsl(40 94% 48%);
-  --warning-fg: hsl(35 30% 12%);
-  --danger: hsl(355 70% 50%);
-  --danger-fg: white;
-  --neutral: hsl(220 12% 42%);
-  --neutral-fg: white;
-
-  --surface: hsl(0 0% 100%);
-  --surface-raised: hsl(214 30% 98%);
-  --surface-subtle: hsl(214 35% 95%);
-  --surface-solid: hsl(220 24% 12%);
-
-  --text: hsl(220 24% 12%);
-  --text-muted: hsl(220 10% 42%);
-  --text-subtle: hsl(220 8% 55%);
-
-  --border: hsl(220 16% 86%);
-  --focus: var(--primary);
-  --focus-ring: hsl(214 82% 44% / 0.22);
-}
-
-@supports (color: light-dark(red, blue)) {
-  [data-theme="corporate"] {
-    --primary: light-dark(hsl(214 82% 44%), hsl(214 75% 80%));
-    --primary-fg: light-dark(white, hsl(214 30% 12%));
-    --secondary: light-dark(hsl(250 45% 48%), hsl(250 53% 80%));
-    --secondary-fg: light-dark(white, hsl(250 30% 12%));
-    --success: light-dark(hsl(152 62% 32%), hsl(152 70% 80%));
-    --success-fg: light-dark(white, hsl(152 30% 12%));
-    --warning: light-dark(hsl(40 94% 48%), hsl(40 75% 80%));
-    --warning-fg: light-dark(hsl(35 30% 12%), hsl(40 30% 12%));
-    --danger: light-dark(hsl(355 70% 50%), hsl(355 75% 80%));
-    --danger-fg: light-dark(white, hsl(355 30% 12%));
-    --neutral: light-dark(hsl(220 12% 42%), hsl(220 20% 80%));
-    --neutral-fg: light-dark(white, hsl(220 30% 12%));
-
-    --surface: light-dark(hsl(0 0% 100%), hsl(214 18% 8%));
-    --surface-raised: light-dark(hsl(214 30% 98%), hsl(214 16% 11%));
-    --surface-subtle: light-dark(hsl(214 35% 95%), hsl(214 14% 16%));
-    --surface-solid: light-dark(hsl(220 24% 12%), hsl(0 0% 96%));
-
-    --text: light-dark(hsl(220 24% 12%), hsl(0 0% 96%));
-    --text-muted: light-dark(hsl(220 10% 42%), hsl(214 8% 68%));
-    --text-subtle: light-dark(hsl(220 8% 55%), hsl(214 7% 55%));
-
-    --border: light-dark(hsl(220 16% 86%), hsl(214 12% 24%));
-    --focus-ring: light-dark(hsl(214 82% 44% / 0.22), hsl(214 75% 80% / 0.28));
-    --hover-overlay: light-dark(hsl(220 30% 10% / 0.04), hsl(0 0% 100% / 0.06));
-    --shadow-color: light-dark(hsl(220 30% 10%), hsl(0 0% 0%));
-  }
-}

package/src/css/themes/cyberpunk.css

@@ -1,60 +0,0 @@
-/* Cyberpunk — light-only stress-test theme (single block, color-scheme: light,
- * same shape as indigo.css). Illustrative rather than production: it exists to
- * prove the token contract survives an extreme spec — a saturated yellow
- * canvas, near-black text and borders, dark-on-bright intent pairs, zero
- * radius, 2px strokes, and hard offset shadows — without touching a single
- * component rule. */
-[data-theme="cyberpunk"] {
-  color-scheme: light;
-
-  /* Bright intents carry dark ink. Each -fg pair is hand-tuned: danger keeps
-     a light fg because saturated red is too dark for near-black text, and
-     neutral inverts the canvas (black chip, yellow text). */
-  --primary: hsl(330 100% 60%);
-  --primary-fg: hsl(330 100% 10%);
-  --secondary: hsl(187 100% 42%);
-  --secondary-fg: hsl(187 100% 8%);
-  --success: hsl(150 100% 35%);
-  --success-fg: hsl(150 100% 6%);
-  --warning: hsl(25 95% 50%);
-  --warning-fg: hsl(25 100% 8%);
-  --danger: hsl(0 85% 44%);
-  --danger-fg: hsl(0 0% 98%);
-  --neutral: hsl(56 30% 8%);
-  --neutral-fg: hsl(56 100% 55%);
-
-  /* Yellow canvas. Raised surfaces go paler instead of shadowed — elevation
-     is carried by the hard offset shadow below. */
-  --surface: hsl(56 100% 50%);
-  --surface-raised: hsl(54 100% 64%);
-  --surface-subtle: hsl(53 100% 80%);
-  --surface-solid: hsl(56 30% 8%);
-
-  --text: hsl(56 60% 6%);
-  --text-muted: hsl(56 25% 22%);
-  --text-subtle: hsl(56 14% 34%);
-
-  --border: hsl(56 60% 6%);
-  --focus: hsl(330 100% 42%);
-  --focus-ring: hsl(330 100% 42% / 0.3);
-  --hover-overlay: hsl(56 100% 8% / 0.08);
-
-  /* Structure: sharp corners, thick strokes, print-like offset shadows.
-     Overriding --shadow directly bypasses the color-mix shadow recipe in
-     tokens.css (themes load later, so these flat values win). */
-  --radius: 0;
-  --radius-sm: 0;
-  --radius-lg: 0;
-  --border-width: 2px;
-  --shadow: 0.25rem 0.25rem 0 hsl(56 60% 6%);
-  --shadow-popout: 0.25rem 0.25rem 0 hsl(56 60% 6%);
-  --shadow-color: hsl(56 60% 6%);
-
-  /* Soft surfaces mix against a saturated yellow, so the default recipe reads
-     as more yellow — pull more intent in for tints that stay legible. */
-  --soft-bg-mix: 78%;
-  --soft-border-mix: 40%;
-
-  --selection-bg: hsl(56 60% 6%);
-  --selection-fg: hsl(56 100% 50%);
-}

package/src/css/themes/dim.css

@@ -1,33 +0,0 @@
-/* Dim — a dark theme variant that lifts the surface tones up a few percentage
- * points. Same shape as indigo.css (dark-only, single block) so authors can
- * drop it in when the canonical dark is too dense. Demonstrates how a theme
- * can recolor the same token set without changing structure. */
-[data-theme="dim"] {
-  color-scheme: dark;
-
-  --primary: hsl(210 92% 70%);
-  --primary-fg: hsl(218 28% 10%);
-  --secondary: hsl(270 70% 74%);
-  --secondary-fg: hsl(270 30% 10%);
-  --success: hsl(150 56% 58%);
-  --success-fg: hsl(150 38% 9%);
-  --warning: hsl(40 92% 64%);
-  --warning-fg: hsl(35 35% 10%);
-  --danger: hsl(0 74% 68%);
-  --danger-fg: hsl(0 35% 10%);
-  --neutral: hsl(220 10% 72%);
-  --neutral-fg: hsl(220 24% 10%);
-
-  --surface: hsl(220 20% 13%);
-  --surface-raised: hsl(220 18% 16%);
-  --surface-subtle: hsl(220 16% 20%);
-  --surface-solid: hsl(0 0% 96%);
-
-  --text: hsl(220 18% 94%);
-  --text-muted: hsl(220 10% 70%);
-  --text-subtle: hsl(220 8% 58%);
-  --border: hsl(220 12% 28%);
-  --focus: var(--primary);
-  --focus-ring: hsl(210 92% 70% / 0.28);
-  --hover-overlay: hsl(0 0% 100% / 0.06);
-}

package/src/css/themes/edge.css

@@ -1,117 +0,0 @@
-/* Edge - paired light/dark theme that demonstrates component-local
- * border-accent tokens. Buttons become surface controls with an
- * intent-colored lower edge (.solid remains available when an action needs a
- * filled treatment), text controls (input/textarea/select) pick up the same
- * lower-edge accent via --control-border-block-end-*, alerts get an
- * intent-colored leading flag via --alert-border-inline-start-*. The focus
- * ring keeps the shared width — edge only drops the border-color flip so the
- * intent-colored lower edge stays dominant. */
-[data-theme="edge"] {
-  color-scheme: light dark;
-
-  --primary: hsl(224 72% 42%);
-  --primary-fg: white;
-  --secondary: hsl(166 54% 30%);
-  --secondary-fg: white;
-  --success: hsl(145 46% 32%);
-  --success-fg: white;
-  --warning: hsl(36 80% 38%);
-  --warning-fg: hsl(34 35% 10%);
-  --danger: hsl(354 62% 46%);
-  --danger-fg: white;
-  --neutral: hsl(228 9% 42%);
-  --neutral-fg: white;
-
-  --surface: hsl(40 20% 99%);
-  --surface-raised: hsl(0 0% 100%);
-  --surface-subtle: hsl(220 24% 95%);
-  --surface-solid: hsl(228 26% 12%);
-
-  --text: hsl(228 24% 12%);
-  --text-muted: hsl(228 9% 42%);
-  --text-subtle: hsl(228 7% 56%);
-
-  --border: hsl(220 14% 86%);
-  --focus: var(--primary);
-  --focus-ring: hsl(224 72% 42% / 0.22);
-  --hover-overlay: hsl(228 30% 10% / 0.04);
-
-  --radius: 0.375rem;
-  --radius-sm: 0.25rem;
-  --radius-lg: 0.625rem;
-
-  --btn-default-bg: var(--surface-subtle);
-  --btn-default-border: transparent;
-  --btn-border-color: transparent;
-  --btn-border-block-end-width: 2px;
-
-  --control-border-block-end-color: var(--primary);
-  --control-border-block-end-width: 2px;
-}
-
-/* Intent-dependent button tokens must resolve on the button itself. If these
-   live on [data-theme], var(--intent) computes before local intent classes
-   apply and every button keeps the same primary edge. */
-[data-theme="edge"] .btn:not(.link) {
-  --btn-border-block-end-color: var(--intent, var(--primary));
-}
-
-[data-theme="edge"] .btn:not(:where(.solid, .soft, .outline, .ghost, .link)) {
-  --btn-default-fg: var(--intent, var(--text));
-  --ui-hover-bg: var(--surface-raised);
-}
-
-[data-theme="edge"]
-  .btn:not(
-    :where(:disabled, [aria-disabled="true"], .solid, .soft, .outline, .ghost, .link)
-  ):hover {
-  box-shadow: none;
-}
-
-/* Intent-dependent alert token, same reasoning as the button rule above:
-   must resolve on the alert itself so local intent classes (.danger, etc.)
-   win over the bare --primary fallback. */
-[data-theme="edge"] .alert {
-  --alert-border-inline-start-color: var(--intent, var(--primary));
-  --alert-border-inline-start-width: 4px;
-}
-
-/* Focus recipe override — the base recipe (control.css) flips --control-border
-   to --focus and draws a box-shadow ring. Edge drops the border-color flip and
-   thickens the accent edge instead so the intent-coloured lower edge stays
-   dominant; the focus ring and its 3px width remain the same as the default. */
-[data-theme="edge"] :is(.input, .textarea, .select):focus-visible {
-  --control-border: var(--border);
-  --control-border-block-end-width: 3px;
-}
-
-@supports (color: light-dark(red, blue)) {
-  [data-theme="edge"] {
-    --primary: light-dark(hsl(224 72% 42%), hsl(220 80% 76%));
-    --primary-fg: light-dark(white, hsl(224 35% 10%));
-    --secondary: light-dark(hsl(166 54% 30%), hsl(166 58% 70%));
-    --secondary-fg: light-dark(white, hsl(166 35% 9%));
-    --success: light-dark(hsl(145 46% 32%), hsl(145 48% 64%));
-    --success-fg: light-dark(white, hsl(145 35% 8%));
-    --warning: light-dark(hsl(36 80% 38%), hsl(40 72% 66%));
-    --warning-fg: light-dark(hsl(34 35% 10%), hsl(38 35% 10%));
-    --danger: light-dark(hsl(354 62% 46%), hsl(354 66% 72%));
-    --danger-fg: light-dark(white, hsl(354 35% 10%));
-    --neutral: light-dark(hsl(228 9% 42%), hsl(228 12% 72%));
-    --neutral-fg: light-dark(white, hsl(228 24% 10%));
-
-    --surface: light-dark(hsl(40 20% 99%), hsl(228 20% 8%));
-    --surface-raised: light-dark(hsl(0 0% 100%), hsl(228 17% 11%));
-    --surface-subtle: light-dark(hsl(220 24% 95%), hsl(228 14% 16%));
-    --surface-solid: light-dark(hsl(228 26% 12%), hsl(0 0% 96%));
-
-    --text: light-dark(hsl(228 24% 12%), hsl(0 0% 96%));
-    --text-muted: light-dark(hsl(228 9% 42%), hsl(228 8% 68%));
-    --text-subtle: light-dark(hsl(228 7% 56%), hsl(228 7% 55%));
-
-    --border: light-dark(hsl(220 14% 86%), hsl(228 12% 24%));
-    --focus-ring: light-dark(hsl(224 72% 42% / 0.22), hsl(220 80% 76% / 0.28));
-    --hover-overlay: light-dark(hsl(228 30% 10% / 0.04), hsl(0 0% 100% / 0.06));
-    --shadow-color: light-dark(hsl(228 30% 10%), hsl(0 0% 0%));
-  }
-}