@handamade/psi-tokens 0.16.0 → 0.17.0

package/dist/guidance.json

@@ -190,7 +190,7 @@
     "radius": "Control radius is size-invariant (D56) — it does NOT ride the size ramp, because border-radius sits on each component's base rule and all four sizes resolve to radius-8. One dial, --psi-control-radius, is the layer to override, aliased per component: --psi-button-radius (Button, and IconButton via the same token), --psi-input-radius, --psi-select-radius, --psi-checkbox-box-radius, and --psi-tooltip-radius. Checkbox and Tooltip cap themselves with min(var(--psi-control-radius), var(--psi-radius-4)) and min(…, var(--psi-radius-6)) respectively so neither over-rounds a small object — but the published radius scale's floor is radius-4, so Checkbox's cap is a no-op for every on-scale value a theme can set; it only bites at an off-scale value like 0px. Tooltip's higher ceiling does track a sharper theme, down to radius-4. Tag and Switch stay --psi-radius-full: pill-ness is component identity, not theme expression. A theme retunes every control's shape by setting --psi-control-radius once. Psi now has two radius dials, not one: --psi-control-radius (here, for interactive controls) and --psi-surface-radius (for elevated surfaces — Dialog, Panel, Menu). --psi-card-radius sits on neither dial, so a theme that retunes controls or surfaces leaves Card at its own default of radius-8."
   },
   "utilities": {
-    "note": "Every utility class shipped in utilities.css, generated from the same source as the CSS (D79). Utilities set one property each and create no layout context: .psi-gap-* sets gap only, so pair it with display:flex or grid yourself. Import @handamade/psi-tokens/utilities.css — it is required, not optional; .psi-container and the reduced-motion duration zeroing live there.",
+    "note": "Every utility class shipped in utilities.css, generated from the same source as the CSS (D79). Scaled utility families set one property each and create no layout context: .psi-gap-* sets gap only, so pair it with display:flex or grid yourself. The bare/fixed utilities (.psi-container, .psi-media-tint, .psi-sr-only) set several. Import @handamade/psi-tokens/utilities.css — it is required, not optional; .psi-container and the reduced-motion duration zeroing live there.",
     "families": [
       {
         "prefix": "psi-gap-*",
@@ -547,6 +547,14 @@
         "classes": [
           "psi-media-tint"
         ]
+      },
+      {
+        "prefix": "psi-sr-only",
+        "property": "position, width, height, padding, margin, overflow, clip, clip-path, white-space, border",
+        "scale": null,
+        "classes": [
+          "psi-sr-only"
+        ]
       }
     ],
     "classes": [
@@ -674,6 +682,7 @@
       "psi-py-8",
       "psi-py-80",
       "psi-py-96",
+      "psi-sr-only",
       "psi-tabular",
       "psi-text-12-16-medium",
       "psi-text-12-16-regular",

package/dist/utilities.css

@@ -158,6 +158,8 @@
   .psi-media-tint { filter: var(--psi-media-tint); transition: filter var(--psi-duration-450) var(--psi-ease-soft); }
   .psi-media-tint:hover, .psi-media-tint:focus-visible { filter: none; }
 
+  .psi-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
+
   /* Reduced motion (D30): zero every duration token; anything driven by
      --psi-duration-* complies for free. psi.utilities wins over psi.base. */
   @media (prefers-reduced-motion: reduce) {

package/llms.txt

@@ -40,6 +40,9 @@ OKLCH formula-based design tokens. Code is the source of truth; all artifacts ge
 ## Tabular numerals (--psi-font-variant-numeric, .psi-tabular)
 - --psi-font-variant-numeric is tabular-nums (D62); apply the .psi-tabular utility class to numeric content for fixed-width digits that don't jitter between rows. Table's own numeric columns (TableCell/TableHeaderCell `numeric` prop) bind the token directly in CSS — reach for the utility class for numeric content outside Table.
 
+## Visually hidden (.psi-sr-only)
+- .psi-sr-only hides content visually while keeping it in the accessibility tree — position/size/clip only, never display:none or visibility:hidden, so screen readers still announce it and it stays in the tab order if focusable. Use it for status-word prefixes, icon-only-control labels not carried by aria-label, or a native input replaced by a custom visual control.
+
 ## Dark-first brands
 - A brand theme can declare `base: "dark"` (see ember) so its formulas derive from the dark palette instead of light — use this for brands whose primary surface is a dark canvas rather than treating dark as an inverted afterthought.
 

package/package.json

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