@fusion.dev/helix-headless 0.151.0 → 0.152.0

package/dist/app-header/root/app-header-root.d.ts

@@ -19,6 +19,20 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * The page is the window unless `scroller` names the element that scrolls, for
  * an app shell whose content scrolls inside a container.
  *
+ * **Set `hide-on-scroll` for a bar that moves out of the way.** Scrolling down
+ * past the bar's own height hides it, and scrolling up shows it again, as does
+ * focus moving into it. The custom state `hidden` is on the host while it is
+ * hidden, and the styled tier slides a `sticky` bar up out of view.
+ *
+ * **Set `fold-below` to fold the middle region on a narrow screen.** Below that
+ * many pixels of the bar's own width, the middle region is hidden behind a
+ * toggle at the end of the bar, named by `menu-label`. The toggle says whether
+ * the region is open with `aria-expanded`, and the region opens below the row.
+ * Escape closes it and puts focus back on the toggle. The custom state
+ * `folded` is on the host while the bar is that narrow, and `open` while the
+ * folded region is open. A server serves the bar unfolded, and the browser
+ * folds it once it has measured it.
+ *
  * The host is the page's `banner` landmark. Placed inside `main`, `article`,
  * `aside`, `nav` or `section`, it is a plain box instead, as a native
  * `<header>` is there, so a header inside a card or a pane does not add a
@@ -36,6 +50,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @slot - The middle region, usually a `Navigation`.
  * @slot end - Trailing content.
+ * @slot menu-icon - Replaces the glyph inside the toggle that opens a folded middle region.
  * @slot start - Leading content, usually a wordmark.
  *
  * @event {HelixScrolledEvent} helix-scrolled - Fired when the page crosses the
@@ -48,10 +63,20 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart end - The trailing region.
  * @csspart row - The centered row inside the banner.
  * @csspart start - The leading region.
+ * @csspart toggle - The control that opens and closes the folded middle region, drawn while the bar is narrower than `fold-below`.
+ * @csspart toggle-mark - The glyph on the toggle, where none is slotted.
  *
+ * @cssstate folded - While the bar is narrower than `fold-below`, and the middle region is behind the toggle.
+ * @cssstate hidden - While `hide-on-scroll` has the bar out of the way, after a scroll down.
+ * @cssstate open - While the folded middle region is open.
  * @cssstate scrolled - While the page is scrolled down from the top, which is when the bar lifts off it.
  */
 export declare class HelixHeadlessAppHeader extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-app-header': { menuLabel: 'Menü' } })`.
+     */
+    static words: string;
     /**
      * Where the middle region sits in the bar.
      *
@@ -68,6 +93,47 @@ export declare class HelixHeadlessAppHeader extends HelixElement {
      * the property carries the part's name, `content`.
      */
     contentAlign?: 'start';
+    /**
+     * The width of the bar, in pixels, below which the middle region folds behind
+     * a toggle. Unset, it never folds.
+     */
+    foldBelow?: number;
+    /**
+     * Hides the bar as the page scrolls down past it, and shows it again as the
+     * page scrolls up.
+     */
+    hideOnScroll: boolean;
+    /** Whether the bar is narrower than `fold-below`, which only the observer sets. */
+    private folded;
+    /** Whether the folded middle region is open. */
+    private unfolded;
+    /** Watches the bar's own width while `fold-below` is set. */
+    private widths;
+    /** Starts or stops watching the width, according to `fold-below`. */
+    private watchWidth;
+    /** Folds the middle region where the bar is narrower than `fold-below`. */
+    private fold;
+    /** Opens or closes the folded middle region. */
+    private readonly handleToggle;
+    /** Escape in the open region closes it and puts focus back on the toggle. */
+    private readonly handleKeydown;
+    /** Whether the bar is out of the way, under `hide-on-scroll`. */
+    private away;
+    /** Where the page was last scrolled to, to tell down from up. */
+    private lastY;
+    /** Shows a hidden bar again when focus moves into it. */
+    private readonly handleFocusIn;
+    /** Hides the bar or shows it again, under `hide-on-scroll`. */
+    private hide;
+    /**
+     * Hides the bar on a scroll down past its own height, and shows it on a
+     * scroll up. A few pixels either way are not a direction, so a bar does not
+     * flicker under a hand resting on a trackpad. Not while focus is in the bar
+     * or its folded region is open, which a reader is using.
+     */
+    private follow;
+    /** The name of the toggle that opens a folded middle region. */
+    menuLabel: string;
     /**
      * The id of the element whose scrolling lifts the bar, for an app shell that
      * scrolls a container instead of the window. Unset is the window.
@@ -111,7 +177,16 @@ export declare class HelixHeadlessAppHeader extends HelixElement {
     /** Whether this header is the page's banner, read from where it sits. */
     private readLandmark;
     disconnectedCallback(): void;
