@fusion.dev/helix 0.147.0 → 0.148.0

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

@@ -18,4 +18,4 @@ var(--_announcement-tint) 40%,
 var(--_announcement-ground)
 );}[part="content"] {flex: 1 1 auto;min-inline-size: 0;text-align: var(--announcement-text-align, center);}:host([dismissible]) [part="content"] {padding-inline: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2 + var(--helix-space-xs));}[part="actions"] slot::slotted(*) {margin-inline-start: var(--helix-space-md);}[part="actions"] {align-items: center;display: flex;flex: 0 0 auto;gap: var(--helix-space-xs);}[part="dismiss"] {all: unset;box-sizing: border-box;block-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);inline-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;flex: 0 0 auto;place-content: center;place-items: center;position: absolute;inset-inline-end: var(--announcement-inset, var(--helix-space-lg));transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-color var(--helix-duration-fast) var(--helix-easing-standard);}[part="dismiss"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground);}[part="dismiss"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}[part="dismiss"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="actions"][data-empty] {display: none;}@media print {:host {background-color: transparent;}}`);
+color var(--helix-duration-fast) var(--helix-easing-standard);}[part="dismiss"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground);}[part="dismiss"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}[part="dismiss"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="actions"][data-empty] {display: none;}:host(:state(waiting)) {display: none;}@media print {:host {background-color: transparent;}}`);

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;}[part="figure"] {margin: var(--helix-space-none);}[part="blockquote"] {display: block;margin: var(--helix-space-none);}slot:not([name]) {color: var(--blockquote-color, var(--helix-color-foreground-muted));font-family: var(--blockquote-font-family, var(--helix-font-display));font-size: var(--blockquote-size, var(--helix-text-xl));font-weight: var(--blockquote-font-weight, var(--helix-weight-medium));letter-spacing: var(--helix-tracking-tight);line-height: var(--blockquote-line-height, var(--helix-leading-tight));}slot:not([name])::slotted(*) {margin: var(--helix-space-none);}[part="attribution"] {color: var(--blockquote-attribution-color, var(--helix-color-foreground-muted));font-size: var(--blockquote-attribution-size, var(--helix-text-sm));margin-block-start: var(--blockquote-gap, var(--helix-space-sm));}[part="attribution"][data-empty] {display: none;}@media print {:host {print-color-adjust: economy;}}`);
+export const styles = createSheet(`:host {display: block;}[part="figure"] {margin: var(--helix-space-none);}[part="blockquote"] {display: block;margin: var(--helix-space-none);}:host([marks]) [part="blockquote"]::before {color: var(--blockquote-mark-color, var(--helix-color-foreground-subtle));content: open-quote / "";float: inline-start;font-family: var(--blockquote-font-family, var(--helix-font-display));font-size: var(--blockquote-mark-size, var(--helix-text-3xl));line-height: 1;margin-inline-end: var(--helix-space-xs);}:host([marks]) [part="blockquote"]::after {content: no-close-quote;}slot:not([name]) {color: var(--blockquote-color, var(--helix-color-foreground-muted));font-family: var(--blockquote-font-family, var(--helix-font-display));font-size: var(--blockquote-size, var(--helix-text-xl));font-weight: var(--blockquote-font-weight, var(--helix-weight-medium));letter-spacing: var(--blockquote-letter-spacing, var(--helix-tracking-tight));line-height: var(--blockquote-line-height, var(--helix-leading-tight));}slot:not([name])::slotted(*) {margin: var(--helix-space-none);}[part="attribution"] {color: var(--blockquote-attribution-color, var(--helix-color-foreground-muted));font-family: var(--blockquote-attribution-font-family, inherit);font-size: var(--blockquote-attribution-size, var(--helix-text-sm));font-weight: var(--blockquote-attribution-font-weight, inherit);margin-block-start: var(--blockquote-gap, var(--helix-space-sm));}[part="attribution"][data-empty] {display: none;}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -5,8 +5,9 @@ import type { CSSResultGroup } from 'lit';
  *
  * @description
  * Set in the display face, larger than body text, to mark a change of voice. No
- * quotation marks are drawn, because the size and spacing already set the
- * passage apart.
+ * quotation marks are drawn by default, because the size and spacing already
+ * set the passage apart. `marks` draws one large opening mark over the passage,
+ * as a pull quote sets it, in the element's language.
  *
  * @since 0.1.0
  * @status stable
@@ -15,12 +16,17 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/blockquote
  *
  * @cssproperty --blockquote-attribution-color - The color of the attribution.
+ * @cssproperty --blockquote-attribution-font-family - The typeface of the attribution, the page's by default.
+ * @cssproperty --blockquote-attribution-font-weight - The weight of the attribution, the page's by default.
  * @cssproperty --blockquote-attribution-size - The font size of the attribution.
  * @cssproperty --blockquote-color - The color of the quoted passage.
  * @cssproperty --blockquote-font-family - The typeface of the quoted passage, the display face by default.
  * @cssproperty --blockquote-font-weight - The weight of the quoted passage, medium by default.
  * @cssproperty --blockquote-gap - The space between the passage and its attribution.
+ * @cssproperty --blockquote-letter-spacing - The letter spacing of the quoted passage, the tight tracking by default.
  * @cssproperty --blockquote-line-height - The line height of the quoted passage, the tight leading by default.
+ * @cssproperty --blockquote-mark-color - The color of the mark `marks` draws, the subtle foreground by default.
+ * @cssproperty --blockquote-mark-size - The font size of the mark `marks` draws.
  * @cssproperty --blockquote-size - The font size of the quoted passage.
  */
 export declare class HelixBlockquote extends HelixHeadlessBlockquote {

package/dist/button-group/root/button-group-root.css.js

@@ -1,3 +1,12 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: inline-flex;}:host(:not([variant="spaced"])) ::slotted(*:not(:first-child)) {margin-inline-start: calc(var(--helix-border-thin) * -1);}:host(:not([variant="spaced"])) ::slotted(*:not(:first-child)) {--button-radius-start: 0;}:host(:not([variant="spaced"])) ::slotted(*:not(:last-child)) {--button-radius-end: 0;}:host([orientation="vertical"]) {align-items: stretch;flex-direction: column;}:host([orientation="vertical"]:not([variant="spaced"])) ::slotted(*:not(:first-child)) {--button-radius-start-start: 0;--button-radius-start-end: 0;--button-radius-start: var(--button-radius, var(--helix-radii-sm));margin-block-start: calc(var(--helix-border-thin) * -1);margin-inline-start: 0;}:host([orientation="vertical"]:not([variant="spaced"])) ::slotted(*:not(:last-child)) {--button-radius-end-end: 0;--button-radius-end-start: 0;--button-radius-end: var(--button-radius, var(--helix-radii-sm));}::slotted(*:hover),
+export const styles = createSheet(`:host {display: inline-flex;}:host([size="sm"]) {--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-control: var(--helix-size-control-sm);--helix-size-icon: var(--helix-size-icon-sm);--helix-space-control: var(--helix-space-sm);--helix-text-control: var(--helix-text-xs);}:host([size="md"]) {--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-control: var(--helix-size-control-md);--helix-size-icon: var(--helix-size-icon-md);--helix-space-control: var(--helix-space-md);--helix-text-control: var(--helix-text-sm);}:host([size="lg"]) {--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-control: var(--helix-size-control-lg);--helix-size-icon: var(--helix-size-icon-lg);--helix-space-control: var(--helix-space-lg);--helix-text-control: var(--helix-text-md);}:host([size]) ::slotted(button) {block-size: var(--helix-size-control);font-size: var(--helix-text-control);}:host([selection-mode]) {--_button-group-pressed-background: var(
+--button-group-pressed-background-color,
+var(--helix-color-foreground)
+);--_button-group-pressed-border: var(
+--button-group-pressed-border-color,
+var(--_button-group-pressed-background)
+);--_button-group-pressed-foreground: var(
+--button-group-pressed-color,
+var(--helix-color-background)
+);}:host(:not([variant="spaced"])) ::slotted(*:not(:first-child)) {margin-inline-start: calc(var(--helix-border-thin) * -1);}:host(:not([variant="spaced"])) ::slotted(*:not(:first-child)) {--button-radius-start: 0;}:host(:not([variant="spaced"])) ::slotted(*:not(:last-child)) {--button-radius-end: 0;}:host([orientation="vertical"]) {align-items: stretch;flex-direction: column;}:host([orientation="vertical"]:not([variant="spaced"])) ::slotted(*:not(:first-child)) {--button-radius-start-start: 0;--button-radius-start-end: 0;--button-radius-start: var(--button-radius, var(--helix-radii-sm));margin-block-start: calc(var(--helix-border-thin) * -1);margin-inline-start: 0;}:host([orientation="vertical"]:not([variant="spaced"])) ::slotted(*:not(:last-child)) {--button-radius-end-end: 0;--button-radius-end-start: 0;--button-radius-end: var(--button-radius, var(--helix-radii-sm));}::slotted(*:hover),
 ::slotted(*:focus-within) {position: relative;z-index: var(--helix-layer-raised);}:host([variant="spaced"]) {gap: var(--button-group-gap, var(--helix-space-xs));}@media print {:host {display: none;}}`);

