@fusion.dev/helix-headless 0.146.0 → 0.148.0

package/dist/kbd/root/kbd-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { ariaChord, chordParts, customElement, elementById, HelixElement, HelixShortcutEvent, matchesChord, onApple, printableChord, } from '@fusion.dev/helix-core';
+import { ariaChord, chordParts, customElement, elementById, HelixElement, HelixShortcutEvent, keyNames, matchesChord, onApple, printableChord, wordsConverter, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { claimShortcut, releaseShortcut } from '../shortcut.js';
@@ -29,49 +29,12 @@ const UNTYPED = new Set([
     'reset',
     'submit',
 ]);
-const APPLE = {
-    alt: '⌥',
-    backspace: '⌫',
-    cmd: '⌘',
-    ctrl: '⌃',
-    del: '⌦',
-    down: '↓',
-    enter: '↵',
-    esc: 'Esc',
-    left: '←',
-    meta: '⌘',
-    mod: '⌘',
-    opt: '⌥',
-    right: '→',
-    shift: '⇧',
-    space: 'Space',
-    tab: '⇥',
-    up: '↑',
-};
-const ELSEWHERE = {
-    alt: 'Alt',
-    backspace: 'Backspace',
-    cmd: 'Win',
-    ctrl: 'Ctrl',
-    del: 'Del',
-    down: '↓',
-    enter: 'Enter',
-    esc: 'Esc',
-    left: '←',
-    meta: 'Win',
-    mod: 'Ctrl',
-    opt: 'Alt',
-    right: '→',
-    shift: 'Shift',
-    space: 'Space',
-    tab: 'Tab',
-    up: '↑',
-};
 let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
     constructor() {
         super(...arguments);
         this.caps = false;
         this.for = '';
+        this.keyLabels = {};
         this.keys = '';
         this.handleKeydown = (event) => {
             const press = event;
@@ -88,9 +51,11 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
             }
             const shortcut = new HelixShortcutEvent({ keys: this.keys });
             this.dispatchEvent(shortcut);
-            if (!shortcut.defaultPrevented) {
-                press.preventDefault();
+            if (shortcut.defaultPrevented) {
+                return;
             }
+            press.preventDefault();
+            this.act();
         };
     }
     connectedCallback() {
@@ -133,14 +98,7 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
         }
     }
     get label() {
-        const apple = !this.hydrating && onApple();
-        const names = apple ? APPLE : ELSEWHERE;
-        const own = this.keyLabels ?? {};
-        const keys = chordParts(this.keys).map((part) => {
-            const name = part.toLowerCase();
-            return own[name] ?? names[name] ?? (part.length === 1 ? part.toUpperCase() : part);
-        });
-        return { keys, separator: apple ? '' : '+' };
+        return keyNames(chordParts(this.keys), !this.hydrating && onApple(), this.keyLabels ?? {});
     }
     listen() {
         if (!this.within || this.keys === '') {
@@ -157,6 +115,18 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
         this.listening?.removeEventListener('keydown', this.handleKeydown);
         this.listening = undefined;
     }
+    act() {
+        const control = this.activate && this.for !== '' ? elementById(this, this.for) : null;
+        if (!(control instanceof HTMLElement)) {
+            return;
+        }
+        if (this.activate === 'click') {
+            control.click();
+        }
+        else {
+            control.focus();
+        }
+    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
@@ -173,6 +143,9 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
         return html `${keys.map((key, index) => html `${index > 0 && separator !== '' ? html `<span part="separator">${separator}</span>` : nothing}<span part="key">${key}</span>`)}`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessKbd.prototype, "activate", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessKbd.prototype, "caps", void 0);
@@ -180,7 +153,7 @@ __decorate([
     property()
 ], HelixHeadlessKbd.prototype, "for", void 0);
 __decorate([
-    property({ attribute: 'key-labels', type: Object })
+    property({ attribute: 'key-labels', converter: wordsConverter })
 ], HelixHeadlessKbd.prototype, "keyLabels", void 0);
 __decorate([
     property()

package/dist/legend/hidden-series.d.ts

@@ -1,8 +1,16 @@
+/** A list as it may be given: names separated by commas, or an array of names. */
+export type NameList = string | readonly string[];
+/**
+ * The names in a list, written either way: split on commas from a string,
+ * trimmed and without blanks from an array, which is what a framework hands
+ * over for `hiddenSeries={['Direct']}`.
+ */
+export declare const namesIn: (list: NameList) => string[];
 /** Whether a name is in the list, matched without regard to case, as a heading is. */
-export declare const isHidden: (list: string, name: string) => boolean;
+export declare const isHidden: (list: NameList, name: string) => boolean;
 /**
  * The list a press on this name leaves: without it where it was hidden, and
  * with it at the end where it was shown. Written back with a comma and a
  * space, as a person writes a list.
  */
-export declare const toggledNames: (list: string, name: string) => string;
+export declare const toggledNames: (list: NameList, name: string) => string;

package/dist/legend/hidden-series.js

@@ -1,11 +1,14 @@
 import { commaList, seriesKey } from '@fusion.dev/helix-core';
+export const namesIn = (list) => typeof list === 'string'
+    ? commaList(list)
+    : list.map((name) => String(name).trim()).filter((name) => name !== '');
 export const isHidden = (list, name) => {
     const key = seriesKey(name);
-    return commaList(list).some((one) => seriesKey(one) === key);
+    return namesIn(list).some((one) => seriesKey(one) === key);
 };
 export const toggledNames = (list, name) => {
     const key = seriesKey(name);
-    const now = commaList(list);
+    const now = namesIn(list);
     const next = isHidden(list, name)
         ? now.filter((one) => seriesKey(one) !== key)
         : [...now, name.trim()];

package/dist/legend/root/legend-root.d.ts

@@ -1,5 +1,5 @@
 import { HelixElement, KeyboardNavigationController, SourceController } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A list of the series in a chart, each name beside the color it is drawn in.
  *
@@ -21,9 +21,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * **`toggles` makes each entry a button that hides its series.** Every chart
  * reading the same table draws without a hidden series and fits its scale to
  * the rest, and the series keeps its color. The button says whether its
- * series is shown with `aria-pressed`. The buttons are one tab stop: the
- * arrow keys move between them, Home and End go to the first and the last,
- * and a typed letter goes to the next name starting with it.
+ * series is shown with `aria-pressed`. The buttons are a `toolbar`, named
+ * as the list is, and one tab stop: the arrow keys move between them, Home
+ * and End go to the first and the last, and a typed letter goes to the next
+ * name starting with it.
  * `hidden-series` holds the hidden names,
  * so a page can start with some hidden or read which are. Two legends on one
  * table show the same hidden series: the list written last wins, and the
@@ -42,7 +43,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * `::part(entry)::before` in your stylesheet. The entry holds its series color
  * as `--chart-series`, and this tier ships no CSS.
  * @csspart entry-hidden - An entry whose series is hidden. Set alongside `entry`.
- * @csspart list - The list of entries.
+ * @csspart list - The list of entries, a `toolbar` under `toggles`.
  * @csspart name - One series name.
  * @csspart toggle - The button around a name under `toggles`, which hides or shows its series.
  */
@@ -84,9 +85,11 @@ export declare class HelixHeadlessLegend extends HelixElement {
      *
      * Set it to start with series hidden. Every chart reading the same table
      * draws without them. Commas only, because a column's heading may hold a
-     * space. For a ring the names are the rows.
+     * space. For a ring the names are the rows. An array of names set on the
+     * property works too, as React sets `hiddenSeries={['Direct']}`; a toggle
+     * writes the list back as a string.
      */
-    hiddenSeries: string;
+    hiddenSeries: string | readonly string[];
     /**
      * The name of the list, which a screen reader announces before its entries.
      *
@@ -176,6 +179,21 @@ export declare class HelixHeadlessLegend extends HelixElement {
      */
     protected names(): string[];
     protected render(): TemplateResult;
+    /**
+     * What an entry shows before its name, behind a seam a tier can fill.
+     *
+     * Nothing on this tier, which ships no CSS: the styled tier and a page draw
+     * the swatch with `::part(entry)::before`, from the entry's `--chart-series`.
+     * A tier that draws its swatch as an element, or a mark per series, returns
+     * it here, and `index` says which palette slot the series takes.
+     */
+    protected renderSwatch(_name: string, _index: number): TemplateResult | typeof nothing;
+    /**
+     * An entry's name, behind a seam a tier can move: a value beside the name,
+     * or the name in other words. `index` is the series' place among the
+     * entries. A toggle holds the same name inside its button.
+     */
+    protected renderName(name: string, _index: number): TemplateResult;
     /**
      * The button around a name under `toggles`, behind a seam a tier can move.
      *

package/dist/legend/root/legend-root.js

@@ -4,10 +4,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { commaList, customElement, HelixBeforeChangeEvent, HelixElement, KeyboardNavigationController, requestChange, SourceController, seriesIndex, seriesKey, typeaheadBy, } from '@fusion.dev/helix-core';
+import { customElement, focusItemOf, HelixElement, KeyboardNavigationController, requestValue, SourceController, seriesIndex, seriesKey, typeaheadBy, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { isHidden, toggledNames } from '../hidden-series.js';
+import { isHidden, namesIn, toggledNames } from '../hidden-series.js';
 let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
     constructor() {
         super(...arguments);
@@ -19,14 +19,7 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
         this.stop = 0;
         this.keys = new KeyboardNavigationController(this, {
             items: () => this.toggles
-                ? [...this.renderRoot.querySelectorAll('[part="toggle"]')].map((button) => ({
-                    contains: (node) => button.contains(node),
-                    disabled: false,
-                    focusItem: () => button.focus(),
-                    select: () => { },
-                    selected: false,
-                    words: button.textContent?.trim() ?? '',
-                }))
+                ? [...this.renderRoot.querySelectorAll('[part="toggle"]')].map((button) => focusItemOf(button, { words: button.textContent?.trim() ?? '' }))
                 : [],
             origin: 'focus',
             selects: () => false,
@@ -41,15 +34,16 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
         }
         const table = this.source.element;
         const asked = changed.has('hiddenSeries') &&
-            !(changed.get('hiddenSeries') === undefined && this.hiddenSeries === '');
-        this.writes = asked || (table !== null && table !== this.wroteTo && this.hiddenSeries !== '');
+            !(changed.get('hiddenSeries') === undefined && namesIn(this.hiddenSeries).length === 0);
+        this.writes =
+            asked || (table !== null && table !== this.wroteTo && namesIn(this.hiddenSeries).length > 0);
         if (!this.writes && table !== null) {
             this.follow();
         }
     }
     follow() {
         const hidden = this.source.hidden;
-        const now = commaList(this.hiddenSeries);
+        const now = namesIn(this.hiddenSeries);
         const next = this.names().filter((name) => hidden.has(seriesKey(name)));
         const same = next.length === now.length &&
             next.every((name) => now.some((one) => seriesKey(one) === seriesKey(name)));
@@ -61,7 +55,7 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
         super.updated(changed);
         if (this.writes) {
             this.writes = false;
-            this.wroteTo = this.source.hide(commaList(this.hiddenSeries), this.names()) ?? this.wroteTo;
+            this.wroteTo = this.source.hide(namesIn(this.hiddenSeries), this.names()) ?? this.wroteTo;
         }
     }
     disconnectedCallback() {
@@ -72,14 +66,8 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
         super.disconnectedCallback();
     }
     toggle(name) {
-        requestChange({
-            apply: (value) => {
-                this.hiddenSeries = value;
-                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-            },
-            event: (value) => new HelixBeforeChangeEvent({ value }),
-            host: this,
-            next: toggledNames(this.hiddenSeries, name),
+        requestValue(this, toggledNames(this.hiddenSeries, name), (value) => {
+            this.hiddenSeries = value;
         });
     }
     names() {
@@ -93,20 +81,31 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
         const named = this.label || this.source.element?.querySelector('caption')?.textContent?.trim();
         const names = this.names();
         const stop = Math.min(this.stop, names.length - 1);
-        return html `<ul aria-label=${named || nothing} part="list" role="list">
+        const toolbar = this.toggles;
+        return html `<ul
+      aria-label=${named || nothing}
+      part="list"
+      role=${toolbar ? 'toolbar' : 'list'}
+    >
       ${names.map((name, index) => {
             const off = isHidden(this.hiddenSeries, name);
             return html `<li
           data-series=${seriesIndex(index)}
           part="entry${off ? ' entry-hidden' : ''}"
           style="--chart-series: var(--chart-series-${seriesIndex(index)})"
-          role="listitem"
+          role=${toolbar ? 'none' : 'listitem'}
         >
-          ${this.toggles ? this.renderToggle(name, off, index, index === stop) : html `<span part="name">${name}</span>`}
+          ${this.renderSwatch(name, index)}${toolbar ? this.renderToggle(name, off, index, index === stop) : this.renderName(name, index)}
         </li>`;
         })}
     </ul>`;
     }
+    renderSwatch(_name, _index) {
+        return nothing;
+    }
+    renderName(name, _index) {
+        return html `<span part="name">${name}</span>`;
+    }
     renderToggle(name, off, index = 0, holds = true) {
         return html `<button
       aria-pressed=${off ? 'false' : 'true'}
@@ -118,7 +117,7 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
             this.stop = index;
         }}
     >
-      <span part="name">${name}</span>
+      ${this.renderName(name, index)}
     </button>`;
     }
 };

package/dist/lightbox/root/lightbox-root.d.ts

@@ -30,7 +30,11 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  * about. `+` and `-` zoom in and out from the keyboard, and `0` puts it back.
  * The scale and the offset are on the `viewport` part as `--lightbox-zoom`,
  * `--lightbox-pan-x` and `--lightbox-pan-y`, written only while zoomed, and a
- * swipe moves to the next item only while the item is at its own size.
+ * swipe moves to the next item only while the item is at its own size. With
+ * `controls`, the viewer also draws zoom-out and zoom-in controls, for a
+ * pointer with no wheel and no second finger. Once a reader stops zooming, the
+ * live region says the new scale in the words of `zoom-status-label`, such as
+ * "Zoomed to 150%".
  *
  * Each item is a slide: a `group` with the role description in
  * `slide-role-label`, named by its `label` or by `slide-label`. A touch or a pen
@@ -55,6 +59,8 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  * @slot header - Content above the item, such as a title and a close button.
  * @slot next-icon - Replaces the glyph inside the next control.
  * @slot previous-icon - Replaces the glyph inside the previous control.
+ * @slot zoom-in-icon - Replaces the glyph inside the zoom-in control.
+ * @slot zoom-out-icon - Replaces the glyph inside the zoom-out control.
  *
  * @event {Event} close - Fired when the viewer closes. The component dispatches it again from the host, because the dialog's own event does not leave the shadow root.
  * @event {HelixActivateEvent} helix-activate - Fired after the shown item changes, when the element already holds the new item.
@@ -67,12 +73,18 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  * @csspart dialog - The native dialog element.
  * @csspart dismiss - The close control, drawn with `controls`.
  * @csspart dismiss-mark - The glyph on the close control, where none is slotted.
- * @csspart live - The live region that announces which item is shown.
+ * @csspart footer - The slot the footer is in. It draws no box until you give it one.
+ * @csspart header - The slot the header is in. It draws no box until you give it one.
+ * @csspart live - The live region that announces which item is shown, and the scale once a reader has zoomed.
  * @csspart next - The control that shows the next item, drawn with `controls`.
  * @csspart next-mark - The glyph on the next control, where none is slotted.
  * @csspart previous - The control that shows the previous item, drawn with `controls`.
  * @csspart previous-mark - The glyph on the previous control, where none is slotted.
  * @csspart viewport - The box the current item is shown in.
+ * @csspart zoom-in - The control that zooms in by half again, drawn with `controls` where `max-zoom` allows zooming.
+ * @csspart zoom-in-mark - The glyph on the zoom-in control, where none is slotted.
+ * @csspart zoom-out - The control that zooms back out, drawn with `controls` where `max-zoom` allows zooming.
+ * @csspart zoom-out-mark - The glyph on the zoom-out control, where none is slotted.
  *
  * @cssproperty --lightbox-pan-x - How far the zoomed item is moved across from the middle of the viewport, in pixels, toward the right. Written only while zoomed.
  * @cssproperty --lightbox-pan-y - How far the zoomed item is moved down from the middle of the viewport, in pixels. Written only while zoomed.
@@ -86,12 +98,14 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  */
 export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
     /**
-     * Draws the viewer's own previous, next and close controls over the picture.
+     * Draws the viewer's own previous, next and close controls over the picture,
+     * and zoom-out and zoom-in controls where `max-zoom` allows zooming.
      *
      * Off by default, for a viewer whose chrome you compose in the `header` and
      * `footer` slots. The controls hide with the rest of the chrome while the
-     * reader is idle, and the previous and next ones say they are unavailable at
-     * either end of a set that does not `loop`.
+     * reader is idle, the previous and next ones say they are unavailable at
+     * either end of a set that does not `loop`, and the zoom ones at either end
+     * of the scale.
      */
     controls: boolean;
     /**
@@ -156,16 +170,36 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
      * counter in the chrome can empty this and say it themselves.
      */
     statusLabel: string;
+    /**
+     * The zoom-in control's accessible name.
+     */
+    zoomInLabel: string;
+    /**
+     * The zoom-out control's accessible name.
+     */
+    zoomOutLabel: string;
+    /**
+     * What the live region says once a reader has stopped zooming, with the
+     * scale as a whole `{percent}` filled in. Empty it to say nothing.
+     */
+    zoomStatusLabel: string;
     /** Whether the reader has been still long enough to hide the chrome. */
     private resting;
     /** Whether the viewer is filling the screen. */
     private filled;
     /** What the live region is currently saying. */
     private announcement;
+    /** The scale the shown item is drawn at, which the zoom controls read. */
+    private zoomScale;
+    private readonly zoomSaid;
+    /** Whether the zoom is being put back because the item changed, which says nothing. */
+    private quietZoom;
     protected readonly swipes: SwipeController;
     private readonly zoomer;
     /** Writes the zoom on the viewport, and nothing at the item's own size. */
     private drawZoom;
+    /** Says the new scale in the live region, a moment after the last change. */
+    private sayZoom;
     /**
      * Zooms the shown item to `scale`, held between `1` and `max-zoom`, about
      * the middle of the viewport.
@@ -243,6 +277,10 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
     private readonly handleKeydown;
     /** `+` and `-` zoom in and out by half again, and `0` puts the item back. Returns whether it was one. */
     private zoomKey;
+    /** Zooms in by half again, as `+` and the zoom-in control do. */
+    private zoomIn;
+    /** Zooms out by as much, as `-` and the zoom-out control do. */
+    private zoomOut;
     /** Home and End, which are an index rather than a step. */
     private toEnd;
     /** The item on screen: the one `active` names, or the first where it names none. */
@@ -288,6 +326,13 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
      * control that has just shown the last picture keeps focus.
      */
     protected renderControls(): TemplateResult;
+    /**
+     * Zoom out and zoom in, for a pointer with no wheel and no second finger.
+     *
+     * Out before in, so they read as a scale runs. `aria-disabled` at either
+     * limit, as the previous and next controls are at the ends.
+     */
+    protected renderZoomControls(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/lightbox/root/lightbox-root.js

@@ -4,12 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { CommandController, customElement, deepActiveElement, deepContains, drawDismiss, drawDismissGlyph, FullscreenController, fillTemplate, HelixElement, hostAria, IdleController, inlineStep, isRtl, keyClaimed, lockScroll, MixinControllerActive, MixinControllerOpen, resolveActiveItem, SwipeController, swipeStep, unlockScroll, whenHydrated, } from '@fusion.dev/helix-core';
-import { caretLeft, caretRight } from '@fusion.dev/helix-icons';
+import { CommandController, customElement, DelayController, deepActiveElement, deepContains, drawDismiss, drawDismissGlyph, FullscreenController, fillTemplate, HelixElement, hostAria, IdleController, inlineStep, isRtl, keyClaimed, lockScroll, MixinControllerActive, MixinControllerOpen, resolveActiveItem, SwipeController, swipeStep, unlockScroll, whenHydrated, } from '@fusion.dev/helix-core';
+import { caretLeft, caretRight, minus, plus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { HelixHeadlessLightboxItem } from '../item/lightbox-item.js';
+import { percentOf } from '../zoom.js';
 import { ZoomController } from '../zoom-controller.js';
 let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerActive(MixinControllerOpen(HelixElement)) {
     constructor() {
@@ -26,9 +27,15 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         this.slideLabel = '{index} of {count}';
         this.slideRoleLabel = 'slide';
         this.statusLabel = '{index} of {count}';
+        this.zoomInLabel = 'Zoom in';
+        this.zoomOutLabel = 'Zoom out';
+        this.zoomStatusLabel = 'Zoomed to {percent}%';
         this.resting = false;
         this.filled = false;
         this.announcement = '';
+        this.zoomScale = 1;
+        this.zoomSaid = new DelayController(this, { renders: false });
+        this.quietZoom = false;
         this.swipes = new SwipeController(this, {
             axis: () => (this.open && !this.zoomer.engaged ? 'x' : undefined),
             end: (dx, _dy, vx) => {
@@ -126,13 +133,26 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         viewport?.style.setProperty('--lightbox-pan-y', zoomed ? `${Math.round(pan.y)}px` : '');
         this.toggleState('zoomed', zoomed);
         this.idle.stir();
+        if (scale !== this.zoomScale) {
+            this.zoomScale = scale;
+            this.sayZoom();
+        }
+    }
+    sayZoom() {
+        if (this.quietZoom || !this.open || this.zoomStatusLabel === '') {
+            this.zoomSaid.cancel();
+            return;
+        }
+        this.zoomSaid.start(400, () => {
+            this.announcement = fillTemplate(this.zoomStatusLabel, { percent: percentOf(this.zoomScale) });
+        });
     }
     zoomTo(scale) {
         this.zoomer.zoomTo(scale);
     }
     chromeHasFocus() {
         const active = deepActiveElement();
-        const own = this.shadowRoot?.activeElement?.matches('[part="previous"], [part="next"], [part="dismiss"]');
+        const own = this.shadowRoot?.activeElement?.matches('[part="previous"], [part="next"], [part="dismiss"], [part="zoom-in"], [part="zoom-out"]');
         return (own === true ||
             this.knownChildren.some((child) => (child.slot === 'header' || child.slot === 'footer') && deepContains(child, active)));
     }
@@ -178,12 +198,11 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         if (this.maxZoom <= 1) {
             return false;
         }
-        const scale = this.zoomer.scale;
         if (key === '+' || key === '=') {
-            this.zoomer.zoomTo(scale * 1.5);
+            this.zoomIn();
         }
         else if (key === '-') {
-            this.zoomer.zoomTo(scale / 1.5);
+            this.zoomOut();
         }
         else if (key === '0') {
             this.zoomer.reset();
@@ -193,6 +212,12 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         }
         return true;
     }
+    zoomIn() {
+        this.zoomer.zoomTo(this.zoomer.scale * 1.5);
+    }
+    zoomOut() {
+        this.zoomer.zoomTo(this.zoomer.scale / 1.5);
+    }
     toEnd(at) {
         const target = this.items[at];
         if (target && target !== this.shown) {
@@ -209,7 +234,9 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         this.toggleState('idle', this.resting);
         this.toggleState('zoomable', this.maxZoom > 1);
         if (changed.has('active') || (changed.has('open') && !this.open)) {
+            this.quietZoom = true;
             this.zoomer.reset();
+            this.quietZoom = false;
         }
         this.say(changed);
     }
@@ -305,11 +332,11 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
       @pointerleave=${this.idle.leave}
       @pointermove=${this.idle.stir}
     >
-      <slot name="header"></slot>
+      <slot name="header" part="header"></slot>
       <div part="viewport">
         <slot></slot>
       </div>
-      <slot name="footer"></slot>
+      <slot name="footer" part="footer"></slot>
       ${this.controls ? this.renderControls() : nothing}
       ${this.counter ? html `<span part="counter" aria-hidden="true">${this.place()}</span>` : nothing}
       <span part="live" role="status" aria-live="polite">${this.announcement || nothing}</span>
@@ -342,12 +369,41 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
           </svg>
         </slot>
       </button>
+      ${this.maxZoom > 1 ? this.renderZoomControls() : nothing}
       ${drawDismiss({
             label: this.dismissLabel,
             mark: html `<slot name="dismiss-icon">${drawDismissGlyph()}</slot>`,
             onDismiss: () => this.close(),
         })}`;
     }
+    renderZoomControls() {
+        return html `<button
+        part="zoom-out"
+        type="button"
+        aria-label=${this.zoomOutLabel}
+        aria-disabled=${this.zoomScale <= 1 ? 'true' : nothing}
+        @click=${() => this.zoomOut()}
+      >
+        <slot name="zoom-out-icon">
+          <svg part="zoom-out-mark" fill="currentColor" viewBox=${minus.viewBox} aria-hidden="true">
+            ${unsafeSVG(minus.content)}
+          </svg>
+        </slot>
+      </button>
+      <button
+        part="zoom-in"
+        type="button"
+        aria-label=${this.zoomInLabel}
+        aria-disabled=${this.zoomScale >= this.maxZoom ? 'true' : nothing}
+        @click=${() => this.zoomIn()}
+      >
+        <slot name="zoom-in-icon">
+          <svg part="zoom-in-mark" fill="currentColor" viewBox=${plus.viewBox} aria-hidden="true">
+            ${unsafeSVG(plus.content)}
+          </svg>
+        </slot>
+      </button>`;
+    }
 };
 __decorate([
     property({ reflect: true, type: Boolean })
@@ -385,6 +441,15 @@ __decorate([
 __decorate([
     property({ attribute: 'status-label' })
 ], HelixHeadlessLightbox.prototype, "statusLabel", void 0);
+__decorate([
+    property({ attribute: 'zoom-in-label' })
+], HelixHeadlessLightbox.prototype, "zoomInLabel", void 0);
+__decorate([
+    property({ attribute: 'zoom-out-label' })
+], HelixHeadlessLightbox.prototype, "zoomOutLabel", void 0);
+__decorate([
+    property({ attribute: 'zoom-status-label' })
+], HelixHeadlessLightbox.prototype, "zoomStatusLabel", void 0);
 __decorate([
     state()
 ], HelixHeadlessLightbox.prototype, "resting", void 0);
@@ -394,6 +459,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessLightbox.prototype, "announcement", void 0);
+__decorate([
+    state()
+], HelixHeadlessLightbox.prototype, "zoomScale", void 0);
 HelixHeadlessLightbox = __decorate([
     customElement('helix-headless-lightbox')
 ], HelixHeadlessLightbox);

package/dist/lightbox/zoom.d.ts

@@ -20,3 +20,5 @@ export declare const zoomAt: (at: Offset, from: number, to: number, pan: Offset)
 export declare const spread: (a: Offset, b: Offset) => number;
 /** The point halfway between two fingers. */
 export declare const between: (a: Offset, b: Offset) => Offset;
+/** A scale as a whole percent, which is how a reader hears it: 1.5 is 150. */
+export declare const percentOf: (scale: number) => number;