@handamade/psi-tokens 0.21.0 → 0.22.0

package/dist/components/field.d.ts

@@ -1,3 +1,16 @@
 /** Field component tokens (--psi-field-*). Label/message/error colors alias
- * gated semantic fg tokens; gap is the label→control→message grid gap (D49). */
+ * gated semantic fg tokens; gap is the label→control→message grid gap (D49).
+ *
+ * label-height (D92) is the label's line box: the line height of
+ * --psi-text-14-20-medium, which the label's `font` shorthand sets. A font
+ * shorthand exposes no line-height variable to read, and --psi-space-* is
+ * scoped to gap/padding/margin, so the height is a standalone 20px literal
+ * (the --psi-toolbar-control-width precedent). The label holds it as its
+ * min-block-size, and --psi-toolbar-action-offset is derived from it, so a
+ * filter row's unlabelled button and its labelled controls read one source.
+ * Change it together with the label's font. --psi-toolbar-action-offset
+ * resolves from this token and `gap` at the theme root: overriding either on
+ * a narrower scope inside a Toolbar align="start" row also needs
+ * --psi-toolbar-action-offset set on that same scope, or the row's button
+ * keeps the theme-root offset. */
 export declare const fieldVars: Record<string, string>;

package/dist/components/field.js

@@ -1,5 +1,18 @@
 /** Field component tokens (--psi-field-*). Label/message/error colors alias
- * gated semantic fg tokens; gap is the label→control→message grid gap (D49). */
+ * gated semantic fg tokens; gap is the label→control→message grid gap (D49).
+ *
+ * label-height (D92) is the label's line box: the line height of
+ * --psi-text-14-20-medium, which the label's `font` shorthand sets. A font
+ * shorthand exposes no line-height variable to read, and --psi-space-* is
+ * scoped to gap/padding/margin, so the height is a standalone 20px literal
+ * (the --psi-toolbar-control-width precedent). The label holds it as its
+ * min-block-size, and --psi-toolbar-action-offset is derived from it, so a
+ * filter row's unlabelled button and its labelled controls read one source.
+ * Change it together with the label's font. --psi-toolbar-action-offset
+ * resolves from this token and `gap` at the theme root: overriding either on
+ * a narrower scope inside a Toolbar align="start" row also needs
+ * --psi-toolbar-action-offset set on that same scope, or the row's button
+ * keeps the theme-root offset. */
 export const fieldVars = {
     "label-fg": "var(--psi-fg-secondary)",
     "message-fg": "var(--psi-fg-tertiary)",
@@ -11,4 +24,5 @@ export const fieldVars = {
     // foreground the contrast matrix does not gate.
     "required-text-fg": "var(--psi-fg-secondary)",
     gap: "var(--psi-space-6)",
+    "label-height": "20px",
 };

package/dist/components/field.vars.css

@@ -6,5 +6,6 @@
     --psi-field-marker-fg: var(--psi-fg-danger);
     --psi-field-required-text-fg: var(--psi-fg-secondary);
     --psi-field-gap: var(--psi-space-6);
+    --psi-field-label-height: 20px;
   }
 }

package/dist/components/toolbar.d.ts

@@ -9,5 +9,15 @@
  * Dialog's width={400|560|720} precedent — no shared scale reaches this
  * range (sizeScale tops at 48, spacingScale at 144, both for heights/gaps
  * not component widths).
+ *
+ * action-offset (D92) moves an unlabelled button or link onto the control
+ * line of a `Toolbar align="start"` row: a Field's control starts one label
+ * line and one field gap below the Field's top. It is derived from Field's
+ * own tokens rather than restated, so the two cannot drift. The calc()
+ * resolves where it is declared, `:where(:root, [data-psi-theme])`: retuning
+ * --psi-field-label-height or --psi-field-gap there moves the button too;
+ * retuning either on a narrower scope needs this token set on that scope.
+ * Bound to margin-block-start in toolbar.module.css (Toolbar CSS may read
+ * only --psi-toolbar-* and the scales, so it reads Field through this).
  */
 export declare const toolbarVars: Record<string, string>;

package/dist/components/toolbar.js

@@ -9,7 +9,18 @@
  * Dialog's width={400|560|720} precedent — no shared scale reaches this
  * range (sizeScale tops at 48, spacingScale at 144, both for heights/gaps
  * not component widths).
+ *
+ * action-offset (D92) moves an unlabelled button or link onto the control
+ * line of a `Toolbar align="start"` row: a Field's control starts one label
+ * line and one field gap below the Field's top. It is derived from Field's
+ * own tokens rather than restated, so the two cannot drift. The calc()
+ * resolves where it is declared, `:where(:root, [data-psi-theme])`: retuning
+ * --psi-field-label-height or --psi-field-gap there moves the button too;
+ * retuning either on a narrower scope needs this token set on that scope.
+ * Bound to margin-block-start in toolbar.module.css (Toolbar CSS may read
+ * only --psi-toolbar-* and the scales, so it reads Field through this).
  */
 export const toolbarVars = {
     "control-width": "200px",
+    "action-offset": "calc(var(--psi-field-label-height) + var(--psi-field-gap))",
 };

package/dist/components/toolbar.vars.css

@@ -1,5 +1,6 @@
 @layer psi.components {
   :where(:root, [data-psi-theme]) {
     --psi-toolbar-control-width: 200px;
+    --psi-toolbar-action-offset: calc(var(--psi-field-label-height) + var(--psi-field-gap));
   }
 }

package/dist/components.css

@@ -158,6 +158,7 @@
     --psi-field-marker-fg: var(--psi-fg-danger);
     --psi-field-required-text-fg: var(--psi-fg-secondary);
     --psi-field-gap: var(--psi-space-6);
+    --psi-field-label-height: 20px;
   }
 }
 
@@ -407,6 +408,7 @@
 @layer psi.components {
   :where(:root, [data-psi-theme]) {
     --psi-toolbar-control-width: 200px;
+    --psi-toolbar-action-offset: calc(var(--psi-field-label-height) + var(--psi-field-gap));
   }
 }
 

package/dist/guidance.json

@@ -54,7 +54,7 @@
     "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.",
-    "Field is for a control with a *visible* label. A toolbar filter control named by aria-label or placeholder takes neither a Field nor a hand-rolled label row — compare filter-toolbar (no labels) with table-pagination (\"Rows per page\" visible, so Field). Filters with visible labels submitted together by a Find button are filter-form: a Toolbar as=\"form\" align=\"end\" of Fields (D87).",
+    "Field is for a control with a *visible* label. A toolbar filter control named by aria-label or placeholder takes neither a Field nor a hand-rolled label row — compare filter-toolbar (no labels) with table-pagination (\"Rows per page\" visible, so Field). Filters with visible labels submitted together by a Find button are filter-form: a Toolbar as=\"form\" align=\"start\" of Fields with one-line labels, where a field's error line is the Field's own and hangs below its control (D87, D92).",
     "Use Dialog for blocking modal flows — title/footer slots, dismissible gate; danger stays on the footer Buttons, one accent per group."
   ],
   "states": {

package/package.json

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