@fusion.dev/helix-headless 0.0.0-dev

package/dist/loader/index.d.ts

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

package/dist/loader/index.js

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

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

@@ -0,0 +1,52 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+/**
+ * @summary Says that something indeterminate is in progress.
+ *
+ * @description
+ * Two concentric circles rather than one arc: the track is what makes the
+ * moving part read as a proportion of a whole rather than as a shape drifting
+ * on its own, and it costs one element.
+ *
+ * **The center is a slot and is empty by default.** A loader with a mark in the
+ * middle is a brand's loader, and this library does not know whose. The slot is
+ * the capability; the logo is the application's, put in once wherever the app
+ * wraps it. Nothing is rendered when nothing is slotted, so an unbranded loader
+ * is still two circles and no extra box.
+ *
+ * What is slotted does not turn. Only the arc moves, because a mark rotating
+ * with it stops reading as a mark and becomes part of the animation, and a
+ * wordmark upside down twice a second is worse than no wordmark.
+ *
+ * The semantics are on the host through `ElementInternals`, not on an inner
+ * span. A `role` written into the shadow root announces correctly but leaves
+ * the host itself anonymous to anything walking the light DOM, and a `role`
+ * written onto the host as an attribute is one a React consumer's server markup
+ * never had.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category feedback
+ * @aliases Spinner, Busy, Activity
+ * @documentation https://helix.fusion.dev/components/loader
+ *
+ * @slot - A mark to sit still at the center, usually a logo. Empty by default.
+ *
+ * @csspart indicator - The arc that turns.
+ * @csspart mark - The region holding what was slotted at the center.
+ * @csspart svg - The rotating circle pair.
+ * @csspart track - The full circle behind the indicator.
+ */
+export declare class HelixHeadlessLoader extends HelixElement {
+    /**
+     * Accessible name, announced while the work is outstanding.
+     */
+    label: string;
+    protected willUpdate(changed: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-loader': HelixHeadlessLoader;
+    }
+}

package/dist/loader/root/loader-root.js

