@mosaicajs/components 0.2.0 → 0.4.0

package/dist/colour-picker.js

@@ -1,20 +1,25 @@
 import { css, html, nothing } from 'lit';
 import { hexOf, lighter, rgbOfHex } from '@mosaicajs/deck/internal';
 import { hsvOf, rgbOfHsv } from './hsv.js';
+import { icon } from './icons.js';
 /** The width of the hue knob, which its travel along the bar allows for. */
 const HUE_KNOB = 12;
 /** How far each lighter colour is taken towards white. */
 const LIGHTER = 0.45;
+/** The most colours a palette is drawn with in one row; a larger one wraps, so each stays large enough to press. */
+const ONE_ROW = 10;
 /** The picker's width before it is measured. */
 const WIDTH = 264;
 /**
  * The colour picker a swatch opens: the palette's colours and a lighter row of them, a custom area
  * with a saturation and brightness square, a hue bar and a hex field, and Reset. A choice applies
  * at once. It is shown in the top layer beside the rectangle `beside` gives, level with the swatch
- * it was opened from, and focus goes into it; Escape, or a press outside it and its swatch, closes
- * it, Escape giving focus back to the swatch. A custom colour shows on the map as it is dragged and
- * is reported as it is let go; a drag cancelled, or ended by closing the picker, puts back the
- * colour from before it.
+ * it was opened from, or under or over that swatch's row where the window has no room beside, and
+ * focus goes into it; Escape, Tab past either end of it, or a press outside
+ * it and its swatch, closes it, the keys giving focus back to the swatch. A custom colour shows on
+ * the map as it is dragged and is reported as it is let go; a drag cancelled, or ended by closing
+ * the picker, puts back the colour from before it. Text in the hex field that is not a colour is
+ * kept and marked invalid, and the line under the field says what to write.
  *
  * The host renders {@link render} where the picker belongs in its tree and adds
  * {@link pickerStyles} to its styles. The parts are the host's: `colour-popover`, `choice`, `sv`,
@@ -33,6 +38,8 @@ export class ColourPicker {
     live = null;
     /** What puts back the colour from before a drag, while one shows a colour not yet reported. */
     restore = null;
