@rak200/ui 0.2.13 → 0.2.15

package/README.md

@@ -86,9 +86,9 @@ components; `docs/` is what describes them.
 
 ## Status
 
-**v0.** Eleven components — `<ui-button>`, `<ui-field>`, `<ui-dialog>`, `<ui-input>`,
-`<ui-textarea>`, `<ui-checkbox>`, `<ui-switch>`, `<ui-select>`, `<ui-radio-group>`, `<ui-radio>`
-and `<ui-icon>` — the token layer
+**v0.** Thirteen components — `<ui-button>`, `<ui-card>`, `<ui-field>`, `<ui-dialog>`, `<ui-input>`,
+`<ui-textarea>`, `<ui-checkbox>`, `<ui-switch>`, `<ui-select>`, `<ui-radio-group>`, `<ui-radio>`,
+`<ui-tooltip>` and `<ui-icon>` — the token layer
 under them, and an adopted glyph set, built to the ecosystem's full quality bar rather than
 sketched: type-checked at the strictest available setting, formatted, tested in a real browser and
 **asserted against axe** for WCAG A/AA, 100% coverage and **100% mutation score**, scanned, and

package/dist/card.d.ts

@@ -0,0 +1,41 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * A container: a surface with a boundary, a corner and a lift.
+ *
+ * **Presentational, and deliberately not interactive.** A card that reacts to a click is a
+ * button or a link, and both already exist — here and in the platform. This element grows
+ * no `clickable` attribute, because the first thing such an attribute has to do is
+ * reimplement keyboard activation, the accessible name and the disabled semantics that
+ * `<button>` and `<a>` carry for free. `docs/card.md` sends a reader there rather than
+ * leaving them to find out.
+ *
+ * **It claims no role either.** There is no card element and no APG pattern for one, so
+ * the shadow root renders slots and nothing else: what a card *means* is the host's, and
+ * they say it by slotting a heading, or by writing `<article>` around this element when
+ * the content really is self-contained. A `role` invented here would be one every consumer
+ * inherits and none of them chose.
+ *
+ * **Three regions, ordered here rather than in the host's markup.** The slots are declared
+ * header, body, footer, so that is the order they render in whatever order the host wrote
+ * them — and an unfilled one costs nothing, because a `<slot>` is `display: contents` and
+ * contributes no box to lay out or to space.
+ *
+ * @example
+ * ```html
+ * <ui-card>
+ *   <h3 slot="header">Monthly plan</h3>
+ *   <p>Everything in the free tier, plus priority support.</p>
+ *   <div slot="footer"><ui-button>Choose</ui-button></div>
+ * </ui-card>
+ * ```
+ */
+export declare class UiCard extends LitElement {
+    static readonly styles: import("lit").CSSResult;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-card': UiCard;
+    }
+}
+//# sourceMappingURL=card.d.ts.map

package/dist/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../src/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAAa,MAAO,SAAQ,UAAU;IAClC,gBAAyB,MAAM,0BAwC7B;IAEO,MAAM,IAAI,cAAc;CAOpC;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,SAAS,EAAE,MAAM,CAAC;KACrB;CACJ"}

package/dist/card.js

