@handamade/psi-tokens 0.25.0 → 0.26.0

package/dist/components/radio-group.d.ts

@@ -0,0 +1,5 @@
+/** RadioGroup / Radio component tokens (--psi-radio-group-*) — D104. One
+ * module serves both, so one prefix. The checkbox's recipe on a circle: the
+ * checked circle fills with the accent and shows a dot in fg-on-accent,
+ * exactly the checkbox's checked pair, already gated. No new contrast pair. */
+export declare const radioGroupVars: Record<string, string>;

package/dist/components/radio-group.js

@@ -0,0 +1,13 @@
+/** RadioGroup / Radio component tokens (--psi-radio-group-*) — D104. One
+ * module serves both, so one prefix. The checkbox's recipe on a circle: the
+ * checked circle fills with the accent and shows a dot in fg-on-accent,
+ * exactly the checkbox's checked pair, already gated. No new contrast pair. */
+export const radioGroupVars = {
+    fg: "var(--psi-fg-primary)",
+    "circle-bg": "var(--psi-bg-primary)",
+    "circle-border": "var(--psi-border-neutral)",
+    "circle-bg-checked": "var(--psi-fill-accent)",
+    "circle-border-checked": "var(--psi-fill-accent)",
+    "dot-fg": "var(--psi-fg-on-accent)",
+    "focus-ring": "var(--psi-border-focus)",
+};

package/dist/components/radio-group.vars.css

@@ -0,0 +1,11 @@
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-radio-group-fg: var(--psi-fg-primary);
+    --psi-radio-group-circle-bg: var(--psi-bg-primary);
+    --psi-radio-group-circle-border: var(--psi-border-neutral);
+    --psi-radio-group-circle-bg-checked: var(--psi-fill-accent);
+    --psi-radio-group-circle-border-checked: var(--psi-fill-accent);
+    --psi-radio-group-dot-fg: var(--psi-fg-on-accent);
+    --psi-radio-group-focus-ring: var(--psi-border-focus);
+  }
+}

package/dist/components/registry.js

@@ -27,6 +27,8 @@ import { toastVars } from "./toast.js";
 import { tabsVars } from "./tabs.js";
 import { fieldVars } from "./field.js";
 import { descriptionListVars } from "./description-list.js";
