@operato/popup 10.15.0 → 10.16.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/popup",
   "description": "Webcomponent popup following open-wc recommendations",
   "author": "heartyoh",
-  "version": "10.15.0",
+  "version": "10.16.0",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -72,8 +72,8 @@
   "dependencies": {
     "@material/web": "^2.0.0",
     "@operato/i18n": "^10.11.0",
-    "@operato/styles": "^10.15.0",
-    "@operato/utils": "^10.15.0",
+    "@operato/styles": "^10.16.0",
+    "@operato/utils": "^10.16.0",
     "lit": "^3.1.2",
     "sortablejs": "^1.15.2"
   },
@@ -110,5 +110,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "62ac2a23866e7ea579786c4433ef356888dfded8"
+  "gitHead": "8a061bd85d68e619b0c6aef699c57c89d3d9052a"
 }

package/test/office-control-height.test.ts

@@ -1,58 +1,125 @@
-import { expect } from '@open-wc/testing'
+import '@material/web/button/filled-button.js'
 
-import { ACTION_HEIGHT_TOKENS, ButtonContainerStyles, CommonHeaderStyles, CommonPopupStyles } from '@operato/styles'
+import { expect, fixture } from '@open-wc/testing'
+import { css, html, LitElement } from 'lit'
 
+import {
+  ACTION_HEIGHT_TOKENS,
+  ButtonContainerStyles,
+  CommonHeaderStyles,
+  CommonPopupStyles
+} from '@operato/styles'
+
+import '../src/ox-popup-actions.js'
 import { OxPopupActions } from '../src/ox-popup-actions.js'
 
 /**
- * Office button heights come from one token per use (ADR-0060 decision 6): 32px for action buttons,
- * 26px in a grid cell, the same for mouse and finger (WCAG 2.2 AA, user decision 2026-09-17).
+ * Button heights (ADR-0060 decisions 6 and 6-1).
+ *
+ * The **platform** keeps the heights every application had before the operato standardization, so
+ * dssp, fmsim and the rest do not change when they upgrade. The **operato products** are compact: the
+ * shell theme opens each token as `var(--suite-<token>, <platform>)` and operato-suite fills the slot.
  *
- * The finger branch cannot be emulated in the test browser, so these read the stylesheets: every
- * height is the token with the shared default, and no finger branch brings back a height of its own.
- * Shop-floor popups raise the token themselves (operato-plant checks that on its side).
+ * These render both worlds with a mouse (the test browser). The finger branches cannot be emulated,
+ * so those are read from the stylesheets.
  */
 
+const PLATFORM_TOKENS = `
+  --context-action-height: var(--suite-context-action-height, 32px);
+  --popup-action-height: var(--suite-popup-action-height, 30px);
+  --form-action-height: var(--suite-form-action-height, 40px);
+`
+const SUITE_SLOTS = `
+  --suite-context-action-height: 32px;
+  --suite-popup-action-height: 32px;
+  --suite-form-action-height: 32px;
+`
+
+class StyledRows extends LitElement {
+  static styles = [CommonPopupStyles, CommonHeaderStyles, ButtonContainerStyles, css``]
+
+  render() {
+    return html`
+      <div class="buttons"><md-filled-button id="popup-md">save</md-filled-button></div>
+      <div class="footer"><button id="footer">save</button></div>
+      <div class="button-container">
+        <button id="bar">export</button>
+        <md-filled-button id="bar-md">publish</md-filled-button>
+      </div>
+    `
+  }
+}
+customElements.define('test-styled-rows', StyledRows)
+
+const height = (el: Element | null | undefined) => Math.round(el!.getBoundingClientRect().height)
 const text = (styles: unknown) =>
   (Array.isArray(styles) ? styles : [styles]).map(s => String((s as { cssText?: string }).cssText ?? s)).join('\n')
+const coarse = (cssText: string) => cssText.slice(cssText.indexOf('(pointer: coarse)'))
 
