@codenhub/styles 0.6.0 → 0.8.0

package/llms.txt

@@ -4,29 +4,31 @@
 
 Use compiled entrypoints for ready-to-import CSS or `/tw` entrypoints in a
 Tailwind CSS v4 build. The package has no JavaScript behavior. Supported behavior
-is the surface documented in public docs and demonstrated by the playground.
+is what the public docs describe and the demo at https://demo.codenhub.dev/styles/ shows.
 
 ## Documentation
 
-- [Documentation](./docs/index.md): Primary entrypoint — what the package is, what it does and does not do, and where to go next.
-- [README](./README.md): Installation, first use, requirements, and stability notes.
-- [Setup](./docs/setup.md): Installation, entrypoint/import-path reference, configuration, and requirements.
-- [Concepts](./docs/concepts.md): The three-axis model, the token system, and theme-selector precedence.
-- [Usage](./docs/usage/index.md): Composing, theming, customizing, aesthetics, and each component family.
-  - [Composing](./docs/usage/composing.md): Combining axes, presentation, the component axis matrix, and elevation.
-  - [Theming](./docs/usage/theming.md): Color, intent, and foundation token reference.
-  - [Customizing](./docs/usage/customizing.md): Presentation, material, and aesthetic token reference.
-  - [Aesthetics](./docs/usage/aesthetics.md): Each shipped aesthetic and its documented exceptions.
-  - [Buttons](./docs/usage/buttons.md)
-  - [Forms](./docs/usage/forms.md)
-  - [Feedback](./docs/usage/feedback.md)
-  - [Tooltips](./docs/usage/tooltips.md)
-  - [Content and layout](./docs/usage/content-and-layout.md): Layout helpers, content chips/tables, surfaces, and typography utilities.
-- [Integrating](./docs/integrating/index.md): Wiring the stylesheet into Next.js, Vue, Svelte, Astro, or a Tailwind CSS v4 build.
-  - [Tailwind CSS v4](./docs/integrating/tailwind.md)
-  - [Next.js](./docs/integrating/nextjs.md)
-  - [Vue](./docs/integrating/vue.md)
-  - [Svelte](./docs/integrating/svelte.md)
-  - [Astro](./docs/integrating/astro.md)
-- [Accessibility](./docs/accessibility.md): CSS accessibility behavior and consumer responsibilities.
+- [Introduction](./docs/index.md): Primary entrypoint: what the package is for, what it does not do, versioning, and the reading order.
+- [README](./README.md): Installation, a first example, requirements, and license.
+- [Setup](./docs/setup.md): Installing, choosing compiled CSS or Tailwind source, requirements, every entrypoint, classless HTML, cascade layers, and what to check when nothing is styled.
+- [Integrating](./docs/integrating/index.md): How the stylesheet loads in a framework build, and which guide to follow.
+  - [Tailwind CSS v4](./docs/integrating/tailwind.md): Using the `/tw` source entrypoints in a Tailwind CSS v4 build, focused entrypoints, the `dark:` variant, and troubleshooting.
+  - [Next.js](./docs/integrating/nextjs.md): Importing the stylesheet in a Next.js or React app.
+  - [Vue](./docs/integrating/vue.md): Importing the stylesheet in a Vue or Vite app.
+  - [Svelte](./docs/integrating/svelte.md): Importing the stylesheet in a Svelte or SvelteKit app.
+  - [Astro](./docs/integrating/astro.md): Importing the stylesheet in an Astro app.
+  - [Without a bundler](./docs/integrating/without-a-bundler.md): Linking the compiled files from plain HTML, Rails, Django, or a CDN.
+- [Building a screen](./docs/concepts.md): Layout, type, cards, and buttons, and the model behind them: intent, fill, edge, aesthetic, and what passes down to children.
+- [Usage overview](./docs/usage/index.md): The task guides in order, then the lookup pages.
+  - [Buttons](./docs/usage/buttons.md): Destructive and secondary actions, icon buttons, sizes, link buttons, disabled states, and loading icons.
+  - [Forms](./docs/usage/forms.md): Labeled fields, hints and errors, icons and fixed prefixes, selects, and checkbox, radio, and switch toggles.
+  - [Feedback](./docs/usage/feedback.md): A saving button, alerts, badges, skeletons, progress bars, and motion that keeps running.
+  - [Tooltips](./docs/usage/tooltips.md): Field help on hover and focus, the ARIA wiring and Escape handler, and where a tooltip gets clipped.
+  - [Theming](./docs/usage/theming.md): Light and dark mode, brand colors, custom intents, and every color, intent, foundation, and font token with its default.
+  - [Aesthetics](./docs/usage/aesthetics.md): The six optional looks, what each changes, its knobs, and its limits.
+  - [Solo classes](./docs/usage/solo.md): Painting an aesthetic onto one element from another library, and what a solo class reads and ignores.
+  - [Composing](./docs/usage/composing.md): Lookup for combining classes, every component's default look, presentation rules, the component axis matrix, and elevation.
+  - [Customizing](./docs/usage/customizing.md): Lookup for presentation and material tokens, aesthetic knobs, the six public component variables, the generated palette, and composition helpers.
+  - [Content and layout](./docs/usage/content-and-layout.md): Lookup for layout helpers, the type scale, cards and panels, tables, quotes, code, and keys.
+- [Accessibility](./docs/accessibility.md): What the CSS provides for focus, states, motion, contrast, forced colors, and right-to-left text, and what the application must add.
 - [Changelog](./docs/changelog/index.md): Release history, including breaking changes.

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@codenhub/styles",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "private": false,
-  "description": "CSS-only Codenhub design tokens, base styles, and composable UI helper classes.",
+  "description": "Build a consistent, themeable interface by writing class names on plain HTML, with one stylesheet of tokens, a reset, layout and type helpers, and component classes, and no JavaScript.",
   "homepage": "https://github.com/codenhub/codenhub/tree/main/packages/styles",
   "license": "Apache-2.0",
   "repository": {
@@ -10,8 +10,12 @@
     "url": "git+https://github.com/codenhub/codenhub.git",
     "directory": "packages/styles"
   },
