@operato/styles 10.29.1 → 10.29.12

package/dist/test/page-ground.test.js

@@ -0,0 +1,215 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { css, LitElement, unsafeCSS } from 'lit';
+import { ButtonContainerStyles } from '../src/button-container-styles.js';
+import { ButtonStyles } from '../src/button-styles.js';
+import { FormFieldStyles } from '../src/form-field-styles.js';
+import { DocumentPageStyles, WorkSurfacePageStyles } from '../src/page-frame-styles.js';
+/*
+ * The ground the page frames lay, and the button and field sizes (operato-application/design/ui/page-standard.md).
+ *
+ * What these stand on: a screen that forgot to set a value used to fall to the browser default -
+ * 16px body text, rgb(0 0 238) links, Korean broken mid-word, cards wider than their header. The
+ * frame now lays the value; a screen that says otherwise still wins. Measured on rendered elements,
+ * not on the stylesheet text.
+ *
+ * The tokens are defined here because a test page has no shell theme.
+ */
+const TOKENS = css `
+  :host {
+    --ui-t-body: 13px;
+    --ui-ink: rgb(27, 27, 27);
+    --ui-accent: rgb(0, 114, 126);
+    --ui-gutter: 16px;
+    --context-action-height: 32px;
+    --cell-action-height: 26px;
+    --form-element-height-medium: 32px;
+    --form-element-height-small: 26px;
+    --md-sys-color-primary: rgb(0, 114, 126);
+    --md-sys-color-surface-container-lowest: rgb(255, 255, 255);
+  }
+`;
+class DocumentProbe extends LitElement {
+    render() {
+        return html `
+      <div class="page">
+        <section class="page-section">
+          <p class="page-section-note">note</p>
+          <div class="page-card" id="card" style="width: 300px; padding: 16px">card</div>
+          <span id="text">text</span>
+          <a id="thing" href="#a">LOT-1</a>
+          <a id="go" class="page-nav-link" href="#b">go</a>
+          <div style="display: grid; grid-template-columns: 400px">
+            <button id="plain">add</button>
+          </div>
+          <button id="raised" raised>save</button>
+          <button id="small" small>hold</button>
+          <input id="field" />
+          <input id="small-field" small />
+          <textarea id="area"></textarea>
+        </section>
+      </div>
+    `;
+    }
+}
+DocumentProbe.styles = [DocumentPageStyles, ButtonStyles, FormFieldStyles, TOKENS];
+customElements.define('document-probe', DocumentProbe);
+class SurfaceProbe extends LitElement {
+    render() {
+        return html `<div class="page-headroom"><span>range</span></div>`;
+    }
+}
+SurfaceProbe.styles = [WorkSurfacePageStyles, TOKENS];
+customElements.define('surface-probe', SurfaceProbe);
+class OwnRuleProbe extends LitElement {
+    render() {
+        return html `<span id="text">t</span><button id="own">x</button><a id="a" href="#">a</a>`;
+    }
+}
+OwnRuleProbe.styles = [
+    DocumentPageStyles,
+    ButtonStyles,
+    TOKENS,
+    css `
+      :host {
+        font-size: 15px;
+      }
+      button {
+        height: 48px;
+      }
+      a {
+        color: rgb(255, 0, 0);
+      }
+    `
+];
+customElements.define('own-rule-probe', OwnRuleProbe);
+const style = (el) => getComputedStyle(el);
+describe('page frame ground', () => {
+    it('body text is the body token, not the browser 16px', async () => {
+        const el = (await fixture(html `<document-probe></document-probe>`));
+        expect(style(el.shadowRoot.querySelector('#text')).fontSize).to.equal('13px');
+    });
+    it('a link to a thing reads as text; a link to a screen takes the accent; neither underlines at rest', async () => {
+        const el = (await fixture(html `<document-probe></document-probe>`));
+        const thing = style(el.shadowRoot.querySelector('#thing'));
+        const go = style(el.shadowRoot.querySelector('#go'));
+        expect(thing.color).to.equal('rgb(27, 27, 27)');
+        expect(thing.textDecorationLine).to.equal('none');
+        expect(go.color).to.equal('rgb(0, 114, 126)');
+    });
+    it('Korean wraps at words, and a word with no break point still breaks', async () => {
+        const el = (await fixture(html `<document-probe></document-probe>`));
+        const text = style(el.shadowRoot.querySelector('#text'));
+        expect(text.wordBreak).to.equal('keep-all');
+        expect(text.overflowWrap).to.equal('anywhere');
+    });
+    it('padding stays inside the width (a card is not wider than it was told)', async () => {
+        const el = (await fixture(html `<document-probe></document-probe>`));
+        expect(el.shadowRoot.querySelector('#card').getBoundingClientRect().width).to.equal(300);
+    });
+    it('the document column is not held to 1080px, and its side gutters are equal', async () => {
+        const el = (await fixture(html `<document-probe style="display: block; width: 1600px"></document-probe>`));
+        const page = el.shadowRoot.querySelector('.page');
+        expect(style(page).maxWidth).to.equal('none');
+        expect(page.getBoundingClientRect().width).to.equal(1600);
+        expect(style(page).paddingLeft).to.equal('16px');
+        expect(style(page).paddingRight).to.equal('16px');
+    });
+    it('the work surface headroom uses the same gutter', async () => {
+        const el = (await fixture(html `<surface-probe></surface-probe>`));
+        expect(style(el.shadowRoot.querySelector('.page-headroom')).paddingLeft).to.equal('16px');
+    });
+    it("a screen's own rule still wins over the ground", async () => {
+        const el = (await fixture(html `<own-rule-probe></own-rule-probe>`));
+        expect(style(el.shadowRoot.querySelector('#text')).fontSize).to.equal('15px');
+        expect(style(el.shadowRoot.querySelector('#own')).height).to.equal('48px');
+        expect(style(el.shadowRoot.querySelector('#a')).color).to.equal('rgb(255, 0, 0)');
+    });
+});
+describe('buttons and fields', () => {
+    it('a button is as tall as its place and as wide as its label - it does not stretch to a grid track', async () => {
+        const el = (await fixture(html `<document-probe></document-probe>`));
+        const plain = el.shadowRoot.querySelector('#plain');
+        expect(style(plain).height).to.equal('32px');
+        expect(style(plain).fontSize).to.equal('13px');
+        expect(style(plain).fontWeight).to.equal('600');
+        expect(plain.getBoundingClientRect().width).to.be.below(100);
+        expect(style(el.shadowRoot.querySelector('#small')).height).to.equal('26px');
+    });
+    it('a raised button is filled, a plain one is not', async () => {
+        const el = (await fixture(html `<document-probe></document-probe>`));
+        const raised = style(el.shadowRoot.querySelector('#raised')).backgroundColor;
+        const plain = style(el.shadowRoot.querySelector('#plain')).backgroundColor;
+        expect(raised).to.not.equal(plain);
+    });
+    it('one-line fields take the form height; a small one the cell height; a textarea keeps its own', async () => {
+        const el = (await fixture(html `<document-probe></document-probe>`));
+        expect(style(el.shadowRoot.querySelector('#field')).height).to.equal('32px');
+        expect(style(el.shadowRoot.querySelector('#small-field')).height).to.equal('26px');
+        expect(style(el.shadowRoot.querySelector('#area')).height).to.not.equal('32px');
+    });
+});
+/*
+ * The touch branch of FormFieldStyles, measured as drawn. The test browser reports a fine pointer, so the
+ * rules inside the pointer: coarse media block are lifted out of the published CSS and applied as they are.
+ */
+const TOUCH_RULES = (() => {
+    const text = FormFieldStyles.cssText;
+    const start = text.indexOf('@media (pointer: coarse)');
+    const open = text.indexOf('{', start);
+    let depth = 1;
+    let i = open + 1;
+    for (; i < text.length && depth; i++)
+        depth += text[i] === '{' ? 1 : text[i] === '}' ? -1 : 0;
+    return start < 0 ? '' : text.slice(open + 1, i - 1);
+})();
+class TouchProbe extends LitElement {
+    render() {
+        return html `
+      <label id="label">name <input id="field" value="Ag gj" /></label>
+      <input id="small-field" small value="Ag gj" />
+      <select id="pick"><option>Ag gj</option></select>
+      <textarea id="area">Ag gj</textarea>
+      <span id="help">help</span>
+    `;
+    }
+}
+TouchProbe.styles = [DocumentPageStyles, FormFieldStyles, TOKENS, unsafeCSS(TOUCH_RULES)];
+customElements.define('touch-probe', TouchProbe);
+describe('fields on a touch device', () => {
+    it('the branch exists in the published CSS', () => {
+        expect(TOUCH_RULES).to.contain('16px');
+    });
+    it('field text is 16px - iOS zooms into anything smaller - while labels and help stay at body size', async () => {
+        const el = (await fixture(html `<touch-probe></touch-probe>`));
+        const at = (id) => style(el.shadowRoot.querySelector(id));
+        for (const id of ['#field', '#small-field', '#pick', '#area'])
+            expect(at(id).fontSize, id).to.equal('16px');
+        expect(at('#label').fontSize).to.equal('13px');
+        expect(at('#help').fontSize).to.equal('13px');
+    });
+    it('the field heights stay, and 16px text fits inside them', async () => {
+        const el = (await fixture(html `<touch-probe></touch-probe>`));
+        for (const [id, height] of [['#field', 32], ['#small-field', 26]]) {
+            const field = el.shadowRoot.querySelector(id);
+            const s = style(field);
+            expect(s.height, id).to.equal(`${height}px`);
+            const inner = height - parseFloat(s.paddingTop) - parseFloat(s.paddingBottom) - parseFloat(s.borderTopWidth) - parseFloat(s.borderBottomWidth);
+            /* 16px text needs about 1.2 of its size; with less room the bottom of the letters is cut. */
+            expect(inner, id).to.be.at.least(16 * 1.2);
+        }
+    });
+});
+describe('ButtonContainerStyles', () => {
+    /*
+     * dssp draws 26 of its own pages with this block. ButtonStyles was taken out next to it, not out of
+     * it: the CSS this block emits must stay byte for byte what 10.29.1 published.
+     * sha-256 of ButtonContainerStyles.cssText in the published 10.29.1 (2026-10-05).
+     */
+    it('emits the same CSS as the published 10.29.1', async () => {
+        const bytes = new TextEncoder().encode(ButtonContainerStyles.cssText);
+        const digest = await crypto.subtle.digest('SHA-256', bytes);
+        const hex = [...new Uint8Array(digest)].map(b => b.toString(16).padStart(2, '0')).join('');
+        expect(hex).to.equal('bcab002afc1a4521cd7da312cacba2bcd594cfe0e3dcd6c1d62a388adfd25203');
+    });
+});
+//# sourceMappingURL=page-ground.test.js.map

