@handamade/psi-react 0.4.1 → 0.5.0

package/dist/manifest.json

@@ -3,6 +3,7 @@
     {
       "name": "Button",
       "description": "Action trigger. With `href` renders an anchor with identical styling (D33); `disabled` then maps to `aria-disabled`.",
+      "slots": [],
       "props": [
         {
           "name": "variant",
@@ -58,6 +59,7 @@
     {
       "name": "IconButton",
       "description": "Square icon-only button; same variant/size/href contract as Button. Give it an accessible name (`aria-label`).",
+      "slots": [],
       "props": [
         {
           "name": "variant",
@@ -113,6 +115,7 @@
     {
       "name": "Card",
       "description": "Content container with an optional edge-to-edge media slot; `stacked` (media above body) or `featured` (media beside body) layout.",
+      "slots": [],
       "props": [
         {
           "name": "variant",
@@ -153,7 +156,8 @@
     },
     {
       "name": "Input",
-      "description": "Single-line text input with pixel-true heights (24–48) and an error state.",
+      "description": "Single-line text input with pixel-true heights (24–48) and an error state. Inside a Field, id/aria-describedby/aria-invalid/required are wired automatically (D49).",
+      "slots": [],
       "props": [
         {
           "name": "size",
@@ -167,7 +171,7 @@
           "type": "boolean",
           "required": false,
           "default": false,
-          "description": "Show error styling."
+          "description": "Show error styling. Inside a Field, the Field's error also lights this."
         },
         {
           "name": "ref",
@@ -187,7 +191,8 @@
     },
     {
       "name": "Select",
-      "description": "Styled native `<select>` with pixel-true heights (24–48) and an error state.",
+      "description": "Styled native `<select>` with pixel-true heights (24–48) and an error state. Inside a Field, id/aria-describedby/aria-invalid/required are wired automatically (D49).",
+      "slots": [],
       "props": [
         {
           "name": "size",
@@ -201,7 +206,7 @@
           "type": "boolean",
           "required": false,
           "default": false,
-          "description": "Show error styling."
+          "description": "Show error styling. Inside a Field, the Field's error also lights this."
         },
         {
           "name": "ref",
@@ -219,9 +224,166 @@
         }
       ]
     },
+    {
+      "name": "Field",
+      "description": "Labeled form-row wrapper: label above, control, one message line below — description normally, error when set (aria-live). Auto-wires id/aria-describedby/aria-invalid into Input and Select (D49).",
+      "slots": [],
+      "props": [
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Label content; renders a <label> (or <legend> in group mode)."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Helper line under the control; replaced by error when error is set."
+        },
+        {
+          "name": "error",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Error content; when truthy it replaces the description and switches the\nfield (and a wrapped Input/Select) into error state."
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "required": false,
+          "default": false,
+          "description": "Renders the required marker and flows `required` to the control."
+        },
+        {
+          "name": "group",
+          "type": "boolean",
+          "required": false,
+          "default": false,
+          "description": "Group mode: fieldset/legend wrapping several self-labeled controls\n(Checkbox/Switch); the message describes the whole group."
+        },
+        {
+          "name": "htmlFor",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Override the generated control id (pair it with the same id on the control)."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLDivElement | HTMLFieldSetElement>",
+          "required": false,
+          "default": null,
+          "description": "Forwarded ref to the root element."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Additional CSS class name(s) merged onto the component's root element."
+        }
+      ]
+    },
+    {
+      "name": "Dialog",
+      "description": "Modal dialog on the native <dialog> top layer: focus trap, aria-modal and focus restore come from the platform; title/footer slots, Esc/backdrop/ close-button dismissal via onClose(reason) (D50).",
+      "slots": [
+        {
+          "name": "title",
+          "accepts": {
+            "contracts": [
+              "inline-content"
+            ]
+          },
+          "cardinality": "0..1",
+          "order": 1
+        },
+        {
+          "name": "body",
+          "accepts": {},
+          "cardinality": "0..*",
+          "order": 2
+        },
+        {
+          "name": "footer",
+          "accepts": {
+            "components": [
+              "Button"
+            ],
+            "contracts": [
+              "inline-content"
+            ]
+          },
+          "cardinality": "0..*",
+          "order": 3
+        }
+      ],
+      "props": [
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": true,
+          "default": null,
+          "description": "Controlled open state; syncs to showModal()/close()."
+        },
+        {
+          "name": "onClose",
+          "type": "(reason: \"esc\" | \"backdrop\" | \"close-button\") => void",
+          "required": true,
+          "default": null,
+          "description": "Called on every dismissal attempt with its source; the consumer flips `open`."
+        },
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Heading; renders an <h2> wired to aria-labelledby. Without it, pass aria-label."
+        },
+        {
+          "name": "footer",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Action row (Buttons — one accent per group, danger for destructive)."
+        },
+        {
+          "name": "width",
+          "type": "400 | 560 | 720",
+          "required": false,
+          "default": 560,
+          "description": "Panel width in px (400 | 560 | 720)."
+        },
+        {
+          "name": "dismissible",
+          "type": "boolean",
+          "required": false,
+          "default": true,
+          "description": "false = no close button, Esc and backdrop swallowed — footer is the only exit."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLDialogElement>",
+          "required": false,
+          "default": null,
+          "description": "Forwarded ref to the underlying <dialog> element."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Additional CSS class name(s) merged onto the component's root element."
+        }
+      ]
+    },
     {
       "name": "Checkbox",
       "description": "Native checkbox with a built-in label; for independent binary choices.",
+      "slots": [],
       "props": [
         {
           "name": "children",
@@ -249,6 +411,7 @@
     {
       "name": "Switch",
       "description": "On/off toggle (`role=\"switch\"`) with a built-in label; for settings that take effect immediately.",
+      "slots": [],
       "props": [
         {
           "name": "children",
@@ -276,6 +439,7 @@
     {
       "name": "Tag",
       "description": "Compact label for status or category; semantic variants, optional subtle tint and dismiss button.",
+      "slots": [],
       "props": [
         {
           "name": "variant",
@@ -317,6 +481,7 @@
     {
       "name": "Tooltip",
       "description": "Short hover/focus hint attached to a single trigger element.",
+      "slots": [],
       "props": [
         {
           "name": "content",
@@ -344,6 +509,7 @@
     {
       "name": "NavBar",
       "description": "Top navigation bar with brand, nav-link, and trailing-action slots.",
+      "slots": [],
       "props": [
         {
           "name": "brand",
@@ -385,6 +551,7 @@
     {
       "name": "AspectRatio",
       "description": "Fixed-aspect-ratio box that sizes its child media.",
+      "slots": [],
       "props": [
         {
           "name": "ratio",

package/dist/styles.css

@@ -1 +1 @@
-._button_m8fis_3{display:inline-flex;align-items:center;justify-content:center;gap:var(--psi-space-6);border:none;border-radius:var(--psi-radius-8);cursor:pointer;font-family:var(--psi-font-sans);white-space:nowrap;text-decoration:none;-webkit-user-select:none;user-select:none;transition:background-color var(--psi-duration-150) var(--psi-ease-standard),color var(--psi-duration-150) var(--psi-ease-standard)}._button_m8fis_3:focus-visible{outline:2px solid var(--psi-button-focus-ring);outline-offset:2px}._button_m8fis_3:disabled{opacity:.4;cursor:not-allowed}._button_m8fis_3._disabled_m8fis_31{opacity:.4;cursor:not-allowed;pointer-events:none}._size24_m8fis_39{height:var(--psi-size-24);padding-inline:var(--psi-space-8);font:var(--psi-button-font, var(--psi-text-12-16-medium))}._size32_m8fis_45{height:var(--psi-size-32);padding-inline:var(--psi-space-12);font:var(--psi-button-font, var(--psi-text-14-20-medium))}._size40_m8fis_51{height:var(--psi-size-40);padding-inline:var(--psi-space-16);font:var(--psi-button-font, var(--psi-text-16-24-medium))}._size48_m8fis_57{height:var(--psi-size-48);padding-inline:var(--psi-space-20);font:var(--psi-button-font, var(--psi-text-18-28-medium))}._accent_m8fis_66{background:var(--psi-button-accent-bg);color:var(--psi-button-accent-fg)}._accent_m8fis_66:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-accent-bg-hover)}._accent_m8fis_66:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-accent-bg-active)}._accentSubtle_m8fis_78{background:var(--psi-button-accent-subtle-bg);color:var(--psi-button-accent-subtle-fg)}._accentSubtle_m8fis_78:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-accent-subtle-bg-hover)}._accentSubtle_m8fis_78:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-accent-subtle-bg-active)}._neutral_m8fis_90{background:var(--psi-button-neutral-bg);color:var(--psi-button-neutral-fg)}._neutral_m8fis_90:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-neutral-bg-hover)}._neutral_m8fis_90:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-neutral-bg-active)}._neutralSubtle_m8fis_102{background:var(--psi-button-neutral-subtle-bg);color:var(--psi-button-neutral-subtle-fg)}._neutralSubtle_m8fis_102:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-neutral-subtle-bg-hover)}._neutralSubtle_m8fis_102:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-neutral-subtle-bg-active)}._ghost_m8fis_114{background:var(--psi-button-ghost-bg);color:var(--psi-button-ghost-fg)}._ghost_m8fis_114:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-ghost-bg-hover)}._ghost_m8fis_114:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-ghost-bg-active)}._danger_m8fis_126{background:var(--psi-button-danger-bg);color:var(--psi-button-danger-fg)}._danger_m8fis_126:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-danger-bg-hover)}._danger_m8fis_126:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-danger-bg-active)}._dangerSubtle_m8fis_138{background:var(--psi-button-danger-subtle-bg);color:var(--psi-button-danger-subtle-fg)}._dangerSubtle_m8fis_138:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-danger-subtle-bg-hover)}._dangerSubtle_m8fis_138:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-danger-subtle-bg-active)}._outline_m8fis_150{background:var(--psi-button-outline-bg);color:var(--psi-button-outline-fg);border:1px solid var(--psi-button-outline-border)}._outline_m8fis_150:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-outline-bg-hover);color:var(--psi-button-outline-fg-hover);border-color:transparent}._outline_m8fis_150:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-outline-bg-active)}._iconButton_1dldx_3{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--psi-radius-8);cursor:pointer;padding:0;text-decoration:none;-webkit-user-select:none;user-select:none;transition:background-color var(--psi-duration-150) var(--psi-ease-standard),color var(--psi-duration-150) var(--psi-ease-standard)}._iconButton_1dldx_3:focus-visible{outline:2px solid var(--psi-button-focus-ring);outline-offset:2px}._iconButton_1dldx_3:disabled{opacity:.4;cursor:not-allowed}._iconButton_1dldx_3._disabled_1dldx_29{opacity:.4;cursor:not-allowed;pointer-events:none}._size24_1dldx_37{width:var(--psi-size-24);height:var(--psi-size-24)}._size32_1dldx_42{width:var(--psi-size-32);height:var(--psi-size-32)}._size40_1dldx_47{width:var(--psi-size-40);height:var(--psi-size-40)}._size48_1dldx_52{width:var(--psi-size-48);height:var(--psi-size-48)}._accent_1dldx_60{background:var(--psi-button-accent-bg);color:var(--psi-button-accent-fg)}._accent_1dldx_60:hover:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-accent-bg-hover)}._accent_1dldx_60:active:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-accent-bg-active)}._neutral_1dldx_72{background:var(--psi-button-neutral-bg);color:var(--psi-button-neutral-fg)}._neutral_1dldx_72:hover:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-neutral-bg-hover)}._neutral_1dldx_72:active:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-neutral-bg-active)}._ghost_1dldx_84{background:var(--psi-button-ghost-bg);color:var(--psi-button-ghost-fg)}._ghost_1dldx_84:hover:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-ghost-bg-hover)}._ghost_1dldx_84:active:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-ghost-bg-active)}._danger_1dldx_96{background:var(--psi-button-danger-bg);color:var(--psi-button-danger-fg)}._danger_1dldx_96:hover:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-danger-bg-hover)}._danger_1dldx_96:active:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-danger-bg-active)}._card_1btb3_1{background:var(--psi-card-bg);border:1px solid var(--psi-card-border);border-radius:var(--psi-card-radius);overflow:hidden}._stacked_1btb3_8{display:flex;flex-direction:column;gap:var(--psi-card-gap)}._featured_1btb3_10{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--psi-card-gap);align-items:start}@media(max-width:960px){._featured_1btb3_10{grid-template-columns:1fr}}._media_1btb3_22{min-width:0}._body_1btb3_23{min-width:0;display:flex;flex-direction:column;gap:var(--psi-card-gap);padding:var(--psi-card-gap)}._hoverLift_1btb3_31{transition:transform var(--psi-duration-350) var(--psi-ease-standard)}._hoverLift_1btb3_31:hover{transform:translateY(-6px)}._navbar_1uory_1{position:sticky;top:0;z-index:var(--psi-z-nav);background:var(--psi-navbar-bg);backdrop-filter:blur(var(--psi-navbar-blur));-webkit-backdrop-filter:blur(var(--psi-navbar-blur));border-bottom:1px solid var(--psi-navbar-border)}._inner_1uory_11{display:flex;align-items:center;gap:var(--psi-space-24);height:var(--psi-navbar-height)}._brand_1uory_18{display:flex;align-items:center}._links_1uory_19{display:flex;align-items:center;gap:var(--psi-space-20);margin-inline-start:auto}._links_1uory_19 a,._brand_1uory_18 a{text-decoration:none;transition:color var(--psi-duration-150) var(--psi-ease-soft)}._links_1uory_19 a{color:var(--psi-navbar-link-fg)}._links_1uory_19 a:hover,._brand_1uory_18 a{color:var(--psi-navbar-link-fg-hover)}._links_1uory_19 a:focus-visible,._brand_1uory_18 a:focus-visible{outline:2px solid var(--psi-navbar-focus-ring);outline-offset:2px}._actions_1uory_49{display:flex;align-items:center;gap:var(--psi-space-8)}._frame_et4fc_1{overflow:hidden}._frame_et4fc_1>img,._frame_et4fc_1>video{width:100%;height:100%;object-fit:cover;display:block}._input_8tzcf_3{display:block;width:100%;border:1px solid var(--psi-input-border);border-radius:var(--psi-radius-8);background:var(--psi-input-bg);color:var(--psi-input-fg);font-family:var(--psi-font-sans);padding-inline:var(--psi-space-8);transition:border-color var(--psi-duration-150) var(--psi-ease-standard),outline var(--psi-duration-150) var(--psi-ease-standard)}._input_8tzcf_3::placeholder{color:var(--psi-input-placeholder)}._input_8tzcf_3:hover:not(:disabled):not(:focus){border-color:var(--psi-input-border-hover)}._input_8tzcf_3:focus{outline:2px solid var(--psi-input-focus-ring);outline-offset:-1px;border-color:transparent}._input_8tzcf_3:disabled{opacity:.4;cursor:not-allowed}._size24_8tzcf_38{height:var(--psi-size-24);font:var(--psi-text-12-16-regular)}._size32_8tzcf_43{height:var(--psi-size-32);font:var(--psi-text-14-20-regular)}._size40_8tzcf_48{height:var(--psi-size-40);font:var(--psi-text-16-24-regular)}._size48_8tzcf_53{height:var(--psi-size-48);font:var(--psi-text-18-28-medium)}._error_8tzcf_60{border-color:var(--psi-input-border-error)}._error_8tzcf_60:hover:not(:disabled):not(:focus){border-color:var(--psi-input-border-error)}._select_140kg_3{display:block;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--psi-select-border);border-radius:var(--psi-radius-8);background-color:var(--psi-select-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--psi-space-8) center;color:var(--psi-select-fg);font-family:var(--psi-font-sans);padding-inline-start:var(--psi-space-8);padding-inline-end:var(--psi-space-24);cursor:pointer;transition:border-color var(--psi-duration-150) var(--psi-ease-standard),outline var(--psi-duration-150) var(--psi-ease-standard)}._select_140kg_3:hover:not(:disabled):not(:focus){border-color:var(--psi-select-border-hover)}._select_140kg_3:focus{outline:2px solid var(--psi-select-focus-ring);outline-offset:-1px;border-color:transparent}._select_140kg_3:disabled{opacity:.4;cursor:not-allowed}._size24_140kg_40{height:var(--psi-size-24);font:var(--psi-text-12-16-regular)}._size32_140kg_45{height:var(--psi-size-32);font:var(--psi-text-14-20-regular)}._size40_140kg_50{height:var(--psi-size-40);font:var(--psi-text-16-24-regular)}._size48_140kg_55{height:var(--psi-size-48);font:var(--psi-text-18-28-medium)}._error_140kg_62{border-color:var(--psi-select-border-error)}._error_140kg_62:hover:not(:disabled):not(:focus){border-color:var(--psi-select-border-error)}._label_n457n_3{display:inline-flex;align-items:center;gap:var(--psi-space-8);cursor:pointer;-webkit-user-select:none;user-select:none;font:var(--psi-text-14-20-regular);color:var(--psi-checkbox-fg)}._disabled_n457n_13{opacity:.4;cursor:not-allowed}._input_n457n_20{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._indicator_n457n_34{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;border:1px solid var(--psi-checkbox-box-border);border-radius:var(--psi-radius-4);background:var(--psi-checkbox-box-bg);transition:background-color var(--psi-duration-150) var(--psi-ease-standard),border-color var(--psi-duration-150) var(--psi-ease-standard)}._input_n457n_20:checked+._indicator_n457n_34{background:var(--psi-checkbox-box-bg-checked);border-color:var(--psi-checkbox-box-border-checked)}._input_n457n_20:checked+._indicator_n457n_34:after{content:"";display:block;width:4px;height:8px;border:solid var(--psi-checkbox-check-fg);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-.5px,-.5px)}._input_n457n_20:focus-visible+._indicator_n457n_34{outline:2px solid var(--psi-checkbox-focus-ring);outline-offset:2px}._text_n457n_74{color:var(--psi-checkbox-fg)}._label_jru2c_3{display:inline-flex;align-items:center;gap:var(--psi-space-8);cursor:pointer;-webkit-user-select:none;user-select:none;font:var(--psi-text-14-20-regular);color:var(--psi-switch-fg)}._disabled_jru2c_13{opacity:.4;cursor:not-allowed}._input_jru2c_20{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._track_jru2c_34{position:relative;display:inline-flex;align-items:center;width:36px;height:20px;flex-shrink:0;border-radius:var(--psi-radius-full);background:var(--psi-switch-track-bg);transition:background-color var(--psi-duration-150) var(--psi-ease-standard)}._input_jru2c_20:checked+._track_jru2c_34{background:var(--psi-switch-track-bg-checked)}._input_jru2c_20:focus-visible+._track_jru2c_34{outline:2px solid var(--psi-switch-focus-ring);outline-offset:2px}._thumb_jru2c_58{position:absolute;width:16px;height:16px;border-radius:var(--psi-radius-full);background:var(--psi-switch-thumb-bg);left:2px;transition:left var(--psi-duration-150) var(--psi-ease-standard);box-shadow:0 1px 2px #00000029}._input_jru2c_20:checked+._track_jru2c_34 ._thumb_jru2c_58{left:18px}._text_jru2c_75{color:var(--psi-switch-fg)}._tag_3oysa_3{display:inline-flex;align-items:center;gap:var(--psi-space-4);height:24px;padding-inline:var(--psi-space-8);border-radius:var(--psi-radius-full);font:var(--psi-text-12-16-medium);white-space:nowrap;-webkit-user-select:none;user-select:none}._dismiss_3oysa_17{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:none;color:inherit;cursor:pointer;opacity:.7;margin-inline-start:var(--psi-space-2);margin-inline-end:calc(-1 * var(--psi-space-4));border-radius:var(--psi-radius-full)}._dismiss_3oysa_17:hover{opacity:1}._dismiss_3oysa_17:focus-visible{outline:2px solid var(--psi-tag-focus-ring);outline-offset:2px}._neutral_3oysa_43{background:var(--psi-tag-neutral-bg);color:var(--psi-tag-neutral-fg)}._accent_3oysa_48{background:var(--psi-tag-accent-bg);color:var(--psi-tag-accent-fg)}._success_3oysa_53{background:var(--psi-tag-success-bg);color:var(--psi-tag-success-fg)}._warning_3oysa_58{background:var(--psi-tag-warning-bg);color:var(--psi-tag-warning-fg)}._danger_3oysa_63{background:var(--psi-tag-danger-bg);color:var(--psi-tag-danger-fg)}._neutralSubtle_3oysa_70{background:var(--psi-tag-neutral-subtle-bg);color:var(--psi-tag-neutral-subtle-fg)}._accentSubtle_3oysa_75{background:var(--psi-tag-accent-subtle-bg);color:var(--psi-tag-accent-subtle-fg)}._successSubtle_3oysa_80{background:var(--psi-tag-success-subtle-bg);color:var(--psi-tag-success-subtle-fg)}._warningSubtle_3oysa_85{background:var(--psi-tag-warning-subtle-bg);color:var(--psi-tag-warning-subtle-fg)}._dangerSubtle_3oysa_90{background:var(--psi-tag-danger-subtle-bg);color:var(--psi-tag-danger-subtle-fg)}._wrapper_17qua_3{position:relative;display:inline-flex}._tooltip_17qua_10{position:absolute;z-index:var(--psi-z-tooltip);padding:var(--psi-space-4) var(--psi-space-8);border-radius:var(--psi-radius-6);background:var(--psi-tooltip-bg);color:var(--psi-tooltip-fg);font:var(--psi-text-12-16-regular);white-space:nowrap;pointer-events:none}._top_17qua_24{bottom:100%;left:50%;transform:translate(-50%);margin-bottom:var(--psi-space-4)}._bottom_17qua_31{top:100%;left:50%;transform:translate(-50%);margin-top:var(--psi-space-4)}._left_17qua_38{right:100%;top:50%;transform:translateY(-50%);margin-right:var(--psi-space-4)}._right_17qua_45{left:100%;top:50%;transform:translateY(-50%);margin-left:var(--psi-space-4)}
+._button_m8fis_3{display:inline-flex;align-items:center;justify-content:center;gap:var(--psi-space-6);border:none;border-radius:var(--psi-radius-8);cursor:pointer;font-family:var(--psi-font-sans);white-space:nowrap;text-decoration:none;-webkit-user-select:none;user-select:none;transition:background-color var(--psi-duration-150) var(--psi-ease-standard),color var(--psi-duration-150) var(--psi-ease-standard)}._button_m8fis_3:focus-visible{outline:2px solid var(--psi-button-focus-ring);outline-offset:2px}._button_m8fis_3:disabled{opacity:.4;cursor:not-allowed}._button_m8fis_3._disabled_m8fis_31{opacity:.4;cursor:not-allowed;pointer-events:none}._size24_m8fis_39{height:var(--psi-size-24);padding-inline:var(--psi-space-8);font:var(--psi-button-font, var(--psi-text-12-16-medium))}._size32_m8fis_45{height:var(--psi-size-32);padding-inline:var(--psi-space-12);font:var(--psi-button-font, var(--psi-text-14-20-medium))}._size40_m8fis_51{height:var(--psi-size-40);padding-inline:var(--psi-space-16);font:var(--psi-button-font, var(--psi-text-16-24-medium))}._size48_m8fis_57{height:var(--psi-size-48);padding-inline:var(--psi-space-20);font:var(--psi-button-font, var(--psi-text-18-28-medium))}._accent_m8fis_66{background:var(--psi-button-accent-bg);color:var(--psi-button-accent-fg)}._accent_m8fis_66:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-accent-bg-hover)}._accent_m8fis_66:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-accent-bg-active)}._accentSubtle_m8fis_78{background:var(--psi-button-accent-subtle-bg);color:var(--psi-button-accent-subtle-fg)}._accentSubtle_m8fis_78:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-accent-subtle-bg-hover)}._accentSubtle_m8fis_78:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-accent-subtle-bg-active)}._neutral_m8fis_90{background:var(--psi-button-neutral-bg);color:var(--psi-button-neutral-fg)}._neutral_m8fis_90:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-neutral-bg-hover)}._neutral_m8fis_90:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-neutral-bg-active)}._neutralSubtle_m8fis_102{background:var(--psi-button-neutral-subtle-bg);color:var(--psi-button-neutral-subtle-fg)}._neutralSubtle_m8fis_102:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-neutral-subtle-bg-hover)}._neutralSubtle_m8fis_102:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-neutral-subtle-bg-active)}._ghost_m8fis_114{background:var(--psi-button-ghost-bg);color:var(--psi-button-ghost-fg)}._ghost_m8fis_114:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-ghost-bg-hover)}._ghost_m8fis_114:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-ghost-bg-active)}._danger_m8fis_126{background:var(--psi-button-danger-bg);color:var(--psi-button-danger-fg)}._danger_m8fis_126:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-danger-bg-hover)}._danger_m8fis_126:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-danger-bg-active)}._dangerSubtle_m8fis_138{background:var(--psi-button-danger-subtle-bg);color:var(--psi-button-danger-subtle-fg)}._dangerSubtle_m8fis_138:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-danger-subtle-bg-hover)}._dangerSubtle_m8fis_138:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-danger-subtle-bg-active)}._outline_m8fis_150{background:var(--psi-button-outline-bg);color:var(--psi-button-outline-fg);border:1px solid var(--psi-button-outline-border)}._outline_m8fis_150:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-outline-bg-hover);color:var(--psi-button-outline-fg-hover);border-color:transparent}._outline_m8fis_150:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-outline-bg-active)}._iconButton_1dldx_3{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--psi-radius-8);cursor:pointer;padding:0;text-decoration:none;-webkit-user-select:none;user-select:none;transition:background-color var(--psi-duration-150) var(--psi-ease-standard),color var(--psi-duration-150) var(--psi-ease-standard)}._iconButton_1dldx_3:focus-visible{outline:2px solid var(--psi-button-focus-ring);outline-offset:2px}._iconButton_1dldx_3:disabled{opacity:.4;cursor:not-allowed}._iconButton_1dldx_3._disabled_1dldx_29{opacity:.4;cursor:not-allowed;pointer-events:none}._size24_1dldx_37{width:var(--psi-size-24);height:var(--psi-size-24)}._size32_1dldx_42{width:var(--psi-size-32);height:var(--psi-size-32)}._size40_1dldx_47{width:var(--psi-size-40);height:var(--psi-size-40)}._size48_1dldx_52{width:var(--psi-size-48);height:var(--psi-size-48)}._accent_1dldx_60{background:var(--psi-button-accent-bg);color:var(--psi-button-accent-fg)}._accent_1dldx_60:hover:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-accent-bg-hover)}._accent_1dldx_60:active:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-accent-bg-active)}._neutral_1dldx_72{background:var(--psi-button-neutral-bg);color:var(--psi-button-neutral-fg)}._neutral_1dldx_72:hover:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-neutral-bg-hover)}._neutral_1dldx_72:active:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-neutral-bg-active)}._ghost_1dldx_84{background:var(--psi-button-ghost-bg);color:var(--psi-button-ghost-fg)}._ghost_1dldx_84:hover:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-ghost-bg-hover)}._ghost_1dldx_84:active:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-ghost-bg-active)}._danger_1dldx_96{background:var(--psi-button-danger-bg);color:var(--psi-button-danger-fg)}._danger_1dldx_96:hover:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-danger-bg-hover)}._danger_1dldx_96:active:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-danger-bg-active)}._card_1btb3_1{background:var(--psi-card-bg);border:1px solid var(--psi-card-border);border-radius:var(--psi-card-radius);overflow:hidden}._stacked_1btb3_8{display:flex;flex-direction:column;gap:var(--psi-card-gap)}._featured_1btb3_10{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--psi-card-gap);align-items:start}@media(max-width:960px){._featured_1btb3_10{grid-template-columns:1fr}}._media_1btb3_22{min-width:0}._body_1btb3_23{min-width:0;display:flex;flex-direction:column;gap:var(--psi-card-gap);padding:var(--psi-card-gap)}._hoverLift_1btb3_31{transition:transform var(--psi-duration-350) var(--psi-ease-standard)}._hoverLift_1btb3_31:hover{transform:translateY(-6px)}._navbar_1uory_1{position:sticky;top:0;z-index:var(--psi-z-nav);background:var(--psi-navbar-bg);backdrop-filter:blur(var(--psi-navbar-blur));-webkit-backdrop-filter:blur(var(--psi-navbar-blur));border-bottom:1px solid var(--psi-navbar-border)}._inner_1uory_11{display:flex;align-items:center;gap:var(--psi-space-24);height:var(--psi-navbar-height)}._brand_1uory_18{display:flex;align-items:center}._links_1uory_19{display:flex;align-items:center;gap:var(--psi-space-20);margin-inline-start:auto}._links_1uory_19 a,._brand_1uory_18 a{text-decoration:none;transition:color var(--psi-duration-150) var(--psi-ease-soft)}._links_1uory_19 a{color:var(--psi-navbar-link-fg)}._links_1uory_19 a:hover,._brand_1uory_18 a{color:var(--psi-navbar-link-fg-hover)}._links_1uory_19 a:focus-visible,._brand_1uory_18 a:focus-visible{outline:2px solid var(--psi-navbar-focus-ring);outline-offset:2px}._actions_1uory_49{display:flex;align-items:center;gap:var(--psi-space-8)}._frame_et4fc_1{overflow:hidden}._frame_et4fc_1>img,._frame_et4fc_1>video{width:100%;height:100%;object-fit:cover;display:block}._field_lplye_1{display:grid;gap:var(--psi-field-gap);border:0;margin:0;padding:0;min-width:0}._label_lplye_10{font:var(--psi-text-14-20-medium);color:var(--psi-field-label-fg);padding:0}._marker_lplye_16{color:var(--psi-field-marker-fg)}._message_lplye_20{margin:0;font:var(--psi-text-12-16-regular);color:var(--psi-field-message-fg)}._invalid_lplye_26 ._message_lplye_20{color:var(--psi-field-error-fg)}._dialog_j8ndn_2{padding:0;border:1px solid var(--psi-dialog-border);border-radius:var(--psi-radius-12);background:var(--psi-dialog-bg);color:var(--psi-dialog-fg);max-width:calc(100vw - var(--psi-space-32))}._dialog_j8ndn_2::backdrop{background:var(--psi-dialog-backdrop)}._dialog_j8ndn_2[open]{animation:_dialog-enter_j8ndn_1 var(--psi-duration-200) var(--psi-ease-soft)}._dialog_j8ndn_2[open]::backdrop{animation:_backdrop-enter_j8ndn_1 var(--psi-duration-200) var(--psi-ease-soft)}@keyframes _dialog-enter_j8ndn_1{0%{opacity:0;transform:scale(.97)}}@keyframes _backdrop-enter_j8ndn_1{0%{opacity:0}}._w400_j8ndn_31{width:400px}._w560_j8ndn_32{width:560px}._w720_j8ndn_33{width:720px}._panel_j8ndn_35{display:grid;gap:var(--psi-space-16);padding:var(--psi-space-24)}._header_j8ndn_41{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--psi-space-12)}._title_j8ndn_48{margin:0;font:var(--psi-text-18-28-medium);color:var(--psi-dialog-title-fg)}._footer_j8ndn_54{display:flex;justify-content:flex-end;gap:var(--psi-space-8)}._input_8tzcf_3{display:block;width:100%;border:1px solid var(--psi-input-border);border-radius:var(--psi-radius-8);background:var(--psi-input-bg);color:var(--psi-input-fg);font-family:var(--psi-font-sans);padding-inline:var(--psi-space-8);transition:border-color var(--psi-duration-150) var(--psi-ease-standard),outline var(--psi-duration-150) var(--psi-ease-standard)}._input_8tzcf_3::placeholder{color:var(--psi-input-placeholder)}._input_8tzcf_3:hover:not(:disabled):not(:focus){border-color:var(--psi-input-border-hover)}._input_8tzcf_3:focus{outline:2px solid var(--psi-input-focus-ring);outline-offset:-1px;border-color:transparent}._input_8tzcf_3:disabled{opacity:.4;cursor:not-allowed}._size24_8tzcf_38{height:var(--psi-size-24);font:var(--psi-text-12-16-regular)}._size32_8tzcf_43{height:var(--psi-size-32);font:var(--psi-text-14-20-regular)}._size40_8tzcf_48{height:var(--psi-size-40);font:var(--psi-text-16-24-regular)}._size48_8tzcf_53{height:var(--psi-size-48);font:var(--psi-text-18-28-medium)}._error_8tzcf_60{border-color:var(--psi-input-border-error)}._error_8tzcf_60:hover:not(:disabled):not(:focus){border-color:var(--psi-input-border-error)}._select_140kg_3{display:block;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--psi-select-border);border-radius:var(--psi-radius-8);background-color:var(--psi-select-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--psi-space-8) center;color:var(--psi-select-fg);font-family:var(--psi-font-sans);padding-inline-start:var(--psi-space-8);padding-inline-end:var(--psi-space-24);cursor:pointer;transition:border-color var(--psi-duration-150) var(--psi-ease-standard),outline var(--psi-duration-150) var(--psi-ease-standard)}._select_140kg_3:hover:not(:disabled):not(:focus){border-color:var(--psi-select-border-hover)}._select_140kg_3:focus{outline:2px solid var(--psi-select-focus-ring);outline-offset:-1px;border-color:transparent}._select_140kg_3:disabled{opacity:.4;cursor:not-allowed}._size24_140kg_40{height:var(--psi-size-24);font:var(--psi-text-12-16-regular)}._size32_140kg_45{height:var(--psi-size-32);font:var(--psi-text-14-20-regular)}._size40_140kg_50{height:var(--psi-size-40);font:var(--psi-text-16-24-regular)}._size48_140kg_55{height:var(--psi-size-48);font:var(--psi-text-18-28-medium)}._error_140kg_62{border-color:var(--psi-select-border-error)}._error_140kg_62:hover:not(:disabled):not(:focus){border-color:var(--psi-select-border-error)}._label_n457n_3{display:inline-flex;align-items:center;gap:var(--psi-space-8);cursor:pointer;-webkit-user-select:none;user-select:none;font:var(--psi-text-14-20-regular);color:var(--psi-checkbox-fg)}._disabled_n457n_13{opacity:.4;cursor:not-allowed}._input_n457n_20{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._indicator_n457n_34{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;border:1px solid var(--psi-checkbox-box-border);border-radius:var(--psi-radius-4);background:var(--psi-checkbox-box-bg);transition:background-color var(--psi-duration-150) var(--psi-ease-standard),border-color var(--psi-duration-150) var(--psi-ease-standard)}._input_n457n_20:checked+._indicator_n457n_34{background:var(--psi-checkbox-box-bg-checked);border-color:var(--psi-checkbox-box-border-checked)}._input_n457n_20:checked+._indicator_n457n_34:after{content:"";display:block;width:4px;height:8px;border:solid var(--psi-checkbox-check-fg);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-.5px,-.5px)}._input_n457n_20:focus-visible+._indicator_n457n_34{outline:2px solid var(--psi-checkbox-focus-ring);outline-offset:2px}._text_n457n_74{color:var(--psi-checkbox-fg)}._label_jru2c_3{display:inline-flex;align-items:center;gap:var(--psi-space-8);cursor:pointer;-webkit-user-select:none;user-select:none;font:var(--psi-text-14-20-regular);color:var(--psi-switch-fg)}._disabled_jru2c_13{opacity:.4;cursor:not-allowed}._input_jru2c_20{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._track_jru2c_34{position:relative;display:inline-flex;align-items:center;width:36px;height:20px;flex-shrink:0;border-radius:var(--psi-radius-full);background:var(--psi-switch-track-bg);transition:background-color var(--psi-duration-150) var(--psi-ease-standard)}._input_jru2c_20:checked+._track_jru2c_34{background:var(--psi-switch-track-bg-checked)}._input_jru2c_20:focus-visible+._track_jru2c_34{outline:2px solid var(--psi-switch-focus-ring);outline-offset:2px}._thumb_jru2c_58{position:absolute;width:16px;height:16px;border-radius:var(--psi-radius-full);background:var(--psi-switch-thumb-bg);left:2px;transition:left var(--psi-duration-150) var(--psi-ease-standard);box-shadow:0 1px 2px #00000029}._input_jru2c_20:checked+._track_jru2c_34 ._thumb_jru2c_58{left:18px}._text_jru2c_75{color:var(--psi-switch-fg)}._tag_3oysa_3{display:inline-flex;align-items:center;gap:var(--psi-space-4);height:24px;padding-inline:var(--psi-space-8);border-radius:var(--psi-radius-full);font:var(--psi-text-12-16-medium);white-space:nowrap;-webkit-user-select:none;user-select:none}._dismiss_3oysa_17{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:none;color:inherit;cursor:pointer;opacity:.7;margin-inline-start:var(--psi-space-2);margin-inline-end:calc(-1 * var(--psi-space-4));border-radius:var(--psi-radius-full)}._dismiss_3oysa_17:hover{opacity:1}._dismiss_3oysa_17:focus-visible{outline:2px solid var(--psi-tag-focus-ring);outline-offset:2px}._neutral_3oysa_43{background:var(--psi-tag-neutral-bg);color:var(--psi-tag-neutral-fg)}._accent_3oysa_48{background:var(--psi-tag-accent-bg);color:var(--psi-tag-accent-fg)}._success_3oysa_53{background:var(--psi-tag-success-bg);color:var(--psi-tag-success-fg)}._warning_3oysa_58{background:var(--psi-tag-warning-bg);color:var(--psi-tag-warning-fg)}._danger_3oysa_63{background:var(--psi-tag-danger-bg);color:var(--psi-tag-danger-fg)}._neutralSubtle_3oysa_70{background:var(--psi-tag-neutral-subtle-bg);color:var(--psi-tag-neutral-subtle-fg)}._accentSubtle_3oysa_75{background:var(--psi-tag-accent-subtle-bg);color:var(--psi-tag-accent-subtle-fg)}._successSubtle_3oysa_80{background:var(--psi-tag-success-subtle-bg);color:var(--psi-tag-success-subtle-fg)}._warningSubtle_3oysa_85{background:var(--psi-tag-warning-subtle-bg);color:var(--psi-tag-warning-subtle-fg)}._dangerSubtle_3oysa_90{background:var(--psi-tag-danger-subtle-bg);color:var(--psi-tag-danger-subtle-fg)}._wrapper_17qua_3{position:relative;display:inline-flex}._tooltip_17qua_10{position:absolute;z-index:var(--psi-z-tooltip);padding:var(--psi-space-4) var(--psi-space-8);border-radius:var(--psi-radius-6);background:var(--psi-tooltip-bg);color:var(--psi-tooltip-fg);font:var(--psi-text-12-16-regular);white-space:nowrap;pointer-events:none}._top_17qua_24{bottom:100%;left:50%;transform:translate(-50%);margin-bottom:var(--psi-space-4)}._bottom_17qua_31{top:100%;left:50%;transform:translate(-50%);margin-top:var(--psi-space-4)}._left_17qua_38{right:100%;top:50%;transform:translateY(-50%);margin-right:var(--psi-space-4)}._right_17qua_45{left:100%;top:50%;transform:translateY(-50%);margin-left:var(--psi-space-4)}

package/docs/AspectRatio.md

@@ -25,3 +25,5 @@ Override `--psi-aspect-ratio-*` custom properties at any scope; interactive stat
 - Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
 - Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
 - --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
+- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
+- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.

package/docs/Button.md

@@ -48,3 +48,5 @@ Override `--psi-button-*` custom properties at any scope; interactive states der
 - Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
 - Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
 - --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
+- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
+- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.

package/docs/Card.md

@@ -37,3 +37,5 @@ Override `--psi-card-*` custom properties at any scope; interactive states deriv
 - Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
 - Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
 - --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
+- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
+- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.

package/docs/Checkbox.md

@@ -32,3 +32,5 @@ Override `--psi-checkbox-*` custom properties at any scope; interactive states d
 - Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
 - Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
 - --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
+- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
+- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.

package/docs/Dialog.md

@@ -0,0 +1,43 @@
+<!-- Generated by emit-docs.ts — do not edit. -->
+# Dialog
+
+Modal dialog on the native <dialog> top layer: focus trap, aria-modal and focus restore come from the platform; title/footer slots, Esc/backdrop/ close-button dismissal via onClose(reason) (D50).
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|---|---|---|---|---|
+| `open` | `boolean` | — | yes | Controlled open state; syncs to showModal()/close(). |
+| `onClose` | `(reason: "esc" \| "backdrop" \| "close-button") => void` | — | yes | Called on every dismissal attempt with its source; the consumer flips `open`. |
+| `title` | `ReactNode` | — | no | Heading; renders an <h2> wired to aria-labelledby. Without it, pass aria-label. |
+| `footer` | `ReactNode` | — | no | Action row (Buttons — one accent per group, danger for destructive). |
+| `width` | `400 \| 560 \| 720` | 560 | no | Panel width in px (400 \| 560 \| 720). |
+| `dismissible` | `boolean` | true | no | false = no close button, Esc and backdrop swallowed — footer is the only exit. |
+| `ref` | `Ref<HTMLDialogElement>` | — | no | Forwarded ref to the underlying <dialog> element. |
+| `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
+
+## Keyboard & assistive tech
+
+| Keys | Behavior |
+|---|---|
+| Esc | Dismisses via onClose('esc') when dismissible; swallowed otherwise. |
+| Tab | Focus is trapped inside by the native <dialog> top layer; restored on close. |
+
+Rendered with showModal(): aria-modal, inert background and focus restore come from the platform. title wires aria-labelledby; without title, pass aria-label. Backdrop click dismisses only when dismissible.
+
+## Theming
+
+Override `--psi-dialog-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).
+
+
+
+## Rules
+
+- One accent per visual group; everything else neutral or ghost.
+- danger only for actions with real consequences.
+- Sizes are px numbers (24|32|40|48), never S/M/L.
+- Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
+- Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
+- --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
+- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
+- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.

package/docs/Field.md

@@ -0,0 +1,42 @@
+<!-- Generated by emit-docs.ts — do not edit. -->
+# Field
+
+Labeled form-row wrapper: label above, control, one message line below — description normally, error when set (aria-live). Auto-wires id/aria-describedby/aria-invalid into Input and Select (D49).
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|---|---|---|---|---|
+| `label` | `ReactNode` | — | no | Label content; renders a <label> (or <legend> in group mode). |
+| `description` | `ReactNode` | — | no | Helper line under the control; replaced by error when error is set. |
+| `error` | `ReactNode` | — | no | Error content; when truthy it replaces the description and switches the field (and a wrapped Input/Select) into error state. |
+| `required` | `boolean` | false | no | Renders the required marker and flows `required` to the control. |
+| `group` | `boolean` | false | no | Group mode: fieldset/legend wrapping several self-labeled controls (Checkbox/Switch); the message describes the whole group. |
+| `htmlFor` | `string` | — | no | Override the generated control id (pair it with the same id on the control). |
+| `ref` | `Ref<HTMLDivElement \| HTMLFieldSetElement>` | — | no | Forwarded ref to the root element. |
+| `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
+
+## Keyboard & assistive tech
+
+| Keys | Behavior |
+|---|---|
+| Tab | Focus moves to the wrapped control; the label is announced with it. |
+
+Wires label association, aria-describedby and aria-invalid into a wrapped Input/Select automatically; the message line is aria-live=polite. Group mode renders fieldset/legend.
+
+## Theming
+
+Override `--psi-field-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).
+
+
+
+## Rules
+
+- One accent per visual group; everything else neutral or ghost.
+- danger only for actions with real consequences.
+- Sizes are px numbers (24|32|40|48), never S/M/L.
+- Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
+- Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
+- --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
+- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
+- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.

