@handamade/psi-tokens 0.19.0 → 0.21.0

package/dist/components/menu.vars.css

@@ -11,5 +11,6 @@
     --psi-menu-item-fg-danger: var(--psi-fg-danger);
     --psi-menu-item-fg-disabled: var(--psi-fg-quaternary);
     --psi-menu-separator-border: var(--psi-border-faint);
+    --psi-menu-focus-ring: var(--psi-border-focus);
   }
 }

package/dist/components/nav-tree.d.ts

@@ -0,0 +1,12 @@
+/** NavTree component tokens (--psi-nav-tree-*) — D88. Pure indirection onto the
+ * semantic layer (same posture as menu.ts and tabs.ts), so every key resolves
+ * under a `data-psi-theme="dark"` sidebar inside a light page: component
+ * tokens are declared under `:where(:root, [data-psi-theme])`.
+ *
+ * No new contrast pairs: wcagAAPairs already gates fgPrimary and fgSecondary
+ * on bgPrimary and on fillNeutral1-6 in every theme, dark included, which
+ * covers the item text on the sidebar, on the hover surface (neutral3) and on
+ * the current surface (neutral4). `indicator` and `focus-ring` are non-text
+ * accents and `radius` is geometry; none carries a gated pair, so the pinned
+ * pair count does not move. */
+export declare const navTreeVars: Record<string, string>;

package/dist/components/nav-tree.js

@@ -0,0 +1,26 @@
+/** NavTree component tokens (--psi-nav-tree-*) — D88. Pure indirection onto the
+ * semantic layer (same posture as menu.ts and tabs.ts), so every key resolves
+ * under a `data-psi-theme="dark"` sidebar inside a light page: component
+ * tokens are declared under `:where(:root, [data-psi-theme])`.
+ *
+ * No new contrast pairs: wcagAAPairs already gates fgPrimary and fgSecondary
+ * on bgPrimary and on fillNeutral1-6 in every theme, dark included, which
+ * covers the item text on the sidebar, on the hover surface (neutral3) and on
+ * the current surface (neutral4). `indicator` and `focus-ring` are non-text
+ * accents and `radius` is geometry; none carries a gated pair, so the pinned
+ * pair count does not move. */
+export const navTreeVars = {
+    "item-fg": "var(--psi-fg-secondary)",
+    "item-fg-current": "var(--psi-fg-primary)",
+    "item-bg-hover": "var(--psi-fill-neutral3)",
+    "item-bg-current": "var(--psi-fill-neutral4)",
+    // The inline-start bar on the current item: weight and surface carry the
+    // state too, so colour is never the only signal.
+    indicator: "var(--psi-fill-accent)",
+    // A group's button reads like its items, one step quieter than the current.
+    "group-fg": "var(--psi-fg-secondary)",
+    // Alias of the control radius dial: a CSS Module may bind only its own
+    // component prefix, and the radius lives outside it.
+    radius: "var(--psi-control-radius)",
+    "focus-ring": "var(--psi-border-focus)",
+};

package/dist/components/nav-tree.vars.css

@@ -0,0 +1,12 @@
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-nav-tree-item-fg: var(--psi-fg-secondary);
+    --psi-nav-tree-item-fg-current: var(--psi-fg-primary);
+    --psi-nav-tree-item-bg-hover: var(--psi-fill-neutral3);
+    --psi-nav-tree-item-bg-current: var(--psi-fill-neutral4);
+    --psi-nav-tree-indicator: var(--psi-fill-accent);
+    --psi-nav-tree-group-fg: var(--psi-fg-secondary);
+    --psi-nav-tree-radius: var(--psi-control-radius);
+    --psi-nav-tree-focus-ring: var(--psi-border-focus);
+  }
+}

package/dist/components/navbar.d.ts

@@ -0,0 +1,3 @@
+/** NavBar component tokens (--psi-navbar-*). bg defaults to the heavy scrim
+ * (page canvas @ 0.82) — the blur-backed sticky-header treatment. */
+export declare const navbarVars: Record<string, string>;

package/dist/components/navbar.js

