@codenhub/styles 0.6.0 → 0.7.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.7.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": {
@@ -113,11 +113,6 @@
       "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"
-    },
     "./tw/tooltip": {
       "style": "./dist/tw/components/tooltip.css",
       "import": "./dist/tw/components/tooltip.css",
@@ -188,6 +183,28 @@
   "publishConfig": {
     "access": "public"
   },
+  "devDependencies": {
+    "@codenhub/tools": "0.1.0",
+    "@playwright/test": "~1.63.0",
+    "@tailwindcss/cli": "^4.3.2",
+    "@types/node": "^26.6.6",
+    "tailwindcss": "^4.3.2",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.10"
+  },
+  "peerDependencies": {
+    "tailwindcss": ">=4.3.2 <5"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "codenhub": {
+    "label": "StyleKit",
+    "status": "active",
+    "docs": {}
+  },
   "scripts": {
     "clean": "node -e \"fs.rmSync('dist', { recursive: true, force: true })\"",
     "dev": "pnpm --filter=@codenhub/styles-dev dev",
@@ -198,7 +215,6 @@
     "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",
     "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 +223,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/components/loader.css

@@ -1,116 +0,0 @@
-@source inline("loader dots-wave dots-fade dots-queue dots-rotate dots-grow dots-grow-alternate dot-bounce bars-wave pulse-ring");
-
-/* The mask machinery, shared by the loader and by any component that shows a
-   spinner of its own. Artwork is a mask rather than an image so it takes its
-   colour from whatever paints behind it, which is the whole indicator contract:
-   an intent class recolours the loader and nothing else has to know.
-
-   Each artwork's closing `style` tag is percent-encoded. A stylesheet pasted
-   into an HTML `<style>` element ends at the first literal close tag, so one
-   left raw would silently drop every rule after it; the data URI decodes the
-   escape before the SVG is parsed, so the artwork is unchanged. The exports
-   test fails a build that ships the raw sequence. */
-@utility loader-mask {
-  mask-image: var(--loader-art);
-  -webkit-mask-image: var(--loader-art);
-  mask-size: contain;
-  -webkit-mask-size: contain;
-  mask-repeat: no-repeat;
-  -webkit-mask-repeat: no-repeat;
-  mask-position: center;
-  -webkit-mask-position: center;
-}
-
-/* In `utilities`, beside the loader and art utilities it defaults for -- see
-   the seams note in `form.css`. */
-@layer utilities {
-  .loader:not(
-    :where(
-      .dots-wave,
-      .dots-fade,
-      .dots-queue,
-      .dots-rotate,
-      .dots-grow,
-      .dots-grow-alternate,
-      .dot-bounce,
-      .bars-wave,
-      .pulse-ring
-    )
-  ) {
-    --loader-art: url("data:image/svg+xml;charset=utf-8,<svg stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>.spinner_V8m1{transform-origin:center;animation:spinner_zKoa 2s linear infinite}.spinner_V8m1 circle{stroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite}@keyframes spinner_zKoa{100%{transform:rotate(360deg)}}@keyframes spinner_YpZS{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}}%3C/style%3E<g class='spinner_V8m1'><circle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'></circle></g></svg>");
-  }
-}
-
-@utility dots-wave {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg fill='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_8HQG{0%,57.14%{animation-timing-function:cubic-bezier(.33,.66,.66,1);transform:translate(0)}28.57%{animation-timing-function:cubic-bezier(.33,0,.66,.33);transform:translateY(-6px)}to{transform:translate(0)}}.spinner_qM83{animation:spinner_8HQG 1.05s infinite}%3C/style%3E<circle class='spinner_qM83' cx='4' cy='12' r='3'/><circle class='spinner_qM83' cx='12' cy='12' r='3' style='animation-delay:.1s'/><circle class='spinner_qM83' cx='20' cy='12' r='3' style='animation-delay:.2s'/></svg>");
-}
-
-@utility dots-fade {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>.dot{animation:dot-anim 1s ease-in-out infinite;fill:currentColor}.d1{animation-delay:-0.32s}.d2{animation-delay:-0.16s}@keyframes dot-anim{0%,80%,100%{transform:scale(0.6);opacity:0.2}40%{transform:scale(1);opacity:1}}%3C/style%3E<circle class='dot d1' cx='4' cy='12' r='3' transform-origin='4px 12px'></circle><circle class='dot d2' cx='12' cy='12' r='3' transform-origin='12px 12px'></circle><circle class='dot d3' cx='20' cy='12' r='3' transform-origin='20px 12px'></circle></svg>");
-}
-
-@utility dots-queue {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_qtyZ{0%{r:0}25%{r:3px;cx:4px}50%{r:3px;cx:12px}75%{r:3px;cx:20px}to{r:0;cx:20px}}.spinner_nOfF{animation:spinner_qtyZ 2s cubic-bezier(.36,.6,.31,1) infinite}%3C/style%3E<circle class='spinner_nOfF' cx='4' cy='12' r='3'/><circle class='spinner_nOfF' cx='4' cy='12' r='3' style='animation-delay:-.5s'/><circle class='spinner_nOfF' cx='4' cy='12' r='3' style='animation-delay:-1s'/><circle class='spinner_nOfF' cx='4' cy='12' r='3' style='animation-delay:-1.5s'/></svg>");
-}
-
-@utility dots-rotate {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_XVY9{50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}%3C/style%3E<circle cx='12' cy='12' r='3'/><g style='transform-origin:center;animation:spinner_XVY9 1s cubic-bezier(.36,.6,.31,1) infinite'><circle cx='4' cy='12' r='3'/><circle cx='20' cy='12' r='3'/></g></svg>");
-}
-
-@utility dots-grow {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_xe7Q{93.75%,to{r:3px}46.875%{r:.2px}}.spinner_b2T7{animation:spinner_xe7Q .8s linear infinite}%3C/style%3E<circle class='spinner_b2T7' cx='4' cy='12' r='3'/><circle class='spinner_b2T7' cx='12' cy='12' r='3' style='animation-delay:-.65s'/><circle class='spinner_b2T7' cx='20' cy='12' r='3' style='animation-delay:-.5s'/></svg>");
-}
-
-@utility dots-grow-alternate {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_qhi1{0%,to{r:1.5px}50%{r:3px}}.spinner_I8Q1{animation:spinner_qhi1 .75s linear infinite}%3C/style%3E<circle class='spinner_I8Q1' cx='4' cy='12' r='1.5'/><circle class='spinner_I8Q1' cx='12' cy='12' r='3' style='animation-delay:-.375s'/><circle class='spinner_I8Q1' cx='20' cy='12' r='1.5'/></svg>");
-}
-
-@utility dot-bounce {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spinner_YeBj{0%{animation-timing-function:cubic-bezier(.33,0,.66,.33);cy:5px}46.875%{cy:20px;rx:4px;ry:4px}50%{animation-timing-function:cubic-bezier(.33,.66,.66,1);cy:20.5px;rx:4.8px;ry:3px}53.125%{rx:4px;ry:4px}to{cy:5px}}%3C/style%3E<circle cx='12' cy='5' style='animation:spinner_YeBj .8s infinite' r='4'/></svg>");
-}
-
-@utility bars-wave {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>.bar{animation:bar-anim 1s ease-in-out infinite;fill:currentColor}.b1{animation-delay:-0.4s}.b2{animation-delay:-0.2s}@keyframes bar-anim{0%,100%{transform:scaleY(0.3)}50%{transform:scaleY(1)}}%3C/style%3E<rect class='bar b1' x='3' y='2' width='4' height='20' rx='2' transform-origin='5px 12px'></rect><rect class='bar b2' x='10' y='2' width='4' height='20' rx='2' transform-origin='12px 12px'></rect><rect class='bar b3' x='17' y='2' width='4' height='20' rx='2' transform-origin='19px 12px'></rect></svg>");
-}
-
-@utility pulse-ring {
-  --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><style>.pulse{animation:pulse-anim 1.2s cubic-bezier(0, 0.2, 0.8, 1) infinite;stroke:currentColor;transform-origin:center}.p2{animation-delay:-0.6s}@keyframes pulse-anim{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:0}}%3C/style%3E<circle class='pulse p1' cx='12' cy='12' r='10' fill='none' stroke-width='3'></circle><circle class='pulse p2' cx='12' cy='12' r='10' fill='none' stroke-width='3'></circle></svg>");
-}
-
-/* A loader takes a colour and its own geometry, and nothing else: no fill, no
-   edge, no silhouette. `--intent-color` defaults to `currentColor` for
-   indicators, so a loader inside filled content matches the text around it and
-   `.loader.success` is green. */
-@utility loader {
-  @apply loader-mask inline-block size-7 [&.lg]:size-9 [&.sm]:size-5;
-
-  color: var(--intent-color);
-  background-color: currentColor;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .loader {
-    --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-dasharray='42 18'/></svg>");
-  }
-
-  .dots-wave,
-  .dots-fade,
-  .dots-queue,
-  .dots-rotate,
-  .dots-grow,
-  .dots-grow-alternate {
-    --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='4' cy='12' r='3'/><circle cx='12' cy='12' r='3'/><circle cx='20' cy='12' r='3'/></svg>");
-  }
-
-  .dot-bounce {
-    --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='4'/></svg>");
-  }
-
-  .bars-wave {
-    --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><rect x='3' y='5' width='4' height='14' rx='2'/><rect x='10' y='5' width='4' height='14' rx='2'/><rect x='17' y='5' width='4' height='14' rx='2'/></svg>");
-  }
-
-  .pulse-ring {
-    --loader-art: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='3'/></svg>");
-  }
-}