@nxds/claude-design 0.7.0 → 0.8.0

package/README.md

@@ -10,13 +10,13 @@ npx nxds-cli@latest export claude-design
 
 The command writes a `nxds-design-system/project/` folder. Publish that folder as a Design System artifact in Claude, unchanged.
 
-| File                                        | What it holds                                                 |
-| ------------------------------------------- | ------------------------------------------------------------- |
-| `project/tokens.json`, `project/tokens.css` | Every nxds token at the default appearance, in Light and Dark |
-| `project/components/bundle.js`              | Every component as `window.Nxds`, for React 18.3.1 globals    |
-| `project/components/bundle.css`             | The component styles                                          |
-| `project/components/index.d.ts`             | One `<Name>Props` interface per component part                |
-| `project/components/<Name>/`                | A preview card and a README per component                     |
-| `coverage.md`                               | The props the canvas can't set, and why                       |
+| File                                        | What it holds                                                                |
+| ------------------------------------------- | ---------------------------------------------------------------------------- |
+| `project/tokens.json`, `project/tokens.css` | The tokens the components read, at the default appearance, in Light and Dark |
+| `project/components/bundle.js`              | Every component as `window.Nxds`, for React 18.3.1 globals                   |
+| `project/components/bundle.css`             | The component styles                                                         |
+| `project/components/index.d.ts`             | One `<Name>Props` interface per component part                               |
+| `project/components/<Name>/`                | A preview card and a README per component                                    |
+| `coverage.md`                               | The props the canvas can't set, and why                                      |
 
 Docs: <https://nxds.dev>

package/coverage.md

@@ -4,9 +4,9 @@
 
 | Control | Props |
 | --- | --- |
-| dropdown | 258 |
+| dropdown | 259 |
 | toggle | 506 |
-| number | 84 |
+| number | 83 |
 | text | 857 |
 | content | 358 |
 | none: takes a React element; an attribute holds text only | 34 |

package/files.json

