@fusion.dev/helix 0.147.0 → 0.149.0

package/dist/description-list/root/description-list-root.d.ts

@@ -18,6 +18,9 @@ import type { CSSResultGroup } from 'lit';
  * wide as its widest pair, labels sit on the start edge, and values sit on the
  * end edge in tabular figures, as in a set of totals.
  *
+ * **For a rule between pairs, set `divided`.** The rule sits in the middle of
+ * the gap, so the pairs keep the same room on either side of it.
+ *
  * @since 0.1.0
  * @status stable
  * @category data
@@ -25,10 +28,19 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/description-list
  *
  * @cssproperty --description-list-column-gap - The space between the column of labels and the column of values, with `direction="row"`.
+ * @cssproperty --description-list-divider-color - The color of the rule between pairs, with `divided`.
+ * @cssproperty --description-list-divider-width - The thickness of the rule between pairs, with `divided`.
  * @cssproperty --description-list-gap - Space between one pair and the next. The default is smaller with `direction="row"` than when stacked. Setting this property replaces both defaults.
+ * @cssproperty --description-list-label-width - The width of the column of labels, with `direction="row"`. Defaults to the width of the longest label; set a length such as `10rem` to line up several lists.
  */
 export declare class HelixDescriptionList extends HelixHeadlessDescriptionList {
     static styles: CSSResultGroup;
+    /**
+     * Draws a rule between one pair and the next, in the middle of the gap, as
+     * a details panel with many rows often does. Off by default, where space
+     * alone separates the pairs.
+     */
+    divided: boolean;
     /**
      * Where the values sit, beside their labels.
      *

package/dist/description-list/root/description-list-root.js

@@ -9,8 +9,15 @@ import { HelixHeadlessDescriptionList } from '@fusion.dev/helix-headless/descrip
 import { property } from 'lit/decorators.js';
 import { styles } from './description-list-root.css.js';
 let HelixDescriptionList = class HelixDescriptionList extends HelixHeadlessDescriptionList {
+    constructor() {
+        super(...arguments);
+        this.divided = false;
+    }
     static { this.styles = styles; }
 };
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixDescriptionList.prototype, "divided", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixDescriptionList.prototype, "justify", void 0);

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

@@ -1,11 +1,10 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_divider-thickness: var(--divider-thickness, var(--helix-border-thin));align-items: center;display: flex;}[part="content"] {color: var(--divider-content-color, var(--helix-color-foreground-muted));margin-inline: var(--divider-content-gap, var(--helix-space-sm));display: inline-flex;flex: 0 0 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);line-height: var(--helix-leading-tight);}[part="content"] slot::slotted(*),
+export const styles = createSheet(`:host {--_divider-thickness: var(--divider-thickness, var(--helix-border-thin));align-items: center;display: flex;}[part="content"] {color: var(--divider-content-color, var(--helix-color-foreground-muted));margin-inline: var(--divider-content-gap, var(--helix-space-sm));display: inline-flex;flex: 0 0 auto;font-family: var(--divider-content-font-family, var(--helix-font-sans));font-size: var(--divider-content-font-size, var(--helix-text-xs));font-weight: var(--divider-content-font-weight, inherit);line-height: var(--helix-leading-tight);}[part="content"] slot::slotted(*),
 [part="content"] {white-space: nowrap;}[part="content"][data-empty] {display: none;}:host {padding-inline-end: var(--divider-padding-end, var(--divider-padding, var(--helix-space-none)));padding-inline-start: var(
 --divider-padding-start,
 var(--divider-padding, var(--helix-space-none))
-);}:host([orientation="vertical"]) {padding-block-end: var(--divider-padding-end, var(--divider-padding, var(--helix-space-none)));padding-block-start: var(
+);}:host(:state(vertical)) {padding-block-end: var(--divider-padding-end, var(--divider-padding, var(--helix-space-none)));padding-block-start: var(
 --divider-padding-start,
 var(--divider-padding, var(--helix-space-none))
-);padding-inline: var(--helix-space-none);}:host([orientation="vertical"]) {align-self: stretch;display: inline-flex;flex-direction: column;}:host([orientation="vertical"]) [part="content"] {margin-block: var(--divider-content-gap, var(--helix-space-sm));margin-inline: var(--helix-space-none);}[part="line"] {background-color: var(--divider-color, var(--helix-color-border));}:host(:not([orientation])) [part="line"],
-:host([orientation="horizontal"]) [part="line"] {block-size: var(--_divider-thickness);flex: 1 1 0;}:host([orientation="vertical"]) {block-size: var(--divider-length, auto);}:host([orientation="vertical"]) [part="line"] {flex: 1 1 0;inline-size: var(--_divider-thickness);min-block-size: 1em;}:host([content-placement="start"]) [part="line"]:has(+ [part="content"]:not([data-empty])),
+);padding-inline: var(--helix-space-none);}:host(:state(vertical)) {align-self: stretch;display: inline-flex;flex-direction: column;}:host(:state(vertical)) [part="content"] {margin-block: var(--divider-content-gap, var(--helix-space-sm));margin-inline: var(--helix-space-none);}[part="line"] {background-color: var(--divider-color, var(--helix-color-border));}:host(:not(:state(vertical))) [part="line"] {block-size: var(--_divider-thickness);flex: 1 1 0;}:host(:state(vertical)) {block-size: var(--divider-length, auto);}:host(:state(vertical)) [part="line"] {flex: 1 1 0;inline-size: var(--_divider-thickness);min-block-size: 1em;}:host([content-placement="start"]) [part="line"]:has(+ [part="content"]:not([data-empty])),
 :host([content-placement="end"]) [part="content"]:not([data-empty]) + [part="line"] {flex: 0 0 var(--divider-content-offset, var(--helix-space-lg));}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -23,6 +23,9 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --divider-color - The color of the line.
  * @cssproperty --divider-content-color - The color of the content set into the line.
+ * @cssproperty --divider-content-font-family - The typeface of the content set into the line. The sans face by default.
+ * @cssproperty --divider-content-font-size - The size of the content set into the line. The `xs` step by default.
+ * @cssproperty --divider-content-font-weight - The weight of the content set into the line. The weight around the divider by default.
  * @cssproperty --divider-content-gap - The space either side of the content set into the line.
  * @cssproperty --divider-content-offset - The length of line before the content under `content-placement="start"`, or after it under `end`.
  * @cssproperty --divider-length - The length of a vertical line. A horizontal line takes the divider's width.

package/dist/element-events.generated.js

@@ -6,6 +6,7 @@ registerElementEvents({
     'helix-aura': ['helix-aura-fallback'],
     'helix-avatar': ['error', 'load'],
     'helix-button': ['helix-press'],
+    'helix-button-group': ['change', 'helix-before-change'],
     'helix-callout': ['helix-dismiss'],
     'helix-canvas': [
         'helix-before-move',
@@ -66,6 +67,7 @@ registerElementEvents({
     'helix-copy-button': ['helix-copy', 'helix-copy-error', 'helix-press'],
     'helix-data-table': [
         'helix-activate',
+        'helix-before-reorder',
         'helix-expand',
         'helix-filter',
         'helix-filtered',
@@ -131,9 +133,23 @@ registerElementEvents({
         'helix-before-open',
         'toggle',
     ],
-    'helix-list': ['change', 'helix-action', 'helix-before-change'],
+    'helix-list': [
+        'change',
+        'helix-action',
+        'helix-before-change',
+        'helix-before-reorder',
+        'helix-reorder',
+    ],
     'helix-list-item': ['helix-action'],
-    'helix-listbox': ['change', 'helix-before-change', 'helix-filter', 'helix-load-more', 'input'],
+    'helix-listbox': [
+        'change',
+        'helix-before-change',
+        'helix-before-reorder',
+        'helix-filter',
+        'helix-load-more',
+        'helix-reorder',
+        'input',
+    ],
     'helix-map': [
         'change',
         'helix-activate',
@@ -226,7 +242,14 @@ registerElementEvents({
     'helix-steps': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-switch': ['change', 'helix-before-toggle', 'input'],
     'helix-tab': ['helix-select'],
-    'helix-table': ['helix-select', 'helix-selected', 'helix-sort', 'helix-sorted'],
+    'helix-table': [
+        'helix-before-reorder',
+        'helix-reorder',
+        'helix-select',
+        'helix-selected',
+        'helix-sort',
+        'helix-sorted',
+    ],
     'helix-table-column': ['helix-before-resize', 'helix-resized'],
     'helix-tabs': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-tag': ['helix-dismiss'],
@@ -257,7 +280,13 @@ registerElementEvents({
         'toggle',
     ],
     'helix-tour-stop': ['helix-tour-ask'],
-    'helix-tree': ['helix-activate', 'helix-before-activate', 'helix-select'],
+    'helix-tree': [
+        'helix-activate',
+        'helix-before-activate',
+        'helix-before-reorder',
+        'helix-reorder',
+        'helix-select',
+    ],
     'helix-tree-item': [
         'helix-before-close',
         'helix-before-open',

package/dist/format-date/root/format-date-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: inline;}:host([elapsed]) {font-variant-numeric: tabular-nums;}@media print {:host([elapsed]) [part="time"]::after {content: " (" attr(datetime) ")";}}`);
+export const styles = createSheet(`:host([elapsed]) {font-variant-numeric: tabular-nums;}@media print {:host([elapsed]) [part="time"]::after {content: " (" attr(datetime) ")";}}`);

package/dist/format-date/root/format-date-root.d.ts

@@ -15,7 +15,6 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/format-date
  */
 export declare class HelixFormatDate extends HelixHeadlessFormatDate {
-    static tier: string;
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/format-date/root/format-date-root.js

@@ -8,7 +8,6 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessFormatDate } from '@fusion.dev/helix-headless/format-date';
 import { styles } from './format-date-root.css.js';
 let HelixFormatDate = class HelixFormatDate extends HelixHeadlessFormatDate {
-    static { this.tier = 'helix-'; }
     static { this.styles = styles; }
 };
 HelixFormatDate = __decorate([

package/dist/list/item/list-item.css.js

@@ -1,3 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;}[part~="row"] {align-items: center;display: grid;grid-template-columns: auto auto 1fr auto;padding: var(--list-item-padding, var(--helix-space-sm) var(--helix-space-md));}[part="rail"] {align-self: start;color: var(--helix-color-foreground-muted);display: var(--list-item-rail-display, none);font-family: var(--helix-font-mono);font-size: var(--helix-text-xs);grid-column: 1;grid-row: 1;letter-spacing: var(--helix-tracking-wide);line-height: calc(var(--helix-text-sm) * var(--helix-leading-normal));inline-size: var(--list-rail-inline-size, var(--helix-space-3xl));}[part="rail"]::before {content: var(--list-item-rail-content, "");}slot[name="start"]::slotted(*) {color: var(--helix-color-foreground-muted);grid-column: 2;margin-inline-end: var(--helix-space-sm);grid-row: 1 / span 2;}slot:not([name]) {color: var(--helix-color-foreground);display: block;font-size: var(--helix-text-sm);font-weight: var(--list-item-term-weight, var(--helix-weight-regular));grid-column: 3;grid-row: 1;}slot[name="description"] {color: var(--helix-color-foreground-muted);display: block;font-size: var(--helix-text-xs);grid-column: 3;grid-row: 2;}slot:not([name])::slotted(*),
-slot[name="description"]::slotted(*) {margin: var(--helix-space-none);}slot[name="end"]::slotted(*) {grid-column: 4;grid-row: 1 / span 2;}[part="link"] {align-items: center;color: inherit;display: grid;grid-column: 1 / 4;grid-row: 1 / span 2;grid-template-columns: subgrid;grid-template-rows: subgrid;text-decoration: none;}[part~="row-current"] {background-color: var(--list-item-current-background-color, var(--helix-color-well));border-radius: var(--helix-radii-sm);}[part~="row"]:focus-visible {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}:host(:state(selected)) [part~="row"] {background-color: var(--list-item-selected-background-color, var(--helix-color-primary-subtle));border-radius: var(--helix-radii-sm);}:host([disabled]) {opacity: var(--list-item-disabled-opacity, 0.5);}`);
+export const styles = createSheet(`:host {display: block;}[part~="row"] {align-items: center;display: grid;grid-template-columns: auto auto 1fr auto auto;padding: var(--list-item-padding, var(--helix-space-sm) var(--helix-space-md));}[part="rail"] {align-self: start;color: var(--helix-color-foreground-muted);display: var(--list-item-rail-display, none);font-family: var(--helix-font-mono);font-size: var(--helix-text-xs);grid-column: 1;grid-row: 1;letter-spacing: var(--helix-tracking-wide);line-height: calc(var(--helix-text-sm) * var(--helix-leading-normal));inline-size: var(--list-rail-inline-size, var(--helix-space-3xl));}[part="rail"]::before {content: var(--list-item-rail-content, "");}slot[name="start"]::slotted(*) {color: var(--helix-color-foreground-muted);grid-column: 2;margin-inline-end: var(--helix-space-sm);grid-row: 1 / span 2;}slot:not([name]) {color: var(--helix-color-foreground);display: block;font-size: var(--helix-text-sm);font-weight: var(--list-item-term-weight, var(--helix-weight-regular));grid-column: 3;grid-row: 1;}slot[name="description"] {color: var(--helix-color-foreground-muted);display: block;font-size: var(--helix-text-xs);grid-column: 3;grid-row: 2;}slot:not([name])::slotted(*),
+slot[name="description"]::slotted(*) {margin: var(--helix-space-none);}slot[name="end"]::slotted(*) {grid-column: 4;grid-row: 1 / span 2;}[part="link"] {align-items: center;color: inherit;display: grid;grid-column: 1 / 4;grid-row: 1 / span 2;grid-template-columns: subgrid;grid-template-rows: subgrid;text-decoration: none;}[part~="row-current"] {background-color: var(--list-item-current-background-color, var(--helix-color-well));border-radius: var(--helix-radii-sm);}[part~="row"]:focus-visible {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}:host(:state(selected)) [part~="row"] {background-color: var(--list-item-selected-background-color, var(--helix-color-primary-subtle));border-radius: var(--helix-radii-sm);}[part="grip"] {all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--list-item-grip-color, var(--helix-color-foreground-muted));cursor: grab;display: inline-flex;grid-column: 5;grid-row: 1 / span 2;margin-inline-start: var(--helix-space-sm);touch-action: none;}[part="grip"]:active {cursor: grabbing;}[part="grip"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="grip-mark"] {block-size: 1em;inline-size: 1em;}:host(:state(dragging)) [part~="row"] {opacity: var(--list-item-dragging-opacity, 0.5);}:host(:state(drop-before)) [part~="row"] {box-shadow: inset 0 var(--list-item-drop-indicator-size, var(--helix-border-thick)) 0 0
+var(--list-item-drop-indicator-color, var(--helix-color-primary));}:host(:state(drop-after)) [part~="row"] {box-shadow: inset 0 calc(var(--list-item-drop-indicator-size, var(--helix-border-thick)) * -1) 0 0
+var(--list-item-drop-indicator-color, var(--helix-color-primary));}:host([disabled]) {opacity: var(--list-item-disabled-opacity, 0.5);}`);

package/dist/list/item/list-item.d.ts

@@ -16,6 +16,10 @@ import { type CSSResultGroup, type TemplateResult } from 'lit';
  *
  * @cssproperty --list-item-current-background-color - The fill behind a row that is `current`.
  * @cssproperty --list-item-disabled-opacity - The opacity of a `disabled` row.
+ * @cssproperty --list-item-dragging-opacity - The opacity of a row being moved, in a `reorderable` list.
+ * @cssproperty --list-item-drop-indicator-color - The color of the line where a moved row would land.
+ * @cssproperty --list-item-drop-indicator-size - The thickness of the line where a moved row would land.
+ * @cssproperty --list-item-grip-color - The color of the grip, in a `reorderable` list.
  * @cssproperty --list-item-padding - The padding inside the row.
  * @cssproperty --list-item-rail-content - What the rail cell shows. The list sets it.
  * @cssproperty --list-item-rail-display - Whether the row has a rail. The list sets it.

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

@@ -2,4 +2,5 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {display: flex;flex-direction: column;gap: var(--list-gap, var(--helix-space-none));}:host([divided]) ::slotted(*:not(:first-child)) {border-block-start: var(--helix-border-thin) solid var(--helix-color-border);}:host([kind="ordered"]),
 :host([kind="unordered"]) {contain: style;padding-inline-start: var(--list-marker-gutter, var(--helix-space-md));}:host([kind="ordered"]) ::slotted(*),
 :host([kind="unordered"]) ::slotted(*) {display: list-item;list-style-position: outside;}:host([kind="ordered"]) ::slotted(*) {list-style-type: decimal;}:host([kind="ordered"][type="a"]) ::slotted(*) {list-style-type: lower-alpha;}:host([kind="ordered"][type="A"]) ::slotted(*) {list-style-type: upper-alpha;}:host([kind="ordered"][type="i"]) ::slotted(*) {list-style-type: lower-roman;}:host([kind="ordered"][type="I"]) ::slotted(*) {list-style-type: upper-roman;}:host([kind="unordered"]) ::slotted(*) {list-style-type: disc;}:host([kind="ordered"]) ::slotted(*) {counter-increment: list-item var(--list-step, 1);}:host([kind="ordered"]) ::slotted(:first-child) {counter-set: list-item var(--list-first);}:host([marker="rail"]) {counter-reset: list-rail;padding-inline-start: var(--helix-space-none);}:host([marker="rail"]) ::slotted(*) {--list-item-rail-content: counter(list-rail, var(--list-rail-style, decimal-leading-zero));--list-item-rail-display: block;counter-increment: list-rail var(--list-step, 1);}:host([marker="rail"]) ::slotted(:first-child) {counter-set: list-rail var(--list-first);}:host([kind="ordered"][marker="rail"]) ::slotted(*),
-:host([kind="unordered"][marker="rail"]) ::slotted(*) {display: block;list-style: none;}:host([kind="description"]) ::slotted(*) {--list-item-term-weight: var(--helix-weight-semibold);}@media print {:host {print-color-adjust: economy;}}`);
+:host([kind="unordered"][marker="rail"]) ::slotted(*) {display: block;list-style: none;}:host([kind="description"]) ::slotted(*) {--list-item-term-weight: var(--helix-weight-semibold);}[part="drag-preview"] {background-color: var(--list-drag-preview-background-color, var(--helix-color-surface-raised));border: var(--list-drag-preview-border-width, var(--helix-border-floating)) solid
+var(--list-drag-preview-border-color, var(--helix-color-border));border-radius: var(--list-drag-preview-radius, var(--helix-radii-sm));box-shadow: var(--list-drag-preview-shadow, var(--helix-shadow-floating));opacity: var(--list-drag-preview-opacity, 0.9);}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -13,6 +13,12 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Rows, Stack, Menu
  * @documentation https://fusion.dev/helix/components/list
  *
