@fusion.dev/helix 0.145.0 → 0.147.0

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/avatar/group/avatar-group.css.js

@@ -1,20 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_avatar-group-ring: var(--avatar-group-ring-color, var(--helix-color-background));
-align-items: center;
-display: flex;
-}
-
-::slotted(*) {
-box-shadow: 0 0 0 var(--helix-border-thick) var(--_avatar-group-ring);
-flex: 0 0 auto;
-}
-
-::slotted(*:not(:first-child)) {
-margin-inline-start: calc(-1 * var(--avatar-group-overlap, var(--helix-space-sm)));
-}
-
-:host([max="1"]) ::slotted(:nth-child(n + 2)),
+export const styles = createSheet(`:host {--_avatar-group-ring: var(--avatar-group-ring-color, var(--helix-color-background));align-items: center;display: flex;}::slotted(*) {box-shadow: 0 0 0 var(--helix-border-thick) var(--_avatar-group-ring);flex: 0 0 auto;}::slotted(*:not(:first-child)) {margin-inline-start: calc(-1 * var(--avatar-group-overlap, var(--helix-space-sm)));}:host([max="1"]) ::slotted(:nth-child(n + 2)),
 :host([max="2"]) ::slotted(:nth-child(n + 3)),
 :host([max="3"]) ::slotted(:nth-child(n + 4)),
 :host([max="4"]) ::slotted(:nth-child(n + 5)),
@@ -25,23 +10,7 @@ margin-inline-start: calc(-1 * var(--avatar-group-overlap, var(--helix-space-sm)
 :host([max="9"]) ::slotted(:nth-child(n + 10)),
 :host([max="10"]) ::slotted(:nth-child(n + 11)),
 :host([max="11"]) ::slotted(:nth-child(n + 12)),
-:host([max="12"]) ::slotted(:nth-child(n + 13)) {
-display: none;
-}
-
-[part="overflow"] {
-align-items: center;
-margin-inline-start: calc(-1 * var(--avatar-group-overlap, var(--helix-space-sm)));
-background-color: var(--helix-color-surface-sunken);
-block-size: var(--avatar-size, var(--helix-size-control-md));
-border-radius: var(--helix-radii-full);
-box-shadow: 0 0 0 var(--helix-border-thick) var(--_avatar-group-ring);
-color: var(--helix-color-foreground-muted);
-display: inline-flex;
-flex: 0 0 auto;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-font-weight: var(--helix-weight-medium);
-inline-size: var(--avatar-size, var(--helix-size-control-md));
-justify-content: center;
-}`);
+:host([max="12"]) ::slotted(:nth-child(n + 13)) {display: none;}[part="overflow"] {align-items: center;margin-inline-start: calc(-1 * var(--avatar-group-overlap, var(--helix-space-sm)));background-color: var(
+--avatar-group-overflow-background-color,
+var(--helix-color-surface-sunken)
+);block-size: var(--avatar-size, var(--helix-size-control-md));border-radius: var(--helix-radii-full);box-shadow: 0 0 0 var(--helix-border-thick) var(--_avatar-group-ring);color: var(--avatar-group-overflow-color, var(--helix-color-foreground-muted));display: inline-flex;flex: 0 0 auto;font-family: var(--helix-font-sans);font-size: var(--avatar-group-overflow-font-size, var(--helix-text-xs));font-weight: var(--helix-weight-medium);inline-size: var(--avatar-size, var(--helix-size-control-md));justify-content: center;}`);

package/dist/avatar/group/avatar-group.d.ts

@@ -18,6 +18,9 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Avatar stack, Facepile
  * @documentation https://fusion.dev/helix/components/avatar
  *
+ * @cssproperty --avatar-group-overflow-background-color - The fill of the count of avatars past `max`.
+ * @cssproperty --avatar-group-overflow-color - The color of the count of avatars past `max`.
+ * @cssproperty --avatar-group-overflow-font-size - The type size of the count of avatars past `max`.
  * @cssproperty --avatar-group-overlap - How far each avatar sits over the one before it.
  * @cssproperty --avatar-group-ring-color - Color of the ring that separates one avatar from the next.
  */

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

@@ -1,54 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_avatar-size: var(--avatar-size, var(--helix-size-avatar));
-
-align-items: center;
-
-background-color: var(--avatar-background-color, var(--helix-color-surface-raised));
-block-size: var(--_avatar-size);
-border-radius: var(--helix-radii-full);
-color: var(--helix-color-foreground);
-display: inline-flex;
-flex: 0 0 auto;
-inline-size: var(--_avatar-size);
-justify-content: center;
-overflow: hidden;
-}
-
-:host([size="sm"]) {
---_avatar-size: var(--avatar-size, var(--helix-size-avatar-sm));
-}
-
-:host([size="lg"]) {
---_avatar-size: var(--avatar-size, var(--helix-size-avatar-lg));
-}
-
-:host([shape="rounded"]) {
-border-radius: var(--helix-radii-md);
-}
-
-::slotted(*) {
-block-size: 100%;
-inline-size: 100%;
-object-fit: cover;
-}
-
-[part="image"] {
-block-size: 100%;
-inline-size: 100%;
-object-fit: cover;
-}
-
-[part="initials"] {
-font-size: calc(var(--_avatar-size) * 0.4);
-font-weight: var(--helix-weight-medium);
-letter-spacing: var(--helix-tracking-wide);
-line-height: 1;
-user-select: none;
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+export const styles = createSheet(`:host {--_avatar-size: var(--avatar-size, var(--helix-size-avatar));align-items: center;background-color: var(--avatar-background-color, var(--helix-color-surface-raised));block-size: var(--_avatar-size);border-radius: var(--helix-radii-full);color: var(--avatar-color, var(--helix-color-foreground));display: inline-flex;flex: 0 0 auto;inline-size: var(--_avatar-size);justify-content: center;overflow: hidden;}:host([size="sm"]) {--_avatar-size: var(--avatar-size, var(--helix-size-avatar-sm));}:host([size="lg"]) {--_avatar-size: var(--avatar-size, var(--helix-size-avatar-lg));}:host([shape="rounded"]) {border-radius: var(--helix-radii-md);}::slotted(*) {block-size: 100%;inline-size: 100%;object-fit: cover;}[part="image"] {block-size: 100%;inline-size: 100%;object-fit: cover;}[part="initials"] {font-size: calc(var(--_avatar-size) * 0.4);font-weight: var(--avatar-font-weight, var(--helix-weight-medium));letter-spacing: var(--helix-tracking-wide);line-height: 1;user-select: none;}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -20,6 +20,8 @@ import type { CSSResultGroup } from 'lit';
  * @csspart initials - The initials shown when there is no usable image.
  *
  * @cssproperty --avatar-background-color - Fill behind the initials.