@@ -0,0 +1,14 @@
+/** NavBar component tokens (--psi-navbar-*). bg defaults to the heavy scrim
+ * (page canvas @ 0.82) — the blur-backed sticky-header treatment. */
+export const navbarVars = {
+    height: "4rem",
+    bg: "var(--psi-scrim-heavy)",
+    blur: "12px",
+    border: "var(--psi-border-faint)",
+    "link-fg": "var(--psi-fg-secondary)",
+    "link-fg-hover": "var(--psi-fg-primary)",
+    "focus-ring": "var(--psi-border-focus)",
+    // D88 — the side padding of a fluid row; the same gutter .psi-container pads
+    // with, reachable from the CSS Module only through a navbar token.
+    gutter: "var(--psi-gutter)",
+};

package/dist/components/navbar.vars.css

@@ -7,5 +7,6 @@
     --psi-navbar-link-fg: var(--psi-fg-secondary);
     --psi-navbar-link-fg-hover: var(--psi-fg-primary);
     --psi-navbar-focus-ring: var(--psi-border-focus);
+    --psi-navbar-gutter: var(--psi-gutter);
   }
 }

package/dist/components/navtree.d.ts

@@ -0,0 +1,12 @@
+/** NavTree component tokens (--psi-navtree-*) — D88. Pure indirection onto the
+ * semantic layer (same posture as menu.ts and tabs.ts), so every key resolves
+ * under a `data-psi-theme="dark"` sidebar inside a light page: component
+ * tokens are declared under `:where(:root, [data-psi-theme])`.
+ *
+ * No new contrast pairs: wcagAAPairs already gates fgPrimary and fgSecondary
+ * on bgPrimary and on fillNeutral1-6 in every theme, dark included, which
+ * covers the item text on the sidebar, on the hover surface (neutral3) and on
+ * the current surface (neutral4). `indicator` and `focus-ring` are non-text
+ * accents and `radius` is geometry; none carries a gated pair, so the pinned
+ * pair count does not move. */
+export declare const navtreeVars: Record<string, string>;

package/dist/components/navtree.js

@@ -0,0 +1,26 @@
+/** NavTree component tokens (--psi-navtree-*) — D88. Pure indirection onto the
+ * semantic layer (same posture as menu.ts and tabs.ts), so every key resolves
+ * under a `data-psi-theme="dark"` sidebar inside a light page: component
+ * tokens are declared under `:where(:root, [data-psi-theme])`.
+ *
+ * No new contrast pairs: wcagAAPairs already gates fgPrimary and fgSecondary
+ * on bgPrimary and on fillNeutral1-6 in every theme, dark included, which
+ * covers the item text on the sidebar, on the hover surface (neutral3) and on
+ * the current surface (neutral4). `indicator` and `focus-ring` are non-text
+ * accents and `radius` is geometry; none carries a gated pair, so the pinned
+ * pair count does not move. */
+export const navtreeVars = {
+    "item-fg": "var(--psi-fg-secondary)",
+    "item-fg-current": "var(--psi-fg-primary)",
+    "item-bg-hover": "var(--psi-fill-neutral3)",
+    "item-bg-current": "var(--psi-fill-neutral4)",
+    // The inline-start bar on the current item: weight and surface carry the
+    // state too, so colour is never the only signal.
+    indicator: "var(--psi-fill-accent)",
+    // A group's button reads like its items, one step quieter than the current.
+    "group-fg": "var(--psi-fg-secondary)",
+    // Alias of the control radius dial: a CSS Module may bind only its own
+    // component prefix, and the radius lives outside it.
+    radius: "var(--psi-control-radius)",
+    "focus-ring": "var(--psi-border-focus)",
+};

package/dist/components/navtree.vars.css

@@ -0,0 +1,12 @@
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-navtree-item-fg: var(--psi-fg-secondary);
+    --psi-navtree-item-fg-current: var(--psi-fg-primary);
+    --psi-navtree-item-bg-hover: var(--psi-fill-neutral3);
+    --psi-navtree-item-bg-current: var(--psi-fill-neutral4);
+    --psi-navtree-indicator: var(--psi-fill-accent);
+    --psi-navtree-group-fg: var(--psi-fg-secondary);
+    --psi-navtree-radius: var(--psi-control-radius);
+    --psi-navtree-focus-ring: var(--psi-border-focus);
+  }
+}