+  "bin": {
+    "codenhub-styles": "./dist/cli.js"
+  },
   "files": [
     "dist",
+    "tw",
     "NOTICE",
     "README.md",
     "docs",
@@ -22,163 +26,190 @@
   "sideEffects": [
     "**/*.css"
   ],
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/index.css",
       "import": "./dist/index.css",
       "default": "./dist/index.css"
     },
     "./theme": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/theme.css",
       "import": "./dist/theme.css",
       "default": "./dist/theme.css"
     },
     "./palette": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/palette.css",
       "import": "./dist/palette.css",
       "default": "./dist/palette.css"
     },
     "./components": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/components.css",
       "import": "./dist/components.css",
       "default": "./dist/components.css"
     },
     "./aesthetics": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/aesthetics/index.css",
       "import": "./dist/aesthetics/index.css",
       "default": "./dist/aesthetics/index.css"
     },
     "./aesthetics/neobrutalism": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/aesthetics/neobrutalism.css",
       "import": "./dist/aesthetics/neobrutalism.css",
       "default": "./dist/aesthetics/neobrutalism.css"
     },
     "./aesthetics/glass": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/aesthetics/glass.css",
       "import": "./dist/aesthetics/glass.css",
       "default": "./dist/aesthetics/glass.css"
     },
     "./aesthetics/pixel": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/aesthetics/pixel.css",
       "import": "./dist/aesthetics/pixel.css",
       "default": "./dist/aesthetics/pixel.css"
     },
     "./aesthetics/chunky-tile": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/aesthetics/chunky-tile.css",
       "import": "./dist/aesthetics/chunky-tile.css",
       "default": "./dist/aesthetics/chunky-tile.css"
     },
     "./aesthetics/cyber": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/aesthetics/cyber.css",
       "import": "./dist/aesthetics/cyber.css",
       "default": "./dist/aesthetics/cyber.css"
     },
     "./aesthetics/sketch": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/aesthetics/sketch.css",
       "import": "./dist/aesthetics/sketch.css",
       "default": "./dist/aesthetics/sketch.css"
     },
     "./tw": {
-      "style": "./dist/tw/index.css",
-      "import": "./dist/tw/index.css",
-      "default": "./dist/tw/index.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/index.css",
+      "import": "./tw/index.css",
+      "default": "./tw/index.css"
     },
     "./tw/theme": {
-      "style": "./dist/tw/theme.css",
-      "import": "./dist/tw/theme.css",
-      "default": "./dist/tw/theme.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/theme.css",
+      "import": "./tw/theme.css",
+      "default": "./tw/theme.css"
     },
     "./tw/components": {
-      "style": "./dist/tw/components/index.css",
-      "import": "./dist/tw/components/index.css",
-      "default": "./dist/tw/components/index.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/components/index.css",
+      "import": "./tw/components/index.css",
+      "default": "./tw/components/index.css"
     },
     "./tw/surface": {
-      "style": "./dist/tw/components/surface.css",
-      "import": "./dist/tw/components/surface.css",
-      "default": "./dist/tw/components/surface.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/components/surface.css",
+      "import": "./tw/components/surface.css",
+      "default": "./tw/components/surface.css"
     },
     "./tw/button": {
-      "style": "./dist/tw/components/button.css",
-      "import": "./dist/tw/components/button.css",
-      "default": "./dist/tw/components/button.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/components/button.css",
+      "import": "./tw/components/button.css",
+      "default": "./tw/components/button.css"
     },
     "./tw/form": {
-      "style": "./dist/tw/components/form.css",
-      "import": "./dist/tw/components/form.css",
-      "default": "./dist/tw/components/form.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/components/form.css",
+      "import": "./tw/components/form.css",
+      "default": "./tw/components/form.css"
     },
     "./tw/feedback": {
-      "style": "./dist/tw/components/feedback.css",
-      "import": "./dist/tw/components/feedback.css",
-      "default": "./dist/tw/components/feedback.css"
-    },
-    "./tw/loader": {
-      "style": "./dist/tw/components/loader.css",
-      "import": "./dist/tw/components/loader.css",
-      "default": "./dist/tw/components/loader.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/components/feedback.css",
+      "import": "./tw/components/feedback.css",
+      "default": "./tw/components/feedback.css"
     },
     "./tw/tooltip": {
-      "style": "./dist/tw/components/tooltip.css",
-      "import": "./dist/tw/components/tooltip.css",
-      "default": "./dist/tw/components/tooltip.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/components/tooltip.css",
+      "import": "./tw/components/tooltip.css",
+      "default": "./tw/components/tooltip.css"
     },
     "./tw/reset": {
-      "style": "./dist/tw/reset.css",
-      "import": "./dist/tw/reset.css",
-      "default": "./dist/tw/reset.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/reset.css",
+      "import": "./tw/reset.css",
+      "default": "./tw/reset.css"
     },
     "./tw/native": {
-      "style": "./dist/tw/native.css",
-      "import": "./dist/tw/native.css",
-      "default": "./dist/tw/native.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/native.css",
+      "import": "./tw/native.css",
+      "default": "./tw/native.css"
     },
     "./tw/typography": {
-      "style": "./dist/tw/typography.css",
-      "import": "./dist/tw/typography.css",
-      "default": "./dist/tw/typography.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/typography.css",
+      "import": "./tw/typography.css",
+      "default": "./tw/typography.css"
     },
     "./tw/utilities": {
-      "style": "./dist/tw/utilities/index.css",
-      "import": "./dist/tw/utilities/index.css",
-      "default": "./dist/tw/utilities/index.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/utilities/index.css",
+      "import": "./tw/utilities/index.css",
+      "default": "./tw/utilities/index.css"
     },
     "./tw/aesthetics": {
-      "style": "./dist/tw/aesthetics/index.css",
-      "import": "./dist/tw/aesthetics/index.css",
-      "default": "./dist/tw/aesthetics/index.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/aesthetics/index.css",
+      "import": "./tw/aesthetics/index.css",
+      "default": "./tw/aesthetics/index.css"
     },
     "./tw/aesthetics/neobrutalism": {
-      "style": "./dist/tw/aesthetics/neobrutalism.css",
-      "import": "./dist/tw/aesthetics/neobrutalism.css",
-      "default": "./dist/tw/aesthetics/neobrutalism.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/aesthetics/neobrutalism.css",
+      "import": "./tw/aesthetics/neobrutalism.css",
+      "default": "./tw/aesthetics/neobrutalism.css"
     },
     "./tw/aesthetics/glass": {
-      "style": "./dist/tw/aesthetics/glass.css",
-      "import": "./dist/tw/aesthetics/glass.css",
-      "default": "./dist/tw/aesthetics/glass.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/aesthetics/glass.css",
+      "import": "./tw/aesthetics/glass.css",
+      "default": "./tw/aesthetics/glass.css"
     },
     "./tw/aesthetics/pixel": {
-      "style": "./dist/tw/aesthetics/pixel.css",
-      "import": "./dist/tw/aesthetics/pixel.css",
-      "default": "./dist/tw/aesthetics/pixel.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/aesthetics/pixel.css",
+      "import": "./tw/aesthetics/pixel.css",
+      "default": "./tw/aesthetics/pixel.css"
     },
     "./tw/aesthetics/chunky-tile": {
-      "style": "./dist/tw/aesthetics/chunky-tile.css",
-      "import": "./dist/tw/aesthetics/chunky-tile.css",
-      "default": "./dist/tw/aesthetics/chunky-tile.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/aesthetics/chunky-tile.css",
+      "import": "./tw/aesthetics/chunky-tile.css",
+      "default": "./tw/aesthetics/chunky-tile.css"
     },
     "./tw/aesthetics/cyber": {
-      "style": "./dist/tw/aesthetics/cyber.css",
-      "import": "./dist/tw/aesthetics/cyber.css",
-      "default": "./dist/tw/aesthetics/cyber.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/aesthetics/cyber.css",
+      "import": "./tw/aesthetics/cyber.css",
+      "default": "./tw/aesthetics/cyber.css"
     },
     "./tw/aesthetics/sketch": {
-      "style": "./dist/tw/aesthetics/sketch.css",
-      "import": "./dist/tw/aesthetics/sketch.css",
-      "default": "./dist/tw/aesthetics/sketch.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/aesthetics/sketch.css",
+      "import": "./tw/aesthetics/sketch.css",
+      "default": "./tw/aesthetics/sketch.css"
     },
     "./native": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/native.css",
       "import": "./dist/native.css",
       "default": "./dist/native.css"
