@fusion.dev/helix 0.43.0 → 0.45.0

package/dist/option/group/option-group.d.ts

@@ -9,7 +9,7 @@ import type { CSSResultGroup } from 'lit';
  * tells you which list, not something to read on its own.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases OptGroup, Section
  * @documentation https://fusion.dev/helix/components/option
  */

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

@@ -10,7 +10,7 @@ import type { CSSResultGroup } from 'lit';
  * picked from what they are looking at.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category forms
  * @aliases Item, Choice
  * @documentation https://fusion.dev/helix/components/option

package/dist/radio/group/radio-group.d.ts

@@ -10,7 +10,7 @@ import type { CSSResultGroup } from 'lit';
  * group keeps its question above the row rather than beside the first choice.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases RadioButtons, Choice group
  * @documentation https://fusion.dev/helix/components/radio
  *

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

@@ -14,7 +14,7 @@ import type { CSSResultGroup } from 'lit';
  * and being chosen is an answer rather than a state.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category forms
  * @aliases Option, Choice
  * @documentation https://fusion.dev/helix/components/radio

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

@@ -87,6 +87,11 @@ export declare class HelixSandboxPreview extends HelixElement {
     colorMode?: 'dark' | 'light';
     /**
      * Writing direction inside the frame.
+     *
+     * Not reflected. It is payload for the render message and nothing selects on
+     * it, here or anywhere: a frame is a document of its own and what is written
+     * on this host reaches nothing inside it, which is the same reason
+     * `colorMode` has to be sent rather than set.
      */
     direction?: 'rtl';
     /**
@@ -95,6 +100,16 @@ export declare class HelixSandboxPreview extends HelixElement {
     label: string;
     /**
      * How the example is placed in the frame.
+     *
+     * `padded` insets it and leaves it at the top, which is the resting case and
+     * what an absent value sends. `centered` gives it a measure and centers that
+     * box in the frame. `hug` shrinks the example to its own content and centers
+     * what is left, which is the difference that matters for a component whose
+     * root is a full-width block. `fullscreen` is the whole frame with no inset.
+     *
+     * Not reflected, for `direction`'s reason: the placement is applied by the
+     * document inside the frame, against its own root, so no rule on this side
+     * could read it.
      */
     layout?: 'padded' | 'centered' | 'fullscreen' | 'hug';
     /**

package/dist/sandbox/preview/sandbox-preview.js

@@ -114,13 +114,13 @@ __decorate([
     property({ attribute: 'color-mode' })
 ], HelixSandboxPreview.prototype, "colorMode", void 0);
 __decorate([
-    property({ reflect: true })
+    property()
 ], HelixSandboxPreview.prototype, "direction", void 0);
 __decorate([
     property()
 ], HelixSandboxPreview.prototype, "label", void 0);
 __decorate([
-    property({ reflect: true })
+    property()
 ], HelixSandboxPreview.prototype, "layout", void 0);
 __decorate([
     property()

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

@@ -95,6 +95,11 @@ export declare class HelixSandbox extends HelixElement {
     lead: 'source' | 'preview';
     /**
      * Whether the panes sit side by side or stacked.
+     *
+     * Not reflected, for `lead`'s reason above: no rule selects on it. The axis
+     * reaches the stylesheet as the inner splitter's own `orientation`, which is
+     * where the panes are laid out, and this element's sheet names no host
+     * attribute at all.
      */
     orientation?: 'horizontal' | 'vertical';
     /**
@@ -230,7 +235,7 @@ export declare class HelixSandbox extends HelixElement {
      */
     private get axis();
     /**
-     * Says the panes' divider has settled, so a consumer can keep it.
+     * Asks for the panes' divider to settle here, and moves it unless refused.
      *
      * When it settles, not while it moves. A drag is a stream of positions and
      * only the one it ends at is a preference; announcing each would ask whoever
@@ -241,13 +246,25 @@ export declare class HelixSandbox extends HelixElement {
      * wrote to storage on its own would be deciding for all of them under a key
      * it chose.
      *
+     * **Through `requestChange`, and never the other way round.** Both of these
+     * fired after `split` and `panelSize` had already been written, with the
+     * answer dropped, so a consumer calling `preventDefault()` on an event whose
+     * own line says refusing it takes the decision changed nothing whatever: the
+     * divider stayed where the drag left it and their handler read a value they
+     * had just declined. `SandboxSource.edit` two files away already carries the
+     * argument, that assigning first turns a `before` event into one that has
+     * already happened, and `Splitter`, whose `helix-before-resize` these two were
+     * split out of, has always announced through the audited path. Refusing one
+     * now leaves `.position` bound to the value this element still holds, so the
+     * divider goes back where it was.
+     *
      * **A verb each, rather than one `helix-before-resize` naming which of the two
      * moved.** Both dividers are this element's, so `composedPath()[0]` is the same
      * host for either and the event name is the only thing that can separate them.
      */
-    private splitSettled;
-    /** As `splitSettled`, for the panel, whose value is pixels rather than a share. */
-    private panelSettled;
+    private requestSplit;
+    /** As `requestSplit`, for the panel, whose value is pixels rather than a share. */
+    private requestPanelSize;
     /**
      * Answers a divider that has asked to move.
      *
@@ -261,9 +278,31 @@ export declare class HelixSandbox extends HelixElement {
      * speaking for itself is one of ours, and only those are stopped: the sandbox
      * announces `helix-before-split` and `helix-before-panel-resize` in their
      * place, and a consumer never sees the two splitters inside it.
+     *
+     * **Refused as well as stopped, which is what "controlled from here" costs.**
+     * A splitter nobody refuses applies the move itself and says so in its own
+     * docblock, so the sentence above was true only while nothing downstream ever
+     * declined: refusing `helix-before-split` left `split` at fifty and the
+     * divider drawn at fifty-two, one element holding the arrangement and the
+     * other showing it. Refusing the inner request first makes this element the
+     * single answer.
+     *
+     * **And the divider is written back, because a refusal writes nothing.** A
+     * splitter draws itself from where the gesture reached until its `position` is
+     * assigned, which is the setter's stated job, and a bound property Lit did not
+     * change is a property Lit does not write. So the answer is assigned either
+     * way, which for an accepted move is the number the binding is about to carry
+     * anyway.
      */
     private readonly handlePanesChange;
     private readonly handlePanelChange;
+    /**
+     * Puts a divider where this element says it is.
+     *
+     * Typed by what is used rather than by the class, which is the whole of the
+     * coupling: a splitter this does not import is one that can be replaced.
+     */
+    private answer;
     connectedCallback(): void;
     /** Watches the body, whose height is what the pane sizes are computed from. */
     private watchBody;

package/dist/sandbox/root/sandbox-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 { customElement, HelixBeforePanelResizeEvent, HelixBeforeSplitEvent, HelixElement, } from '@fusion.dev/helix-core';
+import { customElement, HelixBeforePanelResizeEvent, HelixBeforeSplitEvent, HelixElement, requestChange, } from '@fusion.dev/helix-core';
 import '../../splitter/index.js';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -71,8 +71,9 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
             }
             const { value } = event.detail;
             event.stopPropagation();