+    /** The `fold-below` the width watch was started for, so a change is measured at once. */
+    private watchedFor;
+    protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    /**
+     * The glyph on the toggle that opens a folded middle region, behind a seam:
+     * slot fallback, so a consumer replaces it by slotting, and a method, so a
+     * tier above replaces it by overriding.
+     */
+    protected renderMenuIcon(): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/app-header/root/app-header-root.js

@@ -4,18 +4,41 @@ 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, elementById, HelixElement, HelixScrolledEvent, hostAria, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { customElement, deepActiveElement, deepContains, elementById, HelixElement, HelixScrolledEvent, hostAria, words, } from '@fusion.dev/helix-core';
+import { list } from '@fusion.dev/helix-icons';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { inSectioningContent } from '../sectioning.js';
 let HelixHeadlessAppHeader = class HelixHeadlessAppHeader extends HelixElement {
     constructor() {
         super(...arguments);
+        this.hideOnScroll = false;
+        this.folded = false;
+        this.unfolded = false;
+        this.handleToggle = () => {
+            this.unfolded = !this.unfolded;
+        };
+        this.handleKeydown = (event) => {
+            if (event.key !== 'Escape' || !this.unfolded || event.defaultPrevented) {
+                return;
+            }
+            event.preventDefault();
+            this.unfolded = false;
+            void this.updateComplete.then(() => this.partNamed('toggle')?.focus());
+        };
+        this.away = false;
+        this.lastY = 0;
+        this.handleFocusIn = () => {
+            this.hide(false);
+        };
+        this.menuLabel = 'Menu';
         this.landmark = 'banner';
         this.scrolled = false;
         this.handleScroll = () => {
             const source = this.source ?? window;
             const y = source instanceof Element ? source.scrollTop : window.scrollY;
+            this.follow(y);
             const next = this.scrolled ? y > 2 : y > 8;
             if (next === this.scrolled) {
                 return;
@@ -25,6 +48,57 @@ let HelixHeadlessAppHeader = class HelixHeadlessAppHeader extends HelixElement {
             this.dispatchEvent(new HelixScrolledEvent({ scrolled: next }));
         };
     }
+    static { this.words = 'helix-app-header'; }
+    watchWidth() {
+        if (!this.foldBelow || typeof ResizeObserver === 'undefined') {
+            this.widths?.disconnect();
+            this.widths = undefined;
+            this.folded = false;
+            return;
+        }
+        if (this.widths) {
+            return;
+        }
+        this.widths = new ResizeObserver(([entry]) => {
+            const width = entry?.borderBoxSize?.[0]?.inlineSize ?? entry?.contentRect.width ?? 0;
+            if (width > 0) {
+                this.fold(width);
+            }
+        });
+        this.widths.observe(this);
+    }
+    fold(width) {
+        const folded = this.foldBelow !== undefined && width < this.foldBelow;
+        if (folded !== this.folded) {
+            this.folded = folded;
+            this.unfolded = false;
+        }
+    }
+    hide(away) {
+        if (away === this.away) {
+            return;
+        }
+        this.away = away;
+        this.toggleState('hidden', away);
+    }
+    follow(y) {
+        const moved = y - this.lastY;
+        this.lastY = y;
+        if (!this.hideOnScroll) {
+            this.hide(false);
+            return;
+        }
+        const height = this.getBoundingClientRect().height;
+        if (y <= height) {
+            this.hide(false);
+        }
+        else if (moved > 4 && !this.unfolded && !deepContains(this, deepActiveElement())) {
+            this.hide(true);
+        }
+        else if (moved < -4) {
+            this.hide(false);
+        }
+    }
     findSource() {
         return (this.scroller ? elementById(this, this.scroller) : null) ?? window;
     }
@@ -44,6 +118,8 @@ let HelixHeadlessAppHeader = class HelixHeadlessAppHeader extends HelixElement {
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: this.landmark });
+        this.toggleState('folded', this.folded);
+        this.toggleState('open', this.folded && this.unfolded);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -54,6 +130,11 @@ let HelixHeadlessAppHeader = class HelixHeadlessAppHeader extends HelixElement {
             }
         });
         this.listen();