@@ -0,0 +1,88 @@
+import { LitElement, css, html } from 'lit';
+import { reference } from './reference.js';
+/**
+ * A container: a surface with a boundary, a corner and a lift.
+ *
+ * **Presentational, and deliberately not interactive.** A card that reacts to a click is a
+ * button or a link, and both already exist — here and in the platform. This element grows
+ * no `clickable` attribute, because the first thing such an attribute has to do is
+ * reimplement keyboard activation, the accessible name and the disabled semantics that
+ * `<button>` and `<a>` carry for free. `docs/card.md` sends a reader there rather than
+ * leaving them to find out.
+ *
+ * **It claims no role either.** There is no card element and no APG pattern for one, so
+ * the shadow root renders slots and nothing else: what a card *means* is the host's, and
+ * they say it by slotting a heading, or by writing `<article>` around this element when
+ * the content really is self-contained. A `role` invented here would be one every consumer
+ * inherits and none of them chose.
+ *
+ * **Three regions, ordered here rather than in the host's markup.** The slots are declared
+ * header, body, footer, so that is the order they render in whatever order the host wrote
+ * them — and an unfilled one costs nothing, because a `<slot>` is `display: contents` and
+ * contributes no box to lay out or to space.
+ *
+ * @example
+ * ```html
+ * <ui-card>
+ *   <h3 slot="header">Monthly plan</h3>
+ *   <p>Everything in the free tier, plus priority support.</p>
+ *   <div slot="footer"><ui-button>Choose</ui-button></div>
+ * </ui-card>
+ * ```
+ */
+export class UiCard extends LitElement {
+    static { this.styles = css `
+        /* A column rather than a block, and the footer below is why: margin-block-start:
+           auto needs a flex line to push against. That is what makes a row of cards in a
+           grid line their footers up when the bodies are different lengths — the one thing
+           a footer slot buys that writing the element last does not.
+
+           The slots are left at their default display: contents, so the flex items are
+           the host's own elements. An empty region is then absent rather than
+           zero-height — gap never spaces a card that has no footer. */
+        :host {
+            display: flex;
+            flex-direction: column;
+            gap: calc(${reference('--ui-space')} * 2);
+            box-sizing: border-box;
+            padding: calc(${reference('--ui-space')} * 2);
+            font-family: ${reference('--ui-font')};
+            /* The pair, never half of it: a surface declared without the text colour that
+               was chosen against it inherits whatever the page set, and the contrast the
+               token layer measured stops holding at the one place it was measured for. */
+            color: ${reference('--ui-color-text')};
+            background: ${reference('--ui-color-surface')};
+            border: 1px solid ${reference('--ui-color-border')};
+            border-radius: ${reference('--ui-radius')};
+            /* The boundary and the shadow are one decision made twice, because each covers
+               where the other cannot. The shadow is what says *raised* on a light page and
+               nearly nothing on a dark one — it is black at a low alpha, and light-dark()
+               cannot carry a second value for it, since it takes colours and a shadow is
+               not one. The boundary is derived, so it mixes toward the text and is correct
+               in both schemes by construction. Drop either and the card loses its edge in
+               one scheme: measured, a bordered card on the dark surface is the only thing
+               separating it from the page behind it. */
+            box-shadow: ${reference('--ui-elevation-raised')};
+        }
+
+        /* Pushed to the bottom of whatever height the card ended up with. Written on the
+           slotted element rather than on a wrapper, because a wrapper would be a flex item
+           of its own — present, and therefore spaced by gap, even with nothing in it. */
+        slot[name='footer']::slotted(*) {
+            margin-block-start: auto;
+        }
+    `; }
+    render() {
+        return html `
+            <slot name="header"></slot>
+            <slot></slot>
+            <slot name="footer"></slot>
+        `;
+    }
+}
+// Stryker disable next-line StringLiteral: the registration runs once, at import, inside
+// the warm process Stryker switches mutants in — so by the time a mutant on this line is
+// active the element is already defined under the original name, and no test can observe
+// the change. Outside the runner's reach, not an equivalent mutant.
+customElements.define('ui-card', UiCard);
+//# sourceMappingURL=card.js.map

package/dist/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../src/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,OAAO,MAAO,SAAQ,UAAU;aACT,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;wBAYjB,SAAS,CAAC,YAAY,CAAC;;4BAEnB,SAAS,CAAC,YAAY,CAAC;2BACxB,SAAS,CAAC,WAAW,CAAC;;;;qBAI5B,SAAS,CAAC,iBAAiB,CAAC;0BACvB,SAAS,CAAC,oBAAoB,CAAC;gCACzB,SAAS,CAAC,mBAAmB,CAAC;6BACjC,SAAS,CAAC,aAAa,CAAC;;;;;;;;;0BAS3B,SAAS,CAAC,uBAAuB,CAAC;;;;;;;;;KASvD,CAAC;IAEO,MAAM;QACX,OAAO,IAAI,CAAA;;;;SAIV,CAAC;IACN,CAAC;;AAGL,yFAAyF;AACzF,yFAAyF;AACzF,yFAAyF;AACzF,oEAAoE;AACpE,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC"}

package/dist/field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../src/field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAMjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBAAa,OAAQ,SAAQ,UAAU;;IACnC,gBAAyB,MAAM,0BAuB7B;IAeO,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAK5B,YAAY,IAAI,IAAI;IAIpB,MAAM,IAAI,cAAc;CA0JpC;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,UAAU,EAAE,OAAO,CAAC;KACvB;CACJ"}
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../src/field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAMjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBAAa,OAAQ,SAAQ,UAAU;;IACnC,gBAAyB,MAAM,0BAuB7B;IAeO,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAK5B,YAAY,IAAI,IAAI;IAIpB,MAAM,IAAI,cAAc;CAmLpC;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,UAAU,EAAE,OAAO,CAAC;KACvB;CACJ"}

package/dist/field.js

