@operato/layout 10.27.1 → 10.28.2

package/dist/src/components/ox-url-tabs.js

@@ -0,0 +1,163 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { navigate } from '@operato/shell';
+/**
+ * Tabs whose choice lives in the address (ADR-0060 decision 8 addendum, the third frame).
+ *
+ * plant's quality and pending lists and its equipment screen keep their tab in the address, each its
+ * own way; twin's business screen reads the tab from the address on entry and never writes it back, so
+ * a copied link opens on the first tab. Here reading and writing always go together: open the link,
+ * press back after opening a row, reload - the same tab.
+ *
+ * - `?tab=` (the `param` name) is where new screens keep it. The first tab is the default and is not
+ *   written, so a screen's plain address stays plain. Other query values are kept as they are.
+ *   The change replaces the address rather than adding a history step - back leaves the screen, it
+ *   does not walk through the tabs.
+ * - `base` puts the key in a path segment instead (`<base>/<key>`), through the shell's navigate, the
+ *   way plant's three screens do. **Transitional** (architect ruling 2026-09-24): it is here so those
+ *   screens can take the frame without breaking the links people have; new screens use `?tab=`.
+ * - `tab-change` (detail `{ key }`) fires when the tab changes - by a press, or by back / forward.
+ *   `selected` holds the current key, read from the address when the element connects.
+ *
+ * The look is the suite's tab strip (SurfaceStyles `.ui-tabs`): an underline under the chosen one.
+ */
+let OxUrlTabs = class OxUrlTabs extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.tabs = [];
+        /** The query name the key is kept under. */
+        this.param = 'tab';
+        this.selected = '';
+        this.onPop = () => this.read(true);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('popstate', this.onPop);
+        this.read(false);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('popstate', this.onPop);
+    }
+    updated(changed) {
+        if (changed.has('tabs') || changed.has('base') || changed.has('param'))
+            this.read(false);
+    }
+    /** The key the address names, or the first tab when it names none of them. */
+    keyInAddress() {
+        var _a, _b;
+        const keys = this.tabs.map(tab => tab.key);
+        let named = null;
+        if (this.base) {
+            const segments = location.pathname.split('/').filter(Boolean);
+            const at = segments.lastIndexOf(this.base);
+            named = at >= 0 ? (_a = segments[at + 1]) !== null && _a !== void 0 ? _a : null : null;
+        }
+        else {
+            named = new URLSearchParams(location.search).get(this.param);
+        }
+        return named && keys.includes(named) ? named : (_b = keys[0]) !== null && _b !== void 0 ? _b : '';
+    }
+    read(announce) {
+        const key = this.keyInAddress();
+        if (key === this.selected)
+            return;
+        this.selected = key;
+        if (announce)
+            this.announce();
+    }
+    /** Choose a tab: the address follows, and the screen hears it. */
+    select(key) {
+        var _a;
+        if (key === this.selected || !this.tabs.some(tab => tab.key === key))
+            return;
+        const first = (_a = this.tabs[0]) === null || _a === void 0 ? void 0 : _a.key;
+        if (this.base) {
+            navigate(key === first ? this.base : `${this.base}/${key}`);
+        }
+        else {
+            const url = new URL(location.href);
+            if (key === first)
+                url.searchParams.delete(this.param);
+            else
+                url.searchParams.set(this.param, key);
+            history.replaceState(history.state, '', url);
+        }
+        this.selected = key;
+        this.announce();
+    }
+    announce() {
+        this.dispatchEvent(new CustomEvent('tab-change', { detail: { key: this.selected }, bubbles: true, composed: true }));
+    }
+    onKey(event) {
+        const keys = this.tabs.map(tab => tab.key);
+        const at = keys.indexOf(this.selected);
+        const step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
+        if (!step || at < 0)
+            return;
+        event.preventDefault();
+        const next = keys[(at + step + keys.length) % keys.length];
+        this.select(next);
+        this.updateComplete.then(() => { var _a; return (_a = this.renderRoot.querySelector(`[data-key="${next}"]`)) === null || _a === void 0 ? void 0 : _a.focus(); });
+    }
+    render() {
+        return html `<div role="tablist" style="display: contents" @keydown=${this.onKey}>
+      ${this.tabs.map(tab => html `<button
+          role="tab"
+          data-key=${tab.key}
+          aria-selected=${String(tab.key === this.selected)}
+          tabindex=${tab.key === this.selected ? 0 : -1}
+          @click=${() => this.select(tab.key)}
+        >
+          ${tab.label}
+        </button>`)}
+    </div>`;
+    }
+};
+OxUrlTabs.styles = css `
+    :host {
+      display: flex;
+      gap: var(--spacing-large, 16px);
+      border-bottom: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));
+    }
+    button {
+      border: none;
+      border-bottom: 2px solid transparent;
+      background: none;
+      padding: var(--spacing-medium, 8px) 2px calc(var(--spacing-medium, 8px) - 2px);
+      font: inherit;
+      font-size: 14px;
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      cursor: pointer;
+    }
+    button:hover:not([aria-selected='true']) {
+      color: var(--ui-ink, var(--md-sys-color-on-surface));
+    }
+    button[aria-selected='true'] {
+      font-weight: 600;
+      color: var(--ui-ink, var(--md-sys-color-on-surface));
+      border-bottom-color: var(--ui-accent, var(--md-sys-color-primary));
+    }
+    button:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary);
+      outline-offset: 2px;
+    }
+  `;
+__decorate([
+    property({ attribute: false })
+], OxUrlTabs.prototype, "tabs", void 0);
+__decorate([
+    property()
+], OxUrlTabs.prototype, "param", void 0);
+__decorate([
+    property()
+], OxUrlTabs.prototype, "base", void 0);
+__decorate([
+    state()
+], OxUrlTabs.prototype, "selected", void 0);
+OxUrlTabs = __decorate([
+    customElement('ox-url-tabs')
+], OxUrlTabs);
+export { OxUrlTabs };
+//# sourceMappingURL=ox-url-tabs.js.map

