@fusion.dev/helix 0.0.0-dev

package/dist/mixins/mixin-control-surface/mixin-control-surface.d.ts

@@ -0,0 +1,28 @@
+import type { HelixElement } from '@fusion.dev/helix-core';
+type Constructor<T> = new (...args: any[]) => T;
+/**
+ * How much ink a control claims and what it means, for the three that are buttons.
+ *
+ * **The first mixin in `helix/styled`, and it belongs here rather than in core.**
+ * `helix/core` is consumed by the headless tier, which must never take styling,
+ * and these two properties are purely presentational: they carry no behavior,
+ * no ARIA and no form participation, only which rules a stylesheet applies.
+ * Declaring them in core would put a treatment on the tier whose whole purpose
+ * is not having one.
+ *
+ * **Why a mixin rather than inheritance.** `Button`, `IconButton` and
+ * `CopyButton` all want this pair, and the styled tier cannot get it by
+ * extending: each styled class extends its own base, which is what keeps a
+ * control's behavior and its presentation in one branch. `CopyButton` already
+ * composes `IconButton`'s stylesheet, `[HelixIconButton.styles, styles]`, which
+ * is the same move for CSS; this is that move for API. Redeclared instead, the
+ * three drift the first time one gains a value.
+ */
+export declare class MixinControlSurfaceInterface {
+    /** How filled it is drawn. Absent is the control's own resting treatment. */
+    emphasis?: 'ghost' | 'outlined' | 'solid' | 'subtle';
+    /** What it means. Absent is `neutral`, which is the resting case. */
+    tone?: 'accent' | 'danger' | 'neutral' | 'primary';
+}
+export declare const MixinControlSurface: <T extends Constructor<HelixElement>>(Base: T) => Constructor<MixinControlSurfaceInterface> & T;
+export {};

package/dist/mixins/mixin-control-surface/mixin-control-surface.js

@@ -0,0 +1,21 @@
+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 { property } from 'lit/decorators.js';
+export const MixinControlSurface = (Base) => {
+    // Duplicated from the interface deliberately: the interface is what a
+    // TypeScript consumer sees, and this class is what the manifest analyzer
+    // reads when resolving inherited members into dependent packages.
+    class ControlSurfaceElement extends Base {
+    }
+    __decorate([
+        property({ reflect: true })
+    ], ControlSurfaceElement.prototype, "emphasis", void 0);
+    __decorate([
+        property({ reflect: true })
+    ], ControlSurfaceElement.prototype, "tone", void 0);
+    return ControlSurfaceElement;
+};

package/dist/navigation/index.d.ts

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

package/dist/navigation/index.js

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

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,50 @@
+// Generated from src/navigation/root/navigation-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+}
+
+[part="nav"] {
+align-items: center;
+block-size: var(--helix-size-control-tight);
+display: flex;
+gap: var(--navigation-gap, var(--helix-space-2xs));
+
+min-inline-size: 0;
+overflow-x: auto;
+
+position: relative;
+}
+
+[part="indicator"] {
+background-color: var(--navigation-indicator-color, var(--helix-color-surface-sunken));
+block-size: var(--indicator-block-size, 0);
+border-radius: var(--helix-radii-sm);
+inline-size: var(--indicator-inline-size, 0);
+inset-block-start: 50%;
+inset-inline-start: 0;
+opacity: 0;
+position: absolute;
+translate: var(--indicator-x, 0) -50%;
+transition:
+translate var(--helix-duration-normal) var(--helix-easing-emphasized),
+inline-size var(--helix-duration-normal) var(--helix-easing-emphasized),
+opacity var(--helix-duration-fast) var(--helix-easing-standard);
+z-index: var(--helix-layer-base);
+}
+
+[part="indicator"][data-placed] {
+opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="indicator"] {
+transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
+}
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);

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