-const coarse = (css: string) => css.slice(css.indexOf('(pointer: coarse)'))
+async function rows(style: string) {
+  const host = await fixture<HTMLElement>(html`
+    <div style="${style}">
+      <test-styled-rows></test-styled-rows>
+      <ox-popup-actions>
+        <md-filled-button slot="confirm" id="prompt-md">ok</md-filled-button>
+      </ox-popup-actions>
+    </div>
+  `)
+  const styled = host.querySelector('test-styled-rows') as StyledRows
+  await styled.updateComplete
+  const actions = host.querySelector('ox-popup-actions') as OxPopupActions
+  await actions.updateComplete
+  const buttons = [...Array.from(styled.shadowRoot!.querySelectorAll('md-filled-button')), host.querySelector('#prompt-md')]
+  await Promise.all(buttons.map(b => (b as LitElement).updateComplete))
+  return { root: styled.shadowRoot!, host }
+}
 
 describe('office control height', () => {
-  it('the defaults are 32 for action buttons and 26 in a grid cell', () => {
+  it('the platform defaults are the heights before the standardization', () => {
     expect(ACTION_HEIGHT_TOKENS).to.deep.equal({
       '--context-action-height': 32,
-      '--popup-action-height': 32,
-      '--form-action-height': 32,
+      '--popup-action-height': 30,
+      '--form-action-height': 40,
       '--cell-action-height': 26
     })
   })
 
-  it('ox-popup-actions: the popup token, with no finger height of its own', () => {
-    const css = text(OxPopupActions.styles)
-    expect(css).to.contain('--_height: var(--popup-action-height, 32px)')
-    expect(coarse(css)).to.not.contain('--_height')
-    expect(css).to.not.match(/max\(\d+px/)
+  it('★ platform: nothing changes for applications outside the operato suite', async () => {
+    const { root, host } = await rows(PLATFORM_TOKENS)
+
+    expect(height(root.querySelector('#popup-md'))).to.equal(40) // CommonPopupStyles .buttons
+    expect(height(root.querySelector('#footer'))).to.be.at.least(30) // older footer
+    expect(height(root.querySelector('#bar'))).to.equal(32) // page action bar
+    expect(height(root.querySelector('#bar-md'))).to.equal(40) // Material keeps its own in the bar
+    expect(height(host.querySelector('#prompt-md'))).to.equal(30) // OxPrompt row, as before
   })
 
-  it('CommonPopupStyles .buttons: the popup token for mouse and finger', () => {
-    const css = text(CommonPopupStyles)
-    expect(css).to.contain('--md-filled-button-container-height: var(--popup-action-height, 32px)')
-    expect(coarse(css)).to.contain('min-height: var(--popup-action-height, 32px)')
-    expect(css).to.not.match(/max\(\d+px/)
+  it('★ suite: every action button in the operato products is 32px', async () => {
+    const { root, host } = await rows(SUITE_SLOTS + PLATFORM_TOKENS)
+
+    expect(height(root.querySelector('#popup-md'))).to.equal(32)
+    expect(height(root.querySelector('#bar'))).to.equal(32)
+    expect(height(root.querySelector('#bar-md'))).to.equal(32)
+    expect(height(host.querySelector('#prompt-md'))).to.equal(32)
   })
 
-  it('CommonHeaderStyles .footer: the old popup footer reads the same popup token', () => {
-    const css = text(CommonHeaderStyles)
-    expect(css).to.contain('min-height: var(--popup-action-height, 32px)')
-    expect(css).to.not.contain('min-height: 30px')
+  it('a shop-floor screen still raises the popup row above both', async () => {
+    const { root } = await rows(SUITE_SLOTS + PLATFORM_TOKENS + '--popup-action-height: 64px;')
+    expect(height(root.querySelector('#popup-md'))).to.equal(64)
+  })
+
+  it('finger: the platform keeps 44px for the page bar and a 48px floor for the popup row', () => {
+    const bar = coarse(text(ButtonContainerStyles))
+    expect(bar).to.contain('var(--suite-context-action-height, 44px)')
+
+    const popup = coarse(text(CommonPopupStyles))
+    expect(popup).to.contain('var(--suite-popup-action-height, 48px)')
+    expect(popup).to.contain('var(--popup-action-height, 30px)')
   })
 
-  it('ButtonContainerStyles: the page action token, and no finger branch', () => {
-    const css = text(ButtonContainerStyles)
-    expect(css).to.contain('height: var(--context-action-height, 32px)')
-    expect(css).to.contain('--md-filled-button-container-height: var(--context-action-height, 32px)')
-    expect(css).to.not.contain('--context-action-height-touch')
-    expect(css).to.not.contain('(pointer: coarse)')
+  it('ox-popup-actions has no finger height of its own', () => {
+    const cssText = text(OxPopupActions.styles)
+    expect(cssText).to.contain('--_height: var(--popup-action-height, 30px)')
+    expect(coarse(cssText)).to.not.contain('--_height:')
   })
 })

package/test/ox-popup-actions.test.ts

@@ -11,7 +11,7 @@ import '../src/ox-popup-actions.js'
  * wrong by writing its markup differently. These run with a mouse pointer (the test browser); the
  * finger bar is a media query of the same element.
  *
- * The expected numbers are written out (32, 68, 999em) rather than read from the stylesheet, so a
+ * The expected numbers are written out (30, 68, 999em) rather than read from the stylesheet, so a
  * change to the stylesheet shows up here as a decision, not as a silent follow.
  */
 
@@ -60,7 +60,7 @@ describe('ox-popup-actions', () => {
     expect(Math.round(confirm.getBoundingClientRect().right)).to.equal(Math.round(actions.getBoundingClientRect().right))
   })
 
-  it('gives Material buttons and plain buttons the same 32px height', async () => {
+  it('gives Material buttons and plain buttons the same height (30px, the platform default)', async () => {
     const actions = await row(html`
       <ox-popup-actions>
         <button slot="cancel" id="plain">cancel</button>
@@ -68,8 +68,8 @@ describe('ox-popup-actions', () => {
       </ox-popup-actions>
     `)
 
-    expect(height(actions.querySelector('#md')!)).to.equal(32)
-    expect(height(actions.querySelector('#plain')!)).to.equal(32)
+    expect(height(actions.querySelector('#md')!)).to.equal(30)
+    expect(height(actions.querySelector('#plain')!)).to.equal(30)
   })
 
   it('uses pill shapes inside the popup card', async () => {

package/test/ox-prompt-actions.test.ts

@@ -62,8 +62,8 @@ describe('OxPrompt uses the shared action row', () => {
     expect(confirm.getAttribute('slot')).to.equal('confirm')
     expect(cancel.getAttribute('slot')).to.equal('cancel')
     expect(cancel.getBoundingClientRect().left).to.be.lessThan(confirm.getBoundingClientRect().left)
-    expect(Math.round(confirm.getBoundingClientRect().height)).to.equal(32)
-    expect(Math.round(cancel.getBoundingClientRect().height)).to.equal(32)
+    expect(Math.round(confirm.getBoundingClientRect().height)).to.equal(30)
+    expect(Math.round(cancel.getBoundingClientRect().height)).to.equal(30)
 
     cancel.click()
     expect(await within(answer)).to.equal(false)
@@ -97,3 +97,40 @@ describe('OxPrompt uses the shared action row', () => {
     expect(await within(answer)).to.equal(false)
   })
 })
+
+describe('OxPrompt.confirmDelete', () => {
+  afterEach(() => {
+    document.body.querySelectorAll('ox-prompt').forEach(p => (p as OxPrompt).close())
+  })
+
+  async function opened(count?: number) {
+    const before = document.body.querySelectorAll('ox-prompt').length
+    const answer = OxPrompt.confirmDelete({ count })
+    for (let i = 0; i < 40 && document.body.querySelectorAll('ox-prompt').length <= before; i++) await settle()
+    const prompts = document.body.querySelectorAll('ox-prompt')
+    const prompt = prompts[prompts.length - 1] as OxPrompt
+    await prompt.updateComplete
+    const root = prompt.renderRoot as ShadowRoot
+    const confirm = root.querySelector('#confirm') as HTMLElement & { updateComplete: Promise<unknown> }
+    await confirm?.updateComplete
+    return { answer, prompt, root, confirm }
+  }
+
+  it('asks in the shared popup with a destructive delete, and answers true on delete', async () => {
+    const { answer, prompt, confirm } = await opened()
+
+    expect(prompt.titler).to.equal('delete the selected item?')
+    expect(confirm.hasAttribute('destructive')).to.equal(true)
+    expect(confirm.textContent?.trim()).to.equal('delete')
+
+    confirm.click()
+    expect(await within(answer)).to.equal(true)
+  })
+
+  it('names how many are selected when more than one', async () => {
+    const { prompt, root } = await opened(3)
+
+    expect(prompt.titler).to.equal('delete the 3 selected items?')
+    ;(root.querySelector('#cancel') as HTMLElement).click()
+  })
+})

package/translations/en.json

@@ -1 +1,6 @@
-{}
+{
+  "button.popup-cancel": "cancel",
+  "button.popup-delete": "delete",
+  "text.popup-confirm-delete": "delete the selected item?",
+  "text.popup-confirm-delete-count": "delete the {count} selected items?"
+}

package/translations/ja.json

@@ -0,0 +1,6 @@
+{
+  "button.popup-cancel": "キャンセル",
+  "button.popup-delete": "削除",
+  "text.popup-confirm-delete": "選択した項目を削除しますか？",
+  "text.popup-confirm-delete-count": "選択した{count}件を削除しますか？"
+}

package/translations/ko.json

@@ -1 +1,6 @@
-{}
+{
+  "button.popup-cancel": "취소",
+  "button.popup-delete": "삭제",
+  "text.popup-confirm-delete": "선택한 항목을 삭제할까요?",
+  "text.popup-confirm-delete-count": "선택한 {count}건을 삭제할까요?"
+}

package/translations/ms.json

@@ -0,0 +1,6 @@
+{
+  "button.popup-cancel": "batal",
+  "button.popup-delete": "padam",
+  "text.popup-confirm-delete": "padam item yang dipilih?",
+  "text.popup-confirm-delete-count": "padam {count} item yang dipilih?"
+}

package/translations/zh.json

@@ -0,0 +1,6 @@
+{
+  "button.popup-cancel": "取消",
+  "button.popup-delete": "删除",
+  "text.popup-confirm-delete": "删除所选项目吗？",
+  "text.popup-confirm-delete-count": "删除所选的{count}项吗？"
+}