package/dist/src/components/ox-url-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-url-tabs.js","sourceRoot":"","sources":["../../../src/components/ox-url-tabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { navigate } from '@operato/shell'\n\nexport interface OxUrlTab {\n  key: string\n  label: string\n}\n\n/**\n * Tabs whose choice lives in the address (ADR-0060 decision 8 addendum, the third frame).\n *\n * plant's quality and pending lists and its equipment screen keep their tab in the address, each its\n * own way; twin's business screen reads the tab from the address on entry and never writes it back, so\n * a copied link opens on the first tab. Here reading and writing always go together: open the link,\n * press back after opening a row, reload - the same tab.\n *\n * - `?tab=` (the `param` name) is where new screens keep it. The first tab is the default and is not\n *   written, so a screen's plain address stays plain. Other query values are kept as they are.\n *   The change replaces the address rather than adding a history step - back leaves the screen, it\n *   does not walk through the tabs.\n * - `base` puts the key in a path segment instead (`<base>/<key>`), through the shell's navigate, the\n *   way plant's three screens do. **Transitional** (architect ruling 2026-09-24): it is here so those\n *   screens can take the frame without breaking the links people have; new screens use `?tab=`.\n * - `tab-change` (detail `{ key }`) fires when the tab changes - by a press, or by back / forward.\n *   `selected` holds the current key, read from the address when the element connects.\n *\n * The look is the suite's tab strip (SurfaceStyles `.ui-tabs`): an underline under the chosen one.\n */\n@customElement('ox-url-tabs')\nexport class OxUrlTabs extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      gap: var(--spacing-large, 16px);\n      border-bottom: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));\n    }\n    button {\n      border: none;\n      border-bottom: 2px solid transparent;\n      background: none;\n      padding: var(--spacing-medium, 8px) 2px calc(var(--spacing-medium, 8px) - 2px);\n      font: inherit;\n      font-size: 14px;\n      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n      cursor: pointer;\n    }\n    button:hover:not([aria-selected='true']) {\n      color: var(--ui-ink, var(--md-sys-color-on-surface));\n    }\n    button[aria-selected='true'] {\n      font-weight: 600;\n      color: var(--ui-ink, var(--md-sys-color-on-surface));\n      border-bottom-color: var(--ui-accent, var(--md-sys-color-primary));\n    }\n    button:focus-visible {\n      outline: 2px solid var(--md-sys-color-primary);\n      outline-offset: 2px;\n    }\n  `\n\n  @property({ attribute: false }) tabs: OxUrlTab[] = []\n  /** The query name the key is kept under. */\n  @property() param = 'tab'\n  /** Transitional: keep the key in a path segment after this page instead of the query. */\n  @property() base?: string\n\n  @state() selected = ''\n\n  private onPop = () => this.read(true)\n\n  connectedCallback() {\n    super.connectedCallback()\n    window.addEventListener('popstate', this.onPop)\n    this.read(false)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    window.removeEventListener('popstate', this.onPop)\n  }\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has('tabs') || changed.has('base') || changed.has('param')) this.read(false)\n  }\n\n  /** The key the address names, or the first tab when it names none of them. */\n  keyInAddress(): string {\n    const keys = this.tabs.map(tab => tab.key)\n    let named: string | null = null\n\n    if (this.base) {\n      const segments = location.pathname.split('/').filter(Boolean)\n      const at = segments.lastIndexOf(this.base)\n      named = at >= 0 ? segments[at + 1] ?? null : null\n    } else {\n      named = new URLSearchParams(location.search).get(this.param)\n    }\n\n    return named && keys.includes(named) ? named : keys[0] ?? ''\n  }\n\n  private read(announce: boolean) {\n    const key = this.keyInAddress()\n    if (key === this.selected) return\n    this.selected = key\n    if (announce) this.announce()\n  }\n\n  /** Choose a tab: the address follows, and the screen hears it. */\n  select(key: string) {\n    if (key === this.selected || !this.tabs.some(tab => tab.key === key)) return\n    const first = this.tabs[0]?.key\n\n    if (this.base) {\n      navigate(key === first ? this.base : `${this.base}/${key}`)\n    } else {\n      const url = new URL(location.href)\n      if (key === first) url.searchParams.delete(this.param)\n      else url.searchParams.set(this.param, key)\n      history.replaceState(history.state, '', url)\n    }\n\n    this.selected = key\n    this.announce()\n  }\n\n  private announce() {\n    this.dispatchEvent(new CustomEvent('tab-change', { detail: { key: this.selected }, bubbles: true, composed: true }))\n  }\n\n  private onKey(event: KeyboardEvent) {\n    const keys = this.tabs.map(tab => tab.key)\n    const at = keys.indexOf(this.selected)\n    const step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0\n    if (!step || at < 0) return\n    event.preventDefault()\n    const next = keys[(at + step + keys.length) % keys.length]\n    this.select(next)\n    this.updateComplete.then(() => this.renderRoot.querySelector<HTMLButtonElement>(`[data-key=\"${next}\"]`)?.focus())\n  }\n\n  render() {\n    return html`<div role=\"tablist\" style=\"display: contents\" @keydown=${this.onKey}>\n      ${this.tabs.map(\n        tab => html`<button\n          role=\"tab\"\n          data-key=${tab.key}\n          aria-selected=${String(tab.key === this.selected)}\n          tabindex=${tab.key === this.selected ? 0 : -1}\n          @click=${() => this.select(tab.key)}\n        >\n          ${tab.label}\n        </button>`\n      )}\n    </div>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ox-url-tabs': OxUrlTabs\n  }\n}\n"]}