@@ -0,0 +1,28 @@
+import { HelixHeadlessNavigation } from '@fusion.dev/helix-headless/navigation';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A set of destinations, with a marker on the current one.
+ *
+ * @description
+ * One marker that travels, rather than a background that appears on whichever
+ * destination is current. A fill that swaps is two things changing at once and
+ * reads as a flicker; one that moves is a single object the eye follows, and it
+ * says where the current page was as well as where it is.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category navigation
+ * @aliases Nav, NavList, Tabs
+ * @documentation https://helix.fusion.dev/components/navigation
+ *
+ * @cssproperty --navigation-gap - Space between destinations.
+ * @cssproperty --navigation-indicator-color - Fill of the traveling marker.
+ */
+export declare class HelixNavigation extends HelixHeadlessNavigation {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-navigation': HelixNavigation;
+    }
+}

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

@@ -0,0 +1,34 @@
+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 { HelixHeadlessNavigation } from '@fusion.dev/helix-headless/navigation';
+import { styles } from './navigation-root.css.js';
+/**
+ * @summary A set of destinations, with a marker on the current one.
+ *
+ * @description
+ * One marker that travels, rather than a background that appears on whichever
+ * destination is current. A fill that swaps is two things changing at once and
+ * reads as a flicker; one that moves is a single object the eye follows, and it
+ * says where the current page was as well as where it is.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category navigation
+ * @aliases Nav, NavList, Tabs
+ * @documentation https://helix.fusion.dev/components/navigation
+ *
+ * @cssproperty --navigation-gap - Space between destinations.
+ * @cssproperty --navigation-indicator-color - Fill of the traveling marker.
+ */
+let HelixNavigation = class HelixNavigation extends HelixHeadlessNavigation {
+    static { this.styles = styles; }
+};
+HelixNavigation = __decorate([
+    customElement('helix-navigation')
+], HelixNavigation);
+export { HelixNavigation };

package/dist/notifications/index.d.ts

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

package/dist/notifications/index.js

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

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/notifications/notification/notification.css.js

