@operato/popup 10.15.0 → 10.16.0

package/dist/src/ox-prompt.d.ts

@@ -137,6 +137,22 @@ export declare class OxPrompt extends LitElement {
             value: boolean;
         }) => void;
     }): Promise<boolean>;
+    /**
+     * Asks before deleting — the modal replacement for `confirm('sure to delete?')`.
+     *
+     * Framework screens asked with the browser's own dialog (17 places, ADR-0060 decision 9): it
+     * blocks the page, cannot be styled or translated, and put "OK" where every other popup puts
+     * "cancel". This is the same question in the shared popup: a warning, "delete" painted as
+     * destructive on the right, "cancel" before it and focused.
+     *
+     *   if (!(await OxPrompt.confirmDelete({ count: selected.length }))) return
+     *
+     * @returns {Promise<boolean>} true when the user chose delete.
+     */
+    static confirmDelete({ count, parent }?: {
+        count?: number;
+        parent?: Element | null;
+    }): Promise<boolean>;
     /**
      * Static method to open an input popup — a modal replacement for the native `window.prompt()`.
      *

package/dist/src/ox-prompt.js

@@ -8,6 +8,7 @@ import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typesca
 import { css, html, nothing, LitElement } from 'lit';
 import { render } from 'lit-html';
 import { customElement, property, state } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
 import { ScrollbarStyles } from '@operato/styles';
 const TYPES_ICON = {
     success: 'verified',
@@ -303,6 +304,29 @@ let OxPrompt = class OxPrompt extends LitElement {
         }
         return result;
     }
+    /**
+     * Asks before deleting — the modal replacement for `confirm('sure to delete?')`.
+     *
+     * Framework screens asked with the browser's own dialog (17 places, ADR-0060 decision 9): it
+     * blocks the page, cannot be styled or translated, and put "OK" where every other popup puts
+     * "cancel". This is the same question in the shared popup: a warning, "delete" painted as
+     * destructive on the right, "cancel" before it and focused.
+     *
+     *   if (!(await OxPrompt.confirmDelete({ count: selected.length }))) return
+     *
+     * @returns {Promise<boolean>} true when the user chose delete.
+     */
+    static async confirmDelete({ count, parent } = {}) {
+        return OxPrompt_1.open({
+            type: 'warning',
+            title: count && count > 1
+                ? i18next.t('text.popup-confirm-delete-count', { count, defaultValue: 'delete the {count} selected items?' })
+                : i18next.t('text.popup-confirm-delete', { defaultValue: 'delete the selected item?' }),
+            confirmButton: { text: i18next.t('button.popup-delete', { defaultValue: 'delete' }), destructive: true },
+            cancelButton: { text: i18next.t('button.popup-cancel', { defaultValue: 'cancel' }) },
+            parent
+        });
+    }
     /**
      * Static method to open an input popup — a modal replacement for the native `window.prompt()`.
      *

package/dist/src/ox-prompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-prompt.js","sourceRoot":"","sources":["../../src/ox-prompt.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@material/web/button/text-button.js'\nimport './ox-popup-actions.js'\nimport '@material/web/icon/icon.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nimport { css, html, nothing, LitElement } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nconst TYPES_ICON = {\n  success: 'verified',\n  error: 'error',\n  warning: 'warning',\n  info: 'info',\n  question: 'question_mark'\n}\n\n/**\n * The `ox-prompt` custom element represents a modal popup that provides information or options for the user, such as confirmation or cancellation.\n */\n@customElement('ox-prompt')\nexport class OxPrompt extends LitElement {\n  static styles = [\n    MDTypeScaleStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        position: absolute;\n        display: flex;\n        flex-direction: column;\n        gap: var(--ox-prompt-gap, var(--spacing-medium));\n        background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface));\n        z-index: 1000;\n        padding: var(--ox-prompt-container-padding, var(--spacing-medium));\n        box-shadow: var(--ox-prompt-container-box-shadow, 2px 3px 10px 5px rgba(0, 0, 0, 0.15));\n        border-radius: var(--ox-prompt-container-border-radius, var(--md-sys-shape-corner-medium));\n        box-sizing: border-box;\n        min-width: 300;\n        line-height: initial;\n        text-align: initial;\n      }\n\n      :host([active]) {\n        display: block;\n      }\n\n      :host(*:focus) {\n        outline: none;\n      }\n\n      [titler] {\n        padding: var(--ox-prompt-title-padding, var(--spacing-medium));\n        padding-bottom: 0;\n        color: var(--ox-prompt-title-color, var(--md-sys-color-primary));\n        font-size: var(--md-sys-typescale-title-large-size, 1.375rem);\n        font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));\n        text-align: var(--ox-prompt-title-text-align, 'left');\n      }\n\n      [content] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--ox-prompt-content-gap, var(--spacing-medium));\n        padding: var(--ox-prompt-content-padding, var(--spacing-medium));\n        color: var(--ox-prompt-body-color, var(--md-sys-color-on-surface));\n        word-break: keep-all;\n        white-space: pre-line;\n        text-align: var(--ox-prompt-content-text-align, 'left');\n\n        md-icon {\n          align-self: center;\n          --md-icon-size: var(--icon-size-huge);\n          color: var(--ox-prompt-body-color-variant, var(--md-sys-color-primary));\n        }\n      }\n\n      [content].warning md-icon {\n        color: var(--status-warning-color, #ee8d03);\n      }\n\n      [content].error md-icon {\n        color: var(--md-sys-color-error, var(--md-sys-color-error));\n      }\n\n      [content].info md-icon {\n        color: var(--status-info-color, #398ace);\n      }\n\n      [content].success md-icon {\n        color: var(--status-success-color, #35a24a);\n      }\n\n      /*\n       * The command row is the shared popup action row: confirm on the right, cancel just before it,\n       * pills of --popup-action-height with a mouse, a square full-width bar with a finger. Its own margins keep the row\n       * inside the card's padding with a mouse.\n       */\n      ox-popup-actions {\n        margin: 0 var(--ox-prompt-buttons-padding, var(--spacing-medium)) var(--ox-prompt-buttons-padding, var(--spacing-medium));\n      }\n\n      @media (pointer: coarse) {\n        /* The bar is the card's bottom edge: it reaches both sides, and the card clips its corners. */\n        :host {\n          overflow: hidden;\n        }\n\n        ox-popup-actions {\n          margin: var(--spacing-medium) calc(-1 * var(--ox-prompt-container-padding, var(--spacing-medium)))\n            calc(-1 * var(--ox-prompt-container-padding, var(--spacing-medium)));\n        }\n      }\n    `\n  ]\n\n  /**\n   * Specifies the type of the popup. Possible values are 'success', 'error', 'warning', 'info', 'question'.\n   */\n  @property({ type: String }) type?: 'success' | 'error' | 'warning' | 'info' | 'question'\n\n  /**\n   * Specifies the icon of the popup.\n   */\n  @property({ type: String }) icon?: string\n\n  /**\n   * Specifies the title of the popup.\n   */\n  @property({ type: String }) titler?: string = ''\n\n  /**\n   * Specifies the text content of the popup.\n   */\n  @property({ type: String }) text?: string\n\n  /**\n   * Specifies the footer (additional information at the bottom) of the popup.\n   */\n  @property({ type: String }) footer?: string\n\n  /**\n   * Determines whether the popup is displayed as a toast.\n   */\n  @property({ type: Boolean }) toast?: boolean\n\n  /**\n   * Specifies settings for the confirmation button.\n   */\n  @property({ type: Object }) confirmButton?: { text: string; color?: string; destructive?: boolean }\n\n  /**\n   * Specifies settings for the cancel button.\n   */\n  @property({ type: Object }) cancelButton?: { text: string; color?: string }\n\n  /**\n   * Prevents the popup from closing when it loses focus (blur event).\n   */\n  @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur: boolean = false\n\n  /**\n   * A callback function called when the popup is closed, providing the result of the user's interaction.\n   */\n  @property({ type: Object }) callback?: (result: { value: boolean }) => void\n\n  @state() _parent?: Element\n\n  private resolveFn: ((value: boolean) => void) | null = null\n\n  render() {\n    return html`\n      ${this.titler ? html` <div titler class=\"md-typescale-title-large\">${this.titler}</div> ` : nothing}\n      <div content class=\"${this.type || 'info'} md-typescale-body-large\">\n        ${this.icon || this.type\n          ? html` <md-icon icon>${this.icon || TYPES_ICON[this.type || 'info']}</md-icon> `\n          : nothing}\n        ${this.text ? html` <div text>${this.text}</div> ` : nothing}\n        <slot> </slot>\n        ${this.footer ? html` <div footer class=\"md-typescale-body-large\">${this.footer}</div> ` : nothing}\n      </div>\n      <ox-popup-actions>\n        ${this.renderButtons()}\n      </ox-popup-actions>\n    `\n  }\n\n  /*\n   * Markup order only decides which button gets the first focus; the row decides where they stand.\n   * A destructive confirmation focuses cancel, so a reflexive Enter does not delete anything.\n   */\n  private renderButtons() {\n    const confirm = this.confirmButton\n      ? html`\n          <md-filled-button\n            id=\"confirm\"\n            slot=\"confirm\"\n            type=\"button\"\n            ?destructive=${!!this.confirmButton.destructive}\n            @click=${() => this.onConfirm()}\n            >${this.confirmButton.text}</md-filled-button\n          >\n        `\n      : nothing\n    const cancel = this.cancelButton\n      ? html`\n          <md-text-button id=\"cancel\" slot=\"cancel\" type=\"button\" @click=${() => this.onCancel()}\n            >${this.cancelButton.text}</md-text-button\n          >\n        `\n      : nothing\n\n    return this.confirmButton?.destructive ? html`${cancel}${confirm}` : html`${confirm}${cancel}`\n  }\n\n  resolve(result: boolean) {\n    if (this.resolveFn) {\n      this.resolveFn(result)\n      this.resolveFn = null\n    }\n  }\n\n  /**\n   * Function called when the confirm button is clicked.\n   */\n  onConfirm() {\n    this.resolve(true)\n    this.close()\n  }\n\n  /**\n   * Function called when the cancel button is clicked.\n   */\n  onCancel() {\n    this.resolve(false)\n    this.close()\n  }\n\n  protected _onfocusout: (e: FocusEvent) => void = function (this: OxPrompt, e: FocusEvent) {\n    const to = e.relatedTarget as HTMLElement\n\n    if (!this.contains(to)) {\n      /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-prompt은 닫혀야 한다. */\n      // @ts-ignore for debug\n      if (this.preventCloseOnBlur || window.POPUP_DEBUG) {\n        return\n      }\n\n      this.resolve(false)\n      this.close()\n    }\n  }.bind(this)\n\n  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPrompt, e: KeyboardEvent) {\n    e.stopPropagation()\n\n    switch (e.key) {\n      case 'Esc': // for IE/Edge\n      case 'Escape':\n        this.resolve(false)\n        this.close()\n        break\n    }\n  }.bind(this)\n\n  protected _onkeyup: (e: KeyboardEvent) => void = function (this: OxPrompt, e: KeyboardEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onmouseup: (e: MouseEvent) => void = function (this: OxPrompt, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onmousedown: (e: MouseEvent) => void = function (this: OxPrompt, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _oncontextmenu: (e: Event) => void = function (this: OxPrompt, e: Event) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onclick: (e: MouseEvent) => void = function (this: OxPrompt, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onclose: (e: Event) => void = function (this: OxPrompt, e: Event) {\n    this.resolve(false)\n    this.close()\n  }.bind(this)\n\n  protected _oncollapse: (e: Event) => void = function (this: OxPrompt, e: Event) {\n    e.stopPropagation()\n\n    this.resolve(false)\n    this.close()\n  }.bind(this)\n\n  protected _onwindowblur: (e: Event) => void = function (this: OxPrompt, e: Event) {\n    // @ts-ignore for debug\n    if (this.preventCloseOnBlur || window.POPUP_DEBUG) {\n      return\n    }\n\n    this.resolve(false)\n    this.close()\n  }.bind(this)\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.addEventListener('focusout', this._onfocusout)\n    this.addEventListener('keydown', this._onkeydown)\n    this.addEventListener('keyup', this._onkeyup)\n    this.addEventListener('click', this._onclick)\n    this.addEventListener('mouseup', this._onmouseup)\n    this.addEventListener('mousedown', this._onmousedown)\n    this.addEventListener('contextmenu', this._oncontextmenu)\n    this.addEventListener('ox-close', this._onclose)\n    this.addEventListener('ox-collapse', this._oncollapse)\n\n    this.setAttribute('tabindex', '0') // make this element focusable\n    this.guaranteeFocus()\n  }\n\n  /**\n   * Static method to open the `ox-prompt` popup.\n   * @param {object} options - An object containing popup options.\n   * @param {unknown} [options.template] - An optional content template to render inside the popup.\n   * @param {'success' | 'error' | 'warning' | 'info' | 'question'} [options.type] - The type of the popup, which can be one of: 'success', 'error', 'warning', 'info', 'question'.\n   * @param {string} [options.icon] - The icon to be displayed in the popup header.\n   * @param {string} [options.title] - The title to be displayed in the popup header.\n   * @param {string} [options.text] - The main text content of the popup.\n   * @param {string} [options.footer] - Additional information to be displayed at the bottom of the popup.\n   * @param {object} [options.confirmButton] - Configuration for the confirmation button in the popup.\n   * @param {string} options.confirmButton.text - The text to be displayed on the confirmation button.\n   * @param {string} [options.confirmButton.color] - Not applied. The action row owns button colours.\n   * @param {boolean} [options.confirmButton.destructive] - The confirmation cannot be undone (delete, discard): the\n   *   button takes the error colour and cancel gets the first focus.\n   * @param {object} [options.cancelButton] - Configuration for the cancel button in the popup.\n   * @param {string} options.cancelButton.text - The text to be displayed on the cancel button.\n   * @param {string} [options.cancelButton.color] - Not applied. Cancel is never coloured.\n   * @param {number} [options.top] - The top position of the popup (in pixels).\n   * @param {number} [options.left] - The left position of the popup (in pixels).\n   * @param {number} [options.right] - The right position of the popup (in pixels).\n   * @param {number} [options.bottom] - The bottom position of the popup (in pixels).\n   * @param {string} [options.width] - The maximum width of the popup (CSS string).\n   * @param {string} [options.height] - The maximum height of the popup (CSS string).\n   * @param {Element | null} [options.parent] - The parent element to which the popup should be attached. If not provided, it will be attached to the document body.\n   * @param {boolean} [options.preventCloseOnBlur] - Prevents the popup from closing when it loses focus (blur event).\n   * @param {(result: { value: boolean }) => void} [options.callback] - A callback function that will be invoked when the user interacts with the popup, providing the result of the interaction.\n   * @returns {Promise<boolean>} A Promise that resolves based on user interaction with the popup.\n   */\n  public static async open({\n    template,\n    type,\n    icon,\n    title,\n    text,\n    footer,\n    confirmButton,\n    cancelButton,\n    top,\n    left,\n    right,\n    bottom,\n    width,\n    height,\n    parent,\n    preventCloseOnBlur,\n    callback\n  }: {\n    template?: unknown\n    type?: 'success' | 'error' | 'warning' | 'info' | 'question'\n    icon?: string\n    title?: string\n    text?: string\n    footer?: string\n    confirmButton?: { text: string; color?: string; destructive?: boolean }\n    cancelButton?: { text: string; color?: string }\n    top?: number\n    left?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    parent?: Element | null\n    preventCloseOnBlur?: boolean\n    callback?: (result: { value: boolean }) => void\n  }): Promise<boolean> {\n    const owner = parent || document.body\n    const target = document.createElement('ox-prompt') as OxPrompt\n\n    target.type = type\n    target.icon = icon\n    target.text = text\n    target.titler = title\n    target.footer = footer\n    target.confirmButton = confirmButton\n    target.cancelButton = cancelButton\n    target.preventCloseOnBlur = !!preventCloseOnBlur\n\n    render(template, target)\n\n    target._parent = owner\n    owner.appendChild(target)\n\n    const result = await target.open({ top, left, right, bottom, width, height })\n\n    if (callback) {\n      await callback.call(null, { value: result })\n    }\n\n    return result\n  }\n\n  /**\n   * Static method to open an input popup — a modal replacement for the native `window.prompt()`.\n   *\n   * Benchmarks `prompt(message, defaultValue)`: shows a text field and resolves with the entered\n   * string on confirm, or `null` on cancel/escape/blur. Single-line inputs also confirm on Enter.\n   *\n   * This is purely additive and does not change the behavior of `OxPrompt.open()`.\n   *\n   * @returns {Promise<string | null>} The entered text on confirm, or null on cancel.\n   */\n  public static async prompt({\n    title,\n    text,\n    defaultValue = '',\n    placeholder = '',\n    type = 'question',\n    icon,\n    multiline = false,\n    confirmButton,\n    cancelButton,\n    preventCloseOnBlur = true,\n    top,\n    left,\n    right,\n    bottom,\n    width,\n    height,\n    parent\n  }: {\n    title?: string\n    text?: string\n    defaultValue?: string\n    placeholder?: string\n    type?: 'success' | 'error' | 'warning' | 'info' | 'question'\n    icon?: string\n    multiline?: boolean\n    confirmButton?: { text: string; color?: string }\n    cancelButton?: { text: string; color?: string }\n    preventCloseOnBlur?: boolean\n    top?: number\n    left?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    parent?: Element | null\n  }): Promise<string | null> {\n    const holder = { value: defaultValue }\n\n    const onInput = (e: Event) => {\n      holder.value = (e.target as HTMLInputElement | HTMLTextAreaElement).value\n    }\n    const onKeydown = (e: KeyboardEvent) => {\n      // 단일 라인: Enter 로 확정(native prompt 벤치마킹). multiline 은 개행 유지.\n      if (!multiline && e.key === 'Enter') {\n        e.preventDefault()\n        const host = (e.target as HTMLElement).closest('ox-prompt') as OxPrompt | null\n        host?.onConfirm()\n      }\n    }\n\n    // 폭은 컨테이너를 최대로 채우고(min-width 로 최소 크기 보장), textarea 는 세로로만 리사이즈.\n    const inputStyle =\n      'width: 100%; min-width: var(--ox-prompt-input-min-width, 320px); box-sizing: border-box; padding: 8px; font: inherit;'\n\n    const template = multiline\n      ? html`\n          <textarea\n            rows=\"3\"\n            placeholder=${placeholder}\n            .value=${defaultValue}\n            style=\"${inputStyle} resize: vertical;\"\n            @input=${onInput}\n            @keydown=${onKeydown}\n          ></textarea>\n        `\n      : html`\n          <input\n            type=\"text\"\n            placeholder=${placeholder}\n            .value=${defaultValue}\n            style=\"${inputStyle} resize: none;\"\n            @input=${onInput}\n            @keydown=${onKeydown}\n          />\n        `\n\n    const confirmed = await OxPrompt.open({\n      template,\n      type,\n      icon,\n      title,\n      text,\n      confirmButton: confirmButton || { text: 'OK' },\n      cancelButton: cancelButton || { text: 'Cancel' },\n      preventCloseOnBlur,\n      top,\n      left,\n      right,\n      bottom,\n      width,\n      height,\n      parent\n    })\n\n    return confirmed ? holder.value : null\n  }\n\n  /**\n   * Opens the popup with specified position and dimensions.\n   * @param {object} options - An object specifying the position and dimensions of the popup.\n   * @param {number} [options.left] - The left position of the popup (in pixels). If not provided, the popup will be horizontally centered.\n   * @param {number} [options.top] - The top position of the popup (in pixels). If not provided, the popup will be vertically centered.\n   * @param {number} [options.right] - The right position of the popup (in pixels). Overrides 'left' if both 'left' and 'right' are provided.\n   * @param {number} [options.bottom] - The bottom position of the popup (in pixels). Overrides 'top' if both 'top' and 'bottom' are provided.\n   * @param {string} [options.width] - The maximum width of the popup (CSS string). If not provided, no width restriction is applied.\n   * @param {string} [options.height] - The maximum height of the popup (CSS string). If not provided, no height restriction is applied.\n   * @param {boolean} [options.silent=false] - Determines whether to focus the popup automatically (true) or not (false).\n   * @returns {Promise<boolean>} A Promise that resolves based on user interaction with the popup.\n   */\n  open({\n    left,\n    top,\n    right,\n    bottom,\n    width,\n    height,\n    silent = false\n  }: {\n    left?: number\n    top?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    silent?: boolean\n  }): Promise<boolean> {\n    if (width) {\n      this.style.maxWidth = width\n      this.style.overflowX = 'auto'\n    }\n\n    if (height) {\n      this.style.maxHeight = height\n      this.style.overflowY = 'auto'\n    }\n\n    if (left === undefined && top === undefined && right === undefined && bottom === undefined) {\n      this.style.left = '50%'\n      this.style.top = '50%'\n      this.style.transform = 'translateX(-50%) translateY(-50%)'\n    } else {\n      if (left !== undefined) this.style.left = `${left}px`\n      if (top !== undefined) this.style.top = `${top}px`\n      if (right !== undefined) this.style.right = `${right}px`\n      if (bottom !== undefined) this.style.bottom = `${bottom}px`\n    }\n\n    this.setAttribute('active', '')\n\n    // adjust popup position\n    requestAnimationFrame(() => {\n      const vh = document.body.clientHeight\n      const vw = document.body.clientWidth\n\n      var bounding = this.getBoundingClientRect()\n\n      var h = bounding.height\n      var w = bounding.width\n      var t = bounding.top\n      var l = bounding.left\n\n      // If the popup is too large, it will cause overflow scrolling.\n      if (vh < h) {\n        this.style.height = `${Math.min(Math.max(Math.floor((vh * 2) / 3), vh - (t + 20)), vh)}px`\n        this.style.overflow = 'auto'\n        h = vh\n      }\n\n      if (vw < w) {\n        this.style.width = `${Math.min(Math.max(Math.floor((vw * 2) / 3), vw - (l + 20)), vw)}px`\n        this.style.overflow = 'auto'\n        w = vw\n      }\n\n      // To prevent pop-ups from crossing screen boundaries, use the\n      const computedStyle = getComputedStyle(this)\n\n      if (t < 0) {\n        this.style.top = `calc(${computedStyle.top} + ${t}px)`\n        this.style.bottom = ''\n      } else if (vh <= t + h) {\n        this.style.top = `calc(${computedStyle.top} - ${t + h - vh}px)`\n        this.style.bottom = ''\n      }\n\n      if (l < 0) {\n        this.style.left = `calc(${computedStyle.left} + ${l}px)`\n        this.style.right = ''\n      } else if (vw < l + w) {\n        this.style.left = `calc(${computedStyle.left} - ${l + w - vw}px)`\n        this.style.right = ''\n      }\n    })\n\n    requestAnimationFrame(() => {\n      // auto focusing\n      !silent && this.guaranteeFocus()\n    })\n\n    /* When the window is out of focus, all pop-ups should disappear. */\n    window.addEventListener('blur', this._onwindowblur)\n\n    return new Promise(resolve => {\n      this.resolveFn = resolve\n    })\n  }\n\n  guaranteeFocus(target?: HTMLElement) {\n    const focusible = (target || this.renderRoot)?.querySelector(\n      ':host > button, :host > [href], :host > input, :host > select, :host > textarea, :host > [tabindex]:not([tabindex=\"-1\"]), :host [type=\"button\"]'\n    )\n\n    if (focusible) {\n      ;(focusible as HTMLElement).focus()\n    } else {\n      this.focus()\n    }\n  }\n\n  /**\n   * Closes the popup.\n   */\n  close() {\n    this.removeAttribute('active')\n\n    window.removeEventListener('blur', this._onwindowblur)\n\n    if (this._parent) {\n      /* this case is when the popup is opened by OxPrompt.open(...) */\n      this.removeEventListener('focusout', this._onfocusout)\n      this.removeEventListener('keydown', this._onkeydown)\n      this.removeEventListener('keyup', this._onkeyup)\n      this.removeEventListener('click', this._onclick)\n      this.removeEventListener('ox-close', this._onclose)\n      this.removeEventListener('ox-collapse', this._oncollapse)\n      this.removeEventListener('mouseup', this._onmouseup)\n      this.removeEventListener('mousedown', this._onmousedown)\n      this.removeEventListener('contextmenu', this._oncontextmenu)\n\n      this._parent.removeChild(this)\n      delete this._parent\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-prompt.js","sourceRoot":"","sources":["../../src/ox-prompt.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@material/web/button/text-button.js'\nimport './ox-popup-actions.js'\nimport '@material/web/icon/icon.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nimport { css, html, nothing, LitElement } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { i18next } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\nconst TYPES_ICON = {\n  success: 'verified',\n  error: 'error',\n  warning: 'warning',\n  info: 'info',\n  question: 'question_mark'\n}\n\n/**\n * The `ox-prompt` custom element represents a modal popup that provides information or options for the user, such as confirmation or cancellation.\n */\n@customElement('ox-prompt')\nexport class OxPrompt extends LitElement {\n  static styles = [\n    MDTypeScaleStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        position: absolute;\n        display: flex;\n        flex-direction: column;\n        gap: var(--ox-prompt-gap, var(--spacing-medium));\n        background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface));\n        z-index: 1000;\n        padding: var(--ox-prompt-container-padding, var(--spacing-medium));\n        box-shadow: var(--ox-prompt-container-box-shadow, 2px 3px 10px 5px rgba(0, 0, 0, 0.15));\n        border-radius: var(--ox-prompt-container-border-radius, var(--md-sys-shape-corner-medium));\n        box-sizing: border-box;\n        min-width: 300;\n        line-height: initial;\n        text-align: initial;\n      }\n\n      :host([active]) {\n        display: block;\n      }\n\n      :host(*:focus) {\n        outline: none;\n      }\n\n      [titler] {\n        padding: var(--ox-prompt-title-padding, var(--spacing-medium));\n        padding-bottom: 0;\n        color: var(--ox-prompt-title-color, var(--md-sys-color-primary));\n        font-size: var(--md-sys-typescale-title-large-size, 1.375rem);\n        font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));\n        text-align: var(--ox-prompt-title-text-align, 'left');\n      }\n\n      [content] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--ox-prompt-content-gap, var(--spacing-medium));\n        padding: var(--ox-prompt-content-padding, var(--spacing-medium));\n        color: var(--ox-prompt-body-color, var(--md-sys-color-on-surface));\n        word-break: keep-all;\n        white-space: pre-line;\n        text-align: var(--ox-prompt-content-text-align, 'left');\n\n        md-icon {\n          align-self: center;\n          --md-icon-size: var(--icon-size-huge);\n          color: var(--ox-prompt-body-color-variant, var(--md-sys-color-primary));\n        }\n      }\n\n      [content].warning md-icon {\n        color: var(--status-warning-color, #ee8d03);\n      }\n\n      [content].error md-icon {\n        color: var(--md-sys-color-error, var(--md-sys-color-error));\n      }\n\n      [content].info md-icon {\n        color: var(--status-info-color, #398ace);\n      }\n\n      [content].success md-icon {\n        color: var(--status-success-color, #35a24a);\n      }\n\n      /*\n       * The command row is the shared popup action row: confirm on the right, cancel just before it,\n       * pills of --popup-action-height with a mouse, a square full-width bar with a finger. Its own margins keep the row\n       * inside the card's padding with a mouse.\n       */\n      ox-popup-actions {\n        margin: 0 var(--ox-prompt-buttons-padding, var(--spacing-medium)) var(--ox-prompt-buttons-padding, var(--spacing-medium));\n      }\n\n      @media (pointer: coarse) {\n        /* The bar is the card's bottom edge: it reaches both sides, and the card clips its corners. */\n        :host {\n          overflow: hidden;\n        }\n\n        ox-popup-actions {\n          margin: var(--spacing-medium) calc(-1 * var(--ox-prompt-container-padding, var(--spacing-medium)))\n            calc(-1 * var(--ox-prompt-container-padding, var(--spacing-medium)));\n        }\n      }\n    `\n  ]\n\n  /**\n   * Specifies the type of the popup. Possible values are 'success', 'error', 'warning', 'info', 'question'.\n   */\n  @property({ type: String }) type?: 'success' | 'error' | 'warning' | 'info' | 'question'\n\n  /**\n   * Specifies the icon of the popup.\n   */\n  @property({ type: String }) icon?: string\n\n  /**\n   * Specifies the title of the popup.\n   */\n  @property({ type: String }) titler?: string = ''\n\n  /**\n   * Specifies the text content of the popup.\n   */\n  @property({ type: String }) text?: string\n\n  /**\n   * Specifies the footer (additional information at the bottom) of the popup.\n   */\n  @property({ type: String }) footer?: string\n\n  /**\n   * Determines whether the popup is displayed as a toast.\n   */\n  @property({ type: Boolean }) toast?: boolean\n\n  /**\n   * Specifies settings for the confirmation button.\n   */\n  @property({ type: Object }) confirmButton?: { text: string; color?: string; destructive?: boolean }\n\n  /**\n   * Specifies settings for the cancel button.\n   */\n  @property({ type: Object }) cancelButton?: { text: string; color?: string }\n\n  /**\n   * Prevents the popup from closing when it loses focus (blur event).\n   */\n  @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur: boolean = false\n\n  /**\n   * A callback function called when the popup is closed, providing the result of the user's interaction.\n   */\n  @property({ type: Object }) callback?: (result: { value: boolean }) => void\n\n  @state() _parent?: Element\n\n  private resolveFn: ((value: boolean) => void) | null = null\n\n  render() {\n    return html`\n      ${this.titler ? html` <div titler class=\"md-typescale-title-large\">${this.titler}</div> ` : nothing}\n      <div content class=\"${this.type || 'info'} md-typescale-body-large\">\n        ${this.icon || this.type\n          ? html` <md-icon icon>${this.icon || TYPES_ICON[this.type || 'info']}</md-icon> `\n          : nothing}\n        ${this.text ? html` <div text>${this.text}</div> ` : nothing}\n        <slot> </slot>\n        ${this.footer ? html` <div footer class=\"md-typescale-body-large\">${this.footer}</div> ` : nothing}\n      </div>\n      <ox-popup-actions>\n        ${this.renderButtons()}\n      </ox-popup-actions>\n    `\n  }\n\n  /*\n   * Markup order only decides which button gets the first focus; the row decides where they stand.\n   * A destructive confirmation focuses cancel, so a reflexive Enter does not delete anything.\n   */\n  private renderButtons() {\n    const confirm = this.confirmButton\n      ? html`\n          <md-filled-button\n            id=\"confirm\"\n            slot=\"confirm\"\n            type=\"button\"\n            ?destructive=${!!this.confirmButton.destructive}\n            @click=${() => this.onConfirm()}\n            >${this.confirmButton.text}</md-filled-button\n          >\n        `\n      : nothing\n    const cancel = this.cancelButton\n      ? html`\n          <md-text-button id=\"cancel\" slot=\"cancel\" type=\"button\" @click=${() => this.onCancel()}\n            >${this.cancelButton.text}</md-text-button\n          >\n        `\n      : nothing\n\n    return this.confirmButton?.destructive ? html`${cancel}${confirm}` : html`${confirm}${cancel}`\n  }\n\n  resolve(result: boolean) {\n    if (this.resolveFn) {\n      this.resolveFn(result)\n      this.resolveFn = null\n    }\n  }\n\n  /**\n   * Function called when the confirm button is clicked.\n   */\n  onConfirm() {\n    this.resolve(true)\n    this.close()\n  }\n\n  /**\n   * Function called when the cancel button is clicked.\n   */\n  onCancel() {\n    this.resolve(false)\n    this.close()\n  }\n\n  protected _onfocusout: (e: FocusEvent) => void = function (this: OxPrompt, e: FocusEvent) {\n    const to = e.relatedTarget as HTMLElement\n\n    if (!this.contains(to)) {\n      /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-prompt은 닫혀야 한다. */\n      // @ts-ignore for debug\n      if (this.preventCloseOnBlur || window.POPUP_DEBUG) {\n        return\n      }\n\n      this.resolve(false)\n      this.close()\n    }\n  }.bind(this)\n\n  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPrompt, e: KeyboardEvent) {\n    e.stopPropagation()\n\n    switch (e.key) {\n      case 'Esc': // for IE/Edge\n      case 'Escape':\n        this.resolve(false)\n        this.close()\n        break\n    }\n  }.bind(this)\n\n  protected _onkeyup: (e: KeyboardEvent) => void = function (this: OxPrompt, e: KeyboardEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onmouseup: (e: MouseEvent) => void = function (this: OxPrompt, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onmousedown: (e: MouseEvent) => void = function (this: OxPrompt, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _oncontextmenu: (e: Event) => void = function (this: OxPrompt, e: Event) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onclick: (e: MouseEvent) => void = function (this: OxPrompt, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onclose: (e: Event) => void = function (this: OxPrompt, e: Event) {\n    this.resolve(false)\n    this.close()\n  }.bind(this)\n\n  protected _oncollapse: (e: Event) => void = function (this: OxPrompt, e: Event) {\n    e.stopPropagation()\n\n    this.resolve(false)\n    this.close()\n  }.bind(this)\n\n  protected _onwindowblur: (e: Event) => void = function (this: OxPrompt, e: Event) {\n    // @ts-ignore for debug\n    if (this.preventCloseOnBlur || window.POPUP_DEBUG) {\n      return\n    }\n\n    this.resolve(false)\n    this.close()\n  }.bind(this)\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.addEventListener('focusout', this._onfocusout)\n    this.addEventListener('keydown', this._onkeydown)\n    this.addEventListener('keyup', this._onkeyup)\n    this.addEventListener('click', this._onclick)\n    this.addEventListener('mouseup', this._onmouseup)\n    this.addEventListener('mousedown', this._onmousedown)\n    this.addEventListener('contextmenu', this._oncontextmenu)\n    this.addEventListener('ox-close', this._onclose)\n    this.addEventListener('ox-collapse', this._oncollapse)\n\n    this.setAttribute('tabindex', '0') // make this element focusable\n    this.guaranteeFocus()\n  }\n\n  /**\n   * Static method to open the `ox-prompt` popup.\n   * @param {object} options - An object containing popup options.\n   * @param {unknown} [options.template] - An optional content template to render inside the popup.\n   * @param {'success' | 'error' | 'warning' | 'info' | 'question'} [options.type] - The type of the popup, which can be one of: 'success', 'error', 'warning', 'info', 'question'.\n   * @param {string} [options.icon] - The icon to be displayed in the popup header.\n   * @param {string} [options.title] - The title to be displayed in the popup header.\n   * @param {string} [options.text] - The main text content of the popup.\n   * @param {string} [options.footer] - Additional information to be displayed at the bottom of the popup.\n   * @param {object} [options.confirmButton] - Configuration for the confirmation button in the popup.\n   * @param {string} options.confirmButton.text - The text to be displayed on the confirmation button.\n   * @param {string} [options.confirmButton.color] - Not applied. The action row owns button colours.\n   * @param {boolean} [options.confirmButton.destructive] - The confirmation cannot be undone (delete, discard): the\n   *   button takes the error colour and cancel gets the first focus.\n   * @param {object} [options.cancelButton] - Configuration for the cancel button in the popup.\n   * @param {string} options.cancelButton.text - The text to be displayed on the cancel button.\n   * @param {string} [options.cancelButton.color] - Not applied. Cancel is never coloured.\n   * @param {number} [options.top] - The top position of the popup (in pixels).\n   * @param {number} [options.left] - The left position of the popup (in pixels).\n   * @param {number} [options.right] - The right position of the popup (in pixels).\n   * @param {number} [options.bottom] - The bottom position of the popup (in pixels).\n   * @param {string} [options.width] - The maximum width of the popup (CSS string).\n   * @param {string} [options.height] - The maximum height of the popup (CSS string).\n   * @param {Element | null} [options.parent] - The parent element to which the popup should be attached. If not provided, it will be attached to the document body.\n   * @param {boolean} [options.preventCloseOnBlur] - Prevents the popup from closing when it loses focus (blur event).\n   * @param {(result: { value: boolean }) => void} [options.callback] - A callback function that will be invoked when the user interacts with the popup, providing the result of the interaction.\n   * @returns {Promise<boolean>} A Promise that resolves based on user interaction with the popup.\n   */\n  public static async open({\n    template,\n    type,\n    icon,\n    title,\n    text,\n    footer,\n    confirmButton,\n    cancelButton,\n    top,\n    left,\n    right,\n    bottom,\n    width,\n    height,\n    parent,\n    preventCloseOnBlur,\n    callback\n  }: {\n    template?: unknown\n    type?: 'success' | 'error' | 'warning' | 'info' | 'question'\n    icon?: string\n    title?: string\n    text?: string\n    footer?: string\n    confirmButton?: { text: string; color?: string; destructive?: boolean }\n    cancelButton?: { text: string; color?: string }\n    top?: number\n    left?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    parent?: Element | null\n    preventCloseOnBlur?: boolean\n    callback?: (result: { value: boolean }) => void\n  }): Promise<boolean> {\n    const owner = parent || document.body\n    const target = document.createElement('ox-prompt') as OxPrompt\n\n    target.type = type\n    target.icon = icon\n    target.text = text\n    target.titler = title\n    target.footer = footer\n    target.confirmButton = confirmButton\n    target.cancelButton = cancelButton\n    target.preventCloseOnBlur = !!preventCloseOnBlur\n\n    render(template, target)\n\n    target._parent = owner\n    owner.appendChild(target)\n\n    const result = await target.open({ top, left, right, bottom, width, height })\n\n    if (callback) {\n      await callback.call(null, { value: result })\n    }\n\n    return result\n  }\n\n  /**\n   * Asks before deleting — the modal replacement for `confirm('sure to delete?')`.\n   *\n   * Framework screens asked with the browser's own dialog (17 places, ADR-0060 decision 9): it\n   * blocks the page, cannot be styled or translated, and put \"OK\" where every other popup puts\n   * \"cancel\". This is the same question in the shared popup: a warning, \"delete\" painted as\n   * destructive on the right, \"cancel\" before it and focused.\n   *\n   *   if (!(await OxPrompt.confirmDelete({ count: selected.length }))) return\n   *\n   * @returns {Promise<boolean>} true when the user chose delete.\n   */\n  public static async confirmDelete({ count, parent }: { count?: number; parent?: Element | null } = {}): Promise<boolean> {\n    return OxPrompt.open({\n      type: 'warning',\n      title:\n        count && count > 1\n          ? i18next.t('text.popup-confirm-delete-count', { count, defaultValue: 'delete the {count} selected items?' })\n          : i18next.t('text.popup-confirm-delete', { defaultValue: 'delete the selected item?' }),\n      confirmButton: { text: i18next.t('button.popup-delete', { defaultValue: 'delete' }), destructive: true },\n      cancelButton: { text: i18next.t('button.popup-cancel', { defaultValue: 'cancel' }) },\n      parent\n    })\n  }\n\n  /**\n   * Static method to open an input popup — a modal replacement for the native `window.prompt()`.\n   *\n   * Benchmarks `prompt(message, defaultValue)`: shows a text field and resolves with the entered\n   * string on confirm, or `null` on cancel/escape/blur. Single-line inputs also confirm on Enter.\n   *\n   * This is purely additive and does not change the behavior of `OxPrompt.open()`.\n   *\n   * @returns {Promise<string | null>} The entered text on confirm, or null on cancel.\n   */\n  public static async prompt({\n    title,\n    text,\n    defaultValue = '',\n    placeholder = '',\n    type = 'question',\n    icon,\n    multiline = false,\n    confirmButton,\n    cancelButton,\n    preventCloseOnBlur = true,\n    top,\n    left,\n    right,\n    bottom,\n    width,\n    height,\n    parent\n  }: {\n    title?: string\n    text?: string\n    defaultValue?: string\n    placeholder?: string\n    type?: 'success' | 'error' | 'warning' | 'info' | 'question'\n    icon?: string\n    multiline?: boolean\n    confirmButton?: { text: string; color?: string }\n    cancelButton?: { text: string; color?: string }\n    preventCloseOnBlur?: boolean\n    top?: number\n    left?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    parent?: Element | null\n  }): Promise<string | null> {\n    const holder = { value: defaultValue }\n\n    const onInput = (e: Event) => {\n      holder.value = (e.target as HTMLInputElement | HTMLTextAreaElement).value\n    }\n    const onKeydown = (e: KeyboardEvent) => {\n      // 단일 라인: Enter 로 확정(native prompt 벤치마킹). multiline 은 개행 유지.\n      if (!multiline && e.key === 'Enter') {\n        e.preventDefault()\n        const host = (e.target as HTMLElement).closest('ox-prompt') as OxPrompt | null\n        host?.onConfirm()\n      }\n    }\n\n    // 폭은 컨테이너를 최대로 채우고(min-width 로 최소 크기 보장), textarea 는 세로로만 리사이즈.\n    const inputStyle =\n      'width: 100%; min-width: var(--ox-prompt-input-min-width, 320px); box-sizing: border-box; padding: 8px; font: inherit;'\n\n    const template = multiline\n      ? html`\n          <textarea\n            rows=\"3\"\n            placeholder=${placeholder}\n            .value=${defaultValue}\n            style=\"${inputStyle} resize: vertical;\"\n            @input=${onInput}\n            @keydown=${onKeydown}\n          ></textarea>\n        `\n      : html`\n          <input\n            type=\"text\"\n            placeholder=${placeholder}\n            .value=${defaultValue}\n            style=\"${inputStyle} resize: none;\"\n            @input=${onInput}\n            @keydown=${onKeydown}\n          />\n        `\n\n    const confirmed = await OxPrompt.open({\n      template,\n      type,\n      icon,\n      title,\n      text,\n      confirmButton: confirmButton || { text: 'OK' },\n      cancelButton: cancelButton || { text: 'Cancel' },\n      preventCloseOnBlur,\n      top,\n      left,\n      right,\n      bottom,\n      width,\n      height,\n      parent\n    })\n\n    return confirmed ? holder.value : null\n  }\n\n  /**\n   * Opens the popup with specified position and dimensions.\n   * @param {object} options - An object specifying the position and dimensions of the popup.\n   * @param {number} [options.left] - The left position of the popup (in pixels). If not provided, the popup will be horizontally centered.\n   * @param {number} [options.top] - The top position of the popup (in pixels). If not provided, the popup will be vertically centered.\n   * @param {number} [options.right] - The right position of the popup (in pixels). Overrides 'left' if both 'left' and 'right' are provided.\n   * @param {number} [options.bottom] - The bottom position of the popup (in pixels). Overrides 'top' if both 'top' and 'bottom' are provided.\n   * @param {string} [options.width] - The maximum width of the popup (CSS string). If not provided, no width restriction is applied.\n   * @param {string} [options.height] - The maximum height of the popup (CSS string). If not provided, no height restriction is applied.\n   * @param {boolean} [options.silent=false] - Determines whether to focus the popup automatically (true) or not (false).\n   * @returns {Promise<boolean>} A Promise that resolves based on user interaction with the popup.\n   */\n  open({\n    left,\n    top,\n    right,\n    bottom,\n    width,\n    height,\n    silent = false\n  }: {\n    left?: number\n    top?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    silent?: boolean\n  }): Promise<boolean> {\n    if (width) {\n      this.style.maxWidth = width\n      this.style.overflowX = 'auto'\n    }\n\n    if (height) {\n      this.style.maxHeight = height\n      this.style.overflowY = 'auto'\n    }\n\n    if (left === undefined && top === undefined && right === undefined && bottom === undefined) {\n      this.style.left = '50%'\n      this.style.top = '50%'\n      this.style.transform = 'translateX(-50%) translateY(-50%)'\n    } else {\n      if (left !== undefined) this.style.left = `${left}px`\n      if (top !== undefined) this.style.top = `${top}px`\n      if (right !== undefined) this.style.right = `${right}px`\n      if (bottom !== undefined) this.style.bottom = `${bottom}px`\n    }\n\n    this.setAttribute('active', '')\n\n    // adjust popup position\n    requestAnimationFrame(() => {\n      const vh = document.body.clientHeight\n      const vw = document.body.clientWidth\n\n      var bounding = this.getBoundingClientRect()\n\n      var h = bounding.height\n      var w = bounding.width\n      var t = bounding.top\n      var l = bounding.left\n\n      // If the popup is too large, it will cause overflow scrolling.\n      if (vh < h) {\n        this.style.height = `${Math.min(Math.max(Math.floor((vh * 2) / 3), vh - (t + 20)), vh)}px`\n        this.style.overflow = 'auto'\n        h = vh\n      }\n\n      if (vw < w) {\n        this.style.width = `${Math.min(Math.max(Math.floor((vw * 2) / 3), vw - (l + 20)), vw)}px`\n        this.style.overflow = 'auto'\n        w = vw\n      }\n\n      // To prevent pop-ups from crossing screen boundaries, use the\n      const computedStyle = getComputedStyle(this)\n\n      if (t < 0) {\n        this.style.top = `calc(${computedStyle.top} + ${t}px)`\n        this.style.bottom = ''\n      } else if (vh <= t + h) {\n        this.style.top = `calc(${computedStyle.top} - ${t + h - vh}px)`\n        this.style.bottom = ''\n      }\n\n      if (l < 0) {\n        this.style.left = `calc(${computedStyle.left} + ${l}px)`\n        this.style.right = ''\n      } else if (vw < l + w) {\n        this.style.left = `calc(${computedStyle.left} - ${l + w - vw}px)`\n        this.style.right = ''\n      }\n    })\n\n    requestAnimationFrame(() => {\n      // auto focusing\n      !silent && this.guaranteeFocus()\n    })\n\n    /* When the window is out of focus, all pop-ups should disappear. */\n    window.addEventListener('blur', this._onwindowblur)\n\n    return new Promise(resolve => {\n      this.resolveFn = resolve\n    })\n  }\n\n  guaranteeFocus(target?: HTMLElement) {\n    const focusible = (target || this.renderRoot)?.querySelector(\n      ':host > button, :host > [href], :host > input, :host > select, :host > textarea, :host > [tabindex]:not([tabindex=\"-1\"]), :host [type=\"button\"]'\n    )\n\n    if (focusible) {\n      ;(focusible as HTMLElement).focus()\n    } else {\n      this.focus()\n    }\n  }\n\n  /**\n   * Closes the popup.\n   */\n  close() {\n    this.removeAttribute('active')\n\n    window.removeEventListener('blur', this._onwindowblur)\n\n    if (this._parent) {\n      /* this case is when the popup is opened by OxPrompt.open(...) */\n      this.removeEventListener('focusout', this._onfocusout)\n      this.removeEventListener('keydown', this._onkeydown)\n      this.removeEventListener('keyup', this._onkeyup)\n      this.removeEventListener('click', this._onclick)\n      this.removeEventListener('ox-close', this._onclose)\n      this.removeEventListener('ox-collapse', this._oncollapse)\n      this.removeEventListener('mouseup', this._onmouseup)\n      this.removeEventListener('mousedown', this._onmousedown)\n      this.removeEventListener('contextmenu', this._oncontextmenu)\n\n      this._parent.removeChild(this)\n      delete this._parent\n    }\n  }\n}\n"]}

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

@@ -1 +1,2 @@
-export {};
+import '@material/web/button/filled-button.js';
+import '../src/ox-popup-actions.js';

package/dist/test/office-control-height.test.js

@@ -1,48 +1,102 @@
-import { expect } from '@open-wc/testing';
+import '@material/web/button/filled-button.js';
+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 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).
+ * 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.
+ *
+ * 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 { this.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) => Math.round(el.getBoundingClientRect().height);
 const text = (styles) => (Array.isArray(styles) ? styles : [styles]).map(s => String(s.cssText ?? s)).join('\n');
-const coarse = (css) => css.slice(css.indexOf('(pointer: coarse)'));
+const coarse = (cssText) => cssText.slice(cssText.indexOf('(pointer: coarse)'));
+async function rows(style) {
+    const host = await fixture(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');
+    await styled.updateComplete;
+    const actions = host.querySelector('ox-popup-actions');
+    await actions.updateComplete;
+    const buttons = [...Array.from(styled.shadowRoot.querySelectorAll('md-filled-button')), host.querySelector('#prompt-md')];
+    await Promise.all(buttons.map(b => b.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('★ 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('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('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('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('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:');
     });
 });
 //# sourceMappingURL=office-control-height.test.js.map

package/dist/test/office-control-height.test.js.map

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

package/dist/test/ox-popup-actions.test.js

@@ -8,7 +8,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.
  */
 const left = (el) => el.getBoundingClientRect().left;
@@ -45,15 +45,15 @@ describe('ox-popup-actions', () => {
         const confirm = actions.querySelector('#confirm');
         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>
         <md-filled-button slot="confirm" id="md">save</md-filled-button>
       </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 () => {
         const actions = await row(html `

package/dist/test/ox-popup-actions.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-popup-actions.test.js","sourceRoot":"","sources":["../../test/ox-popup-actions.test.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@material/web/button/text-button.js'\n\nimport { expect, fixture } from '@open-wc/testing'\nimport { html } from 'lit'\n\nimport '../src/ox-popup-actions.js'\n\n/**\n * The action row owns order, height, shape and the destructive colour - so a popup cannot get them\n * wrong by writing its markup differently. These run with a mouse pointer (the test browser); the\n * finger bar is a media query of the same element.\n *\n * The expected numbers are written out (32, 68, 999em) rather than read from the stylesheet, so a\n * change to the stylesheet shows up here as a decision, not as a silent follow.\n */\n\nconst left = (el: Element) => el.getBoundingClientRect().left\nconst height = (el: Element) => Math.round(el.getBoundingClientRect().height)\n\nasync function row(template: ReturnType<typeof html>) {\n  const host = await fixture<HTMLElement>(html`<div style=\"width: 600px\">${template}</div>`)\n  const actions = host.querySelector('ox-popup-actions') as HTMLElement & { updateComplete: Promise<unknown> }\n  await actions.updateComplete\n  await Promise.all(\n    Array.from(actions.querySelectorAll('md-filled-button, md-text-button')).map(\n      b => (b as HTMLElement & { updateComplete: Promise<unknown> }).updateComplete\n    )\n  )\n  return actions\n}\n\ndescribe('ox-popup-actions', () => {\n  it('renders start, cancel, confirm in that order whatever the markup order', async () => {\n    const actions = await row(html`\n      <ox-popup-actions>\n        <md-filled-button slot=\"confirm\" id=\"confirm\">save</md-filled-button>\n        <md-text-button slot=\"cancel\" id=\"cancel\">cancel</md-text-button>\n        <md-text-button slot=\"start\" id=\"start\">delete</md-text-button>\n      </ox-popup-actions>\n    `)\n\n    const start = actions.querySelector('#start')!\n    const cancel = actions.querySelector('#cancel')!\n    const confirm = actions.querySelector('#confirm')!\n\n    expect(left(start)).to.be.lessThan(left(cancel))\n    expect(left(cancel)).to.be.lessThan(left(confirm))\n  })\n\n  it('keeps the confirm button at the right edge', async () => {\n    const actions = await row(html`\n      <ox-popup-actions>\n        <md-filled-button slot=\"confirm\" id=\"confirm\">save</md-filled-button>\n        <md-text-button slot=\"cancel\">cancel</md-text-button>\n      </ox-popup-actions>\n    `)\n\n    const confirm = actions.querySelector('#confirm')!\n    expect(Math.round(confirm.getBoundingClientRect().right)).to.equal(Math.round(actions.getBoundingClientRect().right))\n  })\n\n  it('gives Material buttons and plain buttons the same 32px height', async () => {\n    const actions = await row(html`\n      <ox-popup-actions>\n        <button slot=\"cancel\" id=\"plain\">cancel</button>\n        <md-filled-button slot=\"confirm\" id=\"md\">save</md-filled-button>\n      </ox-popup-actions>\n    `)\n\n    expect(height(actions.querySelector('#md')!)).to.equal(32)\n    expect(height(actions.querySelector('#plain')!)).to.equal(32)\n  })\n\n  it('uses pill shapes inside the popup card', async () => {\n    const actions = await row(html`\n      <ox-popup-actions>\n        <button slot=\"cancel\" id=\"plain\">cancel</button>\n        <md-filled-button slot=\"confirm\" id=\"md\">save</md-filled-button>\n      </ox-popup-actions>\n    `)\n\n    const md = actions.querySelector('#md')!\n    expect(getComputedStyle(md).getPropertyValue('--md-filled-button-container-shape').trim()).to.equal('999em')\n    expect(getComputedStyle(actions.querySelector('#plain')!).borderTopLeftRadius).to.not.equal('0px')\n  })\n\n  it('lets a screen raise the height through --popup-action-height', async () => {\n    const actions = await row(html`\n      <ox-popup-actions style=\"--popup-action-height: 68px\">\n        <button slot=\"cancel\" id=\"plain\">cancel</button>\n        <md-filled-button slot=\"confirm\" id=\"md\">save</md-filled-button>\n      </ox-popup-actions>\n    `)\n\n    expect(height(actions.querySelector('#md')!)).to.equal(68)\n    expect(height(actions.querySelector('#plain')!)).to.equal(68)\n  })\n\n  it('paints a destructive action with the error colour', async () => {\n    const actions = await row(html`\n      <ox-popup-actions style=\"--md-sys-color-error: rgb(190, 12, 20)\">\n        <md-text-button slot=\"start\" destructive id=\"side\">delete</md-text-button>\n        <md-filled-button slot=\"confirm\" destructive id=\"main\">delete all</md-filled-button>\n        <button slot=\"cancel\" id=\"plain\" destructive>cancel</button>\n      </ox-popup-actions>\n    `)\n\n    const side = getComputedStyle(actions.querySelector('#side')!)\n    const main = getComputedStyle(actions.querySelector('#main')!)\n\n    expect(side.getPropertyValue('--md-text-button-label-text-color').trim()).to.equal('rgb(190, 12, 20)')\n    expect(main.getPropertyValue('--md-filled-button-container-color').trim()).to.equal('rgb(190, 12, 20)')\n  })\n\n  it('never paints cancel as destructive', async () => {\n    const actions = await row(html`\n      <ox-popup-actions style=\"--md-sys-color-error: rgb(190, 12, 20)\">\n        <md-text-button slot=\"cancel\" destructive id=\"cancel\">cancel</md-text-button>\n        <button slot=\"cancel\" destructive id=\"plain\">cancel</button>\n        <md-filled-button slot=\"confirm\">save</md-filled-button>\n      </ox-popup-actions>\n    `)\n\n    expect(getComputedStyle(actions.querySelector('#cancel')!).getPropertyValue('--md-text-button-label-text-color').trim()).to.not.equal(\n      'rgb(190, 12, 20)'\n    )\n    expect(getComputedStyle(actions.querySelector('#plain')!).color).to.not.equal('rgb(190, 12, 20)')\n  })\n})\n"]}
+{"version":3,"file":"ox-popup-actions.test.js","sourceRoot":"","sources":["../../test/ox-popup-actions.test.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@material/web/button/text-button.js'\n\nimport { expect, fixture } from '@open-wc/testing'\nimport { html } from 'lit'\n\nimport '../src/ox-popup-actions.js'\n\n/**\n * The action row owns order, height, shape and the destructive colour - so a popup cannot get them\n * wrong by writing its markup differently. These run with a mouse pointer (the test browser); the\n * finger bar is a media query of the same element.\n *\n * The expected numbers are written out (30, 68, 999em) rather than read from the stylesheet, so a\n * change to the stylesheet shows up here as a decision, not as a silent follow.\n */\n\nconst left = (el: Element) => el.getBoundingClientRect().left\nconst height = (el: Element) => Math.round(el.getBoundingClientRect().height)\n\nasync function row(template: ReturnType<typeof html>) {\n  const host = await fixture<HTMLElement>(html`<div style=\"width: 600px\">${template}</div>`)\n  const actions = host.querySelector('ox-popup-actions') as HTMLElement & { updateComplete: Promise<unknown> }\n  await actions.updateComplete\n  await Promise.all(\n    Array.from(actions.querySelectorAll('md-filled-button, md-text-button')).map(\n      b => (b as HTMLElement & { updateComplete: Promise<unknown> }).updateComplete\n    )\n  )\n  return actions\n}\n\ndescribe('ox-popup-actions', () => {\n  it('renders start, cancel, confirm in that order whatever the markup order', async () => {\n    const actions = await row(html`\n      <ox-popup-actions>\n        <md-filled-button slot=\"confirm\" id=\"confirm\">save</md-filled-button>\n        <md-text-button slot=\"cancel\" id=\"cancel\">cancel</md-text-button>\n        <md-text-button slot=\"start\" id=\"start\">delete</md-text-button>\n      </ox-popup-actions>\n    `)\n\n    const start = actions.querySelector('#start')!\n    const cancel = actions.querySelector('#cancel')!\n    const confirm = actions.querySelector('#confirm')!\n\n    expect(left(start)).to.be.lessThan(left(cancel))\n    expect(left(cancel)).to.be.lessThan(left(confirm))\n  })\n\n  it('keeps the confirm button at the right edge', async () => {\n    const actions = await row(html`\n      <ox-popup-actions>\n        <md-filled-button slot=\"confirm\" id=\"confirm\">save</md-filled-button>\n        <md-text-button slot=\"cancel\">cancel</md-text-button>\n      </ox-popup-actions>\n    `)\n\n    const confirm = actions.querySelector('#confirm')!\n    expect(Math.round(confirm.getBoundingClientRect().right)).to.equal(Math.round(actions.getBoundingClientRect().right))\n  })\n\n  it('gives Material buttons and plain buttons the same height (30px, the platform default)', async () => {\n    const actions = await row(html`\n      <ox-popup-actions>\n        <button slot=\"cancel\" id=\"plain\">cancel</button>\n        <md-filled-button slot=\"confirm\" id=\"md\">save</md-filled-button>\n      </ox-popup-actions>\n    `)\n\n    expect(height(actions.querySelector('#md')!)).to.equal(30)\n    expect(height(actions.querySelector('#plain')!)).to.equal(30)\n  })\n\n  it('uses pill shapes inside the popup card', async () => {\n    const actions = await row(html`\n      <ox-popup-actions>\n        <button slot=\"cancel\" id=\"plain\">cancel</button>\n        <md-filled-button slot=\"confirm\" id=\"md\">save</md-filled-button>\n      </ox-popup-actions>\n    `)\n\n    const md = actions.querySelector('#md')!\n    expect(getComputedStyle(md).getPropertyValue('--md-filled-button-container-shape').trim()).to.equal('999em')\n    expect(getComputedStyle(actions.querySelector('#plain')!).borderTopLeftRadius).to.not.equal('0px')\n  })\n\n  it('lets a screen raise the height through --popup-action-height', async () => {\n    const actions = await row(html`\n      <ox-popup-actions style=\"--popup-action-height: 68px\">\n        <button slot=\"cancel\" id=\"plain\">cancel</button>\n        <md-filled-button slot=\"confirm\" id=\"md\">save</md-filled-button>\n      </ox-popup-actions>\n    `)\n\n    expect(height(actions.querySelector('#md')!)).to.equal(68)\n    expect(height(actions.querySelector('#plain')!)).to.equal(68)\n  })\n\n  it('paints a destructive action with the error colour', async () => {\n    const actions = await row(html`\n      <ox-popup-actions style=\"--md-sys-color-error: rgb(190, 12, 20)\">\n        <md-text-button slot=\"start\" destructive id=\"side\">delete</md-text-button>\n        <md-filled-button slot=\"confirm\" destructive id=\"main\">delete all</md-filled-button>\n        <button slot=\"cancel\" id=\"plain\" destructive>cancel</button>\n      </ox-popup-actions>\n    `)\n\n    const side = getComputedStyle(actions.querySelector('#side')!)\n    const main = getComputedStyle(actions.querySelector('#main')!)\n\n    expect(side.getPropertyValue('--md-text-button-label-text-color').trim()).to.equal('rgb(190, 12, 20)')\n    expect(main.getPropertyValue('--md-filled-button-container-color').trim()).to.equal('rgb(190, 12, 20)')\n  })\n\n  it('never paints cancel as destructive', async () => {\n    const actions = await row(html`\n      <ox-popup-actions style=\"--md-sys-color-error: rgb(190, 12, 20)\">\n        <md-text-button slot=\"cancel\" destructive id=\"cancel\">cancel</md-text-button>\n        <button slot=\"cancel\" destructive id=\"plain\">cancel</button>\n        <md-filled-button slot=\"confirm\">save</md-filled-button>\n      </ox-popup-actions>\n    `)\n\n    expect(getComputedStyle(actions.querySelector('#cancel')!).getPropertyValue('--md-text-button-label-text-color').trim()).to.not.equal(\n      'rgb(190, 12, 20)'\n    )\n    expect(getComputedStyle(actions.querySelector('#plain')!).color).to.not.equal('rgb(190, 12, 20)')\n  })\n})\n"]}

package/dist/test/ox-prompt-actions.test.js

@@ -48,8 +48,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);
     });
@@ -74,4 +74,35 @@ 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.close());
+    });
+    async function opened(count) {
+        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];
+        await prompt.updateComplete;
+        const root = prompt.renderRoot;
+        const confirm = root.querySelector('#confirm');
+        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').click();
+    });
+});
 //# sourceMappingURL=ox-prompt-actions.test.js.map