package/dist/src/index.d.ts

@@ -1,5 +1,5 @@
 import './initializer.js';
-export { PopupHandle, PopupOptions } from '@operato/popup';
+export type { PopupHandle, PopupOptions } from '@operato/popup';
 export * from './layouts/ox-snack-bar.js';
 export * from './layouts/ox-header-bar.js';
 export * from './layouts/ox-nav-bar.js';
@@ -11,6 +11,9 @@ export * from './actions/layout.js';
 export * from './actions/snackbar.js';
 export * from './components/ox-split-pane.js';
 export * from './components/ox-entity360-dock.js';
+export * from './components/ox-three-pane.js';
+export * from './components/ox-canvas-bar.js';
+export * from './components/ox-url-tabs.js';
 export * from './actions/entity360.js';
 export * from './actions/entity360-registry.js';
 export * from './actions/entity360-door.js';

package/dist/src/index.js

@@ -10,6 +10,9 @@ export * from './actions/layout.js';
 export * from './actions/snackbar.js';
 export * from './components/ox-split-pane.js';
 export * from './components/ox-entity360-dock.js';
+export * from './components/ox-three-pane.js';
+export * from './components/ox-canvas-bar.js';
+export * from './components/ox-url-tabs.js';
 export * from './actions/entity360.js';
 export * from './actions/entity360-registry.js';
 export * from './actions/entity360-door.js';

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAA;AAIzB,cAAc,2BAA2B,CAAA;AACzC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,iCAAiC,CAAA;AAE/C,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AAErC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA;AACtC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sCAAsC,CAAA","sourcesContent":["import './initializer.js'\n\nexport { PopupHandle, PopupOptions } from '@operato/popup'\n\nexport * from './layouts/ox-snack-bar.js'\nexport * from './layouts/ox-header-bar.js'\nexport * from './layouts/ox-nav-bar.js'\nexport * from './layouts/ox-aside-bar.js'\nexport * from './layouts/ox-footer-bar.js'\nexport * from './layouts/ox-page-header-bar.js'\nexport * from './layouts/ox-page-footer-bar.js'\n\nexport * from './actions/layout.js'\nexport * from './actions/snackbar.js'\n\nexport * from './components/ox-split-pane.js'\nexport * from './components/ox-entity360-dock.js'\nexport * from './actions/entity360.js'\nexport * from './actions/entity360-registry.js'\nexport * from './actions/entity360-door.js'\nexport * from './actions/entity360-name.js'\nexport * from './components/ox-entity360-section.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAA;AAIzB,cAAc,2BAA2B,CAAA;AACzC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,iCAAiC,CAAA;AAE/C,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AAErC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,mCAAmC,CAAA;AACjD,cAAc,+BAA+B,CAAA;AAC7C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wBAAwB,CAAA;AACtC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sCAAsC,CAAA","sourcesContent":["import './initializer.js'\n\nexport type { PopupHandle, PopupOptions } from '@operato/popup'\n\nexport * from './layouts/ox-snack-bar.js'\nexport * from './layouts/ox-header-bar.js'\nexport * from './layouts/ox-nav-bar.js'\nexport * from './layouts/ox-aside-bar.js'\nexport * from './layouts/ox-footer-bar.js'\nexport * from './layouts/ox-page-header-bar.js'\nexport * from './layouts/ox-page-footer-bar.js'\n\nexport * from './actions/layout.js'\nexport * from './actions/snackbar.js'\n\nexport * from './components/ox-split-pane.js'\nexport * from './components/ox-entity360-dock.js'\nexport * from './components/ox-three-pane.js'\nexport * from './components/ox-canvas-bar.js'\nexport * from './components/ox-url-tabs.js'\nexport * from './actions/entity360.js'\nexport * from './actions/entity360-registry.js'\nexport * from './actions/entity360-door.js'\nexport * from './actions/entity360-name.js'\nexport * from './components/ox-entity360-section.js'\n"]}