package/dist/components/panel.d.ts

@@ -0,0 +1,5 @@
+/** Panel component tokens (--psi-panel-*) — D51. Pure indirection onto the
+ * shared surface family; exists because component CSS may only bind its own
+ * family (psi/component-tokens-only). Brands retune panels and dialogs
+ * together by overriding --psi-surface-*. */
+export declare const panelVars: Record<string, string>;

package/dist/components/panel.js

@@ -0,0 +1,10 @@
+/** Panel component tokens (--psi-panel-*) — D51. Pure indirection onto the
+ * shared surface family; exists because component CSS may only bind its own
+ * family (psi/component-tokens-only). Brands retune panels and dialogs
+ * together by overriding --psi-surface-*. */
+export const panelVars = {
+    bg: "var(--psi-surface-bg)",
+    border: "var(--psi-surface-border)",
+    radius: "var(--psi-surface-radius)",
+    padding: "var(--psi-surface-padding)",
+};

package/dist/components/registry.d.ts

@@ -0,0 +1 @@
+export declare const componentVars: Record<string, Record<string, string>>;

package/dist/components/registry.js

@@ -0,0 +1,58 @@
+// Component var registry (D81: moved out of scripts/build.ts) — the D46 scope
+// gate reads it, in Psi's own build and in a consumer's theme build alike.
+import { bannerVars } from "./banner.js";
+import { inlineAlertVars } from "./inline-alert.js";
+import { buttonVars } from "./button.js";
+import { skeletonVars } from "./skeleton.js";
+import { skipLinkVars } from "./skip-link.js";
+import { navTreeVars } from "./nav-tree.js";
+import { appShellVars } from "./app-shell.js";
+import { inputVars } from "./input.js";
+import { selectVars } from "./select.js";
+import { surfaceVars } from "./surface.js";
+import { checkboxVars } from "./checkbox.js";
+import { switchVars } from "./switch.js";
+import { tableVars } from "./table.js";
+import { tagVars } from "./tag.js";
+import { toolbarVars } from "./toolbar.js";
+import { tooltipVars } from "./tooltip.js";
+import { cardVars } from "./card.js";
+import { controlVars } from "./control.js";
+import { dialogVars } from "./dialog.js";
+import { navbarVars } from "./navbar.js";
+import { panelVars } from "./panel.js";
+import { mediaVars } from "./media.js";
+import { menuVars } from "./menu.js";
+import { toastVars } from "./toast.js";
+import { tabsVars } from "./tabs.js";
+import { fieldVars } from "./field.js";
+import { descriptionListVars } from "./description-list.js";
+export const componentVars = {
+    "app-shell": appShellVars,
+    banner: bannerVars,
+    button: buttonVars,
+    card: cardVars,
+    checkbox: checkboxVars,
+    control: controlVars,
+    dialog: dialogVars,
+    field: fieldVars,
+    input: inputVars,
+    "inline-alert": inlineAlertVars,
+    media: mediaVars,
+    menu: menuVars,
+    navbar: navbarVars,
+    panel: panelVars,
+    select: selectVars,
+    skeleton: skeletonVars,
+    "nav-tree": navTreeVars,
+    "skip-link": skipLinkVars,
+    surface: surfaceVars,
+    switch: switchVars,
+    table: tableVars,
+    tabs: tabsVars,
+    "description-list": descriptionListVars,
+    tag: tagVars,
+    toolbar: toolbarVars,
+    toast: toastVars,
+    tooltip: tooltipVars,
+};

package/dist/components/select.d.ts

@@ -0,0 +1,2 @@
+/** Select component tokens (--psi-select-*). */
+export declare const selectVars: Record<string, string>;

package/dist/components/select.js

