@fusion.dev/helix 0.147.0 → 0.148.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,12 @@ 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-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/root/notifications-root.css.js

@@ -4,5 +4,5 @@ var(--notifications-rule, var(--helix-color-border));display: flex;gap: var(--he
 [part="footer"][data-empty] {display: none;}[part="list"] {overflow-y: auto;}[part="footer"] {border-block-start: var(--helix-border-thin) solid
 var(--notifications-rule, var(--helix-color-border));padding-block: var(--helix-space-sm);padding-inline: var(--notifications-padding-inline, var(--helix-space-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

@@ -20,15 +20,18 @@ 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-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.

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

@@ -1,37 +1,37 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {align-items: center;display: flex;flex-wrap: wrap;font-size: var(--helix-text-sm);gap: var(--pagination-gap, var(--helix-space-2xs));}[part="list"] {align-items: center;display: flex;flex-wrap: wrap;gap: var(--pagination-gap, var(--helix-space-2xs));list-style: none;margin: var(--helix-space-none);padding: var(--helix-space-none);}[part="item"] {display: inline-flex;}[part="first"],
+export const styles = createSheet(`:host {align-items: center;display: flex;flex-wrap: wrap;font-size: var(--pagination-font-size, var(--helix-text-sm));gap: var(--pagination-gap, var(--helix-space-2xs));}[part="list"] {align-items: center;display: flex;flex-wrap: wrap;gap: var(--pagination-gap, var(--helix-space-2xs));list-style: none;margin: var(--helix-space-none);padding: var(--helix-space-none);}[part="item"] {display: inline-flex;}[part="first"],
 [part="gap"],
 [part="last"],
 [part~="page"],
 [part="previous"],
-[part="next"] {align-items: center;appearance: none;background-color: transparent;block-size: var(--pagination-size, var(--helix-size-control-tight));border: var(--helix-border-thin) solid transparent;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;font: inherit;font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-medium);justify-content: center;min-inline-size: var(--pagination-size, var(--helix-size-control-tight));padding-inline: var(--helix-space-2xs);text-decoration: none;transition:
+[part="next"] {align-items: center;appearance: none;background-color: transparent;block-size: var(--pagination-size, var(--helix-size-control-tight));border: var(--helix-border-thin) solid transparent;border-radius: var(--pagination-radius, var(--helix-radii-sm));color: var(--pagination-foreground-color, var(--helix-color-foreground-muted));cursor: pointer;display: inline-flex;font: inherit;font-variant-numeric: tabular-nums;font-weight: var(--pagination-font-weight, var(--helix-weight-medium));justify-content: center;min-inline-size: var(--pagination-size, var(--helix-size-control-tight));padding-inline: var(--pagination-padding, var(--helix-space-2xs));text-decoration: none;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
 color var(--helix-duration-fast) var(--helix-easing-standard);}[part="first"]:hover,
 [part="gap"]:hover,
 [part="last"]:hover,
 [part~="page"]:hover,
 [part="previous"]:hover,
-[part="next"]:hover {background-color: var(--pagination-hover-color, var(--helix-color-surface-sunken));color: var(--helix-color-foreground);}[part="first"]:focus-visible,
+[part="next"]:hover {background-color: var(--pagination-hover-color, var(--helix-color-surface-sunken));color: var(--pagination-hover-foreground-color, var(--helix-color-foreground));}[part="first"]:focus-visible,
 [part="gap"]:focus-visible,
 [part="last"]:focus-visible,
 [part~="page"]:focus-visible,
 [part="previous"]:focus-visible,
 [part="next"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part~="page"][aria-current="page"],
-[part~="page"][aria-current="page"]:hover {background-color: var(--pagination-current-color, var(--helix-color-surface-raised));border-color: var(--helix-color-border);color: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold);}[part="first"]:disabled,
+[part~="page"][aria-current="page"]:hover {background-color: var(--pagination-current-color, var(--helix-color-surface-raised));border-color: var(--pagination-current-border-color, var(--helix-color-border));color: var(--pagination-current-foreground-color, var(--helix-color-foreground));font-weight: var(--pagination-current-font-weight, var(--helix-weight-semibold));}[part="first"]:disabled,
 [part="last"]:disabled,
 [part="previous"]:disabled,
 [part="next"]:disabled,
 [part="first"][aria-disabled="true"],
 [part="last"][aria-disabled="true"],
 [part="previous"][aria-disabled="true"],
-[part="next"][aria-disabled="true"] {color: var(--helix-color-foreground-subtle);cursor: default;opacity: 0.5;pointer-events: none;}[part="first"] svg,
+[part="next"][aria-disabled="true"] {color: var(--pagination-disabled-foreground-color, var(--helix-color-foreground-subtle));cursor: default;opacity: var(--pagination-disabled-opacity, 0.5);pointer-events: none;}[part="first"] svg,
 [part="last"] svg,
 [part="previous"] svg,
 [part="next"] svg,
 ::slotted([slot="first-icon"]),
 ::slotted([slot="last-icon"]),
 ::slotted([slot="previous-icon"]),
-::slotted([slot="next-icon"]) {block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight);}:host(:dir(rtl)) ::slotted([slot="first-icon"]),
+::slotted([slot="next-icon"]) {block-size: var(--pagination-icon-size, var(--helix-size-icon-tight));inline-size: var(--pagination-icon-size, var(--helix-size-icon-tight));}:host(:dir(rtl)) ::slotted([slot="first-icon"]),
 :host(:dir(rtl)) ::slotted([slot="last-icon"]),
 :host(:dir(rtl)) ::slotted([slot="previous-icon"]),
-:host(:dir(rtl)) ::slotted([slot="next-icon"]) {scale: -1 1;}[part="gap"] {color: var(--helix-color-foreground-subtle);user-select: none;}:host(:state(empty)) {display: none;}[part="status"] {color: var(--helix-color-foreground-muted);font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-medium);padding-inline: var(--helix-space-xs);}@media print {:host {display: none;}}`);
+:host(:dir(rtl)) ::slotted([slot="next-icon"]) {scale: -1 1;}[part="gap"] {color: var(--pagination-ellipsis-foreground-color, var(--helix-color-foreground-subtle));user-select: none;}:host(:state(empty)) {display: none;}[part="status"] {color: var(--pagination-status-foreground-color, var(--helix-color-foreground-muted));font-variant-numeric: tabular-nums;font-weight: var(--pagination-font-weight, var(--helix-weight-medium));padding-inline: var(--helix-space-xs);}@media print {:host {display: none;}}`);

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

@@ -35,10 +35,24 @@ import type { CSSResultGroup } from 'lit';
  * @csspart previous - The control that moves back one page.
  * @csspart status - The text that says which page you are on, in `compact`.
  *
+ * @cssproperty --pagination-current-border-color - Edge of the page you are on.
  * @cssproperty --pagination-current-color - Fill behind the page you are on.
+ * @cssproperty --pagination-current-font-weight - Weight of the number of the page you are on.
+ * @cssproperty --pagination-current-foreground-color - Color of the number of the page you are on.
+ * @cssproperty --pagination-disabled-foreground-color - Color of a first, previous, next or last control with nowhere to go.
+ * @cssproperty --pagination-disabled-opacity - How faint a control with nowhere to go is drawn.
+ * @cssproperty --pagination-ellipsis-foreground-color - Color of the control that stands in for hidden pages.
+ * @cssproperty --pagination-font-size - Size of the numbers and the status text.
+ * @cssproperty --pagination-font-weight - Weight of the numbers and the status text.
+ * @cssproperty --pagination-foreground-color - Color of the numbers and the marks on every control.
  * @cssproperty --pagination-gap - Space between one control and the next.
  * @cssproperty --pagination-hover-color - Fill behind a control under the pointer.
+ * @cssproperty --pagination-hover-foreground-color - Color of a control's number or mark under the pointer.
+ * @cssproperty --pagination-icon-size - Size of the mark on a first, previous, next or last control, drawn or slotted.
+ * @cssproperty --pagination-padding - Space either side of a control's number or mark.
+ * @cssproperty --pagination-radius - Corner radius of every control in the row.
  * @cssproperty --pagination-size - The box every control in the row takes.
+ * @cssproperty --pagination-status-foreground-color - Color of the text that says which page you are on, in `compact`.
  */
 export declare class HelixPagination extends HelixHeadlessPagination {
     static styles: CSSResultGroup;

package/dist/pagination/size/pagination-size.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: inline-flex;}:host(:state(empty)) {display: none;}[part="control"] {align-items: center;flex-direction: row;gap: var(--helix-space-xs);}[part="control"]::part(label) {padding-block-end: var(--helix-space-none);white-space: nowrap;}[part="control"]::part(trigger) {block-size: var(--helix-size-control-tight);}`);
+export const styles = createSheet(`:host {display: inline-flex;}:host(:state(empty)) {display: none;}[part="control"] {align-items: center;flex-direction: row;gap: var(--pagination-size-gap, var(--helix-space-xs));}[part="control"]::part(label) {padding-block-end: var(--helix-space-none);white-space: nowrap;}[part="control"]::part(trigger) {block-size: var(--pagination-size, var(--helix-size-control-tight));}`);

package/dist/pagination/size/pagination-size.d.ts

@@ -20,6 +20,9 @@ import '../../select/index.js';
  * @documentation https://fusion.dev/helix/components/pagination
  *
  * @csspart control - The select.
+ *
+ * @cssproperty --pagination-size - Height of the select's trigger, the same hook that sizes every control in the page row.
+ * @cssproperty --pagination-size-gap - Space between the label and the select.
  */
 export declare class HelixPaginationSize extends HelixHeadlessPaginationSize {
     static tier: string;

package/dist/pagination/summary/pagination-summary.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {color: var(--helix-color-foreground-subtle);display: inline-block;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-variant-numeric: tabular-nums;}`);
+export const styles = createSheet(`:host {color: var(--pagination-summary-foreground-color, var(--helix-color-foreground-subtle));display: inline-block;font-family: var(--helix-font-sans);font-size: var(--pagination-font-size, var(--helix-text-sm));font-variant-numeric: tabular-nums;}`);

package/dist/pagination/summary/pagination-summary.d.ts

@@ -11,6 +11,9 @@ import type { CSSResultGroup } from 'lit';
  * @status stable
  * @aliases Result count, Range
  * @documentation https://fusion.dev/helix/components/pagination
+ *
+ * @cssproperty --pagination-font-size - Size of the text, the same hook that sizes the page numbers.
+ * @cssproperty --pagination-summary-foreground-color - Color of the text.
  */
 export declare class HelixPaginationSummary extends HelixHeadlessPaginationSummary {
     static styles: CSSResultGroup;

package/dist/qr-code/root/qr-code-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_qr-size: var(--qr-code-size, 12rem);background-color: var(--qr-code-background-color, var(--helix-color-foreground-media));block-size: var(--_qr-size);border-radius: var(--helix-radii-sm);color: var(--qr-code-color, var(--helix-color-surface-media));display: block;inline-size: var(--_qr-size);position: relative;}[part="code"] {block-size: 100%;display: block;inline-size: 100%;}[part="fallback"] {align-items: center;block-size: 100%;box-sizing: border-box;display: flex;justify-content: center;overflow-wrap: anywhere;padding: var(--helix-space-md);text-align: center;}[part="finders"] {fill: var(--qr-code-finder-color, currentColor);}[part="logo"] {align-items: center;background-color: var(--qr-code-background-color, var(--helix-color-foreground-media));border-radius: var(--helix-radii-sm);box-sizing: border-box;display: flex;inset-block-start: 50%;inset-inline-start: 50%;justify-content: center;max-block-size: var(--qr-code-logo-size, 27%);max-inline-size: var(--qr-code-logo-size, 27%);min-block-size: var(--qr-code-logo-size, 27%);min-inline-size: var(--qr-code-logo-size, 27%);padding: var(--qr-code-logo-padding, 6%);position: absolute;translate: -50% -50%;}[part="logo"] slot::slotted(*) {block-size: 100%;inline-size: 100%;object-fit: contain;}[part="logo"][hidden] {display: none;}@media print {:host {print-color-adjust: economy;}}`);
+export const styles = createSheet(`:host {--_qr-size: var(--qr-code-size, 12rem);background-color: var(--qr-code-background-color, var(--helix-color-foreground-media));block-size: var(--_qr-size);border-radius: var(--qr-code-radius, var(--helix-radii-sm));color: var(--qr-code-color, var(--helix-color-surface-media));display: block;inline-size: var(--_qr-size);position: relative;}[part="code"] {block-size: 100%;display: block;inline-size: 100%;}[part="fallback"] {align-items: center;block-size: 100%;box-sizing: border-box;display: flex;justify-content: center;overflow-wrap: anywhere;padding: var(--qr-code-fallback-padding, var(--helix-space-md));text-align: center;}[part="finders"] {fill: var(--qr-code-finder-color, currentColor);}[part="logo"] {align-items: center;background-color: var(--qr-code-background-color, var(--helix-color-foreground-media));border-radius: var(--qr-code-logo-radius, var(--helix-radii-sm));box-sizing: border-box;display: flex;inset-block-start: 50%;inset-inline-start: 50%;justify-content: center;max-block-size: var(--qr-code-logo-size, 27%);max-inline-size: var(--qr-code-logo-size, 27%);min-block-size: var(--qr-code-logo-size, 27%);min-inline-size: var(--qr-code-logo-size, 27%);padding: var(--qr-code-logo-padding, 6%);position: absolute;translate: -50% -50%;}:host(:dir(rtl)) [part="logo"] {translate: 50% -50%;}[part="logo"] slot::slotted(*) {block-size: 100%;inline-size: 100%;object-fit: contain;}[part="logo"][hidden] {display: none;}@media print {:host {print-color-adjust: economy;}}`);

package/dist/qr-code/root/qr-code-root.d.ts

@@ -19,11 +19,14 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --qr-code-background-color - The fill behind the modules, including the quiet zone and the logo's box.
  * @cssproperty --qr-code-color - Color of the dark modules. Defaults to the dark media ink, which is the same in both color schemes so the code scans.
+ * @cssproperty --qr-code-fallback-padding - The space around the fallback inside the square.
  * @cssproperty --qr-code-finder-color - Color of the three corner squares. Defaults
  * to the color of the modules.
  * @cssproperty --qr-code-logo-padding - The clear space around the center logo.
+ * @cssproperty --qr-code-logo-radius - The corner radius of the logo's box.
  * @cssproperty --qr-code-logo-size - How much of the center a logo can cover.
  * Defaults to `27%`, which `H` correction allows, because it can lose thirty percent.
+ * @cssproperty --qr-code-radius - The corner radius of the square.
  * @cssproperty --qr-code-size - How wide the square is. Defaults to `12rem`.
  */
 export declare class HelixQrCode extends HelixHeadlessQrCode {

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

@@ -194,7 +194,15 @@ export declare class HelixSandboxPreview extends HelixElement {
      * thing on the page already entitled to both.
      */
     private static readonly target;
-    /** Holds a coalesced send, so only one is ever queued, and drops it on disconnect. */
+    /**
+     * Holds a coalesced send, so only one is ever queued, and drops it on
+     * disconnect.
+     *
+     * **It renders nothing**, so it asks for no update when its wait starts or
+     * ends. One that did sent the source at once from that update, ahead of the
+     * wait, and the send at the end of the wait then cleared `failed` after the
+     * error it should have reported.
+     */
     private readonly settle;
     /**
      * Sends once the typing stops, replacing anything already waiting.

package/dist/sandbox/preview/sandbox-preview.js

@@ -44,7 +44,7 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
                 this.dispatchEvent(new HelixResizeEvent({ size: event.data.size }));
             }
         };
-        this.settle = new DelayController(this);
+        this.settle = new DelayController(this, { renders: false });
     }
     static { HelixSandboxPreview_1 = this; }
     get frame() {

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

@@ -1,6 +1,9 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {display: flex;flex-direction: column;gap: var(--helix-space-2xs);position: relative;}[part="trigger"] {all: unset;align-items: center;background-color: var(--helix-color-well);block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);cursor: pointer;display: flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);gap: var(--helix-space-xs);justify-content: space-between;padding-inline: var(--helix-space-xs);transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:not(:disabled)) [part="trigger"]:hover {border-color: var(--helix-color-primary);}[part="trigger"]: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="trigger"],
 :host(:state(invalid)) [part="trigger"]:hover,
-:host(:state(invalid)) [part="trigger"]:focus-visible {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger);}:host(:disabled) [part="trigger"] {cursor: not-allowed;opacity: 0.5;}:host([emphasis="ghost"]) {inline-size: fit-content;}:host([emphasis="ghost"]) [part="trigger"] {background-color: transparent;block-size: var(--helix-size-control-tight);border-color: transparent;justify-content: start;padding-inline: var(--helix-space-2xs);}:host([emphasis="ghost"]:not(:disabled)) [part="trigger"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);border-color: transparent;}:host([emphasis="ghost"]) [part="trigger"]:focus-visible {border-color: var(--helix-color-primary);}[part="value"] {flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}[part="surface"] {--_floating-border-color: var(--select-border-color, var(--helix-color-border));--_floating-border-width: var(--select-border-width, var(--helix-border-floating));--_floating-shadow: var(--select-shadow, var(--helix-shadow-floating));--option-radius: var(--helix-radii-none);inline-size: var(--floating-anchor-inline-size, 100%);min-inline-size: max-content;max-block-size: var(--floating-available-block-size, none);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-none);}[part="indicator"],
+:host(:state(invalid)) [part="trigger"]:focus-visible {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger);}:host(:disabled) [part="trigger"] {cursor: not-allowed;opacity: 0.5;}:host([emphasis="ghost"]) {inline-size: fit-content;}:host([emphasis="ghost"]) [part="trigger"] {background-color: transparent;block-size: var(--helix-size-control-tight);border-color: transparent;justify-content: start;padding-inline: var(--helix-space-2xs);}:host([emphasis="ghost"]:not(:disabled)) [part="trigger"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);border-color: transparent;}:host([emphasis="ghost"]) [part="trigger"]:focus-visible {border-color: var(--helix-color-primary);}[part="value"] {flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}[part="surface"] {--_floating-border-color: var(--select-border-color, var(--helix-color-border));--_floating-border-width: var(--select-border-width, var(--helix-border-floating));--_floating-shadow: var(--select-shadow, var(--helix-shadow-floating));--option-radius: var(--helix-radii-none);inline-size: max-content;max-inline-size: calc(100vw - var(--helix-space-xs) * 2);min-inline-size: min(
+var(--floating-anchor-inline-size, 100%),
+calc(100vw - var(--helix-space-xs) * 2)
+);max-block-size: var(--floating-available-block-size, none);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-none);}[part="indicator"],
 ::slotted([slot="indicator"]) {transition: scale var(--helix-duration-fast) var(--helix-easing-standard);}:host(:state(open)) [part="indicator"],
 :host(:state(open)) ::slotted([slot="indicator"]) {scale: 1 -1;}[part="listbox"]::part(items) {background-color: transparent;border: none;border-radius: var(--helix-radii-none);max-block-size: var(--select-surface-max-block-size, 14rem);padding: var(--helix-space-none);}[part="listbox"]::part(items):focus-visible {outline: none;}[part="indicator"] {block-size: var(--helix-size-icon-tight);color: var(--helix-color-foreground-muted);flex: 0 0 auto;inline-size: var(--helix-size-icon-tight);}@media print {:host {print-color-adjust: exact;}}`);

package/dist/select/root/select-root.js

@@ -11,12 +11,14 @@ import { styles as fieldStyles } from '../../shared/field/field.css.js';
 import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
 import { styles as floatingEntranceStyles } from '../../shared/floating/entrance.css.js';
 import { styles as floatingPanelStyles } from '../../shared/floating/panel.css.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './select-root.css.js';
 import '../../listbox/index.js';
 import '../../option/index.js';
 let HelixSelect = class HelixSelect extends HelixHeadlessSelect {
     static { this.tier = 'helix-'; }
     static { this.styles = [
+        liveStyles,
         fieldStyles,
         fieldStackedStyles,
         floatingPanelStyles,

package/dist/shared/viewport/viewport.css.js

@@ -8,7 +8,7 @@ export const styles = createSheet(`[part="controls"] {display: grid;gap: var(--h
 ".      down  full";}[part="controls"]:not(:has([part="pan-up"])) {grid-template-areas:
 "zoomin"
 "zoomout"
-"full";}:host(:fullscreen) {display: block;}:host(:state(fullscreen)) [part="region"] {block-size: 100dvh;border: none;border-radius: 0;}:host([controls-placement="top-end"]) [part="controls"] {inset-block: var(--helix-space-sm) auto;inset-inline: auto var(--helix-space-sm);}:host([controls-placement="top-start"]) [part="controls"] {inset-block: var(--helix-space-sm) auto;inset-inline: var(--helix-space-sm) auto;}:host([controls-placement="bottom-end"]) [part="controls"] {inset-block: auto var(--helix-space-sm);inset-inline: auto var(--helix-space-sm);}:host([controls-placement="bottom-start"]) [part="controls"] {inset-block: auto var(--helix-space-sm);inset-inline: var(--helix-space-sm) auto;}[part="pan-up"] {grid-area: up;}[part="pan-down"] {grid-area: down;}[part="pan-start"] {grid-area: start;}[part="pan-end"] {grid-area: end;}[part="zoom-in"] {grid-area: zoomin;}[part="zoom-out"] {grid-area: zoomout;}[part="fullscreen"] {grid-area: full;}[part="controls"] button {align-items: center;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);block-size: var(--helix-size-control-sm);color: var(--helix-color-foreground);cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);inline-size: var(--helix-size-control-sm);justify-content: center;padding: 0;}[part="controls"] button:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="controls"] button:hover {background-color: color-mix(
+"full";}:host(:fullscreen) {display: block;}:host(:state(fullscreen)) [part="region"] {block-size: 100dvh;border: none;border-radius: 0;}:host([controls-placement="top-end"]) [part="controls"] {inset-block: var(--helix-space-sm) auto;inset-inline: auto var(--helix-space-sm);}:host([controls-placement="top-start"]) [part="controls"] {inset-block: var(--helix-space-sm) auto;inset-inline: var(--helix-space-sm) auto;}:host([controls-placement="bottom-end"]) [part="controls"] {inset-block: auto var(--helix-space-sm);inset-inline: auto var(--helix-space-sm);}:host([controls-placement="bottom-start"]) [part="controls"] {inset-block: auto var(--helix-space-sm);inset-inline: var(--helix-space-sm) auto;}[part="pan-up"] {grid-area: up;}[part="pan-down"] {grid-area: down;}[part="pan-start"] {grid-area: start;}[part="pan-end"] {grid-area: end;}[part="zoom-in"] {grid-area: zoomin;}[part="zoom-out"] {grid-area: zoomout;}[part="fullscreen"] {grid-area: full;}[part="controls"] button {align-items: center;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);block-size: var(--helix-size-control-sm);color: var(--helix-color-foreground);cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);inline-size: var(--helix-size-control-sm);justify-content: center;padding: 0;}[part="controls"] button ::slotted(*) {--icon-size: var(--helix-size-icon-sm);block-size: var(--helix-size-icon-sm);inline-size: var(--helix-size-icon-sm);}[part="controls"] button:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="controls"] button:hover {background-color: color-mix(
 in oklab,
 var(--helix-color-foreground) 10%,
 var(--viewport-control-background-color, var(--helix-color-surface-overlay))

package/dist/speed-dial/group/speed-dial-group.css.d.ts

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

package/dist/speed-dial/group/speed-dial-group.css.js

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {display: block;}[part="group"] {align-items: var(--_speed-dial-align, flex-end);display: flex;flex-direction: column;gap: var(--speed-dial-gap, var(--helix-space-sm));}[part="label"] {background-color: var(--speed-dial-label-background-color, var(--helix-color-surface-overlay));border-radius: var(--helix-radii-sm);color: var(--speed-dial-group-label-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--speed-dial-group-label-font-size, var(--helix-text-xs));font-weight: var(--helix-weight-medium);padding: var(--helix-space-2xs) var(--helix-space-xs);white-space: nowrap;}[part="label"][hidden] {display: none;}`);

package/dist/speed-dial/group/speed-dial-group.d.ts

@@ -0,0 +1,27 @@
+import { HelixHeadlessSpeedDialGroup } from '@fusion.dev/helix-headless/speed-dial';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A named set of actions inside a speed dial, set apart from the rest.
+ *
+ * @description
+ * A column of actions with its name above them, in the small muted words a
+ * menu heads its sections with, lined up on the side the trigger is on. The
+ * space between two groups is the space between two actions.
+ *
+ * @since 0.141.0
+ * @status stable
+ * @category actions
+ * @aliases Speed dial section, Action group
+ * @documentation https://fusion.dev/helix/components/speed-dial
+ *
+ * @cssproperty --speed-dial-group-label-color - Color of the group's name.
+ * @cssproperty --speed-dial-group-label-font-size - Size of the group's name.
+ */
+export declare class HelixSpeedDialGroup extends HelixHeadlessSpeedDialGroup {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-speed-dial-group': HelixSpeedDialGroup;
+    }
+}

package/dist/speed-dial/group/speed-dial-group.js

@@ -0,0 +1,16 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessSpeedDialGroup } from '@fusion.dev/helix-headless/speed-dial';
+import { styles } from './speed-dial-group.css.js';
+let HelixSpeedDialGroup = class HelixSpeedDialGroup extends HelixHeadlessSpeedDialGroup {
+    static { this.styles = styles; }
+};
+HelixSpeedDialGroup = __decorate([
+    customElement('helix-speed-dial-group')
+], HelixSpeedDialGroup);
+export { HelixSpeedDialGroup };

package/dist/speed-dial/index.d.ts

@@ -1,2 +1,3 @@
+export * from './group/speed-dial-group.js';
 export * from './item/speed-dial-item.js';
 export * from './root/speed-dial-root.js';

package/dist/speed-dial/index.js

@@ -1,2 +1,3 @@
+export * from './group/speed-dial-group.js';
 export * from './item/speed-dial-item.js';
 export * from './root/speed-dial-root.js';

package/dist/speed-dial/item/speed-dial-item.css.js

@@ -5,4 +5,4 @@ box-shadow var(--helix-duration-fast) var(--helix-easing-standard);}[part="item"
 --speed-dial-item-hover-background-color,
 color-mix(in oklab, var(--helix-color-foreground) 6%, var(--helix-color-surface-overlay))
 );box-shadow: var(--helix-shadow-lg);}[part="item"]:focus-visible {outline: none;}[part="item"]:focus-visible [part="icon"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="label"] {background-color: var(--speed-dial-label-background-color, var(--helix-color-surface-overlay));border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-sm);color: var(--speed-dial-label-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--speed-dial-label-font-size, var(--helix-text-sm));font-weight: var(--helix-weight-medium);opacity: var(--_speed-dial-label-opacity, 1);padding: var(--helix-space-2xs) var(--helix-space-xs);transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);white-space: nowrap;}[part="item"]:hover [part="label"],