package/dist/test/canvas-bar.test.d.ts

@@ -0,0 +1 @@
+import '../src/index.js';

package/dist/test/canvas-bar.test.js

@@ -0,0 +1,64 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import '../src/index.js';
+/**
+ * The canvas bar (ADR-0060 decision 8 addendum): the common controls stand in the same places on
+ * every canvas, and the screen answers them.
+ */
+const actions = (bar) => Array.from(bar.shadowRoot.querySelectorAll('button[data-action]')).map(b => b.dataset.action);
+describe('ox-canvas-bar', () => {
+    it('★ draws only what the screen says it has', async () => {
+        const bare = await fixture(html `<ox-canvas-bar></ox-canvas-bar>`);
+        expect(actions(bare)).to.deep.equal([]);
+        const full = await fixture(html `<ox-canvas-bar history fit></ox-canvas-bar>`);
+        expect(actions(full)).to.deep.equal(['undo', 'redo', 'fit']);
+    });
+    it('★ with a pane: fold toggles at the two edges, the common controls between them', async () => {
+        const pane = await fixture(html `<ox-three-pane></ox-three-pane>`);
+        const bar = await fixture(html `<ox-canvas-bar history fit .pane=${pane}></ox-canvas-bar>`);
+        expect(actions(bar)).to.deep.equal(['fold-start', 'undo', 'redo', 'fit', 'fold-end']);
+    });
+    it('★ a fold toggle folds the pane, and follows a fold made elsewhere', async () => {
+        const pane = await fixture(html `<ox-three-pane></ox-three-pane>`);
+        const bar = await fixture(html `<ox-canvas-bar .pane=${pane}></ox-canvas-bar>`);
+        const toggle = (side) => bar.shadowRoot.querySelector(`[data-action="fold-${side}"]`);
+        toggle('start').click();
+        await pane.updateComplete;
+        expect(pane.hasAttribute('fold-start')).to.equal(true);
+        await bar.updateComplete;
+        expect(toggle('start').getAttribute('aria-pressed')).to.equal('false');
+        pane.foldEnd = true;
+        await pane.updateComplete;
+        await new Promise(resolve => setTimeout(resolve));
+        await bar.updateComplete;
+        expect(toggle('end').getAttribute('aria-pressed')).to.equal('false');
+        expect(toggle('end').textContent).to.contain('right_panel_open');
+    });
+    it('★ undo, redo and fit reach the screen as events; unavailable ones cannot be pressed', async () => {
+        const bar = await fixture(html `<ox-canvas-bar history fit can-undo></ox-canvas-bar>`);
+        const heard = [];
+        for (const name of ['canvas-undo', 'canvas-redo', 'canvas-fit'])
+            document.addEventListener(name, () => heard.push(name), { once: true });
+        const press = (action) => bar.shadowRoot.querySelector(`[data-action="${action}"]`).click();
+        press('undo');
+        press('redo');
+        press('fit');
+        expect(bar.shadowRoot.querySelector('[data-action="redo"]').disabled).to.equal(true);
+        expect(heard).to.deep.equal(['canvas-undo', 'canvas-fit']);
+    });
+    it('every drawn control has a name a screen reader says', async () => {
+        const pane = await fixture(html `<ox-three-pane></ox-three-pane>`);
+        const bar = await fixture(html `<ox-canvas-bar history fit .pane=${pane}></ox-canvas-bar>`);
+        for (const button of Array.from(bar.shadowRoot.querySelectorAll('button'))) {
+            expect(button.getAttribute('aria-label')).to.be.a('string').and.not.equal('');
+        }
+    });
+    it('★ the keys a screen gives are shown in the titles; the spoken name stays the name', async () => {
+        const bar = await fixture(html `<ox-canvas-bar history undo-shortcut="Ctrl+Z" redo-shortcut="Ctrl+Y"></ox-canvas-bar>`);
+        const undo = bar.shadowRoot.querySelector('[data-action="undo"]');
+        expect(undo.getAttribute('title')).to.match(/\(Ctrl\+Z\)$/);
+        expect(undo.getAttribute('aria-label')).to.not.contain('Ctrl');
+        expect(bar.shadowRoot.querySelector('[data-action="redo"]').getAttribute('title')).to.match(/\(Ctrl\+Y\)$/);
+    });
+});
+//# sourceMappingURL=canvas-bar.test.js.map