@@ -154,7 +154,14 @@ export class UiField extends LitElement {
         // format requirement, which is exactly the error suggestion the user needs in order
         // to recover (WCAG 3.3.3) — dropping it at the moment it becomes useful is the
         // opposite of helping.
-        const described = [error, help].filter((id) => id !== undefined);
+        //
+        // And a description this field did not write survives all of it, which is the same
+        // courtesy the `id` above gets and for the same reason: something this element
+        // cannot see may have put it there. `<ui-tooltip>` is the first to do so, and it
+        // was measured being erased — not on the first association, which runs before the
+        // tooltip wires, but on the next one, when a re-render moves the help text and the
+        // list is rebuilt from what this field alone knows about.
+        const described = [error, help, ...this.#foreign(control, uid, [error, help])].filter((id) => id !== undefined);
         if (described.length > 0) {
             control.setAttribute('aria-describedby', described.join(' '));
         }
@@ -168,6 +175,20 @@ export class UiField extends LitElement {
             control.setAttribute('aria-invalid', 'true');
         }
     }
+    /**
+     * The ids already describing `control` that this field is not responsible for.
+     *
+     * Everything it could have written is excluded rather than remembered: the two ids it
+     * generates from `uid`, and whatever the help and error elements are called right now,
+     * which may be ids the host supplied. What is left belongs to somebody else and is
+     * carried forward in place rather than dropped.
+     */
+    #foreign(control, uid, mine) {
+        const written = new Set([...mine, `${uid}-help`, `${uid}-error`]);
+        return (control.getAttribute('aria-describedby') ?? '')
+            .split(' ')
+            .filter((id) => id !== '' && !written.has(id));
+    }
     /**
      * Gives the control its accessible name from whatever fills the label slot.
      *

package/dist/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sourceRoot":"","sources":["../src/field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,8DAA8D;AAC9D,IAAI,QAAQ,GAAG,CAAC,CAAC;AAEjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,OAAO,OAAQ,SAAQ,UAAU;aACV,WAAM,GAAG,GAAG,CAAA;;;2BAGd,SAAS,CAAC,WAAW,CAAC;;;;;;wBAMzB,SAAS,CAAC,YAAY,CAAC;;;;qBAI1B,SAAS,CAAC,iBAAiB,CAAC;;;;;;;qBAO5B,SAAS,CAAC,mBAAmB,CAAC;;;KAG9C,CAAC;IAEF,oFAAoF;IACpF,IAAI,CAAU;IAEd;;;;;OAKG;IACM,SAAS,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;QAC3C,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC,CAAC,CAAC;IAEM,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,mFAAmF;QACnF,8EAA8E;QAC9E,kDAAkD;QAClD,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1F,CAAC;IAEQ,oBAAoB;QACzB,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC;QAC5B,KAAK,CAAC,oBAAoB,EAAE,CAAC;IACjC,CAAC;IAEQ,YAAY;QACjB,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC;IAEQ,MAAM;QACX,OAAO,IAAI,CAAA;;;;;;;SAOV,CAAC;IACN,CAAC;IAED,4EAA4E;IAC5E,QAAQ,CAAC,IAAmB;QACxB,MAAM,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,mBAAmB,IAAI,IAAI,CAAC;QACvF,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAE3C,OAAO,KAAK,YAAY,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5D,CAAC;IAED;;;;;;;;;;;OAWG;IACH,QAAQ;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEpC,gFAAgF;QAChF,6EAA6E;QAC7E,gFAAgF;QAChF,6EAA6E;QAC7E,8BAA8B;QAC9B,IAAI,OAAO,EAAE,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC;YACzC,OAAO,OAAO,CAAC;QACnB,CAAC;QAED,OAAO,OAAO,EAAE,aAAa,CAAC,yBAAyB,CAAC,IAAI,OAAO,CAAC;IACxE,CAAC;IAED;;;;;OAKG;IACH,UAAU;QACN,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAEhC,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;YACxB,OAAO;QACX,CAAC;QAED,mFAAmF;QACnF,iFAAiF;QACjF,+EAA+E;QAC/E,kFAAkF;QAClF,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,KAAK,YAAY,MAAM,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;QAE7D,IAAI,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC;YACpB,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,UAAU,CAAC;QAClC,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC,CAAC;QAE5D,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,GAAG,GAAG,OAAO,CAAC,CAAC;QACnE,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC,CAAC;QAEtE,kFAAkF;QAClF,6EAA6E;QAC7E,EAAE;QACF,oFAAoF;QACpF,oFAAoF;QACpF,+EAA+E;QAC/E,uBAAuB;QACvB,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC;QAEjE,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACvB,OAAO,CAAC,YAAY,CAAC,kBAAkB,EAAE,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QAClE,CAAC;aAAM,CAAC;YACJ,OAAO,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;QAChD,CAAC;QAED,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACtB,OAAO,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;QAC5C,CAAC;aAAM,CAAC;YACJ,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;QACjD,CAAC;IACL,CAAC;IAED;;;;;;;;;;;;;;;;;;;OAmBG;IACH,KAAK,CAAC,OAAoB,EAAE,KAA8B,EAAE,UAAkB;QAC1E,IAAI,QAAQ,IAAI,OAAO,EAAE,CAAC;YACtB,IAAI,KAAK,YAAY,gBAAgB,EAAE,CAAC;gBACpC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC;YAC/B,CAAC;YAED,OAAO;QACX,CAAC;QAED,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACtB,OAAO,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC;YAE3C,OAAO;QACX,CAAC;QAED,IAAI,KAAK,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC;YAClB,KAAK,CAAC,EAAE,GAAG,UAAU,CAAC;QAC1B,CAAC;QAED,OAAO,CAAC,YAAY,CAAC,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;IACtD,CAAC;IAED;;;;OAIG;IACH,UAAU,CAAC,OAAgC,EAAE,UAAkB;QAC3D,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;YAC7D,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,IAAI,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC;YACpB,OAAO,CAAC,EAAE,GAAG,UAAU,CAAC;QAC5B,CAAC;QAED,OAAO,OAAO,CAAC,EAAE,CAAC;IACtB,CAAC;;AAGL,yFAAyF;AACzF,yFAAyF;AACzF,yFAAyF;AACzF,oEAAoE;AACpE,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC"}
+{"version":3,"file":"field.js","sourceRoot":"","sources":["../src/field.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { UiButton, type ButtonVariant } from './button.js';
+export { UiCard } from './card.js';
 export { UiCheckbox, UiSwitch } from './checkbox.js';
 export { UiDialog } from './dialog.js';
 export { UiField } from './field.js';
@@ -6,5 +7,6 @@ export { UiIcon, register } from './icon.js';
 export { UiInput, UiTextarea } from './input.js';
 export { UiRadio, UiRadioGroup, type RadioOrientation } from './radio.js';
 export { UiSelect } from './select.js';
+export { UiTooltip } from './tooltip.js';
 export { tokens, derivedTokens, defaults, formulas, darkScheme, tokenStyleSheet, type Token, type DerivedToken, } from './tokens.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,eAAe,EACf,KAAK,KAAK,EACV,KAAK,YAAY,GACpB,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,eAAe,EACf,KAAK,KAAK,EACV,KAAK,YAAY,GACpB,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -1,4 +1,5 @@
 export { UiButton } from './button.js';
+export { UiCard } from './card.js';
 export { UiCheckbox, UiSwitch } from './checkbox.js';
 export { UiDialog } from './dialog.js';
 export { UiField } from './field.js';
@@ -6,5 +7,6 @@ export { UiIcon, register } from './icon.js';
 export { UiInput, UiTextarea } from './input.js';
 export { UiRadio, UiRadioGroup } from './radio.js';
 export { UiSelect } from './select.js';
+export { UiTooltip } from './tooltip.js';
 export { tokens, derivedTokens, defaults, formulas, darkScheme, tokenStyleSheet, } from './tokens.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAyB,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,eAAe,GAGlB,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAyB,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,eAAe,GAGlB,MAAM,aAAa,CAAC"}

package/dist/tokens.d.ts

@@ -31,7 +31,7 @@
  * it does break is code that **enumerates** the set, an exhaustive `Record<Token, string>`
  * above all. The supported shape is the partial map, which is what a theme is anyway.
  */