@@ -0,0 +1,38 @@
+/** Select component tokens (--psi-select-*). */
+export const selectVars = {
+    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)",
+    "chevron-fg": "var(--psi-fg-secondary)",
+    // ── Shape (D56) ──
+    radius: "var(--psi-control-radius)",
+    // ── Size ramp (D54) — same value ramp as Input, by construction ──
+    "24-height": "var(--psi-control-24-height)",
+    "32-height": "var(--psi-control-32-height)",
+    "40-height": "var(--psi-control-40-height)",
+    "48-height": "var(--psi-control-48-height)",
+    "24-padding-inline": "var(--psi-control-value-24-padding-inline)",
+    "32-padding-inline": "var(--psi-control-value-32-padding-inline)",
+    "40-padding-inline": "var(--psi-control-value-40-padding-inline)",
+    "48-padding-inline": "var(--psi-control-value-48-padding-inline)",
+    "24-font": "var(--psi-control-value-24-font)",
+    "32-font": "var(--psi-control-value-32-font)",
+    "40-font": "var(--psi-control-value-40-font)",
+    "48-font": "var(--psi-control-value-48-font)",
+    // Chevron well: the glyph is two 4px gradient strokes centred in a 12px well
+    // (D81 — it was a 12x12 data URI, which a strict CSP blocks), so the end padding is
+    // offset + 12 + 4 breathing = offset + 16. 28px is not on the spacing
+    // scale, so the +16 is expressed as calc rather than a scale step.
+    "24-chevron-offset": "var(--psi-control-value-24-padding-inline)",
+    "32-chevron-offset": "var(--psi-control-value-32-padding-inline)",
+    "40-chevron-offset": "var(--psi-control-value-40-padding-inline)",
+    "48-chevron-offset": "var(--psi-control-value-48-padding-inline)",
+    "24-padding-inline-end": "calc(var(--psi-control-value-24-padding-inline) + var(--psi-space-16))",
+    "32-padding-inline-end": "calc(var(--psi-control-value-32-padding-inline) + var(--psi-space-16))",
+    "40-padding-inline-end": "calc(var(--psi-control-value-40-padding-inline) + var(--psi-space-16))",
+    "48-padding-inline-end": "calc(var(--psi-control-value-48-padding-inline) + var(--psi-space-16))",
+};

package/dist/components/skeleton.d.ts

@@ -0,0 +1,4 @@
+/** Skeleton component tokens (--psi-skeleton-*) — D86. Pure indirection, same
+ * posture as banner.ts. A placeholder carries no text, so there is no
+ * foreground pair to gate; it is a quiet neutral shape. */
+export declare const skeletonVars: Record<string, string>;

package/dist/components/skeleton.js

@@ -0,0 +1,7 @@
+/** Skeleton component tokens (--psi-skeleton-*) — D86. Pure indirection, same
+ * posture as banner.ts. A placeholder carries no text, so there is no
+ * foreground pair to gate; it is a quiet neutral shape. */
+export const skeletonVars = {
+    bg: "var(--psi-fill-neutral4)",
+    radius: "var(--psi-radius-4)",
+};

package/dist/components/skeleton.vars.css

@@ -0,0 +1,6 @@
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-skeleton-bg: var(--psi-fill-neutral4);
+    --psi-skeleton-radius: var(--psi-radius-4);
+  }
+}

package/dist/components/skip-link.d.ts

@@ -0,0 +1,6 @@
+/** SkipLink component tokens (--psi-skip-link-*) — D88. Pure indirection onto
+ * the shared surface and focus tokens (same posture as menu.ts and
+ * navbar.ts): the link shows only when focused, on a surface, so a brand
+ * retuning --psi-surface-* gets it for free. radius rides the control radius
+ * dial, as Button's does, so the link matches the controls around it. */
+export declare const skipLinkVars: Record<string, string>;

package/dist/components/skip-link.js

@@ -0,0 +1,12 @@
+/** SkipLink component tokens (--psi-skip-link-*) — D88. Pure indirection onto
+ * the shared surface and focus tokens (same posture as menu.ts and
+ * navbar.ts): the link shows only when focused, on a surface, so a brand
+ * retuning --psi-surface-* gets it for free. radius rides the control radius
+ * dial, as Button's does, so the link matches the controls around it. */
+export const skipLinkVars = {
+    bg: "var(--psi-surface-bg)",
+    fg: "var(--psi-fg-primary)",
+    border: "var(--psi-surface-border)",
+    radius: "var(--psi-control-radius)",
+    "focus-ring": "var(--psi-border-focus)",
+};