@@ -0,0 +1,194 @@
+// Generated from src/notifications/notification/notification.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+
+--_notifications-line: calc(var(--helix-text-sm) * var(--helix-leading-normal));
+
+container-type: inline-size;
+
+display: block;
+}
+
+[part="item"] {
+align-items: start;
+border-block-end: var(--helix-border-thin) solid
+var(--notifications-rule, var(--helix-color-border));
+display: grid;
+grid-template-columns: minmax(var(--notifications-media-column, 0px), auto) minmax(0, 1fr) auto;
+padding-block: var(--notifications-padding-block, var(--helix-space-sm));
+padding-inline: var(--notifications-padding-inline, var(--helix-space-md));
+
+position: relative;
+}
+
+:host(:not(:state(read))) [part="item"]::before {
+background-color: var(--notifications-unread-mark, var(--helix-color-accent));
+block-size: var(--notifications-unread-block-size, var(--_notifications-line));
+border-radius: var(--notifications-unread-radius, var(--helix-radii-full));
+content: "";
+inline-size: var(--notifications-unread-inline-size, var(--helix-border-thick));
+inset-block-start: var(
+--notifications-unread-offset,
+var(--notifications-padding-block, var(--helix-space-sm))
+);
+inset-inline-start: var(--notifications-unread-inset, var(--helix-space-2xs));
+position: absolute;
+}
+
+[part="media"] {
+display: grid;
+place-items: center start;
+}
+
+[part="body"] {
+display: grid;
+gap: var(--helix-space-2xs);
+}
+
+[part="label"] {
+color: var(--notifications-color, var(--helix-color-foreground-muted));
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+line-height: var(--_notifications-line);
+}
+
+slot[name="caption"]::slotted(*) {
+color: var(--helix-color-foreground-subtle);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+line-height: var(--helix-leading-normal);
+margin: var(--helix-space-none);
+}
+
+:host(:not(:state(read))) [part="label"] {
+color: var(--helix-color-foreground);
+font-weight: var(--helix-weight-medium);
+}
+
+[part="trailing"] {
+align-items: center;
+align-self: center;
+display: grid;
+grid-template-areas: "swap";
+justify-items: end;
+margin-inline-start: var(--helix-space-sm);
+}
+
+[part="trailing"] > * {
+grid-area: swap;
+transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host {
+--_notifications-swap: 0;
+}
+
+[part="trailing"] > :not([part="controls"]) {
+color: var(--helix-color-foreground-subtle);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+opacity: calc(1 - var(--_notifications-swap));
+}
+
+[part="controls"] {
+align-items: center;
+display: flex;
+opacity: var(--_notifications-swap);
+}
+
+:host(:hover:state(controls)),
+:host(:focus-within:state(controls)) {
+--_notifications-swap: 1;
+}
+
+[part="controls"] {
+pointer-events: none;
+}
+
+:host(:hover:state(controls)) [part="controls"],
+:host(:focus-within:state(controls)) [part="controls"] {
+pointer-events: auto;
+}
+
+@media (hover: none) and (pointer: coarse) {
+[part="trailing"] {
+column-gap: var(--helix-space-sm);
+grid-auto-flow: column;
+grid-template-areas: none;
+}
+
+[part="trailing"] > * {
+grid-area: auto;
+opacity: 1;
+}
+
+[part="controls"] {
+pointer-events: auto;
+}
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="trailing"] > * {
+transition: none;
+}
+}
+
+[part="actions"] {
+align-items: center;
+display: flex;
+gap: var(--helix-space-2xs);
+}
+
+[part="dismiss"] {
+background: none;
+border: 0;
+border-radius: var(--helix-radii-sm);
+block-size: var(--helix-size-control);
+color: var(--helix-color-foreground-muted);
+cursor: pointer;
+display: grid;
+inline-size: var(--helix-size-control);
+margin-inline-start: var(--helix-space-2xs);
+padding: var(--helix-space-none);
+place-items: center;
+}
+
+[part="dismiss"] ::slotted(*) {
+block-size: var(--icon-size, var(--helix-size-icon));
+inline-size: var(--icon-size, var(--helix-size-icon));
+}
+
+[part="dismiss"]:hover {
+background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
+color: var(--helix-color-foreground);
+}
+
+[part="dismiss"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+@media print {
+[part="dismiss"] {
+display: none;
+}
+
+:host(:not(:state(read))) [part="item"]::before {
+display: none;
+}
+}
+
+@container (inline-size < 26rem) {
+[part="item"] {
+grid-template-columns: minmax(var(--notifications-media-column, 0px), auto) minmax(0, 1fr);
+}
+
+[part="trailing"] {
+align-self: start;
+grid-column: 2;
+grid-row: 2;
+justify-items: start;
+margin-block-start: var(--helix-space-2xs);
+margin-inline-start: var(--helix-space-none);
+}
+}`);

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

@@ -0,0 +1,64 @@
+import { HelixHeadlessNotification } from '@fusion.dev/helix-headless/notifications';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary One thing that happened, which a reader may not have seen yet.
+ *
+ * @description
+ * A four-column grid: media, body, actions, dismiss.
+ *
+ * **The media column is held open by the feed, not by the item.** Each item is
+ * its own grid, so nothing about one row's tracks reaches the row below it: a
+ * feed where some items had an avatar and some did not drew its text at two
+ * different left edges, which is the fault a grid was chosen to prevent. The
+ * root publishes whether anything in it has media and every item reserves that
+ * much, so a mixed feed reads down one edge and a feed with no media anywhere
+ * pays nothing for the column.
+ *
+ * **Unread is weight and a mark on the inline start edge, not a fill.** Depth
+ * comes from a single border in this library, and a filled row is elevation
+ * spelled differently; a feed of filled rows is a striped list nobody can read.
+ * The mark is a fixed height on the first line rather than the height of the
+ * row, so it says the same thing about a one line notification and a five line
+ * one.
+ *
+ * **Narrow, the actions go under the body.** How much room the row was given is
+ * a fact about this box and about nothing else, so it is a container query: a
+ * feed in a 320 pixel side panel is narrow inside a 1400 pixel window, and a
+ * viewport rule would hand it the wide branch.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category feedback
+ * @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 media - An avatar or icon identifying who or what it came from.
+ *
+ * @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 time - When it happened.
+ * @csspart trailing - The column holding the time and the controls.
+ *
+ * @cssproperty --notifications-color - Ink in an item that has been read.
+ * @cssproperty --notifications-padding-block - Space above and below an item.
+ * @cssproperty --notifications-padding-inline - Space either side of an item.
+ * @cssproperty --notifications-rule - The hairline between items.
+ * @cssproperty --notifications-unread-block-size - How long that mark is.
+ * @cssproperty --notifications-unread-inline-size - How thick that mark is.
+ * @cssproperty --notifications-unread-inset - How far it sits from the row's leading edge.
+ * @cssproperty --notifications-unread-mark - Color of the edge mark on an unread item.
+ * @cssproperty --notifications-unread-offset - How far it sits from the row's top.
+ * @cssproperty --notifications-unread-radius - Its corner radius, which is what turns it into a dot.
+ */
+export declare class HelixNotification extends HelixHeadlessNotification {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-notification': HelixNotification;
+    }
+}

package/dist/notifications/notification/notification.js

@@ -0,0 +1,71 @@
+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 { HelixHeadlessNotification } from '@fusion.dev/helix-headless/notifications';
+import { styles as glyphStyles } from '../../icon/glyph.css.js';
+import { styles } from './notification.css.js';
+/**
+ * @summary One thing that happened, which a reader may not have seen yet.
+ *
+ * @description
+ * A four-column grid: media, body, actions, dismiss.
+ *
+ * **The media column is held open by the feed, not by the item.** Each item is
+ * its own grid, so nothing about one row's tracks reaches the row below it: a
+ * feed where some items had an avatar and some did not drew its text at two
+ * different left edges, which is the fault a grid was chosen to prevent. The
+ * root publishes whether anything in it has media and every item reserves that
+ * much, so a mixed feed reads down one edge and a feed with no media anywhere
+ * pays nothing for the column.
+ *
+ * **Unread is weight and a mark on the inline start edge, not a fill.** Depth
+ * comes from a single border in this library, and a filled row is elevation
+ * spelled differently; a feed of filled rows is a striped list nobody can read.
+ * The mark is a fixed height on the first line rather than the height of the
+ * row, so it says the same thing about a one line notification and a five line
+ * one.
+ *
+ * **Narrow, the actions go under the body.** How much room the row was given is
+ * a fact about this box and about nothing else, so it is a container query: a
+ * feed in a 320 pixel side panel is narrow inside a 1400 pixel window, and a
+ * viewport rule would hand it the wide branch.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category feedback
+ * @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 media - An avatar or icon identifying who or what it came from.
+ *
+ * @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 time - When it happened.
+ * @csspart trailing - The column holding the time and the controls.
+ *
+ * @cssproperty --notifications-color - Ink in an item that has been read.
+ * @cssproperty --notifications-padding-block - Space above and below an item.
+ * @cssproperty --notifications-padding-inline - Space either side of an item.
+ * @cssproperty --notifications-rule - The hairline between items.
+ * @cssproperty --notifications-unread-block-size - How long that mark is.
+ * @cssproperty --notifications-unread-inline-size - How thick that mark is.
+ * @cssproperty --notifications-unread-inset - How far it sits from the row's leading edge.
+ * @cssproperty --notifications-unread-mark - Color of the edge mark on an unread item.
+ * @cssproperty --notifications-unread-offset - How far it sits from the row's top.
+ * @cssproperty --notifications-unread-radius - Its corner radius, which is what turns it into a dot.
+ */
+let HelixNotification = class HelixNotification extends HelixHeadlessNotification {
+    static { this.tier = 'helix-'; }
+    static { this.styles = [glyphStyles, styles]; }
+};
+HelixNotification = __decorate([
+    customElement('helix-notification')
+], HelixNotification);
+export { HelixNotification };

package/dist/notifications/root/notifications-root.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/notifications/root/notifications-root.css.js

@@ -0,0 +1,94 @@
+// Generated from src/notifications/root/notifications-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+
+--helix-size-checkbox: var(--helix-size-checkbox-sm);
+--helix-size-control: var(--helix-size-control-sm);
+--helix-size-icon: var(--helix-size-icon-sm);
+--helix-size-tag: var(--helix-size-tag-sm);
+
+display: grid;
+grid-template-rows: auto minmax(0, 1fr) auto;
+max-block-size: var(--notifications-max-block-size, none);
+}
+
+:host(:state(media)) {
+--notifications-media-column: calc(var(--helix-size-avatar) + var(--helix-space-sm));
+}
+
+[part="header"] {
+align-items: center;
+border-block-end: var(--helix-border-thin) solid
+var(--notifications-rule, var(--helix-color-border));
+display: flex;
+gap: var(--helix-space-sm);
+justify-content: space-between;
+padding-block: var(--helix-space-sm);
+padding-inline: var(--notifications-padding-inline, var(--helix-space-md));
+}
+
+[part="header"][data-empty],
+[part="footer"][data-empty] {
+display: none;
+}
+
+[part="list"] {
+overflow-y: auto;
+}
+
+[part="footer"] {
+border-block-start: var(--helix-border-thin) solid
+var(--notifications-rule, var(--helix-color-border));
+padding-block: var(--helix-space-sm);
+padding-inline: var(--notifications-padding-inline, var(--helix-space-md));
+}
+
+::slotted(helix-notification:last-of-type) {
+--notifications-rule: transparent;
+}
+
+[part="mark-all"] {
+background: none;
+border: 0;
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-accent);
+cursor: pointer;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+padding-block: var(--helix-space-2xs);
+padding-inline: var(--helix-space-2xs);
+}
+
+[part="mark-all"]:hover {
+text-decoration: underline;
+}
+
+[part="mark-all"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="empty"],
+[part="loading"] {
+color: var(--helix-color-foreground-subtle);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+margin: var(--helix-space-none);
+padding-block: var(--helix-space-lg);
+padding-inline: var(--helix-space-md);
+text-align: center;
+}
+
+@media print {
+:host {
+max-block-size: none;
+}
+
+[part="list"] {
+overflow-y: visible;
+}
+
+[part="mark-all"] {
+display: none;
+}
+}`);

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