-export declare const tokens: readonly ["--ui-color-accent", "--ui-color-accent-contrast", "--ui-color-surface", "--ui-color-text", "--ui-color-focus", "--ui-color-danger", "--ui-color-scrim", "--ui-radius", "--ui-space", "--ui-font", "--ui-duration-100", "--ui-easing-state", "--ui-easing-enter", "--ui-easing-exit", "--ui-icon-size", "--ui-icon-stroke"];
+export declare const tokens: readonly ["--ui-color-accent", "--ui-color-accent-contrast", "--ui-color-surface", "--ui-color-text", "--ui-color-focus", "--ui-color-danger", "--ui-color-scrim", "--ui-radius", "--ui-space", "--ui-font", "--ui-duration-100", "--ui-easing-state", "--ui-easing-enter", "--ui-easing-exit", "--ui-icon-size", "--ui-icon-stroke", "--ui-elevation-100"];
 /** A CSS custom property this package defines and gives a default. */
 export type Token = (typeof tokens)[number];
 /**
@@ -44,7 +44,7 @@ export type Token = (typeof tokens)[number];
  * what it buys is an override surface a host can hold in their head: change the accent and
  * the hover and pressed colours follow, rather than being one more name each.
  */
-export declare const derivedTokens: readonly ["--ui-duration-state", "--ui-color-border", "--ui-color-text-muted", "--ui-color-hover", "--ui-color-pressed", "--ui-color-accent-hover", "--ui-color-accent-pressed"];
+export declare const derivedTokens: readonly ["--ui-duration-state", "--ui-color-border", "--ui-color-text-muted", "--ui-color-hover", "--ui-color-pressed", "--ui-color-accent-hover", "--ui-color-accent-pressed", "--ui-elevation-raised"];
 /** A CSS custom property this package computes rather than declares. */
 export type DerivedToken = (typeof derivedTokens)[number];
 /**

package/dist/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM,uUA2DT,CAAC;AAEX,sEAAsE;AACtE,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5C;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,kLAmBhB,CAAC;AAEX,wEAAwE;AACxE,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1D;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAyCpD,CAAC;AAqBF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAoB3D,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAW/D,CAAC;AAKF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAsBxC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM,6VA4ET,CAAC;AAEX,sEAAsE;AACtE,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5C;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,2MAwBhB,CAAC;AAEX,wEAAwE;AACxE,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1D;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CA+CpD,CAAC;AAqBF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAwB3D,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAW/D,CAAC;AAKF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAsBxC"}

package/dist/tokens.js

@@ -90,6 +90,23 @@ export const tokens = [
     // size, and 2 is the weight the adopted set is drawn at.
     '--ui-icon-size',
     '--ui-icon-stroke',
+    // Elevation, arriving with `ui-card` — the category `ROADMAP.md` said would, after the
+    // first overlay arrived and brought none.
+    //
+    // A step in a scale, named by an ordinal with gaps, for the reason the duration scale
+    // gives above: elevation is *relative* by nature — a card sits above the page, a menu
+    // above the card — so the names have to be able to grow between each other. No
+    // component reads this one; they read `--ui-elevation-raised`, which points in here.
+    // No second step comes with it: a tooltip and a menu are the components that would
+    // judge one, and neither is written.
+    //
+    // **It carries no dark value, and cannot.** `darkScheme` is emitted through
+    // `light-dark()`, which takes colours — and a shadow is not a colour. So this is one
+    // value in both schemes, and on a dark page it does almost nothing: black on charcoal
+    // is black. What separates a raised surface there is the *boundary*, which is derived
+    // and therefore already scheme-correct — which is why `src/card.ts` draws both and
+    // says so beside them.
+    '--ui-elevation-100',
 ];
 /**
  * The roles computed from the grounds rather than declared beside them.
@@ -120,6 +137,11 @@ export const derivedTokens = [
     '--ui-color-pressed',
     '--ui-color-accent-hover',
     '--ui-color-accent-pressed',
+    // The purpose the elevation scale is read through, arriving with `ui-card`. `raised`
+    // is a role rather than a component: a card is the first surface lifted off the page
+    // and will not be the last, and the name a host retunes should not be the name of
+    // whichever component happened to need it first.
+    '--ui-elevation-raised',
 ];
 /**
  * The default value of every ground token, applied at `:root` by {@link tokenStyleSheet}.
@@ -168,6 +190,12 @@ export const defaults = {
     '--ui-easing-exit': 'ease-in',
     '--ui-icon-size': '1.25em',
     '--ui-icon-stroke': '2',
+    // Two layers rather than one, which is what makes a shadow read as *lift* instead of
+    // as a smudge: a tight, nearly opaque one draws the contact edge, and a wider, softer
+    // one is the cast. Both are black at a low alpha, so the shadow darkens whatever it
+    // falls on rather than tinting it — a coloured shadow is a decision this layer would
+    // have to defend at every hue a host might set.
+    '--ui-elevation-100': '0 1px 2px -1px rgb(0 0 0 / 0.1), 0 2px 6px -1px rgb(0 0 0 / 0.1)',
 };
 /**
  * A ground as it is written inside a formula: the name, with its own default behind it.
@@ -232,6 +260,10 @@ export const formulas = {
     // is 4.52 in light, a rounding error from failing, and a default nobody could then
     // retune without breaking a floor they were not thinking about.
     '--ui-color-text-muted': mix('--ui-color-text', 65, '--ui-color-surface'),
+    // A plain reference, like the duration purpose above: the scale is where the value
+    // lives, and a host who wants flatter cards moves the role rather than reverse
+    // engineering which step a card happens to read.
+    '--ui-elevation-raised': ground('--ui-elevation-100'),
 };
 /**
  * The grounds whose value differs when the page is rendered dark.

package/dist/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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"}

package/dist/tooltip.d.ts

@@ -0,0 +1,69 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Supplementary text on hover and on keyboard focus.
+ *
+ * **Everything is slotted**, the way `<ui-field>` slots everything and for the same
+ * measured reason: an IDREF does not cross a shadow boundary, so a tip rendered in here
+ * could not be the target of the trigger's `aria-describedby`. The trigger is the child
+ * with no `slot`; the tip is `slot="tip"`.
+ *
+ * ## What the platform does, and what is left
+ *
+ * The tip is a **popover**, which buys the two things a hand-rolled overlay gets wrong:
+ * it is promoted to the top layer, so it escapes `overflow: hidden` and every stacking
+ * context above it — measured — and it needs no `z-index`, which is why the second overlay
+ * in this package brings no layering category either.
+ *
+ * `popover="manual"` rather than `auto`, and the difference is the point: an `auto`
+ * popover light-dismisses, and dismissing one closes the others — so a tooltip appearing
+ * over an open menu would close the menu. What `manual` costs is Escape, which it does not
+ * handle: measured, a manual popover stays open on Escape. So this element wires it, which
+ * WCAG 2.2's **1.4.13 Content on Hover or Focus** requires anyway.
+ *
+ * ## Why the placement is written here
+ *
+ * The issue asked whether a clipping tooltip is solved with CSS anchor positioning or with
+ * a dependency. Measured in this engine, anchor positioning is **entirely present** —
+ * `anchor-name`, `position-anchor`, `position-area` and `position-try-fallbacks` all
+ * parse, and an anchored popover really is placed against its anchor rather than merely
+ * accepting the rule. It is still not adopted, and the reason is the one `docs/select.md`
+ * gives about `appearance: base-select`: a feature one engine has makes a kit look like
+ * two kits.
+ *
+ * **Here that is not a cosmetic difference but a broken component.** Measured: a popover
+ * whose anchor rules are ignored does not fall back to somewhere near the trigger — it is
+ * `position: fixed` at `inset: 0`, which is the corner of the screen. And the flip at a
+ * viewport edge is `position-try-fallbacks`, so an engine without it needs the script
+ * anyway. Adopting the CSS would mean writing the placement *and* a second code path for
+ * it, which is two answers to one problem.
+ *
+ * A positioning dependency was the other option the issue named. It solves scroll
+ * containers, virtual anchors and continuous auto-update, none of which a tooltip against
+ * a real element needs — and it would be this package's second runtime dependency, where
+ * RFC 0016's adoption was a *behaviour* library and not a layout one.
+ *
+ * So the placement is thirty lines here, measured at the edges by a suite that runs in a
+ * real browser. When anchor positioning is available broadly it replaces them and the
+ * tests stay: they assert where the tip lands, not who put it there.
+ *
+ * @example
+ * ```html
+ * <ui-tooltip>
+ *   <button type="button">Save</button>
+ *   <span slot="tip">Saves without closing the dialog.</span>
+ * </ui-tooltip>
+ * ```
+ */
+export declare class UiTooltip extends LitElement {
+    #private;
+    static readonly styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-tooltip': UiTooltip;
+    }
+}
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../src/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AASjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,qBAAa,SAAU,SAAQ,UAAU;;IACrC,gBAAyB,MAAM,0BAkD7B;IAiDO,iBAAiB,IAAI,IAAI;IAqBzB,oBAAoB,IAAI,IAAI;IAU5B,MAAM,IAAI,cAAc;CAqKpC;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,YAAY,EAAE,SAAS,CAAC;KAC3B;CACJ"}

