@fusion.dev/helix-headless 0.0.0-dev

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

@@ -0,0 +1,251 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { anchorElement, customElement, drawIcon, HelixElement, KeyboardNavigationController, MixinControllerOpen, PopoverController, tellDisclosure, } from '@fusion.dev/helix-core';
+import { plus } from '@fusion.dev/helix-icons';
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+/**
+ * @summary A button that fans out the few actions a screen is for.
+ *
+ * @description
+ * **A menu, and deliberately not a new one.** Its rows are commands, which is
+ * what `role="menu"` and `menuitem` exist for, so this takes them and takes the
+ * behavior with them: the arrow keys are `KeyboardNavigationController`, the
+ * panel is `PopoverController`, and open and closed is `MixinControllerOpen`.
+ * `Menu` is built from the same pieces. What is not shared is what actually
+ * differs: a dial has no submenus, no headers, no checkable rows and no long
+ * list to type ahead through, and shipping it as an appearance of `Menu` would
+ * have meant defining what a dial with a submenu in it does.
+ *
+ * **The trigger is a control the consumer slots**, and the floating action
+ * button is the usual one: `helix-icon-button` with `shape="circle"` and
+ * `raised`. There is no `helix-fab` here, and the reason is worth stating,
+ * because a component would have re-declared `emphasis`, `tone`, `label` and
+ * a size around a control that already has all four. A round raised button is a
+ * shape, and where it sits is `data-dock` in the base layer.
+ *
+ * **Nothing is reserved from the keyboard.** A menu that drills has to keep the
+ * horizontal pair for going in and coming back; a dial goes nowhere, so all four
+ * arrows move through the actions and a reader who guesses either axis is
+ * answered. That is the controller's own house position, and this is a component
+ * with no reason to argue with it.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category actions
+ * @aliases FAB, Floating action button, Action button, Quick actions
+ * @documentation https://helix.fusion.dev/components/speed-dial
+ *
+ * @slot - The actions.
+ * @slot trigger - The control that opens it. Falls back to a button named by `label`.
+ *
+ * @event {HelixBeforeCloseEvent} helix-before-close - Fired before it closes, and cancelable.
+ * @event {HelixBeforeOpenEvent} helix-before-open - Fired before it opens, and cancelable.
+ * @event {Event} toggle - Says the state moved, carrying `newState` and `oldState`.
+ *
+ * @csspart actions - The region the actions are drawn in.
+ * @csspart icon - A glyph this component draws.
+ * @csspart trigger - The default trigger, where none was slotted.
+ */
+let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControllerOpen(HelixElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Names the trigger and the set of actions it opens.
+         */
+        this.label = 'Actions';
+        /**
+         * Which way the actions fan out. They move if that side does not fit.
+         *
+         * Up by default, because the control this hangs off is usually docked to the
+         * bottom of the window and there is nothing below it to fan into.
+         */
+        this.placement = 'top-end';
+        /**
+         * Space between the trigger and the actions, in pixels.
+         */
+        this.offset = 12;
+        /* Nothing reserved: see the note above. `selects` is false because arriving at
+           Delete must not delete, which is the difference between a set of commands
+           and a set of choices. */
+        this.keys = new KeyboardNavigationController(this, {
+            items: () => this.items,
+            selects: () => false,
+        });
+        this.panel = new PopoverController(this, {
+            anchor: () => this.trigger,
+            /* The host, so a press on the trigger is not counted as a press outside.
+               `Menu` and `Megamenu` both say the same about their own. */
+            boundary: () => this,
+            offset: () => this.offset,
+            onDismiss: () => this.close(),
+            placement: () => this.placement,
+            surface: () => this.renderRoot?.querySelector('[part="actions"]'),
+        });
+        this.handleTriggerClick = () => {
+            this.requestOpen(!this.open);
+        };
+        /* Chosen, so the dial shuts behind it. An action that leaves the fan standing
+           open is one a reader has to dismiss after asking for it. */
+        this.handleSelect = () => {
+            this.close();
+        };
+        this.handleKeydown = (event) => {
+            if (event.key !== 'Escape') {
+                return;
+            }
+            event.stopPropagation();
+            this.close();
+            event.preventDefault();
+        };
+    }
+    /** Whatever the consumer slotted, or the button rendered in its place. */
+    get trigger() {
+        return anchorElement(this.renderRoot?.querySelector('slot[name="trigger"]'), this.renderRoot?.querySelector('[part="trigger"]') ?? this);
+    }
+    /** The actions, which are this element's own rows and nothing else slotted. */
+    get items() {
+        const slot = this.renderRoot?.querySelector('slot:not([name])');
+        return (slot?.assignedElements?.() ?? []).filter((one) => one.isSpeedDialItem === true);
+    }
+    /** Shuts it and puts the reader back on the trigger. */
+    close() {
+        if (!this.requestOpen(false)) {
+            return;
+        }
+        this.trigger.focus();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('helix-select', this.handleSelect);
+        this.addEventListener('keydown', this.handleKeydown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('helix-select', this.handleSelect);
+        this.removeEventListener('keydown', this.handleKeydown);
+    }
+    /**
+     * Tells a slotted trigger what it is doing, since it cannot know.
+     *
+     * The fallback button is rendered by this element and says so in its own
+     * template. A trigger the consumer slotted is their markup, and the state it
+     * needs to announce is state only this element holds: without this, the
+     * arrangement this component recommends, an icon button slotted as the
+     * trigger, is a control that opens a menu and never says it has one. A
+     * consumer who has to mirror `open` back onto their own trigger is a consumer
+     * who will forget, and the failure is silent to everyone who can see the
+     * screen.
+     *
+     * **Every word of that survives; the mechanism does not.** This wrote
+     * `aria-expanded` and `aria-haspopup` onto the consumer's element with
+     * `setAttribute`, and measured against React 19.2.8 that is a hydration
+     * mismatch React reports and does not patch up. `tellDisclosure` carries the
+     * argument and the measurement: the state travels as a property now, into the
+     * trigger's own shadow root, where React neither looks nor compares.
+     *
+     * `aria-haspopup` goes with it rather than being written separately. It is a
+     * constant, so it could stay an attribute without changing on every open, and
+     * an attribute the consumer's server never sent is a mismatch whether or not
+     * it moves afterwards: that was measured too, both load orders. A trigger that
+     * says it is expanded is already saying it has something to expand.
+     */
+    announce() {
+        const trigger = this.trigger;
+        if (trigger === this.renderRoot?.querySelector('[part="trigger"]')) {
+            return;
+        }
+        tellDisclosure(trigger, this.open);
+    }
+    updated(changed) {
+        super.updated?.(changed);
+        this.announce();
+        if (this.open) {
+            this.panel.show();
+            /* On the first action, which is where a reader who opened this with the
+               keyboard expects to be. The pointer does not mind either way.
+      
+               Checked again on the way in, because this is a frame late and the dial
+               may have shut in the meantime. Opening and pressing Escape straight
+               away left focus on an action of a closed dial: the close put it back on
+               the trigger, and then this, still queued from the open, took it away
+               again. */
+            this.updateComplete.then(() => {
+                if (this.open) {
+                    /* The first action that can *take* focus, not the first action. A
+                       dial whose first item is disabled opened onto a row that refuses
+                       focus, so the reader landed nowhere and their first arrow key
+                       started from nothing.
+          
+                       `KeyboardNavigationController` has always filtered disabled items,
+                       which is why the arrows were fine and this was not: the audit read
+                       the fault into `items` and it was only ever here, at the one place
+                       that reaches past the controller and indexes the list itself. */
+                    this.items.find((one) => !one.disabled)?.focusItem();
+                }
+            });
+        }
+        else {
+            this.panel.hide();
+        }
+    }
+    /**
+     * The control that opens it, behind a seam the styled tier can move.
+     *
+     * **This is the case the tier rule blocks and a render method unblocks.** A
+     * bare `<button>` is what the headless tier can write: it must not reach for
+     * `helix-button`, which lives a tier above and would make `headless` depend
+     * on `web`. So the base draws the plain control and a tier that has buttons
+     * of its own overrides this to use one, which is the whole shape #76 exists
+     * for. Written inline the only way to change it was to reimplement the
+     * template, panel and all.
+     */
+    renderTrigger() {
+        return html `<slot name="trigger" @click=${this.handleTriggerClick}>
+      <button
+        part="trigger"
+        type="button"
+        aria-expanded=${this.open ? 'true' : 'false'}
+        aria-haspopup="menu"
+        aria-label=${this.label}
+      >
+        ${
+        /* A glyph, because the fallback was an empty `<button>`: a consumer
+           who slots no trigger got a control with nothing in it, and a
+           floating action button whose whole job is to be found. `plus` is
+           what a speed dial opens with everywhere it exists. */
+        ''}
+        ${drawIcon(plus)}
+      </button>
+    </slot>`;
+    }
+    render() {
+        return html `${this.renderTrigger()}
+      <div
+        part="actions"
+        popover="manual"
+        role="menu"
+        aria-label=${this.label || nothing}
+        ?hidden=${!this.open}
+      >
+        <slot></slot>
+      </div>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessSpeedDial.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixHeadlessSpeedDial.prototype, "placement", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessSpeedDial.prototype, "offset", void 0);
+HelixHeadlessSpeedDial = __decorate([
+    customElement('helix-headless-speed-dial')
+], HelixHeadlessSpeedDial);
+export { HelixHeadlessSpeedDial };

package/dist/splitter/index.d.ts

@@ -0,0 +1 @@
+export * from './root/splitter-root.js';

package/dist/splitter/index.js

@@ -0,0 +1 @@
+export * from './root/splitter-root.js';