@handamade/psi-react 0.7.0 → 0.7.1

package/dist/Tag/Tag.d.ts

@@ -1,6 +1,8 @@
 import type { HTMLAttributes, Ref } from "react";
 type Variant = "neutral" | "accent" | "success" | "warning" | "danger";
 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Label content. */
+    children?: React.ReactNode;
     /** Semantic color variant. @default "neutral" */
     variant?: Variant;
     /** Use tinted background with semantic foreground. @default false */

package/dist/Tag/Tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGjD,KAAK,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEvE,MAAM,WAAW,QAAS,SAAQ,cAAc,CAAC,eAAe,CAAC;IAC/D,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qEAAqE;IACrE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,wDAAwD;IACxD,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAkBD;8BAC8B;AAC9B,wBAAgB,GAAG,CAAC,EAClB,OAAmB,EACnB,MAAc,EACd,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,IAAI,EACR,EAAE,QAAQ,+BAkCV"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGjD,KAAK,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEvE,MAAM,WAAW,QAAS,SAAQ,cAAc,CAAC,eAAe,CAAC;IAC/D,qBAAqB;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qEAAqE;IACrE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,wDAAwD;IACxD,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAkBD;8BAC8B;AAC9B,wBAAgB,GAAG,CAAC,EAClB,OAAmB,EACnB,MAAc,EACd,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,IAAI,EACR,EAAE,QAAQ,+BAkCV"}

package/dist/manifest.json

@@ -502,6 +502,13 @@
       "description": "Compact label for status or category; semantic variants, optional subtle tint and dismiss button.",
       "slots": [],
       "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Label content."
+        },
         {
           "name": "variant",
           "type": "\"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\"",

package/docs/AspectRatio.md

@@ -13,7 +13,7 @@ Fixed-aspect-ratio box that sizes its child media.
 
 ## Theming
 
-Override `--psi-aspect-ratio-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).
+This component has no `--psi-aspect-ratio-*` tokens — its styling binds scale tokens only, so there is nothing component-scoped to override. Theme changes reach it through the semantic tokens of its children and surroundings.
 
 
 

package/docs/Card.md

@@ -15,7 +15,7 @@ Content container with an optional edge-to-edge media slot; `stacked` (media abo
 
 ## Theming
 
-Override `--psi-card-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).
+Override `--psi-card-*` custom properties at any scope.
 
 ## Variant guidance
 

package/docs/Checkbox.md

@@ -20,7 +20,7 @@ Native checkbox with a built-in label; for independent binary choices.
 
 ## Theming
 
-Override `--psi-checkbox-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).
+Override `--psi-checkbox-*` custom properties at any scope.
 
 
 

package/docs/Dialog.md

@@ -27,7 +27,7 @@ Rendered with showModal(): aria-modal, inert background and focus restore come f
 
 ## Theming
 
-Override `--psi-dialog-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).
+Override `--psi-dialog-*` custom properties at any scope.
 
 
 

package/docs/Field.md

@@ -26,7 +26,7 @@ Wires label association, aria-describedby and aria-invalid into a wrapped Input/
 
 ## Theming
 
-Override `--psi-field-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).
+Override `--psi-field-*` custom properties at any scope.
 
 
 

package/docs/Panel.md

@@ -21,7 +21,7 @@ Plain <div> container with no implicit role. Pass aria-* host props if the panel
 
 ## Theming
 
-Override `--psi-panel-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).
+Override `--psi-panel-*` custom properties at any scope.
 
 
 

package/docs/Switch.md

@@ -20,7 +20,7 @@ On/off toggle (`role="switch"`) with a built-in label; for settings that take ef
 
 ## Theming
 
-Override `--psi-switch-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).
+Override `--psi-switch-*` custom properties at any scope.
 
 
 

package/docs/Tag.md

@@ -7,6 +7,7 @@ Compact label for status or category; semantic variants, optional subtle tint an
 
 | Prop | Type | Default | Required | Description |
 |---|---|---|---|---|
+| `children` | `ReactNode` | — | no | Label content. |
 | `variant` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger"` | neutral | no | Semantic color variant. |
 | `subtle` | `boolean` | false | no | Use tinted background with semantic foreground. |
 | `onDismiss` | `(() => void)` | — | no | When provided, renders a dismiss button that calls this handler. |
