@fusion.dev/helix 0.153.0 → 0.154.0

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

@@ -1,5 +1,5 @@
 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);--_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:
+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"][data-dot] {block-size: auto;min-block-size: var(--_badge-dot);min-inline-size: var(--_badge-dot);padding-inline: var(--helix-space-none);}[part="indicator"][data-dot] slot[name="icon"]::slotted(*) {margin: calc(var(--_badge-inset) / 2);}[part="indicator"] {gap: calc(var(--_badge-inset) / 2);}slot[name="icon"]::slotted(*) {--icon-size: var(--badge-icon-size, var(--_badge-text));flex: 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:
 opacity var(--helix-duration-fast) var(--helix-easing-standard),

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

@@ -25,6 +25,7 @@ import type { CSSResultGroup } from 'lit';
  * @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-icon-size - The size of an icon in the `icon` slot. The count's own size by default.
  * @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.

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

@@ -4,4 +4,6 @@ var(--card-border-color, var(--helix-color-border));border-radius: var(--card-ra
 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: 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;}}`);
+slot[name="footer-actions"]::slotted(*) {flex: none;justify-self: end;}[part="footer-row"] slot[name="footer-actions"]::slotted(*) {margin-inline-start: auto;}:host(:not(:defined)) {column-gap: var(--helix-space-none);grid-template-columns: minmax(0, 1fr) auto;}:host(:not(:defined)) slot::slotted(*) {grid-column: 1 / -1;}:host(:not(:defined)) slot[name="header"]::slotted(*),
+:host(:not(:defined)) slot[name="footer"]::slotted(*) {grid-column: 1;}:host(:not(:defined)) slot[name="header-actions"]::slotted(*),
+:host(:not(:defined)) slot[name="footer-actions"]::slotted(*) {align-self: center;grid-column: 2;margin-inline-start: var(--card-gap, var(--helix-space-sm));}: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/code/root/code-root.css.js

@@ -2,7 +2,7 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {display: inline;}[part="code"] {background-color: var(
 --code-background-color,
 color-mix(in oklab, var(--helix-color-foreground) 6%, transparent)
-);border-radius: var(--code-radius, var(--helix-radii-sm));color: var(
+);border-radius: var(--code-radius, var(--helix-radii-sm));-webkit-box-decoration-break: clone;box-decoration-break: clone;color: var(
 --code-foreground-color,
 color-mix(in oklab, var(--helix-color-foreground) 30%, var(--helix-color-foreground-muted))
-);font-family: var(--code-font-family, var(--helix-font-mono));font-size: var(--code-size, calc(var(--helix-text-sm) / var(--helix-text-md) * 1em));padding-block: var(--helix-space-none);padding-inline: var(--code-padding, calc(var(--helix-space-2xs) * 0.5));}@media print {[part="code"] {background-color: transparent;}}`);
+);font-family: var(--code-font-family, var(--helix-font-mono));font-size: var(--code-size, calc(var(--helix-text-sm) / var(--helix-text-md) * 1em));overflow-wrap: break-word;padding-block: var(--helix-space-none);padding-inline: var(--code-padding, calc(var(--helix-space-2xs) * 0.5));}@media print {[part="code"] {background-color: transparent;}}`);

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

@@ -11,6 +11,7 @@ import type { CSSResultGroup } from 'lit';
  * @since 0.1.0
  * @status stable
  * @category typography
+ * @aliases Inline code
  * @documentation https://fusion.dev/helix/components/code
  *
  * @cssproperty --code-background-color - Fill behind the fragment. Defaults to the

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

@@ -1,5 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
-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"],
+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);}[part="block"]:focus-visible,
+[part="code"]:focus-visible,
+[part="old"]:focus-visible,
+[part="new"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}: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"] + *)

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

@@ -23,6 +23,7 @@ import '../../copy-button/index.js';
  * @since 0.1.0
  * @status stable
  * @category typography
+ * @aliases Code block, Snippet, Pre
  * @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.

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

@@ -1,2 +1,9 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {block-size: var(--icon-size, var(--helix-size-icon));display: inline-flex;flex: 0 0 auto;inline-size: var(--icon-size, var(--helix-size-icon));}[part="svg"] {block-size: 100%;inline-size: 100%;}@media print {:host {print-color-adjust: economy;}}`);
+export const styles = createSheet(`:host {block-size: var(--icon-size, var(--helix-size-icon));display: inline-flex;flex: 0 0 auto;inline-size: var(--icon-size, var(--helix-size-icon));}[part="svg"] {block-size: 100%;inline-size: 100%;rotate: var(--icon-rotate, none);}:host([auto-width]) {inline-size: auto;}:host([auto-width]) [part="svg"] {inline-size: auto;}:host([rotate="90"]) [part="svg"] {rotate: 90deg;}:host([rotate="180"]) [part="svg"] {rotate: 180deg;}:host([rotate="270"]) [part="svg"] {rotate: 270deg;}:host([flip="x"]) [part="svg"] {transform: scale(-1, 1);}:host([flip="y"]) [part="svg"] {transform: scale(1, -1);}:host([flip="both"]) [part="svg"] {transform: scale(-1, -1);}:host([animation="spin"]) {animation: helix-icon-spin var(--icon-animation-duration, calc(var(--helix-duration-slow) * 3))
+linear infinite;}:host([animation="pulse"]) {animation: helix-icon-pulse var(--icon-animation-duration, calc(var(--helix-duration-slow) * 6))
+ease-in-out infinite;}:host([animation="beat"]) {animation: helix-icon-beat var(--icon-animation-duration, calc(var(--helix-duration-slow) * 3))
+ease-in-out infinite;}@keyframes helix-icon-spin {to {rotate: 1turn;}}@keyframes helix-icon-pulse {50% {opacity: 0.4;}}@keyframes helix-icon-beat {0%,
+60%,
+100% {scale: 1;}30% {scale: 1.2;}}@media (prefers-reduced-motion: reduce) {:host([animation="spin"]),
+:host([animation="pulse"]),
+:host([animation="beat"]) {animation: none;}}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -9,6 +9,13 @@ import type { CSSResultGroup } from 'lit';
  * Inside a button, `--icon-size` is set in `em`, so the icon scales with the
  * button.
  *
+ * **The glyph turns, flips and moves inside its own box**, so the line around
+ * it keeps its place: `rotate` turns it by a quarter, a half or three
+ * quarters, `--icon-rotate` by any angle, `flip` mirrors it across either
+ * axis, and `animation` spins, pulses or beats it, as Web Awesome's icon does.
+ * Reduced motion stills every animation. `auto-width` gives the box the
+ * glyph's own proportions, for a mark wider than it is tall.
+ *
  * @since 0.1.0
  * @status stable
  * @category media
@@ -17,9 +24,39 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart svg - The rendered SVG.
  *
- * @cssproperty --icon-size - The width and height of the icon's box.
+ * @cssproperty --icon-animation-duration - How long one turn, pulse or beat of `animation` takes.
+ * @cssproperty --icon-rotate - An angle the glyph is turned by, such as `45deg`. `rotate` wins over it.
+ * @cssproperty --icon-size - The width and height of the icon's box. The height alone under `auto-width`.
  */
 export declare class HelixIcon extends HelixHeadlessIcon {
+    /**
+     * A motion that draws the eye or says work is going on: `spin` turns the
+     * glyph without end, `pulse` fades it in and out, and `beat` swells it.
+     *
+     * Absent is still. Reduced motion stills every one of them.
+     */
+    animation?: 'beat' | 'pulse' | 'spin';
+    /**
+     * Whether the box takes the glyph's own proportions, its height from
+     * `--icon-size` and its width from the glyph's box.
+     *
+     * Absent is a square, which lines icons up in a column.
+     */
+    autoWidth: boolean;
+    /**
+     * Mirrors the glyph across an axis: `x` left to right, `y` top to bottom,
+     * `both` across both.
+     *
+     * Absent draws it as it is. On a right-to-left page, `mirror` is the flip
+     * that follows the direction.
+     */
+    flip?: 'both' | 'x' | 'y';
+    /**
+     * Turns the glyph clockwise by 90, 180 or 270 degrees.
+     *
+     * Absent draws it upright. `--icon-rotate` turns it by any other angle.
+     */
+    rotate?: 90 | 180 | 270;
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/icon/root/icon-root.js

@@ -6,10 +6,27 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessIcon } from '@fusion.dev/helix-headless/icon/root';
+import { property } from 'lit/decorators.js';
 import { styles } from './icon-root.css.js';
 let HelixIcon = class HelixIcon extends HelixHeadlessIcon {
+    constructor() {
+        super(...arguments);
+        this.autoWidth = false;
+    }
     static { this.styles = styles; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixIcon.prototype, "animation", void 0);
+__decorate([
+    property({ attribute: 'auto-width', reflect: true, type: Boolean })
+], HelixIcon.prototype, "autoWidth", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixIcon.prototype, "flip", void 0);
+__decorate([
+    property({ reflect: true, type: Number })
+], HelixIcon.prototype, "rotate", void 0);
 HelixIcon = __decorate([
     customElement('helix-icon')
 ], HelixIcon);

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: inline;font: inherit;}[part="quote"] {color: var(--quote-color, var(--helix-color-foreground-muted));font: inherit;font-family: var(--quote-font-family, inherit);font-style: var(--quote-font-style, italic);font-weight: var(--quote-font-weight, inherit);}@media print {:host {print-color-adjust: economy;}}`);
+export const styles = createSheet(`:host {display: inline;font: inherit;}[part="quote"] {color: var(--quote-color, var(--helix-color-foreground-muted));font: inherit;font-family: var(--quote-font-family, inherit);font-style: var(--quote-font-style, italic);font-weight: var(--quote-font-weight, inherit);}:host([no-marks]) [part="quote"]::before {content: no-open-quote;}:host([no-marks]) [part="quote"]::after {content: no-close-quote;}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -1,20 +1,24 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;inline-size: 100%;}:host(:not([shape])) {block-size: var(--skeleton-block-size, var(--helix-size-control));}:host([shape="text"]) {block-size: 1em;}:host([shape="circle"]) {aspect-ratio: 1 / 1;inline-size: var(--skeleton-size, var(--helix-size-control));}[part="skeleton"] {background-color: var(
+export const styles = createSheet(`:host {display: block;inline-size: 100%;}:host(:not([shape])) {block-size: var(--skeleton-block-size, var(--helix-size-control));}:host([shape="text"]) {block-size: 1em;}:host([shape="text"][lines]:not([lines="1"]):not([lines="0"])) {block-size: auto;}:host([shape="circle"]) {aspect-ratio: 1 / 1;inline-size: var(--skeleton-size, var(--helix-size-control));}[part~="skeleton"] {background-color: var(
 --skeleton-color,
 color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
-);block-size: 100%;border-radius: var(--skeleton-radius, var(--helix-radii-sm));display: block;inline-size: 100%;overflow: hidden;position: relative;}[part="sheen"] {animation: helix-skeleton-sweep var(--skeleton-duration, calc(var(--helix-duration-slow) * 4))
+);block-size: 100%;border-radius: var(--skeleton-radius, var(--helix-radii-sm));display: block;inline-size: 100%;overflow: hidden;position: relative;}[part="lines"] {display: flex;flex-direction: column;gap: calc((var(--helix-leading-normal) - 1) * 1em);}[part~="line"] {block-size: 1em;}[part~="line"]:last-child:not(:first-child) {inline-size: var(--skeleton-last-line-size, 60%);}[part="sheen"] {animation: helix-skeleton-sweep var(--skeleton-duration, calc(var(--helix-duration-slow) * 4))
 ease-in-out infinite;background-image: linear-gradient(
 90deg,
 transparent 0%,
 var(--skeleton-sheen-color, color-mix(in oklab, var(--helix-color-foreground) 8%, transparent))
 50%,
 transparent 100%
-);display: block;inline-size: 200%;inset-block: 0;inset-inline-start: 0;position: absolute;}:host([shape="text"]) [part="skeleton"] {border-radius: var(--helix-radii-full);}:host([shape="circle"]) [part="skeleton"] {border-radius: var(--helix-radii-full);}:host([effect="pulse"]) [part="sheen"],
-:host([effect="none"]) [part="sheen"] {animation: none;background-image: none;}:host([effect="pulse"]) [part="skeleton"] {animation: helix-skeleton-pulse var(--skeleton-duration, calc(var(--helix-duration-slow) * 4))
+);display: block;inline-size: 200%;inset-block: 0;inset-inline-start: 0;position: absolute;}:host([shape="text"]) [part~="skeleton"] {border-radius: var(--helix-radii-full);}:host([shape="circle"]) [part="skeleton"] {border-radius: var(--helix-radii-full);}:host([effect="pulse"]) [part="sheen"],
+:host([effect="none"]) [part="sheen"] {animation: none;background-image: none;}:host([effect="pulse"]) [part~="skeleton"] {animation: helix-skeleton-pulse var(--skeleton-duration, calc(var(--helix-duration-slow) * 4))
 ease-in-out infinite;}@keyframes helix-skeleton-pulse {50% {opacity: 0.4;}}:host(:state(wrapping)),
 :host(:not(:defined):not(:empty)) {block-size: auto;inline-size: fit-content;max-inline-size: 100%;position: relative;}:host(:state(wrapping)) [part="content"],
 :host(:not(:defined):not(:empty)) [part="content"] {display: block;}:host(:state(wrapping)) [part="skeleton"],