+ * @cssproperty --list-drag-preview-background-color - The fill behind the copy of a row a pointer drags.
+ * @cssproperty --list-drag-preview-border-color - The color of the edge around the copy of a row a pointer drags.
+ * @cssproperty --list-drag-preview-border-width - The width of the edge around the copy of a row a pointer drags. None by default, where the shadow lifts it.
+ * @cssproperty --list-drag-preview-opacity - The opacity of the copy of a row a pointer drags.
+ * @cssproperty --list-drag-preview-radius - The corner radius of the copy of a row a pointer drags.
+ * @cssproperty --list-drag-preview-shadow - The shadow that raises the copy of a row a pointer drags over the page.
  * @cssproperty --list-gap - The space between rows.
  * @cssproperty --list-marker-gutter - The space that the markers of ordered and unordered lists sit in.
  * @cssproperty --list-rail-inline-size - The width of the rail's track.

package/dist/list/root/list-root.js

@@ -7,13 +7,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessList } from '@fusion.dev/helix-headless/list';
 import { property } from 'lit/decorators.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './list-root.css.js';
 let HelixList = class HelixList extends HelixHeadlessList {
     constructor() {
         super(...arguments);
         this.divided = false;
     }
-    static { this.styles = styles; }
+    static { this.styles = [liveStyles, styles]; }
 };
 __decorate([
     property({ reflect: true, type: Boolean })

package/dist/listbox/reorder/index.d.ts

@@ -0,0 +1 @@
+export { ListboxReorderController, reorderListbox, } from '@fusion.dev/helix-headless/listbox/reorder';

package/dist/listbox/reorder/index.js

@@ -0,0 +1,6 @@
+import { reorderListbox } from '@fusion.dev/helix-headless/listbox/reorder';
+import { HelixListbox } from '../root/listbox-root.js';
+import { styles as previewStyles } from './listbox-drag-preview.css.js';
+import { styles } from './listbox-reorder.css.js';
+reorderListbox(HelixListbox, styles, previewStyles);
+export { ListboxReorderController, reorderListbox, } from '@fusion.dev/helix-headless/listbox/reorder';

package/dist/listbox/reorder/listbox-drag-preview.css.d.ts

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

package/dist/listbox/reorder/listbox-drag-preview.css.js

@@ -0,0 +1,3 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[popover] {background-color: var(--listbox-drag-preview-background-color, var(--helix-color-surface-raised));border: var(--listbox-drag-preview-border-width, var(--helix-border-floating)) solid
+var(--listbox-drag-preview-border-color, var(--helix-color-border));border-radius: var(--listbox-drag-preview-radius, var(--helix-radii-sm));box-shadow: var(--listbox-drag-preview-shadow, var(--helix-shadow-floating));opacity: var(--listbox-drag-preview-opacity, 0.9);}`);

package/dist/listbox/reorder/listbox-reorder.css.d.ts

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

package/dist/listbox/reorder/listbox-reorder.css.js

@@ -0,0 +1,4 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`* {cursor: grab;}:host(:state(dragging)) {opacity: var(--listbox-dragging-opacity, 0.5);}:host(:state(drop-before)),
+:host(:state(drop-after)) {position: relative;}:host(:state(drop-before))::before,
+:host(:state(drop-after))::before {background-color: var(--listbox-drop-indicator-color, var(--helix-color-primary));block-size: var(--listbox-drop-indicator-size, var(--helix-border-thick));content: "";inset-inline: 0;pointer-events: none;position: absolute;z-index: 1;}:host(:state(drop-before))::before {inset-block-start: 0;}:host(:state(drop-after))::before {inset-block-end: 0;}`);

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

@@ -1,5 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: flex;flex-direction: column;gap: var(--helix-space-2xs);}[part="items"] {--option-radius: var(--helix-radii-none);background-color: var(--listbox-background-color, var(--helix-color-surface));border: var(--listbox-border, var(--helix-border-thin) solid var(--helix-color-border));border-radius: var(--helix-radii-sm);display: flex;flex-direction: column;gap: var(--helix-space-none);max-block-size: var(--listbox-max-block-size, 14rem);overflow-y: auto;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-none);}[part="items"]:focus-visible {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0;}:host(:state(invalid)) [part="items"],
+export const styles = createSheet(`:host {display: flex;flex-direction: column;gap: var(--helix-space-2xs);}[part="items"] {--option-radius: var(--helix-radii-none);background-color: var(--listbox-background-color, var(--helix-color-surface));border: var(--listbox-border, var(--helix-border-thin) solid var(--helix-color-border));border-radius: var(--helix-radii-sm);display: flex;flex-direction: column;gap: var(--helix-space-none);max-block-size: var(--listbox-max-block-size, 14rem);overflow-y: auto;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-none);}:host([layout="grid"]) [part="items"] {display: grid;grid-template-columns: repeat(
+auto-fill,
+minmax(min(var(--listbox-column-min-inline-size, 8rem), 100%), 1fr)
+);}[part="items"]:focus-visible {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0;}:host(:state(invalid)) [part="items"],
 :host(:state(invalid)) [part="items"]:focus-visible {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger);}:host(:disabled) {opacity: 0.5;}:host(:disabled) [part="items"] {cursor: not-allowed;}[part="empty"],
 [part="loading"] {--_collection-inset-block: var(--helix-space-xs);--_collection-inset-inline: var(--helix-space-xs);}[part="error"] {color: var(--listbox-error-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);padding: var(--helix-space-xs);text-align: center;}[part="filter-icon"] {align-items: center;color: var(--helix-color-foreground-subtle);display: inline-flex;flex: 0 0 auto;}[part="filter-icon"] svg,
 slot[name="filter-icon"]::slotted(*) {--icon-size: var(--helix-size-icon-tight);block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight);}[part="search"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;gap: var(--helix-space-2xs);padding: var(--helix-space-2xs);padding-inline-start: var(--helix-space-xs);}[part="search-field"] {appearance: none;flex: 1 1 auto;min-inline-size: 0;background-color: transparent;block-size: var(--helix-size-control-tight);border: none;box-sizing: border-box;color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);inline-size: 100%;padding-inline: var(--helix-space-xs);}[part="search-field"]:focus-visible {outline: none;}:host([loading]) [part="items"] {opacity: 0.5;}@media print {:host {print-color-adjust: exact;}}`);

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

@@ -19,10 +19,21 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --listbox-background-color - The panel's fill. Set it to `transparent` when the list is already inside a panel.
  * @cssproperty --listbox-border - The panel's border, as a shorthand. Set it to `none` when the list is already inside a panel.
+ * @cssproperty --listbox-column-min-inline-size - How narrow a column may be with `layout="grid"`. As many columns as fit are drawn. Defaults to `8rem`.
+ * @cssproperty --listbox-drag-preview-background-color - The fill behind the copy of an option a pointer drags.
+ * @cssproperty --listbox-drag-preview-border-color - The color of the edge around the copy of an option a pointer drags.
+ * @cssproperty --listbox-drag-preview-border-width - The width of the edge around the copy of an option a pointer drags. None by default, where the shadow lifts it.
+ * @cssproperty --listbox-drag-preview-opacity - The opacity of the copy of an option a pointer drags.
+ * @cssproperty --listbox-drag-preview-radius - The corner radius of the copy of an option a pointer drags.
+ * @cssproperty --listbox-drag-preview-shadow - The shadow that raises the copy of an option a pointer drags over the page.
+ * @cssproperty --listbox-dragging-opacity - The opacity of an option being dragged, in a `reorderable` list with `@fusion.dev/helix/listbox/reorder` imported.
+ * @cssproperty --listbox-drop-indicator-color - The color of the line where a dragged option would land.
+ * @cssproperty --listbox-drop-indicator-size - The thickness of the line where a dragged option would land.
  * @cssproperty --listbox-error-color - The color of the line shown while `load-error` is set.
  * @cssproperty --listbox-max-block-size - Maximum height of the list before it scrolls.
  */
 export declare class HelixListbox extends HelixHeadlessListbox {
+    static tier: string;
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/listbox/root/listbox-root.js

@@ -12,6 +12,7 @@ import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.c
 import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './listbox-root.css.js';
 let HelixListbox = class HelixListbox extends HelixHeadlessListbox {
+    static { this.tier = 'helix-'; }
     static { this.styles = [
         liveStyles,
         collectionStateStyles,

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

@@ -1,6 +1,7 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: contents;}[part="region"] {background-color: var(--map-background-color, var(--helix-color-surface-sunken));block-size: var(--map-block-size, 24rem);border: var(--helix-border-thin) solid var(--map-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-sizing: border-box;display: grid;grid-template-rows: auto 1fr auto auto;overflow: hidden;position: relative;}:host([fill]) [part="region"] {block-size: auto;border: none;border-radius: 0;container-type: size;inset: 0;position: absolute;}[part="viewport"] {isolation: isolate;min-block-size: 0;overflow: hidden;position: relative;}[part="layers"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;padding: var(--helix-space-none);position: absolute;white-space: nowrap;}[part="viewport"] ::slotted(:not(helix-map-marker, helix-map-points, helix-map-position)) {block-size: 100%;inline-size: 100%;}:host(:state(idle)) ::slotted([slot="header"]),
-:host(:state(idle)) ::slotted([slot="footer"]) {opacity: 0;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);}::slotted([slot="attribution"]) {border-block-start: var(--helix-border-thin) solid var(--helix-color-border);color: var(--helix-color-foreground-subtle);display: block;font-size: var(--helix-text-xs);padding: var(--helix-space-2xs) var(--helix-space-xs);}:host([credit-placement]) [part="attribution"] {inset-block-end: var(--helix-space-2xs);max-inline-size: calc(100% - var(--helix-space-2xs) * 2);position: absolute;}:host([credit-placement="bottom-end"]) [part="attribution"] {inset-inline-end: var(--helix-space-2xs);}:host([credit-placement="bottom-start"]) [part="attribution"] {inset-inline-start: var(--helix-space-2xs);}:host([credit-placement]) ::slotted([slot="attribution"]) {backdrop-filter: var(--helix-material-backdrop);background-color: var(--helix-material-translucent);border-block-start: none;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);overflow: hidden;padding: var(--helix-space-none) var(--helix-space-xs);text-overflow: ellipsis;white-space: nowrap;}:host([credit-placement])
+export const styles = createSheet(`:host {display: contents;}[part="region"] {background-color: var(--map-background-color, var(--helix-color-surface-sunken));block-size: var(--map-block-size, 24rem);border: var(--helix-border-thin) solid var(--map-border-color, var(--helix-color-border));border-radius: var(--map-radius, var(--helix-radii-sm));box-sizing: border-box;display: grid;grid-template-rows: auto 1fr auto auto;overflow: hidden;position: relative;}:host([fill]) [part="region"] {block-size: auto;border: none;border-radius: 0;container-type: size;inset: 0;position: absolute;}[part="viewport"] {isolation: isolate;min-block-size: 0;overflow: hidden;position: relative;}[part="layers"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;padding: var(--helix-space-none);position: absolute;white-space: nowrap;}[part="viewport"] ::slotted(:not(helix-map-marker, helix-map-points, helix-map-position)) {block-size: 100%;inline-size: 100%;}:host(:state(idle)) ::slotted([slot="header"]),
+:host(:state(idle)) ::slotted([slot="footer"]) {opacity: 0;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);}::slotted([slot="attribution"]) {border-block-start: var(--helix-border-thin) solid
+var(--map-attribution-border-color, var(--helix-color-border));color: var(--map-attribution-color, var(--helix-color-foreground-subtle));display: block;font-size: var(--map-attribution-font-size, var(--helix-text-xs));padding: var(--helix-space-2xs) var(--helix-space-xs);}:host([credit-placement]) [part="attribution"] {inset-block-end: var(--helix-space-2xs);max-inline-size: calc(100% - var(--helix-space-2xs) * 2);position: absolute;}:host([credit-placement="bottom-end"]) [part="attribution"] {inset-inline-end: var(--helix-space-2xs);}:host([credit-placement="bottom-start"]) [part="attribution"] {inset-inline-start: var(--helix-space-2xs);}:host([credit-placement]) ::slotted([slot="attribution"]) {backdrop-filter: var(--helix-material-backdrop);background-color: var(--helix-material-translucent);border-block-start: none;border-radius: var(--helix-radii-sm);color: var(--map-attribution-color, var(--helix-color-foreground-muted));overflow: hidden;padding: var(--helix-space-none) var(--helix-space-xs);text-overflow: ellipsis;white-space: nowrap;}:host([credit-placement])
 [part="attribution"]:is(:hover, :focus-within)
 ::slotted([slot="attribution"]) {white-space: normal;}:host([material="glass"]) [part="controls"] button {backdrop-filter: var(--helix-material-backdrop);background-color: var(--viewport-control-background-color, var(--helix-material-translucent));}:host([material="frosted"]) [part="controls"] button {backdrop-filter: blur(var(--helix-material-blur-lg));background-color: var(
 --viewport-control-background-color,
@@ -9,12 +10,15 @@ var(--helix-material-translucent-strong)
 in oklab,
 var(--helix-color-foreground) 10%,
 var(--helix-color-surface-overlay)
-);}@media print {[part="controls"] {display: none;}}[part="controls"] {align-items: center;display: flex;flex-direction: column;grid-column: 1 / -1;grid-row: 2 / 3;}[part="controls"] [part="zoom-in"] {border-end-end-radius: 0;border-end-start-radius: 0;}[part="controls"] [part="zoom-out"] {border-block-start: 0;border-start-end-radius: 0;border-start-start-radius: 0;margin-block-start: calc(-1 * var(--helix-space-2xs));}[part="tilt"] {font-size: var(--helix-text-xs);font-weight: var(--helix-weight-semibold);}[part="tilt"][aria-pressed="true"] {background-color: var(--helix-color-primary-surface);border-color: var(--helix-color-primary-surface);color: var(--helix-color-foreground-on-primary);}[part="tilt"][aria-pressed="true"]:hover {background-color: var(--helix-color-primary-surface-hover);}[part="compass"] {border-radius: var(--helix-radii-sm);display: grid;grid-template-areas:
+);}@media print {[part="controls"] {display: none;}}[part="controls"] {align-items: center;display: flex;flex-direction: column;grid-column: 1 / -1;grid-row: 2 / 3;}[part="controls"] [part="zoom-in"] {border-end-end-radius: 0;border-end-start-radius: 0;}[part="controls"] [part="zoom-out"] {border-block-start: 0;border-start-end-radius: 0;border-start-start-radius: 0;margin-block-start: calc(-1 * var(--helix-space-2xs));}[part="controls"] [part="face-north"] ::slotted(*) {--icon-size: var(--helix-size-icon-md);block-size: var(--helix-size-icon-md);inline-size: var(--helix-size-icon-md);}[part="tilt"] {font-size: var(--helix-text-xs);font-weight: var(--helix-weight-semibold);}[part="tilt"][aria-pressed="true"] {background-color: var(--map-chosen-color, var(--helix-color-primary-surface));border-color: var(--map-chosen-color, var(--helix-color-primary-surface));color: var(--helix-color-foreground-on-primary);}[part="tilt"][aria-pressed="true"]:hover {background-color: var(--helix-color-primary-surface-hover);}[part="compass"] {border-radius: var(--helix-radii-sm);display: grid;grid-template-areas:
 "rotl   up     rotr"
 "start  north  end"
 ".      down   .";place-items: center;}[part="rotate-left"] {grid-area: rotl;}[part="rotate-right"] {grid-area: rotr;}[part="face-north"] {grid-area: north;}[part="compass"] > :not([part="face-north"]) {background-color: transparent;block-size: calc(var(--helix-size-control-sm) * 0.75);border-color: transparent;box-shadow: none;font-size: var(--helix-text-xs);inline-size: calc(var(--helix-size-control-sm) * 0.75);}[part="compass"]:has(> :not([part="face-north"])) {background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));box-shadow:
 var(--helix-shadow-floating),