@@ -188,17 +219,52 @@
   "publishConfig": {
     "access": "public"
   },
+  "devDependencies": {
+    "@codenhub/tools": "0.1.0",
+    "@playwright/test": "~1.63.0",
+    "@tailwindcss/cli": "^4.3.4",
+    "@tailwindcss/node": "^4.3.4",
+    "@tailwindcss/oxide": "^4.3.4",
+    "@types/node": "^26.6.6",
+    "tailwindcss": "^4.3.4",
+    "tsdown": "^0.23.5",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.10"
+  },
+  "peerDependencies": {
+    "@tailwindcss/cli": ">=4.3.2 <5",
+    "tailwindcss": ">=4.3.2 <5"
+  },
+  "peerDependenciesMeta": {
+    "@tailwindcss/cli": {
+      "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=24"
+  },
+  "codenhub": {
+    "label": "StyleKit",
+    "status": "active",
+    "docs": {},
+    "tools": {
+      "timeout": 1800
+    }
+  },
   "scripts": {
-    "clean": "node -e \"fs.rmSync('dist', { recursive: true, force: true })\"",
+    "clean": "node -e \"for (const d of ['dist', 'tw']) fs.rmSync(d, { recursive: true, force: true })\"",
     "dev": "pnpm --filter=@codenhub/styles-dev dev",
     "debug": "pnpm build && pnpm --filter=@codenhub/styles-debug dev",
     "demo": "pnpm build && pnpm --filter=@codenhub/styles-demo dev",
     "generate": "node scripts/generate-palette.mjs",
-    "build": "pnpm clean && node scripts/build-styles.mjs && pnpm build:tw",
+    "build": "pnpm clean && node scripts/build-styles.mjs && pnpm build:tw && pnpm build:cli",
     "build:styles": "node scripts/build-styles.mjs --styles",
     "build:aesthetics": "node scripts/build-styles.mjs --aesthetics",
     "build:tw": "node scripts/build-tw.mjs",
-    "prepublishOnly": "pnpm build && pnpm typecheck && pnpm test",
+    "build:cli": "tsdown src/cli/cli.ts --format esm --no-clean --no-fixed-extension --no-dts",
     "status:npm": "npm view @codenhub/styles version dist-tags time --json && npm dist-tag ls @codenhub/styles && npm access get status @codenhub/styles",
     "status:pack": "npm pack --dry-run --ignore-scripts",
     "test": "vitest run",
@@ -207,28 +273,5 @@
     "test:coverage": "pnpm test",
     "test:watch": "vitest --watch",
     "typecheck": "tsc -b"
-  },
-  "devDependencies": {
-    "@codenhub/tools": "workspace:*",
-    "@playwright/test": "catalog:",
-    "@tailwindcss/cli": "catalog:",
-    "@types/node": "catalog:",
-    "tailwindcss": "catalog:",
-    "typescript": "catalog:",
-    "vitest": "catalog:"
-  },
-  "peerDependencies": {
-    "tailwindcss": ">=4.3.2 <5"
-  },
-  "peerDependenciesMeta": {
-    "tailwindcss": {
-      "optional": true
-    }
-  },
-  "codenhub": {
-    "docs": {
-      "label": "StyleKit",
-      "status": "active"
-    }
   }
-}
+}

