@fusion.dev/helix 0.145.0 → 0.146.0

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

@@ -8,11 +8,11 @@ all: unset;
 
 box-sizing: border-box;
 align-items: center;
-color: var(--helix-color-foreground);
+color: var(--accordion-item-color, var(--helix-color-foreground));
 cursor: pointer;
 display: flex;
-font-size: var(--helix-text-md);
-font-weight: var(--helix-weight-medium);
+font-size: var(--accordion-item-font-size, var(--helix-text-md));
+font-weight: var(--accordion-item-font-weight, var(--helix-weight-medium));
 inline-size: 100%;
 
 gap: var(--helix-space-xs);
@@ -24,7 +24,7 @@ transition: background-color var(--helix-duration-fast) var(--helix-easing-stand
 
 [part="chevron"] {
 block-size: 1em;
-color: var(--helix-color-foreground-subtle);
+color: var(--accordion-item-chevron-color, var(--helix-color-foreground-subtle));
 flex: 0 0 auto;
 inline-size: 1em;
 transform: scaleY(1);
@@ -33,7 +33,7 @@ transition: transform var(--helix-duration-fast) var(--helix-easing-standard);
 
 ::slotted([slot="chevron"]) {
 block-size: 1em;
-color: var(--helix-color-foreground-subtle);
+color: var(--accordion-item-chevron-color, var(--helix-color-foreground-subtle));
 flex: 0 0 auto;
 inline-size: 1em;
 transition: transform var(--helix-duration-fast) var(--helix-easing-standard);
@@ -49,14 +49,18 @@ margin-inline-start: auto;
 transform: scaleY(-1);
 }
 
+[part="trigger"]:hover:not(:disabled) {
+background-color: var(--accordion-item-hover-background-color, transparent);
+}
+
 [part="trigger"]:hover:not(:disabled) [part="chevron"],
 [part="trigger"]:hover:not(:disabled) ::slotted([slot="chevron"]) {
-color: var(--helix-color-foreground);
+color: var(--accordion-item-chevron-hover-color, var(--helix-color-foreground));
 }
 
 [part="trigger"]:disabled {
 cursor: not-allowed;
-opacity: 0.5;
+opacity: var(--accordion-item-disabled-opacity, 0.5);
 }
 
 [part="trigger"]:focus-visible {
@@ -81,7 +85,7 @@ overflow: hidden;
 }
 
 [part="content-inner"] > slot {
-color: var(--helix-color-foreground-muted);
+color: var(--accordion-item-content-color, var(--helix-color-foreground-muted));
 display: block;
 line-height: var(--helix-leading-normal);
 padding: var(--accordion-item-padding, var(--helix-space-sm) var(--helix-space-md));

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

@@ -27,6 +27,14 @@ import type { CSSResultGroup } from 'lit';
  * @csspart heading - The heading that holds the trigger.
  * @csspart trigger - The button that opens and closes the section, holding the summary.
  *
+ * @cssproperty --accordion-item-chevron-color - The color of the open and close indicator.
+ * @cssproperty --accordion-item-chevron-hover-color - The indicator's color while the pointer is on the trigger.
+ * @cssproperty --accordion-item-color - The color of the trigger's text.
+ * @cssproperty --accordion-item-content-color - The color of the content's text.
+ * @cssproperty --accordion-item-disabled-opacity - How faint a disabled trigger is drawn.
+ * @cssproperty --accordion-item-font-size - The size of the trigger's text.
+ * @cssproperty --accordion-item-font-weight - The weight of the trigger's text.
+ * @cssproperty --accordion-item-hover-background-color - The trigger's fill while the pointer is on it. Unset, there is none.
  * @cssproperty --accordion-item-padding - The padding of the trigger and the content.
  */
 export declare class HelixAccordionItem extends HelixHeadlessAccordionItem {

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

@@ -36,6 +36,9 @@ color: var(--_aura-glow);
 column-rule-color: var(--aura-peak, var(--helix-color-primary-active));
 outline-color: var(--_aura-ground);
 text-decoration-color: var(--_aura-haze);
+
+transition-duration: var(--helix-duration-fast);
+transition-property: caret-color, color, column-rule-color, outline-color, text-decoration-color;
 }
 
 [part="content"] {

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

@@ -40,7 +40,9 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  *
  * **The colors are the theme's, and each has a hook**: `--aura-ground`,
  * `--aura-haze`, `--aura-glow` and `--aura-peak`, read by the shader and by the
- * fallback gradient alike, from wherever on the page you set them.
+ * fallback gradient alike, from wherever on the page you set them. A hook
+ * changed while the aura draws, by a class, a style or the color mode,
+ * reaches the shader on the next frame.
  *
  * Where the gradient shows in place of the shader, the aura matches
  * `:state(fallback)` and sends `helix-aura-fallback` with the reason.
@@ -197,18 +199,25 @@ export declare class HelixAura extends HelixElement {
      * states.
      */
     variant?: 'aurora' | 'braid' | 'caustics' | 'flow' | 'fracture' | 'lattice' | 'particles' | 'rays' | 'streaks' | 'threads' | 'waves';
-    constructor();
     /**
      * The four ramp stops, resolved.
      *
-     * **Cached, because reading them is not free and they do not move.** Each
-     * read sets a style, calls `getComputedStyle`, fills a pixel and reads it
-     * back: a style recalc and a canvas readback apiece. Doing that inside
-     * `paint` meant four of each on every frame, forever, to fetch values that
-     * change only when the color mode does. The controller already says when
-     * that happens, so this is filled from there and from the first paint.
+     * **Read on every frame drawn, and converted only when they moved.** A hook
+     * can change anywhere above the aura at any time: a class on a section, a
+     * style written by script, a scoped theme, the color mode. Each frame reads
+     * the five colors the canvas carries off its live computed style, which is
+     * a string compare while nothing changed, and `paletteOf` converts them only
+     * when the text differs. Converting on every frame was the cost: a style
+     * recalc and a canvas readback per stop, forever, for values that rarely
+     * move.
+     *
+     * A stopped loop draws no frame to read in, so a change of any of the five
+     * also runs a short transition on the canvas, and its end paints one frame.
+     * That covers a reader who asked for no motion.
      */
     private palette;
+    /** The canvas's live computed style, and the five colors it last carried. */
+    private carried;
     /** Why the gradient shows, while it does, or `undefined` while the shader draws. */
     private fallback;
     /** Why the last `build` drew nothing, for the fallback it leads to. */
@@ -458,7 +467,8 @@ export declare class HelixAura extends HelixElement {
      */
     private readonly handleRestored;
     /**
-     * Resolves the ramp. Called when the palette moves, not when a frame draws.
+     * Resolves the ramp, converting only when the colors the canvas carries
+     * moved since the last read.
      *
      * From the canvas's own computed style, which carries each stop on a color
      * property: the `--aura-*` hook where a page set one, and the token
@@ -466,6 +476,8 @@ export declare class HelixAura extends HelixElement {
      * chosen for a light page or a dark one.
      */
     private readPalette;
+    /** One frame for a stopped loop, once a color the canvas carries has moved. */
+    private readonly handleRestyle;
     private link;
     /**
      * Re-reads the box and resizes the drawing buffer to match.

package/dist/aura/root/aura-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixAura_1;
-import { customElement, HelixAuraFallbackEvent, HelixElement, MAX_FRAME_STEP, PaintGateController, readColor, TokenColorController, } from '@fusion.dev/helix-core';
+import { customElement, HelixAuraFallbackEvent, HelixElement, MAX_FRAME_STEP, PaintGateController, readColor, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { tiltFor } from '../axis.js';
@@ -17,10 +17,8 @@ const MAX_CANVAS_PIXELS = 4_194_304;
 const OPENING_PATIENCE = 500;
 const SOFTWARE_RENDERER = /swiftshader|llvmpipe|softpipe|software rasterizer|basic render/i;
 let HelixAura = class HelixAura extends HelixElement {
-    static { HelixAura_1 = this; }
-    static { this.styles = styles; }
     constructor() {
-        super();
+        super(...arguments);
         this.bloom = 0.5;
         this.drift = 0;
         this.gain = 1;
@@ -31,6 +29,7 @@ let HelixAura = class HelixAura extends HelixElement {
         this.tilt = 14;
         this.variance = 1;
         this.palette = { ...RESTING_PALETTE };
+        this.carried = null;
         this.refused = 'unavailable';
         this.canvas = null;
         this.gl = null;
@@ -99,6 +98,9 @@ let HelixAura = class HelixAura extends HelixElement {
                 this.open();
             }
         };
+        this.handleRestyle = () => {
+            this.paintOnce();
+        };
         this.held = 0;
         this.handlePointer = (event) => {
             if (this.gate.reduced) {
@@ -117,11 +119,9 @@ let HelixAura = class HelixAura extends HelixElement {
             const rect = this.getBoundingClientRect();
             this.box = { ...this.box, left: rect.left, top: rect.top };
         };
-        new TokenColorController(this, () => {
-            this.readPalette();
-            this.paintOnce();
-        });
     }
+    static { HelixAura_1 = this; }
+    static { this.styles = styles; }
     static { this.CONTEXT = {
         alpha: true,
         antialias: false,
@@ -154,11 +154,11 @@ let HelixAura = class HelixAura extends HelixElement {
         }
         this.canvas?.addEventListener('webglcontextlost', this.handleLost);
         this.canvas?.addEventListener('webglcontextrestored', this.handleRestored);
+        this.canvas?.addEventListener('transitionend', this.handleRestyle);
         this.addEventListener('pointermove', this.handlePointer);
         this.addEventListener('pointerleave', this.handleLeave);
         this.gate.watch();
         window.addEventListener('scroll', this.handleScroll, { capture: true, passive: true });
-        this.readPalette();
         if (this.measure() || (this.width && !this.opened)) {
             this.open();
         }
@@ -262,6 +262,7 @@ let HelixAura = class HelixAura extends HelixElement {
         }
         this.canvas?.removeEventListener('webglcontextlost', this.handleLost);
         this.canvas?.removeEventListener('webglcontextrestored', this.handleRestored);
+        this.canvas?.removeEventListener('transitionend', this.handleRestyle);
         this.removeEventListener('pointermove', this.handlePointer);
         this.removeEventListener('pointerleave', this.handleLeave);
         window.removeEventListener('scroll', this.handleScroll, { capture: true });
@@ -276,9 +277,18 @@ let HelixAura = class HelixAura extends HelixElement {
         this.dispatchEvent(new HelixAuraFallbackEvent({ reason }));
     }
     readPalette() {
-        const canvas = this.renderRoot.querySelector('canvas');
-        if (canvas) {
-            this.palette = paletteOf(getComputedStyle(canvas), readColor);
+        const canvas = this.canvas;
+        if (!canvas) {
+            return;
+        }
+        if (this.carried?.canvas !== canvas) {
+            this.carried = { canvas, style: getComputedStyle(canvas), text: '' };
+        }
+        const { style } = this.carried;
+        const text = `${style.color} ${style.textDecorationColor} ${style.outlineColor} ${style.columnRuleColor} ${style.caretColor}`;
+        if (text !== this.carried.text) {
+            this.carried.text = text;
+            this.palette = paletteOf(style, readColor);
         }
     }
     link(vertex, fragment) {
@@ -356,6 +366,7 @@ let HelixAura = class HelixAura extends HelixElement {
         if (!gl || !this.program || !this.width) {
             return;
         }
+        this.readPalette();
         const { glow, ground, haze, peak } = this.palette;
         gl.uniform3fv(uniforms.uGround ?? null, ground);
         gl.uniform3fv(uniforms.uHaze ?? null, haze);

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

@@ -7,6 +7,8 @@ export const styles = createSheet(`:host {
 --_badge-dot: var(--helix-space-xs);
 
 --_badge-on: var(--helix-color-foreground-on-primary);
+
+--_badge-fill: var(--helix-color-primary-surface);
 display: inline-flex;
 position: relative;
 vertical-align: middle;
@@ -15,7 +17,7 @@ vertical-align: middle;
 [part="indicator"] {
 align-items: center;
 
-background-color: var(--badge-background-color, var(--helix-color-primary-surface));
+background-color: var(--badge-background-color, var(--_badge-fill));
 block-size: var(--_badge-size);
 border-radius: var(--helix-radii-full);
 
@@ -65,12 +67,12 @@ opacity var(--helix-duration-fast) var(--helix-easing-standard),
 scale var(--helix-duration-fast) var(--helix-easing-accelerate);
 }
 
-:host([tone="primary"]) [part="indicator"] {
-background-color: var(--badge-background-color, var(--helix-color-primary-surface));
+:host([tone="primary"]) {
+--_badge-fill: var(--helix-color-primary-surface);
 }
 
-:host([tone="accent"]) [part="indicator"] {
-background-color: var(--badge-background-color, var(--helix-color-accent-surface));
+:host([tone="accent"]) {
+--_badge-fill: var(--helix-color-accent-surface);
 }
 
 :host([tone="accent"]) {
@@ -84,25 +86,25 @@ background-color: var(--badge-background-color, var(--helix-color-accent-surface
 --_badge-on: var(--helix-color-foreground-on-status);
 }
 
-:host([tone="info"]) [part="indicator"] {
-background-color: var(--badge-background-color, var(--helix-color-info-surface));
+:host([tone="info"]) {
+--_badge-fill: var(--helix-color-info-surface);
 }
 
-:host([tone="success"]) [part="indicator"] {
-background-color: var(--badge-background-color, var(--helix-color-success-surface));
+:host([tone="success"]) {
+--_badge-fill: var(--helix-color-success-surface);
 }
 
-:host([tone="warning"]) [part="indicator"] {
-background-color: var(--badge-background-color, var(--helix-color-warning-surface));
+:host([tone="warning"]) {
+--_badge-fill: var(--helix-color-warning-surface);
 }
 
-:host([tone="danger"]) [part="indicator"] {
-background-color: var(--badge-background-color, var(--helix-color-danger-surface));
+:host([tone="danger"]) {
+--_badge-fill: var(--helix-color-danger-surface);
 }
 
-:host([tone="neutral"]) [part="indicator"] {
-background-color: var(--badge-background-color, var(--helix-color-surface-raised));
-color: var(--badge-color, var(--helix-color-foreground));
+:host([tone="neutral"]) {
+--_badge-fill: var(--helix-color-surface-raised);
+--_badge-on: var(--helix-color-foreground);
 }
 
 :host([placement="top-start"]) [part="indicator"],
@@ -140,6 +142,74 @@ position: static;
 translate: none;
 }
 
+:host([emphasis="outlined"]) [part="indicator"] {
+background-color: var(--badge-background-color, var(--helix-color-background));
+box-shadow:
+inset 0 0 0 var(--helix-border-thick) var(--_badge-fill),
+0 0 0 var(--helix-border-thick) var(--badge-ring-color, var(--helix-color-background));
+color: var(--badge-color, var(--helix-color-foreground));
+}
+
+:host([emphasis="subtle"]) [part="indicator"] {
+background-color: var(
+--badge-background-color,
+color-mix(in oklab, var(--_badge-fill) 22%, var(--helix-color-background))
+);
+color: var(--badge-color, var(--helix-color-foreground));
+}
+
+:host([emphasis="outlined"][placement="inline"]) [part="indicator"] {
+box-shadow: inset 0 0 0 var(--helix-border-thick) var(--_badge-fill);
+}
+
+:host([attention="pulse"]) [part="indicator"]:not([data-blank]) {
+animation: badge-pulse var(--badge-attention-duration, 1.5s) var(--helix-easing-standard) infinite;
+}
+
+:host([attention="bounce"]) [part="indicator"]:not([data-blank]) {
+animation: badge-bounce var(--badge-attention-duration, 1s) var(--helix-easing-standard) infinite;
+}
+
+@keyframes badge-pulse {
+0%,
+100% {
+transform: scale(1);
+}
+
+50% {
+transform: scale(1.18);
+}
+}
+
+@keyframes badge-bounce {
+0%,
+20%,
+53%,
+100% {
+transform: translateY(0);
+}
+
+40%,
+43% {
+transform: translateY(-30%);
+}
+
+70% {
+transform: translateY(-15%);
+}
+
+90% {
+transform: translateY(-4%);
+}
+}
+
+@media (prefers-reduced-motion: reduce) {
+:host([attention="pulse"]) [part="indicator"]:not([data-blank]),
+:host([attention="bounce"]) [part="indicator"]:not([data-blank]) {
+animation: none;
+}
+}
+
 @media print {
 :host {
 box-shadow: none;

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

@@ -20,6 +20,7 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Count, Indicator, Pip
  * @documentation https://fusion.dev/helix/components/badge
  *
+ * @cssproperty --badge-attention-duration - How long one beat of `attention` takes.
  * @cssproperty --badge-background-color - The fill of the indicator.
  * @cssproperty --badge-color - The color of the count, to pair with a fill set through `--badge-background-color`.
  * @cssproperty --badge-gap - The space between the content and the count under `placement="inline"`.
@@ -27,6 +28,23 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --badge-ring-color - The color of the ring between the indicator and what is behind it.
  */
 export declare class HelixBadge extends HelixHeadlessBadge {
+    /**
+     * An effect that draws the eye to the mark: `pulse` swells it in a loop and
+     * `bounce` hops it, as Web Awesome's badge does.
+     *
+     * Absent is still, which is right for almost every count: a mark that moves
+     * is a mark that interrupts. Still for a reader who asked the system for
+     * less motion, and while the mark is going away.
+     */
+    attention?: 'bounce' | 'pulse';
+    /**
+     * How strongly the mark is drawn: `solid`, `outlined` or `subtle`, `Tag`'s
+     * axis.
+     *
+     * Absent is `solid`, the tone's fill. `outlined` draws the fill as a ring on
+     * the page's ground and `subtle` as a tint, both with the page's ink.
+     */
+    emphasis?: 'outlined' | 'solid' | 'subtle';
     /**
      * Where the mark sits: a corner, `top-start`, `bottom-end` or `bottom-start`,
      * or `inline`, in the line after the content.

package/dist/badge/root/badge-root.js

@@ -11,6 +11,12 @@ import { styles } from './badge-root.css.js';
 let HelixBadge = class HelixBadge extends HelixHeadlessBadge {
     static { this.styles = styles; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixBadge.prototype, "attention", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixBadge.prototype, "emphasis", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixBadge.prototype, "placement", void 0);

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

@@ -17,9 +17,9 @@ 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(--helix-weight-medium);
+font-weight: var(--blockquote-font-weight, var(--helix-weight-medium));
 letter-spacing: var(--helix-tracking-tight);
-line-height: var(--helix-leading-tight);
+line-height: var(--blockquote-line-height, var(--helix-leading-tight));
 }
 
 slot:not([name])::slotted(*) {

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

@@ -18,7 +18,9 @@ import type { CSSResultGroup } from 'lit';
  * @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-line-height - The line height of the quoted passage, the tight leading by default.
  * @cssproperty --blockquote-size - The font size of the quoted passage.
  */
 export declare class HelixBlockquote extends HelixHeadlessBlockquote {

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

@@ -15,6 +15,29 @@ margin: var(--helix-space-none);
 padding: var(--helix-space-none);
 }
 
+[part="expand"] {
+all: unset;
+border-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));
+box-sizing: border-box;
+color: var(--breadcrumbs-link-color, var(--helix-color-foreground-muted));
+cursor: pointer;
+line-height: var(--helix-leading-normal);
+padding: var(--helix-space-2xs) var(--helix-space-xs);
+}
+
+[part="expand"]:hover {
+background-color: var(
+--breadcrumbs-hover-color,
+color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
+);
+color: var(--breadcrumbs-current-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);
+}
+
 @media print {
 :host {
 print-color-adjust: economy;

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

@@ -16,6 +16,7 @@ import '../breadcrumb/breadcrumb.js';
  *
  * @slot - The trail's items, in order from root to current page.
  *
+ * @csspart expand - The button in the folded crumb that shows the whole trail.
  * @csspart list - The ordered list.
  *
  * @cssproperty --breadcrumbs-font-size - Size of the trail's text.

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

@@ -195,10 +195,11 @@ visibility: hidden;
 }
 
 :host(:state(pending)) [part="button"]::after {
-animation: helix-button-turn var(--_button-turn) linear infinite;
+animation: helix-button-turn var(--button-spinner-duration, var(--_button-turn)) linear infinite;
 block-size: var(--button-spinner-size, 1.15em);
-border: var(--helix-border-thick) solid color-mix(in oklab, currentColor 30%, transparent);
-border-block-start-color: currentColor;
+border: var(--helix-border-thick) solid
+color-mix(in oklab, var(--button-spinner-color, currentColor) 30%, transparent);
+border-block-start-color: var(--button-spinner-color, currentColor);
 border-radius: var(--helix-radii-full);
 box-sizing: border-box;
 content: "";

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

@@ -43,6 +43,8 @@ declare const HelixButton_base: (new (...args: any[]) => import("../../shared/mi
  * @cssproperty --button-radius-start-end - The top trailing corner, for a group stacking down.
  * @cssproperty --button-radius-start-start - The top leading corner, for a group stacking down.
  * @cssproperty --button-size - Height of the control, for a row height outside the density steps.
+ * @cssproperty --button-spinner-color - Color of the ring a pending button turns. It follows the label's color.
+ * @cssproperty --button-spinner-duration - How long the ring takes to turn once.
  * @cssproperty --button-spinner-size - Size of the ring a pending button turns. Defaults to the size of its icons.
  *
  * @cssstate pending - The button is pending: `pending` is set. A ring turns over its hidden words.

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

@@ -4,9 +4,10 @@ export const styles = createSheet(`:host {
 
 --_callout-color: var(--callout-accent-color, var(--_callout-tone));
 --_callout-bar: var(--callout-bar-thickness, var(--helix-border-thick));
---_callout-inset: var(--callout-padding, var(--helix-space-md));
 
-font-size: var(--callout-font-size, var(--helix-text-sm));
+--_callout-inset: var(--callout-padding, var(--helix-space-control));
+
+font-size: var(--callout-font-size, var(--helix-text-control));
 background-color: var(
 --callout-background-color,
 color-mix(in oklab, var(--_callout-color) 10%, transparent)
@@ -129,7 +130,7 @@ slot[name="heading"]::slotted(*) {
 color: var(--helix-color-foreground);
 
 display: block;
-font-size: var(--callout-font-size, var(--helix-text-sm));
+font-size: var(--callout-font-size, var(--helix-text-control));
 font-weight: var(--helix-weight-semibold);
 margin: var(--helix-space-none);
 }

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

@@ -14,6 +14,10 @@ import type { CSSResultGroup } from 'lit';
  * draws it. `separation` is where the box ends: absent is the tint with the
  * bar, `outlined` an edge with no fill, and `plain` the bar and the mark alone.
  *
+ * The inset and the type follow `data-density`, as the controls around a
+ * callout do: set it on a region for tighter or looser callouts, or set
+ * `--callout-padding` and `--callout-font-size` on one.
+ *
  * @since 0.1.0
  * @status stable
  * @category markers
@@ -33,9 +37,9 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --callout-accent-color - The color of the bar, the mark and the tint, in place of the tone's.
  * @cssproperty --callout-background-color - The fill behind the callout.
  * @cssproperty --callout-bar-thickness - The thickness of the bar on the inline start edge.
- * @cssproperty --callout-font-size - The size of the callout's text.
+ * @cssproperty --callout-font-size - The size of the callout's text. Defaults to the control text step, which follows `data-density`.
  * @cssproperty --callout-gap - The space between the mark and the content.
- * @cssproperty --callout-padding - The inset around the content, to which the bar's width is added at the start.
+ * @cssproperty --callout-padding - The inset around the content, to which the bar's width is added at the start. Defaults to the control space step, which follows `data-density`.
  * @cssproperty --callout-radius - The corner radius of the callout.
  */
 export declare class HelixCallout extends HelixHeadlessCallout {

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

@@ -33,8 +33,14 @@ import type { CSSResultGroup } from 'lit';
  * @slot header-actions - Controls for the whole card at the end of the header's line, such as a menu.
  * @slot media - Image, video, or chart that runs edge to edge, outside the inset.
  *
+ * @csspart body - The slot the main content arrives through. A slot draws no box, so it passes inherited properties, such as color and font, to the content; `display: block` gives it one.
+ * @csspart footer - The slot the footer arrives through, drawing no box, as `body` does.
+ * @csspart footer-actions - The slot the footer's controls arrive through, drawing no box, as `body` does.
  * @csspart footer-row - The line holding `footer` and `footer-actions`, drawn only while `footer-actions` holds something.
+ * @csspart header - The slot the header arrives through, drawing no box, as `body` does.
+ * @csspart header-actions - The slot the header's controls arrive through, drawing no box, as `body` does.
  * @csspart header-row - The line holding `header` and `header-actions`, drawn only while `header-actions` holds something.
+ * @csspart media - The slot the media arrives through, drawing no box, as `body` does.
  *
  * @cssproperty --card-align - How the regions pack when the card is stretched
  *   taller than its content. `start` by default, so the slack is at the bottom;

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

@@ -181,68 +181,6 @@ background-color: transparent;
 padding: var(--helix-space-none);
 }
 
-[part="indicator"] {
-
---_chat-typing-cycle: 1.2s;
-
-animation: helix-chat-typing var(--_chat-typing-cycle) infinite ease-in-out;
-background-image:
-radial-gradient(circle closest-side, currentColor 90%, transparent),
-radial-gradient(circle closest-side, currentColor 90%, transparent),
-radial-gradient(circle closest-side, currentColor 90%, transparent);
-background-position:
-0% 50%,
-50% 50%,
-100% 50%;
-background-repeat: no-repeat;
-background-size:
-20% 30%,
-20% 30%,
-20% 30%;
-block-size: 1lh;
-display: block;
-inline-size: 1.75em;
-opacity: 0.7;
-}
-
-@keyframes helix-chat-typing {
-0%,
-60%,
-100% {
-background-position:
-0% 50%,
-50% 50%,
-100% 50%;
-}
-
-20% {
-background-position:
-0% 10%,
-50% 50%,
-100% 50%;
-}
-
-33% {
-background-position:
-0% 50%,
-50% 10%,
-100% 50%;
-}
-
-46% {
-background-position:
-0% 50%,
-50% 50%,
-100% 10%;
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="indicator"] {
-animation: none;
-}
-}
-
 :host([state="failed"]) [part="meta"] {
 color: var(--helix-color-danger);
 }