@@ -23,7 +24,7 @@ Passive label otherwise; not in the tab order without onDismiss.
 
 ## Theming
 
-Override `--psi-tag-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).
+Override `--psi-tag-*` custom properties at any scope.
 
 ## Variant guidance
 

package/docs/Toolbar.md

@@ -21,7 +21,7 @@ With aria-label it renders role=group so the control cluster announces with a na
 
 ## Theming
 
-Override `--psi-toolbar-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).
+This component has no `--psi-toolbar-*` tokens — its styling binds scale tokens only, so there is nothing component-scoped to override. Theme changes reach it through the semantic tokens of its children and surroundings.
 
 
 

package/docs/Tooltip.md

@@ -22,7 +22,7 @@ Hover opens after a short delay; content is linked via aria-describedby while vi
 
 ## Theming
 
-Override `--psi-tooltip-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).
+Override `--psi-tooltip-*` custom properties at any scope.
 
 
 

package/llms.txt

@@ -45,7 +45,7 @@
 - Native pass-through: components spread unlisted props onto their underlying element (Input → `<input>`, Select → `<select>`, Button → `<button>`/`<a>`), so `value`, `onChange`, `type`, `id`, `autoComplete`, `checked` etc. all work even though manifest.json lists only the component-specific props. Exception: Tooltip takes no host props — put handlers/attributes on its trigger child.
 - Theming, programmatic: the standard setup is `data-psi-theme` on `<html>`. From JS, set it once at app init: `document.documentElement.dataset.psiTheme = "dark"` (React: in a root-level effect). Theme CSS does NOT paint the page background — paint `background: var(--psi-bg-primary)` at your app root yourself. For a themed subtree, set `data-psi-theme` on a wrapper and paint its background the same way; brand font combos do not reach nested subtrees (see guidance.fonts.scope).
 - Size selection: 32 is the default (compact UI); 40 for comfortable forms and marketing pages; 24 for inline/table-row actions; 48 for hero CTAs.
-- Tags & the accent rule (D40): Tags are passive labels — they do NOT count against "one accent per visual group" (that rule governs buttons/CTAs). Badge mapping: highlight (e.g. a plan badge) → `accent-subtle`; meta → `neutral-subtle`; status → `success`/`warning`/`danger`.
+- Tags & the accent rule (D40): Tags are passive labels — they do NOT count against "one accent per visual group" (that rule governs buttons/CTAs). Badge mapping: highlight (e.g. a plan badge) → `accent-subtle`; meta → `neutral-subtle`; status → `success`/`warning`/`danger`. On Tag, `subtle` is a boolean prop — `accent-subtle` is spelled `variant="accent" subtle` (Tag's variant union has no `-subtle` entries).
 - CSS import order: all DS stylesheets are order-independent — base.css opens with an explicit `@layer psi.base, psi.theme, psi.components, psi.utilities;` statement. Recommended listing for readability: base → theme → components → utilities → @handamade/psi-react/styles.
 - Widths: content widths are app-level; the system tokenizes the page container only (`--psi-container-max`). Dialog is the first component with its own width union — `width` is `400 | 560 | 720` (default 560).
 - Full semantic token roster: `@handamade/psi-tokens/resolved/<theme>.json` has every token with resolved values — this file lists only the patterns.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handamade/psi-react",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -39,7 +39,7 @@
     "tsx": "^4.22.4",
     "vite": "^6.0.0",
     "vitest": "^3.2.6",
-    "@handamade/psi-tokens": "0.7.0"
+    "@handamade/psi-tokens": "0.7.1"
   },
   "scripts": {
     "build": "vite build && tsc -p tsconfig.build.json && tsx scripts/emit-manifest.ts && tsx scripts/emit-patterns.ts && tsx scripts/emit-docs.ts",