@fusion.dev/helix 0.103.2 → 0.104.0

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

@@ -13,7 +13,7 @@ import type { CSSResultGroup } from 'lit';
  * takes the header and footer a consumer slotted and leaves the buttons alone.
  *
  * @since 0.100.0
- * @status stable
+ * @status experimental
  * @category media
  * @aliases Map frame, Map container, Geo
  * @documentation https://fusion.dev/helix/components/map
@@ -21,7 +21,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --map-background-color - The well behind the map, seen while tiles are on their way.
  * @cssproperty --map-block-size - How tall the frame is. A length, since the map fills it.
  * @cssproperty --map-border-color - Color of the frame's edge.
- * @cssproperty --map-control-background-color - The ground under the pan and zoom buttons.
+ * @cssproperty --viewport-control-background-color - The ground under the pan and zoom buttons, one name with `Canvas`.
  */
 export declare class HelixMap extends HelixHeadlessMap {
     static styles: CSSResultGroup;

package/dist/map/root/map-root.js

@@ -6,9 +6,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessMap } from '@fusion.dev/helix-headless/map';
+import { styles as viewportStyles } from '../../shared/viewport/viewport.css.js';
 import { styles } from './map-root.css.js';
 let HelixMap = class HelixMap extends HelixHeadlessMap {
-    static { this.styles = styles; }
+    static { this.styles = [viewportStyles, styles]; }
 };
 HelixMap = __decorate([
     customElement('helix-map')

package/dist/menu/root/menu-root.js

@@ -9,9 +9,11 @@ import { HelixHeadlessMenu } from '@fusion.dev/helix-headless/menu';
 import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
 import { styles as floatingEntranceStyles } from '../../shared/floating/entrance.css.js';
 import { styles as floatingPanelStyles } from '../../shared/floating/panel.css.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './menu-root.css.js';
 let HelixMenu = class HelixMenu extends HelixHeadlessMenu {
     static { this.styles = [
+        liveStyles,
         collectionStateStyles,
         floatingPanelStyles,
         floatingEntranceStyles,

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

@@ -25,6 +25,7 @@ import '../notification/notification.js';
  * @slot header - Above the list, for a title and the mark-all control.
  *
  * @csspart list - The list itself.
+ * @csspart live - The empty and loading lines again, in a region a screen reader hears when they change. Visually hidden in the styled tier.
  * @csspart mark-all - The control that marks everything read.
  *
  * @cssproperty --notifications-max-block-size - How tall the feed may get before the list scrolls.

package/dist/notifications/root/notifications-root.js

@@ -7,11 +7,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessNotifications } from '@fusion.dev/helix-headless/notifications';
 import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './notifications-root.css.js';
 import '../notification/notification.js';
 let HelixNotifications = class HelixNotifications extends HelixHeadlessNotifications {
     static { this.tier = 'helix-'; }
-    static { this.styles = [collectionStateStyles, styles]; }
+    static { this.styles = [liveStyles, collectionStateStyles, styles]; }
 };
 HelixNotifications = __decorate([
     customElement('helix-notifications')

package/dist/pagination/root/pagination-root.css.js

@@ -119,15 +119,6 @@ user-select: none;
 display: none;
 }
 
-[part="live"] {
-block-size: 1px;
-clip-path: inset(50%);
-inline-size: 1px;
-overflow: hidden;
-position: absolute;
-white-space: nowrap;
-}
-
 [part="status"] {
 color: var(--helix-color-foreground-muted);
 font-variant-numeric: tabular-nums;

package/dist/pagination/root/pagination-root.js

@@ -6,9 +6,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessPagination } from '@fusion.dev/helix-headless/pagination';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './pagination-root.css.js';
 let HelixPagination = class HelixPagination extends HelixHeadlessPagination {
-    static { this.styles = styles; }
+    static { this.styles = [liveStyles, styles]; }
 };
 HelixPagination = __decorate([
     customElement('helix-pagination')

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

@@ -353,7 +353,13 @@ export declare class HelixSandbox extends HelixElement {
      */
     private answer;
     connectedCallback(): void;
-    /** Watches the body, whose height is what the pane sizes are computed from. */
+    /**
+     * Watches the body, whose height is what the pane sizes are computed from.
+     *
+     * `render` asks for the render that height is for. The observer asks too, in
+     * the report it gives every box it starts watching, so only a caller that
+     * cannot wait for it passes true.
+     */
     private watchBody;
     /**
      * Takes the body's height before each render, so the conversion is current.
@@ -363,6 +369,15 @@ export declare class HelixSandbox extends HelixElement {
      * shim carries attributes but not tree traversal.
      */
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * Starts watching the body, now there is one.
+     *
+     * **The render its height is for is the observer's to ask for**, in the
+     * report every newly watched box gets, which arrives after layout and before
+     * the first paint. Asking here as well rendered once from inside this update
+     * and again when the report came. Where there is no observer, nothing else
+     * will ask.
+     */
     protected firstUpdated(changed: PropertyValues): void;
     disconnectedCallback(): void;
     /**

package/dist/sandbox/root/sandbox-root.js

@@ -179,20 +179,25 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         this.addEventListener('helix-console', this.handleConsole);
         this.addEventListener('helix-before-edit', this.handleSourceChange);
         if (this.hasUpdated) {
-            this.watchBody();
+            this.watchBody(true);
         }
     }
-    watchBody() {
+    watchBody(render) {
         const body = this.renderRoot.querySelector('[part="body"]');
         if (!body) {
             return;
         }
         this.bodyHeight = body.getBoundingClientRect().height;
         this.watch?.observe(body);
-        this.requestUpdate();
+        if (render) {
+            this.requestUpdate();
+        }
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        if (!this.hasUpdated && this.childrenKnown) {
+            this.readPanel();
+        }
         if (!this.hasUpdated || typeof this.renderRoot?.querySelector !== 'function') {
             return;
         }
@@ -203,8 +208,11 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
-        this.readPanel();
-        this.watchBody();
+        if (this.serverRendered) {
+            this.readPanel();
+            this.finishHydration();
+        }
+        this.watchBody(this.watch === undefined);
     }
     disconnectedCallback() {
         super.disconnectedCallback();

package/dist/shared/live/live.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/shared/live/live.css.js

@@ -0,0 +1,9 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[part="live"] {
+block-size: 1px;
+clip-path: inset(50%);
+inline-size: 1px;
+overflow: hidden;
+position: absolute;
+white-space: nowrap;
+}`);

package/dist/shared/viewport/viewport.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/shared/viewport/viewport.css.js

@@ -0,0 +1,106 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[part="controls"] {
+display: grid;
+gap: var(--helix-space-2xs);
+
+grid-template-areas:
+".      up    .      zoomin"
+"start  .     end    zoomout"
+".      down  .      full";
+position: absolute;
+
+inset-block-start: var(--helix-space-sm);
+inset-inline-end: var(--helix-space-sm);
+transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="controls"]:not(:has([part="zoom-in"])) {
+grid-template-areas:
+".      up    ."
+"start  .     end"
+".      down  full";
+}
+
+[part="controls"]:not(:has([part="pan-up"])) {
+grid-template-areas:
+"zoomin"
+"zoomout"
+"full";
+}
+
+:host(:fullscreen) {
+display: block;
+}
+
+:host(:state(fullscreen)) [part="region"] {
+block-size: 100dvh;
+border: none;
+border-radius: 0;
+}
+
+:host([controls-placement="top-end"]) [part="controls"] {
+inset-block: var(--helix-space-sm) auto;
+inset-inline: auto var(--helix-space-sm);
+}
+
+:host([controls-placement="top-start"]) [part="controls"] {
+inset-block: var(--helix-space-sm) auto;
+inset-inline: var(--helix-space-sm) auto;
+}
+
+:host([controls-placement="bottom-end"]) [part="controls"] {
+inset-block: auto var(--helix-space-sm);
+inset-inline: auto var(--helix-space-sm);
+}
+
+:host([controls-placement="bottom-start"]) [part="controls"] {
+inset-block: auto var(--helix-space-sm);
+inset-inline: var(--helix-space-sm) auto;
+}
+
+[part="pan-up"] {
+grid-area: up;
+}
+[part="pan-down"] {
+grid-area: down;
+}
+[part="pan-start"] {
+grid-area: start;
+}
+[part="pan-end"] {
+grid-area: end;
+}
+[part="zoom-in"] {
+grid-area: zoomin;
+}
+[part="zoom-out"] {
+grid-area: zoomout;
+}
+[part="fullscreen"] {
+grid-area: full;
+}
+
+[part="controls"] button {
+align-items: center;
+background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));
+border: var(--helix-border-thin) solid var(--helix-color-border);
+border-radius: var(--helix-radii-sm);
+block-size: var(--helix-size-control-sm);
+color: var(--helix-color-foreground);
+cursor: pointer;
+display: inline-flex;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+inline-size: var(--helix-size-control-sm);
+justify-content: center;
+padding: 0;
+}
+
+[part="controls"] button:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="controls"] button:hover {
+background-color: var(--helix-color-surface-raised);
+}`);

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

@@ -15,6 +15,7 @@ import type { CSSResultGroup } from 'lit';
  *
  * @slot - The table's rows.
  *
+ * @csspart live - The empty and loading lines again, in a region a screen reader hears when they change. Visually hidden in the styled tier.
  * @csspart table - The grid.
  *
  * @cssproperty --table-columns - Track list for the columns, which wins over the one the columns worked out.

package/dist/table/root/table-root.js

@@ -7,9 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessTable } from '@fusion.dev/helix-headless/table';
 import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './table-root.css.js';
 let HelixTable = class HelixTable extends HelixHeadlessTable {
-    static { this.styles = [collectionStateStyles, styles]; }
+    static { this.styles = [liveStyles, collectionStateStyles, styles]; }
 };
 HelixTable = __decorate([
     customElement('helix-table')

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

@@ -18,6 +18,7 @@ import type { CSSResultGroup } from 'lit';
  *
  * @event {HelixSelectEvent} helix-select - Fired when an item is chosen. Dispatched by the item and listened for here, because the tree is what a consumer holds a reference to. Cancelable: refusing it takes the decision and nothing moves.
  *
+ * @csspart live - The empty and loading lines again, in a region a screen reader hears when they change. Visually hidden in the styled tier.
  * @csspart tree - The tree container.
  *
  * @cssproperty --tree-chevron-gap - Set from `chevron-placement`; the space before the chevron.

package/dist/tree/root/tree-root.js

@@ -8,9 +8,10 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessTree } from '@fusion.dev/helix-headless/tree';
 import { property } from 'lit/decorators.js';
 import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './tree-root.css.js';
 let HelixTree = class HelixTree extends HelixHeadlessTree {
-    static { this.styles = [collectionStateStyles, styles]; }
+    static { this.styles = [liveStyles, collectionStateStyles, styles]; }
 };
 __decorate([
     property({ attribute: 'chevron-placement', reflect: true })

package/dist/video/root/video-root.js

@@ -10,10 +10,11 @@ import { property } from 'lit/decorators.js';
 import '../../icon/index.js';
 import '../../menu/index.js';
 import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './video-root.css.js';
 let HelixVideo = class HelixVideo extends HelixHeadlessVideo {
     static { this.tier = 'helix-'; }
-    static { this.styles = [glyphStyles, styles]; }
+    static { this.styles = [liveStyles, glyphStyles, styles]; }
 };
 __decorate([
     property({ reflect: true })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.103.2",
+  "version": "0.104.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -47,13 +47,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.103.2",
-    "@fusion.dev/helix-headless": "0.103.2",
-    "@fusion.dev/helix-styles": "0.103.2"
+    "@fusion.dev/helix-core": "0.104.0",
+    "@fusion.dev/helix-headless": "0.104.0",
+    "@fusion.dev/helix-styles": "0.104.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.103.2",
-    "@fusion.dev/helix-testing": "0.103.2",
+    "@fusion.dev/helix-cem": "0.104.0",
+    "@fusion.dev/helix-testing": "0.104.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",