@fusion.dev/helix 0.148.0 → 0.149.0

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

@@ -1,5 +1,7 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: grid;grid-template-rows: auto minmax(0, 1fr) auto auto auto;max-block-size: var(--chat-max-block-size, none);min-block-size: 0;}[part="header"] {grid-row: 1;}[part="log"] {grid-row: 2;}[part="resume"] {grid-row: 3;}[part="status"] {grid-row: 4;}[part="composer"] {grid-row: 5;}[part="log"] {display: flex;flex-direction: column;scrollbar-color: var(--helix-color-border) transparent;scrollbar-width: thin;gap: var(--chat-gap, var(--helix-space-md));overflow-y: auto;padding-block: var(--helix-space-md);padding-inline: var(--chat-padding-inline, var(--helix-space-md));justify-content: safe flex-end;}[part="header"][hidden],
+export const styles = createSheet(`:host {display: grid;grid-template-rows: auto minmax(0, 1fr) auto auto auto;max-block-size: var(--chat-max-block-size, none);min-block-size: 0;}[part="header"] {grid-row: 1;}[part="log"] {grid-row: 2;}[part="resume"] {grid-row: 3;}[part="status"] {grid-row: 4;}[part="composer"] {grid-row: 5;}[part="log"] {display: flex;flex-direction: column;scrollbar-color: var(--chat-scrollbar-thumb-color, var(--helix-scrollbar-thumb-color))
+var(--chat-scrollbar-track-color, var(--helix-scrollbar-track-color));scrollbar-width: thin;gap: var(--chat-gap, var(--helix-space-md));overflow-y: auto;padding-block: var(--helix-space-md);padding-inline: var(--chat-padding-inline, var(--helix-space-md));justify-content: safe flex-end;}[part="log"]:hover {scrollbar-color: var(--chat-scrollbar-thumb-hover-color, var(--helix-scrollbar-thumb-hover-color))
+var(--chat-scrollbar-track-color, var(--helix-scrollbar-track-color));}[part="header"][hidden],
 [part="resume"][hidden],
 [part="composer"][hidden] {display: none;}[part="status"][data-empty] {padding-block: 0;}[part="header"] {--helix-size-tag: var(--helix-size-tag-sm);align-items: center;border-block-end: var(--helix-border-thin) solid var(--chat-rule, var(--helix-color-border));display: flex;gap: var(--helix-space-sm);justify-content: space-between;min-block-size: var(--helix-size-control);padding-block: var(--helix-space-2xs);padding-inline: var(--chat-padding-inline, var(--helix-space-md));}[part="header"] > [part="actions"] {--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);align-items: center;display: flex;flex: 0 0 auto;gap: var(--helix-space-2xs);}[part="header"] > [part="actions"][hidden] {display: none;}[part="resume"] {display: grid;justify-items: center;margin-block-start: calc(var(--helix-space-xl) * -1);pointer-events: none;position: relative;}[part="resume"] > * {pointer-events: auto;}[part="resume"] slot::slotted(*) {border: var(--chat-resume-border-width, var(--helix-border-floating)) solid
 var(--chat-resume-border-color, var(--helix-color-border));box-shadow: var(--chat-resume-shadow, var(--helix-shadow-floating));}[part="status"] {color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);padding-block-end: var(--helix-space-2xs);padding-block-start: var(--helix-space-xs);padding-inline: var(--chat-padding-inline, var(--helix-space-md));}[part="typing"] {align-items: center;color: var(--chat-typing-color, var(--helix-color-foreground-muted));display: inline-flex;gap: var(--chat-typing-gap, var(--helix-space-xs));}[part="composer"] {padding-block: var(--helix-space-sm);padding-inline: var(--chat-padding-inline, var(--helix-space-md));}[part="empty"],

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

@@ -36,6 +36,9 @@ import '../message/chat-message.js';
  * @cssproperty --chat-resume-border-width - Width of the edge around the resume control, which sits over content.
  * @cssproperty --chat-resume-shadow - Shadow under the resume control, which floats over the transcript.
  * @cssproperty --chat-rule - The hairline under the header.
+ * @cssproperty --chat-scrollbar-thumb-color - The thumb of the transcript's scrollbar. Defaults to `--helix-scrollbar-thumb-color`.
+ * @cssproperty --chat-scrollbar-thumb-hover-color - The thumb while the pointer is over the transcript. Defaults to `--helix-scrollbar-thumb-hover-color`.
+ * @cssproperty --chat-scrollbar-track-color - The track of the transcript's scrollbar. Defaults to `--helix-scrollbar-track-color`.
  * @cssproperty --chat-typing-color - The color of the dots and the words that say who is typing.
  * @cssproperty --chat-typing-gap - The space between the dots and the words that say who is typing.
  */

package/dist/data-table/root/data-table-root.css.js

@@ -7,16 +7,23 @@ transparent,
 transparent
 );}:host(:dir(rtl)) [part="table"] {--_data-table-fade: to left;}@keyframes data-table-edges {0% {--_data-table-fade-end: var(--helix-space-xl);--_data-table-fade-start: 0rem;}5%,
 95% {--_data-table-fade-end: var(--helix-space-xl);--_data-table-fade-start: var(--helix-space-xl);}100% {--_data-table-fade-end: 0rem;--_data-table-fade-start: var(--helix-space-xl);}}@media (prefers-reduced-motion: reduce) {[part="table"] {animation: none;}}[part="head"],
-[part="row"] {display: contents;}[part~="cell"] {border-block-end: var(--helix-border-thin) solid
-var(--data-table-rule-color, var(--helix-color-border));color: var(--data-table-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--data-table-text, var(--helix-text-sm));padding-block: var(--data-table-padding-block, var(--helix-space-sm));padding-inline: var(--data-table-padding-inline, var(--helix-space-none) var(--helix-space-md));text-align: var(--data-table-cell-align);}[part="row"]:last-of-type [part~="cell"] {border-block-end-color: transparent;}::slotted(helix-table-column) {--_table-heading-color: var(--data-table-heading-color);--_table-heading-padding-block: var(--data-table-padding-block);--_table-heading-padding-inline: var(--data-table-padding-inline);--_table-heading-rule-color: var(--data-table-rule-color);--_table-heading-text: var(--data-table-text);}::slotted(helix-table-column[sortable]) {cursor: pointer;}[part~="cell"]:focus-visible,
+[part~="row"] {display: contents;}[part~="cell"] {border-block-end: var(--helix-border-thin) solid
+var(--data-table-rule-color, var(--helix-color-border));color: var(--data-table-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--data-table-text, var(--helix-text-sm));padding-block: var(--data-table-padding-block, var(--helix-space-sm));padding-inline: var(--data-table-padding-inline, var(--helix-space-none) var(--helix-space-md));text-align: var(--data-table-cell-align);}[part~="row"]:last-of-type [part~="cell"] {border-block-end-color: transparent;}::slotted(helix-table-column) {--_table-heading-color: var(--data-table-heading-color);--_table-heading-padding-block: var(--data-table-padding-block);--_table-heading-padding-inline: var(--data-table-padding-inline);--_table-heading-rule-color: var(--data-table-rule-color);--_table-heading-text: var(--data-table-text);}::slotted(helix-table-column[sortable]) {cursor: pointer;}[part~="cell"]:focus-visible,
 [part="more-cell"]:focus-visible,
 [part~="select"]:focus-visible,
-[part="select-all"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part~="select"],
-[part="select-all"] {align-items: center;border-block-end: var(--helix-border-thin) solid
-var(--data-table-rule-color, var(--helix-color-border));display: flex;justify-content: center;padding-block: var(--data-table-padding-block, var(--helix-space-sm));padding-inline: var(--data-table-padding-inline, var(--helix-space-sm));}[part="row"]:last-of-type [part~="select"] {border-block-end-color: transparent;}[part="row"][aria-selected="true"] > * {background-color: var(
+[part="select-all"]:focus-visible,
+[part="row-grip"]:focus-visible,
+[part="grip-head"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part~="select"],
+[part="select-all"],
+[part="row-grip"],
+[part="grip-head"] {align-items: center;border-block-end: var(--helix-border-thin) solid
+var(--data-table-rule-color, var(--helix-color-border));display: flex;justify-content: center;padding-block: var(--data-table-padding-block, var(--helix-space-sm));padding-inline: var(--data-table-padding-inline, var(--helix-space-sm));}[part~="row"]:last-of-type [part~="select"],
+[part~="row"]:last-of-type [part="row-grip"] {border-block-end-color: transparent;}[part~="row"][aria-selected="true"] > * {background-color: var(
 --data-table-selected-background-color,
 color-mix(in srgb, var(--helix-color-primary) 10%, var(--helix-color-background))
-);}[part="toolbar"][data-empty],
+);}[part="row-grip-button"] {all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--data-table-grip-color, var(--helix-color-foreground-muted));cursor: grab;display: inline-flex;touch-action: none;}[part="row-grip-button"]:active {cursor: grabbing;}[part="row-grip-button"][aria-disabled="true"] {cursor: default;opacity: var(--data-table-grip-disabled-opacity, 0.4);}[part="row-grip-mark"] {block-size: 1em;inline-size: 1em;}[part~="row"][part~="row-dragging"] > * {opacity: var(--data-table-dragging-opacity, 0.5);}[part~="row"][part~="row-drop-before"] > * {box-shadow: inset 0 var(--data-table-drop-indicator-size, var(--helix-border-thick)) 0 0
+var(--data-table-drop-indicator-color, var(--helix-color-primary));}[part~="row"][part~="row-drop-after"] > * {box-shadow: inset 0 calc(var(--data-table-drop-indicator-size, var(--helix-border-thick)) * -1) 0
+0 var(--data-table-drop-indicator-color, var(--helix-color-primary));}[part="toolbar"][data-empty],
 [part="footer"][data-empty] {display: none;}[part="toolbar"] {padding-block-end: var(--data-table-toolbar-gap, var(--helix-space-sm));}[part="footer"] {align-items: center;display: flex;flex-wrap: wrap;gap: var(--data-table-footer-item-gap, var(--helix-space-md));padding-block-start: var(--data-table-footer-gap, var(--helix-space-sm));}[part="pagination"] {margin-inline-start: auto;}[part="empty"],
 [part="loading"] {grid-column: 1 / -1;}:host([child-field]) [part~="cell-header"] {--_data-table-gutter: calc(
 var(--data-table-toggle-size, var(--helix-size-icon-tight)) +
@@ -35,5 +42,10 @@ var(--helix-color-surface-raised)
 );}:host([windowed]) [part="table"] {block-size: var(--data-table-block-size, 24em);overflow-y: auto;overscroll-behavior: contain;}:host([windowed]) ::slotted(helix-table-column) {--_table-heading-background-color: var(
 --data-table-heading-background-color,
 var(--helix-color-background)
-);--_table-heading-layer: var(--helix-layer-sticky);--_table-heading-position: sticky;}:host([windowed]) [part="select-all"] {background-color: var(--data-table-heading-background-color, var(--helix-color-background));inset-block-start: 0;position: sticky;z-index: var(--helix-layer-sticky);}[part="before"],
-[part="after"] {grid-column: 1 / -1;}:host([loading]) [part="table"] {opacity: 0.5;}@media print {:host {background-color: transparent;}[part="table"] {overflow-x: visible;}:host([windowed]) [part="table"] {block-size: auto;overflow-y: visible;}[part="footer"] {display: none;}}`);
+);--_table-heading-layer: var(--helix-layer-sticky);--_table-heading-position: sticky;}:host([windowed]) [part="select-all"],
+:host([windowed]) [part="grip-head"] {background-color: var(--data-table-heading-background-color, var(--helix-color-background));inset-block-start: 0;position: sticky;z-index: var(--helix-layer-sticky);}[part="before"],
+[part="after"] {grid-column: 1 / -1;}:host([loading]) [part="table"] {opacity: 0.5;}[part="drag-preview"] {background-color: var(
+--data-table-drag-preview-background-color,
+var(--helix-color-surface-raised)
+);border: var(--data-table-drag-preview-border-width, var(--helix-border-floating)) solid
+var(--data-table-drag-preview-border-color, var(--helix-color-border));border-radius: var(--data-table-drag-preview-radius, var(--helix-radii-sm));box-shadow: var(--data-table-drag-preview-shadow, var(--helix-shadow-floating));opacity: var(--data-table-drag-preview-opacity, 0.9);}@media print {:host {background-color: transparent;}[part="table"] {overflow-x: visible;}:host([windowed]) [part="table"] {block-size: auto;overflow-y: visible;}[part="footer"] {display: none;}}`);

package/dist/data-table/root/data-table-root.d.ts

@@ -33,6 +33,7 @@ import '../../table/index.js';
  *
  * @csspart cell - One cell.
  * @csspart cell-selected - Added to `cell` in a selected row.
+ * @csspart drag-preview - A copy of the row a pointer drags by its grip, which follows the pointer in the top layer until the row is let go, with `reorderable-rows`. Hidden from assistive technology.
  * @csspart live - A copy of the empty and loading messages, which screen readers announce when they change. Visually hidden in the styled tier.
  * @csspart table - The grid.
  *
@@ -41,8 +42,19 @@ import '../../table/index.js';
  * short result keeps the full box with space below it.
  * @cssproperty --data-table-color - The text color of a cell.
  * @cssproperty --data-table-columns - The grid track list for the columns. It overrides the list worked out from the columns.
+ * @cssproperty --data-table-drag-preview-background-color - The fill behind the copy of a row a pointer drags.
+ * @cssproperty --data-table-drag-preview-border-color - The color of the edge around the copy of a row a pointer drags.
+ * @cssproperty --data-table-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 --data-table-drag-preview-opacity - The opacity of the copy of a row a pointer drags.
+ * @cssproperty --data-table-drag-preview-radius - The corner radius of the copy of a row a pointer drags.
+ * @cssproperty --data-table-drag-preview-shadow - The shadow that raises the copy of a row a pointer drags over the page.
+ * @cssproperty --data-table-dragging-opacity - The opacity of a row being moved, with `reorderable-rows`.
+ * @cssproperty --data-table-drop-indicator-color - The color of the line where a moved row would land.
+ * @cssproperty --data-table-drop-indicator-size - The thickness of the line where a moved row would land.
  * @cssproperty --data-table-footer-gap - The space between the grid and the footer below it.
  * @cssproperty --data-table-footer-item-gap - The space between the pieces of the footer, such as a summary and the pagination.
+ * @cssproperty --data-table-grip-color - The color of a row's grip, with `reorderable-rows`.
+ * @cssproperty --data-table-grip-disabled-opacity - The opacity of a row's grip while a sort decides the order.
  * @cssproperty --data-table-heading-background-color - The fill behind a heading while `windowed`.
  * It is opaque, because rows scroll under the sticky heading. Unset otherwise.
  * @cssproperty --data-table-heading-color - The text color of a heading.

package/dist/element-events.generated.js

@@ -67,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',
@@ -132,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',
@@ -227,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'],
@@ -258,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/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.d.ts

@@ -20,6 +20,15 @@ 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.
  */

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,7 +1,9 @@
 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);}[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"],

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.
  *
@@ -32,6 +31,7 @@ import '../notification/notification.js';
  * @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.
@@ -39,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 {

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

@@ -6,14 +6,26 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessNotifications } from '@fusion.dev/helix-headless/notifications';
+import { property } from 'lit/decorators.js';
 import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
 import { styles as liveStyles } from '../../shared/live/live.css.js';
+import { HelixNotification } from '../notification/notification.js';
 import { styles } from './notifications-root.css.js';
-import '../notification/notification.js';
 let HelixNotifications = class HelixNotifications extends HelixHeadlessNotifications {
     static { this.tier = 'helix-'; }
     static { this.styles = [liveStyles, collectionStateStyles, styles]; }
+    updated(changed) {
+        super.updated(changed);
+        for (const item of this.items) {
+            if (item instanceof HelixNotification) {
+                item.feedSeparation = this.separation;
+            }
+        }
+    }
 };
+__decorate([
+    property({ reflect: true })
+], HelixNotifications.prototype, "separation", void 0);
 HelixNotifications = __decorate([
     customElement('helix-notifications')
 ], HelixNotifications);

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

@@ -63,6 +63,11 @@ import { type OrbState } from '../shapes.js';
  * @cssstate working - The orb shows `working`.
  */
 export declare class HelixOrb extends HelixElement {
+    /**
+     * The key this family's words are registered under, its tag:
+     * `registerWords('de', { 'helix-orb': { stateLabels: { thinking: 'Denkt nach' } } })`.
+     */
+    static words: string;
     static styles: CSSResultGroup;
     /**
      * Says each new state politely, such as "Working" and then "Done".

package/dist/orb/root/orb-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, hostAria, PaintGateController, readColor, wordsConverter, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria, PaintGateController, readColor, words, wordsConverter, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styles as liveStyles } from '../../shared/live/live.css.js';
@@ -14,15 +14,6 @@ const MORPH_NEAR = 380;
 const MORPH_REACH = 580;
 const LIGHT_Y = 0.36;
 const STILL_PHASE = 1.4;
-const LABELS = {
-    connecting: 'Connecting',
-    done: 'Done',
-    fetching: 'Fetching',
-    listening: 'Listening',
-    thinking: 'Thinking',
-    waiting: 'Waiting',
-    working: 'Working',
-};
 const GRAY = [128, 128, 128];
 let HelixOrb = class HelixOrb extends HelixElement {
     constructor() {
@@ -30,7 +21,15 @@ let HelixOrb = class HelixOrb extends HelixElement {
         this.announce = false;
         this.label = '';
         this.state = 'thinking';
-        this.stateLabels = {};
+        this.stateLabels = {
+            connecting: 'Connecting',
+            done: 'Done',
+            fetching: 'Fetching',
+            listening: 'Listening',
+            thinking: 'Thinking',
+            waiting: 'Waiting',
+            working: 'Working',
+        };
         this.context = null;
         this.gate = new PaintGateController(this, {
             canRun: () => !!this.context && !this.lost,
@@ -69,6 +68,7 @@ let HelixOrb = class HelixOrb extends HelixElement {
             this.gate.play();
         };
     }
+    static { this.words = 'helix-orb'; }
     static { this.styles = [liveStyles, styles]; }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -95,7 +95,7 @@ let HelixOrb = class HelixOrb extends HelixElement {
             : 'thinking';
     }
     get word() {
-        return this.stateLabels?.[this.shown] || LABELS[this.shown];
+        return this.stateLabels?.[this.shown] ?? '';
     }
     render() {
         return html `<canvas part="canvas" aria-hidden="true"></canvas>${this.announce ? html `<span part="live">${this.word}</span>` : nothing}`;
@@ -264,6 +264,7 @@ __decorate([
     property()
 ], HelixOrb.prototype, "state", void 0);
 __decorate([
+    words,
     property({ attribute: 'state-labels', converter: wordsConverter })
 ], HelixOrb.prototype, "stateLabels", void 0);
 HelixOrb = __decorate([

package/dist/sandbox/preview/sandbox-preview.d.ts

@@ -80,6 +80,11 @@ export type PreviewMessage = PreviewConsole | PreviewPress | PreviewReady | Prev
  * @cssstate loading - While the frame's document loads, until it can take the example.
  */
 export declare class HelixSandboxPreview extends HelixElement {
+    /**
+     * The key this part's words are registered under, its tag:
+     * `registerWords('de', { 'helix-sandbox-preview': { label: 'Vorschau' } })`.
+     */
+    static words: string;
     /**
      * The color mode the frame renders in.
      *