@helloimjolopez-pathway/pathway-tokens 11.3.0 → 11.4.0

package/README.md

@@ -20,7 +20,7 @@ one name set rather than each having their own.
 | Type scale (`type.css`) | 41 | Yes |
 | Spacing, radii, borders (`layout.css`) | 40 | Yes |
 | Motion (`motion.css`) | 17 | Yes |
-| Sheet and TopNav padding (`layout-responsive.css`) | 6 | Yes |
+| Sheet and TopNav padding, and the touch target minimum (`layout-responsive.css`) | 11 | Yes |
 | Breakpoints (`breakpoints.css`) | 5 | Yes |
 | **Working vocabulary** | **284** | |
 | Raw ramps (`primitives.css`) | 350 | **No**, but you must load it |
@@ -178,7 +178,7 @@ it was measured from. This table is generated from
 
 <!-- BEGIN component-index (generated by scripts/build-component-index.js) -->
 
-**19 components with their own page, 2 building blocks that only exist nested.**
+**20 components with their own page, 2 building blocks that only exist nested.**
 
 | Component | Spec | Module | Storybook | Figma node | Code Connect files |
 |---|---|---|---|---|---|
@@ -201,6 +201,7 @@ it was measured from. This table is generated from
 | **Mini Chart** | [spec](components/kpi-tile/mini-chart-spec.md) | [`mini-chart.jsx`](components/kpi-tile/mini-chart.jsx) | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-mini-chart--docs) | `40009415:27919` | 1 |
 | **Bar Chart** | [spec](components/kpi-tile/bar-chart-spec.md) | [`bar-chart.jsx`](components/kpi-tile/bar-chart.jsx) | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-bar-chart--docs) | `40009417:13029` | 3 |
 | **Page Template** | [spec](components/page-template/page-template-spec.md) | [`page-template.jsx`](components/page-template/page-template.jsx) | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-page-template--docs) | `40009709:26016` | 0 |
+| **Tooltip** | [spec](components/tooltip/tooltip-spec.md) | [`tooltip.jsx`](components/tooltip/tooltip.jsx) | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-tooltip--docs) | `40018655:12004` | 0 |
 
 Building blocks. Each is mapped for Code Connect and specced, but has no page
 of its own because it only ever appears as a nested instance inside the
@@ -338,6 +339,24 @@ A Widget is a container that does not know what it holds. A KPI Tile is a card
 in its own right. Both nest the same building block, `KpiNumberAndTrend`, which
 has no card of its own and gets one from whatever nests it.
 
+## Planned changes
+
+### Touch target tokens move to `Responsive: Layout` (open)
+
+Decided 2026-10-30. Not done yet. Until it ships, the six tokens below stay in `layout.css` under their current names, and every place that documents them carries an "Open: this token moves to Responsive: Layout" note.
+
+| What | Detail |
+|---|---|
+| Goal | All touch target tokens live in `Responsive: Layout`; none remain in `Semantic: Layout & Units` |
+| Tokens to move | Accessibility/Touch Target/AA, AAA and Desktop Only (Height and Width), next to Touch Target/Minimum |
+| Values | The same names and values, with a value for every mode (Desktop, Tablet, Mobile) |
+| Code | CSS names change from `--semantic-layout-units-accessibility-touch-target-*` to `--responsive-layout-accessibility-touch-target-*`. Ships as a major release, with the old names kept as aliases for one release |
+| Deprecate | The old Figma variables are described "Deprecated: moved to Responsive: Layout on <date>, use <new name>" and hidden from publishing, then deleted after one release |
+| Token contract | `layout-responsive.css` is documented as holding only tokens that change by breakpoint. That line is updated as part of the move so it also covers touch targets |
+| Components | Component touch frames rebind to Touch Target/Minimum in code and in Figma together, in the same release |
+
+The first step shipped in 11.4.0: `--responsive-layout-touch-target-minimum-height` and `-width` (36 on desktop, 44 on tablet and mobile). See [CHANGELOG.md](CHANGELOG.md).
+
 ## Component-to-token map
 
 `tokens/component-token-map.json` maps every component element to its CSS variable. Use this file to answer "which token does X use?" without reading specs.

package/dist/README.md

@@ -1,8 +1,8 @@
 # Pathway design tokens
 
 **The colour contract is 210 names.** Your full working vocabulary is
-**360**. If you add up every declaration in this folder you get
-1155. That number is not the contract, and the table below says why.
+**362**. If you add up every declaration in this folder you get
+1157. That number is not the contract, and the table below says why.
 
 ## Link these, in this order
 
@@ -32,7 +32,7 @@ error**.
 | `layout.css` | 76 | yes | yes | Spacing, radii, border widths. |
 | `layout-contextual.css` | 37 | **no** | **no** | Per-component metrics. This repo's components use these. |
 | `motion.css` | 21 | yes | yes | Durations and easings. |