+    /** What was typed in the hex field, while it is not a colour. */
+    typed = null;
     constructor(host, beside) {
         this.host = host;
         this.beside = beside;
@@ -42,6 +49,7 @@ export class ColourPicker {
         this.from = from;
         this.hsv = hsvOf(rgbOfHex(target.current()) ?? [0, 0, 0]);
         this.picking = target;
+        this.typed = null;
         this.focusNext = true;
         document.addEventListener('pointerdown', this.onOutside, true);
         this.host.requestUpdate();
@@ -110,6 +118,7 @@ export class ColourPicker {
         if (!target)
             return;
         this.hsv = hsvOf(rgbOfHex(hex ?? target.own) ?? [0, 0, 0]);
+        this.typed = null;
         this.restore = null;
         target.apply(hex, true);
         this.host.requestUpdate();
@@ -129,6 +138,7 @@ export class ColourPicker {
         const custom = hexOf(rgbOfHsv(this.hsv));
         const setHsv = (next, final) => {
             this.hsv = next;
+            this.typed = null;
             this.host.requestUpdate();
             this.applyLive(hexOf(rgbOfHsv(next)), final);
         };
@@ -183,51 +193,69 @@ export class ColourPicker {
             e.preventDefault();
             setHsv([(next + 360) % 360, sat, val], true);
         };
-        return html `<div part="colour-popover" class="pop" popover="manual" role="dialog" aria-label=${`Colour of ${p.title}`}
-      @keydown=${(e) => {
-            if (e.key !== 'Escape')
+        const invalid = this.typed !== null;
+        const hexShown = this.typed ?? custom.toUpperCase();
+        /** Take the hex field's text as the colour, or keep it as typed where it is not one. */
+        const hexChanged = (input) => {
+            const text = input.value.trim();
+            const c = rgbOfHex(text.startsWith('#') ? text : `#${text}`);
+            if (c)
+                return this.choose(hexOf(c));
+            this.typed = text;
+            this.host.requestUpdate();
+        };
+        const onKey = (e) => {
+            const stops = Array.from(e.currentTarget.querySelectorAll('button, input, [tabindex="0"]'));
+            const leaves = e.key === 'Tab' && e.target === (e.shiftKey ? stops[0] : stops.at(-1));
+            if (e.key !== 'Escape' && !leaves)
                 return;
             e.stopPropagation();
             e.preventDefault();
+            // Tab out of the hex field takes its text first, and stays where that is not a colour.
+            if (leaves && e.target instanceof HTMLInputElement && e.target.value.trim().toUpperCase() !== hexShown.toUpperCase()) {
+                hexChanged(e.target);
+                if (this.typed !== null)
+                    return;
+            }
             this.close(true);
-        }}
+        };
+        const choice = ({ hex, label }) => html `<button part="choice" type="button" style=${`background:${hex}`} aria-label=${`${label}, ${hex}`} title=${`${label}, ${hex}`}
+        aria-pressed=${hex === current ? 'true' : 'false'} @click=${() => this.choose(hex)}>${hex === current ? icon('check', 14, 2) : nothing}</button>`;
+        return html `<div part="colour-popover" class="pop" popover="manual" role="dialog" aria-label=${`Colour of ${p.title}`}
+      @keydown=${onKey}
       @focusout=${(e) => {
             const to = e.relatedTarget;
             if (to && !e.currentTarget.contains(to))
                 this.close(false);
         }}>
       <div class="top"><span class="t">${p.title}</span><button part="reset" class="quiet" type="button" @click=${() => this.choose(null)}>Reset</button></div>
-      <div class="choices" role="group" aria-label="Palette colours" style=${`grid-template-columns:repeat(${n}, minmax(0, 1fr))`}>
-        ${choices.map(({ hex, label }) => html `<button part="choice" type="button" style=${`background:${hex}`} aria-label=${`${label}, ${hex}`} title=${`${label}, ${hex}`}
-            aria-pressed=${hex === current ? 'true' : 'false'} @click=${() => this.choose(hex)}></button>`)}
+      <div class="choices" role="group" aria-label="Palette colours" style=${n > ONE_ROW ? nothing : `--columns:repeat(${n}, minmax(0, 1fr))`}>
+        <div class="set">${choices.slice(0, n).map(choice)}</div>
+        <div class="set">${choices.slice(n).map(choice)}</div>
       </div>
-      <div class="hd">Custom</div>
-      <div class="custom">
+      <div class="hd" id="picker-custom">Custom</div>
+      <div class="custom" role="group" aria-labelledby="picker-custom">
         <div part="sv" role="slider" tabindex="0" aria-label="Saturation and brightness" aria-valuemin="0" aria-valuemax="100" aria-valuenow=${Math.round(sat * 100)}
           aria-valuetext=${`Saturation ${Math.round(sat * 100)}%, brightness ${Math.round(val * 100)}%`}
           style=${`background:linear-gradient(to top, #000000, rgba(0, 0, 0, 0)), linear-gradient(to right, #ffffff, hsl(${h.toFixed(0)}, 100%, 50%))`}
           @pointerdown=${sv.down} @pointermove=${sv.move} @pointerup=${sv.up} @pointercancel=${sv.cancel} @keydown=${svKey}>
           <span class="knob" style=${`left:${(sat * 100).toFixed(1)}%;top:${((1 - val) * 100).toFixed(1)}%`}></span>
         </div>
-        <div part="hue" role="slider" tabindex="0" aria-label="Hue" aria-valuemin="0" aria-valuemax="359" aria-valuenow=${Math.round(h)}
+        <div part="hue" role="slider" tabindex="0" aria-label="Hue" aria-valuemin="0" aria-valuemax="359" aria-valuenow=${Math.round(h)} aria-valuetext=${`${Math.round(h)} degrees`}
           @pointerdown=${hue.down} @pointermove=${hue.move} @pointerup=${hue.up} @pointercancel=${hue.cancel} @keydown=${hueKey}>
           <span class="knob" style=${`left:calc(${HUE_KNOB / 2}px + (100% - ${HUE_KNOB}px) * ${(h / 360).toFixed(4)})`}></span>
         </div>
-        <label>Hex<input part="hex" type="text" spellcheck="false" .value=${custom.toUpperCase()}
-          @change=${(e) => {
-            const input = e.target;
-            const text = input.value.trim();
-            const c = rgbOfHex(text.startsWith('#') ? text : `#${text}`);
-            if (!c) {
-                input.value = custom.toUpperCase();
-                return;
-            }
-            this.choose(hexOf(c));
-        }} /></label>
+        <label>Hex<input part="hex" type="text" spellcheck="false" .value=${hexShown}
+          aria-invalid=${invalid ? 'true' : 'false'} aria-describedby="picker-hex-format"
+          @change=${(e) => hexChanged(e.target)} /></label>
+        <span id="picker-hex-format" class=${invalid ? 'format' : 'format sr-only'} role="status">${invalid ? 'Not a colour. Write # and six hex digits, such as #1B9E77.' : '# and six hex digits, such as #1B9E77'}</span>
       </div>
     </div>`;
     }
-    /** Show the picker in the top layer, beside {@link beside} and level with its swatch; focus goes into it as it opens. */
+    /**
+     * Show the picker in the top layer, beside {@link beside} and level with its swatch, or, where
+     * neither side has room, under or over its swatch's row; focus goes into it as it opens.
+     */
     place() {
         const pop = this.host.renderRoot.querySelector('.pop');
         const from = this.from;
@@ -243,15 +271,29 @@ export class ColourPicker {
         }
         const a = from.getBoundingClientRect();
         const own = this.beside();
+        pop.style.maxHeight = '';
         const width = pop.offsetWidth || WIDTH;
-        const height = pop.offsetHeight || 0;
+        let height = pop.offsetHeight || 0;
         const vw = typeof innerWidth === 'number' ? innerWidth : 1024;
         const vh = typeof innerHeight === 'number' ? innerHeight : 768;
         let left = own.right + 12;
         if (left + width > vw - 8)
             left = own.left - width - 12;
+        let top = a.top - 8;
+        if (left < 8) {
+            // No room on either side: under the row it was opened from, or over it where that has more
+            // room, and no taller than the room, so the row stays in sight.
+            const row = (from.closest('[part~="row"]') ?? from).getBoundingClientRect();
+            const under = vh - row.bottom - 16;
+            const over = row.top - 16;
+            const below = under >= height || under >= over;
+            height = Math.min(height, Math.max(0, below ? under : over));
+            pop.style.maxHeight = `${height}px`;
+            left = a.left;
+            top = below ? row.bottom + 8 : row.top - 8 - height;
+        }
         pop.style.left = `${Math.round(Math.max(8, Math.min(left, vw - width - 8)))}px`;
-        pop.style.top = `${Math.round(Math.max(8, Math.min(a.top - 8, vh - height - 8)))}px`;
+        pop.style.top = `${Math.round(Math.max(8, Math.min(top, vh - height - 8)))}px`;
         if (this.focusNext) {
             this.focusNext = false;
             (pop.querySelector('[aria-pressed="true"]') ?? pop.querySelector('button'))?.focus();
@@ -276,9 +318,6 @@ export const pickerStyles = css `
     max-height: calc(100vh - 16px);
     overflow-y: auto;
   }
-  .pop button:focus-visible {
-    outline-offset: -2px;
-  }
   .pop .top {
     display: flex;
     align-items: center;
@@ -287,26 +326,58 @@ export const pickerStyles = css `
     padding: 12px 14px 8px;
   }
   .pop .top .t {
+    min-width: 0;
     font-weight: 600;
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
+    white-space: var(--_mosaica-long-text);
+    overflow-wrap: anywhere;
+  }
+  /* Drawn as a line of text, with a target 24 px high and at least as wide around it. */
+  .pop [part='reset'] {
+    position: relative;
+    flex: none;
+  }
+  .pop [part='reset']::before {
+    content: '';
+    position: absolute;
+    inset: -4px 0;
+    min-width: 24px;
   }
   .pop .choices {
     display: grid;
     gap: 6px;
     padding: 0 14px 10px;
   }
+  /* A palette's colours: in one row for a palette of up to ten, else in as many rows as keep
+     each at least 24 px square. */
+  .pop .set {
+    display: grid;
+    grid-template-columns: var(--columns, repeat(auto-fit, minmax(24px, 1fr)));
+    gap: 6px;
+  }
   [part='choice'] {
+    display: grid;
+    place-items: center;
     aspect-ratio: 1;
     width: 100%;
     border-radius: 5px;
+    forced-color-adjust: none;
+  }
+  /* The ring stands clear of the colour, on the surface, whatever the colour is. */
+  [part='choice']:focus-visible {
+    outline-offset: 2px;
   }
   [part='choice'][aria-pressed='true'] {
     box-shadow:
       0 0 0 2px var(--_mosaica-surface),
       0 0 0 3.5px var(--_mosaica-ink);
   }
+  /* The chosen colour's tick, light with a dark edge, so it shows on any colour. */
+  [part='choice'] svg {
+    color: #ffffff;
+    filter: drop-shadow(0 0 1px #000000) drop-shadow(0 0 1px #000000);
+  }
   .pop .hd {
     margin: 0;
     padding: 10px 14px 4px;
@@ -323,6 +394,7 @@ export const pickerStyles = css `
     position: relative;
     touch-action: none;
     cursor: crosshair;
+    forced-color-adjust: none;
   }
   [part='sv'] {
     height: 120px;
@@ -333,6 +405,12 @@ export const pickerStyles = css `
     border-radius: 5px;
     background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
   }
+  /* The bar's target is 24 px high around it. */
+  [part='hue']::before {
+    content: '';
+    position: absolute;
+    inset: -7px 0;
+  }
   .pop .knob {
     position: absolute;
     width: 12px;
@@ -358,4 +436,13 @@ export const pickerStyles = css `
     font-size: 12px;
     font-variant-numeric: tabular-nums;
   }
+  [part='hex'][aria-invalid='true'] {
+    border-color: var(--_mosaica-refuse);
+  }
+  /* What the hex field takes: read out with the field, and drawn only as what is wrong with an entry. */
+  .pop .format {
+    font-size: 12px;
+    color: var(--_mosaica-refuse);
+    font-weight: 500;
+  }
 `;

package/dist/display.js

@@ -88,12 +88,13 @@ export const displayStyles = css `
     font-weight: 500;
   }
   /* A slider: a thin track filled to the thumb, as far as its --fill says. */
