@fusion.dev/helix-core 0.209.0 → 0.211.0

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

@@ -1,12 +1,15 @@
 import { __decorate } from "tslib";
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { html as staticHtml } from 'lit/static-html.js';
 import { FullscreenController } from '../../controllers/fullscreen-controller/fullscreen-controller.js';
 import { IdleController } from '../../controllers/idle-controller/idle-controller.js';
+import { ToolbarController } from '../../controllers/toolbar-controller/toolbar-controller.js';
 import { inlineStep } from '../../utils/inline-step/inline-step.js';
 import { isRtl } from '../../utils/is-rtl/is-rtl.js';
 import { numberConverter, timeConverter } from '../../utils/number-converter/number-converter.js';
 import { formatWords, words } from '../../words/words.js';
+const stopPress = (event) => event.stopPropagation();
 const HINT_SHOWS = 1600;
 export const MixinViewport = (Base) => {
     class Viewport extends Base {
@@ -27,6 +30,12 @@ export const MixinViewport = (Base) => {
             this.fullscreen = new FullscreenController(this, (full) => {
                 this.filled = full;
             });
+            this.controlKeys = new ToolbarController(this, {
+                arrows: () => 'position',
+                members: () => [...(this.controlsElement?.children ?? [])],
+                own: true,
+                watch: () => this.renderRoot,
+            });
             this.idle = new IdleController(this, () => this.idleDelay, (resting) => {
                 this.resting = resting;
             });
@@ -94,6 +103,10 @@ export const MixinViewport = (Base) => {
                 if (target !== own && !own.matches('[part~="controls"]')) {
                     return;
                 }
+                const modified = event.shiftKey || event.ctrlKey || event.metaKey || event.altKey;
+                if (own.matches('[part~="controls"]') && !modified && /^(Arrow|Home$|End$)/.test(event.key)) {
+                    return;
+                }
                 if (event.ctrlKey || event.metaKey || event.altKey) {
                     return;
                 }
@@ -249,6 +262,12 @@ export const MixinViewport = (Base) => {
                         ? this.panLeftLabel
                         : this.panRightLabel;
         }
+        get controlTag() {
+            return this.tag('icon-button');
+        }
+        get controlAxes() {
+            return { raised: false };
+        }
         panGlyph(way) {
             return { down: '↓', left: '←', right: '→', up: '↑' }[this.sideOf(way)] ?? '';
         }
@@ -272,40 +291,94 @@ export const MixinViewport = (Base) => {
                 return nothing;
             }
             const [up, start, end, down] = ['up', 'start', 'end', 'down'].map((way) => this.panGlyph(way));
-            return html `<div part="controls" role="group" aria-label=${this.controlsLabel}>
+            const button = this.controlTag;
+            const { material, raised } = this.controlAxes;
+            const ground = material ?? nothing;
+            return staticHtml `<div part="controls" role="toolbar" aria-label=${this.controlsLabel}>
         ${pan
-                ? html `<button part="pan-up" aria-label=${this.panLabel('up')} type="button" @click=${() => this.pan('up')}>
+                ? staticHtml `<${button}
+                  part="pan-up"
+                  exportparts="button: pan-up-button, live: pan-up-live, spinner: pan-up-spinner, text: pan-up-text"
+                  label=${this.panLabel('up')}
+                  material=${ground}
+                  ?raised=${raised}
+                  @click=${() => this.pan('up')}
+                  @helix-press=${stopPress}
+                >
                   <slot name="pan-up-icon">${up}</slot>
-                </button>
-                <button part="pan-start" aria-label=${this.panLabel('start')} type="button" @click=${() => this.pan('start')}>
+                </${button}>
+                <${button}
+                  part="pan-start"
+                  exportparts="button: pan-start-button, live: pan-start-live, spinner: pan-start-spinner, text: pan-start-text"
+                  label=${this.panLabel('start')}
+                  material=${ground}
+                  ?raised=${raised}
+                  @click=${() => this.pan('start')}
+                  @helix-press=${stopPress}
+                >
                   <slot name="pan-start-icon">${start}</slot>
-                </button>
-                <button part="pan-end" aria-label=${this.panLabel('end')} type="button" @click=${() => this.pan('end')}>
+                </${button}>
+                <${button}
+                  part="pan-end"
+                  exportparts="button: pan-end-button, live: pan-end-live, spinner: pan-end-spinner, text: pan-end-text"
+                  label=${this.panLabel('end')}
+                  material=${ground}
+                  ?raised=${raised}
+                  @click=${() => this.pan('end')}
+                  @helix-press=${stopPress}
+                >
                   <slot name="pan-end-icon">${end}</slot>
-                </button>
-                <button part="pan-down" aria-label=${this.panLabel('down')} type="button" @click=${() => this.pan('down')}>
+                </${button}>
+                <${button}
+                  part="pan-down"
+                  exportparts="button: pan-down-button, live: pan-down-live, spinner: pan-down-spinner, text: pan-down-text"
+                  label=${this.panLabel('down')}
+                  material=${ground}
+                  ?raised=${raised}
+                  @click=${() => this.pan('down')}
+                  @helix-press=${stopPress}
+                >
                   <slot name="pan-down-icon">${down}</slot>
-                </button>`
+                </${button}>`
                 : nothing}
         ${zoom
-                ? html `<button part="zoom-in" aria-label=${this.zoomInLabel} type="button" @click=${() => this.zoom(1)}>
+                ? staticHtml `<${button}
+                  part="zoom-in"
+                  exportparts="button: zoom-in-button, live: zoom-in-live, spinner: zoom-in-spinner, text: zoom-in-text"
+                  label=${this.zoomInLabel}
+                  material=${ground}
+                  ?raised=${raised}
+                  @click=${() => this.zoom(1)}
+                  @helix-press=${stopPress}
+                >
                   <slot name="zoom-in-icon">+</slot>
-                </button>
-                <button part="zoom-out" aria-label=${this.zoomOutLabel} type="button" @click=${() => this.zoom(-1)}>
+                </${button}>
+                <${button}
+                  part="zoom-out"
+                  exportparts="button: zoom-out-button, live: zoom-out-live, spinner: zoom-out-spinner, text: zoom-out-text"
+                  label=${this.zoomOutLabel}
+                  material=${ground}
+                  ?raised=${raised}
+                  @click=${() => this.zoom(-1)}
+                  @helix-press=${stopPress}
+                >
                   <slot name="zoom-out-icon">−</slot>
-                </button>`
+                </${button}>`
                 : nothing}
         ${more}
         ${fullscreen
-                ? html `<button
+                ? staticHtml `<${button}
                 part="fullscreen"
-                aria-label=${this.fullscreenLabel}
+                exportparts="button: fullscreen-button, live: fullscreen-live, spinner: fullscreen-spinner, text: fullscreen-text"
                 aria-pressed=${this.filled ? 'true' : 'false'}
-                type="button"
+                label=${this.fullscreenLabel}
+                material=${ground}
+                ?raised=${raised}
                 @click=${this.toggleFullscreen}
+                @helix-press=${stopPress}
               >
                 <slot name="fullscreen-icon">⤢</slot>
-              </button>`
+              </${button}>`
                 : nothing}
       </div>`;
         }

package/dist/version.d.ts

@@ -6,4 +6,4 @@
  * release, so the two never disagree; a spec beside this holds them to it.
  * Nothing else in the running code knows which release it is.
  */
-export declare const VERSION = "0.209.0";
+export declare const VERSION = "0.211.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '0.209.0';
+export const VERSION = '0.211.0';

package/package.json

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