-:host(:not(:defined):not(:empty)) [part="skeleton"] {block-size: auto;inset: 0;position: absolute;}:host(:state(wrapping):not([loading])) [part="skeleton"],
-:host(:not(:defined):not(:empty):not([loading])) [part="skeleton"] {display: none;}:host([loading]:state(wrapping)) [part="content"],
+:host(:not(:defined):not(:empty)) [part="skeleton"],
+:host(:state(wrapping)) [part="lines"],
+:host(:not(:defined):not(:empty)) [part="lines"] {block-size: auto;inset: 0;position: absolute;}:host(:state(wrapping):not([loading])) [part="skeleton"],
+:host(:not(:defined):not(:empty):not([loading])) [part="skeleton"],
+:host(:state(wrapping):not([loading])) [part="lines"],
+:host(:not(:defined):not(:empty):not([loading])) [part="lines"] {display: none;}:host([loading]:state(wrapping)) [part="content"],
 :host([loading]:not(:defined):not(:empty)) [part="content"] {visibility: hidden;}@keyframes helix-skeleton-sweep {from {translate: -50% 0;}to {translate: 50% 0;}}@media (prefers-reduced-motion: reduce) {[part="sheen"],
-:host([effect="pulse"]) [part="skeleton"] {animation: none;}[part="sheen"] {background-image: none;}}@media print {:host {display: none;}}`);
+:host([effect="pulse"]) [part~="skeleton"] {animation: none;}[part="sheen"] {background-image: none;}}@media print {:host {display: none;}}`);

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

