@fusion.dev/helix-headless 0.0.0-dev

package/dist/icon-button/index.d.ts

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

package/dist/icon-button/index.js

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

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

@@ -0,0 +1,40 @@
+import { HelixHeadlessButton } from '../../button/root/button-root.js';
+/**
+ * @summary A button whose content is an icon, and which must be named.
+ *
+ * @description
+ * Everything a button does, with one thing added and it is the reason this is
+ * an element rather than a note on `Button`: **an icon-only control has no
+ * accessible name unless it is given one.** A button whose content is a glyph
+ * announces as "button" and nothing else, which is the single most common way a
+ * toolbar becomes unusable without sight. `label` is not optional in practice,
+ * and having a component that says so is what makes it reviewable.
+ *
+ * **Registered, so it can be rendered and not only subclassed.** The styled
+ * icon button extended `HelixHeadlessButton` directly, which left no
+ * `helix-headless-icon-button` for anything to use: a headless consumer wanting an
+ * icon button had a button and a naming convention. Anything in this tier that
+ * needs one, such as an announcement's dismiss control, can now render it
+ * without reaching into the styled tier for a tag that would never upgrade.
+ *
+ * Top-level rather than `Button.Icon`, because a namespace means composition
+ * and an icon-only button is not part of a button. It is a button with
+ * different content and a different shape, which makes it its own component.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category actions
+ * @aliases Icon button, Square button
+ * @documentation https://helix.fusion.dev/components/icon-button
+ *
+ * @slot - The icon.
+ *
+ * @csspart button - The inner button or anchor.
+ */
+export declare class HelixHeadlessIconButton extends HelixHeadlessButton {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-icon-button': HelixHeadlessIconButton;
+    }
+}

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

@@ -0,0 +1,46 @@
+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 } from '@fusion.dev/helix-core';
+import { HelixHeadlessButton } from '../../button/root/button-root.js';
+/**
+ * @summary A button whose content is an icon, and which must be named.
+ *
+ * @description
+ * Everything a button does, with one thing added and it is the reason this is
+ * an element rather than a note on `Button`: **an icon-only control has no
+ * accessible name unless it is given one.** A button whose content is a glyph
+ * announces as "button" and nothing else, which is the single most common way a
+ * toolbar becomes unusable without sight. `label` is not optional in practice,
+ * and having a component that says so is what makes it reviewable.
+ *
+ * **Registered, so it can be rendered and not only subclassed.** The styled
+ * icon button extended `HelixHeadlessButton` directly, which left no
+ * `helix-headless-icon-button` for anything to use: a headless consumer wanting an
+ * icon button had a button and a naming convention. Anything in this tier that
+ * needs one, such as an announcement's dismiss control, can now render it
+ * without reaching into the styled tier for a tag that would never upgrade.
+ *
+ * Top-level rather than `Button.Icon`, because a namespace means composition
+ * and an icon-only button is not part of a button. It is a button with
+ * different content and a different shape, which makes it its own component.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category actions
+ * @aliases Icon button, Square button
+ * @documentation https://helix.fusion.dev/components/icon-button
+ *
+ * @slot - The icon.
+ *
+ * @csspart button - The inner button or anchor.
+ */
+let HelixHeadlessIconButton = class HelixHeadlessIconButton extends HelixHeadlessButton {
+};
+HelixHeadlessIconButton = __decorate([
+    customElement('helix-headless-icon-button')
+], HelixHeadlessIconButton);
+export { HelixHeadlessIconButton };

package/dist/image/index.d.ts

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

package/dist/image/index.js

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

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