package/dist/components/skip-link.vars.css

@@ -0,0 +1,9 @@
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-skip-link-bg: var(--psi-surface-bg);
+    --psi-skip-link-fg: var(--psi-fg-primary);
+    --psi-skip-link-border: var(--psi-surface-border);
+    --psi-skip-link-radius: var(--psi-control-radius);
+    --psi-skip-link-focus-ring: var(--psi-border-focus);
+  }
+}

package/dist/components/skiplink.d.ts

@@ -0,0 +1,6 @@
+/** SkipLink component tokens (--psi-skiplink-*) — D88. Pure indirection onto
+ * the shared surface and focus tokens (same posture as menu.ts and
+ * navbar.ts): the link shows only when focused, on a surface, so a brand
+ * retuning --psi-surface-* gets it for free. radius rides the control radius
+ * dial, as Button's does, so the link matches the controls around it. */
+export declare const skiplinkVars: Record<string, string>;

package/dist/components/skiplink.js

@@ -0,0 +1,12 @@
+/** SkipLink component tokens (--psi-skiplink-*) — D88. Pure indirection onto
+ * the shared surface and focus tokens (same posture as menu.ts and
+ * navbar.ts): the link shows only when focused, on a surface, so a brand
+ * retuning --psi-surface-* gets it for free. radius rides the control radius
+ * dial, as Button's does, so the link matches the controls around it. */
+export const skiplinkVars = {
+    bg: "var(--psi-surface-bg)",
+    fg: "var(--psi-fg-primary)",
+    border: "var(--psi-surface-border)",
+    radius: "var(--psi-control-radius)",
+    "focus-ring": "var(--psi-border-focus)",
+};

package/dist/components/skiplink.vars.css

@@ -0,0 +1,9 @@
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-skiplink-bg: var(--psi-surface-bg);
+    --psi-skiplink-fg: var(--psi-fg-primary);
+    --psi-skiplink-border: var(--psi-surface-border);
+    --psi-skiplink-radius: var(--psi-control-radius);
+    --psi-skiplink-focus-ring: var(--psi-border-focus);
+  }
+}

package/dist/components/surface.d.ts

@@ -0,0 +1,5 @@
+/** Shared elevated-surface tokens (--psi-surface-*) — D51. The recipe two
+ * consumers converged on independently (Dialog's panel, promo's hand-rolled
+ * .card): secondary background, faint hairline, radius-12, space-24
+ * padding. Dialog and Panel bind these; there is no Surface component. */
+export declare const surfaceVars: Record<string, string>;

package/dist/components/surface.js

@@ -0,0 +1,10 @@
+/** Shared elevated-surface tokens (--psi-surface-*) — D51. The recipe two
+ * consumers converged on independently (Dialog's panel, promo's hand-rolled
+ * .card): secondary background, faint hairline, radius-12, space-24
+ * padding. Dialog and Panel bind these; there is no Surface component. */
+export const surfaceVars = {
+    bg: "var(--psi-bg-secondary)",
+    border: "var(--psi-border-faint)",
+    radius: "var(--psi-radius-12)",
+    padding: "var(--psi-space-24)",
+};

package/dist/components/switch.d.ts

@@ -0,0 +1,2 @@
+/** Switch component tokens (--psi-switch-*). */
+export declare const switchVars: Record<string, string>;

package/dist/components/switch.js

@@ -0,0 +1,8 @@
+/** Switch component tokens (--psi-switch-*). */
+export const switchVars = {
+    fg: "var(--psi-fg-primary)",
+    "track-bg": "var(--psi-fill-neutral4)",
+    "track-bg-checked": "var(--psi-fill-accent)",
+    "thumb-bg": "var(--psi-fill-static-white)",
+    "focus-ring": "var(--psi-border-focus)",
+};

package/dist/components/table.d.ts