-| `layout-responsive.css` | 9 | yes | yes | Sheet and TopNav padding. The only layout tokens with media queries. |
+| `layout-responsive.css` | 11 | yes | yes | Sheet and TopNav padding, and the touch target minimum. The only layout tokens with media queries. |
 | `breakpoints.css` | 5 | yes | yes | Breakpoint values. |
 
 Each file repeats this in its own header.

package/dist/contract.json

@@ -1,11 +1,11 @@
 {
   "$comment": "The names a consumer may use. Generated from the emitted CSS by scripts/build-contract.js, do not hand-edit. Lint against `contract` if you want the boundary enforced; nothing here blocks a primitive.",
-  "version": "11.3.0",
-  "generated": "2026-10-20",
+  "version": "11.4.0",
+  "generated": "2026-10-30",
   "counts": {
-    "contract": 360,
+    "contract": 362,
     "infrastructure": 585,
-    "declarationsAcrossAllFiles": 1155
+    "declarationsAcrossAllFiles": 1157
   },
   "loadOrder": [
     "primitives.css",
@@ -63,8 +63,8 @@
     "layout-responsive.css": {
       "contract": true,
       "mustLoad": true,
-      "count": 9,
-      "role": "Sheet and TopNav padding. The only layout tokens with media queries."
+      "count": 11,
+      "role": "Sheet and TopNav padding, and the touch target minimum. The only layout tokens with media queries."
     },
     "breakpoints.css": {
       "contract": true,
@@ -162,6 +162,8 @@
     "--responsive-layout-topnav-gap-horizontal",
     "--responsive-layout-topnav-padding-horizontal",
     "--responsive-layout-topnav-padding-vertical",
+    "--responsive-layout-touch-target-minimum-height",
+    "--responsive-layout-touch-target-minimum-width",
     "--semantic-color-fill-action-disabled",
     "--semantic-color-fill-action-ghost-hover",
     "--semantic-color-fill-action-ghost-pressed",

package/dist/layout-responsive.css

@@ -14,7 +14,12 @@
  A developer cannot derive these from a responsive grid. The grid governs
  columns; it says nothing about the chrome's padding.
 
- Declares 23 custom properties.
+ Touch Target/Minimum (added 2026-10-30) is here for the same reason: it is
+ 36 on desktop and 44 on tablet and mobile. The other touch target tokens
+ are still single-valued in layout.css; moving them here is planned (see
+ README, Planned changes).
+
+ Declares 29 custom properties.
  Generated: do not edit. Run `npm run build-tokens`.
  ==========================================================================
 */
@@ -28,6 +33,8 @@
   --responsive-layout-topnav-gap-horizontal: 8px;
   --responsive-layout-topnav-padding-horizontal: 16px;
   --responsive-layout-topnav-padding-vertical: 6px;
+  --responsive-layout-touch-target-minimum-height: 36px;
+  --responsive-layout-touch-target-minimum-width: 36px;
 }
 
 @media (max-width: 1023px) {
@@ -39,6 +46,8 @@
     --responsive-layout-sheetcontainer-padding-horizontal: 16px;
     --responsive-layout-sheetcontainer-padding-top: 12px;
     --responsive-layout-topnav-padding-horizontal: 14px;
+    --responsive-layout-touch-target-minimum-height: 44px;
+    --responsive-layout-touch-target-minimum-width: 44px;
   }
 }
 
@@ -51,5 +60,7 @@
     --responsive-layout-sheetcontainer-padding-horizontal: 12px;
     --responsive-layout-sheetcontainer-padding-top: 8px;
     --responsive-layout-topnav-padding-horizontal: 6px;
+    --responsive-layout-touch-target-minimum-height: 44px;
+    --responsive-layout-touch-target-minimum-width: 44px;
   }
 }

package/dist/tokens.js

@@ -6254,6 +6254,28 @@ const tokens = {
       "vertical"
     ]
   },
+  "responsive-layout-desktop-1440pt-touch-target-minimum-height": {
+    "value": 36,
+    "type": "number",
+    "path": [
+      "responsive-layout",
+      "desktop-1440pt",
+      "touch-target",
+      "minimum",
+      "height"
+    ]
+  },
+  "responsive-layout-desktop-1440pt-touch-target-minimum-width": {
+    "value": 36,
+    "type": "number",
+    "path": [
+      "responsive-layout",
+      "desktop-1440pt",
+      "touch-target",
+      "minimum",
+      "width"
+    ]
+  },
   "responsive-layout-tablet-798pt-sheet-corner-radius-cornerradius": {
     "value": 24,
     "type": "number",
@@ -6353,6 +6375,28 @@ const tokens = {
       "vertical"
     ]
   },
+  "responsive-layout-tablet-798pt-touch-target-minimum-height": {
+    "value": 44,
+    "type": "number",
+    "path": [
+      "responsive-layout",
+      "tablet-798pt",
+      "touch-target",
+      "minimum",
+      "height"
+    ]
+  },
+  "responsive-layout-tablet-798pt-touch-target-minimum-width": {
+    "value": 44,
+    "type": "number",
+    "path": [
+      "responsive-layout",
+      "tablet-798pt",
+      "touch-target",
+      "minimum",
+      "width"
+    ]
+  },
   "responsive-layout-mobile-393pt-sheet-corner-radius-cornerradius": {
     "value": 20,
     "type": "number",
@@ -6452,6 +6496,28 @@ const tokens = {
       "vertical"
     ]
   },
