@things-factory/shell 10.1.26 → 10.1.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/shell",
-  "version": "10.1.26",
+  "version": "10.1.27",
   "description": "Core module for framework",
   "bin": {
     "things-factory": "bin/things-factory",
@@ -126,5 +126,5 @@
     "pg": "^8.7.3",
     "sqlite3": "^5.0.8"
   },
-  "gitHead": "151bda14d899442c6846532ddded1e2bfe23a2f5"
+  "gitHead": "d04dc762cacf2aac8ba0b0f5d768eca365fc09da"
 }

package/tests/control-height-tokens.test.ts

@@ -5,8 +5,8 @@
  * together - change one and it fails until the other follows.
  *
  * Two bundles: button heights (ACTION_HEIGHT_TOKENS, ui-tokens.css) and input heights
- * (FORM_ELEMENT_HEIGHT_TOKENS, spacing.css). Material buttons, text fields, selects and chips are
- * sized once in the theme from those tokens.
+ * (FORM_ELEMENT_HEIGHT_TOKENS, spacing.css). Material buttons and filter chips are sized once in the
+ * theme from those tokens; Material text fields and selects keep their own size.
  */
 
 import { existsSync, readFileSync } from 'fs'
@@ -33,14 +33,19 @@ function themeDeclarations(file: string): Record<string, string> {
   return Object.fromEntries([...css.matchAll(/(--[a-z0-9-]+)\s*:\s*([^;]+);/g)].map(m => [m[1], m[2].trim()]))
 }
 
-function expectSameValues(constants: Record<string, number>, theme: Record<string, string>) {
+function expectPlatformSlots(constants: Record<string, number>, theme: Record<string, string>) {
+  /*
+   * Each token opens a slot for operato-suite and falls back to the platform default
+   * (ADR-0060 decision 6-1). The suite never redefines the token itself, so nothing depends on which
+   * stylesheet loads last.
+   */
   for (const [token, px] of Object.entries(constants)) {
-    expect({ token, value: theme[token] }).toEqual({ token, value: `${px}px` })
+    expect({ token, value: theme[token] }).toEqual({ token, value: `var(--suite-${token.slice(2)}, ${px}px)` })
   }
 }
 
 describe('button height tokens', () => {
-  it('the shell theme declares every @operato/styles action height with the same value', () => {
+  it('the shell theme opens every @operato/styles action height as a suite slot over the platform default', () => {
     const constants = stylesConstants('action-heights.js', 'ACTION_HEIGHT_TOKENS')
 
     expect(Object.keys(constants).sort()).toEqual([
@@ -49,7 +54,7 @@ describe('button height tokens', () => {
       '--form-action-height',
       '--popup-action-height'
     ])
-    expectSameValues(constants, themeDeclarations('ui-tokens.css'))
+    expectPlatformSlots(constants, themeDeclarations('ui-tokens.css'))
   })
 
   it('Material buttons take the form height, set once in the theme', () => {
@@ -63,15 +68,19 @@ describe('button height tokens', () => {
     }
   })
 
-  it('assist chips draw page actions, so they take the page action height', () => {
-    expect(themeDeclarations('layout-theme.css')['--md-assist-chip-container-height']).toBe(
-      'var(--context-action-height)'
-    )
+  it('assist chips: 36px (44px by finger) on the platform, the page action height in the operato products', () => {
+    const css = readFileSync(path.join(THEMES, 'layout-theme.css'), 'utf-8').replace(/\/\*[\s\S]*?\*\//g, '')
+    const values = [...css.matchAll(/--md-assist-chip-container-height\s*:\s*([^;]+);/g)].map(m => m[1].trim())
+
+    expect(values).toEqual([
+      'var(--suite-context-action-height, 36px)',
+      'var(--suite-context-action-height, var(--ui-tap, 44px))'
+    ])
   })
 })
 
 describe('input height tokens', () => {
-  it('the shell theme declares small, medium and large with the @operato/styles values, and nothing else', () => {
+  it('the shell theme opens small, medium and large as suite slots over the platform defaults, and nothing else', () => {
     const constants = stylesConstants('form-element-heights.js', 'FORM_ELEMENT_HEIGHT_TOKENS')
     const theme = themeDeclarations('spacing.css')
 
@@ -80,7 +89,7 @@ describe('input height tokens', () => {
       '--form-element-height-medium',
       '--form-element-height-small'
     ])
-    expectSameValues(constants, theme)
+    expectPlatformSlots(constants, theme)
     expect(
       Object.keys(theme)
         .filter(name => name.startsWith('--form-element-height-'))
@@ -88,55 +97,17 @@ describe('input height tokens', () => {
     ).toEqual(Object.keys(constants).sort())
   })
 
-  it('an input lines up with a button on the same row (a UX layout rule)', () => {
-    /*
-     * The tokens are separate so one use can change on its own (user decision 2026-09-17). This test
-     * is a layout rule on top of that: a field and a button that stand on one row have one height.
-     * If a change here is intended, change this rule - do not put the value back to make it pass.
-     */
-    const actions = stylesConstants('action-heights.js', 'ACTION_HEIGHT_TOKENS')
-    const inputs = stylesConstants('form-element-heights.js', 'FORM_ELEMENT_HEIGHT_TOKENS')
-    const pairs = [
-      ['--form-element-height-medium', '--form-action-height'],
-      ['--form-element-height-small', '--cell-action-height']
-    ] as const
-
-    for (const [input, button] of pairs) {
-      if (inputs[input] !== actions[button]) {
-        throw new Error(
-          `${input} (${inputs[input]}px) and ${button} (${actions[button]}px) stand on one row but differ in height. ` +
-            'If that is intended, change this layout rule; do not put the value back to make it pass.'
-        )
-      }
-    }
-  })
-
-  it('outlined Material fields take medium, filled ones take large', () => {
+  it('Material text fields, selects and filter chips keep their own size', () => {
+    /* Their label floats above the value inside the box and needs the room (user decision). */
     const theme = themeDeclarations('material-theme.css')
-    const space = (size: string, less: number) => `calc((var(--form-element-height-${size}) - ${less}px) / 2)`
-
-    for (const name of [
-      '--md-outlined-text-field-top-space',
-      '--md-outlined-text-field-bottom-space',
-      '--md-outlined-field-top-space',
-      '--md-outlined-field-bottom-space'
-    ]) {
-      expect({ name, value: theme[name] }).toEqual({ name, value: space('medium', 20) })
-    }
-
-    for (const name of [
-      '--md-filled-text-field-top-space',
-      '--md-filled-text-field-bottom-space',
-      '--md-filled-field-top-space',
-      '--md-filled-field-bottom-space'
-    ]) {
-      expect({ name, value: theme[name] }).toEqual({ name, value: space('large', 20) })
-    }
-
-    for (const name of ['--md-filled-text-field-with-label-top-space', '--md-filled-field-with-label-bottom-space']) {
-      expect({ name, value: theme[name] }).toEqual({ name, value: space('large', 34) })
-    }
+    const fieldSizes = Object.keys(theme).filter(name =>
+      /^--md-(outlined|filled)-(text-field|select-text-field|field|select)-.*(space|height|text-size|line-height|populated-size)$/.test(
+        name
+      )
+    )
 
-    expect(theme['--md-filter-chip-container-height']).toBe('var(--form-element-height-small)')
+    expect(fieldSizes).toEqual([])
+    /* filter chips keep Material's size on the platform; ox-input-select-buttons sizes its own */
+    expect(theme['--md-filter-chip-container-height']).toBeUndefined()
   })
 })