+import { textareaVars } from "./textarea.js";
+import { radioGroupVars } from "./radio-group.js";
 export const componentVars = {
     "app-shell": appShellVars,
     banner: bannerVars,
@@ -42,6 +44,7 @@ export const componentVars = {
     menu: menuVars,
     navbar: navbarVars,
     panel: panelVars,
+    "radio-group": radioGroupVars,
     select: selectVars,
     skeleton: skeletonVars,
     "nav-tree": navTreeVars,
@@ -52,6 +55,7 @@ export const componentVars = {
     tabs: tabsVars,
     "description-list": descriptionListVars,
     tag: tagVars,
+    textarea: textareaVars,
     toolbar: toolbarVars,
     toast: toastVars,
     tooltip: tooltipVars,

package/dist/components/textarea.d.ts

@@ -0,0 +1,6 @@
+/** Textarea component tokens (--psi-textarea-*) — D104. Pure aliases of the
+ * input's semantics and the 32px value ramp, so a multi-line field reads as
+ * the same control family as Input. Every value is an existing gated
+ * semantic; counter-fg is fg-secondary, gated at 4.5 on every surface. No
+ * size ramp: a textarea's height is its rows, not a control size. */
+export declare const textareaVars: Record<string, string>;

package/dist/components/textarea.js

@@ -0,0 +1,18 @@
+/** Textarea component tokens (--psi-textarea-*) — D104. Pure aliases of the
+ * input's semantics and the 32px value ramp, so a multi-line field reads as
+ * the same control family as Input. Every value is an existing gated
+ * semantic; counter-fg is fg-secondary, gated at 4.5 on every surface. No
+ * size ramp: a textarea's height is its rows, not a control size. */
+export const textareaVars = {
+    bg: "var(--psi-bg-primary)",
+    fg: "var(--psi-fg-primary)",
+    placeholder: "var(--psi-fg-tertiary)",
+    border: "var(--psi-border-neutral)",
+    "border-hover": "var(--psi-border-strong)",
+    "border-error": "var(--psi-fg-danger)",
+    "focus-ring": "var(--psi-border-focus)",
+    radius: "var(--psi-control-radius)",
+    "padding-inline": "var(--psi-control-value-32-padding-inline)",
+    font: "var(--psi-control-value-32-font)",
+    "counter-fg": "var(--psi-fg-secondary)",
+};

package/dist/components/textarea.vars.css

@@ -0,0 +1,15 @@
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-textarea-bg: var(--psi-bg-primary);
+    --psi-textarea-fg: var(--psi-fg-primary);
+    --psi-textarea-placeholder: var(--psi-fg-tertiary);
+    --psi-textarea-border: var(--psi-border-neutral);
+    --psi-textarea-border-hover: var(--psi-border-strong);
+    --psi-textarea-border-error: var(--psi-fg-danger);
+    --psi-textarea-focus-ring: var(--psi-border-focus);
+    --psi-textarea-radius: var(--psi-control-radius);
+    --psi-textarea-padding-inline: var(--psi-control-value-32-padding-inline);
+    --psi-textarea-font: var(--psi-control-value-32-font);
+    --psi-textarea-counter-fg: var(--psi-fg-secondary);
+  }
+}

package/dist/components.css

@@ -257,6 +257,18 @@
   }
 }
 
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-radio-group-fg: var(--psi-fg-primary);
+    --psi-radio-group-circle-bg: var(--psi-bg-primary);
+    --psi-radio-group-circle-border: var(--psi-border-neutral);
+    --psi-radio-group-circle-bg-checked: var(--psi-fill-accent);
+    --psi-radio-group-circle-border-checked: var(--psi-fill-accent);
+    --psi-radio-group-dot-fg: var(--psi-fg-on-accent);
+    --psi-radio-group-focus-ring: var(--psi-border-focus);
+  }
+}
+
 @layer psi.components {
   :where(:root, [data-psi-theme]) {
     --psi-select-bg: var(--psi-bg-primary);
@@ -411,6 +423,22 @@
   }
 }
 
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-textarea-bg: var(--psi-bg-primary);
+    --psi-textarea-fg: var(--psi-fg-primary);
+    --psi-textarea-placeholder: var(--psi-fg-tertiary);
+    --psi-textarea-border: var(--psi-border-neutral);
+    --psi-textarea-border-hover: var(--psi-border-strong);
+    --psi-textarea-border-error: var(--psi-fg-danger);
+    --psi-textarea-focus-ring: var(--psi-border-focus);
+    --psi-textarea-radius: var(--psi-control-radius);
+    --psi-textarea-padding-inline: var(--psi-control-value-32-padding-inline);
+    --psi-textarea-font: var(--psi-control-value-32-font);
+    --psi-textarea-counter-fg: var(--psi-fg-secondary);
+  }
+}
+
 @layer psi.components {
   :where(:root, [data-psi-theme]) {
     --psi-toolbar-control-width: 200px;

package/dist/scope-map.json

@@ -484,6 +484,24 @@
     "panel-border": [
       "border"
     ],
+    "radio-group-fg": [
+      "text"
+    ],
+    "radio-group-circle-bg": [
+      "surface"
+    ],
+    "radio-group-circle-border": [
+      "border"
+    ],
+    "radio-group-circle-bg-checked": [
+      "surface"
+    ],
+    "radio-group-circle-border-checked": [
+      "border"
+    ],
+    "radio-group-dot-fg": [
+      "text"
+    ],
     "select-bg": [
       "surface"
     ],
@@ -655,6 +673,24 @@
     "tag-danger-subtle-fg": [
       "text"
     ],
+    "textarea-bg": [
+      "surface"
+    ],
+    "textarea-fg": [
+      "text"
+    ],
+    "textarea-border": [
+      "border"
+    ],
+    "textarea-border-hover": [
+      "border"
+    ],
+    "textarea-border-error": [
+      "border"
+    ],
+    "textarea-counter-fg": [
+      "text"
+    ],
     "toast-bg": [
       "surface"
     ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handamade/psi-tokens",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "license": "MIT",
   "type": "module",
   "exports": {