-0 0 0 var(--helix-border-floating) var(--helix-color-border);}[part="needle"] {block-size: var(--helix-size-icon-md);inline-size: var(--helix-size-icon-md);transform: rotate(var(--map-needle-turn, 0deg));}[part="needle"] [data-end="north"] {fill: var(--helix-color-danger);}[part="needle"] [data-end="south"] {fill: var(--helix-color-foreground-muted);}[part="layers-menu"] {background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));border: var(--helix-border-floating) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);color: var(--helix-color-foreground);display: grid;gap: var(--helix-space-sm);inline-size: min(calc(var(--helix-size-control-lg) * 6), 70vw);inset-block-start: 0;inset-inline-end: calc(100% + var(--helix-space-2xs));max-block-size: calc(var(--map-block-size, 24rem) - var(--helix-space-sm) * 2);overflow-y: auto;padding: var(--helix-space-sm);position: absolute;}:host([fill]) [part="layers-menu"] {max-block-size: calc(100cqb - var(--helix-space-sm) * 2);}[part="layers-menu"][hidden] {display: none;}:host([controls-placement^="bottom"]) [part="layers-menu"] {inset-block: auto 0;}:host([controls-placement$="start"]) [part="layers-menu"] {inset-inline: calc(100% + var(--helix-space-2xs)) auto;}[part="map-types"] {display: grid;gap: var(--helix-space-xs);grid-template-columns: repeat(3, 1fr);}[part="map-type"] {color: var(--helix-color-foreground-muted);cursor: pointer;display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-2xs);justify-items: center;position: relative;}[part="map-type"] input {block-size: 1px;inline-size: 1px;margin: 0;opacity: 0;pointer-events: none;position: absolute;}[part="map-type-preview"] {aspect-ratio: 4 / 3;background-color: var(--helix-color-surface-sunken);border: var(--helix-border-thick) solid transparent;border-radius: var(--helix-radii-sm);box-sizing: border-box;display: block;inline-size: 100%;object-fit: cover;}[part="map-type"]:hover,
-[part="map-type"]:has(input:checked) {color: var(--helix-color-foreground);}[part="map-type"]:has(input:checked) [part="map-type-preview"] {border-color: var(--helix-color-primary-surface);}[part="map-type"]:has(input:focus-visible) [part="map-type-preview"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="layer-choices"] {display: grid;gap: var(--helix-space-xs);grid-template-columns: repeat(3, 1fr);}[part="layers-menu"] [part="layer-choice"] {align-content: start;background-color: transparent;block-size: auto;border: 0;box-shadow: none;color: var(--helix-color-foreground-muted);display: grid;font-size: var(--helix-text-xs);gap: var(--helix-space-2xs);inline-size: auto;justify-items: center;padding: 0;text-align: center;}[part="layers-menu"] [part="layer-choice"]:hover,
-[part="layers-menu"] [part="layer-choice"][aria-pressed="true"] {background-color: transparent;color: var(--helix-color-foreground);}[part="layers-menu"] [part="layer-choice"]:focus-visible {outline: none;}[part="layer-icon"] {aspect-ratio: 4 / 3;background-color: var(--helix-color-surface-sunken);border: var(--helix-border-thick) solid transparent;border-radius: var(--helix-radii-sm);box-sizing: border-box;display: block;inline-size: 100%;padding: var(--helix-space-sm);}[part="layer-choice"][aria-pressed="true"] [part="layer-icon"] {border-color: var(--helix-color-primary-surface);}[part="layer-choice"]:focus-visible [part="layer-icon"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}@media (forced-colors: active) {[part="tilt"][aria-pressed="true"] {background-color: Highlight;color: HighlightText;forced-color-adjust: none;}[part="map-type"]:has(input:checked),
+0 0 0 var(--helix-border-floating) var(--helix-color-border);}[part="needle"] {block-size: var(--helix-size-icon-md);inline-size: var(--helix-size-icon-md);transform: rotate(var(--map-needle-turn, 0deg));}[part="needle"] [data-end="north"] {fill: var(--map-needle-north-color, var(--helix-color-danger));}[part="needle"] [data-end="south"] {fill: var(--map-needle-south-color, var(--helix-color-foreground-muted));}[part="layers-menu"] {background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));border: var(--helix-border-floating) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);color: var(--helix-color-foreground);display: grid;gap: var(--map-layers-menu-gap, var(--helix-space-sm));inline-size: var(
+--map-layers-menu-inline-size,
+min(calc(var(--helix-size-control-lg) * 6), 70vw)
+);inset-block-start: 0;inset-inline-end: calc(100% + var(--helix-space-2xs));max-block-size: calc(var(--map-block-size, 24rem) - var(--helix-space-sm) * 2);overflow-y: auto;padding: var(--map-layers-menu-padding, var(--helix-space-sm));position: absolute;}:host([fill]) [part="layers-menu"] {max-block-size: calc(100cqb - var(--helix-space-sm) * 2);}[part="layers-menu"][hidden] {display: none;}:host([controls-placement^="bottom"]) [part="layers-menu"] {inset-block: auto 0;}:host([controls-placement$="start"]) [part="layers-menu"] {inset-inline: calc(100% + var(--helix-space-2xs)) auto;}[part="map-types"] {display: grid;gap: var(--helix-space-xs);grid-template-columns: repeat(3, 1fr);}[part="map-type"] {color: var(--helix-color-foreground-muted);cursor: pointer;display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-2xs);justify-items: center;position: relative;}[part="map-type"] input {block-size: 1px;inline-size: 1px;margin: 0;opacity: 0;pointer-events: none;position: absolute;}[part="map-type-preview"] {aspect-ratio: 4 / 3;background-color: var(--helix-color-surface-sunken);border: var(--helix-border-thick) solid transparent;border-radius: var(--helix-radii-sm);box-sizing: border-box;display: block;inline-size: 100%;object-fit: cover;}[part="map-type"]:hover,
+[part="map-type"]:has(input:checked) {color: var(--helix-color-foreground);}[part="map-type"]:has(input:checked) [part="map-type-preview"] {border-color: var(--map-chosen-color, var(--helix-color-primary-surface));}[part="map-type"]:has(input:focus-visible) [part="map-type-preview"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="layer-choices"] {display: grid;gap: var(--helix-space-xs);grid-template-columns: repeat(3, 1fr);}[part="layers-menu"] [part="layer-choice"] {align-content: start;background-color: transparent;block-size: auto;border: 0;box-shadow: none;color: var(--helix-color-foreground-muted);display: grid;font-size: var(--helix-text-xs);gap: var(--helix-space-2xs);inline-size: auto;justify-items: center;padding: 0;text-align: center;}[part="layers-menu"] [part="layer-choice"]:hover,
+[part="layers-menu"] [part="layer-choice"][aria-pressed="true"] {background-color: transparent;color: var(--helix-color-foreground);}[part="layers-menu"] [part="layer-choice"]:focus-visible {outline: none;}[part="layer-icon"] {aspect-ratio: 4 / 3;background-color: var(--helix-color-surface-sunken);border: var(--helix-border-thick) solid transparent;border-radius: var(--helix-radii-sm);box-sizing: border-box;display: block;inline-size: 100%;padding: var(--helix-space-sm);}[part="layer-choice"][aria-pressed="true"] [part="layer-icon"] {border-color: var(--map-chosen-color, var(--helix-color-primary-surface));}[part="layer-choice"]:focus-visible [part="layer-icon"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}@media (forced-colors: active) {[part="tilt"][aria-pressed="true"] {background-color: Highlight;color: HighlightText;forced-color-adjust: none;}[part="map-type"]:has(input:checked),
 [part="layers-menu"] [part="layer-choice"][aria-pressed="true"] {outline: var(--helix-border-thick) solid Highlight;outline-offset: var(--helix-space-2xs);}}`);

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

@@ -19,9 +19,19 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Map frame, Map container, Geo
  * @documentation https://fusion.dev/helix/components/map
  *
+ * @cssproperty --map-attribution-border-color - The rule above the map credit, under the map.
+ * @cssproperty --map-attribution-color - The color of the map credit.
+ * @cssproperty --map-attribution-font-size - The size of the map credit's text.
  * @cssproperty --map-background-color - The color behind the map while tiles load.
  * @cssproperty --map-block-size - The frame's height, as a length. Ignored with `fill`, where the container decides it.
  * @cssproperty --map-border-color - The frame's border color.
+ * @cssproperty --map-chosen-color - The fill of the pressed 3D button and the ring around the chosen map type and each shown layer in the layers menu.
+ * @cssproperty --map-layers-menu-gap - The space between the map types and the layers in the layers menu.
+ * @cssproperty --map-layers-menu-inline-size - The width of the layers menu.
+ * @cssproperty --map-layers-menu-padding - The space inside the edge of the layers menu.
+ * @cssproperty --map-needle-north-color - The north half of the compass needle.
+ * @cssproperty --map-needle-south-color - The south half of the compass needle.
+ * @cssproperty --map-radius - The frame's corners.
  * @cssproperty --viewport-control-background-color - The background of the pan and zoom buttons. Canvas uses the same property.
  */
 export declare class HelixMap extends HelixHeadlessMap {

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

@@ -17,8 +17,14 @@ var(--notifications-unread-inline-size, var(--_notifications-unread))
 2
 )
 );position: absolute;}:host([separation="filled"]),
-:host([separation="outlined"]) {--notifications-rule: transparent;margin-block-end: var(--notifications-item-gap, var(--helix-space-xs));}:host([separation="filled"]) [part="item"],
-:host([separation="outlined"]) [part="item"] {border: var(--helix-border-thin) solid var(--notifications-item-edge, var(--helix-color-border));border-radius: var(--notifications-item-radius, var(--helix-radii-md));}:host([separation="filled"]) [part="item"] {background-color: var(--notifications-item-fill, var(--helix-color-surface-raised));}:host([separation="filled"]) {--avatar-background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);}[part="media"] {display: grid;grid-template-rows: var(--_notifications-line);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="description"]::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);}slot[name="detail"]::slotted(*) {margin-block: var(--helix-space-2xs) var(--helix-space-none);margin-inline: var(--helix-space-none);}[part="body"] slot:not([name])::slotted(a) {color: inherit;text-decoration: none;}[part="body"] slot:not([name])::slotted(a:hover) {text-decoration: underline;text-decoration-color: color-mix(in oklab, currentcolor 35%, transparent);text-decoration-thickness: 1px;text-underline-offset: 0.25em;}:host(:not(:state(read))) [part="label"] {color: var(--helix-color-foreground);font-weight: var(--helix-weight-medium);}[part="controls"] {margin-inline-end: calc((var(--helix-size-control) - var(--helix-size-icon)) / -2);}[part="trailing"] {align-items: center;align-self: start;display: grid;grid-template-areas: "swap";justify-items: end;grid-template-rows: var(--_notifications-line);margin-inline-start: var(--helix-space-sm);}[part="trailing"] > * {grid-area: swap;transition:
+:host([separation="outlined"]),
+:host(:state(feed-filled)),
+:host(:state(feed-outlined)) {--notifications-rule: transparent;margin-block-end: var(--notifications-item-gap, var(--helix-space-xs));}:host([separation="filled"]) [part="item"],
+:host([separation="outlined"]) [part="item"],
+:host(:state(feed-filled)) [part="item"],
+:host(:state(feed-outlined)) [part="item"] {border: var(--helix-border-thin) solid var(--notifications-item-edge, var(--helix-color-border));border-radius: var(--notifications-item-radius, var(--helix-radii-md));}:host([separation="filled"]) [part="item"],
+:host(:state(feed-filled)) [part="item"] {background-color: var(--notifications-item-fill, var(--helix-color-surface-raised));}:host([separation="filled"]),
+:host(:state(feed-filled)) {--avatar-background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);}[part="media"] {display: grid;grid-template-rows: var(--_notifications-line);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="description"]::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);}slot[name="detail"]::slotted(*) {margin-block: var(--helix-space-2xs) var(--helix-space-none);margin-inline: var(--helix-space-none);}[part="body"] slot:not([name])::slotted(a) {color: inherit;text-decoration: none;}[part="body"] slot:not([name])::slotted(a:hover) {text-decoration: underline;text-decoration-color: color-mix(in oklab, currentcolor 35%, transparent);text-decoration-thickness: 1px;text-underline-offset: 0.25em;}:host(:not(:state(read))) [part="label"] {color: var(--helix-color-foreground);font-weight: var(--helix-weight-medium);}[part="controls"] {margin-inline-end: calc((var(--helix-size-control) - var(--helix-size-icon)) / -2);}[part="trailing"] {align-items: center;align-self: start;display: grid;grid-template-areas: "swap";justify-items: end;grid-template-rows: var(--_notifications-line);margin-inline-start: var(--helix-space-sm);}[part="trailing"] > * {grid-area: swap;transition:
 opacity var(--helix-duration-normal) var(--helix-easing-standard),
 translate var(--helix-duration-normal) var(--helix-easing-decelerate);}:host {--_notifications-swap: 0;}[part="trailing"] > :not([part="controls"]) {color: var(--helix-color-foreground-subtle);display: block;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);line-height: var(--_notifications-line);opacity: calc(1 - var(--_notifications-swap));translate: calc(var(--helix-space-2xs) * var(--_notifications-swap)) 0;}[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"],

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

@@ -1,5 +1,5 @@
 import { HelixHeadlessNotification } from '@fusion.dev/helix-headless/notifications';
-import type { CSSResultGroup } from 'lit';
+import type { CSSResultGroup, PropertyValues } from 'lit';
 import '../../format-date/index.js';
 /**
  * @summary A single notification about something that happened, marked read or unread.
@@ -52,9 +52,17 @@ import '../../format-date/index.js';
  * @cssproperty --notifications-unread-mark - Color of the edge mark on an unread item.
  * @cssproperty --notifications-unread-offset - Distance from the unread mark to the row's top edge.
  * @cssproperty --notifications-unread-radius - Corner radius of the unread mark, which can turn it into a dot.
+ *
+ * @cssstate feed-filled - The feed's `separation` is `filled` and the row sets none of its own, so the row is drawn as `filled`.
+ * @cssstate feed-outlined - The feed's `separation` is `outlined` and the row sets none of its own, so the row is drawn as `outlined`.
  */
 export declare class HelixNotification extends HelixHeadlessNotification {
     static tier: string;
+    /**
+     * @internal Set by the feed: its own `separation`, which this row takes
+     * where it sets none, as `:state(feed-filled)` or `:state(feed-outlined)`.
+     */
+    feedSeparation: 'filled' | 'outlined' | 'plain' | undefined;
     /**
      * How a row is separated from the one above it.
      *
@@ -69,12 +77,12 @@ export declare class HelixNotification extends HelixHeadlessNotification {
      * scan or a set of things to act on. The reference this came from draws cards
      * because every row in it has a control.
      *
-     * **On the row and not on the feed, because the row is the box being
-     * separated.** A consumer wanting the whole feed carded says so once, in a
-     * document rule on the element, rather than on every item: this is a styled
-     * axis and a stylesheet is where it is set.
+     * **On the row, because the row is the box being separated, and on the
+     * feed for every row at once.** A feed's own `separation` is taken by each
+     * row that sets none, and a row that sets one keeps it, `plain` included.
      */
     separation?: 'filled' | 'outlined' | 'plain';
+    protected willUpdate(changed: PropertyValues): void;
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/notifications/notification/notification.js

@@ -11,9 +11,22 @@ import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
 import { styles } from './notification.css.js';
 import '../../format-date/index.js';
 let HelixNotification = class HelixNotification extends HelixHeadlessNotification {
+    constructor() {
+        super(...arguments);
+        this.feedSeparation = undefined;
+    }
     static { this.tier = 'helix-'; }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        const taken = this.separation ? undefined : this.feedSeparation;
+        this.toggleState('feed-filled', taken === 'filled');
+        this.toggleState('feed-outlined', taken === 'outlined');
+    }
     static { this.styles = [glyphStyles, styles]; }
 };
+__decorate([
+    property({ attribute: false })
+], HelixNotification.prototype, "feedSeparation", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixNotification.prototype, "separation", void 0);

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

@@ -1,8 +1,10 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {--helix-size-checkbox: var(--helix-size-checkbox-sm);--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-tag: var(--helix-size-tag-sm);--helix-size-avatar: var(--helix-size-avatar-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-lg));}[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
+[part="footer"][data-empty] {display: none;}[part="list"] {overflow-y: auto;}:host([separation="filled"]) [part="header"],
+:host([separation="outlined"]) [part="header"] {border-block-end: none;}:host([separation="filled"]) [part="list"],
+:host([separation="outlined"]) [part="list"] {padding-block-start: var(--notifications-item-gap, var(--helix-space-xs));}[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-lg));}::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-foreground-muted);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);transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="mark-all"]:hover {color: var(--helix-color-foreground);}[part="more"] {background: none;border: 0;border-block-start: var(--helix-border-thin) solid var(--helix-color-border);color: var(--helix-color-foreground-muted);cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);inline-size: 100%;padding-block: var(--helix-space-sm);transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="more"]:hover {color: var(--helix-color-foreground);}[part="more"][aria-disabled="true"],
 [part="more"][aria-disabled="true"]:hover {color: var(--helix-color-foreground-subtle);cursor: default;}[part="more"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[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"] {--_collection-inset-block: var(--helix-space-lg);--_collection-inset-inline: var(--helix-space-md);}@media print {:host {max-block-size: none;}[part="list"] {overflow-y: visible;}[part="mark-all"],
+[part="loading"] {--_collection-inset-block: var(--helix-space-lg);--_collection-inset-inline: var(--helix-space-md);}[part="error"] {color: var(--notifications-error-color, var(--helix-color-danger));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"],
 [part="more"] {display: none;}}`);

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