+  /* The slider's box is 24 px high for the pointer and takes 16 px of its row. */
   .slider {
     -webkit-appearance: none;
     appearance: none;
     width: 100%;
-    height: 16px;
-    margin: 0;
+    height: 24px;
+    margin: -4px 0;
     padding: 0;
     border: 0;
     background: none;
@@ -148,7 +149,7 @@ export const displayStyles = css `
   }
   .modes button[aria-checked='true'] {
     background: var(--_mosaica-surface);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 -2px 0 var(--_mosaica-accent);
     color: var(--_mosaica-ink);
     font-weight: 600;
   }
@@ -190,9 +191,16 @@ export const displayStyles = css `
     color: var(--_mosaica-ink);
     font-weight: 500;
   }
-  /* Edit colours sits under the choices, as wide as its words. */
-  .edit-colours {
+  /* Edit colours sits under the choices, as wide as its words, 22 px high inside a pointer's target of 24. */
+  .btn.edit-colours {
+    position: relative;
     align-self: flex-start;
+    height: 22px;
+  }
+  .btn.edit-colours::after {
+    content: '';
+    position: absolute;
+    inset: -2px -1px;
   }
   .ramp-choice {
     display: flex;
@@ -251,12 +259,15 @@ export const displayStyles = css `
   .toggle[aria-pressed='true'] {
     border-color: var(--_mosaica-accent);
     background: var(--_mosaica-accent);
+    box-shadow: inset 0 -2px 0 var(--_mosaica-accent-ink);
     color: var(--_mosaica-accent-ink);
   }
   .ramp-choice .t {
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
+    white-space: var(--_mosaica-long-text);
+    overflow-wrap: anywhere;
+    text-align: left;
   }
   .ramp-choice:disabled {
     opacity: 0.4;
@@ -310,16 +321,20 @@ export const displayStyles = css `
   }
   .seg button[aria-checked='true'] {
     background: var(--_mosaica-surface);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 -2px 0 var(--_mosaica-accent);
     color: var(--_mosaica-ink);
     font-weight: 600;
   }
-  /* The Size by menu, in the top layer beside the popover. */
+  /* A choice's menu, in the top layer beside the popover: no larger than the window, scrolling inside. */
   .size-menu {
     position: fixed;
     inset: auto;
     margin: 0;
     width: 220px;
+    max-width: calc(100vw - 16px);
+    max-height: calc(100dvh - 16px);
+    overflow-y: auto;
+    overscroll-behavior: contain;
     padding: 6px 0;
     box-sizing: border-box;
     background: var(--_mosaica-surface);
@@ -402,6 +417,30 @@ export const displayStyles = css `
     align-items: center;
     gap: 8px;
   }
+  /* The tick on the entry chosen takes no room: in a menu entry's left padding, at the right of a
+     palette's title line, and at the right of a density ramp's row. */
+  .size-menu [role='menuitemradio'],
+  .ramp-list button {
+    position: relative;
+  }
+  .tick {
+    position: absolute;
+    left: 1px;
+    top: 50%;
+    display: flex;
+    translate: 0 -50%;
+    pointer-events: none;
+  }
+  .size-menu.palettes .tick {
+    left: auto;
+    right: 10px;
+    top: 12px;
+    translate: none;
+  }
+  .ramp-list .tick {
+    left: auto;
+    right: 6px;
+  }
   .size-menu .kind {
     font-size: 12px;
     font-weight: 400;
@@ -431,8 +470,37 @@ export const displayStyles = css `
     font-size: 12px;
     color: var(--_mosaica-ink);
   }
-  .ramp-list button:hover,
+  .ramp-list button:hover {
+    background: var(--_mosaica-surface-2);
+  }
   .ramp-list button[aria-checked='true'] {
     background: var(--_mosaica-surface-2);
   }
+  /* A palette's or a ramp's colours are what it is, so they keep them under forced colours; a
+     slider's track and thumb are drawn in backgrounds, and take system colours. */
+  @media (forced-colors: active) {
+    .bar,
+    .strip span,
+    .swatches span {
+      forced-color-adjust: none;
+    }
+    .slider::-webkit-slider-runnable-track {
+      forced-color-adjust: none;
+      background: linear-gradient(to right, Highlight var(--fill, 0%), GrayText var(--fill, 0%));
+    }
+    .slider::-moz-range-track {
+      forced-color-adjust: none;
+      background: linear-gradient(to right, Highlight var(--fill, 0%), GrayText var(--fill, 0%));
+    }
+    .slider::-webkit-slider-thumb {
+      forced-color-adjust: none;
+      border-color: ButtonText;
+      background: ButtonFace;
+    }
+    .slider::-moz-range-thumb {
+      forced-color-adjust: none;
+      border-color: ButtonText;
+      background: ButtonFace;
+    }
+  }
 `;

package/dist/events.d.ts

@@ -80,9 +80,13 @@ export type MosaicaEventDetails = {
      * selection was cleared. It fires with `status` `loading` when a shape is selected or `cleared`
      * when it is cleared, then again with `shown` or `refused` when the server answers. Then `visible`, `matched` and
      * `served` carry the region's counts, and `verdict` says whether they are exact for the shape.
+     * `view` names the view whose selection changed where it is not the current one, as when the
+     * filter panel's chip for a selection held in another view is removed, or the status strip's
+     * Cancel puts one back.
      */
     'mosaica-selectchange': {
         shape: SelectionShapeDetail | null;
+        view?: string;
         status?: RegionProjection['status'] | 'cleared';
         visible?: Masked | null;
         matched?: Masked;
@@ -118,12 +122,21 @@ export type MosaicaEventDetails = {
     'mosaica-budgetchange': {
         budget: number;
     };
-    /** The Most clusters slider was released. A `nested` or `dag` layer is now cut to at most `budget` clusters. */
-    'mosaica-clusterbudgetchange': {
-        budget: number;
+    /**
+     * The Cluster density slider was released. Each cluster is now given a square `spacing` CSS pixels
+     * on a side of the map, so a `nested` or `dag` layer is cut to as many clusters as such squares
+     * fit the map, and a level that follows the zoom is one with no more than that many in view.
+     */
+    'mosaica-clusterspacingchange': {
+        spacing: number;
     };
-    /** The level that clusters are coloured and labelled at is now `level`. Null is the default level. */
+    /**
+     * The level that the clusters of the layer `layer` are counted, coloured and labelled at is now
+     * `level`. Null is that layer's default level, which follows the zoom on a layer whose levels
+     * declare no zoom range. Other layers keep theirs.
+     */
     'mosaica-levelchange': {
+        layer: string;
         level: number | null;
     };
     /**
@@ -181,9 +194,10 @@ export type MosaicaEventDetails = {
     };
     /**
      * A filter or highlight changed. `column` is the column whose control changed, or null for Clear
-     * all and for clearing the highlight. `verb` is `filter` or `highlight` (`filter` if absent).
-     * After an edit, `expr` is the combined expression of every control's clause for that `verb`, or
-     * null if there are none. When a chip is removed, or Clear all is pressed, `expr` is null.
+     * all, for clearing the highlight and for a cancelled query. `verb` is `filter` or `highlight`
+     * (`filter` if absent). After an edit or a cancelled query, `expr` is the combined expression of
+     * every control's clause for that `verb`, or null if there are none. When a chip is removed, or
+     * Clear all is pressed, `expr` is null.
      * `member_of` clauses are reported by `mosaica-clausechange`.
      */
     'mosaica-filterchange': {