@@ -0,0 +1,213 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+/**
+ * @summary A picture that says whether it arrived.
+ *
+ * @description
+ * **An element rather than a recipe, because of the part CSS cannot do.**
+ * Reserving the box is `aspect-ratio` and needs nothing from anybody; `Link` and
+ * the megamenu row are recipes in `preview.css` for exactly that reason. What
+ * cannot be written as a rule is *when the picture arrived*: a stylesheet has no
+ * way to know, and no way to hear that it never will. So this owns three states
+ * and the two events that move between them, and leaves the box to the
+ * stylesheet.
+ *
+ * **The placeholder is a slot with nothing in it by default.** A default of
+ * `Skeleton` would be right and is not written here: this tier renders no other
+ * component, and reaching for one would make the headless package depend on the
+ * styled one. The styled tier draws the resting placeholder instead, and a
+ * consumer who wants a `Skeleton`, a blurred thumbnail or a solid color slots
+ * it.
+ *
+ * **No source is a loading state, not a fourth one.** A picture whose `src` has
+ * not arrived yet is the common case for anything drawn from data, and the
+ * useful answer there is the same as for one still on the wire: stand something
+ * in its place and keep the ground reserved. So an element with no `src` shows
+ * its placeholder and waits, rather than resolving to an empty box that has to
+ * be laid out twice.
+ *
+ * **`alt` is a property and not an afterthought.** An empty string is a real
+ * answer, meaning the picture is decoration and a screen reader should skip it,
+ * which is why the attribute is always written even when it is empty: omitting
+ * it entirely makes a reader announce the file name instead.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category media
+ * @aliases Picture, Img, Figure
+ * @documentation https://helix.fusion.dev/components/image
+ *
+ * @slot fallback - Shown instead of it, if it never does.
+ * @slot placeholder - Shown until the picture arrives.
+ *
+ * @event {Event} error - Relayed for the same reason.
+ * @event {Event} load - Relayed, because the platform's own does not escape.
+ *
+ * @csspart fallback - What stands in when it fails.
+ * @csspart image - The picture itself.
+ * @csspart placeholder - What stands in until it arrives.
+ */
+export declare class HelixHeadlessImage extends HelixElement {
+    /**
+     * Where the picture is.
+     */
+    src: string;
+    /**
+     * What it shows, for a reader who cannot see it.
+     *
+     * Empty is a real answer and means decoration. Omitting the attribute is not
+     * the same thing: a reader with nothing to read announces the file name.
+     */
+    alt: string;
+    /**
+     * Whether to wait until it is nearly on screen.
+     *
+     * `lazy` by default, which is the opposite of the platform's, because a
+     * picture worth putting in a component is usually below the fold and the one
+     * that is not is the exception worth writing down.
+     */
+    loading?: 'eager' | 'lazy';
+    /**
+     * The candidate widths, passed through to the picture.
+     */
+    srcset: string;
+    /**
+     * How much of the line it will take, passed through to the picture.
+     */
+    sizes: string;
+    /**
+     * How urgently to fetch it, for the one picture that is the page.
+     *
+     * The hero of a page is usually its largest contentful paint, and the fix is
+     * two attributes rather than one: `loading="eager"` stops it waiting for the
+     * viewport, and this stops it queueing behind everything else the parser
+     * found first. Left alone the browser decides, which is right for the other
+     * ninety-nine pictures.
+     */
+    fetchPriority: 'auto' | 'high' | 'low';
+    /**
+     * Whether the browser may decode off the main thread.
+     *
+     * **The template hardcoded `async` and a consumer could not reach it**, which
+     * is worse than the property being absent: the decision was taken on their
+     * behalf and nothing said so. `async` is still the resting value and still
+     * right for a picture in a page, and `sync` is what a consumer reaches for
+     * when the picture is about to be composited with something else and a tear
+     * would show.
+     */
+    decoding: 'async' | 'auto' | 'sync';
+    /**
+     * How the picture is fetched across origins, which decides whether a canvas
+     * can read it.
+     */
+    crossOrigin: 'anonymous' | 'use-credentials' | null;
+    /**
+     * How much of the referring URL to send with the request.
+     */
+    referrerPolicy: string;
+    /**
+     * Whether the picture is on its way, here, or never coming.
+     *
+     * Read-only to a consumer: it is a report rather than a setting.
+     *
+     * **Mirrored to `data-status`, and not reflected as `status`.** It is element
+     * state, so reflecting it puts the element's own bookkeeping into the markup
+     * a consumer rendered: React reads the attribute appearing at upgrade as a
+     * hydration mismatch, and a serialized `<helix-image status="loaded">` pasted
+     * back declares that a picture has arrived which this element has never
+     * fetched. The `data-` name is the library's answer to both, being a
+     * different name a re-parse cannot mistake for a declaration, and it is what
+     * `data-closed` on `Toast.Item` already does, and `AppHeader` did until its
+     * own moved to `:state(scrolled)` for the hydration reason recorded there.
+     * A picture arrives after somebody fetched it, which puts this on the safe
+     * side of hydration: a fact that can be true on the *first* update mirrors to
+     * a custom state instead, which is what `:state(open)` and `:state(checked)`
+     * became on 27 Aug 2026 for exactly that reason.
+     *
+     * `loading` writes nothing, because it is where every image starts and the
+     * resting state of a mirror is the attribute's absence.
+     */
+    status: 'error' | 'loaded' | 'loading';
+    /**
+     * Which `src` the current status belongs to, so a new one starts over.
+     */
+    private answered;
+    /**
+     * Says so under the platform's own name, because the platform's cannot escape.
+     *
+     * `load` and `error` on an `<img>` neither bubble nor compose, so the ones
+     * fired inside this shadow root reach nobody outside it. A consumer had a
+     * reflected attribute and a `MutationObserver` and nothing else. Re-emitting
+     * from the host is what `relayNativeEvent` is for, and it is what `Avatar`
+     * already did for the same pair on the same element.
+     *
+     * **These were `helix-load` and `helix-error`, and the rename is the fix.**
+     * The argument for a prefix is a collision with a native name, and there was
+     * none to collide with here: the native events cannot reach a consumer at
+     * all. So the prefix bought nothing and cost the two spellings this library
+     * had for one idea, `Avatar` relaying `load` while `Image` invented one. See
+     * 294 and 295.
+     *
+     * **Not bubbling, and that is not a small point.** The retired events were
+     * `bubbles: true, composed: true` deliberately, so a gallery could count its
+     * pictures with one listener. A bubbling relay of `load` reaches nothing in
+     * React: `load` is in react-dom's `nonDelegatedEvents`, so there is no root
+     * listener to catch it, and React attaches a direct one for `<img>` and never
+     * for a custom element. `bindReactHandler` binds exactly the non-bubbling
+     * ones, so matching the native propagation is what makes `onLoad` work at
+     * all. A gallery does here what it already does for `<img>`, which is listen
+     * in the capture phase or listen per picture.
+     */
+    private announce;
+    private readonly handleLoad;
+    private readonly handleError;
+    /**
+     * Catches the picture that was already there.
+     *
+     * A cached image can finish loading before this element has a listener on it,
+     * and then `load` never fires and the placeholder stays up over a picture that
+     * is sitting right behind it. `complete` is the platform's own answer to that
+     * question, and `naturalWidth` separates a decoded picture from one that
+     * carries no pixels, which `complete` reports as finished either way.
+     *
+     * **It can only ever conclude success.** A picture that has not been attempted
+     * looks exactly like one that failed: `complete` is true and `naturalWidth` is
+     * zero for both, and a DOM that never fetches anything reports that for every
+     * image it has. Deciding `error` here called every picture broken the moment
+     * it rendered. Failure has an event of its own and that event is reliable, so
+     * this is only here to catch the success that happened too early to hear.
+     */
+    private settle;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * The picture's own state, under the platform's own names.
+     *
+     * The `<img>` is inside this shadow root, so a consumer asking how big the
+     * picture turned out to be, or whether it is already there, had nowhere to
+     * ask: `querySelector` does not cross a shadow boundary. `status` answers a
+     * narrower question and answers it in this library's words, which is the
+     * right report for the three states this element draws and is not a
+     * substitute for the numbers.
+     *
+     * `naturalWidth` and `naturalHeight` are the case worth having: they are how
+     * a consumer sizes a lightbox or works out an aspect ratio, and they exist
+     * nowhere else on the page.
+     */
+    private get image();
+    /** Whether the picture has finished arriving, however it went. */
+    get complete(): boolean;
+    /** Which candidate the browser actually chose out of `srcset`. */
+    get currentSrc(): string;
+    /** The picture's own height in pixels, and zero until it has arrived. */
+    get naturalHeight(): number;
+    /** The picture's own width in pixels, and zero until it has arrived. */
+    get naturalWidth(): number;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-image': HelixHeadlessImage;
+    }
+}