@@ -1,5 +1,5 @@
 import { HelixHeadlessSkeleton } from '@fusion.dev/helix-headless/skeleton';
-import type { CSSResultGroup } from 'lit';
+import { type CSSResultGroup, type TemplateResult } from 'lit';
 /**
  * @summary A placeholder shown in place of content that is still loading.
  *
@@ -11,6 +11,11 @@ import type { CSSResultGroup } from 'lit';
  * Around content with `loading`, the skeleton takes the content's box and
  * paints over it, and the content is hidden until `loading` is taken off.
  *
+ * **`lines` draws a paragraph.** With `shape="text"` and `lines="3"`, one
+ * element stands in for three lines of text: each line a `skeleton` part one
+ * `em` tall, spaced a body line height apart, and the last one shorter, as the end
+ * of a paragraph is.
+ *
  * @since 0.1.0
  * @status stable
  * @category feedback
@@ -18,12 +23,15 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/skeleton
  *
  * @csspart content - The box around the content, hidden while `loading`.
+ * @csspart line - Each line of a `lines` paragraph, which is also a `skeleton` part.
+ * @csspart lines - The column holding a `lines` paragraph, drawn only for `shape="text"` with two or more lines.
  * @csspart sheen - The highlight swept across the shape. Hidden for `effect="pulse"` and `effect="none"`.
- * @csspart skeleton - The placeholder shape.
+ * @csspart skeleton - The placeholder shape, or each line of a `lines` paragraph.
  *
  * @cssproperty --skeleton-block-size - The height of the block shape, which is the shape when `shape` is unset. Defaults to the control height.
  * @cssproperty --skeleton-color - The placeholder's fill.
  * @cssproperty --skeleton-duration - How long one sweep or one pulse takes.
+ * @cssproperty --skeleton-last-line-size - The width of the last line of a `lines` paragraph. Defaults to 60%.
  * @cssproperty --skeleton-radius - The corner of the block shape.
  * @cssproperty --skeleton-sheen-color - The highlight the sweep carries across the fill.
  * @cssproperty --skeleton-size - The diameter of the circle shape.
@@ -36,6 +44,13 @@ export declare class HelixSkeleton extends HelixHeadlessSkeleton {
      * Reduced motion stills both.
      */
     effect?: 'none' | 'pulse';