+  "responsive-layout-mobile-393pt-touch-target-minimum-height": {
+    "value": 44,
+    "type": "number",
+    "path": [
+      "responsive-layout",
+      "mobile-393pt",
+      "touch-target",
+      "minimum",
+      "height"
+    ]
+  },
+  "responsive-layout-mobile-393pt-touch-target-minimum-width": {
+    "value": 44,
+    "type": "number",
+    "path": [
+      "responsive-layout",
+      "mobile-393pt",
+      "touch-target",
+      "minimum",
+      "width"
+    ]
+  },
   "semantic-color-light-fill-action-disabled": {
     "value": "#d8d3cd5c",
     "type": "color",

package/dist/tokens.json

@@ -4656,6 +4656,18 @@
             "$value": "{semantic-layout-units.padding.xxtight}"
           }
         }
+      },
+      "touch-target": {
+        "minimum": {
+          "height": {
+            "$type": "number",
+            "$value": "{semantic-layout-units.accessibility.touch-target.desktop-only.height}"
+          },
+          "width": {
+            "$type": "number",
+            "$value": "{semantic-layout-units.accessibility.touch-target.desktop-only.width}"
+          }
+        }
       }
     },
     "tablet-798pt": {
@@ -4710,6 +4722,18 @@
             "$value": "{semantic-layout-units.padding.xxtight}"
           }
         }
+      },
+      "touch-target": {
+        "minimum": {
+          "height": {
+            "$type": "number",
+            "$value": "{semantic-layout-units.accessibility.touch-target.aa.height}"
+          },
+          "width": {
+            "$type": "number",
+            "$value": "{semantic-layout-units.accessibility.touch-target.aa.width}"
+          }
+        }
       }
     },
     "mobile-393pt": {
@@ -4764,6 +4788,18 @@
             "$value": "{semantic-layout-units.padding.xxtight}"
           }
         }
+      },
+      "touch-target": {
+        "minimum": {
+          "height": {
+            "$type": "number",
+            "$value": "{semantic-layout-units.accessibility.touch-target.aa.height}"
+          },
+          "width": {
+            "$type": "number",
+            "$value": "{semantic-layout-units.accessibility.touch-target.aa.width}"
+          }
+        }
       }
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helloimjolopez-pathway/pathway-tokens",
-  "version": "11.3.0",
+  "version": "11.4.0",
   "description": "Pathway Design System tokens, CSS custom properties, JS export, and DTCG JSON",
   "license": "UNLICENSED",
   "type": "module",
@@ -77,7 +77,7 @@
     "check-token-refs": "node scripts/check-token-refs.js",
     "check-token-names": "node scripts/check-token-names.js",
     "check-tokens": "node scripts/check-demo-tokens.js && node scripts/check-token-refs.js && node scripts/check-token-names.js && node scripts/check-token-object-refs.js && node scripts/check-story-yield.js && node scripts/fix-stale-doc-hex.js --check && node scripts/check-motion-coverage.js && node scripts/build-component-index.js --check && node scripts/check-spec-stories.js && node scripts/check-code-connect.js && node scripts/check-component-tables.js && node scripts/check-alpha-names.js && node scripts/check-token-descriptions.js && node scripts/check-distribution.js",
-    "build-elements": "esbuild components/sidenav/pathway-sidenav.js --bundle --format=esm --minify --loader:.jsx=jsx --jsx=automatic --define:process.env.NODE_ENV='\"production\"' --outfile=dist/pathway-sidenav.js",
+    "build-elements": "esbuild components/sidenav/pathway-sidenav.js --bundle --format=esm --minify --loader:.jsx=jsx --jsx=automatic --define:process.env.NODE_ENV='\"production\"' --outfile=dist/pathway-sidenav.js && esbuild components/pathway-components.js --bundle --format=esm --minify --loader:.jsx=jsx --jsx=automatic --define:process.env.NODE_ENV='\"production\"' --outfile=dist/pathway-components.js",
     "check-story-yield": "node scripts/check-story-yield.js",
     "stamp-headers": "node scripts/stamp-headers.js",
     "check-headers": "node scripts/stamp-headers.js --check",
@@ -110,7 +110,8 @@
     "check-contrast-focus": "node scripts/check-contrast-focus.js",
     "check-spec-structure": "node scripts/check-spec-structure.js",
     "check-type-floor": "node scripts/check-type-floor.js",
-    "check-distribution": "node scripts/check-distribution.js"
+    "check-distribution": "node scripts/check-distribution.js",
+    "build-components": "esbuild components/pathway-components.js --bundle --format=esm --minify --loader:.jsx=jsx --jsx=automatic --define:process.env.NODE_ENV='\"production\"' --outfile=dist/pathway-components.js"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.29.2",