@fusion.dev/helix-core 0.210.0 → 0.211.0

package/dist/controllers/aria-forward-controller/aria-forward-controller.js

@@ -3,6 +3,7 @@ import { elementById } from '../../utils/element-by-id/element-by-id.js';
 import { labelsOf } from '../../utils/labels-of/labels-of.js';
 import { nameText } from '../../utils/name-text/name-text.js';
 const RELATIONSHIPS = [
+    ['aria-controls', 'ariaControlsElements'],
     ['aria-describedby', 'ariaDescribedByElements'],
     ['aria-labelledby', 'ariaLabelledByElements'],
 ];
@@ -10,7 +11,6 @@ const STATES = [
     'aria-current',
     'aria-expanded',
     'aria-haspopup',
-    'aria-controls',
     'aria-invalid',
     'aria-pressed',
     'aria-required',

package/dist/index.d.ts

@@ -60,7 +60,7 @@ export { MixinPickerField, type MixinPickerFieldInterface, } from './mixins/mixi
 export { MixinSegmentedField, type MixinSegmentedFieldInterface, } from './mixins/mixin-segmented-field/mixin-segmented-field.js';
 export { MixinSelectableItem, type MixinSelectableItemInterface, } from './mixins/mixin-selectable-item/mixin-selectable-item.js';
 export { MixinTokens, type MixinTokensInterface } from './mixins/mixin-tokens/mixin-tokens.js';
-export { MixinViewport, type ViewportControlsPlacement, type ViewportElement, type ViewportGestureLabels, type ViewportGestureMode, type ViewportGestures, type ViewportWay, } from './mixins/mixin-viewport/mixin-viewport.js';
+export { MixinViewport, type ViewportControlAxes, type ViewportControlsPlacement, type ViewportElement, type ViewportGestureLabels, type ViewportGestureMode, type ViewportGestures, type ViewportWay, } from './mixins/mixin-viewport/mixin-viewport.js';
 export { anchorElement } from './utils/anchor-element/anchor-element.js';
 export { arrowReach, sideOf } from './utils/arrow/arrow.js';
 export { assignSlot, assignSlots } from './utils/assign-slots/assign-slots.js';

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

@@ -1,4 +1,5 @@
 import { nothing, type TemplateResult } from 'lit';
+import { type StaticValue } from 'lit/static-html.js';
 import { FullscreenController } from '../../controllers/fullscreen-controller/fullscreen-controller.js';
 import { IdleController } from '../../controllers/idle-controller/idle-controller.js';
 import type { ViewportPanDetail, ViewportZoomDetail } from '../../events/events.js';
@@ -8,6 +9,15 @@ type Constructor<T> = new (...args: any[]) => T;
 export type ViewportWay = 'up' | 'down' | 'start' | 'end';
 /** Where the controls sit, in the corner words the rest of the library uses. */
 export type ViewportControlsPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+/**
+ * The styled axes a surface's controls are drawn with, which the styled tier
+ * says and the headless tier leaves unset, having nothing to paint: `raised`,
+ * since the controls float over the drawing, and the `material` under them.
+ */
+export interface ViewportControlAxes {
+    material?: 'frosted' | 'glass' | 'transparent' | undefined;
+    raised: boolean;
+}
 /** Which gestures a surface takes from the page. */
 export type ViewportGestures = 'activate' | 'always' | 'cooperative';
 /**
@@ -112,6 +122,14 @@ export declare class ViewportElement {
     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;
+    /**
+     * The element each control is drawn as: the family's own Icon Button, which
+     * the family names with `this.tag('icon-button')` so its source says what it
+     * renders and its imports register it.
+     */
+    protected get controlTag(): StaticValue;
+    /** The styled axes each control is drawn with, unset on the headless tier. */
+    protected get controlAxes(): ViewportControlAxes;
     /** 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. */

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

@@ -1,6 +1,7 @@
 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';
@@ -8,6 +9,7 @@ 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 {
@@ -260,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)] ?? '';
         }
@@ -283,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="toolbar" 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.210.0";
+export declare const VERSION = "0.211.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '0.210.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.210.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.210.0",
+    "@fusion.dev/helix-icons": "0.211.0",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.210.0",
-    "@fusion.dev/helix-testing": "0.210.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"
   },