@fusion.dev/helix-headless 0.0.0-dev

package/dist/navigation/root/navigation-root.js

@@ -0,0 +1,130 @@
+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, IndicatorController } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+/**
+ * @summary A set of destinations, with a marker on the current one.
+ *
+ * @description
+ * Renders a real `<nav>`, which is the landmark a screen-reader user jumps to.
+ * It exists as its own component rather than as a region of `AppHeader` because
+ * a header is not inherently navigation, and navigation is not only ever in a
+ * header: a footer and a sidebar hold the same thing.
+ *
+ * **It renders no links.** The consumer brings them, marked with
+ * `aria-current="page"` and styled by the `data-navigation-item` recipe, for the same
+ * reason nothing else here renders an anchor: a router renders its own, and
+ * cannot render it inside this shadow root.
+ *
+ * What this owns is the marker that travels between them, and that is the whole
+ * reason it is a component. A marker that moves needs something that knows
+ * where every item is, and reading `aria-current` is how it knows which: the
+ * thing that makes the page announce correctly is the same thing that puts the
+ * marker in the right place.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category navigation
+ * @aliases Nav, NavList, Tabs
+ * @documentation https://helix.fusion.dev/components/navigation
+ *
+ * @slot - The destinations, as the consumer's own links.
+ *
+ * @csspart indicator - The marker that travels to the current destination.
+ * @csspart nav - The navigation landmark.
+ */
+let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement {
+    constructor() {
+        super(...arguments);
+        /* The mark, and the RTL sign and border correction that came with it. This
+           was hand-written and had neither: the distance was measured from the
+           physical left and applied from the inline-start edge, so it traveled the
+           wrong way in a right-to-left document. */
+        this.indicator = new IndicatorController(this, {
+            active: () => this.items.find((item) => item.getAttribute('aria-current') === 'page'),
+            indicator: () => this.renderRoot?.querySelector('[part="indicator"]'),
+            surface: () => this.renderRoot?.querySelector('[part="nav"]'),
+        });
+        /**
+         * Accessible name for the landmark.
+         */
+        this.label = 'Main';
+    }
+    /** The destinations the consumer slotted. */
+    get items() {
+        const slot = this.renderRoot.querySelector('slot');
+        return (slot?.assignedElements() ?? []);
+    }
+    /** Re-measures when the links change, move, or hand over the current page. */
+    watch() {
+        this.observer?.disconnect();
+        this.current?.disconnect();
+        /* Nothing is written onto the items any more.
+         *
+         * `data-navigation-item` used to be put here, because the base layer styled a
+         * destination with it and forgetting it was silent and total: the links
+         * kept working and came out as bare underlined anchors. Writing it fixed
+         * that and bought two problems. It happened after upgrade, so a
+         * server-rendered nav arrived unstyled and restyled itself a frame later;
+         * and a React consumer who wrote the attribute themselves got
+         * `data-navigation-item="true"` from JSX, which this then had to be careful not to
+         * overwrite or hydration reported a mismatch.
+         *
+         * The base layer selects `helix-navigation a` as well now, so the styling is
+         * true the moment the markup is parsed, on the server and on the client,
+         * and there is nothing to write or to be careful about. */
+        this.indicator.place();
+        this.observer = new ResizeObserver(() => this.indicator.place());
+        this.observer.observe(this);
+        for (const item of this.items) {
+            this.observer.observe(item);
+        }
+        // Client-side routing changes `aria-current` in place rather than
+        // reloading, so nothing else would tell the marker to move.
+        this.current = new MutationObserver(() => this.indicator.place());
+        for (const item of this.items) {
+            this.current.observe(item, { attributeFilter: ['aria-current'] });
+        }
+    }
+    /* Rebuilt on reconnection, because nothing else does it.
+     *
+     * `firstUpdated` runs once for the life of the element and
+     * `disconnectedCallback` runs every time it moves, so a framework reordering
+     * a list left this permanently dead: the observer gone, nothing to rebuild
+     * it, and the component still rendering as though it were watching. Guarded
+     * on `hasUpdated`, because the first connection happens before the first
+     * render and there is nothing to watch yet. `check:observers` holds it. */
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.hasUpdated) {
+            this.watch();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.observer?.disconnect();
+        this.current?.disconnect();
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.watch();
+    }
+    render() {
+        return html `<nav part="nav" aria-label=${this.label}>
+      <div part="indicator" aria-hidden="true"></div>
+      <slot @slotchange=${() => this.watch()}></slot>
+    </nav>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessNavigation.prototype, "label", void 0);
+HelixHeadlessNavigation = __decorate([
+    customElement('helix-headless-navigation')
+], HelixHeadlessNavigation);
+export { HelixHeadlessNavigation };

package/dist/notifications/index.d.ts

@@ -0,0 +1,2 @@
+export { HelixHeadlessNotification } from './notification/notification.js';
+export { HelixHeadlessNotifications } from './root/notifications-root.js';

package/dist/notifications/index.js

@@ -0,0 +1,2 @@
+export { HelixHeadlessNotification } from './notification/notification.js';
+export { HelixHeadlessNotifications } from './root/notifications-root.js';

package/dist/notifications/notification/notification.d.ts

@@ -0,0 +1,181 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+import '../../format-date/index.js';
+/**
+ * @summary One thing that happened, which a reader may not have seen yet.
+ *
+ * @description
+ * A notification is a toast that did not go away. `helix-toast` is deliberately
+ * the opposite of this: a live region whose items carry a `duration` and whose
+ * root never creates or destroys anything. What makes this its own family is the
+ * state each item carries rather than the arrangement it sits in: read and
+ * unread, a timestamp that has to stay correct, and an action a reader can take
+ * later.
+ *
+ * **The row is a label, a caption under it, and one trailing column that holds
+ * either the time or the controls.** A feed is scanned rather than read, so the
+ * thing that happened gets the first line on its own and everything qualifying
+ * it goes under. The time and the controls occupy the same place because a
+ * reader wants exactly one of them at a time: the time while they are scanning,
+ * and what they can do about it once they have stopped on a row.
+ *
+ * **The timestamp is `helix-format-date`**, which is where the reading, the
+ * `<time datetime>` and the shared timer now live. It was implemented here, and
+ * a component that formats a date is not a fact about notifications: Chat wanted
+ * the same thing and had its own copy of half of it.
+ *
+ * **Read state is reported, not invented.** Marking something read is usually a
+ * round trip, and a component that flips its own state and then hears the
+ * request failed has told the reader something untrue. `helix-read` is
+ * cancelable, and a `read` set by the consumer makes this element defer entirely.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category feedback
+ * @aliases Notification item, Inbox item
+ * @documentation https://helix.fusion.dev/components/notifications
+ *
+ * @slot - What happened, in the consumer's own markup.
+ * @slot actions - What a reader can do about it.
+ * @slot caption - A second line qualifying it, quieter than the first. A bare
+ * slot rather than a box, so an item without one pays nothing for it; style it
+ * through `::slotted()`.
+ * @slot media - An avatar or icon identifying who or what it came from.
+ *
+ * @event {HelixDismissEvent} helix-dismiss - Fired when a reader asks to remove it, and cancelable.
+ * @event {HelixReadEvent} helix-read - Fired when the item is marked read or unread, and cancelable.
+ *
+ * @csspart actions - The trailing slot's box.
+ * @csspart body - The label and the caption together.
+ * @csspart controls - The actions and the dismiss, which replace the time.
+ * @csspart dismiss - The control that removes it.
+ * @csspart dismiss-mark - The glyph on that control, where none is slotted.
+ * @csspart item - The whole notification.
+ * @csspart label - What happened, on the first line.
+ * @csspart media - The leading slot's box.
+ * @csspart time - When it happened, read the way a person reads one.
+ * @csspart trailing - The column holding the time and the controls.
+ */
+export declare class HelixHeadlessNotification extends HelixElement {
+    /**
+     * When it happened, as anything `Date` parses.
+     *
+     * An ISO string is what an API sends and what `<time datetime>` takes, so it
+     * is the shape that needs no translation at either end. Left unset the item
+     * shows no timestamp rather than showing the epoch, which is what parsing an
+     * empty string would give.
+     */
+    at: string;
+    /**
+     * Whether the reader has seen it.
+     *
+     * Set it and this element defers: a reader's click fires `helix-read` and
+     * changes nothing until a new value arrives. `default-read` seeds a state
+     * this element then owns.
+     *
+     * **Not reflected, and it was until 27 Aug 2026.** The reason given was that
+     * unread is a visual state and a stylesheet has no other way to know, which
+     * is the same reason the four mixins mirror theirs, and the mirror may not be
+     * the property's own attribute: `<helix-notification default-read>`
+     * came back from a server without `read` and gained it on the first update,
+     * which React reports as a hydration mismatch, and a copy of the serialized
+     * element re-parses that attribute as a declaration. `:state(read)` is what
+     * the stylesheet reads now. Found by `hydration.dom.spec.ts` on the day it
+     * learned to mount an element a consumer had configured rather than a bare
+     * one.
+     *
+     *
+     */
+    get read(): boolean;
+    set read(next: boolean);
+    /**
+     * State to open with, where nothing declared one.
+     */
+    defaultRead: boolean;
+    /**
+     * Whether a reader may remove it.
+     */
+    dismissible: boolean;
+    /**
+     * Locale for the timestamp.
+     *
+     * Empty is the runtime's own.
+     */
+    locale: string;
+    /**
+     * Accessible name for the dismiss control.
+     */
+    dismissLabel: string;
+    /**
+     * @internal Read by the list to identify its children across the light DOM,
+     * which is cheaper than `instanceof` and is why this is public rather than
+     * protected. Not a consumer's to read or set.
+     */
+    readonly isNotification = true;
+    private readState;
+    /**
+     * Asks to be marked read, and reports whether the request stood.
+     *
+     * Public because a consumer's own control is as likely to ask as this
+     * element's own markup is, and because a list marking everything read has to
+     * go through the same request rather than writing the property behind it.
+     */
+    markRead(next?: boolean): boolean;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /**
+     * Says whether there is anything for the time to make way for.
+     *
+     * The trailing column holds the time and the controls in one place and shows
+     * one of them, so a row with nothing to do about it would hide its timestamp
+     * on hover and put nothing there. `dismissible` this element knows on the
+     * server; whether a consumer filled the actions slot it can only find out from
+     * a DOM, so this runs after the render and the resting answer, no controls, is
+     * the one the server writes.
+     */
+    private markControls;
+    /**
+     * The control that removes the item, with the mark a consumer can replace.
+     *
+     * **A method rather than markup inside `render`, and the slot moves with
+     * it.** A fallback answers a consumer and a seam answers the tier above, which
+     * are different people: the styled tier wants an icon here, and with the slot
+     * written inline the only way to change it is to reimplement the whole
+     * template. `check:fallbacks` holds that, and moving only the fallback out was
+     * not enough, which is the right rule: the slot is the thing a tier redraws.
+     *
+     * **The mark is drawn rather than typed, which is what lets it align.** It was
+     * `&times;`, and a character is placed by its font rather than by its box:
+     * measured against the ghost button beside it at 8x, the cross carried 6
+     * pixels of ink to the label's 9.5 and sat 1.5 pixels below its center, in two
+     * boxes whose own centers agreed to a tenth of a pixel. No stylesheet can
+     * correct that, because the offset is inside the glyph. An `<svg>` is centered
+     * on its own viewBox, so it lands where the box says and takes the icon step
+     * the row is already set in. It is the `x` the Tag's dismiss draws, so two
+     * controls that mean "take this away" are one mark.
+     */
+    protected renderDismiss(): TemplateResult | typeof nothing;
+    /**
+     * When it happened, delegated whole.
+     *
+     * The tag is interpolated rather than written, so each tier renders its own:
+     * the base tier may not name a styled element, and a styled item inherits this
+     * template without having a tag of its own to remind anybody. `check:composed`
+     * holds both halves.
+     *
+     * `exportparts` and no `part` of its own, which is the rule about a part
+     * already named for its role: the child publishes `time`, the role here is
+     * `time`, and naming both would leave `::part(time)` matching two elements.
+     * What a consumer wants to reach is the `<time>`, so that is what the name
+     * reaches.
+     */
+    private renderTime;
+    protected render(): TemplateResult;
+    private readonly handleActions;
+    private readonly handleDismiss;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-notification': HelixHeadlessNotification;
+    }
+}

package/dist/notifications/notification/notification.js

@@ -0,0 +1,305 @@
+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, HelixDismissEvent, HelixElement, HelixReadEvent, hostAria, requestChange, slotFilled, } from '@fusion.dev/helix-core';
+import { x } from '@fusion.dev/helix-icons';
+import { nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+/* `lit/static-html.js`, because this template interpolates a tag name and the
+   plain `html` cannot: it renders the placeholder as the element instead, which
+   shifts every attribute after it by one. See `renderTime`. */
+import { html } from 'lit/static-html.js';
+/* Side-effect import, because this template interpolates the family's tag and a
+   custom element registers on import. Both tiers import it, each resolving to
+   its own; `check:composed` enforces that. */
+import '../../format-date/index.js';
+/**
+ * @summary One thing that happened, which a reader may not have seen yet.
+ *
+ * @description
+ * A notification is a toast that did not go away. `helix-toast` is deliberately
+ * the opposite of this: a live region whose items carry a `duration` and whose
+ * root never creates or destroys anything. What makes this its own family is the
+ * state each item carries rather than the arrangement it sits in: read and
+ * unread, a timestamp that has to stay correct, and an action a reader can take
+ * later.
+ *
+ * **The row is a label, a caption under it, and one trailing column that holds
+ * either the time or the controls.** A feed is scanned rather than read, so the
+ * thing that happened gets the first line on its own and everything qualifying
+ * it goes under. The time and the controls occupy the same place because a
+ * reader wants exactly one of them at a time: the time while they are scanning,
+ * and what they can do about it once they have stopped on a row.
+ *
+ * **The timestamp is `helix-format-date`**, which is where the reading, the
+ * `<time datetime>` and the shared timer now live. It was implemented here, and
+ * a component that formats a date is not a fact about notifications: Chat wanted
+ * the same thing and had its own copy of half of it.
+ *
+ * **Read state is reported, not invented.** Marking something read is usually a
+ * round trip, and a component that flips its own state and then hears the
+ * request failed has told the reader something untrue. `helix-read` is
+ * cancelable, and a `read` set by the consumer makes this element defer entirely.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category feedback
+ * @aliases Notification item, Inbox item
+ * @documentation https://helix.fusion.dev/components/notifications
+ *
+ * @slot - What happened, in the consumer's own markup.
+ * @slot actions - What a reader can do about it.
+ * @slot caption - A second line qualifying it, quieter than the first. A bare
+ * slot rather than a box, so an item without one pays nothing for it; style it
+ * through `::slotted()`.
+ * @slot media - An avatar or icon identifying who or what it came from.
+ *
+ * @event {HelixDismissEvent} helix-dismiss - Fired when a reader asks to remove it, and cancelable.
+ * @event {HelixReadEvent} helix-read - Fired when the item is marked read or unread, and cancelable.
+ *
+ * @csspart actions - The trailing slot's box.
+ * @csspart body - The label and the caption together.
+ * @csspart controls - The actions and the dismiss, which replace the time.
+ * @csspart dismiss - The control that removes it.
+ * @csspart dismiss-mark - The glyph on that control, where none is slotted.
+ * @csspart item - The whole notification.
+ * @csspart label - What happened, on the first line.
+ * @csspart media - The leading slot's box.
+ * @csspart time - When it happened, read the way a person reads one.
+ * @csspart trailing - The column holding the time and the controls.
+ */
+let HelixHeadlessNotification = class HelixHeadlessNotification extends HelixElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * When it happened, as anything `Date` parses.
+         *
+         * An ISO string is what an API sends and what `<time datetime>` takes, so it
+         * is the shape that needs no translation at either end. Left unset the item
+         * shows no timestamp rather than showing the epoch, which is what parsing an
+         * empty string would give.
+         */
+        this.at = '';
+        /**
+         * State to open with, where nothing declared one.
+         */
+        this.defaultRead = false;
+        /**
+         * Whether a reader may remove it.
+         */
+        this.dismissible = false;
+        /**
+         * Locale for the timestamp.
+         *
+         * Empty is the runtime's own.
+         */
+        this.locale = '';
+        /**
+         * Accessible name for the dismiss control.
+         */
+        this.dismissLabel = 'Dismiss';
+        /**
+         * @internal Read by the list to identify its children across the light DOM,
+         * which is cheaper than `instanceof` and is why this is public rather than
+         * protected. Not a consumer's to read or set.
+         */
+        this.isNotification = true;
+        this.readState = undefined;
+        /* Content arriving from the light DOM changes no property here, so nothing
+           would schedule the re-read. Bound to the slot rather than to the host,
+           because `slotchange` bubbles and is not composed: it reaches the shadow root
+           that owns the slot and stops there. */
+        this.handleActions = () => {
+            this.markControls();
+        };
+        this.handleDismiss = (event) => {
+            event.stopPropagation();
+            if (this.dispatchEvent(new HelixDismissEvent({ label: this.textContent?.trim() ?? '' }))) {
+                this.remove();
+            }
+        };
+    }
+    /**
+     * Whether the reader has seen it.
+     *
+     * Set it and this element defers: a reader's click fires `helix-read` and
+     * changes nothing until a new value arrives. `default-read` seeds a state
+     * this element then owns.
+     *
+     * **Not reflected, and it was until 27 Aug 2026.** The reason given was that
+     * unread is a visual state and a stylesheet has no other way to know, which
+     * is the same reason the four mixins mirror theirs, and the mirror may not be
+     * the property's own attribute: `<helix-notification default-read>`
+     * came back from a server without `read` and gained it on the first update,
+     * which React reports as a hydration mismatch, and a copy of the serialized
+     * element re-parses that attribute as a declaration. `:state(read)` is what
+     * the stylesheet reads now. Found by `hydration.dom.spec.ts` on the day it
+     * learned to mount an element a consumer had configured rather than a bare
+     * one.
+     *
+     *
+     */
+    get read() {
+        return this.readState ?? this.defaultRead;
+    }
+    set read(next) {
+        const previous = this.read;
+        this.readState = next;
+        this.requestUpdate('read', previous);
+    }
+    /**
+     * Asks to be marked read, and reports whether the request stood.
+     *
+     * Public because a consumer's own control is as likely to ask as this
+     * element's own markup is, and because a list marking everything read has to
+     * go through the same request rather than writing the property behind it.
+     */
+    markRead(next = true) {
+        if (next === this.read) {
+            return false;
+        }
+        return requestChange({
+            apply: (read) => {
+                const previous = this.read;
+                this.readState = read;
+                this.requestUpdate('read', previous);
+            },
+            event: (read) => new HelixReadEvent({ read }),
+            host: this,
+            next,
+        });
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        hostAria(this.internals, { role: 'listitem' });
+        /* The mirror the stylesheet selects on, kept off the host's attributes for
+           the reason on `read` itself. */
+        this.toggleState('read', this.read);
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.markControls();
+    }
+    /**
+     * Says whether there is anything for the time to make way for.
+     *
+     * The trailing column holds the time and the controls in one place and shows
+     * one of them, so a row with nothing to do about it would hide its timestamp
+     * on hover and put nothing there. `dismissible` this element knows on the
+     * server; whether a consumer filled the actions slot it can only find out from
+     * a DOM, so this runs after the render and the resting answer, no controls, is
+     * the one the server writes.
+     */
+    markControls() {
+        const slot = this.renderRoot?.querySelector('slot[name="actions"]');
+        this.toggleState('controls', this.dismissible || slotFilled(slot));
+    }
+    /**
+     * The control that removes the item, with the mark a consumer can replace.
+     *
+     * **A method rather than markup inside `render`, and the slot moves with
+     * it.** A fallback answers a consumer and a seam answers the tier above, which
+     * are different people: the styled tier wants an icon here, and with the slot
+     * written inline the only way to change it is to reimplement the whole
+     * template. `check:fallbacks` holds that, and moving only the fallback out was
+     * not enough, which is the right rule: the slot is the thing a tier redraws.
+     *
+     * **The mark is drawn rather than typed, which is what lets it align.** It was
+     * `&times;`, and a character is placed by its font rather than by its box:
+     * measured against the ghost button beside it at 8x, the cross carried 6
+     * pixels of ink to the label's 9.5 and sat 1.5 pixels below its center, in two
+     * boxes whose own centers agreed to a tenth of a pixel. No stylesheet can
+     * correct that, because the offset is inside the glyph. An `<svg>` is centered
+     * on its own viewBox, so it lands where the box says and takes the icon step
+     * the row is already set in. It is the `x` the Tag's dismiss draws, so two
+     * controls that mean "take this away" are one mark.
+     */
+    renderDismiss() {
+        if (!this.dismissible) {
+            return nothing;
+        }
+        return html `<button
+      part="dismiss"
+      type="button"
+      aria-label=${this.dismissLabel}
+      @click=${this.handleDismiss}
+    >
+      <slot name="dismiss">
+        <svg
+          aria-hidden="true"
+          data-glyph
+          fill="currentColor"
+          part="dismiss-mark"
+          viewBox=${x.viewBox}
+        >
+          ${unsafeSVG(x.content)}
+        </svg>
+      </slot>
+    </button>`;
+    }
+    /**
+     * When it happened, delegated whole.
+     *
+     * The tag is interpolated rather than written, so each tier renders its own:
+     * the base tier may not name a styled element, and a styled item inherits this
+     * template without having a tag of its own to remind anybody. `check:composed`
+     * holds both halves.
+     *
+     * `exportparts` and no `part` of its own, which is the rule about a part
+     * already named for its role: the child publishes `time`, the role here is
+     * `time`, and naming both would leave `::part(time)` matching two elements.
+     * What a consumer wants to reach is the `<time>`, so that is what the name
+     * reaches.
+     */
+    renderTime() {
+        const stamp = this.tag('format-date');
+        return html `<${stamp}
+      exportparts="time"
+      elapsed
+      date=${this.at}
+      locale=${this.locale}
+    ></${stamp}>`;
+    }
+    render() {
+        return html `<div part="item">
+      <span part="media"><slot name="media"></slot></span>
+      <div part="body">
+        <div part="label"><slot></slot></div>
+        <slot name="caption"></slot>
+      </div>
+      <div part="trailing">
+        ${this.renderTime()}
+        <div part="controls">
+          <span part="actions"><slot name="actions" @slotchange=${this.handleActions}></slot></span>
+          ${this.renderDismiss()}
+        </div>
+      </div>
+    </div>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessNotification.prototype, "at", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessNotification.prototype, "read", null);
+__decorate([
+    property({ attribute: 'default-read', type: Boolean })
+], HelixHeadlessNotification.prototype, "defaultRead", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessNotification.prototype, "dismissible", void 0);
+__decorate([
+    property()
+], HelixHeadlessNotification.prototype, "locale", void 0);
+__decorate([
+    property({ attribute: 'dismiss-label' })
+], HelixHeadlessNotification.prototype, "dismissLabel", void 0);
+HelixHeadlessNotification = __decorate([
+    customElement('helix-headless-notification')
+], HelixHeadlessNotification);
+export { HelixHeadlessNotification };