@operato/input 10.12.0 → 10.16.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "10.12.0",
+  "version": "10.16.0",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -251,9 +251,9 @@
     "@material/web": "^2.0.0",
     "@operato/i18n": "^10.11.0",
     "@operato/pickr": "^10.0.0",
-    "@operato/popup": "^10.11.0",
-    "@operato/styles": "^10.10.0",
-    "@operato/utils": "^10.11.0",
+    "@operato/popup": "^10.16.0",
+    "@operato/styles": "^10.16.0",
+    "@operato/utils": "^10.16.0",
     "@types/codemirror": "^5.60.5",
     "@undecaf/zbar-wasm": "^0.11.0",
     "codemirror": "^6.0.1",
@@ -294,5 +294,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "37ba4d22b6ca676f4edc905bce7c1775bc514bd6"
+  "gitHead": "8a061bd85d68e619b0c6aef699c57c89d3d9052a"
 }

package/test/form-element-height.test.ts

@@ -0,0 +1,43 @@
+import { expect } from '@open-wc/testing'
+
+import { OxButtonsRadio } from '../src/ox-buttons-radio.js'
+import { OxInputBarcode } from '../src/ox-input-barcode.js'
+import { OxInputCrontab } from '../src/ox-input-crontab.js'
+import { OxInputDuration } from '../src/ox-input-duration.js'
+import { OxInputSelectButtons } from '../src/ox-input-select-buttons.js'
+import { InputStyles } from '../src/input-styles.js'
+
+/**
+ * Inputs read the medium input height, --form-element-height-medium (30px on the platform). The number
+ * comes from @operato/styles (FORM_ELEMENT_HEIGHT_TOKENS) so a component used without the shell theme
+ * still has a height, and no component writes its own number or keeps a private height variable.
+ */
+
+const text = (styles: unknown): string =>
+  (Array.isArray(styles) ? styles.flat(Infinity) : [styles])
+    .map(s => String((s as { cssText?: string }).cssText ?? s))
+    .join('\n')
+
+describe('form element height', () => {
+  for (const [name, element] of [
+    ['ox-buttons-radio', OxButtonsRadio],
+    ['ox-input-barcode', OxInputBarcode],
+    ['ox-input-crontab', OxInputCrontab],
+    ['ox-input-duration', OxInputDuration]
+  ] as const) {
+    it(`${name} reads the medium token with the shared default`, () => {
+      const css = text((element as unknown as { styles: unknown }).styles)
+      expect(css).to.contain('var(--form-element-height-medium, 30px)')
+      expect(css).to.not.match(/var\(--form-element-height-medium\)/)
+    })
+  }
+
+  it('ox-input-select-buttons chips: 26px on the platform, the suite small height in the operato products', () => {
+    const css = text(OxInputSelectButtons.styles)
+    expect(css).to.contain('--md-filter-chip-container-height: var(--suite-form-element-height-small, 26px)')
+  })
+
+  it('InputStyles keeps no private input height', () => {
+    expect(text(InputStyles)).to.not.contain('--ox-input-height')
+  })
+})