package/docs/IconButton.md

@@ -47,3 +47,5 @@ Override `--psi-button-*` custom properties at any scope; interactive states der
 - Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
 - Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
 - --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
+- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
+- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.

package/docs/Input.md

@@ -1,14 +1,14 @@
 <!-- Generated by emit-docs.ts — do not edit. -->
 # Input
 
-Single-line text input with pixel-true heights (24–48) and an error state.
+Single-line text input with pixel-true heights (24–48) and an error state. Inside a Field, id/aria-describedby/aria-invalid/required are wired automatically (D49).
 
 ## Props
 
 | Prop | Type | Default | Required | Description |
 |---|---|---|---|---|
 | `size` | `24 \| 32 \| 40 \| 48` | 32 | no | Height in px (24 \| 32 \| 40 \| 48). |
-| `error` | `boolean` | false | no | Show error styling. |
+| `error` | `boolean` | false | no | Show error styling. Inside a Field, the Field's error also lights this. |
 | `ref` | `Ref<HTMLInputElement>` | — | no | Forwarded ref to the underlying `<input>` element. |
 | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
 
@@ -18,7 +18,7 @@ Single-line text input with pixel-true heights (24–48) and an error state.
 |---|---|
 | Tab | Focuses the native <input>; focus ring on the field. |
 