package/dist/test/canvas-bar.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-bar.test.js","sourceRoot":"","sources":["../../test/canvas-bar.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture } from '@open-wc/testing'\nimport { html } from 'lit'\nimport '../src/index.js'\nimport type { OxCanvasBar, OxThreePane } from '../src/index.js'\n\n/**\n * The canvas bar (ADR-0060 decision 8 addendum): the common controls stand in the same places on\n * every canvas, and the screen answers them.\n */\n\nconst actions = (bar: OxCanvasBar) =>\n  Array.from(bar.shadowRoot!.querySelectorAll('button[data-action]')).map(b => (b as HTMLElement).dataset.action)\n\ndescribe('ox-canvas-bar', () => {\n  it('★ draws only what the screen says it has', async () => {\n    const bare = await fixture<OxCanvasBar>(html`<ox-canvas-bar></ox-canvas-bar>`)\n    expect(actions(bare)).to.deep.equal([])\n\n    const full = await fixture<OxCanvasBar>(html`<ox-canvas-bar history fit></ox-canvas-bar>`)\n    expect(actions(full)).to.deep.equal(['undo', 'redo', 'fit'])\n  })\n\n  it('★ with a pane: fold toggles at the two edges, the common controls between them', async () => {\n    const pane = await fixture<OxThreePane>(html`<ox-three-pane></ox-three-pane>`)\n    const bar = await fixture<OxCanvasBar>(html`<ox-canvas-bar history fit .pane=${pane}></ox-canvas-bar>`)\n    expect(actions(bar)).to.deep.equal(['fold-start', 'undo', 'redo', 'fit', 'fold-end'])\n  })\n\n  it('★ a fold toggle folds the pane, and follows a fold made elsewhere', async () => {\n    const pane = await fixture<OxThreePane>(html`<ox-three-pane></ox-three-pane>`)\n    const bar = await fixture<OxCanvasBar>(html`<ox-canvas-bar .pane=${pane}></ox-canvas-bar>`)\n    const toggle = (side: string) => bar.shadowRoot!.querySelector(`[data-action=\"fold-${side}\"]`) as HTMLButtonElement\n\n    toggle('start').click()\n    await pane.updateComplete\n    expect(pane.hasAttribute('fold-start')).to.equal(true)\n    await bar.updateComplete\n    expect(toggle('start').getAttribute('aria-pressed')).to.equal('false')\n\n    pane.foldEnd = true\n    await pane.updateComplete\n    await new Promise(resolve => setTimeout(resolve))\n    await bar.updateComplete\n    expect(toggle('end').getAttribute('aria-pressed')).to.equal('false')\n    expect(toggle('end').textContent).to.contain('right_panel_open')\n  })\n\n  it('★ undo, redo and fit reach the screen as events; unavailable ones cannot be pressed', async () => {\n    const bar = await fixture<OxCanvasBar>(html`<ox-canvas-bar history fit can-undo></ox-canvas-bar>`)\n    const heard: string[] = []\n    for (const name of ['canvas-undo', 'canvas-redo', 'canvas-fit']) document.addEventListener(name, () => heard.push(name), { once: true })\n\n    const press = (action: string) => (bar.shadowRoot!.querySelector(`[data-action=\"${action}\"]`) as HTMLButtonElement).click()\n    press('undo')\n    press('redo')\n    press('fit')\n\n    expect((bar.shadowRoot!.querySelector('[data-action=\"redo\"]') as HTMLButtonElement).disabled).to.equal(true)\n    expect(heard).to.deep.equal(['canvas-undo', 'canvas-fit'])\n  })\n\n  it('every drawn control has a name a screen reader says', async () => {\n    const pane = await fixture<OxThreePane>(html`<ox-three-pane></ox-three-pane>`)\n    const bar = await fixture<OxCanvasBar>(html`<ox-canvas-bar history fit .pane=${pane}></ox-canvas-bar>`)\n    for (const button of Array.from(bar.shadowRoot!.querySelectorAll('button'))) {\n      expect(button.getAttribute('aria-label')).to.be.a('string').and.not.equal('')\n    }\n  })\n\n  it('★ the keys a screen gives are shown in the titles; the spoken name stays the name', async () => {\n    const bar = await fixture<OxCanvasBar>(html`<ox-canvas-bar history undo-shortcut=\"Ctrl+Z\" redo-shortcut=\"Ctrl+Y\"></ox-canvas-bar>`)\n    const undo = bar.shadowRoot!.querySelector('[data-action=\"undo\"]')!\n    expect(undo.getAttribute('title')).to.match(/\\(Ctrl\\+Z\\)$/)\n    expect(undo.getAttribute('aria-label')).to.not.contain('Ctrl')\n    expect(bar.shadowRoot!.querySelector('[data-action=\"redo\"]')!.getAttribute('title')).to.match(/\\(Ctrl\\+Y\\)$/)\n  })\n})\n"]}