@@ -1,7 +1,7 @@
 [
   {
     "path": "README.md",
-    "sha256": "12d0eb7f124ee7374415b65e836b0db782f0227850e8fa54d627ce63361ae5c1"
+    "sha256": "ddcdccf84d6da9746ea2a3278118ef3c5c39dcfed0eef0aeda883fcf59338ef0"
   },
   {
     "path": "components/Accordion/README.md",
@@ -545,7 +545,7 @@
   },
   {
     "path": "components/ToggleGroup/README.md",
-    "sha256": "4fe87b990175ad8b57a42229172b7113b075782e13c237aed41ef10dac72dee7"
+    "sha256": "491595cbc0134963d95f8946e184bd73cfca35b85a9cf97c8d96ac36f7d8f335"
   },
   {
     "path": "components/ToggleGroup/preview.html",
@@ -569,26 +569,26 @@
   },
   {
     "path": "components/bundle.css",
-    "sha256": "aedba3fad8e8e388fe76906a67ecdb65e137e920ab02a97c982c5e280500a7e2"
+    "sha256": "825c98e626eb3495f9a74985cda28d6424495a454843ee8c3e24f11c3c87c33b"
   },
   {
     "path": "components/bundle.js",
-    "sha256": "8d29bcf83e59d7aa499f6ca16fbd18b39cd0e33dcadf58ddd2c7805d58d7bfb7"
+    "sha256": "ed86d6b02bcb0680fd1820e1913ba24ab80f211575f78a7ed6680ff5a4eaf57d"
   },
   {
     "path": "components/index.d.ts",
-    "sha256": "35cb3a2bc069dd75fc575330aac54f7a52ab4c529d0ba3fa01ed3b2e3be2e9ec"
+    "sha256": "3a9ac4b610e1f710c44d5b3fae4370189088e18e9ccf078d172899491c168044"
   },
   {
     "path": "design-system.json",
-    "sha256": "953993668118d3116bae7c1304e396c404e8d42bbd0c13a293733dcc01df3c49"
+    "sha256": "ac176019190d8f49fae0b32ab19d162bc154a38f0a10d2eb44af753d549ca4f7"
   },
   {
     "path": "tokens.css",
-    "sha256": "4a417149a21d98c51e276cc49938b9c259334ce8bd7da769d27af847a37ca530"
+    "sha256": "5e39516b7872b3fc46d629315ad566b06e5e01589c85eafcd5e9e586ddf050b3"
   },
   {
     "path": "tokens.json",
-    "sha256": "06b18a9438782c0ad85af05392f848fb60b17343be227de3a1f436152e114e8d"
+    "sha256": "7d631a7f08f85eaeff57030f4aeb9dea7e4666366aa4e9e81fc0909dea311c0c"
   }
 ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nxds/claude-design",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "nxds as a Claude Design System: tokens, a live React 18 component bundle, prop types and previews, ready to publish.",
   "keywords": [
     "nxds",

package/project/README.md

@@ -28,7 +28,6 @@ nxds is neutral-first. Surfaces are near-white in Light and near-black in Dark.
 - Separate regions with `nx-color-border-default`. Use `nx-color-border-hairline` between rows.
 - Show focus with `nx-color-focus-default`, and `nx-color-focus-error` on an invalid control.
 - Plot chart series with `nx-color-chart-categorical-1` to `nx-color-chart-categorical-5`, in order.
-- Use the raw palette (`nx-color-blue-500` and its neighbours) only for one-off illustration. Components read semantic tokens only.
 
 Status is never colour alone. Every alert, badge and toast carries a word or an icon too.
 
@@ -59,13 +58,13 @@ Body copy is 14px. Keep one heading level per region, and step down one size at
 ## Shape and elevation
 
 - Round controls, inputs and cards with `nx-radius-md`. Buttons use `nx-radius-base`. Pills and avatars use `nx-radius-full`.
-- Draw every border at `nx-borderwidth-default`. Use `nx-borderwidth-thin` for hairlines.
+- Draw every border at `nx-borderwidth-default`, and a selected or focused edge at `nx-borderwidth-thick`.
 - Prefer borders to shadows. Cards sit at `nx-shadow-sm`. Popovers, menus, dialogs and sheets lift with `nx-shadow-lg` on a frosted `nx-color-popover-alpha` surface. Flat content takes no shadow.
 - Stack layers with the z-index tokens: `nx-z-index-sticky`, `nx-z-index-modal`, `nx-z-index-popover`, `nx-z-index-toast`.
 
 ## Motion
 
-Motion answers input and then gets out of the way. Popovers, menus and routine state changes take 200ms, small fades and indicators 150ms, and pressed states 100ms. Nothing bounces. The tokens file has no motion family, so motion lives in the components.
+Motion answers input and then gets out of the way. Popovers, menus and routine state changes take `nx-motion-duration-default` (200ms), small fades and indicators `nx-motion-duration-fast` (150ms), and pressed states `nx-motion-duration-faster` (100ms). Elements ease in on `nx-motion-ease-enter`. Nothing bounces.
 
 ## Iconography
 
@@ -88,7 +87,41 @@ The system has a Light and a Dark theme. Set `data-theme="dark"` on `<html>` to
 
 ## Appearance
 
-This system shows the default nxds appearance: a near-black brand colour on zinc surfaces, default density, subtle corners, quiet shadows and normal strokes. nxds apps can change these at runtime. Brand colour, surface tone, contrast, density, corners, elevation and stroke are appearance settings, not tokens, so they aren't editable here.
+This system shows the default nxds appearance: a near-black brand colour on zinc surfaces, default density, subtle corners, quiet shadows and normal strokes.
+
+Set an attribute on any element to change density, corners, elevation or stroke for everything inside it:
+
+| Attribute | Values |
+| --- | --- |
+| `data-density` | `tight`, `compact`, `default`, `comfortable`, `relaxed`, `spacious` |
+| `data-radius` | `square`, `subtle`, `smooth`, `round`, `extra-round` |
+| `data-shadow` | `flat`, `quiet`, `soft`, `standard`, `strong` |
+| `data-borderwidth` | `fine`, `normal`, `strong` |
+
+Brand colour, surface tone and contrast are app-wide settings in nxds apps. They have no attribute.
+
+## On a Design canvas
+
+Install these files with the system under `project/ds/<folder>/`. Link them in each artboard right after the `support.js` line, in this order:
+
+1. `tokens.css`: every token value, both themes and the text style classes. The components read their variables from it.
+2. `components/bundle.css`: the component styles and the appearance presets. It sets a token only inside a preset attribute.
+3. `components/bundle.js`: the components, as `window.Nxds`. The artboard supplies React 18, so skip `react` and `react-dom`.
+
+```html
+<link rel="stylesheet" href="ds/<folder>/tokens.css" />
+<link rel="stylesheet" href="ds/<folder>/components/bundle.css" />
+<script src="ds/<folder>/components/bundle.js"></script>
+```
+
+Add one `../` in front of each path for each folder the artboard is in.
+
+The System page is read-only for this system. An edit there recompiles tokens.css without the theme layer, the font variables and the text style rules, so presets, fonts and text styles stop applying. Change the token in nxds and export again.
+
+- Switch to dark with `data-theme="dark"` or the `dark` class on the artboard's root.
+- Set a `data-density`, `data-radius`, `data-borderwidth` or `data-shadow` attribute from Appearance on any element to change everything inside it.
+- Override a token by setting its variable on an element, such as `style="--nx-radius-md: 8px"`. Components inside that element follow.
+- Read `components/<Name>/README.md` before you mount a component. It lists the component's parts and props.
 
 ## Canvas rules
 

package/project/components/ToggleGroup/README.md

@@ -46,7 +46,7 @@ Attributes set props, kebab-case to camelCase. Element content becomes `children
 | `asChild` | `boolean` |  | toggle |
 | `variant` | `"default" \| "outline" \| "outline-primary"` | `"default"` | dropdown |
 | `size` | `"default" \| "sm" \| "lg"` | `"default"` | dropdown |
-| `spacing` | `number` | `0` | number |
+| `spacing` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 0.5 \| 1.5 \| 2.5 \| 3.5 \| 9 \| 10 \| 11 \| 12 \| 14 \| 16 \| 20 \| 24 \| 28 \| 32 \| 36 \| 40 \| 44 \| 48 \| 52 \| 56 \| 60 \| 64 \| 72 \| 80 \| 96` | `0` | dropdown |
 
 ### ToggleGroupItem