package/dist/button-group/root/button-group-root.d.ts

@@ -7,26 +7,42 @@ import type { CSSResultGroup } from 'lit';
  * Joins the buttons into one shape: the outer corners keep their radius, the
  * inner corners lose it, and adjacent borders collapse into one line.
  *
- * The joining rule is in the base layer, paired with `data-button` like the
- * button's own box, because the corner is on the control inside each button's
- * shadow root, where this component's styles cannot reach. The same rule works
- * for your own anchor styled as a button.
+ * A Helix button's corners are on the control inside its shadow root, where
+ * this component's styles cannot reach, so the group flattens them through the
+ * button's own `--button-radius-*` hooks. A native `<button>` and your own
+ * anchor styled with `data-button` join through rules in the base layer,
+ * because a page rule setting their radius would beat any rule in here.
  *
- * The buttons take their height from the region, so set `data-density` on the
- * group to make every button in it smaller or larger together.
+ * The buttons take their height from the region, so `size` makes every
+ * button in the group smaller or larger together, as `data-density` on the
+ * group does, and a button's own size still wins. A native `<button>` in a
+ * sized group takes the height and the text size.
+ *
+ * With `selection-mode`, a pressed button takes the solid fill:
+ * `--button-group-pressed-background-color` behind it and
+ * `--button-group-pressed-color` for its words, set on the group or above it.
  *
  * @since 0.1.0
  * @status stable
  * @category actions
- * @aliases Segmented buttons, Split button
+ * @aliases Segmented buttons, Split button, Toggle buttons
  * @documentation https://fusion.dev/helix/components/button-group
  *
  * @slot - The buttons in the group.
  *
  * @cssproperty --button-group-gap - Space between the buttons, when `spaced`.
+ * @cssproperty --button-group-pressed-background-color - Fill behind a pressed button, in a selection mode. Defaults to the foreground color.
+ * @cssproperty --button-group-pressed-border-color - Edge of a pressed button, in a selection mode. Defaults to its fill.
+ * @cssproperty --button-group-pressed-color - Words and icons of a pressed button, in a selection mode. Defaults to the background color.
  */
 export declare class HelixButtonGroup extends HelixHeadlessButtonGroup {
     static styles: CSSResultGroup;
+    /**
+     * The size of every button in the group: their height, text, padding and
+     * icons, from the density steps. Unset, the buttons take the size of the
+     * region around the group.
+     */
+    size?: 'sm' | 'md' | 'lg';
     /**
      * Whether the buttons are one bar or a spaced row.
      *
@@ -39,6 +55,12 @@ export declare class HelixButtonGroup extends HelixHeadlessButtonGroup {
      * `helix-flex` gives the spacing without the group.
      */
     variant?: 'joined' | 'spaced';
+    /**
+     * Draws a pressed button as well as saying so. On the control inside the
+     * button, the only element that knows, and in the button's own hooks, so
+     * hover and the focus ring stay the button's.
+     */
+    protected markPressed(control: HTMLElement, pressed: boolean | undefined): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/button-group/root/button-group-root.js

@@ -8,9 +8,28 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessButtonGroup } from '@fusion.dev/helix-headless/button-group';
 import { property } from 'lit/decorators.js';
 import { styles } from './button-group-root.css.js';
+const PRESSED = [
+    ['--button-background-color', 'var(--_button-group-pressed-background)'],
+    ['--button-border-color', 'var(--_button-group-pressed-border)'],
+    ['--button-foreground-color', 'var(--_button-group-pressed-foreground)'],
+];
 let HelixButtonGroup = class HelixButtonGroup extends HelixHeadlessButtonGroup {
     static { this.styles = styles; }
+    markPressed(control, pressed) {
+        super.markPressed(control, pressed);
+        for (const [hook, value] of PRESSED) {
+            if (pressed === true) {
+                control.style.setProperty(hook, value);
+            }
+            else {
+                control.style.removeProperty(hook);
+            }
+        }
+    }
 };
+__decorate([
+    property({ reflect: true })
+], HelixButtonGroup.prototype, "size", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixButtonGroup.prototype, "variant", void 0);

package/dist/canvas/node/canvas-node.css.js