package/dist/test/page-ground.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-ground.test.js","sourceRoot":"","sources":["../../test/page-ground.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAEhD,OAAO,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAA;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAC7D,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AAEvF;;;;;;;;;GASG;AACH,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;CAajB,CAAA;AAED,MAAM,aAAc,SAAQ,UAAU;IAEpC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;KAkBV,CAAA;IACH,CAAC;;AArBM,oBAAM,GAAG,CAAC,kBAAkB,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,CAAC,CAAA;AAuB7E,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAA;AAEtD,MAAM,YAAa,SAAQ,UAAU;IAEnC,MAAM;QACJ,OAAO,IAAI,CAAA,qDAAqD,CAAA;IAClE,CAAC;;AAHM,mBAAM,GAAG,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAA;AAKjD,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,YAAY,CAAC,CAAA;AAEpD,MAAM,YAAa,SAAQ,UAAU;IAiBnC,MAAM;QACJ,OAAO,IAAI,CAAA,6EAA6E,CAAA;IAC1F,CAAC;;AAlBM,mBAAM,GAAG;IACd,kBAAkB;IAClB,YAAY;IACZ,MAAM;IACN,GAAG,CAAA;;;;;;;;;;KAUF;CACF,CAAA;AAKH,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAA;AAErD,MAAM,KAAK,GAAG,CAAC,EAAW,EAAE,EAAE,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAA;AAEnD,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;QACjE,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA,mCAAmC,CAAC,CAAkB,CAAA;QACpF,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;IACjF,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,kGAAkG,EAAE,KAAK,IAAI,EAAE;QAChH,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA,mCAAmC,CAAC,CAAkB,CAAA;QACpF,MAAM,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC,CAAA;QAC5D,MAAM,EAAE,GAAG,KAAK,CAAC,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,KAAK,CAAE,CAAC,CAAA;QACtD,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAA;QAC/C,MAAM,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QACjD,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAA;IAC/C,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,oEAAoE,EAAE,KAAK,IAAI,EAAE;QAClF,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA,mCAAmC,CAAC,CAAkB,CAAA;QACpF,MAAM,IAAI,GAAG,KAAK,CAAC,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC,CAAA;QAC1D,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA;QAC3C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA;IAChD,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,uEAAuE,EAAE,KAAK,IAAI,EAAE;QACrF,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA,mCAAmC,CAAC,CAAkB,CAAA;QACpF,MAAM,CAAC,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IAC5F,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,2EAA2E,EAAE,KAAK,IAAI,EAAE;QACzF,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA,yEAAyE,CAAC,CAAkB,CAAA;QAC1H,MAAM,IAAI,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAA;QACnD,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAC7C,MAAM,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QACzD,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAChD,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;IACnD,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;QAC9D,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA,iCAAiC,CAAC,CAAiB,CAAA;QACjF,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,gBAAgB,CAAE,CAAC,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;IAC7F,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;QAC9D,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA,mCAAmC,CAAC,CAAiB,CAAA;QACnF,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAC/E,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAC5E,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,IAAI,CAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAA;IACrF,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,iGAAiG,EAAE,KAAK,IAAI,EAAE;QAC/G,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA,mCAAmC,CAAC,CAAkB,CAAA;QACpF,MAAM,KAAK,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAA;QACrD,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAC5C,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAC9C,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QAC/C,MAAM,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QAC5D,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;IAChF,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;QAC7D,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA,mCAAmC,CAAC,CAAkB,CAAA;QACpF,MAAM,MAAM,GAAG,KAAK,CAAC,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,SAAS,CAAE,CAAC,CAAC,eAAe,CAAA;QAC9E,MAAM,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC,CAAC,eAAe,CAAA;QAC5E,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;IACpC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,6FAA6F,EAAE,KAAK,IAAI,EAAE;QAC3G,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA,mCAAmC,CAAC,CAAkB,CAAA;QACpF,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAC9E,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,cAAc,CAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QACpF,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;IACnF,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA;AAEF;;;GAGG;AACH,MAAM,WAAW,GAAG,CAAC,GAAG,EAAE;IACxB,MAAM,IAAI,GAAG,eAAe,CAAC,OAAO,CAAA;IACpC,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAA;IACtD,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;IACrC,IAAI,KAAK,GAAG,CAAC,CAAA;IACb,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,CAAA;IAChB,OAAO,CAAC,GAAG,IAAI,CAAC,MAAM,IAAI,KAAK,EAAE,CAAC,EAAE;QAAE,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAC7F,OAAO,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;AACrD,CAAC,CAAC,EAAE,CAAA;AAEJ,MAAM,UAAW,SAAQ,UAAU;IAEjC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;KAMV,CAAA;IACH,CAAC;;AATM,iBAAM,GAAG,CAAC,kBAAkB,EAAE,eAAe,EAAE,MAAM,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC,CAAA;AAWvF,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAA;AAEhD,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;IACxC,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;QAChD,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;IACxC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,gGAAgG,EAAE,KAAK,IAAI,EAAE;QAC9G,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA,6BAA6B,CAAC,CAAe,CAAA;QAC3E,MAAM,EAAE,GAAG,CAAC,EAAU,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,EAAE,CAAE,CAAC,CAAA;QACnE,KAAK,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,CAAC;YAAE,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAC3G,MAAM,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAC9C,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;IAC/C,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;QACtE,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA,6BAA6B,CAAC,CAAe,CAAA;QAC3E,KAAK,MAAM,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,cAAc,EAAE,EAAE,CAAC,CAAU,EAAE,CAAC;YAC3E,MAAM,KAAK,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,EAAE,CAAqB,CAAA;YAClE,MAAM,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAA;YACtB,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC,CAAA;YAC5C,MAAM,KAAK,GAAG,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAA;YAC9I,6FAA6F;YAC7F,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,GAAG,CAAC,CAAA;QAC5C,CAAC;IACH,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACrC;;;;OAIG;IACH,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;QAC3D,MAAM,KAAK,GAAG,IAAI,WAAW,EAAE,CAAC,MAAM,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAA;QACrE,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;QAC3D,MAAM,GAAG,GAAG,CAAC,GAAG,IAAI,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;QAC1F,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,kEAAkE,CAAC,CAAA;IAC1F,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import { expect, fixture, html } from '@open-wc/testing'\nimport { css, LitElement, unsafeCSS } from 'lit'\n\nimport { ButtonContainerStyles } from '../src/button-container-styles.js'\nimport { ButtonStyles } from '../src/button-styles.js'\nimport { FormFieldStyles } from '../src/form-field-styles.js'\nimport { DocumentPageStyles, WorkSurfacePageStyles } from '../src/page-frame-styles.js'\n\n/*\n * The ground the page frames lay, and the button and field sizes (operato-application/design/ui/page-standard.md).\n *\n * What these stand on: a screen that forgot to set a value used to fall to the browser default -\n * 16px body text, rgb(0 0 238) links, Korean broken mid-word, cards wider than their header. The\n * frame now lays the value; a screen that says otherwise still wins. Measured on rendered elements,\n * not on the stylesheet text.\n *\n * The tokens are defined here because a test page has no shell theme.\n */\nconst TOKENS = css`\n  :host {\n    --ui-t-body: 13px;\n    --ui-ink: rgb(27, 27, 27);\n    --ui-accent: rgb(0, 114, 126);\n    --ui-gutter: 16px;\n    --context-action-height: 32px;\n    --cell-action-height: 26px;\n    --form-element-height-medium: 32px;\n    --form-element-height-small: 26px;\n    --md-sys-color-primary: rgb(0, 114, 126);\n    --md-sys-color-surface-container-lowest: rgb(255, 255, 255);\n  }\n`\n\nclass DocumentProbe extends LitElement {\n  static styles = [DocumentPageStyles, ButtonStyles, FormFieldStyles, TOKENS]\n  render() {\n    return html`\n      <div class=\"page\">\n        <section class=\"page-section\">\n          <p class=\"page-section-note\">note</p>\n          <div class=\"page-card\" id=\"card\" style=\"width: 300px; padding: 16px\">card</div>\n          <span id=\"text\">text</span>\n          <a id=\"thing\" href=\"#a\">LOT-1</a>\n          <a id=\"go\" class=\"page-nav-link\" href=\"#b\">go</a>\n          <div style=\"display: grid; grid-template-columns: 400px\">\n            <button id=\"plain\">add</button>\n          </div>\n          <button id=\"raised\" raised>save</button>\n          <button id=\"small\" small>hold</button>\n          <input id=\"field\" />\n          <input id=\"small-field\" small />\n          <textarea id=\"area\"></textarea>\n        </section>\n      </div>\n    `\n  }\n}\ncustomElements.define('document-probe', DocumentProbe)\n\nclass SurfaceProbe extends LitElement {\n  static styles = [WorkSurfacePageStyles, TOKENS]\n  render() {\n    return html`<div class=\"page-headroom\"><span>range</span></div>`\n  }\n}\ncustomElements.define('surface-probe', SurfaceProbe)\n\nclass OwnRuleProbe extends LitElement {\n  static styles = [\n    DocumentPageStyles,\n    ButtonStyles,\n    TOKENS,\n    css`\n      :host {\n        font-size: 15px;\n      }\n      button {\n        height: 48px;\n      }\n      a {\n        color: rgb(255, 0, 0);\n      }\n    `\n  ]\n  render() {\n    return html`<span id=\"text\">t</span><button id=\"own\">x</button><a id=\"a\" href=\"#\">a</a>`\n  }\n}\ncustomElements.define('own-rule-probe', OwnRuleProbe)\n\nconst style = (el: Element) => getComputedStyle(el)\n\ndescribe('page frame ground', () => {\n  it('body text is the body token, not the browser 16px', async () => {\n    const el = (await fixture(html`<document-probe></document-probe>`)) as DocumentProbe\n    expect(style(el.shadowRoot!.querySelector('#text')!).fontSize).to.equal('13px')\n  })\n\n  it('a link to a thing reads as text; a link to a screen takes the accent; neither underlines at rest', async () => {\n    const el = (await fixture(html`<document-probe></document-probe>`)) as DocumentProbe\n    const thing = style(el.shadowRoot!.querySelector('#thing')!)\n    const go = style(el.shadowRoot!.querySelector('#go')!)\n    expect(thing.color).to.equal('rgb(27, 27, 27)')\n    expect(thing.textDecorationLine).to.equal('none')\n    expect(go.color).to.equal('rgb(0, 114, 126)')\n  })\n\n  it('Korean wraps at words, and a word with no break point still breaks', async () => {\n    const el = (await fixture(html`<document-probe></document-probe>`)) as DocumentProbe\n    const text = style(el.shadowRoot!.querySelector('#text')!)\n    expect(text.wordBreak).to.equal('keep-all')\n    expect(text.overflowWrap).to.equal('anywhere')\n  })\n\n  it('padding stays inside the width (a card is not wider than it was told)', async () => {\n    const el = (await fixture(html`<document-probe></document-probe>`)) as DocumentProbe\n    expect(el.shadowRoot!.querySelector('#card')!.getBoundingClientRect().width).to.equal(300)\n  })\n\n  it('the document column is not held to 1080px, and its side gutters are equal', async () => {\n    const el = (await fixture(html`<document-probe style=\"display: block; width: 1600px\"></document-probe>`)) as DocumentProbe\n    const page = el.shadowRoot!.querySelector('.page')!\n    expect(style(page).maxWidth).to.equal('none')\n    expect(page.getBoundingClientRect().width).to.equal(1600)\n    expect(style(page).paddingLeft).to.equal('16px')\n    expect(style(page).paddingRight).to.equal('16px')\n  })\n\n  it('the work surface headroom uses the same gutter', async () => {\n    const el = (await fixture(html`<surface-probe></surface-probe>`)) as SurfaceProbe\n    expect(style(el.shadowRoot!.querySelector('.page-headroom')!).paddingLeft).to.equal('16px')\n  })\n\n  it(\"a screen's own rule still wins over the ground\", async () => {\n    const el = (await fixture(html`<own-rule-probe></own-rule-probe>`)) as OwnRuleProbe\n    expect(style(el.shadowRoot!.querySelector('#text')!).fontSize).to.equal('15px')\n    expect(style(el.shadowRoot!.querySelector('#own')!).height).to.equal('48px')\n    expect(style(el.shadowRoot!.querySelector('#a')!).color).to.equal('rgb(255, 0, 0)')\n  })\n})\n\ndescribe('buttons and fields', () => {\n  it('a button is as tall as its place and as wide as its label - it does not stretch to a grid track', async () => {\n    const el = (await fixture(html`<document-probe></document-probe>`)) as DocumentProbe\n    const plain = el.shadowRoot!.querySelector('#plain')!\n    expect(style(plain).height).to.equal('32px')\n    expect(style(plain).fontSize).to.equal('13px')\n    expect(style(plain).fontWeight).to.equal('600')\n    expect(plain.getBoundingClientRect().width).to.be.below(100)\n    expect(style(el.shadowRoot!.querySelector('#small')!).height).to.equal('26px')\n  })\n\n  it('a raised button is filled, a plain one is not', async () => {\n    const el = (await fixture(html`<document-probe></document-probe>`)) as DocumentProbe\n    const raised = style(el.shadowRoot!.querySelector('#raised')!).backgroundColor\n    const plain = style(el.shadowRoot!.querySelector('#plain')!).backgroundColor\n    expect(raised).to.not.equal(plain)\n  })\n\n  it('one-line fields take the form height; a small one the cell height; a textarea keeps its own', async () => {\n    const el = (await fixture(html`<document-probe></document-probe>`)) as DocumentProbe\n    expect(style(el.shadowRoot!.querySelector('#field')!).height).to.equal('32px')\n    expect(style(el.shadowRoot!.querySelector('#small-field')!).height).to.equal('26px')\n    expect(style(el.shadowRoot!.querySelector('#area')!).height).to.not.equal('32px')\n  })\n})\n\n/*\n * The touch branch of FormFieldStyles, measured as drawn. The test browser reports a fine pointer, so the\n * rules inside the pointer: coarse media block are lifted out of the published CSS and applied as they are.\n */\nconst TOUCH_RULES = (() => {\n  const text = FormFieldStyles.cssText\n  const start = text.indexOf('@media (pointer: coarse)')\n  const open = text.indexOf('{', start)\n  let depth = 1\n  let i = open + 1\n  for (; i < text.length && depth; i++) depth += text[i] === '{' ? 1 : text[i] === '}' ? -1 : 0\n  return start < 0 ? '' : text.slice(open + 1, i - 1)\n})()\n\nclass TouchProbe extends LitElement {\n  static styles = [DocumentPageStyles, FormFieldStyles, TOKENS, unsafeCSS(TOUCH_RULES)]\n  render() {\n    return html`\n      <label id=\"label\">name <input id=\"field\" value=\"Ag gj\" /></label>\n      <input id=\"small-field\" small value=\"Ag gj\" />\n      <select id=\"pick\"><option>Ag gj</option></select>\n      <textarea id=\"area\">Ag gj</textarea>\n      <span id=\"help\">help</span>\n    `\n  }\n}\ncustomElements.define('touch-probe', TouchProbe)\n\ndescribe('fields on a touch device', () => {\n  it('the branch exists in the published CSS', () => {\n    expect(TOUCH_RULES).to.contain('16px')\n  })\n\n  it('field text is 16px - iOS zooms into anything smaller - while labels and help stay at body size', async () => {\n    const el = (await fixture(html`<touch-probe></touch-probe>`)) as TouchProbe\n    const at = (id: string) => style(el.shadowRoot!.querySelector(id)!)\n    for (const id of ['#field', '#small-field', '#pick', '#area']) expect(at(id).fontSize, id).to.equal('16px')\n    expect(at('#label').fontSize).to.equal('13px')\n    expect(at('#help').fontSize).to.equal('13px')\n  })\n\n  it('the field heights stay, and 16px text fits inside them', async () => {\n    const el = (await fixture(html`<touch-probe></touch-probe>`)) as TouchProbe\n    for (const [id, height] of [['#field', 32], ['#small-field', 26]] as const) {\n      const field = el.shadowRoot!.querySelector(id) as HTMLInputElement\n      const s = style(field)\n      expect(s.height, id).to.equal(`${height}px`)\n      const inner = height - parseFloat(s.paddingTop) - parseFloat(s.paddingBottom) - parseFloat(s.borderTopWidth) - parseFloat(s.borderBottomWidth)\n      /* 16px text needs about 1.2 of its size; with less room the bottom of the letters is cut. */\n      expect(inner, id).to.be.at.least(16 * 1.2)\n    }\n  })\n})\n\ndescribe('ButtonContainerStyles', () => {\n  /*\n   * dssp draws 26 of its own pages with this block. ButtonStyles was taken out next to it, not out of\n   * it: the CSS this block emits must stay byte for byte what 10.29.1 published.\n   * sha-256 of ButtonContainerStyles.cssText in the published 10.29.1 (2026-10-05).\n   */\n  it('emits the same CSS as the published 10.29.1', async () => {\n    const bytes = new TextEncoder().encode(ButtonContainerStyles.cssText)\n    const digest = await crypto.subtle.digest('SHA-256', bytes)\n    const hex = [...new Uint8Array(digest)].map(b => b.toString(16).padStart(2, '0')).join('')\n    expect(hex).to.equal('bcab002afc1a4521cd7da312cacba2bcd594cfe0e3dcd6c1d62a388adfd25203')\n  })\n})\n"]}