package/{dist/tw → tw}/aesthetics/chunky-tile.css

@@ -144,30 +144,110 @@
     --ui-label-case: initial;
     --ui-label-shadow: initial;
   }
+
+  /* More contrast asked for: the tile takes the controls' grey, since its own
+     is about 2.5:1 against the page in both themes. The bar under a tile is
+     this ink too, and darkens with it. A rule of its own rather than nested
+     above: `registry.test.ts` reads that block's declarations flat. See
+     docs/accessibility.md. */
+  @media (prefers-contrast: more) {
+    .chunky-tile {
+      --ui-ink: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+    }
+  }
 }
 
 /* Solo: the same look painted onto the one element carrying the class, for an
    element the package does not style. See docs/internal/model.md#solo-classes and
-   the note on `.glass-solo`: own knobs and foundation tokens with literal
-   fallbacks, never a shared `--ui-*`, `--intent-*`, or `--elevation-color`
-   token, unlayered, and not for this package's own components. */
+   the note on `.glass-solo`: it composes with the element's presentation,
+   intent, and elevation, and reads its material from its own knobs and
+   foundation tokens with literal fallbacks, never a shared material `--ui-*`
+   or `--elevation-color` token. Unlayered, and not for this package's own
+   components. */
 .chunky-tile-solo {
   --_tile-lift: var(--tile-lift, 4px);
-  --_tile-ink: light-dark(var(--color-neutral-400, oklch(70.8% 0 0)), var(--color-neutral-600, oklch(43.9% 0 0)));
-  /* With no fill to shade, the bar shades the edge: the colour an unfilled
-     tile's bar already is under the aesthetic class. */
-  --_tile-bar: color-mix(in oklab, var(--_tile-ink) 72%, rgb(0 0 0));
+  /* The composition, the same in every solo class; `registry.test.ts` holds
+     the copies together. See the note on `.glass-solo`. */
+  --_solo-intent-color: initial;
+  --_solo-intent-contrast: initial;
+  --_solo-intent-strong: initial;
+  --_solo-intent-border: initial;
+  --_solo-intent-fill-max: initial;
+  --_solo-color: var(--_solo-intent-color, var(--color-text, light-dark(oklch(14.5% 0 0), oklch(98.5% 0 0))));
+  --_solo-contrast: var(
+    --_solo-intent-contrast,
+    var(--color-text-contrast, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0)))
+  );
+  --_solo-strong: var(--_solo-intent-strong, var(--color-text-strong, light-dark(oklch(20.5% 0 0), oklch(97% 0 0))));
+  --_solo-capped: min(var(--ui-fill, 0%), var(--_solo-intent-fill-max, 20%));
+  --_solo-fill: color-mix(in oklab, var(--_solo-color) var(--_solo-capped), transparent);
+  --_solo-on-fill: min(var(--ui-fg-on-fill, 0%), max(0%, calc(var(--_solo-capped) * 2 - 100%)));
+  --_solo-fg: color-mix(in oklab, var(--_solo-contrast) var(--_solo-on-fill), var(--_solo-strong));
+  /* The line with no intent on the element: this aesthetic's own ink. */
+  --_solo-ink: var(
+    --_solo-intent-border,
+    light-dark(var(--color-neutral-400, oklch(70.8% 0 0)), var(--color-neutral-600, oklch(43.9% 0 0)))
+  );
+  --_solo-edge: color-mix(in oklab, var(--_solo-ink) var(--ui-border, 100%), var(--_solo-fill));
+  /* The bar shades the line, as an unfilled tile's does under the aesthetic
+     class, and follows the element's intent with it. */
+  --_tile-bar: color-mix(in oklab, var(--_solo-ink) 72%, rgb(0 0 0));
+  --_solo-depth: calc(var(--_tile-lift) * var(--ui-elevation, 1));
 
