@mosaicajs/components 0.3.0 → 0.4.0

package/dist/item-card.js

@@ -35,7 +35,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { css, html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { GRID32 } from '@mosaicajs/client';
-import { MosaicaElement, columnCaption, emit, idString, keyTitle, timestampText } from './base.js';
+import { BOOL_WORDS, MosaicaElement, columnCaption, emit, idString, keyTitle, timestampText } from './base.js';
 import { attachContextRoot, defineOnce } from './define.js';
 import { icon } from './icons.js';
 import { reasonOf, refusedState, renderState, stateOf } from './states.js';
@@ -47,19 +47,25 @@ import { chrome, tokens } from './tokens.js';
  *
  * The headline is the `title-field` field, or the item's `mosaica_id` when that field is unset or
  * empty. To render a field your own way, as a link for example, put an element in its
- * `field-<name>` slot.
+ * `field-<name>` slot. The card is headed "Item" for a screen reader, with the headline a heading
+ * under it.
+ *
+ * A value over 60 characters is kept to six lines, with a Show more button under it where that
+ * cuts it short. A `compact` card also keeps its headline to three lines and its subtitle to two,
+ * and its Show all button shows every field and all of each.
  *
  * A field named in `image-fields` whose value is an `http:` or `https:` address, or a path
  * resolved against the page, is drawn as the image at that address, across the card's width. The viewer's browser loads it from the host
- * that serves it, without a referrer. A value that is not such an address, and an image that does
- * not load, are shown as text.
+ * that serves it, without a referrer. Its alternative text is the item's `title-field` value, or
+ * the field's name where the item has none. A value that is not such an address, and an image that
+ * does not load, are shown as text.
  *
  * The Open button appears only when you set `open-url` or `open`. `open-url` is a link template
  * such as `https://www.geonames.org/{geonameid}`, in which each `{name}` is replaced by the item's
  * value for that field. Because the values are URL-encoded, a template cannot open an address that
  * a field already holds, so set `open` to a function for that. An item gets no Open button when it
- * has no value for a field the template names. A function in `open` is called with the item's
- * `mosaica_id` and fields, and it takes precedence over `open-url`.
+ * has no value for a field the template names. The link opens in a new tab. A function in `open`
+ * is called with the item's `mosaica_id` and fields, and it takes precedence over `open-url`.
  *
  * @summary A card showing an item's fields, with an optional Open button.
  * @tagname mosaica-item-card
@@ -74,23 +80,26 @@ import { chrome, tokens } from './tokens.js';
  * @csspart title - The header row: the headline or the state, and the close button.
  * @csspart close - The close button.
  * @csspart state - The state line, with `data-state`: `shown`, `empty` (no item, or a click that
- *   found nothing), `refused` or `detached`.
+ *   found nothing), `refused` or `detached`. It is inside a `role="status"` region.
  * @csspart refusal - The words "Item unavailable", with `data-code` set to the refusal's code if
  *   the server refused the record. For a broken pick, the details are in the map's `lastPick`.
  * @csspart reason - The server's reason for refusing the record, under "Item unavailable".
- * @csspart headline - The headline, with `data-name` set to the field it shows.
+ * @csspart headline - The headline, an `<h3>`, with `data-name` set to the field it shows.
  * @csspart subtitle - The `subtitle-field` value under the headline, when `compact` is set.
  * @csspart show-all - The "Show all N fields" button, when `compact` is set, with `aria-expanded`.
- * @csspart view-chip - One view the item is in, with `data-view` and `aria-current` on the current
- *   view.
+ *   It reads "Show all" where every field is shown and only text is cut short.
+ * @csspart view-chip - One view the item is in, with `data-view`, and `aria-current` and a bar
+ *   under the current view.
  * @csspart field - One field, with `data-name`, and `data-prose` on a value over 60 characters.
- * @csspart label - A field's name, and the heading above the view chips.
- * @csspart value - A field's value.
+ * @csspart label - A field's name, a `<dt>`, and the heading above the view chips.
+ * @csspart value - A field's value, a `<dd>`.
+ * @csspart more - The Show more button under a long value that is cut short, with `aria-expanded`.
  * @csspart image - A field's value drawn as an image, under `image-fields`.
  * @csspart scoped - The group-scoped values, grouped by key.
  * @csspart key - One key's heading among the group-scoped values, with `data-key`.
  * @csspart open - The Open button.