package/dist/test/three-pane.test.d.ts

@@ -0,0 +1 @@
+import '../src/index.js';

package/dist/test/three-pane.test.js

@@ -0,0 +1,57 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import '../src/index.js';
+/**
+ * The three-pane frame (ADR-0060 decision 8 addendum): measured, not read - the widths a person
+ * gets at each size of the frame, and what folding a side gives to the middle.
+ */
+const settle = () => new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+async function frame(width, attrs = '', style = '') {
+    const holder = await fixture(html `<div style="width: ${width}px; height: 600px"></div>`);
+    holder.innerHTML = `<ox-three-pane ${attrs} style="height: 100%; ${style}">
+      <div slot="start">list</div><div>middle</div><div slot="end">details</div>
+    </ox-three-pane>`;
+    const pane = holder.querySelector('ox-three-pane');
+    await pane.updateComplete;
+    await settle();
+    const box = (name) => pane.shadowRoot.querySelector(`.${name}`).getBoundingClientRect();
+    return { pane, start: box('start'), middle: box('middle'), end: box('end') };
+}
+describe('ox-three-pane', () => {
+    it('★ start | middle | end at 200 | the rest | 340', async () => {
+        const { start, middle, end } = await frame(1200);
+        expect(start.width).to.equal(200);
+        expect(end.width).to.equal(340);
+        expect(middle.width).to.equal(660);
+        expect(start.left < middle.left && middle.left < end.left).to.equal(true);
+    });
+    it('★ folding a side gives its room to the middle', async () => {
+        const left = await frame(1200, 'fold-start');
+        expect(left.start.width).to.equal(0);
+        expect(left.middle.width).to.equal(860);
+        const both = await frame(1200, 'fold-start fold-end');
+        expect(both.middle.width).to.equal(1200);
+    });
+    it('a screen sets its own side widths without writing the grid again', async () => {
+        const { start, end } = await frame(1200, '', '--three-pane-start-width: 220px');
+        expect(start.width).to.equal(220);
+        expect(end.width).to.equal(340);
+    });
+    it('★ narrower than 860, the sides give up some room', async () => {
+        const { start, end } = await frame(800);
+        expect(start.width).to.equal(160);
+        expect(end.width).to.equal(300);
+    });
+    it('★ narrower than 560, one column with the middle first', async () => {
+        const { start, middle, end } = await frame(500);
+        expect(middle.width).to.equal(500);
+        expect(middle.top < start.top && middle.top < end.top).to.equal(true);
+    });
+    it('the fold is an attribute a toolbar can set and a stylesheet can read', async () => {
+        const { pane } = await frame(1200);
+        pane.foldEnd = true;
+        await pane.updateComplete;
+        expect(pane.hasAttribute('fold-end')).to.equal(true);
+    });
+});
+//# sourceMappingURL=three-pane.test.js.map