package/dist/image/root/image-root.js

@@ -0,0 +1,335 @@
+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 } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+/**
+ * @summary A picture that says whether it arrived.
+ *
+ * @description
+ * **An element rather than a recipe, because of the part CSS cannot do.**
+ * Reserving the box is `aspect-ratio` and needs nothing from anybody; `Link` and
+ * the megamenu row are recipes in `preview.css` for exactly that reason. What
+ * cannot be written as a rule is *when the picture arrived*: a stylesheet has no
+ * way to know, and no way to hear that it never will. So this owns three states
+ * and the two events that move between them, and leaves the box to the
+ * stylesheet.
+ *
+ * **The placeholder is a slot with nothing in it by default.** A default of
+ * `Skeleton` would be right and is not written here: this tier renders no other
+ * component, and reaching for one would make the headless package depend on the
+ * styled one. The styled tier draws the resting placeholder instead, and a
+ * consumer who wants a `Skeleton`, a blurred thumbnail or a solid color slots
+ * it.
+ *
+ * **No source is a loading state, not a fourth one.** A picture whose `src` has
+ * not arrived yet is the common case for anything drawn from data, and the
+ * useful answer there is the same as for one still on the wire: stand something
+ * in its place and keep the ground reserved. So an element with no `src` shows
+ * its placeholder and waits, rather than resolving to an empty box that has to
+ * be laid out twice.
+ *
+ * **`alt` is a property and not an afterthought.** An empty string is a real
+ * answer, meaning the picture is decoration and a screen reader should skip it,
+ * which is why the attribute is always written even when it is empty: omitting
+ * it entirely makes a reader announce the file name instead.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category media
+ * @aliases Picture, Img, Figure
+ * @documentation https://helix.fusion.dev/components/image
+ *
+ * @slot fallback - Shown instead of it, if it never does.
+ * @slot placeholder - Shown until the picture arrives.
+ *
+ * @event {Event} error - Relayed for the same reason.
+ * @event {Event} load - Relayed, because the platform's own does not escape.
+ *
+ * @csspart fallback - What stands in when it fails.
+ * @csspart image - The picture itself.
+ * @csspart placeholder - What stands in until it arrives.
+ */
+let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Where the picture is.
+         */
+        this.src = '';
+        /**
+         * What it shows, for a reader who cannot see it.
+         *
+         * Empty is a real answer and means decoration. Omitting the attribute is not
+         * the same thing: a reader with nothing to read announces the file name.
+         */
+        this.alt = '';
+        /**
+         * The candidate widths, passed through to the picture.
+         */
+        this.srcset = '';
+        /**
+         * How much of the line it will take, passed through to the picture.
+         */
+        this.sizes = '';
+        /**
+         * How urgently to fetch it, for the one picture that is the page.
+         *
+         * The hero of a page is usually its largest contentful paint, and the fix is
+         * two attributes rather than one: `loading="eager"` stops it waiting for the
+         * viewport, and this stops it queueing behind everything else the parser
+         * found first. Left alone the browser decides, which is right for the other
+         * ninety-nine pictures.
+         */
+        this.fetchPriority = 'auto';
+        /**
+         * Whether the browser may decode off the main thread.
+         *
+         * **The template hardcoded `async` and a consumer could not reach it**, which
+         * is worse than the property being absent: the decision was taken on their
+         * behalf and nothing said so. `async` is still the resting value and still
+         * right for a picture in a page, and `sync` is what a consumer reaches for
+         * when the picture is about to be composited with something else and a tear
+         * would show.
+         */
+        this.decoding = 'async';
+        /**
+         * How the picture is fetched across origins, which decides whether a canvas
+         * can read it.
+         */
+        this.crossOrigin = null;
+        /**
+         * How much of the referring URL to send with the request.
+         */
+        this.referrerPolicy = '';
+        /**
+         * Whether the picture is on its way, here, or never coming.
+         *
+         * Read-only to a consumer: it is a report rather than a setting.
+         *
+         * **Mirrored to `data-status`, and not reflected as `status`.** It is element
+         * state, so reflecting it puts the element's own bookkeeping into the markup
+         * a consumer rendered: React reads the attribute appearing at upgrade as a
+         * hydration mismatch, and a serialized `<helix-image status="loaded">` pasted
+         * back declares that a picture has arrived which this element has never
+         * fetched. The `data-` name is the library's answer to both, being a
+         * different name a re-parse cannot mistake for a declaration, and it is what
+         * `data-closed` on `Toast.Item` already does, and `AppHeader` did until its
+         * own moved to `:state(scrolled)` for the hydration reason recorded there.
+         * A picture arrives after somebody fetched it, which puts this on the safe
+         * side of hydration: a fact that can be true on the *first* update mirrors to
+         * a custom state instead, which is what `:state(open)` and `:state(checked)`
+         * became on 27 Aug 2026 for exactly that reason.
+         *
+         * `loading` writes nothing, because it is where every image starts and the
+         * resting state of a mirror is the attribute's absence.
+         */
+        this.status = 'loading';
+        /**
+         * Which `src` the current status belongs to, so a new one starts over.
+         */
+        this.answered = '';
+        this.handleLoad = (event) => {
+            this.announce('loaded', event);
+        };
+        this.handleError = (event) => {
+            this.announce('error', event);
+        };
+    }
+    /**
+     * Says so under the platform's own name, because the platform's cannot escape.
+     *
+     * `load` and `error` on an `<img>` neither bubble nor compose, so the ones
+     * fired inside this shadow root reach nobody outside it. A consumer had a
+     * reflected attribute and a `MutationObserver` and nothing else. Re-emitting
+     * from the host is what `relayNativeEvent` is for, and it is what `Avatar`
+     * already did for the same pair on the same element.
+     *
+     * **These were `helix-load` and `helix-error`, and the rename is the fix.**
+     * The argument for a prefix is a collision with a native name, and there was
+     * none to collide with here: the native events cannot reach a consumer at
+     * all. So the prefix bought nothing and cost the two spellings this library
+     * had for one idea, `Avatar` relaying `load` while `Image` invented one. See
+     * 294 and 295.
+     *
+     * **Not bubbling, and that is not a small point.** The retired events were
+     * `bubbles: true, composed: true` deliberately, so a gallery could count its
+     * pictures with one listener. A bubbling relay of `load` reaches nothing in
+     * React: `load` is in react-dom's `nonDelegatedEvents`, so there is no root
+     * listener to catch it, and React attaches a direct one for `<img>` and never
+     * for a custom element. `bindReactHandler` binds exactly the non-bubbling
+     * ones, so matching the native propagation is what makes `onLoad` work at
+     * all. A gallery does here what it already does for `<img>`, which is listen
+     * in the capture phase or listen per picture.
+     */
+    announce(status, event) {
+        this.status = status;
+        const name = status === 'loaded' ? 'load' : 'error';
+        if (event) {
+            this.relayNativeEvent(event);
+            return;
+        }
+        /* No original to relay: `settle` catches a picture that was already
+           complete when the listener attached, which is the cached case, and the
+           platform fired its `load` before anyone was listening. The synthesized
+           one carries the native propagation rather than defaults, so a consumer
+           cannot tell the two paths apart. */
+        this.dispatchEvent(new Event(name, { bubbles: false, cancelable: false, composed: false }));
+    }
+    /**
+     * Catches the picture that was already there.
+     *
+     * A cached image can finish loading before this element has a listener on it,
+     * and then `load` never fires and the placeholder stays up over a picture that
+     * is sitting right behind it. `complete` is the platform's own answer to that
+     * question, and `naturalWidth` separates a decoded picture from one that
+     * carries no pixels, which `complete` reports as finished either way.
+     *
+     * **It can only ever conclude success.** A picture that has not been attempted
+     * looks exactly like one that failed: `complete` is true and `naturalWidth` is
+     * zero for both, and a DOM that never fetches anything reports that for every
+     * image it has. Deciding `error` here called every picture broken the moment
+     * it rendered. Failure has an event of its own and that event is reliable, so
+     * this is only here to catch the success that happened too early to hear.
+     */
+    settle() {
+        const image = this.renderRoot?.querySelector('img');
+        if (this.src === '' || !image?.complete || image.naturalWidth === 0) {
+            return;
+        }
+        this.announce('loaded');
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        /* A new picture is a new question, so the old answer goes. Without this a
+           second `src` inherits the first one's `loaded` and never shows its own
+           placeholder. */
+        if (changed.has('src') && this.answered !== this.src) {
+            this.answered = this.src;
+            this.status = 'loading';
+        }
+    }
+    updated(changed) {
+        super.updated?.(changed);
+        if (changed.has('src')) {
+            this.settle();
+        }
+        /* The mirror, written here rather than reflected. `loading` is the resting
+           state and writes nothing, so a picture on its way carries no attribute
+           and one that has arrived or failed says which. */
+        if (changed.has('status')) {
+            if (this.status === 'loading') {
+                this.removeAttribute('data-status');
+            }
+            else {
+                this.setAttribute('data-status', this.status);
+            }
+        }
+    }
+    firstUpdated(changed) {
+        super.firstUpdated?.(changed);
+        this.settle();
+    }
+    /**
+     * The picture's own state, under the platform's own names.
+     *
+     * The `<img>` is inside this shadow root, so a consumer asking how big the
+     * picture turned out to be, or whether it is already there, had nowhere to
+     * ask: `querySelector` does not cross a shadow boundary. `status` answers a
+     * narrower question and answers it in this library's words, which is the
+     * right report for the three states this element draws and is not a
+     * substitute for the numbers.
+     *
+     * `naturalWidth` and `naturalHeight` are the case worth having: they are how
+     * a consumer sizes a lightbox or works out an aspect ratio, and they exist
+     * nowhere else on the page.
+     */
+    get image() {
+        return this.renderRoot?.querySelector('img') ?? null;
+    }
+    /** Whether the picture has finished arriving, however it went. */
+    get complete() {
+        return this.image?.complete ?? false;
+    }
+    /** Which candidate the browser actually chose out of `srcset`. */
+    get currentSrc() {
+        return this.image?.currentSrc ?? '';
+    }
+    /** The picture's own height in pixels, and zero until it has arrived. */
+    get naturalHeight() {
+        return this.image?.naturalHeight ?? 0;
+    }
+    /** The picture's own width in pixels, and zero until it has arrived. */
+    get naturalWidth() {
+        return this.image?.naturalWidth ?? 0;
+    }
+    render() {
+        return html `<img
+        part="image"
+        alt=${this.alt}
+        loading=${this.loading ?? 'lazy'}
+        decoding=${this.decoding}
+        crossorigin=${this.crossOrigin ?? nothing}
+        referrerpolicy=${this.referrerPolicy || nothing}
+        fetchpriority=${this.fetchPriority}
+        src=${this.src || nothing}
+        srcset=${this.srcset || nothing}
+        sizes=${this.sizes || nothing}
+        @load=${this.handleLoad}
+        @error=${this.handleError}
+      />
+      <span
+        part="placeholder"
+        aria-hidden="true"
+        ?hidden=${this.status !== 'loading'}
+        ><slot name="placeholder"></slot
+      ></span>
+      <span
+        part="fallback"
+        aria-hidden="true"
+        ?hidden=${this.status !== 'error'}
+        ><slot name="fallback"></slot
+      ></span>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessImage.prototype, "src", void 0);
+__decorate([
+    property()
+], HelixHeadlessImage.prototype, "alt", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessImage.prototype, "loading", void 0);
+__decorate([
+    property()
+], HelixHeadlessImage.prototype, "srcset", void 0);
+__decorate([
+    property()
+], HelixHeadlessImage.prototype, "sizes", void 0);
+__decorate([
+    property({ attribute: 'fetchpriority' })
+], HelixHeadlessImage.prototype, "fetchPriority", void 0);
+__decorate([
+    property()
+], HelixHeadlessImage.prototype, "decoding", void 0);
+__decorate([
+    property({ attribute: 'crossorigin' })
+], HelixHeadlessImage.prototype, "crossOrigin", void 0);
+__decorate([
+    property({ attribute: 'referrerpolicy' })
+], HelixHeadlessImage.prototype, "referrerPolicy", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessImage.prototype, "status", void 0);
+__decorate([
+    state()
+], HelixHeadlessImage.prototype, "answered", void 0);
+HelixHeadlessImage = __decorate([
+    customElement('helix-headless-image')
+], HelixHeadlessImage);
+export { HelixHeadlessImage };