-[part="item"]:focus-visible [part="label"] {opacity: 1;}`);
+[part="item"]:focus-visible [part="label"] {opacity: 1;}[part="shortcut"] {color: var(--speed-dial-shortcut-color, var(--helix-color-foreground-muted));margin-inline-start: var(--helix-space-sm);}[part="shortcut"][hidden] {display: none;}`);

package/dist/speed-dial/item/speed-dial-item.d.ts

@@ -22,6 +22,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --speed-dial-label-background-color - Fill of the chip holding the action's name.
  * @cssproperty --speed-dial-label-color - Color of the action's name.
  * @cssproperty --speed-dial-label-font-size - Size of the action's name.
+ * @cssproperty --speed-dial-shortcut-color - Color of the shortcut drawn after the action's name.
  */
 export declare class HelixSpeedDialItem extends HelixHeadlessSpeedDialItem {
     static styles: CSSResultGroup;

package/dist/speed-dial/root/speed-dial-root.css.js

@@ -1,5 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: inline-flex;}[part="actions"] {background-color: transparent;border: none;display: flex;flex-direction: column;gap: var(--speed-dial-gap, var(--helix-space-sm));margin: var(--helix-space-none);overflow: visible;padding: var(--helix-space-none);}[part="actions"] {--_speed-dial-row: row-reverse;align-items: flex-end;}[part="actions"][data-placement$="-start"] {--_speed-dial-row: row;align-items: flex-start;}[part="actions"][hidden] {display: none;}[part="actions"] {--_dial-from: var(--speed-dial-travel, var(--helix-space-md));}[part="actions"][data-placement^="bottom"] {--_dial-from: calc(var(--speed-dial-travel, var(--helix-space-md)) * -1);}[part="actions"] ::slotted(*) {opacity: 0;scale: 0.8;transition:
+export const styles = createSheet(`:host {display: inline-flex;}[part="actions"] {background-color: transparent;border: none;display: flex;flex-direction: column;gap: var(--speed-dial-gap, var(--helix-space-sm));margin: var(--helix-space-none);overflow: visible;padding: var(--helix-space-none);}[part="actions"] {--_speed-dial-row: row-reverse;align-items: flex-end;}[part="actions"][data-placement$="-start"] {--_speed-dial-align: flex-start;--_speed-dial-row: row;align-items: flex-start;}[part="actions"][hidden] {display: none;}[part="actions"] {--_dial-from: var(--speed-dial-travel, var(--helix-space-md));}[part="actions"][data-placement^="bottom"] {--_dial-from: calc(var(--speed-dial-travel, var(--helix-space-md)) * -1);}[part="actions"] ::slotted(*) {opacity: 0;scale: 0.8;transition:
 opacity var(--helix-duration-fast) var(--helix-easing-standard),
 scale var(--helix-duration-fast) var(--helix-easing-emphasized),
 translate var(--helix-duration-fast) var(--helix-easing-emphasized);translate: 0 var(--_dial-from);}[part="actions"][data-placed] ::slotted(*) {opacity: 1;scale: 1;translate: 0 0;}[part="actions"] {--_speed-dial-stagger: var(--speed-dial-stagger, calc(var(--helix-duration-fast) / 3));}[part="actions"][data-placed] ::slotted(:nth-last-child(2)) {transition-delay: var(--_speed-dial-stagger);}[part="actions"][data-placed] ::slotted(:nth-last-child(3)) {transition-delay: calc(var(--_speed-dial-stagger) * 2);}[part="actions"][data-placed] ::slotted(:nth-last-child(4)) {transition-delay: calc(var(--_speed-dial-stagger) * 3);}[part="actions"][data-placed] ::slotted(:nth-last-child(n + 5)) {transition-delay: calc(var(--_speed-dial-stagger) * 4);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(2)) {transition-delay: var(--_speed-dial-stagger);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(3)) {transition-delay: calc(var(--_speed-dial-stagger) * 2);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(4)) {transition-delay: calc(var(--_speed-dial-stagger) * 3);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(n + 5)) {transition-delay: calc(var(--_speed-dial-stagger) * 4);}@media (prefers-reduced-motion: reduce) {[part="actions"] ::slotted(*) {opacity: 1;scale: 1;transition: none;transition-delay: 0s;translate: 0 0;}[part="trigger"] {transition: none;}}[part="trigger"] {--icon-size: var(--helix-size-icon);all: unset;align-items: center;background-color: var(--speed-dial-background-color, var(--helix-color-primary-surface));block-size: var(--speed-dial-size, var(--helix-size-control));border-radius: var(--helix-radii-full);box-shadow: var(--speed-dial-shadow, var(--helix-shadow-md));box-sizing: border-box;color: var(--speed-dial-color, var(--helix-color-foreground-on-primary));cursor: pointer;display: inline-flex;inline-size: var(--speed-dial-size, var(--helix-size-control));justify-content: center;transition: box-shadow var(--helix-duration-fast) var(--helix-easing-standard);}[part="trigger"]:hover {box-shadow: var(--helix-shadow-lg);}[part="trigger"]:active {box-shadow: var(--helix-shadow-sm);}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}@media print {:host {display: none;}}:host([labels="hover"]) {--_speed-dial-label-opacity: 0;}:host([labels="hover"]) [part="actions"],

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

@@ -1,22 +1,30 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: flex;min-block-size: 0;min-inline-size: 0;position: relative;}:host(:is([orientation="vertical"], [data-axis="vertical"])) {flex-direction: column;}[part="start"] {flex: 0 0 var(--splitter-position, 50%);min-block-size: 0;min-inline-size: 0;overflow: auto;}[part="end"] {flex: 1 1 0;min-block-size: 0;min-inline-size: 0;overflow: auto;}[part="separator"] {background-color: transparent;box-sizing: border-box;cursor: col-resize;flex: none;inline-size: var(--splitter-target, var(--helix-space-xs));margin-inline: calc(var(--splitter-target, var(--helix-space-xs)) / -2);position: relative;touch-action: none;user-select: none;z-index: var(--helix-layer-raised);}[part="separator"]::before {background-color: var(--splitter-color, var(--helix-color-border));content: "";inline-size: var(--helix-border-thin);inset-block: 0;inset-inline-start: 50%;margin-inline-start: calc(var(--helix-border-thin) / -2);position: absolute;transition:
+export const styles = createSheet(`:host {display: flex;min-block-size: 0;min-inline-size: 0;position: relative;}:host(:is([orientation="vertical"], [data-axis="vertical"])) {flex-direction: column;}[part="start"] {flex: 0 0 var(--splitter-position, 50%);min-block-size: 0;min-inline-size: 0;overflow: auto;}[part="end"] {flex: 1 1 0;min-block-size: 0;min-inline-size: 0;overflow: auto;}[part="separator"] {background-color: transparent;box-sizing: border-box;cursor: col-resize;display: grid;flex: none;place-content: center;place-items: center;inline-size: var(--splitter-target, var(--helix-space-xs));margin-inline: calc(var(--splitter-target, var(--helix-space-xs)) / -2);position: relative;touch-action: none;user-select: none;z-index: var(--helix-layer-raised);}[part="separator"]::before {background-color: var(--splitter-color, var(--helix-color-border));content: "";inline-size: var(--splitter-thickness, var(--helix-border-thin));inset-block: 0;inset-inline-start: 50%;margin-inline-start: calc(var(--splitter-thickness, var(--helix-border-thin)) / -2);position: absolute;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-inline-size var(--helix-duration-fast) var(--helix-easing-standard);}:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="separator"] {block-size: var(--splitter-target, var(--helix-space-xs));cursor: row-resize;inline-size: auto;margin-block: calc(var(--splitter-target, var(--helix-space-xs)) / -2);margin-inline: 0;}:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="separator"]::before {block-size: var(--helix-border-thin);inline-size: auto;inset-block-start: 50%;inset-inline: 0;margin-block-start: calc(var(--helix-border-thin) / -2);transition:
+inline-size var(--helix-duration-fast) var(--helix-easing-standard);}:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="separator"] {block-size: var(--splitter-target, var(--helix-space-xs));cursor: row-resize;inline-size: auto;margin-block: calc(var(--splitter-target, var(--helix-space-xs)) / -2);margin-inline: 0;}:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="separator"]::before {block-size: var(--splitter-thickness, var(--helix-border-thin));inline-size: auto;inset-block-start: 50%;inset-inline: 0;margin-block-start: calc(var(--splitter-thickness, var(--helix-border-thin)) / -2);transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
 block-size var(--helix-duration-fast) var(--helix-easing-standard);}[part="separator"]:hover,
 [part="separator"]:focus-visible,
 [part="separator"][data-dragging] {z-index: calc(var(--helix-layer-raised) + 1);}[part="separator"][data-flush]::before {background-color: transparent;}:host(:not([variant="grip"])) [part="separator"]:hover::before,
 :host(:not([variant="grip"])) [part="separator"]:focus-visible::before,