@@ -0,0 +1,43 @@
+import { HelixHeadlessNotifications } from '@fusion.dev/helix-headless/notifications';
+import type { CSSResultGroup } from 'lit';
+import '../notification/notification.js';
+/**
+ * @summary A feed a reader comes back to, made of notifications they may not have seen.
+ *
+ * @description
+ * Three rows: header, a list that scrolls, footer. The list scrolls and the
+ * other two do not, because a panel is opened at a fixed height and a mark-all
+ * control that slides away as the reader scrolls is the control they were
+ * reaching for.
+ *
+ * **It does not virtualize and it cannot**, which is the headless tier's note
+ * and worth repeating where the choice is made: the items are the consumer's own
+ * elements, so N notifications is N elements by construction. A feed that really
+ * holds thousands wants `helix-data-table` with a custom cell.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category feedback
+ * @documentation https://helix.fusion.dev/components/notifications
+ *
+ * @slot - The notifications, as `helix-notification` children.
+ * @slot footer - Below the list, for a link to everything.
+ * @slot header - Above the list, for a title and the mark-all control.
+ *
+ * @csspart list - The list itself.
+ * @csspart mark-all - The control that marks everything read.
+ *
+ * @cssproperty --notifications-max-block-size - How tall the feed may get before the list scrolls.
+ * @cssproperty --notifications-media-column - The gutter every item holds open where something in the feed has media.
+ * @cssproperty --notifications-padding-inline - Space either side of the header and footer.
+ * @cssproperty --notifications-rule - The hairline between items and around the regions.
+ */
+export declare class HelixNotifications extends HelixHeadlessNotifications {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-notifications': HelixNotifications;
+    }
+}