@@ -0,0 +1,12 @@
+/** Table component tokens (--psi-table-*) — D62. Pure indirection, same
+ * posture as menu.ts (D53) and panel.ts: the container aliases the shared
+ * surface family, row states reuse Menu's item recipe, and per-size geometry
+ * aliases the D54/D55 control ramp so a 32px row and a 32px Button are the
+ * same 32px from one source. A brand retuning --psi-surface-* or the control
+ * ramp gets Table for free.
+ *
+ * row-bg-selected is --psi-fill-tint-accent, the same wash Button and Tag use
+ * for accent-subtle. Note --psi-fill-accent2 does NOT exist; do not write it.
+ * Geometry keys carry no bg/fg/border segment, so keyGroup() returns undefined
+ * and they stay out of scope-map.json and both D46 gates. */
+export declare const tableVars: Record<string, string>;

package/dist/components/table.js

@@ -0,0 +1,30 @@
+/** Table component tokens (--psi-table-*) — D62. Pure indirection, same
+ * posture as menu.ts (D53) and panel.ts: the container aliases the shared
+ * surface family, row states reuse Menu's item recipe, and per-size geometry
+ * aliases the D54/D55 control ramp so a 32px row and a 32px Button are the
+ * same 32px from one source. A brand retuning --psi-surface-* or the control
+ * ramp gets Table for free.
+ *
+ * row-bg-selected is --psi-fill-tint-accent, the same wash Button and Tag use
+ * for accent-subtle. Note --psi-fill-accent2 does NOT exist; do not write it.
+ * Geometry keys carry no bg/fg/border segment, so keyGroup() returns undefined
+ * and they stay out of scope-map.json and both D46 gates. */
+export const tableVars = {
+    bg: "var(--psi-surface-bg)",
+    border: "var(--psi-surface-border)",
+    radius: "var(--psi-surface-radius)",
+    fg: "var(--psi-fg-primary)",
+    "header-fg": "var(--psi-fg-secondary)",
+    "cell-border": "var(--psi-border-faint)",
+    "row-bg": "transparent",
+    "row-bg-hover": "var(--psi-fill-neutral3)",
+    "row-bg-selected": "var(--psi-fill-tint-accent)",
+    "sort-indicator-fg": "var(--psi-fg-accent)",
+    "focus-ring": "var(--psi-border-focus)",
+    "32-row-height": "var(--psi-control-32-height)",
+    "40-row-height": "var(--psi-control-40-height)",
+    "48-row-height": "var(--psi-control-48-height)",
+    "32-cell-padding-x": "var(--psi-control-32-padding-inline)",
+    "40-cell-padding-x": "var(--psi-control-40-padding-inline)",
+    "48-cell-padding-x": "var(--psi-control-48-padding-inline)",
+};

package/dist/components/tabs.d.ts

@@ -0,0 +1,14 @@
+/** Tabs component tokens (--psi-tabs-*) — D67. Pure indirection, same posture
+ * as menu.ts (D53), table.ts (D62) and toast.ts (D64): colour aliases the
+ * semantic layer, geometry aliases the D54/D55 control ramp so a 32px tab and
+ * a 32px Button are the same 32px from one source.
+ *
+ * No new contrast pairs: fgAccent and fgSecondary on bgPrimary are already in
+ * wcagAAPairs, and the geometry keys carry no bg/fg/border segment so
+ * keyGroup() returns undefined and they stay out of both D46 gates.
+ *
+ * fg-disabled is deliberately NOT contrast-gated. Disabled text is exempt from
+ * WCAG 1.4.3, and gating it would force a contrast that defeats the
+ * affordance — the same reasoning behind Menu's item-fg-disabled, which binds
+ * the same token. */
+export declare const tabsVars: Record<string, string>;

package/dist/components/tabs.js