-error sets a red border only — pair with aria-invalid and aria-describedby pointing at your error text.
+error sets a red border only. Inside a Field, aria-invalid and aria-describedby are wired automatically (D49); standalone, pair them yourself.
 
 ## Theming
 
@@ -34,3 +34,5 @@ Override `--psi-input-*` custom properties at any scope; interactive states deri
 - Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
 - Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
 - --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
+- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
+- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.

package/docs/NavBar.md

@@ -27,3 +27,5 @@ Override `--psi-navbar-*` custom properties at any scope; interactive states der
 - Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
 - Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
 - --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
+- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
+- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.

package/docs/Select.md

@@ -1,14 +1,14 @@
 <!-- Generated by emit-docs.ts — do not edit. -->
 # Select
 
-Styled native `<select>` with pixel-true heights (24–48) and an error state.
+Styled native `<select>` with pixel-true heights (24–48) and an error state. Inside a Field, id/aria-describedby/aria-invalid/required are wired automatically (D49).
 
 ## Props
 
 | Prop | Type | Default | Required | Description |
 |---|---|---|---|---|
 | `size` | `24 \| 32 \| 40 \| 48` | 32 | no | Height in px (24 \| 32 \| 40 \| 48). Replaces the native `size` attribute (which sets the visible option-row count on a listbox-style `<select>`) with the design system's control height in pixels. |
