@fusion.dev/helix-headless 0.153.0 → 0.155.0

package/dist/element-events.generated.js

@@ -6,6 +6,7 @@ registerElementEvents({
     'helix-headless-area-chart': ['helix-reading-change', 'helix-reading-press'],
     'helix-headless-avatar': ['error', 'load'],
     'helix-headless-bar-chart': ['helix-reading-change', 'helix-reading-press'],
+    'helix-headless-breadcrumb': ['helix-select'],
     'helix-headless-button': ['helix-press'],
     'helix-headless-button-group': ['change', 'helix-before-change'],
     'helix-headless-callout': ['helix-dismiss'],
@@ -241,7 +242,7 @@ registerElementEvents({
     'helix-headless-step': ['helix-select'],
     'helix-headless-steps': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-headless-switch': ['change', 'helix-before-toggle', 'input'],
-    'helix-headless-tab': ['helix-select'],
+    'helix-headless-tab': ['helix-dismiss', 'helix-select'],
     'helix-headless-table': [
         'helix-before-reorder',
         'helix-reorder',

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

@@ -17,7 +17,16 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * Every region is a bare slot. There is no `empty-state-heading` or
  * `empty-state-actions` element: assign your own heading and actions to the
- * slots.
+ * slots. The icon, the message and the actions slots are parts of the same
+ * names, as Card's regions are. A slot draws no box, so a part passes
+ * inherited properties, such as color and font, to what is slotted, and a
+ * page wanting a box there gives it one with `display`, such as a row of
+ * actions with `display: flex`.
+ *
+ * **The view says which regions it holds**, as `:state(has-icon)` and
+ * `:state(has-actions)`, so a sheet can space a view with no icon or no
+ * actions differently. Read in the browser, so a served view carries neither
+ * until the script runs.
  *
  * **Or give the heading as words.** `heading` draws them in a `heading` part
  * that is a heading at `heading-level`, 3 where it is not set, so a page
@@ -42,8 +51,14 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot heading - The heading, which names what is missing. A heading element, such as an `<h3>`, keeps its level; any other element is read as a heading at `heading-level`. Replaces the one `heading` draws.
  * @slot icon - An icon above the heading.
  *
+ * @csspart actions - The slot the actions arrive through. A slot draws no box, so it passes inherited properties to the actions; `display: flex` lays them out in a row.
  * @csspart heading - The heading at `heading-level`: the one `heading` draws while nothing is slotted into `heading`, or the one around a slotted element that is no heading.
+ * @csspart icon - The slot the icon arrives through, drawing no box, as `actions` does.
  * @csspart live - A copy of the heading and the message, in a live region that screen readers announce when the view appears. Visually hidden in the styled tier.
+ * @csspart message - The slot the message arrives through, drawing no box, as `actions` does.
+ *
+ * @cssstate has-actions - Something is slotted into `actions`.
+ * @cssstate has-icon - Something is slotted into `icon`.
  */
 export declare class HelixHeadlessEmpty extends HelixElement {
     /**
@@ -75,6 +90,9 @@ export declare class HelixHeadlessEmpty extends HelixElement {
     private looseHeading;
     protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /** Says which regions hold something, one call apiece so each pairs with its `@cssstate`. */
+    private readonly readRegions;
     protected readonly arrival: ArrivalController;
     /**
      * The `heading` slot, with the heading `heading` draws as its fallback, so

package/dist/empty/root/empty-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 { ArrivalController, customElement, HelixElement, headingIn, headingLevel, slottedWords, } from '@fusion.dev/helix-core';
+import { ArrivalController, customElement, HelixElement, headingIn, headingLevel, slotFilled, slottedWords, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessEmpty = class HelixHeadlessEmpty extends HelixElement {
@@ -13,6 +13,11 @@ let HelixHeadlessEmpty = class HelixHeadlessEmpty extends HelixElement {
         this.heading = '';
         this.noAnnounce = false;
         this.looseHeading = false;
+        this.readRegions = () => {
+            const filled = (name) => slotFilled(this.renderRoot?.querySelector(`slot[name="${name}"]`));
+            this.toggleState('has-icon', filled('icon'));
+            this.toggleState('has-actions', filled('actions'));
+        };
         this.arrival = new ArrivalController(this, {
             arriving: () => !this.serverRendered && document.readyState === 'complete',
             text: () => [slottedWords(this, ['heading']) || this.heading.trim(), slottedWords(this, [''])]
@@ -31,6 +36,10 @@ let HelixHeadlessEmpty = class HelixHeadlessEmpty extends HelixElement {
         super.firstUpdated(changed);
         this.finishHydration();
     }
+    updated(changed) {
+        super.updated(changed);
+        this.readRegions();
+    }
     renderHeading(hidden) {
         const level = headingLevel(this.headingLevel);
         const slot = html `<slot
@@ -58,10 +67,10 @@ let HelixHeadlessEmpty = class HelixHeadlessEmpty extends HelixElement {
     render() {
         const say = () => this.arrival.say();
         const held = this.arrival.said !== '' && !this.noAnnounce;
-        return html `<slot name="icon"></slot>
+        return html `<slot name="icon" part="icon" @slotchange=${this.readRegions}></slot>
       ${this.renderHeading(held)}
-      <slot aria-hidden=${held ? 'true' : nothing} @slotchange=${say}></slot>
-      <slot name="actions"></slot>
+      <slot aria-hidden=${held ? 'true' : nothing} part="message" @slotchange=${say}></slot>
+      <slot name="actions" part="actions" @slotchange=${this.readRegions}></slot>
       ${this.noAnnounce
             ? nothing
             : html `<span part="live" role="status">${this.arrival.said}</span>`}`;

package/dist/icon/fetch.d.ts

@@ -0,0 +1,20 @@
+import type { HelixIcon } from '@fusion.dev/helix-icons';
+/**
+ * Reads an SVG file's text as an icon, or `undefined` where it is no SVG.
+ *
+ * **What could run is taken out**, because the markup is drawn as it is: every
+ * `<script>` and `<foreignObject>`, every `on…` attribute, every link to a
+ * `javascript:` URL, and every animation that writes a link or a handler. The
+ * root's paint attributes are kept on a group around the shapes, and its
+ * `viewBox`, or its width and height, is the box.
+ *
+ * @param text The file's text.
+ * @param name What the icon is known by, its URL.
+ */
+export declare const readIconFile: (text: string, name: string) => HelixIcon | undefined;
+/**
+ * The icon in the SVG file at `src`: at once where it has been fetched, or a
+ * promise of it the first time, fetched once a page however many elements ask.
+ * `undefined` where the file could not be fetched or is no SVG.
+ */
+export declare const fetchIcon: (src: string) => HelixIcon | Promise<HelixIcon | undefined> | undefined;

package/dist/icon/fetch.js

@@ -0,0 +1,70 @@
+const PAINT = [
+    'fill',
+    'fill-rule',
+    'stroke',
+    'stroke-linecap',
+    'stroke-linejoin',
+    'stroke-miterlimit',
+    'stroke-width',
+];
+const KEY = Symbol.for('helix.icon-fetched');
+const fetched = () => {
+    const held = globalThis;
+    let found = held[KEY];
+    if (!found) {
+        found = { answers: new Map() };
+        held[KEY] = found;
+    }
+    return found;
+};
+export const readIconFile = (text, name) => {
+    const parsed = new DOMParser().parseFromString(text, 'image/svg+xml');
+    const root = parsed.documentElement;
+    if (root?.localName !== 'svg' || parsed.getElementsByTagName('parsererror').length > 0) {
+        return undefined;
+    }
+    for (const unsafe of [...root.querySelectorAll('script, foreignObject')]) {
+        unsafe.remove();
+    }
+    for (const animation of [...root.querySelectorAll('animate, set')]) {
+        const target = (animation.getAttribute('attributeName') ?? '').toLowerCase();
+        if (target.endsWith('href') || target.startsWith('on')) {
+            animation.remove();
+        }
+    }
+    for (const element of [root, ...root.querySelectorAll('*')]) {
+        for (const attribute of [...element.attributes]) {
+            const link = attribute.localName === 'href' && /^\s*javascript:/i.test(attribute.value);
+            if (attribute.localName.toLowerCase().startsWith('on') || link) {
+                element.removeAttribute(attribute.name);
+            }
+        }
+    }
+    const width = Number.parseFloat(root.getAttribute('width') ?? '') || 24;
+    const height = Number.parseFloat(root.getAttribute('height') ?? '') || width;
+    const viewBox = root.getAttribute('viewBox') ?? `0 0 ${width} ${height}`;
+    const paint = PAINT.filter((one) => root.hasAttribute(one))
+        .map((one) => `${one}="${(root.getAttribute(one) ?? '').replaceAll('"', '"')}"`)
+        .join(' ');
+    const shapes = [...root.childNodes]
+        .map((node) => (node instanceof Element ? new XMLSerializer().serializeToString(node) : ''))
+        .join('');
+    return { content: paint ? `<g ${paint}>${shapes}</g>` : shapes, name, viewBox };
+};
+export const fetchIcon = (src) => {
+    const held = fetched();
+    if (held.answers.has(src)) {
+        return held.answers.get(src);
+    }
+    const pending = fetch(src)
+        .then((response) => (response.ok ? response.text() : undefined))
+        .then((text) => (text === undefined ? undefined : readIconFile(text, src)))
+        .catch(() => undefined);
+    held.answers.set(src, pending);
+    void pending.then((icon) => {
+        if (held.answers.get(src) === pending) {
+            held.answers.set(src, icon);
+        }
+    });
+    return pending;
+};

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

@@ -27,8 +27,16 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * a glyph that came later is drawn. A glyph registered after the element
  * rendered is drawn then.
  *
- * A name with no match renders nothing, and the element fires `error`, so a
- * typo in a name can be heard. It waits until the page has loaded and painted
+ * **Or point `src` at an SVG file**, such as `src="/icons/rocket.svg"`, and
+ * the element fetches it and draws its shapes in `currentColor` where the file
+ * does not color them. A file is fetched once a page, however many icons name
+ * it, and `load` fires when it is drawn. Scripts, event handlers and
+ * `javascript:` links in the file are taken out before it is drawn. A server
+ * fetches nothing, so a served icon with a `src` is drawn once the script
+ * runs.
+ *
+ * A name with no match, or a `src` that is no SVG, renders nothing, and the
+ * element fires `error`, so a typo in a name can be heard. It waits until the page has loaded and painted
  * first, so a library a later module registers is not taken for a typo.
  *
  * An icon is decorative by default and hidden from assistive technology. Set
@@ -47,8 +55,8 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @aliases Glyph, Symbol
  * @documentation https://fusion.dev/helix/components/icon
  *
- * @event {Event} error - `name` matches no registered icon and no library answers it, so nothing is drawn.
- * @event {Event} load - A glyph a library gave later for `name` is drawn.
+ * @event {Event} error - `name` matches no registered icon and no library answers it, or `src` is no SVG, so nothing is drawn.
+ * @event {Event} load - A glyph a library gave later for `name`, or the file at `src`, is drawn.
  *
  * @csspart svg - The rendered SVG.
  */
@@ -97,6 +105,13 @@ export declare class HelixHeadlessIcon extends HelixElement {
      * prefix.
      */
     name: string;
+    /**
+     * The URL of an SVG file to draw, fetched once a page and drawn in
+     * `currentColor` where the file does not color its shapes.
+     *
+     * Wins over `name`; `icon` wins over both. Absent draws `name`.
+     */
+    src: string;
     /**
      * Hears an `aria-label` written on the element, which no property mirrors.
      *
@@ -120,11 +135,18 @@ export declare class HelixHeadlessIcon extends HelixElement {
     private arrived;
     /** Stops listening to the registry. */
     private unwatch;
+    /** What the glyph is asked for by: `src` where it is set, and `name` otherwise. */
+    private get asked();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /** What the registry gives for `name` now, starting the wait for a late glyph. */
+    /**
+     * What `src` or the registry gives now, starting the wait for a late glyph.
+     * A file is fetched only where the page can be read: a server fetches
+     * nothing, and a hydrating render draws what the server sent.
+     */
     private lookup;
     protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /** Hands the drawn `<svg>` to the mutator of the library `name` asks, where it has one. */
     private mutate;

package/dist/icon/root/icon-root.js

@@ -8,6 +8,7 @@ import { auditName, customElement, HelixElement, hostAria, reportRuntime, } from
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { fetchIcon } from '../fetch.js';
 import { iconMutator, resolveIcon, watchIcons } from '../registry.js';
 import { afterPageSettles } from '../settle.js';
 let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
@@ -16,6 +17,7 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
         this.label = '';
         this.mirror = false;
         this.name = '';
+        this.src = '';
         this.missed = '';
         this.waiting = false;
         this.arrived = '';
@@ -30,10 +32,13 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
             this.requestUpdate();
         }
     }
+    get asked() {
+        return this.src || this.name;
+    }
     connectedCallback() {
         super.connectedCallback();
         this.unwatch = watchIcons(() => {
-            if (this.icon === undefined && this.name !== '') {
+            if (this.icon === undefined && this.src === '' && this.name !== '') {
                 this.requestUpdate();
             }
         });
@@ -44,15 +49,21 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
         this.unwatch = undefined;
     }
     lookup() {
-        const found = this.name === '' ? undefined : resolveIcon(this.name);
-        this.waiting = found instanceof Promise;
+        const asked = this.asked;
+        const found = this.src !== ''
+            ? this.childrenKnown
+                ? fetchIcon(this.src)
+                : undefined
+            : this.name === ''
+                ? undefined
+                : resolveIcon(this.name);
+        this.waiting = found instanceof Promise || (this.src !== '' && !this.childrenKnown);
         if (!(found instanceof Promise)) {
             return found;
         }
-        const name = this.name;
         void found.then(() => {
-            if (this.name === name && this.isConnected) {
-                this.arrived = name;
+            if (this.asked === asked && this.isConnected) {
+                this.arrived = asked;
                 this.requestUpdate();
             }
         });
@@ -64,19 +75,26 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
         hostAria(this.internals, { role: named ? 'img' : '' });
         this.drawn = this.icon ?? this.lookup();
     }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        if (this.src !== '') {
+            this.finishHydration();
+        }
+    }
     updated(changed) {
         super.updated(changed);
         if (this.drawn !== undefined) {
             this.mutate();
             this.auditControl();
         }
-        if (this.arrived === this.name && this.drawn !== undefined) {
+        const asked = this.asked;
+        if (this.arrived === asked && this.drawn !== undefined) {
             this.dispatchEvent(new Event('load', { bubbles: false, cancelable: false, composed: false }));
         }
         this.arrived = '';
-        if (this.drawn === undefined && this.name !== '' && !this.waiting) {
-            if (this.missed !== this.name && this.pending !== this.name) {
-                this.pending = this.name;
+        if (this.drawn === undefined && asked !== '' && !this.waiting) {
+            if (this.missed !== asked && this.pending !== asked) {
+                this.pending = asked;
                 afterPageSettles(() => this.reportMissing());
             }
         }
@@ -86,7 +104,7 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
     }
     mutate() {
         const svg = this.renderRoot.querySelector('svg');
-        const mutator = this.icon === undefined ? iconMutator(this.name) : undefined;
+        const mutator = this.icon === undefined && this.src === '' ? iconMutator(this.name) : undefined;
         if (svg && mutator) {
             mutator(svg);
         }
@@ -102,18 +120,21 @@ let HelixHeadlessIcon = class HelixHeadlessIcon extends HelixElement {
         }
     }
     reportMissing() {
-        const name = this.pending;
+        const asked = this.pending;
         this.pending = '';
-        if (this.name !== name || this.drawn !== undefined || this.waiting || !this.isConnected) {
+        if (this.asked !== asked || this.drawn !== undefined || this.waiting || !this.isConnected) {
             return;
         }
-        this.missed = name;
+        this.missed = asked;
         this.dispatchEvent(new Event('error', { bubbles: false, cancelable: false, composed: false }));
         reportRuntime({
             kind: 'unknown-icon',
-            message: `<${this.localName} name="${name}"> names no registered icon, so it draws ` +
-                'nothing. Check the name, register the glyph with `registerIcons`, or import it ' +
-                'and pass it as `icon`.',
+            message: this.src === ''
+                ? `<${this.localName} name="${asked}"> names no registered icon, so it draws ` +
+                    'nothing. Check the name, register the glyph with `registerIcons`, or import it ' +
+                    'and pass it as `icon`.'
+                : `<${this.localName} src="${asked}"> could not be fetched as an SVG file, so it ` +
+                    'draws nothing. Check the URL, and that the file is an `<svg>`.',
             tag: this.localName,
         });
     }
@@ -148,6 +169,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessIcon.prototype, "name", void 0);
+__decorate([
+    property()
+], HelixHeadlessIcon.prototype, "src", void 0);
 HelixHeadlessIcon = __decorate([
     customElement('helix-headless-icon')
 ], HelixHeadlessIcon);

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

@@ -36,6 +36,15 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * links and not a single control, and the keys across the other axis are
  * left to the page and to an open panel.
  *
+ * While a `Megamenu`, or another disclosure among the destinations, is open,
+ * the navigation is `:state(open)`, so a page can dim what lies under the
+ * panel, as Radix's navigation menu marks its open state.
+ *
+ * A screen reader lists the page's navigation landmarks by name, so two named
+ * alike cannot be told apart. Where another navigation in the same document
+ * has the same name, "Main" for two with no `label`, the later one warns once
+ * with the kind `duplicate-name`.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -47,6 +56,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @csspart indicator - The marker that moves to the current destination. It carries the destination's place and size as `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and `--indicator-block-size`, and `data-placed` once it has been placed.
  * @csspart nav - The navigation landmark.
+ *
+ * @cssstate open - While a megamenu or another disclosure among the destinations is open.
  */
 export declare class HelixHeadlessNavigation extends HelixElement {
     /**
@@ -80,6 +91,21 @@ export declare class HelixHeadlessNavigation extends HelixElement {
      */
     orientation?: 'vertical';
     private current;
+    /** The disclosures among the destinations that are open. */
+    private readonly opened;
+    /**
+     * Hears a disclosure among the destinations open or close. In capture,
+     * because `toggle` does not bubble.
+     */
+    private readonly handleToggle;
+    /** The landmark's name as a screen reader lists it. */
+    private get landmarkName();
+    /**
+     * Warns once where another navigation in the same document has the same
+     * name, a task after the first render, so the page's other landmarks have
+     * rendered too.
+     */
+    private auditTwin;
     /**
      * The destinations the consumer slotted, and the items of a slotted list in
      * place of the list.

package/dist/navigation/root/navigation-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 { AriaForwardController, customElement, focusableElements, focusItemOf, HelixElement, IndicatorController, KeyboardNavigationController, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, focusableElements, focusItemOf, HelixElement, IndicatorController, KeyboardNavigationController, reportRuntime, words, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 const FOCUSABLE = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])';
@@ -23,6 +23,8 @@ const navigable = (item) => {
         },
     });
 };
+const connected = new Set();
+const warned = new WeakSet();
 let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement {
     constructor() {
         super(...arguments);
@@ -53,8 +55,56 @@ let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement
             label: true,
             target: () => this.partNamed('nav'),
         });
+        this.opened = new Set();
+        this.handleToggle = (event) => {
+            const target = event.target;
+            if (target === this || target === null) {
+                return;
+            }
+            if (event.newState === 'open') {
+                this.opened.add(target);
+            }
+            else {
+                this.opened.delete(target);
+            }
+            this.toggleState('open', this.opened.size > 0);
+        };
     }
     static { this.words = 'helix-navigation'; }
+    get landmarkName() {
+        const labeled = this.getAttribute('aria-labelledby');
+        if (labeled) {
+            const root = this.getRootNode();
+            return labeled
+                .split(/\s+/)
+                .map((id) => root.getElementById?.(id)?.textContent?.trim() ?? '')
+                .join(' ')
+                .trim();
+        }
+        return (this.getAttribute('aria-label') ?? this.label).trim();
+    }
+    auditTwin() {
+        setTimeout(() => {
+            if (!this.isConnected || warned.has(this)) {
+                return;
+            }
+            const name = this.landmarkName;
+            const root = this.getRootNode();
+            const twin = [...connected].some((other) => other !== this &&
+                other.isConnected &&
+                (other.compareDocumentPosition(this) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0 &&
+                other.getRootNode() === root &&
+                other.landmarkName === name);
+            if (twin) {
+                warned.add(this);
+                reportRuntime({
+                    kind: 'duplicate-name',
+                    message: `<${this.localName}> has the name "${name}", which another navigation on the page has too, so a screen reader lists the two alike. Give each a \`label\` that says what it holds, such as "Footer".`,
+                    tag: this.localName,
+                });
+            }
+        });
+    }
     get items() {
         const slot = this.renderRoot.querySelector('slot:not([name])');
         return (slot?.assignedElements() ?? []).flatMap((one) => isList(one) ? [...one.children] : [one]);
@@ -69,17 +119,24 @@ let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement
     }
     connectedCallback() {
         super.connectedCallback();
+        connected.add(this);
+        this.addEventListener('toggle', this.handleToggle, true);
         if (this.hasUpdated) {
             this.watch();
         }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        connected.delete(this);
+        this.removeEventListener('toggle', this.handleToggle, true);
+        this.opened.clear();
+        this.toggleState('open', false);
         this.current?.disconnect();
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.watch();
+        this.auditTwin();
     }
     render() {
         return html `<nav part="nav" aria-label=${this.label}>

package/dist/quote/root/quote-root.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 A short quotation, set inline with the text around it.
  *
@@ -12,6 +12,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * element, and its marks follow it: `lang="de"` sets „…“ and `lang="fr"` «…»
  * inside an English page.
  *
+ * **`no-marks` leaves the marks off**, for a quotation set where the page draws
+ * its own, such as a pull quote with a large decorative mark beside it or a
+ * table of sayings. The quotation still counts toward nesting, so a quote
+ * inside it takes the inner marks it would have had. Text with marks typed
+ * into it raises no warning under `no-marks`.
+ *
  * For a passage set off from the surrounding text, use a blockquote.
  *
  * @since 0.1.0
@@ -25,10 +31,20 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart quote - The quotation.
  */
 export declare class HelixHeadlessQuote extends HelixElement {
+    static styles: CSSResultGroup;
     /**
      * URL identifying where the quotation came from.
      */
     cite: string;
+    /**
+     * Whether to leave the quotation marks off, for a quotation set where the
+     * page draws its own.
+     *
+     * Negative, because the marks are on by default and a boolean attribute is
+     * true whenever it is present. Reflected, because a stylesheet takes the
+     * marks off on it.
+     */
+    noMarks: boolean;
     /** Whether this quote has said its text carries typed marks, so it says so once. */
     private warned;
     /**

package/dist/quote/root/quote-root.js

@@ -5,20 +5,21 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, HelixElement, reportRuntime } from '@fusion.dev/helix-core';
-import { html, nothing } from 'lit';
+import { css, html, nothing, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { typedMarks } from '../marks.js';
 let HelixHeadlessQuote = class HelixHeadlessQuote extends HelixElement {
     constructor() {
         super(...arguments);
         this.cite = '';
+        this.noMarks = false;
         this.warned = false;
         this.readText = () => {
             const text = [...this.childNodes]
                 .filter((node) => !(node instanceof Element) || !node.slot)
                 .map((node) => node.textContent ?? '')
                 .join('');
-            if (this.warned || !typedMarks(text)) {
+            if (this.warned || this.noMarks || !typedMarks(text)) {
                 return;
             }
             this.warned = true;
@@ -29,6 +30,15 @@ let HelixHeadlessQuote = class HelixHeadlessQuote extends HelixElement {
             });
         };
     }
+    static { this.styles = css `
+    :host([no-marks]) [part='quote']::before {
+      content: no-open-quote;
+    }
+
+    :host([no-marks]) [part='quote']::after {
+      content: no-close-quote;
+    }
+  `; }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.readText();
@@ -41,6 +51,9 @@ let HelixHeadlessQuote = class HelixHeadlessQuote extends HelixElement {
 __decorate([
     property()
 ], HelixHeadlessQuote.prototype, "cite", void 0);
+__decorate([
+    property({ attribute: 'no-marks', reflect: true, type: Boolean })
+], HelixHeadlessQuote.prototype, "noMarks", void 0);
 HelixHeadlessQuote = __decorate([
     customElement('helix-headless-quote')
 ], HelixHeadlessQuote);