@fusion.dev/helix-core 0.104.1 → 0.106.0

package/dist/mixins/mixin-tokens/mixin-tokens.d.ts

@@ -25,7 +25,7 @@ export declare class MixinTokensInterface {
      */
     maxTags: number;
     /**
-     * Whether the count is a control that shows the rest.
+     * Whether the count is a button that shows the hidden tokens.
      *
      * **Off by default, and that is about focus rather than caution.** The count
      * becomes a real button when this is set, which is a new stop in the tab
@@ -39,11 +39,12 @@ export declare class MixinTokensInterface {
      */
     expandable: boolean;
     /**
-     * What the collapsed count is called, since `+3` names nothing.
+     * The count button's label, read by screen readers. Its visible text, such
+     * as `+3`, does not say what it does.
      */
     expandLabel: string;
     /**
-     * What the control is called once everything is showing.
+     * The button's label, read by screen readers, once every token is showing.
      *
      * **The name and not the words on it**, which are a caret: expanded there is
      * no longer a number to show, and a phrase in its place would translate badly

package/dist/mixins/mixin-viewport/mixin-viewport.d.ts

@@ -11,33 +11,33 @@ export type ViewportControlsPlacement = 'top-start' | 'top-end' | 'bottom-start'
  * The API a pan-and-zoom surface has, as TypeScript sees it.
  */
 export declare class ViewportElement {
-    /** Which of the controls the surface draws, as a list of what to keep. */
+    /** Which controls to show, as a list such as `pan zoom fullscreen`, or `none`. A family adds words of its own. */
     controls?: string;
     /** Which corner the controls sit in. */
     controlsPlacement?: ViewportControlsPlacement;
-    /** What the control that fills the screen is called. */
+    /** The fullscreen button's label. */
     fullscreenLabel: string;
-    /** How long the reader may be still before the chrome hides, in milliseconds. */
+    /** How long, in milliseconds, before the header and footer hide when the user is inactive. `0` keeps them visible. */
     idleDelay: number;
-    /** What the control that pans down is called. */
+    /** The pan down button's label. */
     panDownLabel: string;
-    /** What the control that pans left is called. */
+    /** The pan left button's label. */
     panLeftLabel: string;
-    /** What the control that pans right is called. */
+    /** The pan right button's label. */
     panRightLabel: string;
-    /** How far one press moves the view, as a fraction of what is on screen. */
+    /** How far one press pans the view, as a fraction of its size. */
     panStep: number;
-    /** What the control that pans up is called. */
+    /** The pan up button's label. */
     panUpLabel: string;
-    /** What the control that zooms in is called. */
+    /** The zoom in button's label. */
     zoomInLabel: string;
-    /** What the control that zooms out is called. */
+    /** The zoom out button's label. */
     zoomOutLabel: string;
-    /** Asks for the view to move, which the consumer answers. */
+    /** Pans the view one step in a direction. */
     pan(to: ViewportWay): void;
-    /** Asks for the view to zoom, `1` in and `-1` out. */
+    /** Zooms the view one step: `1` zooms in and `-1` zooms out. */
     zoom(by: number): void;
-    /** Fills the screen with the surface, or comes back. */
+    /** Turns fullscreen on or off. */
     toggleFullscreen(): void;
     /** Whether the reader has been still long enough to hide the chrome. */
     protected resting: boolean;
@@ -49,7 +49,7 @@ export declare class ViewportElement {
     protected readonly fullscreen: FullscreenController;
     /** The key relay, bound by the family's own frame. */
     protected handleKeydown: (event: KeyboardEvent) => void;
-    /** What the group of controls is called, where the page says. */
+    /** The name of the group of controls, read by screen readers. */
     controlsLabel: string | undefined;
     /** What the group of controls is called where the page does not say, which each family says for itself. */
     protected get restingControlsLabel(): string;
@@ -63,6 +63,16 @@ export declare class ViewportElement {
     protected get controlsElement(): Element | null;
     /** Which controls the surface draws while `controls` is absent. */
     protected get restingControls(): string;
+    /** Whether `controls`, or the resting controls, names a group. */
+    protected drawsControls(group: string): boolean;
+    /** More buttons for the group of controls, after zoom, for a family that adds its own. */
+    protected renderMoreControls(): TemplateResult | typeof nothing;
+    /** Answers a key the family adds, and says whether it did. */
+    protected handleMoreKeys(event: KeyboardEvent): boolean;
+    /** What one pan control is called, for a family that draws its own. */
+    protected panLabel(way: ViewportWay): string;
+    /** The arrow drawn on one pan control, for a family that draws its own. */
+    protected panGlyph(way: ViewportWay): string;
 }
 /**
  * Grafts a pan-and-zoom surface: its controls, its keys, and the way out.

package/dist/mixins/mixin-viewport/mixin-viewport.js

@@ -40,6 +40,10 @@ export const MixinViewport = (Base) => {
                 if (target !== own && !own.matches('[part~="controls"]')) {
                     return;
                 }
+                if (this.handleMoreKeys(event)) {
+                    event.preventDefault();
+                    return;
+                }
                 const along = inlineStep(this, event.key);
                 if (along === 1) {
                     event.preventDefault();
@@ -88,9 +92,15 @@ export const MixinViewport = (Base) => {
         get restingControls() {
             return 'pan zoom fullscreen';
         }
-        draws(group) {
+        drawsControls(group) {
             return (this.controls ?? this.restingControls).split(/\s+/).includes(group);
         }
+        renderMoreControls() {
+            return nothing;
+        }
+        handleMoreKeys(_event) {
+            return false;
+        }
         sideOf(way) {
             if (way !== 'start' && way !== 'end') {
                 return way;
@@ -101,7 +111,7 @@ export const MixinViewport = (Base) => {
             const element = this;
             return !element.hydrating && isRtl(this);
         }
-        named(way) {
+        panLabel(way) {
             const side = this.sideOf(way);
             return side === 'up'
                 ? this.panUpLabel
@@ -111,7 +121,7 @@ export const MixinViewport = (Base) => {
                         ? this.panLeftLabel
                         : this.panRightLabel;
         }
-        glyph(way) {
+        panGlyph(way) {
             return { down: '↓', left: '←', right: '→', up: '↑' }[this.sideOf(way)] ?? '';
         }
         firstUpdated(changed) {
@@ -126,25 +136,26 @@ export const MixinViewport = (Base) => {
             return this.renderRoot?.querySelector('[part="controls"]') ?? null;
         }
         renderControls() {
-            const pan = this.draws('pan');
-            const zoom = this.draws('zoom');
-            const fullscreen = this.draws('fullscreen');
-            if (!pan && !zoom && !fullscreen) {
+            const pan = this.drawsControls('pan');
+            const zoom = this.drawsControls('zoom');
+            const fullscreen = this.drawsControls('fullscreen');
+            const more = this.renderMoreControls();
+            if (!pan && !zoom && !fullscreen && more === nothing) {
                 return nothing;
             }
             return html `<div part="controls" role="group" aria-label=${this.controlsLabel ?? this.restingControlsLabel}>
         ${pan
-                ? html `<button part="pan-up" aria-label=${this.named('up')} type="button" @click=${() => this.pan('up')}>
-                  ${this.glyph('up')}
+                ? html `<button part="pan-up" aria-label=${this.panLabel('up')} type="button" @click=${() => this.pan('up')}>
+                  ${this.panGlyph('up')}
                 </button>
-                <button part="pan-start" aria-label=${this.named('start')} type="button" @click=${() => this.pan('start')}>
-                  ${this.glyph('start')}
+                <button part="pan-start" aria-label=${this.panLabel('start')} type="button" @click=${() => this.pan('start')}>
+                  ${this.panGlyph('start')}
                 </button>
-                <button part="pan-end" aria-label=${this.named('end')} type="button" @click=${() => this.pan('end')}>
-                  ${this.glyph('end')}
+                <button part="pan-end" aria-label=${this.panLabel('end')} type="button" @click=${() => this.pan('end')}>
+                  ${this.panGlyph('end')}
                 </button>
-                <button part="pan-down" aria-label=${this.named('down')} type="button" @click=${() => this.pan('down')}>
-                  ${this.glyph('down')}
+                <button part="pan-down" aria-label=${this.panLabel('down')} type="button" @click=${() => this.pan('down')}>
+                  ${this.panGlyph('down')}
                 </button>`
                 : nothing}
         ${zoom
@@ -155,6 +166,7 @@ export const MixinViewport = (Base) => {
                   −
                 </button>`
                 : nothing}
+        ${more}
         ${fullscreen
                 ? html `<button
                 part="fullscreen"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-core",
   "description": "Helix element primitives: base classes, mixins, decorators, utilities.",
-  "version": "0.104.1",
+  "version": "0.106.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -34,11 +34,11 @@
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@fusion.dev/helix-icons": "0.104.1"
+    "@fusion.dev/helix-icons": "0.106.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.104.1",
-    "@fusion.dev/helix-testing": "0.104.1",
+    "@fusion.dev/helix-cem": "0.106.0",
+    "@fusion.dev/helix-testing": "0.106.0",
     "@lit-labs/ssr": "^4.1.0",
     "lit": "^3.2.1"
   },