-  border: 2px solid var(--_tile-ink);
+  border: 2px solid var(--_solo-edge);
   border-radius: var(--tile-radius, 0.75rem);
-  box-shadow: 0 var(--_tile-lift) 0 0 var(--_tile-bar);
+  box-shadow:
+    0 var(--_solo-depth) 0 0 var(--_tile-bar),
+    inset 0 0 0 100vmax var(--_solo-fill);
   font-family: var(--font-rounded, var(--font-default, ui-sans-serif, system-ui, sans-serif));
-  transition:
-    box-shadow var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
-    transform var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
 }
 
-/* The heavier, tracked label is an action's, as under the aesthetic class. */
+/* More contrast asked for: the controls' grey, as on `.chunky-tile`, for the
+   same 2.5:1. An element's intent still colours the line. */
+@media (prefers-contrast: more) {
+  .chunky-tile-solo {
+    --_solo-ink: var(
+      --_solo-intent-border,
+      light-dark(var(--color-neutral-600, oklch(43.9% 0 0)), var(--color-neutral-400, oklch(70.8% 0 0)))
+    );
+  }
+}
+
+/* An intent class on the element colours it, as on a component. Named rather
+   than read from `--intent-*` alone: those slots inherit, so a `.success`
+   container would colour a solo element where it leaves a component neutral. */
+.chunky-tile-solo:is(.primary, .secondary, .success, .warning, .destructive, .info) {
+  --_solo-intent-color: var(--intent-color);
+  --_solo-intent-contrast: var(--intent-contrast);
+  --_solo-intent-strong: var(--intent-strong);
+  --_solo-intent-border: var(--intent-border);
+  --_solo-intent-fill-max: var(--intent-fill-max);
+}
+
+/* The text colour is written only where a fill or an intent is asked for, on
+   the element or by a container's fill class. Anywhere else the element keeps
+   its own: a dark toast keeps its light text. */
+.chunky-tile-solo:is(
+  .solid,
+  .soft,
+  .ghost,
+  .primary,
+  .secondary,
+  .success,
+  .warning,
+  .destructive,
+  .info,
+  :is(.solid, .soft, .ghost) *
+) {
+  color: var(--_solo-fg);
+}
+
+/* The heavier, tracked label is an action's, as under the aesthetic class.
+
+   So is the press's transition: `transition` is one list, so writing it on
+   every solo element replaced a container's own -- a toast's fade and height
+   stopped animating. The travel is the independent `translate`, so the
+   element's own `transform` stays its own. */
 .chunky-tile-solo:is(
   button,
   a[href],
@@ -179,26 +259,22 @@
 ) {
   font-weight: 800;
   letter-spacing: 0.04em;
+  transition:
+    box-shadow var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
+    translate var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
+
+  /* Reduced motion keeps the press and drops its motion: the tile lands on
+     its bar at once. The near-zero duration `box` uses, so a `transitionend`
+     still fires. */
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0.01ms;
+  }
 }
 
 /* The press, only on something pressed: an action, not disabled. A solo
    container -- a toast clicked to dismiss -- stays put, the way only `.btn` and
    an opted-in card press under the aesthetic class. */
 .chunky-tile-solo:is(
-  button,
-  a[href],
-  [role="button"],
-  summary,
-  input[type="button"],
-  input[type="submit"],
-  input[type="reset"]
-):active:not(:disabled, [aria-disabled="true"]) {
-  box-shadow: 0 0 0 0 var(--_tile-bar);
-  transform: translateY(var(--_tile-lift));
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .chunky-tile-solo:is(
     button,
     a[href],
     [role="button"],
@@ -207,6 +283,8 @@
     input[type="submit"],
     input[type="reset"]
   ):active:not(:disabled, [aria-disabled="true"]) {
-    transform: none;
-  }
+  box-shadow:
+    0 0 0 0 var(--_tile-bar),
+    inset 0 0 0 100vmax var(--_solo-fill);
+  translate: 0 var(--_solo-depth);
 }