@@ -0,0 +1,26 @@
+/** Tabs component tokens (--psi-tabs-*) — D67. Pure indirection, same posture
+ * as menu.ts (D53), table.ts (D62) and toast.ts (D64): colour aliases the
+ * semantic layer, geometry aliases the D54/D55 control ramp so a 32px tab and
+ * a 32px Button are the same 32px from one source.
+ *
+ * No new contrast pairs: fgAccent and fgSecondary on bgPrimary are already in
+ * wcagAAPairs, and the geometry keys carry no bg/fg/border segment so
+ * keyGroup() returns undefined and they stay out of both D46 gates.
+ *
+ * fg-disabled is deliberately NOT contrast-gated. Disabled text is exempt from
+ * WCAG 1.4.3, and gating it would force a contrast that defeats the
+ * affordance — the same reasoning behind Menu's item-fg-disabled, which binds
+ * the same token. */
+export const tabsVars = {
+    fg: "var(--psi-fg-secondary)",
+    "fg-selected": "var(--psi-fg-accent)",
+    "fg-disabled": "var(--psi-fg-quaternary)",
+    "bg-hover": "var(--psi-fill-neutral3)",
+    indicator: "var(--psi-fill-accent)",
+    "list-border": "var(--psi-border-faint)",
+    "focus-ring": "var(--psi-border-focus)",
+    "32-height": "var(--psi-control-32-height)",
+    "40-height": "var(--psi-control-40-height)",
+    "32-padding-x": "var(--psi-control-32-padding-inline)",
+    "40-padding-x": "var(--psi-control-40-padding-inline)",
+};

package/dist/components/tag.d.ts

@@ -0,0 +1,4 @@
+/** Tag component tokens (--psi-tag-*). Solid variants map to fill + foreground
+ * pairs; subtle variants add tint fills. Warning label uses fg-static-black
+ * (D22) instead of fg-primary for contrast and visual emphasis. */
+export declare const tagVars: Record<string, string>;

package/dist/components/tag.js

@@ -0,0 +1,26 @@
+/** Tag component tokens (--psi-tag-*). Solid variants map to fill + foreground
+ * pairs; subtle variants add tint fills. Warning label uses fg-static-black
+ * (D22) instead of fg-primary for contrast and visual emphasis. */
+export const tagVars = {
+    "neutral-bg": "var(--psi-fill-neutral3)",
+    "neutral-fg": "var(--psi-fg-primary)",
+    "accent-bg": "var(--psi-fill-accent)",
+    "accent-fg": "var(--psi-fg-on-accent)",
+    "success-bg": "var(--psi-fill-success)",
+    "success-fg": "var(--psi-fg-static-white)",
+    "warning-bg": "var(--psi-fill-warning)",
+    "warning-fg": "var(--psi-fg-static-black)",
+    "danger-bg": "var(--psi-fill-danger)",
+    "danger-fg": "var(--psi-fg-static-white)",
+    "neutral-subtle-bg": "var(--psi-fill-neutral2)",
+    "neutral-subtle-fg": "var(--psi-fg-secondary)",
+    "accent-subtle-bg": "var(--psi-fill-tint-accent)",
+    "accent-subtle-fg": "var(--psi-fg-accent)",
+    "success-subtle-bg": "var(--psi-fill-tint-success)",
+    "success-subtle-fg": "var(--psi-fg-success)",
+    "warning-subtle-bg": "var(--psi-fill-tint-warning)",
+    "warning-subtle-fg": "var(--psi-fg-warning)",
+    "danger-subtle-bg": "var(--psi-fill-tint-danger)",
+    "danger-subtle-fg": "var(--psi-fg-danger)",
+    "focus-ring": "var(--psi-border-focus)",
+};

package/dist/components/toast.d.ts

@@ -0,0 +1,19 @@
+/** Toast component tokens (--psi-toast-*) — D64/D65. Pure indirection, same
+ * posture as menu.ts (D53) and table.ts (D62): the card aliases the shared
+ * surface family, so a brand retuning --psi-surface-* gets Toast for free.
+ *
+ * The variant lives in the status icon's colour only — Toast is an elevated
+ * surface card, not a tinted one (a stack of three saturated cards is the
+ * loudest thing on the screen, and a tint fights the elevated-surface language
+ * every other overlay speaks). The tinted alternative was measured and also
+ * passes contrast; it is rejected on design grounds, not on the gate.
+ *
+ * Note there is NO shadow key: --psi-shadow-* does not exist in any form, and
+ * neither Menu nor Dialog declares a box-shadow. Psi's elevated surfaces are
+ * border + background. Do not write --psi-shadow-overlay.
+ *
+ * The three semantic icon foregrounds sit on bgSecondary (what --psi-surface-bg
+ * resolves to), so contrast-matrix.ts gates fgSuccess/fgWarning/fgDanger there
+ * as well as on bgPrimary. Tightest measured margin is 5.87 (light) against a
+ * 4.5 floor. */
+export declare const toastVars: Record<string, string>;