@@ -1,11 +1,11 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_canvas-card-x: 0px;--_canvas-card-y: 0px;--_canvas-card-inline-size: auto;--_canvas-card-block-size: auto;--_heading-ink: var(--helix-color-foreground);--_canvas-card-tone: var(--helix-color-border);--_canvas-card-color: var(--canvas-node-color, var(--_canvas-card-tone));--_canvas-handle-color: var(--_canvas-card-color);background-color: var(--canvas-node-background-color, var(--helix-color-surface));block-size: var(--_canvas-card-block-size);box-shadow: var(--canvas-node-shadow, none);border: var(--helix-border-thin) solid var(--_canvas-card-color);border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);display: block;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);inline-size: var(--_canvas-card-inline-size);left: var(--_canvas-card-x);top: var(--_canvas-card-y);overflow: visible;position: absolute;z-index: 1;}:host([group]) {background-color: color-mix(in oklab, var(--helix-color-foreground) 4%, transparent);border-style: dashed;overflow: visible;z-index: 0;}:host([tone="accent"]) {--_canvas-card-tone: var(--helix-color-accent);}:host([tone="danger"]) {--_canvas-card-tone: var(--helix-color-danger);}:host([tone="info"]) {--_canvas-card-tone: var(--helix-color-info);}:host([tone="primary"]) {--_canvas-card-tone: var(--helix-color-primary);}:host([tone="success"]) {--_canvas-card-tone: var(--helix-color-success);}:host([tone="warning"]) {--_canvas-card-tone: var(--helix-color-warning);}:host(:not([tone])),
-:host([tone="neutral"]) {--_canvas-handle-color: var(--canvas-node-color, var(--helix-color-foreground-muted));}:host(:state(selected)),
-:host(:state(target)) {--_canvas-handle-color: var(--helix-color-accent);}:host([separation="filled"]:not([group])) {background-color: color-mix(in oklab, var(--_canvas-card-color) 16%, var(--helix-color-surface));border-color: transparent;}:host([separation="elevated"]:not([group])) {--canvas-node-shadow: var(--helix-shadow-md);}:host([separation="plain"]:not([group])) {background-color: transparent;border-color: transparent;}:host([material="glass"]:not([group])) {backdrop-filter: var(--helix-material-backdrop);background-color: var(--helix-material-translucent);}:host([material="frosted"]:not([group])) {backdrop-filter: blur(var(--helix-material-blur-lg));background-color: var(--helix-material-translucent-strong);}:host([material="transparent"]:not([group])) {backdrop-filter: none;background-color: transparent;}[part="node"] {block-size: 100%;border-radius: inherit;box-sizing: border-box;display: flex;flex-direction: column;gap: var(--helix-space-2xs);justify-content: center;overflow: hidden;padding: var(--canvas-node-padding, var(--helix-space-sm));}[part="node"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}:host([group]) [part="node"]::before {color: var(--helix-color-foreground-muted);content: attr(aria-label);font-size: var(--helix-text-xs);inset-block-end: 100%;inset-inline-start: 0;padding-block-end: var(--helix-space-2xs);position: absolute;}:host([group]) [part="node"] {display: block;overflow: visible;position: relative;}[part~="handle"] {background-color: var(--helix-color-surface);block-size: var(--canvas-handle-size, 0.625rem);border: var(--helix-border-thick) solid var(--_canvas-handle-color);border-radius: var(--helix-radii-full);box-sizing: border-box;cursor: crosshair;inline-size: var(--canvas-handle-size, 0.625rem);opacity: 0;position: absolute;transform: translate(-50%, -50%);transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);}[part~="handle"]::after {content: "";inset: calc(var(--helix-space-sm) * -1);position: absolute;}:host(:hover) [part~="handle"],
+export const styles = createSheet(`:host {--_canvas-card-x: 0px;--_canvas-card-y: 0px;--_canvas-card-inline-size: auto;--_canvas-card-block-size: auto;--_heading-ink: var(--helix-color-foreground);--_canvas-card-tone: var(--helix-color-border);--_canvas-card-color: var(--canvas-node-color, var(--_canvas-card-tone));--_canvas-handle-color: var(--_canvas-card-color);background-color: var(--canvas-node-background-color, var(--helix-color-surface));block-size: var(--_canvas-card-block-size);box-shadow: var(--canvas-node-shadow, none);border: var(--helix-border-thin) solid var(--_canvas-card-color);border-radius: var(--canvas-node-radius, var(--helix-radii-sm));box-sizing: border-box;color: var(--helix-color-foreground);display: block;font-family: var(--helix-font-sans);font-size: var(--canvas-node-font-size, var(--helix-text-sm));inline-size: var(--_canvas-card-inline-size);left: var(--_canvas-card-x);top: var(--_canvas-card-y);overflow: visible;position: absolute;z-index: 1;}:host([group]) {background-color: color-mix(in oklab, var(--helix-color-foreground) 4%, transparent);border-style: dashed;overflow: visible;z-index: 0;}:host([tone="accent"]) {--_canvas-card-tone: var(--helix-color-accent);}:host([tone="danger"]) {--_canvas-card-tone: var(--helix-color-danger);}:host([tone="info"]) {--_canvas-card-tone: var(--helix-color-info);}:host([tone="primary"]) {--_canvas-card-tone: var(--helix-color-primary);}:host([tone="success"]) {--_canvas-card-tone: var(--helix-color-success);}:host([tone="warning"]) {--_canvas-card-tone: var(--helix-color-warning);}:host(:not([tone])),
+:host([tone="neutral"]) {--_canvas-handle-color: var(--canvas-node-color, var(--helix-color-foreground-muted));}:host(:state(selected)) {--_canvas-handle-color: var(--canvas-selected-color, var(--helix-color-accent));}:host(:state(target)) {--_canvas-handle-color: var(--canvas-connect-color, var(--helix-color-accent));}:host([separation="filled"]:not([group])) {background-color: color-mix(in oklab, var(--_canvas-card-color) 16%, var(--helix-color-surface));border-color: transparent;}:host([separation="elevated"]:not([group])) {--canvas-node-shadow: var(--helix-shadow-md);}:host([separation="plain"]:not([group])) {background-color: transparent;border-color: transparent;}:host([material="glass"]:not([group])) {backdrop-filter: var(--helix-material-backdrop);background-color: var(--helix-material-translucent);}:host([material="frosted"]:not([group])) {backdrop-filter: blur(var(--helix-material-blur-lg));background-color: var(--helix-material-translucent-strong);}:host([material="transparent"]:not([group])) {backdrop-filter: none;background-color: transparent;}[part="node"] {block-size: 100%;border-radius: inherit;box-sizing: border-box;display: flex;flex-direction: column;gap: var(--helix-space-2xs);justify-content: center;overflow: hidden;padding: var(--canvas-node-padding, var(--helix-space-sm));}[part="node"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}:host([group]) [part="node"]::before {color: var(--helix-color-foreground-muted);content: attr(aria-label);font-size: var(--helix-text-xs);inset-block-end: 100%;inset-inline-start: 0;padding-block-end: var(--helix-space-2xs);position: absolute;}:host([group]) [part="node"] {display: block;overflow: visible;position: relative;}[part~="handle"] {background-color: var(--helix-color-surface);block-size: var(--canvas-handle-size, 0.625rem);border: var(--helix-border-thick) solid var(--_canvas-handle-color);border-radius: var(--helix-radii-full);box-sizing: border-box;cursor: crosshair;inline-size: var(--canvas-handle-size, 0.625rem);opacity: 0;position: absolute;transform: translate(-50%, -50%);transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);}[part~="handle"]::after {content: "";inset: calc(var(--helix-space-sm) * -1);position: absolute;}:host(:hover) [part~="handle"],
 :host(:focus-within) [part~="handle"],
-:host(:state(candidate)) [part~="handle"] {opacity: 1;}:host(:state(selected)) {outline: var(--helix-border-thick) solid var(--helix-color-accent);outline-offset: calc(var(--helix-border-thin) * -1);}:host(:state(target)) {box-shadow: 0 0 0 var(--helix-border-thick) var(--helix-color-accent);}:host(:state(target)) [part~="handle"] {background-color: var(--_canvas-handle-color);}@media (forced-colors: active) {:host(:state(target)) {outline: var(--helix-border-thick) solid Highlight;outline-offset: var(--helix-space-2xs);}}@media (prefers-reduced-motion: reduce) {[part~="handle"],
-[part~="move"] {transition: none;}}[part~="handle-top"] {left: 50%;top: 0;}[part~="handle-right"] {left: 100%;top: 50%;}[part~="handle-bottom"] {left: 50%;top: 100%;}[part~="handle-left"] {left: 0;top: 50%;}::slotted([slot="description"]) {color: var(--helix-color-foreground-subtle);font-size: var(--helix-text-xs);}:host(:not(:state(placed))) {position: static;}[part~="grip"] {background-color: var(--helix-color-surface);block-size: var(--canvas-grip-size, 0.5rem);border: var(--helix-border-thin) solid var(--helix-color-accent);box-sizing: border-box;inline-size: var(--canvas-grip-size, 0.5rem);position: absolute;transform: translate(-50%, -50%);}[part~="grip"]::after {content: "";inset: calc(var(--helix-space-2xs) * -1);position: absolute;}[part~="grip-top-left"] {cursor: nwse-resize;left: 0;top: 0;}[part~="grip-top-right"] {cursor: nesw-resize;left: 100%;top: 0;}[part~="grip-bottom-right"] {cursor: nwse-resize;left: 100%;top: 100%;}[part~="grip-bottom-left"] {cursor: nesw-resize;left: 0;top: 100%;}[part~="move"] {background-image: radial-gradient(circle, currentColor 1px, transparent 1.25px);background-size: 50% calc(100% / 3);block-size: var(--canvas-move-block-size, 0.75rem);color: var(--helix-color-foreground-subtle);cursor: move;inline-size: var(--canvas-move-inline-size, 0.5rem);inset-block-start: var(--canvas-move-inset, var(--helix-space-xs));inset-inline-start: var(--canvas-move-inset, var(--helix-space-xs));opacity: 0;position: absolute;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);}[part~="move"]::after {content: "";inset: calc((1.5rem - 100%) / -2);position: absolute;}:host(:hover) [part~="move"],
-:host(:focus-within) [part~="move"] {opacity: 1;}[part~="move"]:hover {color: var(--helix-color-accent);}:host([shape="pill"]) [part~="move"],
+:host(:state(candidate)) [part~="handle"] {opacity: 1;}:host(:state(selected)) {outline: var(--helix-border-thick) solid var(--canvas-selected-color, var(--helix-color-accent));outline-offset: calc(var(--helix-border-thin) * -1);}:host(:state(target)) {box-shadow: 0 0 0 var(--helix-border-thick) var(--canvas-connect-color, var(--helix-color-accent));}:host(:state(target)) [part~="handle"] {background-color: var(--_canvas-handle-color);}@media (forced-colors: active) {:host(:state(target)) {outline: var(--helix-border-thick) solid Highlight;outline-offset: var(--helix-space-2xs);}}@media (prefers-reduced-motion: reduce) {[part~="handle"],
+[part~="move"] {transition: none;}}[part~="handle-top"] {left: 50%;top: 0;}[part~="handle-right"] {left: 100%;top: 50%;}[part~="handle-bottom"] {left: 50%;top: 100%;}[part~="handle-left"] {left: 0;top: 50%;}::slotted([slot="description"]) {color: var(--helix-color-foreground-subtle);font-size: var(--helix-text-xs);}:host(:not(:state(placed))) {position: static;}[part~="grip"] {background-color: var(--helix-color-surface);block-size: var(--canvas-grip-size, 0.5rem);border: var(--helix-border-thin) solid var(--canvas-selected-color, var(--helix-color-accent));box-sizing: border-box;inline-size: var(--canvas-grip-size, 0.5rem);position: absolute;transform: translate(-50%, -50%);}[part~="grip"]::after {content: "";inset: calc(var(--helix-space-2xs) * -1);position: absolute;}@media (pointer: coarse) {:host(:focus-within) [part~="handle"]::after,
+:host(:focus-within) [part~="grip"]::after {inset: calc((2.75rem - 100%) / -2);}}[part~="grip-top-left"] {cursor: nwse-resize;left: 0;top: 0;}[part~="grip-top-right"] {cursor: nesw-resize;left: 100%;top: 0;}[part~="grip-bottom-right"] {cursor: nwse-resize;left: 100%;top: 100%;}[part~="grip-bottom-left"] {cursor: nesw-resize;left: 0;top: 100%;}[part~="move"] {background-image: radial-gradient(circle, currentColor 1px, transparent 1.25px);background-size: 50% calc(100% / 3);block-size: var(--canvas-move-block-size, 0.75rem);color: var(--helix-color-foreground-subtle);cursor: move;inline-size: var(--canvas-move-inline-size, 0.5rem);inset-block-start: var(--canvas-move-inset, var(--helix-space-xs));inset-inline-start: var(--canvas-move-inset, var(--helix-space-xs));opacity: 0;position: absolute;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);}[part~="move"]::after {content: "";inset: calc((1.5rem - 100%) / -2);position: absolute;}:host(:hover) [part~="move"],
+:host(:focus-within) [part~="move"] {opacity: 1;}[part~="move"]:hover {color: var(--canvas-selected-color, var(--helix-color-accent));}:host([shape="pill"]) [part~="move"],
 :host([shape="circle"]) [part~="move"],
 :host([shape="diamond"]) [part~="move"] {inset-block-start: calc(var(--canvas-move-inset, var(--helix-space-xs)) * 2);inset-inline: 0;margin-inline: auto;}:host([shape="square"]:not([group])) {border-radius: 0;}:host([shape="pill"]:not([group])) {border-radius: var(--helix-radii-full);}:host([shape="circle"]:not([group])) {border-radius: 50%;}:host([shape="pill"]:not([group])) [part="node"],
 :host([shape="circle"]:not([group])) [part="node"] {align-items: center;padding-inline: 15%;text-align: center;}:host([shape="diamond"]:not([group])) {backdrop-filter: none;background-color: transparent;border-color: transparent;--canvas-node-shadow: none;}[part="outline"] {block-size: calc(100% + var(--helix-border-thin) * 2);inline-size: calc(100% + var(--helix-border-thin) * 2);left: calc(var(--helix-border-thin) * -1);overflow: visible;pointer-events: none;position: absolute;top: calc(var(--helix-border-thin) * -1);}[part="outline"] polygon {fill: var(--canvas-node-background-color, var(--helix-color-surface));stroke: var(--_canvas-card-color);stroke-width: var(--helix-border-thin);}:host([shape="diamond"][material="glass"]) [part="outline"] polygon {fill: var(--helix-material-translucent);}:host([shape="diamond"][material="frosted"]) [part="outline"] polygon {fill: var(--helix-material-translucent-strong);}:host([shape="diamond"][material="transparent"]) [part="outline"] polygon {fill: transparent;}:host([shape="diamond"][separation="filled"]) [part="outline"] polygon {fill: color-mix(in oklab, var(--_canvas-card-color) 16%, var(--helix-color-surface));stroke: transparent;}:host([shape="diamond"][separation="plain"]) [part="outline"] polygon {fill: transparent;stroke: transparent;}:host([shape="diamond"]:state(selected)),

package/dist/canvas/node/canvas-node.d.ts

@@ -10,6 +10,9 @@ import type { CSSResultGroup } from 'lit';
  * Before the board places it, the card sits in normal flow. Without JavaScript,
  * the page shows the cards' text in the order it was written.
  *
+ * On a touch screen, the points and corners of the card with focus take a
+ * reach 44 pixels across, so a finger can start a connection from one.
+ *
  * @since 0.100.0
  * @status experimental
  * @category media
@@ -23,7 +26,9 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --canvas-move-inset - The distance between the move handle and the card's corner.
  * @cssproperty --canvas-node-background-color - The card's background.
  * @cssproperty --canvas-node-color - A color for the card that carries no meaning, such as a hex color from a document. Use it when no tone fits.
+ * @cssproperty --canvas-node-font-size - The size of the card's text.
  * @cssproperty --canvas-node-padding - The space between the card's edge and its content.
+ * @cssproperty --canvas-node-radius - The card's corners. A `shape` draws its own.
  * @cssproperty --canvas-node-shadow - The shadow under the card, set by `separation="elevated"`.
  */
 export declare class HelixCanvasNode extends HelixHeadlessCanvasNode {

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

@@ -1,5 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: contents;}[part="region"] {background-color: var(--canvas-background-color, var(--helix-color-surface-sunken));block-size: var(--canvas-block-size, 30rem);border: var(--helix-border-thin) solid var(--canvas-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-sizing: border-box;display: grid;grid-template-rows: auto 1fr auto;overflow: hidden;position: relative;}:host([separation="plain"]) [part="region"] {background-color: transparent;border: none;border-radius: 0;}[part="viewport"] {min-block-size: 0;overflow: hidden;position: relative;}:host(:not(:state(empty))) ::slotted([slot="empty"]) {display: none;}[part="board"] {block-size: var(--_canvas-plane-block-size);inline-size: var(--_canvas-plane-inline-size);left: 0;position: absolute;top: 0;transform: translate(var(--_canvas-x), var(--_canvas-y)) scale(var(--_canvas-zoom));transform-origin: 0 0;transition: transform var(--helix-duration-normal) var(--helix-easing-standard);}:host([grid]) [part="viewport"] {background-position: var(--_canvas-rule-x) var(--_canvas-rule-y);background-size: calc(var(--canvas-grid-size, 32px) * var(--_canvas-rule-zoom))
+export const styles = createSheet(`:host {display: contents;}[part="region"] {background-color: var(--canvas-background-color, var(--helix-color-surface-sunken));block-size: var(--canvas-block-size, 30rem);border: var(--helix-border-thin) solid var(--canvas-border-color, var(--helix-color-border));border-radius: var(--canvas-radius, var(--helix-radii-sm));box-sizing: border-box;display: grid;grid-template-rows: auto 1fr auto;overflow: hidden;position: relative;}:host([separation="plain"]) [part="region"] {background-color: transparent;border: none;border-radius: 0;}[part="viewport"] {min-block-size: 0;overflow: hidden;position: relative;}:host(:not(:state(empty))) ::slotted([slot="empty"]) {display: none;}[part="board"] {block-size: var(--_canvas-plane-block-size);inline-size: var(--_canvas-plane-inline-size);left: 0;position: absolute;top: 0;transform: translate(var(--_canvas-x), var(--_canvas-y)) scale(var(--_canvas-zoom));transform-origin: 0 0;transition: transform var(--helix-duration-normal) var(--helix-easing-standard);}:host([grid]) [part="viewport"] {background-position: var(--_canvas-rule-x) var(--_canvas-rule-y);background-size: calc(var(--canvas-grid-size, 32px) * var(--_canvas-rule-zoom))
 calc(var(--canvas-grid-size, 32px) * var(--_canvas-rule-zoom));transition:
 background-position var(--helix-duration-normal) var(--helix-easing-standard),
 background-size var(--helix-duration-normal) var(--helix-easing-standard);}:host([grid="lines"]) [part="viewport"] {--_canvas-rule: color-mix(in oklab, var(--helix-color-border) 50%, transparent);background-image:
@@ -9,4 +9,8 @@ var(--helix-color-border) var(--helix-border-thin),
 transparent 0
 );}:host(:state(direct)) [part="board"],
 :host(:state(direct)) [part="viewport"] {transition: none;}@media (prefers-reduced-motion: reduce) {[part="board"],
-:host([grid]) [part="viewport"] {transition: none;}}[part="edges"] {inset: 0;overflow: visible;position: absolute;z-index: var(--helix-layer-beneath);}[part="edge"] {stroke: var(--_canvas-edge-color, var(--canvas-edge-color, var(--helix-color-border)));stroke-width: var(--helix-border-thick);}[part="edge"] {pointer-events: none;}[part="edge-target"] {cursor: grab;pointer-events: stroke;stroke: transparent;stroke-width: var(--canvas-edge-target-width, 12px);}[part="edge-target"]:focus {outline: none;}[part="edge-target"]:hover + [part="edge"] {stroke: var(--helix-color-focus-ring);}[part="edge-target"]:focus-visible + [part="edge"] {stroke: var(--helix-color-focus-ring);stroke-width: calc(var(--helix-border-thick) * 2);}[part="edge-end"] {background-color: var(--helix-color-accent);block-size: var(--canvas-handle-size, 0.625rem);border: var(--helix-border-thick) solid var(--helix-color-surface);border-radius: var(--helix-radii-full);box-sizing: border-box;cursor: grab;inline-size: var(--canvas-handle-size, 0.625rem);left: var(--_canvas-end-x);position: absolute;top: var(--_canvas-end-y);transform: translate(-50%, -50%);z-index: 1;}[part="edge-end"]::after {content: "";inset: calc(var(--helix-space-sm) * -1);position: absolute;}:host(:state(holding)) [part="viewport"] {cursor: grabbing;}[part="label-editor"] {background-color: var(--helix-color-surface);border: var(--helix-border-thin) solid var(--helix-color-accent);border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);inline-size: var(--canvas-label-editor-inline-size, 12rem);left: var(--_canvas-editor-x);padding: var(--helix-space-2xs) var(--helix-space-xs);position: absolute;text-align: center;top: var(--_canvas-editor-y);transform: translate(-50%, -50%);z-index: 1;}[part="label-editor"][data-target="group"] {text-align: start;transform: translate(0, -100%);}[part="label-editor"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="marquee"] {background-color: color-mix(in oklab, var(--helix-color-accent) 10%, transparent);block-size: var(--_canvas-marquee-block-size);border: var(--helix-border-thin) dashed var(--helix-color-accent);box-sizing: border-box;inline-size: var(--_canvas-marquee-inline-size);left: var(--_canvas-marquee-x);pointer-events: none;position: absolute;top: var(--_canvas-marquee-y);z-index: 1;}[part="draft"] {pointer-events: none;stroke: var(--helix-color-accent);stroke-dasharray: 6 4;stroke-width: var(--helix-border-thick);}:host(:state(connecting)) [part="viewport"] {cursor: crosshair;}[part="arrow"] {fill: var(--canvas-edge-color, var(--helix-color-border));}@supports (fill: context-stroke) {[part="arrow"] {fill: context-stroke;}}[part="edge"][data-tone="accent"] {stroke: var(--helix-color-accent);}[part="edge"][data-tone="danger"] {stroke: var(--helix-color-danger);}[part="edge"][data-tone="info"] {stroke: var(--helix-color-info);}[part="edge"][data-tone="primary"] {stroke: var(--helix-color-primary);}[part="edge"][data-tone="success"] {stroke: var(--helix-color-success);}[part="edge"][data-tone="warning"] {stroke: var(--helix-color-warning);}[part="edge"][data-selected] {stroke: var(--helix-color-accent);stroke-width: calc(var(--helix-border-thick) * 2);}[part="edge"][data-variant="dashed"] {stroke-dasharray: 6 4;}[part="edge"][data-variant="dotted"] {stroke-dasharray: 0 5;stroke-linecap: round;}[part="label"] {background-color: var(--canvas-background-color, var(--helix-color-surface-sunken));color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);left: var(--_canvas-label-x);line-height: 1;padding: var(--helix-space-2xs);pointer-events: none;position: absolute;top: var(--_canvas-label-y);transform: translate(-50%, -50%);white-space: nowrap;}[part="viewport"] {cursor: grab;touch-action: none;}:host(:state(sharing)) [part="viewport"] {touch-action: pan-x pan-y;}:host(:state(pressing)) [part="viewport"] {user-select: none;}[part="viewport"]:active {cursor: grabbing;}@media print {[part="controls"] {display: none;}}`);
+:host([grid]) [part="viewport"] {transition: none;}}[part="edges"] {inset: 0;overflow: visible;position: absolute;z-index: var(--helix-layer-beneath);}[part="edge"] {stroke: var(--_canvas-edge-color, var(--canvas-edge-color, var(--helix-color-border)));stroke-width: var(--canvas-edge-width, var(--helix-border-thick));}[part="edge"] {pointer-events: none;}[part="edge-target"] {cursor: grab;pointer-events: stroke;stroke: transparent;stroke-width: var(--canvas-edge-target-width, 12px);}[part="edge-target"]:focus {outline: none;}[part="edge-target"]:hover + [part="edge"] {stroke: var(--helix-color-focus-ring);}[part="edge-target"]:focus-visible + [part="edge"] {stroke: var(--helix-color-focus-ring);stroke-width: calc(var(--canvas-edge-width, var(--helix-border-thick)) * 2);}[part="edge-end"] {background-color: var(--canvas-selected-color, var(--helix-color-accent));block-size: var(--canvas-handle-size, 0.625rem);border: var(--helix-border-thick) solid var(--helix-color-surface);border-radius: var(--helix-radii-full);box-sizing: border-box;cursor: grab;inline-size: var(--canvas-handle-size, 0.625rem);left: var(--_canvas-end-x);position: absolute;top: var(--_canvas-end-y);transform: translate(-50%, -50%);z-index: 1;}[part="edge-end"]::after {content: "";inset: calc(var(--helix-space-sm) * -1);position: absolute;}@media (pointer: coarse) {[part="edge-end"]::after {inset: calc((2.75rem - 100%) / -2);}}:host(:state(holding)) [part="viewport"] {cursor: grabbing;}[part="label-editor"] {background-color: var(--helix-color-surface);border: var(--helix-border-thin) solid var(--helix-color-accent);border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);inline-size: var(--canvas-label-editor-inline-size, 12rem);left: var(--_canvas-editor-x);padding: var(--helix-space-2xs) var(--helix-space-xs);position: absolute;text-align: center;top: var(--_canvas-editor-y);transform: translate(-50%, -50%);z-index: 1;}[part="label-editor"][data-target="group"] {text-align: start;transform: translate(0, -100%);}[part="label-editor"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="marquee"] {background-color: color-mix(
+in oklab,
+var(--canvas-selected-color, var(--helix-color-accent)) 10%,
+transparent
+);block-size: var(--_canvas-marquee-block-size);border: var(--helix-border-thin) dashed var(--canvas-selected-color, var(--helix-color-accent));box-sizing: border-box;inline-size: var(--_canvas-marquee-inline-size);left: var(--_canvas-marquee-x);pointer-events: none;position: absolute;top: var(--_canvas-marquee-y);z-index: 1;}[part="draft"] {pointer-events: none;stroke: var(--canvas-connect-color, var(--helix-color-accent));stroke-dasharray: 6 4;stroke-width: var(--helix-border-thick);}:host(:state(connecting)) [part="viewport"] {cursor: crosshair;}[part="arrow"] {fill: var(--canvas-edge-color, var(--helix-color-border));}@supports (fill: context-stroke) {[part="arrow"] {fill: context-stroke;}}[part="edge"][data-tone="accent"] {stroke: var(--helix-color-accent);}[part="edge"][data-tone="danger"] {stroke: var(--helix-color-danger);}[part="edge"][data-tone="info"] {stroke: var(--helix-color-info);}[part="edge"][data-tone="primary"] {stroke: var(--helix-color-primary);}[part="edge"][data-tone="success"] {stroke: var(--helix-color-success);}[part="edge"][data-tone="warning"] {stroke: var(--helix-color-warning);}[part="edge"][data-selected] {stroke: var(--canvas-selected-color, var(--helix-color-accent));stroke-width: calc(var(--canvas-edge-width, var(--helix-border-thick)) * 2);}[part="edge"][data-variant="dashed"] {stroke-dasharray: 6 4;}[part="edge"][data-variant="dotted"] {stroke-dasharray: 0 5;stroke-linecap: round;}[part="label"] {background-color: var(--canvas-background-color, var(--helix-color-surface-sunken));color: var(--canvas-label-color, var(--helix-color-foreground-subtle));font-family: var(--helix-font-sans);font-size: var(--canvas-label-font-size, var(--helix-text-xs));left: var(--_canvas-label-x);line-height: 1;padding: var(--helix-space-2xs);pointer-events: none;position: absolute;top: var(--_canvas-label-y);transform: translate(-50%, -50%);white-space: nowrap;}[part="viewport"] {cursor: grab;touch-action: none;}:host(:state(sharing)) [part="viewport"] {touch-action: pan-x pan-y;}:host(:state(pressing)) [part="viewport"] {user-select: none;}[part="viewport"]:active {cursor: grabbing;}@media print {[part="controls"] {display: none;}}`);

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

