@fusion.dev/helix 0.144.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,28 +24,43 @@ 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);
 transition: transform var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
-:host(:not([chevron-placement="start"])) [part="chevron"] {
+::slotted([slot="chevron"]) {
+block-size: 1em;
+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);
+}
+
+:host(:not([chevron-placement="start"])) [part="chevron"],
+:host(:not([chevron-placement="start"])) ::slotted([slot="chevron"]) {
 margin-inline-start: auto;
 }
 
-:host(:state(open)) [part="chevron"] {
+:host(:state(open)) [part="chevron"],
+:host(:state(open)) ::slotted([slot="chevron"]) {
 transform: scaleY(-1);
 }
 
-[part="trigger"]:hover:not(:disabled) [part="chevron"] {
-color: var(--helix-color-foreground);
+[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(--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 {
@@ -70,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

@@ -16,6 +16,8 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/accordion
  *
  * @slot - The content shown when the section is open.
+ * @slot chevron - Replaces the open and close indicator. A slotted icon is sized, colored and
+ *   turned like the drawn one.
  * @slot summary - The text of the button that opens and closes the section. Always shown.
  *
  * @csspart chevron - The open and close indicator.
@@ -25,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/palette.d.ts

@@ -0,0 +1,38 @@
+import type { ColorBytes, TokenColor } from '@fusion.dev/helix-core';
+/** The four ramp stops a shape is drawn through, as channels in `0..1`. */
+export interface AuraPalette {
+    glow: TokenColor;
+    ground: TokenColor;
+    haze: TokenColor;
+    peak: TokenColor;
+}
+/** The computed colors the canvas carries, one per stop and two for the peak. */
+export type PaletteStyle = Pick<CSSStyleDeclaration, 'caretColor' | 'color' | 'columnRuleColor' | 'outlineColor' | 'textDecorationColor'>;
+/** The default theme's dark page, ink on black, which is drawn until a read. */
+export declare const RESTING_PALETTE: AuraPalette;
+/**
+ * The ramp, from the colors the canvas's stylesheet resolved for it.
+ *
+ * **Carried on color properties of the canvas, which a canvas never paints**,
+ * because a custom property is handed back as the text that was written and a
+ * color property is resolved by the engine first. Read there, each stop takes
+ * the `--aura-*` hook a page wrote anywhere above the aura, and the token
+ * otherwise, the same way the fallback gradient on the host does:
+ *
+ * - `color`: `--aura-glow`, or `primary`.
+ * - `text-decoration-color`: `--aura-haze`, or `primary-subtle`.
+ * - `outline-color`: `--aura-ground`, or the background.
+ * - `column-rule-color` and `caret-color`: `--aura-peak`, or the light and the
+ *   dark page's own peak.
+ *
+ * **Light pages peak on the pressed `primary-active` and dark ones on the
+ * foreground**, and the ground is what says which: mixing a saturated hue
+ * toward near-black takes the chroma out of exactly the pixels carrying the
+ * most of it. Read from the ground's own luminance rather than asked of the
+ * color mode, which is a private token this tier may not reach for. A page
+ * that sets `--aura-peak` sets both, so its peak is used either way.
+ *
+ * @param style The canvas's computed style.
+ * @param read Turns a resolved color into bytes, `undefined` where it cannot.
+ */
+export declare const paletteOf: (style: PaletteStyle, read: (value: string) => ColorBytes | undefined) => AuraPalette;

package/dist/aura/palette.js

@@ -0,0 +1,22 @@
+export const RESTING_PALETTE = {
+    glow: [0.88, 0.88, 0.88],
+    ground: [0, 0, 0],
+    haze: [0.16, 0.16, 0.16],
+    peak: [1, 1, 1],
+};
+export const paletteOf = (style, read) => {
+    const channels = (value, fallback) => {
+        const bytes = read(value);
+        return bytes ? [bytes[0] / 255, bytes[1] / 255, bytes[2] / 255] : [...fallback];
+    };
+    const ground = channels(style.outlineColor, RESTING_PALETTE.ground);
+    const light = ground[0] * 0.2126 + ground[1] * 0.7152 + ground[2] * 0.0722 > 0.5;
+    return {
+        glow: channels(style.color, RESTING_PALETTE.glow),
+        ground,
+        haze: channels(style.textDecorationColor, RESTING_PALETTE.haze),
+        peak: light
+            ? channels(style.columnRuleColor, [0.02, 0.02, 0.02])
+            : channels(style.caretColor, RESTING_PALETTE.peak),
+    };
+};

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

@@ -1,5 +1,10 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
+
+--_aura-glow: var(--aura-glow, var(--helix-color-primary));
+--_aura-ground: var(--aura-ground, var(--helix-color-background));
+--_aura-haze: var(--aura-haze, var(--helix-color-primary-subtle));
+
 position: relative;
 display: block;
 inline-size: 100%;
@@ -7,9 +12,9 @@ block-size: 100%;
 
 background-image: radial-gradient(
 120% 90% at 62% 12%,
-color-mix(in oklab, var(--helix-color-primary) 38%, var(--helix-color-background)) 0%,
-var(--helix-color-primary-subtle) 38%,
-var(--helix-color-background) 78%
+color-mix(in oklab, var(--_aura-glow) 38%, var(--_aura-ground)) 0%,
+var(--_aura-haze) 38%,
+var(--_aura-ground) 78%
 );
 }
 
@@ -25,6 +30,25 @@ pointer-events: auto;
 display: block;
 inline-size: 100%;
 block-size: 100%;
+
+caret-color: var(--aura-peak, var(--helix-color-foreground));
+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"] {
+inset: 0;
+pointer-events: none;
+position: absolute;
+}
+
+::slotted(*) {
+pointer-events: auto;
 }
 
 [part="canvas"][hidden] {

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

@@ -33,13 +33,39 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * allow. Its behavior is drawing to a canvas, so there is no structure for you
  * to restyle and nothing for a headless version to hold.
  *
+ * **Content placed inside sits over the field**, in a `content` part that
+ * covers the aura, so an interactive aura answers the pointer over the
+ * content too. Clicks still reach the content. Style `::part(content)` to
+ * place it, such as centering a hero's heading.
+ *
+ * **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. 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.
+ *
  * @since 0.1.0
  * @status stable
  * @category media
  * @aliases Backdrop, Background, Atmosphere, Gradient
  * @documentation https://fusion.dev/helix/components/aura
  *
+ * @slot - Content drawn over the field, such as a heading.
+ *
+ * @event {HelixAuraFallbackEvent} helix-aura-fallback - Fired each time the aura stops drawing its shader and shows its gradient, with the reason.
+ *
  * @csspart canvas - The surface the shader draws into.
+ * @csspart content - The box over the field that holds the content. It covers the aura.
+ *
+ * @cssproperty --aura-glow - The bright stop of the ramp. Defaults to `--helix-color-primary`.
+ * @cssproperty --aura-ground - The page the field fades into. Defaults to `--helix-color-background`.
+ * @cssproperty --aura-haze - The faint stop between the ground and the glow. Defaults to `--helix-color-primary-subtle`.
+ * @cssproperty --aura-peak - The hottest stop, at the center of a shape. Defaults to `--helix-color-primary-active` on a light page and `--helix-color-foreground` on a dark one.
+ *
+ * @cssstate fallback - The aura shows its gradient: the renderer draws on the CPU, there is no WebGL, or the browser took the context back. Cleared once the shader draws again.
  */
 export declare class HelixAura extends HelixElement {
     static styles: CSSResultGroup;
@@ -173,19 +199,29 @@ export declare class HelixAura extends HelixElement {
      * states.
      */
     variant?: 'aurora' | 'braid' | 'caustics' | 'flow' | 'fracture' | 'lattice' | 'particles' | 'rays' | 'streaks' | 'threads' | 'waves';
-    /** Repaints when the palette moves, which no re-render would do on its own. */
-    private readonly tokens;
     /**
      * 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. */
+    private refused;
     private canvas;
     private gl;
     private program;
@@ -413,6 +449,15 @@ export declare class HelixAura extends HelixElement {
      * loss was canceled.
      */
     private readonly handleLost;
+    /**
+     * Shows the gradient, and says so once for each time it starts to.
+     *
+     * The state is what a stylesheet reads, and the event is what a script
+     * logs, such as to count how many readers see the gradient. Sent again only
+     * after the shader has drawn in between, so a context that is lost while
+     * the gradient already shows is not said twice.
+     */
+    private fallBack;
     /**
      * Draws again on the context the browser gave back.
      *
@@ -422,15 +467,17 @@ 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.
      *
-     * Light pages peak on the pressed `primary-active` and dark ones on the
-     * foreground, and the ground is what says which: mixing a saturated hue
-     * toward near-black takes the chroma out of exactly the pixels carrying the
-     * most of it. Read from the ground's own luminance rather than asked of the
-     * color mode, which is a private token this tier may not reach for.
+     * 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
+     * otherwise. `paletteOf` says which property is which, and how the peak is
+     * 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,10 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixAura_1;
-import { customElement, HelixElement, MAX_FRAME_STEP, PaintGateController, 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';
+import { paletteOf, RESTING_PALETTE } from '../palette.js';
 import { FRAGMENT, INTERACTIONS, SHAPES, VERTEX } from '../shader.js';
 import { styles } from './aura-root.css.js';
 const MAX_CANVAS_EDGE = 4096;
@@ -27,16 +28,9 @@ let HelixAura = class HelixAura extends HelixElement {
         this.speed = 1;
         this.tilt = 14;
         this.variance = 1;
-        this.tokens = new TokenColorController(this, () => {
-            this.readPalette();
-            this.paintOnce();
-        });
-        this.palette = {
-            glow: [0.88, 0.88, 0.88],
-            ground: [0, 0, 0],
-            haze: [0.16, 0.16, 0.16],
-            peak: [1, 1, 1],
-        };
+        this.palette = { ...RESTING_PALETTE };
+        this.carried = null;
+        this.refused = 'unavailable';
         this.canvas = null;
         this.gl = null;
         this.program = null;
@@ -87,6 +81,7 @@ let HelixAura = class HelixAura extends HelixElement {
             }
             this.program = null;
             this.canvas?.toggleAttribute('hidden', true);
+            this.fallBack('lost');
         };
         this.handleRestored = () => {
             if (!this.prepare()) {
@@ -103,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) {
@@ -132,7 +130,8 @@ let HelixAura = class HelixAura extends HelixElement {
         stencil: false,
     }; }
     render() {
-        return html `<canvas part="canvas" aria-hidden="true"></canvas>`;
+        return html `<canvas part="canvas" aria-hidden="true"></canvas>
+      <div part="content"><slot></slot></div>`;
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -150,15 +149,16 @@ let HelixAura = class HelixAura extends HelixElement {
             this.gl = null;
         }
         if (!this.program && !this.gl?.isContextLost() && !this.build()) {
+            this.fallBack(this.refused);
             return;
         }
         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();
         }
@@ -182,8 +182,10 @@ let HelixAura = class HelixAura extends HelixElement {
             return false;
         }
         if (HelixAura_1.drawsInSoftware()) {
+            this.refused = 'software';
             return false;
         }
+        this.refused = 'unavailable';
         let gl = canvas.getContext('webgl2', HelixAura_1.CONTEXT);
         if (gl?.isContextLost()) {
             const fresh = document.createElement('canvas');
@@ -212,6 +214,8 @@ let HelixAura = class HelixAura extends HelixElement {
             return false;
         }
         this.canvas?.toggleAttribute('hidden', false);
+        this.fallback = undefined;
+        this.toggleState('fallback', false);
         gl.useProgram(this.program);
         for (const name of [
             'uBloom',
@@ -258,22 +262,34 @@ 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 });
         this.release = window.setTimeout(this.drop, 0);
     }
+    fallBack(reason) {
+        if (this.fallback !== undefined) {
+            return;
+        }
+        this.fallback = reason;
+        this.toggleState('fallback', true);
+        this.dispatchEvent(new HelixAuraFallbackEvent({ reason }));
+    }
     readPalette() {
-        const ground = this.tokens.read('--helix-color-background', [0, 0, 0]);
-        const light = ground[0] * 0.2126 + ground[1] * 0.7152 + ground[2] * 0.0722 > 0.5;
-        this.palette = {
-            glow: this.tokens.read('--helix-color-primary', [0.88, 0.88, 0.88]),
-            ground,
-            haze: this.tokens.read('--helix-color-primary-subtle', [0.16, 0.16, 0.16]),
-            peak: light
-                ? this.tokens.read('--helix-color-primary-active', [0.02, 0.02, 0.02])
-                : this.tokens.read('--helix-color-foreground', [1, 1, 1]),
-        };
+        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) {
         const gl = this.gl;
@@ -350,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);