package/dist/components/toast.js

@@ -0,0 +1,28 @@
+/** Toast component tokens (--psi-toast-*) — D64/D65. Pure indirection, same
+ * posture as menu.ts (D53) and table.ts (D62): the card aliases the shared
+ * surface family, so a brand retuning --psi-surface-* gets Toast for free.
+ *
+ * The variant lives in the status icon's colour only — Toast is an elevated
+ * surface card, not a tinted one (a stack of three saturated cards is the
+ * loudest thing on the screen, and a tint fights the elevated-surface language
+ * every other overlay speaks). The tinted alternative was measured and also
+ * passes contrast; it is rejected on design grounds, not on the gate.
+ *
+ * Note there is NO shadow key: --psi-shadow-* does not exist in any form, and
+ * neither Menu nor Dialog declares a box-shadow. Psi's elevated surfaces are
+ * border + background. Do not write --psi-shadow-overlay.
+ *
+ * The three semantic icon foregrounds sit on bgSecondary (what --psi-surface-bg
+ * resolves to), so contrast-matrix.ts gates fgSuccess/fgWarning/fgDanger there
+ * as well as on bgPrimary. Tightest measured margin is 5.87 (light) against a
+ * 4.5 floor. */
+export const toastVars = {
+    bg: "var(--psi-surface-bg)",
+    border: "var(--psi-surface-border)",
+    radius: "var(--psi-surface-radius)",
+    fg: "var(--psi-fg-primary)",
+    "icon-fg-neutral": "var(--psi-fg-secondary)",
+    "icon-fg-success": "var(--psi-fg-success)",
+    "icon-fg-warning": "var(--psi-fg-warning)",
+    "icon-fg-danger": "var(--psi-fg-danger)",
+};

package/dist/components/toolbar.d.ts

@@ -0,0 +1,13 @@
+/** Toolbar component tokens (--psi-toolbar-*) — D77.
+ *
+ * A deliberate default width for Toolbar's direct, unwrapped form-control
+ * children (Input/Select used bare, as the filter-toolbar preset does) —
+ * without it, their own width:100% resolves as their flex-basis and the
+ * row stacks vertically instead of reading as a toolbar. Field-wrapped
+ * controls are unaffected: Field has no width of its own, so its flex-basis
+ * already comes from content. 200px is a standalone literal, matching
+ * 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).
+ */
+export declare const toolbarVars: Record<string, string>;

package/dist/components/toolbar.js

@@ -0,0 +1,15 @@
+/** Toolbar component tokens (--psi-toolbar-*) — D77.
+ *
+ * A deliberate default width for Toolbar's direct, unwrapped form-control
+ * children (Input/Select used bare, as the filter-toolbar preset does) —
+ * without it, their own width:100% resolves as their flex-basis and the
+ * row stacks vertically instead of reading as a toolbar. Field-wrapped
+ * controls are unaffected: Field has no width of its own, so its flex-basis
+ * already comes from content. 200px is a standalone literal, matching
+ * 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).
+ */
+export const toolbarVars = {
+    "control-width": "200px",
+};

package/dist/components/tooltip.d.ts

@@ -0,0 +1,2 @@
+/** Tooltip component tokens (--psi-tooltip-*). Inverted colors: dark bg, light fg. */
+export declare const tooltipVars: Record<string, string>;

package/dist/components/tooltip.js

@@ -0,0 +1,7 @@
+/** Tooltip component tokens (--psi-tooltip-*). Inverted colors: dark bg, light fg. */
+export const tooltipVars = {
+    bg: "var(--psi-bg-inverted)",
+    fg: "var(--psi-fg-on-inverted)",
+    // D56: tracks a sharper theme down, never rounder than radius-6.
+    radius: "min(var(--psi-control-radius), var(--psi-radius-6))",
+};