@@ -0,0 +1,74 @@
+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 { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+/**
+ * @summary Says that something indeterminate is in progress.
+ *
+ * @description
+ * Two concentric circles rather than one arc: the track is what makes the
+ * moving part read as a proportion of a whole rather than as a shape drifting
+ * on its own, and it costs one element.
+ *
+ * **The center is a slot and is empty by default.** A loader with a mark in the
+ * middle is a brand's loader, and this library does not know whose. The slot is
+ * the capability; the logo is the application's, put in once wherever the app
+ * wraps it. Nothing is rendered when nothing is slotted, so an unbranded loader
+ * is still two circles and no extra box.
+ *
+ * What is slotted does not turn. Only the arc moves, because a mark rotating
+ * with it stops reading as a mark and becomes part of the animation, and a
+ * wordmark upside down twice a second is worse than no wordmark.
+ *
+ * The semantics are on the host through `ElementInternals`, not on an inner
+ * span. A `role` written into the shadow root announces correctly but leaves
+ * the host itself anonymous to anything walking the light DOM, and a `role`
+ * written onto the host as an attribute is one a React consumer's server markup
+ * never had.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category feedback
+ * @aliases Spinner, Busy, Activity
+ * @documentation https://helix.fusion.dev/components/loader
+ *
+ * @slot - A mark to sit still at the center, usually a logo. Empty by default.
+ *
+ * @csspart indicator - The arc that turns.
+ * @csspart mark - The region holding what was slotted at the center.
+ * @csspart svg - The rotating circle pair.
+ * @csspart track - The full circle behind the indicator.
+ */
+let HelixHeadlessLoader = class HelixHeadlessLoader extends HelixElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Accessible name, announced while the work is outstanding.
+         */
+        this.label = 'Loading';
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        hostAria(this.internals, { label: this.label, role: 'progressbar' });
+        this.internals.ariaBusy = 'true';
+    }
+    render() {
+        return html `<svg part="svg" viewBox="0 0 24 24" aria-hidden="true">
+        <circle part="track" cx="12" cy="12" r="10" fill="none" />
+        <circle part="indicator" cx="12" cy="12" r="10" fill="none" />
+      </svg>
+      <span part="mark" aria-hidden="true"><slot></slot></span>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessLoader.prototype, "label", void 0);
+HelixHeadlessLoader = __decorate([
+    customElement('helix-headless-loader')
+], HelixHeadlessLoader);
+export { HelixHeadlessLoader };

package/dist/megamenu/index.d.ts

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

package/dist/megamenu/index.js

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

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

@@ -0,0 +1,254 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+declare const HelixHeadlessMegamenu_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
+/**
+ * @summary A section of a navigation that opens a panel of destinations.
+ *
+ * @description
+ * **A disclosure, not a menu, and that is the whole design.** `role="menu"` and
+ * `menuitem` are for an application's commands: they take over the arrow keys,
+ * announce "menu" to a reader who asked for navigation, and put every link
+ * inside a role that is not a link. What this is, is a button that shows and
+ * hides a region of the consumer's own anchors, which is the pattern the APG
+ * gives for site navigation and the one that leaves a middle click, a modified
+ * click and the status bar working. `Menu` remains right for a row of commands.
+ *
+ * **It renders no links**, for the reason `Navigation` gives: a router renders
+ * its own anchor and cannot render one inside this shadow root. The panel is a
+ * slot, and what goes in it is lists and headings the consumer wrote.
+ *
+ * **It opens on hover, and a press is always the fallback.** `open-on` says
+ * which, and hover is the resting value because a nav bar is the one place a
+ * reader expects to sweep along a row and see each section: making them click,
+ * read, click again to compare two is the interaction hover exists to save.
+ *
+ * Hover is not the only way in, and the code is mostly about that. There is no
+ * hover on a touch screen, so a tap opens the panel there whatever `open-on`
+ * says, which is why the pointer type is checked rather than assumed. Focus
+ * still opens nothing, for the same reason a tab through a nav bar should not
+ * unfold it, but Enter on the trigger does, and a keyboard press arrives as a
+ * click with no pointer behind it.
+ *
+ * A mouse click on a trigger the pointer is already sitting on is the case
+ * worth naming: toggling there would close the panel and the pointer, still on
+ * the trigger, would open it again, so the trigger would flicker and never
+ * close. In hover mode the mouse's own clicks are left alone and hover governs
+ * on its own. Escape and a click away still close it.
+ *
+ * The delays are intent, not decoration. Opening waits, so a pointer crossing
+ * the bar on its way somewhere else opens nothing; closing waits longer, so the
+ * diagonal from the trigger down into the panel does not pass through a gap and
+ * shut it. Moving along a bar where a panel is already down opens the next one
+ * at once, because at that point the reader is reading the bar, not crossing it.
+ *
+ * **Focus is not trapped and not moved.** A disclosure leaves the reader on the
+ * trigger and the panel follows in the tab order, which is what the markup
+ * already says, so Tab walks into the links and out the far side without
+ * anything managing it. Escape closes and puts focus back, because Escape is
+ * the one key that has to return the reader to where they were.
+ *
+ * The properties below are written by this component and read by whoever draws
+ * it. A consumer sets none of them: they carry a number this element computed
+ * and CSS cannot, which is what lets a stylesheet on this tier draw the thing
+ * without measuring anything itself.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category navigation
+ * @aliases Mega menu, Flyout, Nav panel
+ * @documentation https://helix.fusion.dev/components/megamenu
+ *
+ * @slot - The panel's contents: the consumer's own lists and headings.
+ * @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 surface - The floating panel, which is what opens.
+ * @csspart trigger - The default trigger, where none was slotted.
+ *
+ * @cssproperty --megamenu-top - Where the panel starts, measured from the bar above it.
+ */
+export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
+    /**
+     * The section's name, which names the default trigger and the panel.
+     */
+    label: string;
+    /**
+     * Whether the panel is a card under the trigger or a band across the page.
+     *
+     * The resting one is the card, hanging off the trigger and as wide as it
+     * needs to be. `full` is the other shape navigations use: a band from edge to
+     * edge under the header, with its contents held to the page's own measure, so
+     * a set of destinations too wide to sit under one word gets the whole width
+     * to lay out in.
+     *
+     * It changes where the panel goes as well as how it looks, which is why this
+     * tier knows about it at all: a band spans the viewport, so there is nothing
+     * to measure it against and nothing to flip or shift to, and the placing pass
+     * is told not to run. Everything else the popover gives, the top layer and
+     * the dismissal, is exactly what such a band needs.
+     */
+    variant?: 'full';
+    /**
+     * Whether hovering the trigger opens the panel, or only a press does.
+     *
+     * A press always works. This says whether a mouse also opens it by resting on
+     * the trigger, and it is the default because that is what a navigation bar
+     * does. `click` is for a trigger that does something else as well, or a panel
+     * heavy enough that opening it on the way past is rude.
+     */
+    openOn: 'click' | 'hover';
+    /**
+     * The width, in pixels, under which a card becomes a band. Zero never does.
+     *
+     * A card is a panel hung off one word, and there is no room to hang anything
+     * off a word on a phone: the columns do not shrink past
+     * `--megamenu-column-size`, so four of them stay four of them and the panel
+     * runs off the side of the screen rather than reflowing. Below this it takes
+     * the whole width and its columns stack, which is the only arrangement that
+     * fits.
+     *
+     * **In script rather than a media query, and only once.** Whether the panel is
+     * a band is not a question of paint: a band is not placed against the trigger,
+     * so the controller has to be told not to measure, and that decision is here
+     * whatever the stylesheet says. Writing the width in both places would be one
+     * number in two languages, drifting the first time either moved. This sets
+     * `data-narrow` on the host and the stylesheet arranges itself off that.
+     */
+    fullBelow: number;
+    private narrow;
+    private query;
+    /** A band, whether because it was asked for or because there is no room. */
+    private get banded();
+    private readonly handleWidth;
+    private watchWidth;
+    private readonly panel;
+    /** Tells a slotted trigger the disclosure state, by property. See `tellDisclosure`. */
+    private tellTrigger;
+    /** What the consumer slotted, if they slotted anything. */
+    private get slotted();
+    /** Whatever the consumer slotted, or the button rendered in its place. */
+    private get trigger();
+    /** Shuts it and puts the reader back where they were. */
+    private close;
+    /**
+     * Where a full-bleed band starts, which is the only number it needs.
+     *
+     * The placing pass is off for that appearance, so nothing else is measuring:
+     * a band spans the viewport and has only one degree of freedom, how far down
+     * it sits, and that is the bottom of the trigger in viewport coordinates
+     * because the panel is fixed. A header that scrolls takes the band with it,
+     * which is what a panel hanging off a header should do.
+     *
+     * Written as a custom property rather than an inline `top`, so the stylesheet
+     * keeps the arrangement and this contributes the one measurement it cannot
+     * make. Nothing to do for the card, which the controller places.
+     */
+    private band;
+    /**
+     * The bottom edge of the bar this hangs from.
+     *
+     * The trigger's own bottom is the obvious answer and is the wrong one: a
+     * header is taller than the word inside it, so a band starting at the word
+     * starts partway up the header, over its lower padding and its border.
+     * Measured: trigger bottom 44, header bottom 57, thirteen pixels of header
+     * with a band drawn across it.
+     *
+     * **The first ancestor as wide as the window, which is a fact and not a tag
+     * name.** A band spans the viewport, so what it should hang from is whatever
+     * else does: that is what makes something a bar. Asking for `helix-app-header`
+     * by name would make this element know about that one, which is the coupling
+     * `Menu` is careful not to have with `Drilldown`, and would leave a consumer
+     * who wrote their own header with a band across it.
+     *
+     * `body` ends the walk. It is as wide as the window and is not a bar, and its
+     * bottom is the foot of the page: without the guard a megamenu on a plain page
+     * would put its band down there. Nothing found means nothing to hang from, and
+     * the trigger is the honest answer again.
+     */
+    private bar;
+    /**
+     * How long a pointer has to mean it, in milliseconds.
+     *
+     * Opening is the shorter wait: too long and the panel feels stuck, too short
+     * and crossing the bar opens things. Closing is longer because the pointer
+     * has to get from the trigger to the panel, and the straight line between
+     * them is not the line anybody moves along.
+     */
+    private static readonly OPEN_DELAY;
+    private static readonly CLOSE_DELAY;
+    private timer;
+    private pointer;
+    private schedule;
+    private stop;
+    /**
+     * Keeps a band under its bar while the page moves, and closes it when the bar
+     * goes.
+     *
+     * The band is fixed and its offset is measured once, when it opens. That is
+     * fine until the page scrolls: a header that scrolls away leaves the band
+     * pinned where the header used to be, open, in the middle of the page with
+     * nothing above it. Measured at a scroll of 300: header bottom at -243 and the
+     * band still sitting at 57.
+     *
+     * The card has none of this, because the floating controller follows its
+     * anchor. Turning that off for the band, which has nothing to be placed
+     * against, took the scroll handling with it, and this is the half that was
+     * still wanted.
+     *
+     * A sticky bar does not move, so re-measuring returns the same number and the
+     * band stays where it is. `requestOpen` rather than `close`, because closing
+     * puts focus back on the trigger and a reader who has scrolled away should not
+     * be dragged back up to it.
+     */
+    private readonly handleScroll;
+    private readonly handlePointerDown;
+    private readonly handlePointerEnter;
+    private readonly handlePointerLeave;
+    private readonly handleTriggerClick;
+    /**
+     * Shuts the panel when a reader takes one of the destinations in it.
+     *
+     * Nothing closed it before, so a click navigated and left the panel hanging
+     * over wherever the reader landed. With a router that navigates in place, and
+     * this is one, that is a panel covering the page it was asked to go to.
+     *
+     * **A modified click leaves it open**, which is the same position this
+     * element already takes on middle clicks and the status bar: `cmd` on a link
+     * opens a tab behind this page rather than navigating it, so the reader is
+     * still standing in the menu and collecting, and shutting it under them would
+     * make the second choice cost a second open.
+     *
+     * `requestOpen(false)` rather than `close()`, for the reason `pointerleave`
+     * gives: the trigger is not where the reader is going, and pulling focus back
+     * to a nav bar they have just left is a scroll they did not ask for.
+     *
+     * **On the host rather than on the panel**, which is the same reason the
+     * pointer handlers give and one more. A row is slotted light DOM and the
+     * panel is in the shadow root, so a click only reaches the panel through the
+     * flattened tree: real ones do, and a DOM that does not implement slot
+     * propagation never delivers it, which makes every case here pass by never
+     * running this at all. The host is the row's own ancestor in both.
+     */
+    private readonly handleContentClick;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    /**
+     * The control that opens it, behind a seam the styled tier can move.
+     *
+     * The same case `SpeedDial` records: a bare `<button>` is what this tier can
+     * write, `helix-button` lives a tier above, and a render method is how a tier
+     * that has one reaches this without reimplementing the panel below it.
+     */
+    protected renderTrigger(): TemplateResult;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-megamenu': HelixHeadlessMegamenu;
+    }
+}
+export {};