@glimstone/core 4.0.0 → 4.1.0

package/README.md

@@ -22,6 +22,15 @@ npm install @glimstone/core
   select's list model, the Info tile's version links and update check, the
   README button's classes, where a bubble goes, a dialog's keys and the toast
   queue.
+- What windows and menus share: `windowFoot` adds the way out, `stackWindow`
+  gives Escape and Tab to the window in front, and `menu.ts` holds the menu
+  model with `tidyMenu`, `menuRowView`, `placeMenu`, `menuMove`,
+  `focusFirstMenuRow` and `claimMenu`. `menuIsOpen` and `windowIsOpen` tell an app's own key handler
+  to stand back.
+- What fields and bars share: `meterView` and `progressView` for a Meter and a
+  ProgressBar, `copyText` with its fallback for plain http, and for the
+  ColorPicker `floatColorPicker`, `placeColorPicker` and `nearestColorName`,
+  which finds the closest name in OKLab in a list such as `COLOR_NAMES_DE`.
 - What runs without a framework: `mountSelect`, `wireTooltips` with
   `infoIcon`, `openColorPickerPopover`, `attachNumberSteppers`,
   `enableSelectScroll` and `flagEmoji`.

package/dist/clipboard.d.ts

@@ -0,0 +1,4 @@
+/** How long a copy button says it copied before it reads Copy again, in ms. */
+export declare const COPIED_MS = 1600;
+/** Puts `text` on the clipboard. Resolves false when the browser refused both ways. */
+export declare function copyText(text: string): Promise<boolean>;

package/dist/clipboard.js

@@ -0,0 +1,30 @@
+// Copying a value for a CopyField, or for any button that copies. The
+// Clipboard API exists only in a secure context, and a self-hosted app is
+// often opened over plain http on the local network, so a hidden text area
+// and execCommand stand in there.
+/** How long a copy button says it copied before it reads Copy again, in ms. */
+export const COPIED_MS = 1600;
+/** Puts `text` on the clipboard. Resolves false when the browser refused both ways. */
+export async function copyText(text) {
+    if (window.isSecureContext && navigator.clipboard) {
+        try {
+            await navigator.clipboard.writeText(text);
+            return true;
+        }
+        catch {
+            // A denied permission falls through to the old way, which needs none.
+        }
+    }
+    const area = document.createElement("textarea");
+    area.value = text;
+    area.setAttribute("readonly", "");
+    area.style.position = "fixed";
+    area.style.opacity = "0";
+    const back = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    document.body.appendChild(area);
+    area.select();
+    const done = document.execCommand("copy");
+    area.remove();
+    back?.focus();
+    return done;
+}

package/dist/colorNames.d.ts

@@ -0,0 +1,10 @@
+/** A colour's name and the hex value that stands for it. */
+export type ColorName = readonly [name: string, hex: string];
+/** About ninety German colour names, from white through the greys, reds, yellows, greens and blues to the browns. */
+export declare const COLOR_NAMES_DE: readonly ColorName[];
+type Lab = readonly [number, number, number];
+/** A `#rrggbb` colour in OKLab, as lightness and the two opponent axes. */
+export declare function oklab(hex: string): Lab;
+/** The name in `names` that looks closest to `hex`, or null for an empty list or a value that is no hex colour. */
+export declare function nearestColorName(hex: string, names?: readonly ColorName[]): string | null;
+export {};

package/dist/colorNames.js