@@ -21,11 +21,17 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --canvas-background-color - The background behind the board.
  * @cssproperty --canvas-block-size - The height of the frame.
  * @cssproperty --canvas-border-color - The color of the frame's edge.
+ * @cssproperty --canvas-connect-color - The color of a connection being drawn, and of the card it will arrive at and that card's points.
  * @cssproperty --canvas-edge-color - The color of a connection with no tone. Set it in one edge's `style` to color only that edge.
  * @cssproperty --canvas-edge-target-width - The width of the area a pointer can press on a connection, which is wider than the drawn line.
+ * @cssproperty --canvas-edge-width - The width of a connection's line. A selected or focused connection is drawn at twice it.
  * @cssproperty --canvas-grid-size - The spacing of the grid lines or dots, in the document's units, so it scales with the zoom.
  * @cssproperty --canvas-handle-size - The size of the ends of a selected connection. A card's connection points use the same property.
+ * @cssproperty --canvas-label-color - The color of the label on a connection.
  * @cssproperty --canvas-label-editor-inline-size - The width of the field for editing a label.
+ * @cssproperty --canvas-label-font-size - The size of the label on a connection.
+ * @cssproperty --canvas-radius - The frame's corners.
+ * @cssproperty --canvas-selected-color - The color of what is selected: a card's outline, its corners and its move handle, a connection and its ends, and the box drawn to select.
  * @cssproperty --viewport-control-background-color - The background of the pan and zoom buttons. `Map` uses the same property.
  */
 export declare class HelixCanvas extends HelixHeadlessCanvas {

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

@@ -1,7 +1,7 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_card-inset: var(--card-padding, var(--helix-space-control));--_card-media: var(--card-media-size, 12rem);--_heading-ink: var(--helix-color-foreground);background-color: var(--card-background-color, var(--helix-color-surface));border: var(--card-border-width, var(--helix-border-surface)) solid
-var(--card-border-color, var(--helix-color-border));border-radius: var(--card-radius, var(--helix-radii-lg));box-shadow: var(--card-shadow, var(--helix-shadow-surface));color: var(--helix-color-foreground-muted);align-content: var(--card-align, start);display: grid;gap: var(--card-gap, var(--helix-space-sm));grid-template-columns: minmax(0, 1fr);line-height: var(--helix-leading-normal);overflow: hidden;padding: var(--_card-inset);transition:
+export const styles = createSheet(`:host {--_card-inset: var(--card-padding, var(--helix-space-control));--_card-media: var(--card-media-size, 12rem);--_heading-ink: var(--card-heading-color, var(--helix-color-foreground));background-color: var(--card-background-color, var(--helix-color-surface));border: var(--card-border-width, var(--helix-border-surface)) solid
+var(--card-border-color, var(--helix-color-border));border-radius: var(--card-radius, var(--helix-radii-lg));box-shadow: var(--card-shadow, var(--helix-shadow-surface));color: var(--card-color, var(--helix-color-foreground-muted));align-content: var(--card-align, start);display: grid;gap: var(--card-gap, var(--helix-space-sm));grid-template-columns: minmax(0, 1fr);line-height: var(--card-line-height, var(--helix-leading-normal));overflow: hidden;padding: var(--_card-inset);transition:
 border-color var(--helix-duration-fast) var(--helix-easing-standard),
-box-shadow var(--helix-duration-fast) var(--helix-easing-standard);}:host([separation="elevated"]) {--card-shadow: var(--helix-shadow-md);border-color: light-dark(transparent, var(--helix-color-border));}:host([separation="filled"]) {--card-shadow: none;border-color: transparent;}:host([separation="plain"]) {--card-shadow: none;background-color: transparent;border-color: transparent;}slot[name="media"]::slotted(*) {block-size: var(--card-media-block-size, auto);display: block;inline-size: calc(100% + var(--_card-inset) * 2);margin: calc(var(--_card-inset) * -1);margin-block-end: 0;object-fit: cover;}:host([media-placement="end"]) slot[name="media"]::slotted(*) {margin-block-end: calc(var(--_card-inset) * -1);margin-block-start: 0;order: 1;}slot[name="header"]::slotted(*) {color: var(--helix-color-foreground);}slot[name="footer"]::slotted(*) {justify-self: end;}[part="header-row"],
+box-shadow var(--helix-duration-fast) var(--helix-easing-standard);}:host([separation="elevated"]) {--card-shadow: var(--helix-shadow-md);border-color: light-dark(transparent, var(--helix-color-border));}:host([separation="filled"]) {--card-shadow: none;border-color: transparent;}:host([separation="plain"]) {--card-shadow: none;background-color: transparent;border-color: transparent;}slot[name="media"]::slotted(*) {block-size: var(--card-media-block-size, auto);display: block;inline-size: calc(100% + var(--_card-inset) * 2);margin: calc(var(--_card-inset) * -1);margin-block-end: 0;object-fit: var(--card-media-fit, cover);}:host([media-placement="end"]) slot[name="media"]::slotted(*) {margin-block-end: calc(var(--_card-inset) * -1);margin-block-start: 0;order: 1;}slot[name="header"]::slotted(*) {color: var(--_heading-ink);}slot[name="footer"]::slotted(*) {justify-self: end;}[part="header-row"],
 [part="footer-row"] {align-items: center;display: flex;flex-wrap: wrap;gap: var(--card-gap, var(--helix-space-sm));min-inline-size: 0;}[part="header-row"] slot[name="header"]::slotted(*) {flex: 1 1 auto;min-inline-size: 0;}slot[name="header-actions"]::slotted(*),
 slot[name="footer-actions"]::slotted(*) {flex: none;justify-self: end;}[part="footer-row"] slot[name="footer-actions"]::slotted(*) {margin-inline-start: auto;}:host([orientation="horizontal"]) {padding-inline-start: calc(var(--_card-media) + var(--_card-inset));position: relative;}:host([orientation="horizontal"]) slot[name="media"]::slotted(*) {block-size: 100%;inline-size: var(--_card-media);inset-block: 0;inset-inline-start: 0;margin: var(--helix-space-none);position: absolute;}@media (prefers-reduced-motion: reduce) {:host {transition: none;}}:host([material="glass"]) {backdrop-filter: var(--card-backdrop, var(--helix-material-backdrop));background-color: var(--card-background-color, var(--helix-material-translucent));}:host([material="frosted"]) {backdrop-filter: var(--card-backdrop, blur(var(--helix-material-blur-lg)));background-color: var(--card-background-color, var(--helix-material-translucent-strong));}:host([material="transparent"]) {backdrop-filter: none;background-color: transparent;}@media print {:host {background-color: transparent;box-shadow: none;}}`);

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

@@ -52,10 +52,14 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --card-border-width - Width of the surface's edge. Follows
  *   `--helix-border-surface`, which is a hairline unless your theme sets another width.
  *   The edge is what sets the surface apart.
+ * @cssproperty --card-color - Color of the card's text. Muted by default, so the header reads as the card's own voice.
  * @cssproperty --card-gap - Space between the regions, and between a header or footer and its actions.
+ * @cssproperty --card-heading-color - Color of the header, and of a `Text` heading anywhere in the card. The foreground by default.
+ * @cssproperty --card-line-height - Line height of the card's text. The normal leading by default.
  * @cssproperty --card-media-block-size - Height of the media region. Defaults to
  *   `auto`, which follows an image's own proportions. A chart has no height of its own,
  *   so set one here for a chart.
+ * @cssproperty --card-media-fit - How a slotted picture fills the media region, as `object-fit`. `cover` by default; `contain` shows all of a logo or a screenshot.
  * @cssproperty --card-media-size - Width of the media column when horizontal.
  * @cssproperty --card-padding - Inset applied to each region.
  * @cssproperty --card-radius - Corner radius of the surface.

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

@@ -1,25 +1,33 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_code-block-line: calc(var(--helix-text-sm) * var(--helix-leading-normal));--_code-block-copy-inset: calc(
-var(--helix-space-sm) +
-(var(--_code-block-line) - var(--helix-size-control-sm)) /
-2
-);--_code-block-gutter: calc(var(--helix-size-control-sm) + var(--_code-block-copy-inset) * 2);display: flex;flex-direction: column;}[part="frame"] {flex: 1;}[part="header"] {align-items: center;backdrop-filter: var(--code-block-backdrop, none);background-color: var(--code-block-header-background-color, var(--helix-color-surface-raised));border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));border-end-end-radius: var(--helix-radii-none);border-end-start-radius: var(--helix-radii-none);border-start-end-radius: var(--code-block-radius, var(--helix-radii-lg));border-start-start-radius: var(--code-block-radius, var(--helix-radii-lg));display: flex;gap: var(--helix-space-sm);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-md);}[part="header"]:has(> [part="copy"]) {padding-block: var(--helix-space-2xs);padding-inline-end: var(--helix-space-2xs);}[part="label"] {color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);min-inline-size: 0;overflow-wrap: anywhere;}[part="frame"] {position: relative;}[part="block"] {block-size: 100%;}[part="copy"] {--icon-button-size: var(--helix-size-control-sm);}[part="header"] > [part="copy"] {margin-inline-start: auto;}[part="frame"] > [part="copy"] {inset-block-start: var(--_code-block-copy-inset);inset-inline-end: var(--_code-block-copy-inset);position: absolute;}[part="block"] {backdrop-filter: var(--code-block-backdrop, none);background-color: var(--code-block-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));border-radius: var(--code-block-radius, var(--helix-radii-lg));margin: var(--helix-space-none);overflow-x: auto;padding-block: var(--helix-space-sm);padding-inline: var(--helix-space-md);}:host(:not([diff], [no-copy])) [part="frame"]:not([part="header"] + *) > [part="block"] {padding-inline-end: var(--_code-block-gutter);}[part="header"] + [part="frame"] [part="block"] {border-block-start-width: var(--helix-space-none);border-start-end-radius: var(--helix-radii-none);border-start-start-radius: var(--helix-radii-none);}[part="code"] {color: var(--helix-color-foreground);font-family: var(--helix-font-mono);font-size: var(--helix-text-sm);line-height: var(--helix-leading-normal);}:host(:not([diff])) [part="code"] {display: block;max-block-size: var(--code-block-max-block-size, none);overflow-x: auto;}:host(:state(expanded)) [part="code"] {max-block-size: none;}[part="expand"] {all: unset;box-sizing: border-box;border-radius: var(--helix-radii-sm);color: var(--code-block-expand-color, var(--helix-color-foreground-muted));cursor: pointer;font-size: var(--helix-text-sm);padding: var(--helix-space-xs);}[part="expand"]:hover {color: var(--helix-color-foreground);}[part="expand"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([wrap]:not([diff], [line-numbers])) [part="code"] {overflow-wrap: anywhere;white-space: pre-wrap;}:host([line-numbers]:not([diff])) [part="block"] {column-gap: var(--helix-space-md);display: grid;grid-template-columns: auto minmax(0, 1fr);}[part="gutter"] {color: var(--code-block-gutter-color, var(--helix-color-foreground-subtle));font-family: var(--helix-font-mono);font-size: var(--helix-text-sm);font-variant-numeric: tabular-nums;line-height: var(--helix-leading-normal);text-align: end;user-select: none;}:host([diff]) {gap: var(--helix-space-md);}:host([diff]) [part="file"] {container-type: inline-size;display: flex;flex-direction: column;}:host([diff]) [part="block"],
+export const styles = createSheet(`:host {--_code-block-size: var(--code-block-font-size, var(--helix-text-sm));--_code-block-leading: var(--code-block-line-height, var(--helix-leading-normal));--_code-block-face: var(--code-block-font-family, var(--helix-font-mono));--_code-block-copy-inset: calc(var(--helix-space-sm) + (1lh - var(--helix-size-control-sm)) / 2);--_code-block-gutter: calc(var(--helix-size-control-sm) + var(--_code-block-copy-inset) * 2);display: flex;flex-direction: column;}[part="frame"] {flex: 1;}:host(:not([diff])) [part="frame"] {font-size: var(--_code-block-size);line-height: var(--_code-block-leading);}[part="header"] {align-items: center;backdrop-filter: var(--code-block-backdrop, none);background-color: var(--code-block-header-background-color, var(--helix-color-surface-raised));border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));border-end-end-radius: var(--helix-radii-none);border-end-start-radius: var(--helix-radii-none);border-start-end-radius: var(--code-block-radius, var(--helix-radii-lg));border-start-start-radius: var(--code-block-radius, var(--helix-radii-lg));display: flex;gap: var(--helix-space-sm);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-md);}[part="header"]:has(> [part="copy"]) {padding-block: var(--helix-space-2xs);padding-inline-end: var(--helix-space-2xs);}[part="label"] {color: var(--code-block-label-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);min-inline-size: 0;overflow-wrap: anywhere;}[part="frame"] {position: relative;}[part="block"] {block-size: 100%;}[part="copy"] {--icon-button-size: var(--helix-size-control-sm);}[part="header"] > [part="copy"] {margin-inline-start: auto;}[part="frame"] > [part="copy"] {font-size: var(--_code-block-size);inset-block-start: var(--_code-block-copy-inset);inset-inline-end: var(--_code-block-copy-inset);line-height: var(--_code-block-leading);position: absolute;}[part="block"] {backdrop-filter: var(--code-block-backdrop, none);background-color: var(--code-block-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));border-radius: var(--code-block-radius, var(--helix-radii-lg));margin: var(--helix-space-none);overflow-x: auto;padding-block: var(--helix-space-sm);padding-inline: var(--helix-space-md);}:host(:not([diff], [no-copy])) [part="frame"]:not([part="header"] + *) > [part="block"] {padding-inline-end: var(--_code-block-gutter);}[part="header"] + [part="frame"] [part="block"] {border-block-start-width: var(--helix-space-none);border-start-end-radius: var(--helix-radii-none);border-start-start-radius: var(--helix-radii-none);}[part="code"] {color: var(--code-block-color, var(--helix-color-foreground));font-family: var(--_code-block-face);font-size: var(--_code-block-size);line-height: var(--_code-block-leading);}:host(:not([diff])) [part="code"] {display: block;max-block-size: var(--code-block-max-block-size, none);overflow-x: auto;}:host(:state(expanded)) [part="code"] {max-block-size: none;}[part="expand"] {all: unset;box-sizing: border-box;border-radius: var(--helix-radii-sm);color: var(--code-block-expand-color, var(--helix-color-foreground-muted));cursor: pointer;font-size: var(--helix-text-sm);padding: var(--helix-space-xs);}[part="expand"]:hover {color: var(--helix-color-foreground);}[part="expand"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([wrap]:not([diff], [line-numbers])) [part="code"] {overflow-wrap: anywhere;white-space: pre-wrap;}:host([line-numbers]:not([diff])) [part="block"] {column-gap: var(--helix-space-md);display: grid;grid-template-columns: auto minmax(0, 1fr);}[part="gutter"] {color: var(--code-block-gutter-color, var(--helix-color-foreground-subtle));font-family: var(--_code-block-face);font-size: var(--_code-block-size);font-variant-numeric: tabular-nums;line-height: var(--_code-block-leading);text-align: end;user-select: none;}:host([diff]) {gap: var(--helix-space-md);}:host([diff]) [part="file"] {container-type: inline-size;display: flex;flex-direction: column;}:host([diff]) [part="block"],
 [part="old"],
 [part="new"] {backdrop-filter: var(--code-block-backdrop, none);background-color: var(--code-block-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));border-radius: var(--code-block-radius, var(--helix-radii-lg));margin: var(--helix-space-none);min-inline-size: 0;overflow-x: auto;padding-block: var(--helix-space-none) var(--helix-space-sm);padding-inline: var(--helix-space-none);}:host([diff]:not([no-copy]))
 [part="frame"]:not([part="header"] + *)
-:is([part="block"], [part="old"], [part="new"]) {padding-block-start: var(--_code-block-gutter);}[part="header"] + [part="frame"] :is([part="block"], [part="split"] > *) {border-block-start-width: var(--helix-space-none);border-start-end-radius: var(--helix-radii-none);border-start-start-radius: var(--helix-radii-none);}[part="split"] {display: grid;gap: var(--helix-space-xs);grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}@container (inline-size < 40rem) {[part="split"] {grid-template-columns: minmax(0, 1fr);}[part="header"] + [part="frame"] [part="new"] {border-block-start-width: var(--helix-border-thin);border-start-end-radius: var(--code-block-radius, var(--helix-radii-lg));border-start-start-radius: var(--code-block-radius, var(--helix-radii-lg));}:host([diff]:not([no-copy])) [part="frame"]:not([part="header"] + *) [part="new"] {padding-block-start: var(--helix-space-none);}}:host([diff]) [part="code"] {display: inline-block;min-inline-size: 100%;}[part="hunk"],
+:is([part="block"], [part="old"], [part="new"])
+> [part="code"] {margin-block-start: var(--_code-block-gutter);}[part="header"] + [part="frame"] :is([part="block"], [part="split"] > *) {border-block-start-width: var(--helix-space-none);border-start-end-radius: var(--helix-radii-none);border-start-start-radius: var(--helix-radii-none);}[part="split"] {display: grid;gap: var(--helix-space-xs);grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}@container (inline-size < 40rem) {[part="split"] {grid-template-columns: minmax(0, 1fr);}[part="header"] + [part="frame"] [part="new"] {border-block-start-width: var(--helix-border-thin);border-start-end-radius: var(--code-block-radius, var(--helix-radii-lg));border-start-start-radius: var(--code-block-radius, var(--helix-radii-lg));}:host([diff]:not([no-copy]))
+[part="frame"]:not([part="header"] + *)
+[part="new"]
+> [part="code"] {margin-block-start: var(--helix-space-none);}}:host([diff]) [part="code"] {display: inline-block;min-inline-size: 100%;}[part="hunk"],
 [part="context"],
 [part="added"],
 [part="removed"],
 [part="filler"] {display: flex;padding-inline: var(--helix-space-md);text-decoration: none;}[part="hunk"] {background-color: var(--helix-color-surface-sunken);color: var(--helix-color-foreground-muted);}[part="added"] {background-color: color-mix(
 in srgb,
-var(--helix-color-success) 14%,
+var(--code-block-added-color, var(--helix-color-success)) 14%,
 var(--code-block-background-color, var(--helix-color-background))
 );}[part="removed"] {background-color: color-mix(
 in srgb,
-var(--helix-color-danger) 14%,
+var(--code-block-removed-color, var(--helix-color-danger)) 14%,
 var(--code-block-background-color, var(--helix-color-background))
-);}[part="marker"] {padding-inline-end: var(--helix-space-xs);user-select: none;}[part="added"] [part="marker"] {color: color-mix(in oklab, var(--helix-color-success) 55%, var(--helix-color-foreground));}[part="removed"] [part="marker"] {color: color-mix(in oklab, var(--helix-color-danger) 55%, var(--helix-color-foreground));}[part="filler"] {background-color: var(--helix-color-surface-sunken);min-block-size: 1lh;}[part="number"] {color: var(--helix-color-foreground-muted);font-variant-numeric: tabular-nums;padding-inline-end: var(--helix-space-sm);user-select: none;}@media print {:host {background-color: transparent;}:host([diff]) [part="block"],
+);}[part="marker"] {padding-inline-end: var(--helix-space-xs);user-select: none;}[part="added"] [part="marker"] {color: color-mix(
+in oklab,
+var(--code-block-added-color, var(--helix-color-success)) 55%,
+var(--helix-color-foreground)
+);}[part="removed"] [part="marker"] {color: color-mix(
+in oklab,
+var(--code-block-removed-color, var(--helix-color-danger)) 55%,
+var(--helix-color-foreground)
+);}[part="filler"] {background-color: var(--helix-color-surface-sunken);min-block-size: 1lh;}[part="number"] {color: var(--helix-color-foreground-muted);font-variant-numeric: tabular-nums;padding-inline-end: var(--helix-space-sm);user-select: none;}@media print {:host {background-color: transparent;}:host([diff]) [part="block"],
 [part="old"],
 [part="new"] {overflow: visible;white-space: pre-wrap;}[part="added"],
 [part="removed"],

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

@@ -25,14 +25,21 @@ import '../../copy-button/index.js';
  * @category typography
  * @documentation https://fusion.dev/helix/components/code-block
  *
+ * @cssproperty --code-block-added-color - The color a diff's added lines are tinted in and their `+` is drawn in. The success color by default.
  * @cssproperty --code-block-backdrop - A backdrop filter for the block and its header, for a translucent background.
  * @cssproperty --code-block-background-color - The background behind the code. Set it for a block that sits on a surface other than the page background.
  * @cssproperty --code-block-border-color - The line around the block and its header.
+ * @cssproperty --code-block-color - The color of the code. A highlighter's own colors win on the tokens it colors.
  * @cssproperty --code-block-expand-color - The color of the button under a capped block that shows every line.
+ * @cssproperty --code-block-font-family - The typeface of the code and its line numbers. The mono face by default.
+ * @cssproperty --code-block-font-size - The size of the code and its line numbers.
  * @cssproperty --code-block-gutter-color - The color of the line numbers.
  * @cssproperty --code-block-header-background-color - The background behind the name. The default is `surface-raised`.
+ * @cssproperty --code-block-label-color - The color of the name in the header.
+ * @cssproperty --code-block-line-height - The line height of the code and its line numbers, as a number or a length.
  * @cssproperty --code-block-max-block-size - The tallest the code grows before it scrolls, or until `expandable`'s button shows every line. The default is no limit.
  * @cssproperty --code-block-radius - The corner radius of the header's top and the block's bottom, which form one shape.
+ * @cssproperty --code-block-removed-color - The color a diff's removed lines are tinted in and their `-` is drawn in. The danger color by default.
  */
 export declare class HelixCodeBlock extends HelixHeadlessCodeBlock {
     static tier: string;

package/dist/combobox/root/combobox-root.js

@@ -13,11 +13,13 @@ import { styles as fieldFrameStyles } from '../../shared/field/field-frame.css.j
 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 as tagRowStyles } from '../../shared/tags/tags.css.js';
 import { styles } from './combobox-root.css.js';
 let HelixCombobox = class HelixCombobox extends HelixHeadlessCombobox {
     static { this.tier = 'helix-'; }
     static { this.styles = [
+        liveStyles,
         fieldStyles,
         fieldFrameStyles,
         fieldStackedStyles,

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {align-items: baseline;display: grid;grid-column: 1 / -1;grid-template-columns: subgrid;row-gap: var(--description-list-item-gap, var(--helix-space-2xs));}[part="label"] {color: var(--description-list-label-color, var(--helix-color-foreground-muted));font-size: var(--description-list-label-font-size, var(--helix-text-sm));font-weight: var(--description-list-label-weight, var(--helix-weight-medium));margin: 0;}[part="value"] {color: var(--description-list-value-color, var(--helix-color-foreground));font-variant-numeric: var(--_description-list-value-figures, normal);justify-self: var(--_description-list-value-align, stretch);margin: 0;min-inline-size: 0;overflow-wrap: anywhere;text-align: var(--_description-list-value-align, start);}::slotted(dd) {color: var(--description-list-value-color, var(--helix-color-foreground));font-variant-numeric: var(--_description-list-value-figures, normal);grid-column: -2 / -1;justify-self: var(--_description-list-value-align, stretch);margin: 0;min-inline-size: 0;overflow-wrap: anywhere;text-align: var(--_description-list-value-align, start);}::slotted([slot="actions"]) {margin-inline-start: var(--description-list-actions-gap, var(--helix-space-xs));vertical-align: middle;}@media print {:host {break-inside: avoid;}}`);
+export const styles = createSheet(`:host {align-items: var(--description-list-item-align, baseline);display: grid;grid-column: 1 / -1;grid-template-columns: subgrid;row-gap: var(--description-list-item-gap, var(--helix-space-2xs));}[part="label"] {color: var(--description-list-label-color, var(--helix-color-foreground-muted));font-size: var(--description-list-label-font-size, var(--helix-text-sm));font-weight: var(--description-list-label-weight, var(--helix-weight-medium));margin: 0;}[part="value"] {color: var(--description-list-value-color, var(--helix-color-foreground));font-variant-numeric: var(--_description-list-value-figures, normal);justify-self: var(--_description-list-value-align, stretch);margin: 0;min-inline-size: 0;overflow-wrap: anywhere;text-align: var(--_description-list-value-align, start);}::slotted(dd) {color: var(--description-list-value-color, var(--helix-color-foreground));font-variant-numeric: var(--_description-list-value-figures, normal);grid-column: -2 / -1;justify-self: var(--_description-list-value-align, stretch);margin: 0;min-inline-size: 0;overflow-wrap: anywhere;text-align: var(--_description-list-value-align, start);}::slotted([slot="actions"]) {margin-inline-start: var(--description-list-actions-gap, var(--helix-space-xs));vertical-align: middle;}@media print {:host {break-inside: avoid;}}`);

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

@@ -12,6 +12,7 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/description-list
  *
  * @cssproperty --description-list-actions-gap - The space between the value and the controls in `actions`.
+ * @cssproperty --description-list-item-align - How a label and its value line up beside each other, as `align-items`. Defaults to `baseline`; `center` suits a value taller than a line, such as an avatar.
  * @cssproperty --description-list-item-gap - The space between a label and its value when the label sits over it.
  * @cssproperty --description-list-label-color - The color of a label.
  * @cssproperty --description-list-label-font-size - The size of a label's text.

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

@@ -1,2 +1,3 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {container-type: inline-size;display: block;}[part="list"] {display: grid;gap: var(--description-list-gap, var(--helix-space-md));margin: 0;}:host([direction="row"]) [part="list"] {column-gap: var(--description-list-column-gap, var(--helix-space-lg));grid-template-columns: max-content minmax(0, 1fr);row-gap: var(--description-list-gap, var(--helix-space-sm));}@container (inline-size < 22rem) {:host([direction="row"]) [part="list"] {grid-template-columns: minmax(0, 1fr);row-gap: var(--description-list-gap, var(--helix-space-md));}}:host([width="auto"]) {container-type: normal;inline-size: fit-content;max-inline-size: 100%;}:host([direction="row"][justify="between"]) {--_description-list-value-align: end;--_description-list-value-figures: tabular-nums;}`);
+export const styles = createSheet(`:host {container-type: inline-size;display: block;}[part="list"] {--_description-list-gap: var(--description-list-gap, var(--helix-space-md));display: grid;gap: var(--_description-list-gap);margin: 0;}:host([direction="row"]) [part="list"] {--_description-list-gap: var(--description-list-gap, var(--helix-space-sm));column-gap: var(--description-list-column-gap, var(--helix-space-lg));grid-template-columns: var(--description-list-label-width, max-content) minmax(0, 1fr);row-gap: var(--_description-list-gap);}@container (inline-size < 22rem) {:host([direction="row"]) [part="list"] {--_description-list-gap: var(--description-list-gap, var(--helix-space-md));grid-template-columns: minmax(0, 1fr);row-gap: var(--_description-list-gap);}}:host([width="auto"]) {container-type: normal;inline-size: fit-content;max-inline-size: 100%;}:host([direction="row"][justify="between"]) {--_description-list-value-align: end;--_description-list-value-figures: tabular-nums;}:host([divided]) ::slotted(:not(:first-child)) {border-block-start: var(--description-list-divider-width, var(--helix-border-thin)) solid
+var(--description-list-divider-color, var(--helix-color-border));padding-block-start: var(--_description-list-gap);}`);

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

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

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

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

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

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

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

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

package/dist/element-events.generated.js

@@ -6,6 +6,7 @@ registerElementEvents({
     'helix-aura': ['helix-aura-fallback'],
     'helix-avatar': ['error', 'load'],
     'helix-button': ['helix-press'],
+    'helix-button-group': ['change', 'helix-before-change'],
     'helix-callout': ['helix-dismiss'],
     'helix-canvas': [
         'helix-before-move',

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

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

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

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

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

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