+    /**
+     * How many lines of text the placeholder stands for, with `shape="text"`.
+     *
+     * Absent, or 1, is one line. Reflected, because the stylesheet sizes a
+     * paragraph by it.
+     */
+    lines?: number;
     /**
      * The shape of the placeholder: `text`, `circle`, or a block when unset.
      *
@@ -45,6 +60,7 @@ export declare class HelixSkeleton extends HelixHeadlessSkeleton {
      */
     shape?: 'text' | 'circle';
     static styles: CSSResultGroup;
+    protected renderShape(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/skeleton/root/skeleton-root.js

@@ -6,14 +6,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessSkeleton } from '@fusion.dev/helix-headless/skeleton';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styles } from './skeleton-root.css.js';
 let HelixSkeleton = class HelixSkeleton extends HelixHeadlessSkeleton {
     static { this.styles = styles; }
+    renderShape() {
+        const count = Math.floor(this.lines ?? 1);
+        if (this.shape !== 'text' || !(count > 1)) {
+            return super.renderShape();
+        }
+        return html `<span part="lines">${Array.from({ length: count }, () => html `<span part="skeleton line"><span part="sheen"></span></span>`)}</span>`;
+    }
 };
 __decorate([
     property({ reflect: true })
 ], HelixSkeleton.prototype, "effect", void 0);