-            this.split = Number(value);
-            this.splitSettled();
+            event.preventDefault();
+            this.requestSplit(Number(value));
+            this.answer(event.currentTarget, this.split);
         };
         this.handlePanelChange = (event) => {
             if (event.target !== event.currentTarget) {
@@ -80,11 +81,11 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
             }
             const { value } = event.detail;
             event.stopPropagation();
-            if (this.bodyHeight <= 0) {
-                return;
+            event.preventDefault();
+            if (this.bodyHeight > 0) {
+                this.requestPanelSize(Math.max(0, ((100 - Number(value)) / 100) * this.bodyHeight));
             }
-            this.panelSize = Math.max(0, ((100 - Number(value)) / 100) * this.bodyHeight);
-            this.panelSettled();
+            this.answer(event.currentTarget, this.panelPosition);
         };
         this.readPanel = () => {
             this.hasPanel = this.querySelector(':scope > [slot="panel"]') !== null;
@@ -135,11 +136,31 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
     get axis() {
         return this.orientation ?? 'horizontal';
     }
-    splitSettled() {
-        this.dispatchEvent(new HelixBeforeSplitEvent({ value: String(this.split) }));
+    requestSplit(next) {
+        return requestChange({
+            apply: (value) => {
+                this.split = value;
+            },
+            event: (value) => new HelixBeforeSplitEvent({ value: String(value) }),
+            host: this,
+            next,
+        });
+    }
+    requestPanelSize(next) {
+        return requestChange({
+            apply: (value) => {
+                this.panelSize = value;
+            },
+            event: (value) => new HelixBeforePanelResizeEvent({ value: String(value) }),
+            host: this,
+            next,
+        });
     }
-    panelSettled() {
-        this.dispatchEvent(new HelixBeforePanelResizeEvent({ value: String(this.panelSize) }));
+    answer(divider, position) {
+        const target = divider;
+        if (target && Number.isFinite(position)) {
+            target.position = position;
+        }
     }
     connectedCallback() {
         super.connectedCallback();
@@ -233,7 +254,7 @@ __decorate([
     property()
 ], HelixSandbox.prototype, "lead", void 0);
 __decorate([
-    property({ reflect: true })
+    property()
 ], HelixSandbox.prototype, "orientation", void 0);
 __decorate([
     property({ attribute: 'panel-collapsed-size', type: Number })

package/dist/sandbox/status-bar/sandbox-status-bar.js

@@ -28,7 +28,7 @@ let HelixSandboxStatusBar = class HelixSandboxStatusBar extends HelixElement {
       ${position === undefined ? nothing : html `<span part="caret">${position}</span>`}
       ${language === undefined
             ? nothing
-            : html `<span part="language">${LABELS[language] ?? language}</span>`}
+            : html `<span part="language">${Object.hasOwn(LABELS, language) ? LABELS[language] : language}</span>`}
       <slot name="end"></slot>`;
     }
     static { this.styles = styles; }

package/dist/skip-link/root/skip-link-root.d.ts

@@ -20,8 +20,9 @@ import type { CSSResultGroup } from 'lit';
  * region the id its `href` names.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category navigation
+ * @aliases Skip navigation, Skip to content
  * @documentation https://fusion.dev/helix/components/skip-link
  *
  * @cssproperty --skip-link-border-color - Color of the revealed link's edge.

package/dist/speed-dial/item/speed-dial-item.css.js

@@ -10,16 +10,12 @@ border: none;
 color: inherit;
 cursor: pointer;
 display: inline-flex;
-flex-direction: row-reverse;
+flex-direction: var(--_speed-dial-row, row-reverse);
 font: inherit;
 gap: var(--helix-space-sm);
 padding: var(--helix-space-none);
 }
 
-:host-context([data-placement$="-start"]) [part="item"] {
-flex-direction: row;
-}
-
 [part="item"]:disabled {
 cursor: not-allowed;
 opacity: 0.5;

package/dist/speed-dial/item/speed-dial-item.d.ts

@@ -9,7 +9,7 @@ import type { CSSResultGroup } from 'lit';
  * over. Everything about choosing it is the base class.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category actions
  * @aliases Speed dial action, FAB action, Quick action
  * @documentation https://fusion.dev/helix/components/speed-dial

package/dist/speed-dial/root/speed-dial-root.css.js

@@ -15,10 +15,14 @@ padding: var(--helix-space-none);
 }
 
 [part="actions"] {
+--_speed-dial-row: row-reverse;
+
 align-items: flex-end;
 }
 
 [part="actions"][data-placement$="-start"] {
+--_speed-dial-row: row;
+
 align-items: flex-start;
 }
 

package/dist/speed-dial/root/speed-dial-root.d.ts

@@ -10,7 +10,7 @@ import '../../icon/index.js';
  * moves through it is the base class.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category actions
  * @aliases FAB, Floating action button, Action button, Quick actions
  * @documentation https://fusion.dev/helix/components/speed-dial

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

@@ -33,7 +33,7 @@ import type { CSSResultGroup } from 'lit';
  * cross product, which is the explosion a named ramp exists to prevent.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category typography
  * @aliases Paragraph, Copy, Label, Caption, Heading, Title
  * @documentation https://fusion.dev/helix/components/text

package/dist/toast/item/toast-item.d.ts

@@ -10,7 +10,7 @@ import type { CSSResultGroup } from 'lit';
  * costs contrast for something the mark already says.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @documentation https://fusion.dev/helix/components/toast
  *
  * @cssproperty --toast-border-color - Color of the panel's edge.

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

@@ -18,9 +18,9 @@ import type { CSSResultGroup } from 'lit';
  * into the top layer.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category overlays
- * @aliases Toaster, Snackbar, Notifications
+ * @aliases Toaster, Snackbar
  * @documentation https://fusion.dev/helix/components/toast
  *
  * @cssproperty --toast-gap - Space between one message and the next.

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.43.0",
+  "version": "0.45.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -47,14 +47,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.43.0",
-    "@fusion.dev/helix-headless": "0.43.0",
-    "@fusion.dev/helix-styles": "0.43.0"
+    "@fusion.dev/helix-core": "0.45.0",
+    "@fusion.dev/helix-headless": "0.45.0",
+    "@fusion.dev/helix-styles": "0.45.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.43.0",
-    "@fusion.dev/helix-testing": "0.43.0",
+    "@fusion.dev/helix-cem": "0.45.0",
+    "@fusion.dev/helix-testing": "0.45.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",