+        this.addEventListener('focusin', this.handleFocusIn);
+        this.addEventListener('keydown', this.handleKeydown);
+        if (this.hasUpdated) {
+            this.watchWidth();
+        }
     }
     readLandmark() {
         this.landmark = inSectioningContent(this) ? '' : 'banner';
@@ -63,19 +144,57 @@ let HelixHeadlessAppHeader = class HelixHeadlessAppHeader extends HelixElement {
         super.disconnectedCallback();
         this.source?.removeEventListener('scroll', this.handleScroll);
         this.source = undefined;
+        this.removeEventListener('focusin', this.handleFocusIn);
+        this.removeEventListener('keydown', this.handleKeydown);
+        this.widths?.disconnect();
+        this.widths = undefined;
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.watchedFor = this.foldBelow;
+        this.watchWidth();
     }
     updated(changed) {
         super.updated(changed);
         if (changed.has('scroller') && this.isConnected) {
             this.listen();
         }
+        if (this.foldBelow !== this.watchedFor) {
+            this.watchedFor = this.foldBelow;
+            this.watchWidth();
+            const width = this.getBoundingClientRect().width;
+            if (this.widths && width > 0) {
+                this.fold(width);
+            }
+        }
+        if (changed.has('hideOnScroll') && !this.hideOnScroll) {
+            this.hide(false);
+        }
+    }
+    renderMenuIcon() {
+        return html `<slot name="menu-icon">
+      <svg part="toggle-mark" fill="currentColor" viewBox=${list.viewBox} aria-hidden="true">
+        ${unsafeSVG(list.content)}
+      </svg>
+    </slot>`;
     }
     render() {
         return html `
       <div part="row">
         <div part="start"><slot name="start"></slot></div>
-        <div part="content"><slot></slot></div>
-        <div part="end"><slot name="end"></slot></div>
+        <div part="content" id="content" ?hidden=${this.folded && !this.unfolded}><slot></slot></div>
+        <div part="end"><slot name="end"></slot>${this.folded
+            ? html `<button
+                part="toggle"
+                type="button"
+                aria-controls="content"
+                aria-expanded=${this.unfolded ? 'true' : 'false'}
+                aria-label=${this.menuLabel}
+                @click=${this.handleToggle}
+              >
+                ${this.renderMenuIcon()}
+              </button>`
+            : nothing}</div>
       </div>
     `;
     }
@@ -83,6 +202,22 @@ let HelixHeadlessAppHeader = class HelixHeadlessAppHeader extends HelixElement {
 __decorate([
     property({ attribute: 'content-align', reflect: true })
 ], HelixHeadlessAppHeader.prototype, "contentAlign", void 0);
+__decorate([
+    property({ attribute: 'fold-below', type: Number })
+], HelixHeadlessAppHeader.prototype, "foldBelow", void 0);
+__decorate([
+    property({ attribute: 'hide-on-scroll', type: Boolean })
+], HelixHeadlessAppHeader.prototype, "hideOnScroll", void 0);
+__decorate([
+    state()
+], HelixHeadlessAppHeader.prototype, "folded", void 0);
+__decorate([
+    state()
+], HelixHeadlessAppHeader.prototype, "unfolded", void 0);
+__decorate([
+    words,
+    property({ attribute: 'menu-label' })
+], HelixHeadlessAppHeader.prototype, "menuLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessAppHeader.prototype, "scroller", void 0);

package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary One step in a breadcrumb trail.
  *
@@ -18,7 +18,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * including your own anchor.
  *
  * The current page is plain text, and `aria-current="page"` on the host conveys
- * the position.
+ * the position. In a trail where no crumb is `current`, the last one is said
+ * to be the current page, and keeps its link. An `aria-current` you write on
+ * the host, such as `aria-current="location"`, replaces the one the crumb
+ * gives itself.
  *
  * @since 0.1.0
  * @status stable
@@ -42,6 +45,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * the label and what follows it into one control.
  */
 export declare class HelixHeadlessBreadcrumb extends HelixElement {
+    static styles: CSSResultGroup;
     /**
      * Marks this item as the page you are on.
      */
@@ -65,6 +69,11 @@ export declare class HelixHeadlessBreadcrumb extends HelixElement {
      * of `breadcrumbs/links` lost its padding at once.
      */
     href?: string;
+    /**
+     * @internal Set by the trail: this is its last crumb and no crumb is
+     * `current`, so this one is said to be the current page.
+     */
+    implied: boolean;
     /**
      * The link's `rel` value, which describes how the linked page relates to this
      * one.

package/dist/breadcrumbs/breadcrumb/breadcrumb.js

@@ -6,23 +6,29 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement, HelixElement, hostAria, slotFilled, slotNamed, } from '@fusion.dev/helix-core';
 import { caretRight } from '@fusion.dev/helix-icons';
-import { html, nothing } from 'lit';
+import { css, html, nothing, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessBreadcrumb = class HelixHeadlessBreadcrumb extends HelixElement {
     constructor() {
         super(...arguments);
         this.current = false;
+        this.implied = false;
         this.rel = '';
         this.target = '';
         this.handleEnd = () => {
             this.markEnd();
         };
     }
+    static { this.styles = css `
+    :host(:first-child) [part='separator'] {
+      display: none;
+    }
+  `; }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'listitem' });
-        this.internals.ariaCurrent = this.current ? 'page' : null;
+        this.internals.ariaCurrent = this.current || this.implied ? 'page' : null;
     }
     updated(changed) {
         super.updated(changed);
@@ -60,6 +66,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessBreadcrumb.prototype, "href", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessBreadcrumb.prototype, "implied", void 0);
 __decorate([
     property()
 ], HelixHeadlessBreadcrumb.prototype, "rel", void 0);

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

@@ -1,6 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
-import '../breadcrumb/breadcrumb.js';
 /** One step of a trail written as data, for `items`. */
 export interface BreadcrumbItem {
     /** The URL the step links to. The last step is the current page and takes none. */
@@ -26,7 +25,8 @@ export interface BreadcrumbItem {
  * markers.
  *
  * The items are slotted directly, so they are `<ol>` children in the flat tree,
- * and each item sets `role="listitem"` on itself.
+ * and each item sets `role="listitem"` on itself. Where no slotted crumb is
+ * `current`, the last one is said to be the current page.
  *
  * The trail does not measure itself, and you write its overflow in markup: put
  * the crumb that holds the folded items where the gap should appear.
@@ -41,6 +41,11 @@ export interface BreadcrumbItem {
  * to the first crumb it brought back. A new `items` folds again. Slotted crumbs
  * do not fold; write the folded crumb where the gap should be.
  *
+ * **Keyboard.** Each crumb with an `href` is a link and one tab stop, and
+ * Enter follows it. The current page and the separators are not in the tab
+ * order. In a folded trail, Enter or Space on the fold's button shows the
+ * whole trail and moves focus to the first crumb it brought back.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -96,8 +101,15 @@ export declare class HelixHeadlessBreadcrumbs extends HelixElement {
     /** Shows the whole trail and moves focus to the first crumb it brought back. */
     private readonly expand;
     protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
     /** How many crumbs drawn from `items` are folded away, or 0. */
     private get folded();
+    /**
+     * Says the last slotted crumb is the current page where none is marked
+     * `current`, as React Aria's trail does. Through a property the crumb does
+     * not reflect, so nothing is written onto your markup.
+     */
+    private readonly markLast;
     /** The crumbs `items` describes, each a crumb of this tier. */
     protected renderItems(): TemplateResult | typeof nothing;
     protected render(): TemplateResult;

package/dist/breadcrumbs/root/breadcrumbs-root.js

@@ -4,12 +4,12 @@ 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, formatWords, HelixElement, hostAria, words } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixElement, hostAria, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
-import '../breadcrumb/breadcrumb.js';
+import { HelixHeadlessBreadcrumb } from '../breadcrumb/breadcrumb.js';
 let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixElement {
     constructor() {
         super(...arguments);
@@ -24,6 +24,15 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
                 crumb?.shadowRoot?.querySelector('a, [part="link"]')?.focus();
             });
         };
+        this.markLast = () => {
+            const crumbs = (this.renderRoot.querySelector('slot:not([name])')?.assignedElements() ?? []).filter((one) => one instanceof HelixHeadlessBreadcrumb);
+            const marked = crumbs.some((one) => one.current);
+            crumbs.forEach((crumb, index) => {
+                whenHydrated(crumb, () => {
+                    crumb.implied = !marked && this.items.length === 0 && index === crumbs.length - 1;
+                });
+            });
+        };
     }
     static { this.words = 'helix-breadcrumbs'; }
     willUpdate(changed) {
@@ -33,6 +42,10 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
             this.expanded = false;
         }
     }
+    updated(changed) {
+        super.updated(changed);
+        this.markLast();
+    }
     get folded() {
         const most = this.maxItems ?? 0;
         const count = this.items.length;
@@ -77,7 +90,7 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
     }
     render() {
         return html `<ol part="list" role="list">
-      ${this.renderItems()}<slot></slot>
+      ${this.renderItems()}<slot @slotchange=${this.markLast}></slot>
     </ol>`;
     }
 };

package/dist/dialog/description.d.ts

@@ -1,3 +1,13 @@
+/**
+ * The elements at the start of a list that hold words and no control, up to the
+ * first one that is or holds a control.
+ *
+ * `skip` is an element whose words are said elsewhere, such as the heading
+ * that names a panel. It is left out, and an element holding it is read for
+ * its other children, so a card's title names the panel and the card's text
+ * describes it.
+ */
+export declare const wordsAmong: (elements: readonly Element[], skip?: Element | null) => Element[];
 /**
  * The elements at the start of a slot that hold words and no control, up to the
  * first one that is or holds a control.

package/dist/dialog/description.js

@@ -14,15 +14,29 @@ const isControl = (element) => {
         root?.delegatesFocus === true ||
         root?.querySelector(CONTROL) != null);
 };
-export const wordsIn = (slot) => {
+export const wordsAmong = (elements, skip = null) => {
     const words = [];
-    for (const one of slot?.assignedElements({ flatten: true }) ?? []) {
-        if (isControl(one) || [...one.querySelectorAll('*')].some(isControl)) {
-            break;
+    const read = (list) => {
+        for (const one of list) {
+            if (one === skip) {
+                continue;
+            }
+            if (skip && one.contains(skip)) {
+                if (!read([...one.children])) {
+                    return false;
+                }
+                continue;
+            }
+            if (isControl(one) || [...one.querySelectorAll('*')].some(isControl)) {
+                return false;
+            }
+            if ((one.textContent ?? '').trim() !== '') {
+                words.push(one);
+            }
         }
-        if ((one.textContent ?? '').trim() !== '') {
-            words.push(one);
-        }
-    }
+        return true;
+    };
+    read(elements);
     return words;
 };
+export const wordsIn = (slot) => wordsAmong(slot?.assignedElements({ flatten: true }) ?? []);

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

@@ -39,6 +39,16 @@ declare const HelixHeadlessDialog_base: (new (...args: any[]) => import("@fusion
  * announces with its description as it opens. Set `dismissible` to draw a
  * close control, labeled by `dismiss-label`.
  *
+ * **Keyboard.** Opening moves focus to the first control in the dialog.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Tab, Shift+Tab | Moves through the controls in the dialog, from the last round to the first and from the first round to the last. |
+ * | Escape | Asks to close the dialog. A `helix-before-close` listener can refuse, and `persistent` or `closedby="none"` keeps it open. |
+ * | Enter, Space | On the close control, closes the dialog. |
+ *
+ * Closing puts focus back on the element that had it before the dialog opened.
+ *
  * @since 0.1.0
  * @status stable
  * @category overlays
@@ -94,8 +104,14 @@ export declare class HelixHeadlessDialog extends HelixHeadlessDialog_base {
      * `closedby="any"` gains light dismiss without giving up the refusal, which is
      * the property this component exists to keep.
      *
+     * The press on the backdrop that this element handles itself follows it too:
+     * `closerequest` and `none` leave the dialog open on that press, as the
+     * platform does, and `none` also keeps it open on Escape in a browser without
+     * `closedby`.
+     *
      * Absent by default, which is the platform's `auto` and this library's rule
-     * that a resting value is an attribute's absence.
+     * that a resting value is an attribute's absence. Absent, a press on the
+     * backdrop closes the dialog.
      */
     closedBy?: 'any' | 'closerequest' | 'none';
     /**

package/dist/dialog/root/dialog-root.js

@@ -36,7 +36,7 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
         this.returned = '';
         this.handleCancel = (event) => {
             event.preventDefault();
-            if (this.persistent) {
+            if (this.persistent || this.closedBy === 'none') {
                 return;
             }
             this.requestOpen(false);
@@ -84,7 +84,7 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
                 event.clientY <= box.bottom) {
                 return;
             }
-            if (this.persistent) {
+            if (this.persistent || this.closedBy === 'none' || this.closedBy === 'closerequest') {
                 this.refuse();
                 return;
             }