- * @csspart copy - The Copy id button, which copies the `mosaica_id` to the clipboard.
+ * @csspart copy - The Copy id button, which copies the `mosaica_id` to the clipboard and says to a
+ *   screen reader whether it did.
  */
 let MosaicaItemCard = (() => {
     let _classSuper = MosaicaElement;
@@ -130,6 +139,15 @@ let MosaicaItemCard = (() => {
     let _expanded_decorators;
     let _expanded_initializers = [];
     let _expanded_extraInitializers = [];
+    let _opened_decorators;
+    let _opened_initializers = [];
+    let _opened_extraInitializers = [];
+    let _clipped_decorators;
+    let _clipped_initializers = [];
+    let _clipped_extraInitializers = [];
+    let _copied_decorators;
+    let _copied_initializers = [];
+    let _copied_extraInitializers = [];
     let _broken_decorators;
     let _broken_initializers = [];
     let _broken_extraInitializers = [];
@@ -148,6 +166,9 @@ let MosaicaItemCard = (() => {
             _openUrl_decorators = [property({ attribute: 'open-url' })];
             _open_decorators = [property({ attribute: false })];
             _expanded_decorators = [state()];
+            _opened_decorators = [state()];
+            _clipped_decorators = [state()];
+            _copied_decorators = [state()];
             _broken_decorators = [state()];
             __esDecorate(this, null, _item_decorators, { kind: "accessor", name: "item", static: false, private: false, access: { has: obj => "item" in obj, get: obj => obj.item, set: (obj, value) => { obj.item = value; } }, metadata: _metadata }, _item_initializers, _item_extraInitializers);
             __esDecorate(this, null, _refusal_decorators, { kind: "accessor", name: "refusal", static: false, private: false, access: { has: obj => "refusal" in obj, get: obj => obj.refusal, set: (obj, value) => { obj.refusal = value; } }, metadata: _metadata }, _refusal_initializers, _refusal_extraInitializers);
@@ -161,6 +182,9 @@ let MosaicaItemCard = (() => {
             __esDecorate(this, null, _openUrl_decorators, { kind: "accessor", name: "openUrl", static: false, private: false, access: { has: obj => "openUrl" in obj, get: obj => obj.openUrl, set: (obj, value) => { obj.openUrl = value; } }, metadata: _metadata }, _openUrl_initializers, _openUrl_extraInitializers);
             __esDecorate(this, null, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
             __esDecorate(this, null, _expanded_decorators, { kind: "accessor", name: "expanded", static: false, private: false, access: { has: obj => "expanded" in obj, get: obj => obj.expanded, set: (obj, value) => { obj.expanded = value; } }, metadata: _metadata }, _expanded_initializers, _expanded_extraInitializers);
+            __esDecorate(this, null, _opened_decorators, { kind: "accessor", name: "opened", static: false, private: false, access: { has: obj => "opened" in obj, get: obj => obj.opened, set: (obj, value) => { obj.opened = value; } }, metadata: _metadata }, _opened_initializers, _opened_extraInitializers);
+            __esDecorate(this, null, _clipped_decorators, { kind: "accessor", name: "clipped", static: false, private: false, access: { has: obj => "clipped" in obj, get: obj => obj.clipped, set: (obj, value) => { obj.clipped = value; } }, metadata: _metadata }, _clipped_initializers, _clipped_extraInitializers);
+            __esDecorate(this, null, _copied_decorators, { kind: "accessor", name: "copied", static: false, private: false, access: { has: obj => "copied" in obj, get: obj => obj.copied, set: (obj, value) => { obj.copied = value; } }, metadata: _metadata }, _copied_initializers, _copied_extraInitializers);
             __esDecorate(this, null, _broken_decorators, { kind: "accessor", name: "broken", static: false, private: false, access: { has: obj => "broken" in obj, get: obj => obj.broken, set: (obj, value) => { obj.broken = value; } }, metadata: _metadata }, _broken_initializers, _broken_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
@@ -175,7 +199,7 @@ let MosaicaItemCard = (() => {
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
-        gap: 10px;
+        gap: 0;
         margin: 0 0 10px;
         font-size: 13px;
         font-weight: 400;
@@ -183,6 +207,11 @@ let MosaicaItemCard = (() => {
         text-transform: none;
         color: var(--_mosaica-ink);
       }
+      /* The state's region is in the row whether or not it says anything, and takes room only when it does. */
+      .said {
+        min-width: 0;
+      }
+      .said.alone,
       .head [part='headline'],
       .head .headline {
         flex: 1 1 auto;
@@ -193,6 +222,13 @@ let MosaicaItemCard = (() => {
         flex-direction: column;
         gap: 3px;
       }
+      h3[part='headline'] {
+        display: block;
+        margin: 0;
+        letter-spacing: 0;
+        text-transform: none;
+        color: var(--_mosaica-ink);
+      }
       [part='subtitle'] {
         font-size: 12px;
         color: var(--_mosaica-ink-2);
@@ -203,20 +239,41 @@ let MosaicaItemCard = (() => {
       :host([compact]) .card-title {
         font-size: 14px;
       }
-      /* The compact card keeps its headline to three lines and its subtitle to two; Open shows them whole. */
-      :host([compact]) .card-title,
-      :host([compact]) [part='subtitle'] {
+      /* Text kept to a few lines until Show all, or its own Show more, shows it whole: a compact
+         card's headline to three and its subtitle to two, a long value to six. */
+      .clamp {
         display: -webkit-box;
-        -webkit-line-clamp: 3;
-        line-clamp: 3;
+        -webkit-line-clamp: 6;
+        line-clamp: 6;
         -webkit-box-orient: vertical;
         overflow: hidden;
         overflow-wrap: anywhere;
       }
-      :host([compact]) [part='subtitle'] {
+      h3[part='headline'].clamp {
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        line-clamp: 3;
+      }
+      [part='subtitle'].clamp {
         -webkit-line-clamp: 2;
         line-clamp: 2;
       }
+      /* Each is drawn as a line of text, with a target 24 px high and at least as wide around it. */
+      [part='show-all'],
+      [part='more'] {
+        position: relative;
+      }
+      [part='show-all']::before,
+      [part='more']::before {
+        content: '';
+        position: absolute;
+        inset: -4px 0;
+        min-width: 24px;
+      }
+      dl,
+      dd {
+        margin: 0;
+      }
       :host([compact]) .foot {
         display: flex;
         align-items: center;
@@ -237,6 +294,7 @@ let MosaicaItemCard = (() => {
       }
       ::slotted([slot='actions']) {
         flex: none;
+        margin-left: 10px;
       }
       .head [part='state'] {
         min-height: 24px;
@@ -253,14 +311,6 @@ let MosaicaItemCard = (() => {
         border-radius: 6px;
         object-fit: contain;
       }
-      [part='field'][data-prose] [part='value'] {
-        display: -webkit-box;
-        -webkit-line-clamp: 6;
-        line-clamp: 6;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        overflow-wrap: anywhere;
-      }
       .field .v.mono {
         font-size: 12px;
       }
@@ -274,7 +324,7 @@ let MosaicaItemCard = (() => {
         flex: none;
         width: 24px;
         height: 24px;
-        margin: -2px -4px 0 0;
+        margin: -2px -4px 0 10px;
         display: grid;
         place-items: center;
         border-radius: 5px;
@@ -289,9 +339,11 @@ let MosaicaItemCard = (() => {
         gap: 6px;
         margin: 4px 0 10px;
       }
+      /* The bar marks the current view by more than its colour, and takes no room. */
       [part='view-chip'][aria-current='true'] {
         background: var(--_mosaica-accent);
         color: var(--_mosaica-accent-ink);
+        box-shadow: inset 0 -2px 0 currentColor;
       }
       [part='scoped'] {
         margin-top: 12px;
@@ -365,6 +417,19 @@ let MosaicaItemCard = (() => {
         get expanded() { return this.#expanded_accessor_storage; }
         set expanded(value) { this.#expanded_accessor_storage = value; }
         expandedFor = (__runInitializers(this, _expanded_extraInitializers), null);
+        #opened_accessor_storage = __runInitializers(this, _opened_initializers, new Set());
+        /** The long values shown whole on the full card, by field, for the item shown. @internal */
+        get opened() { return this.#opened_accessor_storage; }
+        set opened(value) { this.#opened_accessor_storage = value; }
+        #clipped_accessor_storage = (__runInitializers(this, _opened_extraInitializers), __runInitializers(this, _clipped_initializers, new Set()));
+        /** The fields whose headline, subtitle or value is cut short where it is drawn. @internal */
+        get clipped() { return this.#clipped_accessor_storage; }
+        set clipped(value) { this.#clipped_accessor_storage = value; }
+        #copied_accessor_storage = (__runInitializers(this, _clipped_extraInitializers), __runInitializers(this, _copied_initializers, ''));
+        /** What the last press of Copy id came to, for the item shown. @internal */
+        get copied() { return this.#copied_accessor_storage; }
+        set copied(value) { this.#copied_accessor_storage = value; }
+        resized = (__runInitializers(this, _copied_extraInitializers), null);
         #broken_accessor_storage = __runInitializers(this, _broken_initializers, new Set());
         /** The image addresses that failed to load, shown as text. @internal */
         get broken() { return this.#broken_accessor_storage; }
@@ -392,6 +457,9 @@ let MosaicaItemCard = (() => {
             if (id !== this.expandedFor) {
                 this.expandedFor = id;
                 this.expanded = false;
+                this.opened = new Set();
+                this.clipped = new Set();
+                this.copied = '';
             }
             const store = this.resolvedStore;
             if (!store || !store.get('meta') || !meta || !this.isConnected)
@@ -410,6 +478,55 @@ let MosaicaItemCard = (() => {
                 });
             }
         }
+        connectedCallback() {
+            super.connectedCallback();
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            this.resized ??= new ResizeObserver(() => this.measure());
+            this.resized.observe(this);
+        }
+        disconnectedCallback() {
+            this.resized?.disconnect();
+            super.disconnectedCallback();
+        }
+        updated(changed) {
+            super.updated(changed);
+            this.measure();
+        }
+        /**
+         * Note which clamped texts are cut short at the card's width, so each is offered whole. A text
+         * shown whole keeps what was noted while it was clamped, so the button that shows it stays.
+         */
+        measure() {
+            const clipped = new Set(this.clipped);
+            for (const el of Array.from(this.renderRoot.querySelectorAll('.clamp'))) {
+                const name = el.closest('[data-name]')?.dataset.name;
+                if (name === undefined)
+                    continue;
+                if (el.scrollHeight > el.clientHeight + 1)
+                    clipped.add(name);
+                else
+                    clipped.delete(name);
+            }
+            if (clipped.size !== this.clipped.size || [...clipped].some((name) => !this.clipped.has(name)))
+                this.clipped = clipped;
+        }
+        /** Copy the id to the clipboard and say in the status region how that went. */
+        async copy(id) {
+            const shown = this.expandedFor;
+            this.copied = '';
+            await this.updateComplete;
+            let copied = false;
+            try {
+                await navigator.clipboard.writeText(id);
+                copied = true;
+            }
+            catch {
+                // No clipboard on a page that is not secure, or the browser refused.
+            }
+            if (shown === this.expandedFor)
+                this.copied = copied ? 'Copied' : 'Could not copy';
+        }
         get shown() {
             // A card fed by property still takes the schema from an adopted store: declaration order and
             // view names and frames belong to the bundle.
@@ -423,104 +540,111 @@ let MosaicaItemCard = (() => {
         }
         render() {
             const { item, refusal, meta } = this.shown;
-            const close = html `<slot name="actions"></slot><button part="close" type="button" aria-label="Close" @click=${() => emit(this, 'mosaica-close', { what: 'item' })}>${icon('close', 14)}</button>`;
-            // The header row: what the card shows, and the close button where there is something to close.
-            const head = (content, closable) => html `<div part="title" class="head">${content}${closable ? close : nothing}</div>`;
-            const unavailable = (code, reason) => html `<div class="panel">${head(refusedState('Item unavailable', code, null, reason), true)}</div>`;
+            // The close button appears only where there is something to close.
+            let closable = true;
+            let state = html `<span part="state" data-state="shown"></span>`;
             if (refusal)
-                return unavailable(refusal.code, reasonOf(refusal));
-            if (!item) {
+                state = refusedState('Item unavailable', refusal.code, null, reasonOf(refusal));
+            else if (!item) {
                 const pick = this.pick;
                 // A broken pick is a fault in the layer; its details stay on the map's `lastPick`.
                 if (pick?.kind === 'broken')
-                    return unavailable(null, null);
-                if (pick?.kind === 'miss')
-                    return html `<div class="panel">${head(html `<span part="state" data-state="empty">No item here</span>`, true)}</div>`;
-                const state = stateOf(this.resolvedStore?.get('status'));
-                if (state === 'detached')
-                    return html `<div class="panel">${head(renderState('detached', null), false)}</div>`;
-                return html `<div class="panel">${head(html `<span part="state" data-state="empty">No item selected</span>`, false)}</div>`;
+                    state = refusedState('Item unavailable', null, null, null);
+                else if (pick?.kind === 'miss')
+                    state = html `<span part="state" data-state="empty">No item here</span>`;
+                else {
+                    closable = false;
+                    state = stateOf(this.resolvedStore?.get('status')) === 'detached' ? renderState('detached', null) : html `<span part="state" data-state="empty">No item selected</span>`;
+                }
             }
-            const declared = meta?.declaredScalars ?? [];
-            const { fields } = item.detail;
-            const names = Object.keys(fields);
-            const ordered = [...declared.map((c) => c.name).filter((n) => n in fields), ...names.filter((n) => !declared.some((c) => c.name === n))];
-            const id = idString(item.id);
-            const titleName = this.titleField && fields[this.titleField] !== undefined && fields[this.titleField] !== null ? this.titleField : null;
-            const rest = this.namedFirst(ordered.filter((n) => n !== titleName));
-            const copy = () => void navigator.clipboard?.writeText(id);
-            if (this.compact)
-                return this.compactBody(item, meta, titleName, rest, id);
+            const card = item && !refusal ? this.card(item, meta) : null;
+            // One template whatever the card shows, so the state's region is in the page before its words change.
             return html `<div class="panel">
-      ${head(titleName
-                ? html `<div part="headline" class="card-title" data-name=${titleName}><slot name=${`field-${titleName}`}><span part="value">${this.text(titleName, fields[titleName], declared.find((c) => c.name === titleName))}</span></slot></div>`
-                : html `<div part="headline" class="card-title mono" data-name="mosaica_id">${id}</div>`, true)}
-      <span part="state" data-state="shown"></span>
-      ${this.views(item.detail.views, meta)}
-      <div class="field">
-        ${rest.map((name) => this.field(name, fields[name], declared.find((c) => c.name === name)))}
-        ${titleName
-                ? html `<div part="field" data-name="mosaica_id" style="display:contents"><span part="label" class="k">mosaica_id</span><span part="value" class="v mono">${id}</span></div>`
+      <div part="title" class="head">
+        <h2 class="sr-only">Item</h2>
+        <div class=${card ? 'said' : 'said alone'} role="status">${state}</div>
+        ${card?.headline ?? nothing}
+        ${closable
+                ? html `<slot name="actions"></slot><button part="close" type="button" aria-label="Close" @click=${() => emit(this, 'mosaica-close', { what: 'item' })}>${icon('close', 14)}</button>`
                 : nothing}
       </div>
-      ${this.scoped(item.detail.scoped)}
-      <div class="row actions">
-        ${this.openButton(id, fields, html `${icon('open', 14)}Open`)}
-        <button part="copy" class="btn" type="button" @click=${copy}>Copy id</button>
-      </div>
+      ${card?.body ?? nothing}
     </div>`;
         }
-        /** The card under `compact`: headline and subtitle, three fields, and Show all beside Open. */
-        compactBody(item, meta, titleName, rest, id) {
+        /** An item's headline, for the header row, and what the card shows under it: the full card's, or under `compact` the shorter one's. */
+        card(item, meta) {
             const declared = meta?.declaredScalars ?? [];
+            const column = (name) => declared.find((c) => c.name === name);
             const { fields } = item.detail;
-            const subtitleName = this.subtitleField && this.subtitleField !== titleName && fields[this.subtitleField] !== undefined && fields[this.subtitleField] !== null ? this.subtitleField : null;
+            const names = Object.keys(fields);
+            const ordered = [...declared.map((c) => c.name).filter((n) => n in fields), ...names.filter((n) => !declared.some((c) => c.name === n))];
+            const id = idString(item.id);
+            const has = (name) => fields[name] !== undefined && fields[name] !== null;
+            const titleName = this.titleField && has(this.titleField) ? this.titleField : null;
+            const title = titleName ? this.text(titleName, fields[titleName], column(titleName)) : null;
+            const rest = this.namedFirst(ordered.filter((n) => n !== titleName));
+            const whole = !this.compact || this.expanded;
+            const h3 = titleName
+                ? html `<h3 part="headline" class=${whole ? 'card-title' : 'card-title clamp'} data-name=${titleName}><slot name=${`field-${titleName}`}><span part="value">${title}</span></slot></h3>`
+                : html `<h3 part="headline" class="card-title mono" data-name="mosaica_id">${id}</h3>`;
+            const idField = titleName
+                ? html `<div part="field" data-name="mosaica_id" style="display:contents"><dt part="label" class="k">mosaica_id</dt><dd part="value" class="v mono">${id}</dd></div>`
+                : nothing;
+            const field = (name) => this.field(name, fields[name], column(name), title);
+            const open = this.openButton(id, fields, this.compact ? nothing : icon('open', 14));
+            if (!this.compact) {
+                return {
+                    headline: h3,
+                    body: html `${this.views(item.detail.views, meta)}
+          <dl class="field">${rest.map(field)}${idField}</dl>
+          ${this.scoped(item.detail.scoped)}
+          <div class="row actions">
+            ${open}
+            <button part="copy" class="btn" type="button" @click=${() => void this.copy(id)}>Copy id</button>
+            <span class="sr-only" role="status">${this.copied}</span>
+          </div>`
+                };
+            }
+            const subtitleName = this.subtitleField && this.subtitleField !== titleName && has(this.subtitleField) ? this.subtitleField : null;
             const others = rest.filter((n) => n !== subtitleName);
             const total = others.length + (titleName ? 1 : 0);
-            const shown = this.expanded ? others : this.cardFields ? this.named(others) : others.slice(0, 3);
-            const headline = titleName
-                ? html `<div part="headline" class="card-title" data-name=${titleName}><slot name=${`field-${titleName}`}><span part="value">${this.text(titleName, fields[titleName], declared.find((c) => c.name === titleName))}</span></slot></div>`
-                : html `<div part="headline" class="card-title mono" data-name="mosaica_id">${id}</div>`;
-            const showAll = total > shown.length || this.expanded
-                ? html `<button part="show-all" class="more-link" type="button" aria-expanded=${this.expanded ? 'true' : 'false'} @click=${() => (this.expanded = !this.expanded)}>${this.expanded ? 'Show fewer' : `Show all ${total.toLocaleString('en-GB')} fields`}</button>`
+            const few = this.cardFields ? this.named(others) : others.slice(0, 3);
+            const more = total > few.length;
+            // Show all is there for the fields left out, and for any text the card cuts short.
+            const showAll = more || this.expanded || this.clipped.size > 0
+                ? html `<button part="show-all" class="more-link" type="button" aria-expanded=${this.expanded ? 'true' : 'false'} @click=${() => (this.expanded = !this.expanded)}>${this.expanded ? (more ? 'Show fewer' : 'Show less') : more ? `Show all ${total.toLocaleString('en-GB')} fields` : 'Show all'}</button>`
                 : null;
-            const open = this.openButton(id, fields, 'Open');
             const subtitle = subtitleName
-                ? html `<div part="subtitle" data-name=${subtitleName}><slot name=${`field-${subtitleName}`}>${this.text(subtitleName, fields[subtitleName], declared.find((c) => c.name === subtitleName))}</slot></div>`
+                ? html `<div part="subtitle" class=${whole ? '' : 'clamp'} data-name=${subtitleName}><slot name=${`field-${subtitleName}`}>${this.text(subtitleName, fields[subtitleName], column(subtitleName))}</slot></div>`
                 : nothing;
-            return html `<div class="panel">
-      <div part="title" class="head"><div class="headline">${headline}${subtitle}</div><slot name="actions"></slot><button part="close" type="button" aria-label="Close" @click=${() => emit(this, 'mosaica-close', { what: 'item' })}>${icon('close', 14)}</button></div>
-      <span part="state" data-state="shown"></span>
-      <div class="body">
-        ${this.expanded ? this.views(item.detail.views, meta) : nothing}
-        <div class="field">
-          ${shown.map((name) => this.field(name, fields[name], declared.find((c) => c.name === name)))}
-          ${this.expanded && titleName
-                ? html `<div part="field" data-name="mosaica_id" style="display:contents"><span part="label" class="k">mosaica_id</span><span part="value" class="v mono">${id}</span></div>`
-                : nothing}
+            return {
+                headline: html `<div class="headline">${h3}${subtitle}</div>`,
+                body: html `<div class="body">
+          ${this.expanded ? this.views(item.detail.views, meta) : nothing}
+          <dl class="field">${(this.expanded ? others : few).map(field)}${this.expanded ? idField : nothing}</dl>
+          ${this.expanded ? this.scoped(item.detail.scoped) : nothing}
         </div>
-        ${this.expanded ? this.scoped(item.detail.scoped) : nothing}
-      </div>
-      ${showAll || open !== nothing ? html `<div class="foot">${showAll || html `<span></span>`}${open}</div>` : nothing}
-    </div>`;
+        ${showAll || open !== nothing ? html `<div class="foot">${showAll || html `<span></span>`}${open}</div>` : nothing}`
+            };
         }
         /**
          * Open, where the host says what it does: a button that calls `open`, else a link to `open-url`
-         * filled from the item, else nothing. Each fires `mosaica-open`.
+         * filled from the item, which opens in a new tab and says so to a screen reader, else nothing.
+         * Each fires `mosaica-open`. `mark` is drawn before the word.
          */
-        openButton(id, fields, label) {
+        openButton(id, fields, mark) {
             const pressed = () => emit(this, 'mosaica-open', { id, fields });
             const open = this.open;
             if (open)
                 return html `<button part="open" class="btn" type="button" @click=${() => {
                     pressed();
                     open({ id, fields });
-                }}>${label}</button>`;
+                }}>${mark}Open</button>`;
             const href = this.openUrl ? openAddress(this.openUrl, { mosaica_id: id, ...fields }) : null;
             if (!href)
                 return nothing;
             // A middle-click opens the link too, and is a press.
-            return html `<a part="open" class="btn" href=${href} target="_blank" rel="noopener noreferrer" @click=${pressed} @auxclick=${(e) => e.button === 1 && pressed()}>${label}</a>`;
+            return html `<a part="open" class="btn" href=${href} target="_blank" rel="noopener noreferrer" @click=${pressed} @auxclick=${(e) => e.button === 1 && pressed()}>${mark}Open<span class="sr-only"> (opens in a new tab)</span></a>`;
         }
         /** The fields of `fields` that `card-fields` names, in its order. */
         named(fields) {
@@ -549,8 +673,8 @@ let MosaicaItemCard = (() => {
             if (positions.length === 0)
                 return nothing;
             const current = this.resolvedStore?.get('view').id ?? '';
-            return html `<span part="label" class="xs muted">In views</span>
-      <div class="chips">
+            return html `<span part="label" class="xs muted" id="views">In views</span>
+      <div class="chips" role="group" aria-labelledby="views">
         ${positions.map((p) => {
                 const view = meta?.views.find((v) => v.id === p.id) ?? null;
                 const here = p.id === current;
@@ -586,30 +710,39 @@ let MosaicaItemCard = (() => {
             if (keys.length === 0)
                 return nothing;
             return html `<div part="scoped">
-      ${keys.map((key) => html `<div part="key" class="hd" data-key=${key}>${key}</div>
-          <div class="field" data-key=${key}>
+      ${keys.map((key) => html `<h4 part="key" class="hd" data-key=${key}>${key}</h4>
+          <dl class="field" data-key=${key}>
             ${Object.keys(scoped)
                 .filter((family) => key in (scoped[family] ?? {}))
-                .map((family) => html `<div part="field" data-name=${family} data-key=${key} style="display:contents"><span part="label" class="k">${columnCaption(family)}</span><span part="value" class="v">${present(scoped[family][key], undefined)}</span></div>`)}
-          </div>`)}
+                .map((family) => html `<div part="field" data-name=${family} data-key=${key} style="display:contents"><dt part="label" class="k">${columnCaption(family)}</dt><dd part="value" class="v">${present(scoped[family][key], undefined)}</dd></div>`)}
+          </dl>`)}
     </div>`;
         }
-        /** One field, presented by its declared type; prose and images span the grid. */
-        field(name, value, column) {
+        /**
+         * One field, presented by its declared type; prose and images span the grid. An image's
+         * alternative text is the item's `headline` where it has one, since its caption is the label
+         * above it. On the full card, prose a clamp cuts short has a button that shows it whole.
+         */
+        field(name, value, column, headline) {
             const caption = column ? columnCaption(name) : name;
             const image = this.imageOf(name, value);
             if (image) {
                 const failed = () => (this.broken = new Set([...this.broken, image]));
                 return html `<div part="field" data-name=${name} data-image>
-        <span part="label" class="k">${caption}</span>
-        <slot name=${`field-${name}`}><img part="image" src=${image} alt=${caption} loading="lazy" referrerpolicy="no-referrer" @error=${failed} /></slot>
+        <dt part="label" class="k">${caption}</dt>
+        <dd part="value" class="v"><slot name=${`field-${name}`}><img part="image" src=${image} alt=${headline ?? caption} loading="lazy" referrerpolicy="no-referrer" @error=${failed} /></slot></dd>
       </div>`;
             }
             const text = this.text(name, value, column);
             const prose = text.length > 60;
+            const whole = this.compact ? this.expanded : this.opened.has(name);
+            const toggle = () => (this.opened = new Set(whole ? [...this.opened].filter((n) => n !== name) : [...this.opened, name]));
             return html `<div part="field" data-name=${name} ?data-prose=${prose} style=${prose ? nothing : 'display:contents'}>
-      <span part="label" class="k">${caption}</span>
-      <slot name=${`field-${name}`}><span part="value" class="v" title=${prose ? text : nothing}>${text}</span></slot>
+      <dt part="label" class="k">${caption}</dt>
+      <dd part="value" class="v" title=${prose ? text : nothing}><slot name=${`field-${name}`}>${prose && !whole ? html `<span class="clamp">${text}</span>` : text}</slot></dd>
+      ${prose && !this.compact && (whole || this.clipped.has(name))
+                ? html `<dd><button part="more" class="more-link" type="button" aria-expanded=${whole ? 'true' : 'false'} aria-label=${`${whole ? 'Show less' : 'Show more'} of ${caption}`} @click=${toggle}>${whole ? 'Show less' : 'Show more'}</button></dd>`
+                : nothing}
     </div>`;
         }
     };
@@ -658,7 +791,7 @@ function present(value, column) {
     if (typeof value === 'number')
         return Number.isInteger(value) ? value.toLocaleString('en-GB') : String(value);
     if (typeof value === 'boolean')
-        return value ? 'yes' : 'no';
+        return BOOL_WORDS[value ? 'true' : 'false'];
     return String(value);
 }
 attachContextRoot();

package/dist/key-picker.d.ts

@@ -14,7 +14,8 @@ import { MosaicaElement } from './base.js';
  * @csspart label - The caption, the group's name.
  * @csspart entry - The row of buttons and select.
  * @csspart select - The select.
- * @csspart step - A previous or next button, with `data-direction` set to `prev` or `next`.
+ * @csspart step - A previous or next button, named with the group, with `data-direction` set to
+ *   `prev` or `next`.
  */
 export declare class MosaicaKeyPicker extends MosaicaElement {
     static styles: import("lit").CSSResult[];

package/dist/key-picker.js

@@ -19,7 +19,8 @@ import { chrome, tokens } from './tokens.js';
  * @csspart label - The caption, the group's name.
  * @csspart entry - The row of buttons and select.
  * @csspart select - The select.
- * @csspart step - A previous or next button, with `data-direction` set to `prev` or `next`.
+ * @csspart step - A previous or next button, named with the group, with `data-direction` set to
+ *   `prev` or `next`.
  */
 export class MosaicaKeyPicker extends MosaicaElement {
     static styles = [
@@ -107,11 +108,11 @@ export class MosaicaKeyPicker extends MosaicaElement {
         return html `<div part="field">
       <span part="label" class="muted">${heading}</span>
       <div part="entry" class="row">
-        ${step('prev', previous, -1, 'Previous')}
+        ${step('prev', previous, -1, `Previous ${heading}`)}
         <select part="select" aria-label=${heading} @change=${(e) => switchView(this, s, meta, e.target.value)}>
           ${views.map((v) => html `<option value=${v.id} ?selected=${v.id === current.id}>${this.option(meta, v)}</option>`)}
         </select>
-        ${step('next', next, 1, 'Next')}
+        ${step('next', next, 1, `Next ${heading}`)}
       </div>
     </div>`;
     }

package/dist/layer-picker.d.ts

@@ -3,7 +3,8 @@ import { MosaicaElement } from './base.js';
 /**
  * Put the layer picker beside a map when the bundle has annotation layers that viewers should be
  * able to turn on and off. A layer that others depend on, such as a clustering and its labels, has
- * one checkbox, so that the whole group is turned on together.
+ * one checkbox, so that the whole group is turned on together. The row's `title` names the layers
+ * it turns on, and a screen reader hears them as the checkbox's description.
  *
  * Filter layers draw nothing, so the picker names them in a note instead of giving them checkboxes.
  * Viewers filter by a filter layer from its card in `<mosaica-filter-panel>`, or browse it in
@@ -19,7 +20,8 @@ import { MosaicaElement } from './base.js';
  * @csspart refusal - The words "View refused", with `data-code`, in the refused state.
  * @csspart reason - The server's reason for a refusal, under "View refused".
  * @csspart entry - One layer that draws, with `data-layer`.
- * @csspart name - A layer's title, or its name if it has no title.
+ * @csspart name - A layer's title, or its name if it has no title, on one line unless
+ *   `--mosaica-long-text` is `normal`.
  * @csspart note - The note naming the filter layers, such as "Venues can be used as a filter
  *   only.", with `data-layers` listing their names.
  */