-:host(:not([variant="grip"])) [part="separator"][data-dragging]::before {background-color: var(--splitter-hover-color, var(--helix-color-foreground-muted));inline-size: var(--helix-border-thick);}:host(:not([variant="grip"])) [part="separator"][data-dragging]::before {background-color: var(--splitter-drag-color, var(--helix-color-primary));}:host(:is([orientation="vertical"], [data-axis="vertical"]):not([variant="grip"]))
+:host(:not([variant="grip"])) [part="separator"][data-dragging]::before {background-color: var(--splitter-hover-color, var(--helix-color-foreground-muted));inline-size: var(--splitter-hover-thickness, var(--helix-border-thick));}:host(:not([variant="grip"])) [part="separator"][data-dragging]::before {background-color: var(--splitter-drag-color, var(--helix-color-primary));}:host(:is([orientation="vertical"], [data-axis="vertical"]):not([variant="grip"]))
 [part="separator"]:hover::before,
 :host(:is([orientation="vertical"], [data-axis="vertical"]):not([variant="grip"]))
 [part="separator"]:focus-visible::before,
 :host(:is([orientation="vertical"], [data-axis="vertical"]):not([variant="grip"]))
-[part="separator"][data-dragging]::before {block-size: var(--helix-border-thick);inline-size: auto;}[part="separator"]:focus-visible {outline: none;}[part="separator"]:focus-visible::before {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="corner"] {block-size: var(--splitter-corner, var(--helix-space-md));cursor: move;inline-size: var(--splitter-corner, var(--helix-space-md));inset-block-start: var(--splitter-corner-at);inset-inline-start: var(--splitter-position);margin-block-start: calc(var(--splitter-corner, var(--helix-space-md)) / -2);margin-inline-start: calc(var(--splitter-corner, var(--helix-space-md)) / -2);position: absolute;touch-action: none;user-select: none;z-index: calc(var(--helix-layer-raised) + 2);}:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="corner"] {inset-block-start: var(--splitter-position);inset-inline-start: var(--splitter-corner-at);}[part="corner"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([variant="grip"]) [part="separator"]::after {background-color: var(--splitter-grip-color, var(--helix-color-foreground-muted));border-radius: var(--helix-radii-full);content: "";opacity: 0;position: absolute;transition:
+[part="separator"][data-dragging]::before {block-size: var(--splitter-hover-thickness, var(--helix-border-thick));inline-size: auto;}[part="separator"]:focus-visible {outline: none;}[part="separator"]:focus-visible::before {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="corner"] {block-size: var(--splitter-corner, var(--helix-space-md));cursor: move;inline-size: var(--splitter-corner, var(--helix-space-md));inset-block-start: var(--splitter-corner-at);inset-inline-start: var(--splitter-position);margin-block-start: calc(var(--splitter-corner, var(--helix-space-md)) / -2);margin-inline-start: calc(var(--splitter-corner, var(--helix-space-md)) / -2);position: absolute;touch-action: none;user-select: none;z-index: calc(var(--helix-layer-raised) + 2);}:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="corner"] {inset-block-start: var(--splitter-position);inset-inline-start: var(--splitter-corner-at);}[part="corner"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([variant="grip"]) [part="separator"]::after {background-color: var(--splitter-grip-color, var(--helix-color-foreground-muted));border-radius: var(--helix-radii-full);content: "";opacity: 0;position: absolute;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
 opacity var(--helix-duration-fast) var(--helix-easing-standard);}:host([variant="grip"]:not(:is([orientation="vertical"], [data-axis="vertical"])))
-[part="separator"]::after {block-size: var(--splitter-grip-length, 2rem);inline-size: var(--helix-border-thick);inset-block-start: calc(50% - var(--splitter-grip-length, 2rem) / 2);inset-inline-start: calc(50% - var(--helix-border-thick) - var(--helix-space-2xs));}:host([variant="grip"]:is([orientation="vertical"], [data-axis="vertical"]))
-[part="separator"]::after {block-size: var(--helix-border-thick);inline-size: var(--splitter-grip-length, 2rem);inset-block-start: calc(50% - var(--helix-border-thick) - var(--helix-space-2xs));inset-inline-start: calc(50% - var(--splitter-grip-length, 2rem) / 2);}:host([variant="grip"]) [part="separator"]:hover::after,
+[part="separator"]::after {block-size: var(--splitter-grip-length, 2rem);inline-size: var(--splitter-grip-thickness, var(--helix-border-thick));inset-block-start: calc(50% - var(--splitter-grip-length, 2rem) / 2);inset-inline-start: calc(
+50% -
+var(--splitter-grip-thickness, var(--helix-border-thick)) -
+var(--helix-space-2xs)
+);}:host([variant="grip"]:is([orientation="vertical"], [data-axis="vertical"]))
+[part="separator"]::after {block-size: var(--splitter-grip-thickness, var(--helix-border-thick));inline-size: var(--splitter-grip-length, 2rem);inset-block-start: calc(
+50% -
+var(--splitter-grip-thickness, var(--helix-border-thick)) -
+var(--helix-space-2xs)
+);inset-inline-start: calc(50% - var(--splitter-grip-length, 2rem) / 2);}:host([variant="grip"]) [part="separator"]:hover::after,
 :host([variant="grip"]) [part="separator"]:focus-visible::after,
-:host([variant="grip"]) [part="separator"][data-dragging]::after {opacity: 1;}:host([variant="grip"]) [part="separator"][data-dragging]::after {background-color: var(--splitter-drag-color, var(--helix-color-primary));}[part="start"][data-dragging],
+:host([variant="grip"]) [part="separator"][data-dragging]::after {opacity: 1;}:host([variant="grip"]) [part="separator"][data-dragging]::after {background-color: var(--splitter-drag-color, var(--helix-color-primary));}::slotted([slot="handle"]) {color: var(--splitter-handle-color, var(--helix-color-foreground-muted));pointer-events: none;position: relative;}[part="start"][data-dragging],
 [part="end"][data-dragging] {pointer-events: none;}@media print {:host {overflow: visible;}}`);

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

@@ -38,8 +38,12 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --splitter-drag-color - Color of the line while it is being moved.
  * @cssproperty --splitter-grip-color - Color of the grip beside the line, when the grip is shown.
  * @cssproperty --splitter-grip-length - How far the grip runs along the divider.
+ * @cssproperty --splitter-grip-thickness - How thick the grip is, across the divider.
+ * @cssproperty --splitter-handle-color - Color of a mark slotted into `handle`.
  * @cssproperty --splitter-hover-color - Color of the divider's target under the pointer.
+ * @cssproperty --splitter-hover-thickness - How thick the line is under the pointer, with focus and while it moves.
  * @cssproperty --splitter-target - Width of the area you can drag.
+ * @cssproperty --splitter-thickness - How thick the line is at rest.
  */
 export declare class HelixSplitter extends HelixHeadlessSplitter {
     /**

package/dist/table/cell/table-cell.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;color: var(--helix-color-foreground);display: flex;font-size: var(--helix-text-sm);justify-content: var(--table-cell-align);min-block-size: var(--helix-size-control);min-inline-size: 0;overflow-wrap: anywhere;padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-none) var(--helix-space-md);text-align: var(--table-cell-align);}:host(:state(text)) slot {display: block;min-inline-size: 0;}::slotted(*) {min-inline-size: 0;}:host([header]) {font-weight: var(--helix-weight-medium);}`);
+export const styles = createSheet(`:host {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;color: var(--helix-color-foreground);display: flex;font-size: var(--helix-text-sm);justify-content: var(--table-cell-align);min-block-size: var(--helix-size-control);min-inline-size: 0;overflow-wrap: anywhere;padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-none) var(--helix-space-md);text-align: var(--table-cell-align);}:host(:state(text)) slot {display: block;min-inline-size: 0;}::slotted(*) {min-inline-size: 0;}:host([header]) {font-weight: var(--helix-weight-medium);}:host(:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}`);

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;overflow-x: auto;}[part="table"] {display: grid;grid-template-columns: var(--table-columns, var(--table-template, minmax(0, 1fr)));inline-size: 100%;}[part="head"] {display: contents;}::slotted([slot="heading"]) {color: var(--table-title-color, var(--helix-color-foreground));display: block;font-family: var(--helix-font-sans);font-size: var(--table-title-text, var(--helix-text-md));font-weight: var(--helix-weight-semibold);margin-block: var(--helix-space-none) var(--table-title-gap, var(--helix-space-sm));}[part="select-all"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;display: flex;min-block-size: var(--helix-size-control-loose);padding-inline: var(--helix-space-none) var(--helix-space-md);}:host([loading]) [part="table"] {opacity: 0.5;}@media print {:host {print-color-adjust: economy;}}`);
+export const styles = createSheet(`:host {display: block;overflow-x: auto;}[part="table"] {display: grid;grid-template-columns: var(--table-columns, var(--table-template, minmax(0, 1fr)));inline-size: 100%;}[part="head"] {display: contents;}::slotted([slot="heading"]) {color: var(--table-title-color, var(--helix-color-foreground));display: block;font-family: var(--helix-font-sans);font-size: var(--table-title-text, var(--helix-text-md));font-weight: var(--helix-weight-semibold);margin-block: var(--helix-space-none) var(--table-title-gap, var(--helix-space-sm));}[part="select-all"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;display: flex;min-block-size: var(--helix-size-control-loose);padding-inline: var(--helix-space-none) var(--helix-space-md);}[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);}:host([loading]) [part="table"] {opacity: 0.5;}@media print {:host {print-color-adjust: economy;}}`);

package/dist/table/row/table-row.css.js

@@ -7,4 +7,4 @@ var(--helix-color-background)
 );}:host(:state(link)) ::slotted(*) {cursor: pointer;}:host(:state(link):hover) ::slotted(*) {background-color: var(
 --table-row-hover-background-color,
 color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)
-);}`);
+);}[part~="select"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}`);