package/dist/tooltip.js

@@ -0,0 +1,317 @@
+import { LitElement, css, html } from 'lit';
+import { reference } from './reference.js';
+/** Distinguishes one tooltip's generated id from another's. */
+let sequence = 0;
+/** How far the tip sits from the trigger, and which way the script placed it. */
+const side = 'data-side';
+/**
+ * Supplementary text on hover and on keyboard focus.
+ *
+ * **Everything is slotted**, the way `<ui-field>` slots everything and for the same
+ * measured reason: an IDREF does not cross a shadow boundary, so a tip rendered in here
+ * could not be the target of the trigger's `aria-describedby`. The trigger is the child
+ * with no `slot`; the tip is `slot="tip"`.
+ *
+ * ## What the platform does, and what is left
+ *
+ * The tip is a **popover**, which buys the two things a hand-rolled overlay gets wrong:
+ * it is promoted to the top layer, so it escapes `overflow: hidden` and every stacking
+ * context above it — measured — and it needs no `z-index`, which is why the second overlay
+ * in this package brings no layering category either.
+ *
+ * `popover="manual"` rather than `auto`, and the difference is the point: an `auto`
+ * popover light-dismisses, and dismissing one closes the others — so a tooltip appearing
+ * over an open menu would close the menu. What `manual` costs is Escape, which it does not
+ * handle: measured, a manual popover stays open on Escape. So this element wires it, which
+ * WCAG 2.2's **1.4.13 Content on Hover or Focus** requires anyway.
+ *
+ * ## Why the placement is written here
+ *
+ * The issue asked whether a clipping tooltip is solved with CSS anchor positioning or with
+ * a dependency. Measured in this engine, anchor positioning is **entirely present** —
+ * `anchor-name`, `position-anchor`, `position-area` and `position-try-fallbacks` all
+ * parse, and an anchored popover really is placed against its anchor rather than merely
+ * accepting the rule. It is still not adopted, and the reason is the one `docs/select.md`
+ * gives about `appearance: base-select`: a feature one engine has makes a kit look like
+ * two kits.
+ *
+ * **Here that is not a cosmetic difference but a broken component.** Measured: a popover
+ * whose anchor rules are ignored does not fall back to somewhere near the trigger — it is
+ * `position: fixed` at `inset: 0`, which is the corner of the screen. And the flip at a
+ * viewport edge is `position-try-fallbacks`, so an engine without it needs the script
+ * anyway. Adopting the CSS would mean writing the placement *and* a second code path for
+ * it, which is two answers to one problem.
+ *
+ * A positioning dependency was the other option the issue named. It solves scroll
+ * containers, virtual anchors and continuous auto-update, none of which a tooltip against
+ * a real element needs — and it would be this package's second runtime dependency, where
+ * RFC 0016's adoption was a *behaviour* library and not a layout one.
+ *
+ * So the placement is thirty lines here, measured at the edges by a suite that runs in a
+ * real browser. When anchor positioning is available broadly it replaces them and the
+ * tests stay: they assert where the tip lands, not who put it there.
+ *
+ * @example
+ * ```html
+ * <ui-tooltip>
+ *   <button type="button">Save</button>
+ *   <span slot="tip">Saves without closing the dialog.</span>
+ * </ui-tooltip>
+ * ```
+ */
+export class UiTooltip extends LitElement {
+    static { this.styles = css `
+        /* No box of its own: a wrapper that laid something out would move the trigger it
+           wraps, and every call site would have to undo it. */
+        :host {
+            display: contents;
+        }
+
+        /* The tip is the host's own element, reached through ::slotted — the shape every
+           component in this kit has. position: fixed is what the popover already is;
+           it is restated because the script writes inset-block-start and
+           inset-inline-start against the viewport, and a reader of those two lines
+           should not have to know which stylesheet made them mean that.
+
+           max-content up to a ceiling: a tip is a phrase, and a phrase that wraps at the
+           width of whatever it happens to sit near is unreadable. The ceiling is in the
+           space token so it scales with everything else a host retunes. */
+        slot[name='tip']::slotted(*) {
+            position: fixed;
+            margin: 0;
+            inline-size: max-content;
+            max-inline-size: calc(${reference('--ui-space')} * 40);
+            padding: calc(${reference('--ui-space')} / 2) ${reference('--ui-space')};
+            font-family: ${reference('--ui-font')};
+            font-size: 0.875em;
+            /* The pair, never half of it: a surface without the colour chosen against it
+               inherits whatever the page set, and the contrast measured for that pair
+               stops holding. */
+            color: ${reference('--ui-color-text')};
+            background: ${reference('--ui-color-surface')};
+            border: 1px solid ${reference('--ui-color-border')};
+            border-radius: ${reference('--ui-radius')};
+            box-shadow: ${reference('--ui-elevation-raised')};
+        }
+
+        /* The gap between the tip and its trigger, in CSS because it is a token and the
+           script has no way to resolve one: a custom property reads back as it was
+           written, so 0.5rem would arrive at a function that needs pixels.
+
+           It is deliberately small. WCAG 2.2's 1.4.13 asks that a pointer be able to
+           travel onto the tip without it vanishing, and it travels across this gap — the
+           tip stays open because it is a DOM child of this element, so entering it never
+           leaves the host, but only if the pointer does not leave through the gap on the
+           way. */
+        slot[name='tip']::slotted([data-side='block-start']) {
+            translate: 0 calc(${reference('--ui-space')} / -2);
+        }
+
+        slot[name='tip']::slotted([data-side='block-end']) {
+            translate: 0 calc(${reference('--ui-space')} / 2);
+        }
+    `; }
+    /** Whether the tip is currently shown, which decides what the listeners cost. */
+    #shown = false;
+    /**
+     * What is watching while the tip is open, dropped in one call when it closes.
+     *
+     * These three are added on show rather than on connection because two of them are
+     * per-frame: a page holding fifty tooltips would run fifty no-op scroll handlers for
+     * every frame of every scroll, and at most one tooltip is ever open.
+     *
+     * Built here rather than on the first show so it is never absent — the reason
+     * `src/field.ts` builds its observer the same way: a close that has to ask whether the
+     * controller exists is a branch no test can reach, because nothing closes what was
+     * never opened.
+     */
+    #watching = new AbortController();
+    /** Re-places the tip under anything that moves the trigger while it is open. */
+    #reflow = () => {
+        this.#place();
+    };
+    /**
+     * Dismisses on Escape, which is 1.4.13's first requirement and `manual`'s one gap.
+     *
+     * On the document rather than on this element: a tip shown by the pointer leaves the
+     * focus wherever it was, so a key listener bound here would never hear the key that is
+     * supposed to dismiss it.
+     */
+    #dismiss = (event) => {
+        if (event.key === 'Escape') {
+            this.#hide();
+        }
+    };
+    /**
+     * Takes every listener off at once, and the reason is not brevity.
+     *
+     * Removing them one by one needs the event name repeated at both ends, and half of
+     * those repetitions cannot be checked: a leaked `pointerenter` is caught the moment it
+     * fires, because it opens a popover that is no longer in a document and that throws —
+     * but a leaked `pointerleave` reaches `#hide`, which returns at its own guard, and
+     * nothing anywhere can tell it happened. One `abort()` is one thing to get right, and
+     * a leak of it is observable through the half that is.
+     */
+    #listeners = new AbortController();
+    connectedCallback() {
+        super.connectedCallback();
+        // A fresh one per connection: an aborted signal stays aborted, so a tooltip a
+        // framework moves in the tree would come back deaf.
+        this.#listeners = new AbortController();
+        // One options object for the four, and that is the same argument as the controller
+        // itself: written per call, each `{ signal }` is its own thing to get right, and
+        // half of them cannot be checked — a leaked `pointerleave` reaches `#hide`, which
+        // returns at its own guard, and nothing can tell. Shared, all four ride on the one
+        // that does report: a leaked `pointerenter` opens a popover that is no longer in a
+        // document, which throws.
+        const watched = { signal: this.#listeners.signal };
+        this.addEventListener('pointerenter', this.#onPointer, watched);
+        this.addEventListener('pointerleave', this.#onLeave, watched);
+        this.addEventListener('focusin', this.#onFocus, watched);
+        this.addEventListener('focusout', this.#onLeave, watched);
+    }
+    disconnectedCallback() {
+        // Removed while shown, the tip takes the window listeners with it. A tooltip that
+        // a framework unmounted mid-hover would otherwise keep re-placing an element that
+        // is no longer in a document.
+        this.#hide();
+        this.#listeners.abort();
+        super.disconnectedCallback();
+    }
+    render() {
+        return html `
+            <slot></slot>
+            <slot name="tip" @slotchange=${this.#associate}></slot>
+        `;
+    }
+    /** The element the tip is about: the one child carrying no `slot` attribute. */
+    #trigger() {
+        const found = this.querySelector(':scope > :not([slot])');
+        return found instanceof HTMLElement ? found : undefined;
+    }
+    /** The tip itself, which is the host's own element and stays in their tree. */
+    #tip() {
+        const found = this.querySelector(":scope > [slot='tip']");
+        return found instanceof HTMLElement ? found : undefined;
+    }
+    /**
+     * Makes the tip a popover, names it, and points the trigger at it.
+     *
+     * On `slotchange` as well as at first render, because a framework re-render replaces
+     * the element rather than mutating it — and a tip that is only wired the first time is
+     * one that stops being announced at a moment nothing reports.
+     *
+     * A `role` or an `id` the host wrote is never overwritten, the same courtesy
+     * `<ui-field>` and `<ui-switch>` extend. `aria-describedby` is **added to** rather than
+     * replaced: the trigger may already be described by a field's help text, and a
+     * description that silently replaced another is the failure nobody sees.
+     */
+    #associate = () => {
+        const trigger = this.#trigger();
+        const tip = this.#tip();
+        if (trigger === undefined || tip === undefined) {
+            return;
+        }
+        if (tip.id === '') {
+            // Stryker disable next-line UpdateOperator: two tooltips on one page must get
+            // different ids, and a decrementing counter delivers that as well as an
+            // incrementing one. No input distinguishes them — an equivalent mutant, the
+            // same one `src/field.ts` carries beside its own counter.
+            tip.id = `ui-tooltip-${String(++sequence)}`;
+        }
+        if (!tip.hasAttribute('role')) {
+            tip.setAttribute('role', 'tooltip');
+        }
+        tip.setAttribute('popover', 'manual');
+        const described = (trigger.getAttribute('aria-describedby') ?? '')
+            .split(' ')
+            .filter((id) => id !== '');
+        if (!described.includes(tip.id)) {
+            trigger.setAttribute('aria-describedby', [...described, tip.id].join(' '));
+        }
+    };
+    /**
+     * Shows on the pointer, except the pointer a touch screen reports.
+     *
+     * There is no hover on a touch screen, so a tap fires `pointerenter` and then focus —
+     * and showing on both means the tip arrives, is dismissed by the tap that follows, and
+     * arrives again. Focus is the one that survives, so this defers to it.
+     */
+    #onPointer = (event) => {
+        if (event.pointerType !== 'touch') {
+            this.#show();
+        }
+    };
+    #onFocus = () => {
+        this.#show();
+    };
+    #onLeave = () => {
+        this.#hide();
+    };
+    /** Opens the tip and starts watching whatever can move its trigger. */
+    #show() {
+        const tip = this.#tip();
+        if (tip === undefined || this.#shown) {
+            return;
+        }
+        this.#shown = true;
+        tip.showPopover();
+        this.#place();
+        this.#watching = new AbortController();
+        // Shared for the same reason the four above are, and it pays off in the same
+        // direction: a leaked `keydown` is invisible — every later Escape returns at
+        // `#hide`'s guard — while a leaked `resize` re-places a tip that is not on screen,
+        // which a test reads straight off the written inset.
+        const watched = { signal: this.#watching.signal };
+        // Capturing, because the thing that scrolls is rarely the window: a scroll inside
+        // any ancestor moves the trigger and no event reaches the window from it.
+        //
+        // Not `passive`, and its absence is deliberate rather than an omission: `scroll` is
+        // not cancelable, so the flag changes nothing a test could observe — and an option
+        // no input can distinguish is one the mutation floor has to be told to ignore. The
+        // cheaper answer is not to write it.
+        window.addEventListener('scroll', this.#reflow, { capture: true, ...watched });
+        window.addEventListener('resize', this.#reflow, watched);
+        document.addEventListener('keydown', this.#dismiss, watched);
+    }
+    /** Closes the tip and stops watching. */
+    #hide() {
+        if (!this.#shown) {
+            return;
+        }
+        this.#shown = false;
+        this.#tip()?.hidePopover();
+        this.#watching.abort();
+    }
+    /**
+     * Puts the tip above its trigger, below it when there is no room, and inside the
+     * viewport either way.
+     *
+     * Read rather than assumed: the tip's own box is measured after it is shown, because
+     * its height depends on how its text wrapped at this width in this font — a number
+     * this file cannot know and must not guess.
+     */
+    #place() {
+        const trigger = this.#trigger();
+        const tip = this.#tip();
+        if (trigger === undefined || tip === undefined) {
+            return;
+        }
+        const anchor = trigger.getBoundingClientRect();
+        const box = tip.getBoundingClientRect();
+        const above = anchor.top >= box.height;
+        tip.setAttribute(side, above ? 'block-start' : 'block-end');
+        tip.style.insetBlockStart = `${String(above ? anchor.top - box.height : anchor.bottom)}px`;
+        // Centred on the trigger, then pulled back inside the viewport — in that order,
+        // because a tip centred on a trigger near the edge is a tip half off the screen.
+        // `Math.max` last so a tip wider than the viewport starts at the leading edge
+        // rather than at a negative one.
+        tip.style.insetInlineStart = `${String(Math.max(0, Math.min(anchor.left + anchor.width / 2 - box.width / 2, document.documentElement.clientWidth - box.width)))}px`;
+    }
+}
+// Stryker disable next-line StringLiteral: the registration runs once, at import, inside
+// the warm process Stryker switches mutants in — so by the time a mutant on this line is
+// active the element is already defined under the original name, and no test can observe
+// the change. Outside the runner's reach, not an equivalent mutant.
+customElements.define('ui-tooltip', UiTooltip);
+//# sourceMappingURL=tooltip.js.map

package/dist/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../src/tooltip.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rak200/ui",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "description": "Host-agnostic custom-element UI components for the rak200 ecosystem",
   "license": "MIT",
   "author": "rak200 <rak.ricardo@windowslive.com>",