-| `error` | `boolean` | false | no | Show error styling. |
+| `error` | `boolean` | false | no | Show error styling. Inside a Field, the Field's error also lights this. |
 | `ref` | `Ref<HTMLSelectElement>` | — | no | Forwarded ref to the underlying `<select>` element. |
 | `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
 
@@ -19,7 +19,7 @@ Styled native `<select>` with pixel-true heights (24–48) and an error state.
 | Tab | Focuses the native <select>. |
 | Arrow keys / typeahead | Native option navigation. |
 
-error: same contract as Input.
+error: same contract as Input — sets a red border only. Inside a Field, aria-invalid and aria-describedby are wired automatically (D49); standalone, pair them yourself.
 
 ## Theming
 
@@ -35,3 +35,5 @@ Override `--psi-select-*` custom properties at any scope; interactive states der
 - Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
 - Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
 - --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
+- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
+- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.

package/docs/Switch.md

@@ -32,3 +32,5 @@ Override `--psi-switch-*` custom properties at any scope; interactive states der
 - Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
 - Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
 - --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
+- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
+- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.

package/docs/Tag.md

@@ -45,3 +45,5 @@ Override `--psi-tag-*` custom properties at any scope; interactive states derive
 - Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
 - Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
 - --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
+- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
+- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.

package/docs/Tooltip.md

@@ -34,3 +34,5 @@ Override `--psi-tooltip-*` custom properties at any scope; interactive states de
 - Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
 - Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
 - --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).
+- Wrap labeled form controls in Field — label association, description/error line, aria-describedby and aria-invalid come wired; don't hand-roll label+message rows.
+- Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group.

package/llms.txt

@@ -1,6 +1,6 @@
 # @handamade/psi-react
 
-11 React 19 components consuming @handamade/psi-tokens. Zero runtime deps, CSS Modules, ref-as-prop.
+13 React 19 components consuming @handamade/psi-tokens. Zero runtime deps, CSS Modules, ref-as-prop.
 
 ## Machine-readable artifacts
 - dist/manifest.json: full component/prop inventory with types and defaults
@@ -32,14 +32,14 @@
 
 ## Compositions (recipes for what has no component yet)
 
-- Form field: there is no Field/Label component. Compose: `<label htmlFor>` styled with `.psi-text-14-20-medium`; the control (Input/Select); error text in `.psi-text-12-16-regular` with `color: var(--psi-fg-danger)`, linked via `aria-describedby` on the control plus `aria-invalid` and `error` when invalid. Spacing: `psi-gap-6` label→control, `psi-gap-24` between fields, `psi-gap-12` for toggle groups, `psi-gap-8` for button rows and label+Tag rows.
+- Form field: wrap the label, control, and message with `<Field label description error required>{control}</Field>` — label association (htmlFor/id), the description/error message line (swaps to error, aria-live="polite"), and aria-describedby/aria-invalid wiring onto a nested Input/Select are automatic (D49). `group` mode renders fieldset/legend for self-labeled controls (Checkbox/Switch). Standalone Input/Select used outside Field still need `aria-invalid` and `aria-describedby` paired manually. Spacing: `psi-gap-24` between fields, `psi-gap-12` for toggle groups, `psi-gap-8` for button rows and label+Tag rows.
 - Stacks/rows: `.psi-gap-*` utilities set only the gap — they do not create a flex/grid container. Pair them with `display: flex` (column for stacks, row for button groups).
 - 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`.
 - 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`). Component width tokens arrive with Field/Dialog (next cycle).
+- 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.
 
 Live MCP access to this data: see packages/mcp/llms.txt (hosted: https://psi.kurkin.de/mcp).

package/package.json

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