@@ -0,0 +1,61 @@
+// The name a picked colour proposes, such as "Petrol" for #1b6b73. The nearest
+// entry wins by distance in OKLab, which tracks how far apart two colours look
+// far better than RGB or HSV, where a step in blue reads smaller than the same
+// step in green.
+/** About ninety German colour names, from white through the greys, reds, yellows, greens and blues to the browns. */
+export const COLOR_NAMES_DE = [
+    ["Weiß", "#f7f7f5"], ["Elfenbein", "#fffff0"], ["Creme", "#f5ecd0"], ["Champagner", "#f1ddb2"], ["Beige", "#d9c8a9"], ["Sand", "#c8b48a"],
+    ["Hellgrau", "#c8c8c8"], ["Silber", "#b4b8bc"], ["Grau", "#8a8a8a"], ["Steingrau", "#787366"], ["Schiefer", "#5a6470"], ["Anthrazit", "#383e42"], ["Schwarz", "#141414"],
+    ["Rot", "#e53935"], ["Karmin", "#c3002f"], ["Kirschrot", "#b5122e"], ["Rubin", "#9b111e"], ["Weinrot", "#7b1f2e"], ["Bordeaux", "#5e1224"],
+    ["Ziegelrot", "#b5452c"], ["Rostrot", "#8f3b1b"], ["Koralle", "#ff7f61"], ["Lachs", "#fa8c73"], ["Altrosa", "#c08081"], ["Rosa", "#f4a6c0"],
+    ["Pink", "#ff4fa3"], ["Magenta", "#d6008f"], ["Himbeere", "#c51f5d"],
+    ["Orange", "#ff8a1f"], ["Apricot", "#fbb57c"], ["Pfirsich", "#ffcba4"], ["Kupfer", "#b87333"], ["Terrakotta", "#c4622d"], ["Bernstein", "#ffb000"],
+    ["Ocker", "#cc9a2e"], ["Senf", "#d2a91f"], ["Gold", "#d4af37"], ["Gelb", "#f7d417"], ["Zitronengelb", "#fff44f"], ["Vanille", "#f3e5ab"],
+    ["Limette", "#a6d608"], ["Gelbgrün", "#9acd32"], ["Maigrün", "#4caf50"], ["Grün", "#2e9e4f"], ["Grasgrün", "#5aa832"], ["Smaragd", "#079b6b"],
+    ["Tannengrün", "#1e4d36"], ["Olivgrün", "#6b7a2a"], ["Oliv", "#808000"], ["Khaki", "#b5a86a"], ["Salbei", "#9caf88"], ["Mint", "#98e2c6"], ["Pistazie", "#b6d39a"],
+    ["Türkis", "#1fc0b4"], ["Aquamarin", "#6fd6c8"], ["Petrol", "#1b6b73"], ["Cyan", "#18c3e6"], ["Himmelblau", "#6ec3f2"], ["Hellblau", "#a7d3f5"],
+    ["Eisblau", "#cfe8f7"], ["Azurblau", "#2a8ff7"], ["Blau", "#1e6fe0"], ["Königsblau", "#2340b5"], ["Stahlblau", "#4682b4"], ["Taubenblau", "#7d93a8"],
+    ["Jeansblau", "#4a6a94"], ["Marine", "#1b2a5a"], ["Nachtblau", "#0f1b3d"], ["Indigo", "#3f3fb5"],
+    ["Lavendel", "#b7a5e3"], ["Flieder", "#c8a2d6"], ["Violett", "#7f3fbf"], ["Lila", "#9b59d0"], ["Purpur", "#80207a"], ["Pflaume", "#6e2a5a"],
+    ["Aubergine", "#4b1f3f"], ["Mauve", "#b784a7"],
+    ["Braun", "#7b4a2a"], ["Schokobraun", "#4e2c1c"], ["Kaffee", "#6f4e37"], ["Haselnuss", "#a67b5b"], ["Karamell", "#c68e4f"], ["Zimt", "#a5603a"], ["Taupe", "#8b7d6b"],
+];
+/** A `#rrggbb` colour in OKLab, as lightness and the two opponent axes. */
+export function oklab(hex) {
+    const n = parseInt(hex.replace(/^#/, ""), 16);
+    const [r, g, b] = [(n >> 16) & 255, (n >> 8) & 255, n & 255].map((v) => {
+        const c = v / 255;
+        return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+    });
+    const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+    const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+    const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+    return [
+        0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+        1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+        0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
+    ];
+}
+// A picker asks on every step of a drag, so each list is converted once.
+const labs = new WeakMap();
+/** The name in `names` that looks closest to `hex`, or null for an empty list or a value that is no hex colour. */
+export function nearestColorName(hex, names = COLOR_NAMES_DE) {
+    if (!/^#?[0-9a-f]{6}$/i.test(hex) || names.length === 0)
+        return null;
+    let table = labs.get(names);
+    if (!table) {
+        table = names.map(([, h]) => oklab(h));
+        labs.set(names, table);
+    }
+    const [L, A, B] = oklab(hex);
+    let best = 0;
+    let bestDistance = Infinity;
+    table.forEach(([l, a, b], i) => {
+        const d = (L - l) ** 2 + (A - a) ** 2 + (B - b) ** 2;
+        if (d < bestDistance) {
+            bestDistance = d;
+            best = i;
+        }
+    });
+    return names[best][0];
+}

package/dist/colorPicker.d.ts

@@ -5,13 +5,68 @@ export interface ColorPicker {
     setValue: (hex: string) => void;
     /** The picker's current value as a 6-digit lowercase hex string. */
     getValue: () => string;
+    /** Moves the focus to the square, where the arrow keys move the handle. */
+    focus: () => void;
 }
+export interface ColorPickerText {
+    /** The square's accessible name. */
+    area: string;
+    /** The hue bar's accessible name. */
+    hue: string;
+}
+/** The words of the ColorPicker components: the widget's two names, the hex field's and Apply. */
+export interface ColorPickerPanelText extends ColorPickerText {
+    hex: string;
+    apply: string;
+}
+export declare const COLOR_PICKER_TEXT: ColorPickerPanelText;
+export interface Hsv {
+    h: number;
+    s: number;
+    v: number;
+}
+/** A `#rrggbb` value as hue in degrees and saturation and value from 0 to 1, or null if it is no hex colour. */
+export declare function hexToHsv(hex: string): Hsv | null;
+/** The lowercase `#rrggbb` value of a hue, saturation and value. */
+export declare function hsvToHex(h: number, s: number, v: number): string;
+/** Accepts "2f6feb" or "#2F6FEB" and returns "#rrggbb" lowercase, or null if invalid. */
+export declare function normalizeHex(value: string): string | null;
 /**
  * Builds an always-visible saturation/value square and hue bar. `onChange`
- * fires with a 6-digit lowercase hex string on every mouse or touch drag
- * update; a caller that writes to disk should debounce it.
+ * fires with a 6-digit lowercase hex string on every step of a drag with
+ * mouse, pen or finger and on every arrow key; a caller that writes to disk
+ * should debounce it.
+ */
+export declare function colorPicker(initialHex: string, onChange: (hex: string) => void, options?: {
+    text?: Partial<ColorPickerText>;
+}): ColorPicker;
+interface Box {
+    width: number;
+    height: number;
+}
+/**
+ * Where a picker panel goes beside its trigger: below it when it fits, above
+ * it otherwise, and always 8px inside the window.
+ */
+export declare function placeColorPicker(trigger: {
+    left: number;
+    top: number;
+    bottom: number;
+}, panel: Box, view: Box): {
+    left: number;
+    top: number;
+};
+/** The size of the window without its scroll bars, for placing a panel in it. */
+export declare function viewportSize(): Box;
+/**
+ * Lets a ColorPicker panel float beside the control that opened it. It is the
+ * document's one open menu, so Escape and a click beside it close the picker
+ * before a window under it, and opening a menu closes the picker. Tab stays
+ * inside the panel, and a scroll or resize closes it, since a fixed panel
+ * loses its anchor. `close` hears whether Escape closed it; the focus is then
+ * back on the anchor. Returns the cleanup.
  */
-export declare function colorPicker(initialHex: string, onChange: (hex: string) => void): ColorPicker;
+export declare function floatColorPicker(panel: HTMLElement, anchor: HTMLElement, close: (byEscape: boolean) => void): () => void;
 export interface ColorPickerPopoverHandle {
     /** Closes the popover; an outside click, Escape, scroll or resize also does. */
     close: () => void;
@@ -23,3 +78,4 @@ export interface ColorPickerPopoverHandle {
  * already open.
  */
 export declare function openColorPickerPopover(trigger: HTMLElement, initialHex: string, onChange: (hex: string) => void, onClose?: () => void): ColorPickerPopoverHandle;
+export {};

package/dist/colorPicker.js

@@ -2,11 +2,22 @@
 // saturation/value square and a hue bar drawn in the page's own DOM.
 // `colorPicker()` returns the bare widget; `openColorPickerPopover()` wraps it
 // in a panel anchored to a trigger, the default for a compact settings card.
+// The ColorPicker components of React and Vue mount the same widget and add the
+// preview, the name and Apply around it.
 //
 // A native `<input type="color">` can open the OS picker in a separate window,
 // outside the page, where no Playwright check can reach it either.
-function hexToHsv(hex) {
-    const m = /^#?([0-9a-f]{6})$/i.exec(hex || '');
+import { keepTabInside } from "./dialog.js";
+import { claimMenu, closeMenuOutside } from "./menu.js";
+export const COLOR_PICKER_TEXT = {
+    area: "Saturation and brightness",
+    hue: "Hue",
+    hex: "Hex",
+    apply: "Apply",
+};
+/** A `#rrggbb` value as hue in degrees and saturation and value from 0 to 1, or null if it is no hex colour. */
+export function hexToHsv(hex) {
+    const m = /^#?([0-9a-f]{6})$/i.exec(hex || "");
     const group = m?.[1];
     if (!group)
         return null;
@@ -30,7 +41,8 @@ function hexToHsv(hex) {
         h += 360;
     return { h, s: mx ? d / mx : 0, v: mx };
 }
-function hsvToHex(h, s, v) {
+/** The lowercase `#rrggbb` value of a hue, saturation and value. */
+export function hsvToHex(h, s, v) {
     const c = v * s;
     const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
     const m = v - c;
@@ -61,89 +73,192 @@ function hsvToHex(h, s, v) {
         r = c;
         b = x;
     }
-    const f = (u) => Math.round((u + m) * 255).toString(16).padStart(2, '0');
+    const f = (u) => Math.round((u + m) * 255).toString(16).padStart(2, "0");
     return `#${f(r)}${f(g)}${f(b)}`;
 }
 /** Accepts "2f6feb" or "#2F6FEB" and returns "#rrggbb" lowercase, or null if invalid. */
-function normalizeHex(value) {
-    const trimmed = value.trim().replace(/^#/, '');
+export function normalizeHex(value) {
+    const trimmed = value.trim().replace(/^#/, "");
     return /^[0-9a-f]{6}$/i.test(trimmed) ? `#${trimmed.toLowerCase()}` : null;
 }
+const HUE_MAX = 359.9;
+const clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
+/**
+ * What an arrow key does to the picker: on the square left and right move the
+ * saturation and up and down the brightness, on the hue bar every arrow moves
+ * the hue. Shift takes bigger steps, Home and End go to an end of the bar.
+ * Returns null for a key the picker leaves alone.
+ */
+function pickerKeyStep(part, key, shift, hsv) {
+    if (part === "hue") {
+        if (key === "Home")
+            return { ...hsv, h: 0 };
+        if (key === "End")
+            return { ...hsv, h: HUE_MAX };
+        const dir = { ArrowRight: 1, ArrowUp: 1, ArrowLeft: -1, ArrowDown: -1 }[key];
+        return dir ? { ...hsv, h: clamp(hsv.h + dir * (shift ? 30 : 3), 0, HUE_MAX) } : null;
+    }
+    const step = shift ? 0.1 : 0.02;
+    const ds = { ArrowRight: 1, ArrowLeft: -1 }[key] ?? 0;
+    const dv = { ArrowUp: 1, ArrowDown: -1 }[key] ?? 0;
+    if (!ds && !dv)
+        return null;
+    return { ...hsv, s: clamp(hsv.s + ds * step, 0, 1), v: clamp(hsv.v + dv * step, 0, 1) };
+}
 /**
  * Builds an always-visible saturation/value square and hue bar. `onChange`
- * fires with a 6-digit lowercase hex string on every mouse or touch drag
- * update; a caller that writes to disk should debounce it.
+ * fires with a 6-digit lowercase hex string on every step of a drag with
+ * mouse, pen or finger and on every arrow key; a caller that writes to disk
+ * should debounce it.
  */
-export function colorPicker(initialHex, onChange) {
-    const el = document.createElement('div');
-    el.className = 'glim-picker';
-    const sv = document.createElement('div');
-    sv.className = 'glim-picker-sv';
-    const dot = document.createElement('span');
-    dot.className = 'glim-picker-dot';
+export function colorPicker(initialHex, onChange, options = {}) {
+    const text = { area: COLOR_PICKER_TEXT.area, hue: COLOR_PICKER_TEXT.hue, ...options.text };
+    const el = document.createElement("div");
+    el.className = "glim-picker";
+    const sv = document.createElement("div");
+    sv.className = "glim-picker-sv";
+    sv.tabIndex = 0;
+    sv.setAttribute("role", "slider");
+    sv.setAttribute("aria-label", text.area);
+    const dot = document.createElement("span");
+    dot.className = "glim-picker-dot";
     sv.appendChild(dot);
-    const hue = document.createElement('div');
-    hue.className = 'glim-picker-hue';
-    const hdot = document.createElement('span');
-    hdot.className = 'glim-picker-hdot';
+    const hue = document.createElement("div");
+    hue.className = "glim-picker-hue";
+    hue.tabIndex = 0;
+    hue.setAttribute("role", "slider");
+    hue.setAttribute("aria-label", text.hue);
+    hue.setAttribute("aria-valuemin", "0");
+    hue.setAttribute("aria-valuemax", "360");
+    const hdot = document.createElement("span");
+    hdot.className = "glim-picker-hdot";
     hue.appendChild(hdot);
     el.append(sv, hue);
     let state = hexToHsv(initialHex) || { h: 220, s: 0.8, v: 0.9 };
     function paint() {
+        const hex = hsvToHex(state.h, state.s, state.v);
         sv.style.background = `linear-gradient(to top, #000, rgba(0,0,0,0)), linear-gradient(to right, #fff, hsl(${Math.round(state.h)},100%,50%))`;
         dot.style.left = `${state.s * 100}%`;
         dot.style.top = `${(1 - state.v) * 100}%`;
         hdot.style.left = `${(state.h / 360) * 100}%`;
+        el.style.setProperty("--glim-picker-colour", hex);
+        // The square moves along two axes, so the one value that names its place is the colour itself.
+        sv.setAttribute("aria-valuetext", hex);
+        hue.setAttribute("aria-valuenow", String(Math.round(state.h)));
     }
     function emit() {
         onChange(hsvToHex(state.h, state.s, state.v));
     }
+    // Pointer capture keeps the drag going once the pointer leaves the square,
+    // for mouse, pen and finger alike, with no listener on the document.
     function drag(target, apply) {
-        function move(event) {
+        function at(event) {
             const rect = target.getBoundingClientRect();
-            const point = 'touches' in event ? (event.touches[0] ?? event.changedTouches[0]) : event;
-            if (!point)
-                return;
-            const x = Math.min(1, Math.max(0, (point.clientX - rect.left) / rect.width));
-            const y = Math.min(1, Math.max(0, (point.clientY - rect.top) / rect.height));
-            apply(x, y);
+            apply(clamp((event.clientX - rect.left) / rect.width, 0, 1), clamp((event.clientY - rect.top) / rect.height, 0, 1));
             paint();
             emit();
-            event.preventDefault();
-        }
-        function up() {
-            document.removeEventListener('mousemove', move);
-            document.removeEventListener('mouseup', up);
-            document.removeEventListener('touchmove', move);
-            document.removeEventListener('touchend', up);
         }
-        function down(event) {
-            move(event);
-            document.addEventListener('mousemove', move);
-            document.addEventListener('mouseup', up);
-            document.addEventListener('touchmove', move);
-            document.addEventListener('touchend', up);
-        }
-        target.addEventListener('mousedown', down);
-        target.addEventListener('touchstart', down);
+        target.addEventListener("pointerdown", (event) => {
+            if (event.button !== 0)
+                return;
+            event.preventDefault();
+            target.focus();
+            target.setPointerCapture(event.pointerId);
+            at(event);
+        });
+        target.addEventListener("pointermove", (event) => {
+            if (target.hasPointerCapture(event.pointerId))
+                at(event);
+        });
     }
     drag(sv, (x, y) => {
         state = { ...state, s: x, v: 1 - y };
     });
     drag(hue, (x) => {
-        state = { ...state, h: Math.min(359.9, x * 360) };
+        state = { ...state, h: Math.min(HUE_MAX, x * 360) };
     });
+    for (const [part, target] of [["area", sv], ["hue", hue]]) {
+        target.addEventListener("keydown", (event) => {
+            const next = pickerKeyStep(part, event.key, event.shiftKey, state);
+            if (!next)
+                return;
+            event.preventDefault();
+            state = next;
+            paint();
+            emit();
+        });
+    }
     paint();
     return {
         el,
         setValue: (hex) => {
             const parsed = hexToHsv(hex);
-            if (parsed) {
-                state = parsed;
-                paint();
-            }
+            if (!parsed)
+                return;
+            // A grey or black has no hue of its own, so the bar stays where it was.
+            state = parsed.s === 0 || parsed.v === 0 ? { ...parsed, h: state.h } : parsed;
+            paint();
         },
         getValue: () => hsvToHex(state.h, state.s, state.v),
+        focus: () => sv.focus(),
+    };
+}
+/**
+ * Where a picker panel goes beside its trigger: below it when it fits, above
+ * it otherwise, and always 8px inside the window.
+ */
+export function placeColorPicker(trigger, panel, view) {
+    const left = Math.max(8, Math.min(view.width - 8 - panel.width, trigger.left));
+    const fitsBelow = trigger.bottom + 8 + panel.height <= view.height;
+    const top = fitsBelow ? trigger.bottom + 8 : Math.max(8, trigger.top - 8 - panel.height);
+    return { left, top };
+}
+/** The size of the window without its scroll bars, for placing a panel in it. */
+export function viewportSize() {
+    return {
+        width: document.documentElement.clientWidth || window.innerWidth,
+        height: document.documentElement.clientHeight || window.innerHeight,
+    };
+}
+/**
+ * Lets a ColorPicker panel float beside the control that opened it. It is the
+ * document's one open menu, so Escape and a click beside it close the picker
+ * before a window under it, and opening a menu closes the picker. Tab stays
+ * inside the panel, and a scroll or resize closes it, since a fixed panel
+ * loses its anchor. `close` hears whether Escape closed it; the focus is then
+ * back on the anchor. Returns the cleanup.
+ */
+export function floatColorPicker(panel, anchor, close) {
+    const at = placeColorPicker(anchor.getBoundingClientRect(), { width: panel.offsetWidth, height: panel.offsetHeight }, viewportSize());
+    panel.style.left = `${at.left}px`;
+    panel.style.top = `${at.top}px`;
+    const release = claimMenu((byEscape) => {
+        if (byEscape)
+            anchor.focus();
+        close(byEscape);
+    });
+    const outside = closeMenuOutside(() => [panel, anchor], () => close(false));
+    const away = (e) => {
+        if (!(e.target instanceof Node && panel.contains(e.target)))
+            close(false);
+    };
+    // The panel sits on the body, outside any window, so a window's Tab trap
+    // would pull the focus back out of it.
+    const onKey = (e) => {
+        if (e.key !== "Tab")
+            return;
+        keepTabInside(panel, e);
+        e.stopPropagation();
+    };
+    window.addEventListener("scroll", away, true);
+    window.addEventListener("resize", away);
+    panel.addEventListener("keydown", onKey);
+    return () => {
+        release();
+        outside();
+        window.removeEventListener("scroll", away, true);
+        window.removeEventListener("resize", away);
+        panel.removeEventListener("keydown", onKey);
     };
 }
 let openPopover = null;
@@ -155,21 +270,21 @@ let openPopover = null;
  */
 export function openColorPickerPopover(trigger, initialHex, onChange, onClose) {
     openPopover?.close();
-    const panel = document.createElement('div');
-    panel.className = 'glim-picker-popover';
+    const panel = document.createElement("div");
+    panel.className = "glim-picker-popover";
     // Dragging updates the hex text, and typing a valid hex moves the picker.
-    const hexInput = document.createElement('input');
-    hexInput.type = 'text';
-    hexInput.className = 'glim-picker-hex';
+    const hexInput = document.createElement("input");
+    hexInput.type = "text";
+    hexInput.className = "glim-picker-hex";
     hexInput.maxLength = 7;
     hexInput.spellcheck = false;
     hexInput.value = initialHex;
-    hexInput.setAttribute('aria-label', 'Hex');
+    hexInput.setAttribute("aria-label", "Hex");
     const picker = colorPicker(initialHex, (hex) => {
         hexInput.value = hex;
         onChange(hex);
     });
-    hexInput.addEventListener('input', () => {
+    hexInput.addEventListener("input", () => {
         const normalized = normalizeHex(hexInput.value);
         if (!normalized)
             return;
@@ -179,16 +294,9 @@ export function openColorPickerPopover(trigger, initialHex, onChange, onClose) {
     panel.append(picker.el, hexInput);
     document.body.appendChild(panel);
     function position() {
-        const rect = trigger.getBoundingClientRect();
-        const vw = document.documentElement.clientWidth || window.innerWidth;
-        const vh = document.documentElement.clientHeight || window.innerHeight;
-        const width = panel.offsetWidth;
-        const height = panel.offsetHeight;
-        const left = Math.max(8, Math.min(vw - 8 - width, rect.left));
-        const fitsBelow = rect.bottom + 8 + height <= vh;
-        const top = fitsBelow ? rect.bottom + 8 : Math.max(8, rect.top - 8 - height);
-        panel.style.left = `${left}px`;
-        panel.style.top = `${top}px`;
+        const at = placeColorPicker(trigger.getBoundingClientRect(), { width: panel.offsetWidth, height: panel.offsetHeight }, viewportSize());
+        panel.style.left = `${at.left}px`;
+        panel.style.top = `${at.top}px`;
     }
     position();
     let closed = false;
@@ -197,10 +305,10 @@ export function openColorPickerPopover(trigger, initialHex, onChange, onClose) {
             return;
         closed = true;
         panel.remove();
-        document.removeEventListener('pointerdown', onPointerDown, true);
-        document.removeEventListener('keydown', onKeyDown);
-        window.removeEventListener('scroll', close, true);
-        window.removeEventListener('resize', close);
+        document.removeEventListener("pointerdown", onPointerDown, true);
+        document.removeEventListener("keydown", onKeyDown);
+        window.removeEventListener("scroll", close, true);
+        window.removeEventListener("resize", close);
         if (openPopover?.el === panel)
             openPopover = null;
         // Re-rendering the trigger's row while the popover is open strands the
@@ -217,14 +325,14 @@ export function openColorPickerPopover(trigger, initialHex, onChange, onClose) {
         close();
     }
     function onKeyDown(event) {
-        if (event.key === 'Escape')
+        if (event.key === "Escape")
             close();
     }
-    document.addEventListener('pointerdown', onPointerDown, true);
-    document.addEventListener('keydown', onKeyDown);
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("keydown", onKeyDown);
     // A fixed-position popover loses its anchor on scroll or resize.
-    window.addEventListener('scroll', close, true);
-    window.addEventListener('resize', close);
+    window.addEventListener("scroll", close, true);
+    window.addEventListener("resize", close);
     openPopover = { el: panel, close };
     return { close };
 }

package/dist/dialog.d.ts

@@ -1,3 +1,8 @@
+/**
+ * Turns a Tab that would leave the card back to its first or last control.
+ * Focus that sits outside the card, on <body> for one, is pulled back in.
+ */
+export declare function keepTabInside(card: HTMLElement | null, e: KeyboardEvent): void;
 /**
  * Escape from anywhere and a Tab trap over the dialog's own controls, so focus
  * never reaches the page it covers. The listener sits on the document because

package/dist/dialog.js

@@ -2,6 +2,31 @@
 // "Behaviour contracts", the dialog rows): Escape cancels from anywhere, Tab
 // stays inside, and focus goes back to the control that asked.
 const FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+/**
+ * Turns a Tab that would leave the card back to its first or last control.
+ * Focus that sits outside the card, on <body> for one, is pulled back in.
+ */
+export function keepTabInside(card, e) {
+    if (!card)
+        return;
+    const focusables = Array.from(card.querySelectorAll(FOCUSABLE));
+    if (focusables.length === 0)
+        return;
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const active = document.activeElement;
+    const inside = active instanceof Node && card.contains(active);
+    if (e.shiftKey) {
+        if (!inside || active === first) {
+            e.preventDefault();
+            last.focus();
+        }
+    }
+    else if (!inside || active === last) {
+        e.preventDefault();
+        first.focus();
+    }
+}
 /**
  * Escape from anywhere and a Tab trap over the dialog's own controls, so focus
  * never reaches the page it covers. The listener sits on the document because
@@ -15,28 +40,8 @@ export function trapDialogKeys(dialog, onCancel) {
             onCancel();
             return;
         }
-        if (e.key !== "Tab")
-            return;
-        const card = dialog();
-        if (!card)
-            return;
-        const focusables = Array.from(card.querySelectorAll(FOCUSABLE));
-        if (focusables.length === 0)
-            return;
-        const first = focusables[0];
-        const last = focusables[focusables.length - 1];
-        const active = document.activeElement;
-        const inside = active instanceof Node && card.contains(active);
-        if (e.shiftKey) {
-            if (!inside || active === first) {
-                e.preventDefault();
-                last.focus();
-            }
-        }
-        else if (!inside || active === last) {
-            e.preventDefault();
-            first.focus();
-        }
+        if (e.key === "Tab")
+            keepTabInside(dialog(), e);
     }
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);

package/dist/index.d.ts

@@ -3,6 +3,8 @@ export * from "./appMarks.ts";
 export * from "./badge.ts";
 export * from "./bubblePosition.ts";
 export * from "./button.ts";
+export * from "./clipboard.ts";
+export * from "./colorNames.ts";
 export * from "./colorPicker.ts";
 export * from "./controls.ts";
 export * from "./dialog.ts";
@@ -13,9 +15,12 @@ export * from "./infoTile.ts";
 export * from "./inputModality.ts";
 export * from "./marks.ts";
 export * from "./media.ts";
+export * from "./menu.ts";
+export * from "./meter.ts";
 export * from "./motionNative.ts";
 export * from "./numberField.ts";
 export * from "./paypal.ts";
+export * from "./pill.ts";
 export * from "./portalHue.ts";
 export * from "./readmeButton.ts";
 export * from "./segmentLayout.ts";
@@ -29,3 +34,4 @@ export * from "./tipBubble.ts";
 export * from "./toastEngine.ts";
 export * from "./tooltip.ts";
 export * from "./version.ts";
+export * from "./window.ts";