@@ -1,6 +1,5 @@
 import { HelixHeadlessNotifications } from '@fusion.dev/helix-headless/notifications';
-import type { CSSResultGroup } from 'lit';
-import '../notification/notification.js';
+import type { CSSResultGroup, PropertyValues } from 'lit';
 /**
  * @summary A feed of notifications, each marked read or unread.
  *
@@ -20,15 +19,19 @@ import '../notification/notification.js';
  *
  * @slot - The notifications.
  * @slot empty - Replaces the words of `empty-text` in the `empty` part, such as a picture and a line of your own.
+ * @slot error - Replaces the words of `load-error` in the `error` part, such as a line with a retry button.
  * @slot footer - Below the list, for a link to everything.
  * @slot header - Above the list, for a title and the mark-all control.
  * @slot loading - Replaces the words of `loading-text` in the `loading` part, such as a loader.
  *
+ * @csspart error - The line `load-error` shows under the rows, in the danger color.
  * @csspart list - The list itself.
- * @csspart live - A copy of the empty and loading messages, in a live region that screen readers announce when they change. Visually hidden in the styled tier.
+ * @csspart live - A copy of the empty, loading and error messages, in a live region that screen readers announce when they change. Visually hidden in the styled tier.
  * @csspart mark-all - The control that marks everything read.
  * @csspart more - The button after the list that asks for more, while `load-more` is set. It stays while the feed is loading, in a lighter color and `aria-disabled`, so focus stays on it.
  *
+ * @cssproperty --notifications-error-color - The color of the `error` line.
+ * @cssproperty --notifications-item-gap - Space before the first row, and between rows, while `separation` makes every row a box.
  * @cssproperty --notifications-max-block-size - How tall the feed may get before the list scrolls.
  * @cssproperty --notifications-media-column - Width of the media column that every item keeps when any item in the feed has media.
  * @cssproperty --notifications-padding-inline - Space either side of the header and footer.
@@ -36,7 +39,22 @@ import '../notification/notification.js';
  */
 export declare class HelixNotifications extends HelixHeadlessNotifications {
     static tier: string;
+    /**
+     * How every row in the feed is set apart from the one above it, where the
+     * row does not say for itself.
+     *
+     * `plain`, the resting one, separates the rows by a hairline. `outlined` and
+     * `filled` make every row a box, as the row's own `separation` does, take
+     * away the rule under the header, which reads as a stray line above a box,
+     * and put the gap that falls between the boxes before the first one too.
+     *
+     * A row that sets its own `separation` keeps it, so a feed of boxes can hold
+     * one plain row and the other way round.
+     */
+    separation?: 'filled' | 'outlined' | 'plain';
     static styles: CSSResultGroup;
+    /** Tells each row the feed's `separation`, which a row that sets none takes. */
+    protected updated(changed: PropertyValues): void;
 }
 declare global {
     interface HTMLElementTagNameMap {