@operato/context 10.29.7 → 10.29.9

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/context",
   "description": "Webcomponent context following open-wc recommendations",
   "author": "heartyoh",
-  "version": "10.29.7",
+  "version": "10.29.9",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -67,11 +67,11 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/help": "^10.29.7",
-    "@operato/input": "^10.29.1",
-    "@operato/layout": "^10.29.7",
-    "@operato/shell": "^10.29.5",
-    "@operato/styles": "^10.29.1",
+    "@operato/help": "^10.29.9",
+    "@operato/input": "^10.29.9",
+    "@operato/layout": "^10.29.9",
+    "@operato/shell": "^10.29.9",
+    "@operato/styles": "^10.29.9",
     "@operato/utils": "^10.29.1",
     "lit": "^3.1.2",
     "lodash-es": "^4.17.21"
@@ -108,5 +108,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "9e14db8a889f2b59cc0ad9018861b14cf9490ce1"
+  "gitHead": "24e4809ab0168eef48792291f72b11f75d8179ad"
 }

package/test/page-frames.test.ts

@@ -34,7 +34,11 @@ class WorkScreen extends LitElement {
 customElements.define('test-work-screen', WorkScreen)
 
 describe('page frames', () => {
-  it('document: one column 1080px wide at most, 18/20/40 padding, sections 24px apart, the page scrolls', async () => {
+  /*
+   * 2026-10-05: the column fills the window between two equal gutters (user decision: fill the page,
+   * responsive). It used to stop at 1080px on the left and leave the right side empty.
+   */
+  it('document: the column fills the window, 16 top / 16 gutters / 40 bottom, sections 24px apart, the page scrolls', async () => {
     const host = await fixture<HTMLElement>(html`<div style="width: 1600px; height: 600px"><test-document-screen></test-document-screen></div>`)
     const screen = host.querySelector('test-document-screen') as DocumentScreen
     await screen.updateComplete
@@ -42,13 +46,13 @@ describe('page frames', () => {
     const [first, second] = Array.from(screen.shadowRoot!.querySelectorAll('.page-section'))
     const style = getComputedStyle(page)
 
-    expect(Math.round(page.getBoundingClientRect().width)).to.equal(1080)
-    expect([style.paddingTop, style.paddingRight, style.paddingBottom, style.paddingLeft]).to.deep.equal(['18px', '20px', '40px', '20px'])
+    expect(Math.round(page.getBoundingClientRect().width)).to.equal(1600)
+    expect([style.paddingTop, style.paddingRight, style.paddingBottom, style.paddingLeft]).to.deep.equal(['16px', '16px', '40px', '16px'])
     expect(Math.round(second.getBoundingClientRect().top - first.getBoundingClientRect().bottom)).to.equal(24)
     expect(getComputedStyle(screen).overflowY).to.equal('auto')
 
     const actions = screen.shadowRoot!.querySelector('.page-section-actions') as HTMLElement
-    expect(Math.round(actions.getBoundingClientRect().right)).to.equal(Math.round(page.getBoundingClientRect().right) - 20)
+    expect(Math.round(actions.getBoundingClientRect().right)).to.equal(Math.round(page.getBoundingClientRect().right) - 16)
   })
 
   it('work surface: the content fills and scrolls inside itself, the page does not scroll', async () => {

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

@@ -41,3 +41,22 @@ describe('ox-page-title-bar description', () => {
     expect(el.shadowRoot!.querySelector('[description]') === null).to.equal(true)
   })
 })
+
+describe('ox-page-title-bar gutter', () => {
+  /*
+   * The title's first letter stands on the same line as the page's first letter: the bar's left
+   * padding plus the title box's own 4px equals the page gutter. It used to be 0 + 4, and on a
+   * document screen the title (x214) and the content (x229) were 15px apart (2026-10-05, :4000).
+   */
+  it('puts the title text at the page gutter', async () => {
+    const host = await fixture<HTMLElement>(html`<div style="--ui-gutter: 16px; --spacing-small: 4px; --spacing-medium: 8px"><ox-page-title-bar></ox-page-title-bar></div>`)
+    store.dispatch({ type: 'UPDATE_CONTEXT', context: { title: 'maintenance' } } 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 offset = titler.getBoundingClientRect().left + parseFloat(getComputedStyle(titler).paddingLeft) - el.getBoundingClientRect().left
+
+    expect(Math.round(offset)).to.equal(16)
+  })
+})