@operato/context 10.29.27 → 10.29.28

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/context",
   "description": "Webcomponent context following open-wc recommendations",
   "author": "heartyoh",
-  "version": "10.29.27",
+  "version": "10.29.28",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -67,8 +67,8 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/help": "^10.29.27",
-    "@operato/input": "^10.29.27",
+    "@operato/help": "^10.29.28",
+    "@operato/input": "^10.29.28",
     "@operato/layout": "^10.29.27",
     "@operato/shell": "^10.29.27",
     "@operato/styles": "^10.29.23",
@@ -108,5 +108,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "aa70087b5929f12cec0506c19f1aec0a83610a79"
+  "gitHead": "cf6d84547fbf6a32a315c08f85c4dfc35a30d4a5"
 }

package/test/page-title-description.test.ts

@@ -60,3 +60,47 @@ describe('ox-page-title-bar gutter', () => {
     expect(Math.round(offset)).to.equal(16)
   })
 })
+
+describe('ox-page-title-bar narrow window', () => {
+  /*
+   * The screen's name always shows. A narrow window used to drop the title for the search pill
+   * (2026-10-12, operato-board); now the pill moves under the title.
+   */
+  it('★ keeps the title and puts the search pill on the next line', async () => {
+    const host = await fixture<HTMLElement>(html`<div style="width: 240px"><ox-page-title-bar></ox-page-title-bar></div>`)
+    store.dispatch({
+      type: 'UPDATE_CONTEXT',
+      context: { title: 'scenario list', search: { handler: () => {}, placeholder: 'search scenarios by name' } }
+    } as any)
+    const el = host.querySelector('ox-page-title-bar') as HTMLElement & { updateComplete: Promise<unknown> }
+    await el.updateComplete
+    await el.updateComplete
+    const titler = el.shadowRoot!.querySelector('[titler]') as HTMLElement
+    const search = el.shadowRoot!.querySelector('[search]') as HTMLElement
+
+    expect(titler?.textContent?.trim()).to.equal('scenario list')
+    expect(search.getBoundingClientRect().top).to.be.at.least(titler.getBoundingClientRect().bottom - 1)
+    expect(search.getBoundingClientRect().right).to.be.at.most(el.getBoundingClientRect().right + 1)
+  })
+})
+
+describe('ox-page-title-bar title style', () => {
+  /*
+   * The screen title reads like the New Board page's heading (2026-10-12): the theme gives the font
+   * (--context-toolbar-title) and the colour (--context-toolbar-title-color).
+   */
+  it('★ takes its font and colour from the title variables', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="--context-toolbar-title: 600 20px sans-serif; --context-toolbar-title-color: rgb(27, 27, 27); --title-text-color: rgb(100, 85, 80)"><ox-page-title-bar></ox-page-title-bar></div>`
+    )
+    store.dispatch({ type: 'UPDATE_CONTEXT', context: { title: 'board list' } } as any)
+    const el = host.querySelector('ox-page-title-bar') as HTMLElement & { updateComplete: Promise<unknown> }
+    await el.updateComplete
+    await el.updateComplete
+    const style = getComputedStyle(el.shadowRoot!.querySelector('[titler]') as HTMLElement)
+
+    expect(style.fontWeight).to.equal('600')
+    expect(style.fontSize).to.equal('20px')
+    expect(style.color).to.equal('rgb(27, 27, 27)')
+  })
+})