package/dist/test/three-pane.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"three-pane.test.js","sourceRoot":"","sources":["../../test/three-pane.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture } from '@open-wc/testing'\nimport { html } from 'lit'\nimport '../src/index.js'\nimport type { OxThreePane } from '../src/index.js'\n\n/**\n * The three-pane frame (ADR-0060 decision 8 addendum): measured, not read - the widths a person\n * gets at each size of the frame, and what folding a side gives to the middle.\n */\n\nconst settle = () => new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)))\n\nasync function frame(width: number, attrs = '', style = '') {\n  const holder = await fixture<HTMLDivElement>(html`<div style=\"width: ${width}px; height: 600px\"></div>`)\n  holder.innerHTML = `<ox-three-pane ${attrs} style=\"height: 100%; ${style}\">\n      <div slot=\"start\">list</div><div>middle</div><div slot=\"end\">details</div>\n    </ox-three-pane>`\n  const pane = holder.querySelector('ox-three-pane') as OxThreePane\n  await pane.updateComplete\n  await settle()\n  const box = (name: string) => pane.shadowRoot!.querySelector(`.${name}`)!.getBoundingClientRect()\n  return { pane, start: box('start'), middle: box('middle'), end: box('end') }\n}\n\ndescribe('ox-three-pane', () => {\n  it('★ start | middle | end at 200 | the rest | 340', async () => {\n    const { start, middle, end } = await frame(1200)\n    expect(start.width).to.equal(200)\n    expect(end.width).to.equal(340)\n    expect(middle.width).to.equal(660)\n    expect(start.left < middle.left && middle.left < end.left).to.equal(true)\n  })\n\n  it('★ folding a side gives its room to the middle', async () => {\n    const left = await frame(1200, 'fold-start')\n    expect(left.start.width).to.equal(0)\n    expect(left.middle.width).to.equal(860)\n\n    const both = await frame(1200, 'fold-start fold-end')\n    expect(both.middle.width).to.equal(1200)\n  })\n\n  it('a screen sets its own side widths without writing the grid again', async () => {\n    const { start, end } = await frame(1200, '', '--three-pane-start-width: 220px')\n    expect(start.width).to.equal(220)\n    expect(end.width).to.equal(340)\n  })\n\n  it('★ narrower than 860, the sides give up some room', async () => {\n    const { start, end } = await frame(800)\n    expect(start.width).to.equal(160)\n    expect(end.width).to.equal(300)\n  })\n\n  it('★ narrower than 560, one column with the middle first', async () => {\n    const { start, middle, end } = await frame(500)\n    expect(middle.width).to.equal(500)\n    expect(middle.top < start.top && middle.top < end.top).to.equal(true)\n  })\n\n  it('the fold is an attribute a toolbar can set and a stylesheet can read', async () => {\n    const { pane } = await frame(1200)\n    pane.foldEnd = true\n    await pane.updateComplete\n    expect(pane.hasAttribute('fold-end')).to.equal(true)\n  })\n})\n"]}

package/dist/test/url-tabs.test.d.ts

@@ -0,0 +1 @@
+import '../src/index.js';

package/dist/test/url-tabs.test.js

@@ -0,0 +1,67 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import '../src/index.js';
+/**
+ * Tabs whose choice lives in the address (ADR-0060 decision 8 addendum): what is read, what is
+ * written, and that the two always go together.
+ */
+const TABS = [
+    { key: 'orders', label: 'orders' },
+    { key: 'ledger', label: 'ledger' },
+    { key: 'journal', label: 'journal' }
+];
+const start = location.href;
+const at = (search, path = location.pathname) => history.replaceState(null, '', path + search);
+describe('ox-url-tabs', () => {
+    afterEach(() => history.replaceState(null, '', start));
+    it('★ opens on the tab the address names, and on the first when it names none', async () => {
+        at('?tab=ledger&q=x');
+        const named = await fixture(html `<ox-url-tabs .tabs=${TABS}></ox-url-tabs>`);
+        expect(named.selected).to.equal('ledger');
+        at('?tab=nothing-like-it');
+        const unknown = await fixture(html `<ox-url-tabs .tabs=${TABS}></ox-url-tabs>`);
+        expect(unknown.selected).to.equal('orders');
+    });
+    it('★ choosing a tab writes it into the address and keeps the rest of the query', async () => {
+        at('?q=x');
+        const tabs = await fixture(html `<ox-url-tabs .tabs=${TABS}></ox-url-tabs>`);
+        const lengthBefore = history.length;
+        tabs.shadowRoot.querySelector('[data-key="journal"]').click();
+        const query = new URLSearchParams(location.search);
+        expect(query.get('tab')).to.equal('journal');
+        expect(query.get('q')).to.equal('x');
+        expect(history.length).to.equal(lengthBefore);
+    });
+    it('the first tab is the default and is not written', async () => {
+        at('?tab=ledger');
+        const tabs = await fixture(html `<ox-url-tabs .tabs=${TABS}></ox-url-tabs>`);
+        tabs.select('orders');
+        expect(new URLSearchParams(location.search).has('tab')).to.equal(false);
+    });
+    it('★ back or forward to another address moves the tab, and the screen hears it', async () => {
+        at('?tab=ledger');
+        const tabs = await fixture(html `<ox-url-tabs .tabs=${TABS}></ox-url-tabs>`);
+        let heard = '';
+        tabs.addEventListener('tab-change', event => (heard = event.detail.key));
+        at('?tab=journal');
+        window.dispatchEvent(new PopStateEvent('popstate'));
+        expect(tabs.selected).to.equal('journal');
+        expect(heard).to.equal('journal');
+    });
+    it('arrow keys move between tabs', async () => {
+        at('');
+        const tabs = await fixture(html `<ox-url-tabs .tabs=${TABS}></ox-url-tabs>`);
+        const first = tabs.shadowRoot.querySelector('[data-key="orders"]');
+        first.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, composed: true }));
+        expect(tabs.selected).to.equal('journal');
+    });
+    it('transitional path segment: the key after the page is read', async () => {
+        at('', '/domain/x/quality-list/disposition');
+        const tabs = await fixture(html `<ox-url-tabs base="quality-list" .tabs=${[
+            { key: 'inspection', label: 'i' },
+            { key: 'disposition', label: 'd' }
+        ]}></ox-url-tabs>`);
+        expect(tabs.selected).to.equal('disposition');
+    });
+});
+//# sourceMappingURL=url-tabs.test.js.map