+__decorate([
+    property({ reflect: true, type: Number })
+], HelixSkeleton.prototype, "lines", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixSkeleton.prototype, "shape", void 0);

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

@@ -1,4 +1,4 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {align-content: start;align-items: baseline;display: grid;gap: var(--stat-gap, var(--helix-space-2xs));grid-template-columns: auto 1fr;}slot[name="label"]::slotted(*) {color: var(--stat-label-color, var(--helix-color-foreground-muted));font-size: var(--stat-label-size, calc(var(--helix-text-xs) / var(--helix-text-md) * 1em));font-weight: var(--helix-weight-medium);grid-column: 1 / -1;letter-spacing: var(--helix-tracking-wide);}slot:not([name]) {color: var(--stat-value-color, var(--helix-color-foreground));font-family: var(--helix-font-display);font-size: var(--stat-value-size, calc(var(--helix-text-3xl) / var(--helix-text-md) * 1em));font-weight: var(--helix-weight-semibold);letter-spacing: var(--helix-tracking-tight);line-height: var(--helix-leading-tight);}slot[name="unit"]::slotted(*) {color: var(--stat-unit-color, var(--helix-color-foreground-muted));font-size: var(--stat-unit-size, calc(var(--helix-text-md) / var(--helix-text-md) * 1em));font-weight: var(--helix-weight-medium);}slot[name="trend"]::slotted(*) {grid-column: 1 / -1;}:host([direction="column-reverse"]) slot[name="label"]::slotted(*) {order: 1;}:host([direction="row"]),
+export const styles = createSheet(`:host {align-content: start;align-items: baseline;display: grid;gap: var(--stat-gap, var(--helix-space-2xs));grid-template-columns: auto 1fr;}slot[name="label"]::slotted(*) {color: var(--stat-label-color, var(--helix-color-foreground-muted));font-size: var(--stat-label-size, calc(var(--helix-text-xs) / var(--helix-text-md) * 1em));font-weight: var(--helix-weight-medium);grid-column: 1 / -1;letter-spacing: var(--helix-tracking-wide);}[part="value"] {color: var(--stat-value-color, var(--helix-color-foreground));font-family: var(--helix-font-display);font-size: var(--stat-value-size, calc(var(--helix-text-3xl) / var(--helix-text-md) * 1em));font-weight: var(--helix-weight-semibold);letter-spacing: var(--helix-tracking-tight);line-height: var(--helix-leading-tight);}slot[name="unit"]::slotted(*) {color: var(--stat-unit-color, var(--helix-color-foreground-muted));font-size: var(--stat-unit-size, calc(var(--helix-text-md) / var(--helix-text-md) * 1em));font-weight: var(--helix-weight-medium);}slot[name="trend"]::slotted(*) {grid-column: 1 / -1;}:host([direction="column-reverse"]) slot[name="label"]::slotted(*) {order: 1;}:host([direction="row"]),
 :host([direction="row-reverse"]) {align-items: baseline;display: flex;gap: var(--stat-gap, var(--helix-space-xs));}:host([direction="row"]) slot[name="label"]::slotted(*),
 :host([direction="row-reverse"]) slot[name="label"]::slotted(*) {grid-column: auto;}:host([direction="row-reverse"]) slot[name="label"] {order: 1;}@media print {:host {print-color-adjust: economy;}}`);