+ * @cssproperty --avatar-color - The color of the initials.
+ * @cssproperty --avatar-font-weight - The weight of the initials.
  * @cssproperty --avatar-size - Edge length of the avatar.
  */
 export declare class HelixAvatar extends HelixHeadlessAvatar {

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

@@ -1,147 +1,22 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---_badge-size: var(--helix-size-badge);
---_badge-text: var(--helix-text-xs);
---_badge-inset: var(--helix-space-2xs);
---_badge-dot: var(--helix-space-xs);
-
---_badge-on: var(--helix-color-foreground-on-primary);
-display: inline-flex;
-position: relative;
-vertical-align: middle;
-}
-
-[part="indicator"] {
-align-items: center;
-
-background-color: var(--badge-background-color, var(--helix-color-primary-surface));
-block-size: var(--_badge-size);
-border-radius: var(--helix-radii-full);
-
-box-shadow: 0 0 0 var(--helix-border-thick) var(--badge-ring-color, var(--helix-color-background));
-
-color: var(--badge-color, var(--_badge-on));
-display: inline-flex;
-font-size: var(--_badge-text);
-font-weight: var(--helix-weight-semibold);
-
-inset-block-start: var(--badge-offset, calc(var(--_badge-size) / 4));
-inset-inline-end: var(--badge-offset, calc(var(--_badge-size) / 4));
-justify-content: center;
-line-height: 1;
-
-min-inline-size: var(--_badge-size);
-padding-inline: var(--_badge-inset);
-
-pointer-events: none;
-position: absolute;
-translate: 50% -50%;
-white-space: nowrap;
-}
-
-[part="indicator"]:empty {
-block-size: var(--_badge-dot);
-min-inline-size: var(--_badge-dot);
-padding-inline: var(--helix-space-none);
-}
-
-[part="indicator"][data-single] {
-padding-inline: var(--helix-space-none);
-}
-
-[part="indicator"] {
-scale: 1;
-transition:
+export const styles = createSheet(`:host {--_badge-size: var(--helix-size-badge);--_badge-text: var(--helix-text-xs);--_badge-inset: var(--helix-space-2xs);--_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;}[part="indicator"] {align-items: center;background-color: var(--badge-background-color, var(--_badge-fill));block-size: var(--_badge-size);border-radius: var(--badge-radius, var(--helix-radii-full));box-shadow: 0 0 0 var(--helix-border-thick) var(--badge-ring-color, var(--helix-color-background));color: var(--badge-color, var(--_badge-on));display: inline-flex;font-size: var(--_badge-text);font-weight: var(--badge-font-weight, var(--helix-weight-semibold));inset-block-start: var(--badge-offset, calc(var(--_badge-size) / 4));inset-inline-end: var(--badge-offset, calc(var(--_badge-size) / 4));justify-content: center;line-height: 1;min-inline-size: var(--_badge-size);padding-inline: var(--_badge-inset);pointer-events: none;position: absolute;translate: 50% -50%;white-space: nowrap;}[part="indicator"]:empty {block-size: var(--_badge-dot);min-inline-size: var(--_badge-dot);padding-inline: var(--helix-space-none);}[part="indicator"][data-single] {padding-inline: var(--helix-space-none);}[part="indicator"] {scale: 1;transition:
 opacity var(--helix-duration-fast) var(--helix-easing-standard),
-scale var(--helix-duration-normal) var(--helix-easing-emphasized);
-}
-
-[part="indicator"][data-blank] {
-opacity: 0;
-scale: 0;
-transition:
+scale var(--helix-duration-normal) var(--helix-easing-emphasized);}[part="indicator"][data-blank] {opacity: 0;scale: 0;transition:
 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="accent"]) [part="indicator"] {
-background-color: var(--badge-background-color, var(--helix-color-accent-surface));
-}
-
-:host([tone="accent"]) {
---_badge-on: var(--helix-color-foreground-on-accent);
-}
-
-:host([tone="danger"]),
+scale var(--helix-duration-fast) var(--helix-easing-accelerate);}:host([tone="primary"]) {--_badge-fill: var(--helix-color-primary-surface);}:host([tone="accent"]) {--_badge-fill: var(--helix-color-accent-surface);}:host([tone="accent"]) {--_badge-on: var(--helix-color-foreground-on-accent);}:host([tone="danger"]),
 :host([tone="info"]),
 :host([tone="success"]),
-:host([tone="warning"]) {
---_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="success"]) [part="indicator"] {
-background-color: var(--badge-background-color, var(--helix-color-success-surface));
-}
-
-:host([tone="warning"]) [part="indicator"] {
-background-color: var(--badge-background-color, var(--helix-color-warning-surface));
-}
-
-:host([tone="danger"]) [part="indicator"] {
-background-color: var(--badge-background-color, 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([placement="top-start"]) [part="indicator"],
-:host([placement="bottom-start"]) [part="indicator"] {
-inset-inline-end: auto;
-inset-inline-start: var(--badge-offset, calc(var(--_badge-size) / 4));
-}
-
-:host([placement="bottom-end"]) [part="indicator"],
-:host([placement="bottom-start"]) [part="indicator"] {
-inset-block-end: var(--badge-offset, calc(var(--_badge-size) / 4));
-inset-block-start: auto;
-}
-
-:host([placement="top-start"]) [part="indicator"] {
-translate: -50% -50%;
-}
-
-:host([placement="bottom-end"]) [part="indicator"] {
-translate: 50% 50%;
-}
-
-:host([placement="bottom-start"]) [part="indicator"] {
-translate: -50% 50%;
-}
-
-:host([placement="inline"]) {
-align-items: center;
-gap: var(--badge-gap, var(--helix-space-2xs));
-}
-
-:host([placement="inline"]) [part="indicator"] {
-box-shadow: none;
-position: static;
-translate: none;
-}
-
-@media print {
-:host {
-box-shadow: none;
-}
-}`);
+:host([tone="warning"]) {--_badge-on: var(--helix-color-foreground-on-status);}:host([tone="info"]) {--_badge-fill: var(--helix-color-info-surface);}:host([tone="success"]) {--_badge-fill: var(--helix-color-success-surface);}:host([tone="warning"]) {--_badge-fill: var(--helix-color-warning-surface);}:host([tone="danger"]) {--_badge-fill: var(--helix-color-danger-surface);}:host([tone="neutral"]) {--_badge-fill: var(--helix-color-surface-raised);--_badge-on: var(--helix-color-foreground);}:host([placement="top-start"]) [part="indicator"],
+:host([placement="bottom-start"]) [part="indicator"] {inset-inline-end: auto;inset-inline-start: var(--badge-offset, calc(var(--_badge-size) / 4));}:host([placement="bottom-end"]) [part="indicator"],
+:host([placement="bottom-start"]) [part="indicator"] {inset-block-end: var(--badge-offset, calc(var(--_badge-size) / 4));inset-block-start: auto;}:host([placement="top-start"]) [part="indicator"] {translate: -50% -50%;}:host([placement="bottom-end"]) [part="indicator"] {translate: 50% 50%;}:host([placement="bottom-start"]) [part="indicator"] {translate: -50% 50%;}:host([placement="inline"]) {align-items: center;gap: var(--badge-gap, var(--helix-space-2xs));}:host([placement="inline"]) [part="indicator"] {box-shadow: none;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,13 +20,33 @@ 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-font-weight - The weight of the count.
  * @cssproperty --badge-gap - The space between the content and the count under `placement="inline"`.
  * @cssproperty --badge-offset - Pulls the mark in from the corner, along both axes.
+ * @cssproperty --badge-radius - How far the indicator's corners are rounded.
  * @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);