package/dist/test/url-tabs.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"url-tabs.test.js","sourceRoot":"","sources":["../../test/url-tabs.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture } from '@open-wc/testing'\nimport { html } from 'lit'\nimport '../src/index.js'\nimport type { OxUrlTabs } from '../src/index.js'\n\n/**\n * Tabs whose choice lives in the address (ADR-0060 decision 8 addendum): what is read, what is\n * written, and that the two always go together.\n */\n\nconst TABS = [\n  { key: 'orders', label: 'orders' },\n  { key: 'ledger', label: 'ledger' },\n  { key: 'journal', label: 'journal' }\n]\n\nconst start = location.href\nconst at = (search: string, path = location.pathname) => history.replaceState(null, '', path + search)\n\ndescribe('ox-url-tabs', () => {\n  afterEach(() => history.replaceState(null, '', start))\n\n  it('★ opens on the tab the address names, and on the first when it names none', async () => {\n    at('?tab=ledger&q=x')\n    const named = await fixture<OxUrlTabs>(html`<ox-url-tabs .tabs=${TABS}></ox-url-tabs>`)\n    expect(named.selected).to.equal('ledger')\n\n    at('?tab=nothing-like-it')\n    const unknown = await fixture<OxUrlTabs>(html`<ox-url-tabs .tabs=${TABS}></ox-url-tabs>`)\n    expect(unknown.selected).to.equal('orders')\n  })\n\n  it('★ choosing a tab writes it into the address and keeps the rest of the query', async () => {\n    at('?q=x')\n    const tabs = await fixture<OxUrlTabs>(html`<ox-url-tabs .tabs=${TABS}></ox-url-tabs>`)\n    const lengthBefore = history.length\n    ;(tabs.shadowRoot!.querySelector('[data-key=\"journal\"]') as HTMLButtonElement).click()\n\n    const query = new URLSearchParams(location.search)\n    expect(query.get('tab')).to.equal('journal')\n    expect(query.get('q')).to.equal('x')\n    expect(history.length).to.equal(lengthBefore)\n  })\n\n  it('the first tab is the default and is not written', async () => {\n    at('?tab=ledger')\n    const tabs = await fixture<OxUrlTabs>(html`<ox-url-tabs .tabs=${TABS}></ox-url-tabs>`)\n    tabs.select('orders')\n    expect(new URLSearchParams(location.search).has('tab')).to.equal(false)\n  })\n\n  it('★ back or forward to another address moves the tab, and the screen hears it', async () => {\n    at('?tab=ledger')\n    const tabs = await fixture<OxUrlTabs>(html`<ox-url-tabs .tabs=${TABS}></ox-url-tabs>`)\n    let heard = ''\n    tabs.addEventListener('tab-change', event => (heard = (event as CustomEvent).detail.key))\n\n    at('?tab=journal')\n    window.dispatchEvent(new PopStateEvent('popstate'))\n    expect(tabs.selected).to.equal('journal')\n    expect(heard).to.equal('journal')\n  })\n\n  it('arrow keys move between tabs', async () => {\n    at('')\n    const tabs = await fixture<OxUrlTabs>(html`<ox-url-tabs .tabs=${TABS}></ox-url-tabs>`)\n    const first = tabs.shadowRoot!.querySelector('[data-key=\"orders\"]') as HTMLButtonElement\n    first.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, composed: true }))\n    expect(tabs.selected).to.equal('journal')\n  })\n\n  it('transitional path segment: the key after the page is read', async () => {\n    at('', '/domain/x/quality-list/disposition')\n    const tabs = await fixture<OxUrlTabs>(html`<ox-url-tabs base=\"quality-list\" .tabs=${[\n      { key: 'inspection', label: 'i' },\n      { key: 'disposition', label: 'd' }\n    ]}></ox-url-tabs>`)\n    expect(tabs.selected).to.equal('disposition')\n  })\n})\n"]}