@fusion.dev/helix 0.153.0 → 0.155.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/breadcrumbs/breadcrumb/breadcrumb.css.js

@@ -19,4 +19,8 @@ color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
 :host(:state(end)) ::slotted(a:focus-visible) {outline-offset: calc(var(--helix-size-focus-offset) * -1);}:host(:state(end)) [part="link"]:focus-visible,
 :host(:state(end)) ::slotted(a:focus-visible),
 :host(:state(end)) slot[name="end"]:focus-within {position: relative;z-index: var(--helix-layer-raised);}:host(:state(end)) [part="link"]:hover ~ slot[name="end"] {--icon-button-background-color: var(--_breadcrumbs-split-fill, transparent);}:host(:state(end)) [part="link"]:has(~ slot[name="end"]:hover),
-:host(:state(end)) [part="link"]:has(~ slot[name="end"]:hover) ::slotted(a) {background-color: var(--_breadcrumbs-split-fill, transparent);}:host(:state(end)) [part="link"] {position: relative;}:host(:state(end)) [part="link"]::after {background-color: var(--_breadcrumbs-split-rule, transparent);content: "";inline-size: var(--helix-border-thin);inset-block: 20%;inset-inline-end: calc(var(--helix-border-thin) * -1);pointer-events: none;position: absolute;}:host([hidden]) {display: none;}`);
+:host(:state(end)) [part="link"]:has(~ slot[name="end"]:hover) ::slotted(a) {background-color: var(--_breadcrumbs-split-fill, transparent);}:host(:state(end)) [part="link"] {position: relative;}:host(:state(end)) [part="link"]::after {background-color: var(--_breadcrumbs-split-rule, transparent);content: "";inline-size: var(--helix-border-thin);inset-block: 20%;inset-inline-end: calc(var(--helix-border-thin) * -1);pointer-events: none;position: absolute;}:host([hidden]),
+:host(:state(folded)) {display: none;}[part="fold-separator"] {color: var(--breadcrumbs-separator-color, var(--helix-color-foreground-subtle));display: block;user-select: none;}[part="fold-separator"] svg {block-size: 1em;inline-size: 1em;vertical-align: calc(0.5cap - 0.5em);}[part="expand"] {all: unset;border-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));box-sizing: border-box;color: var(--breadcrumbs-link-color, var(--helix-color-foreground-muted));cursor: pointer;line-height: var(--helix-leading-normal);padding: var(--helix-space-2xs) var(--helix-space-xs);}[part="expand"]:hover {background-color: var(
+--breadcrumbs-hover-color,
+color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
+);color: var(--breadcrumbs-current-color, var(--helix-color-foreground));}[part="expand"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}`);

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/color-picker/root/color-picker-root.css.js

@@ -72,5 +72,5 @@ var(--helix-space-sm) var(--helix-space-sm);}[part="channel"] {--slider-fill-col
 :host(:state(invalid)) [part="value"],
 :host(:state(invalid)) [part="value"]:hover,
 :host(:state(invalid)) [part="value"]:focus-visible {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger);}[part="fields"] {display: grid;gap: var(--color-picker-fields-gap, var(--helix-space-xs));grid-auto-columns: minmax(0, 1fr);grid-auto-flow: column;margin-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none));}:host([alpha]) [part="fields"] {grid-auto-flow: row;grid-template-columns: repeat(2, minmax(0, 1fr));}[part="field"] {display: flex;flex-direction: column;gap: var(--helix-space-2xs);min-inline-size: 0;}[part="field-label"] {color: var(--color-picker-field-label-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);}[part="field-input"] {all: unset;appearance: textfield;background-color: var(--helix-color-surface-sunken);block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-control);font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-medium);inline-size: 100%;min-inline-size: 0;padding-inline: var(--helix-space-xs);transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);}[part="field-input"]::-webkit-inner-spin-button,
-[part="field-input"]::-webkit-outer-spin-button {appearance: none;margin: 0;}[part="field-input"]:hover {border-color: var(--helix-color-foreground-muted);}[part="field-input"]:focus-visible {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0;}[part="actions"] {display: flex;flex: 1 1 auto;}[part="actions"] helix-button {flex: 1 1 0;}::slotted([slot="eyedropper-icon"]) {block-size: var(--icon-size, var(--helix-size-icon));flex: 0 0 auto;inline-size: var(--icon-size, var(--helix-size-icon));}[part="format"] {font-family: var(--helix-font-mono);font-variant-caps: all-small-caps;}[part="swatches"] {border-block-start: var(--helix-border-thin) solid var(--helix-color-border);display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs);margin-block-start: var(--helix-space-sm);padding-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none));}[part="swatch"] {block-size: var(--color-picker-swatch-size, var(--helix-size-icon-loose));cursor: pointer;inline-size: var(--color-picker-swatch-size, var(--helix-size-icon-loose));padding: var(--helix-space-none);}[part="feedback"] {color: var(--color-picker-feedback-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-sm) var(--helix-space-none) var(--helix-space-none);padding-inline: var(--color-picker-padding, var(--helix-space-none));}@media (prefers-reduced-motion: reduce) {[part="sample"] {transition: none;}[part="sample"][data-copied] {scale: 1;}}:host(:disabled) {cursor: not-allowed;opacity: 0.5;}:host([readonly]) [part="grid"],
+[part="field-input"]::-webkit-outer-spin-button {appearance: none;margin: 0;}[part="field-input"]:hover {border-color: var(--helix-color-foreground-muted);}[part="field-input"]:focus-visible {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0;}[part="actions"] {display: flex;flex: 1 1 auto;}[part="actions"] helix-button {flex: 1 1 0;}::slotted([slot="eyedropper-icon"]) {block-size: var(--icon-size, var(--helix-size-icon));flex: 0 0 auto;inline-size: var(--icon-size, var(--helix-size-icon));}[part="format"] {font-family: var(--helix-font-mono);font-variant-caps: all-small-caps;}[part="swatches"] {border-block-start: var(--helix-border-thin) solid var(--helix-color-border);display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs);margin-block-start: var(--helix-space-sm);padding-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none));}[part="swatch"] {block-size: var(--color-picker-swatch-size, var(--helix-size-icon-loose));cursor: pointer;inline-size: var(--color-picker-swatch-size, var(--helix-size-icon-loose));padding: var(--helix-space-none);}[part="label"] {color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);line-height: var(--helix-leading-tight);margin-block-end: var(--helix-space-xs);padding-inline: var(--color-picker-padding, var(--helix-space-none));}:host([required]) [part="label"]::after {color: var(--helix-color-danger);content: "*";margin-inline-start: var(--helix-space-2xs);}@supports (content: "*" / "") {:host([required]) [part="label"]::after {content: "*" / "";}}[part="hint"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);line-height: var(--helix-leading-normal);margin-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none));}[part="feedback"] {color: var(--color-picker-feedback-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-sm) var(--helix-space-none) var(--helix-space-none);padding-inline: var(--color-picker-padding, var(--helix-space-none));}@media (prefers-reduced-motion: reduce) {[part="sample"] {transition: none;}[part="sample"][data-copied] {scale: 1;}}:host(:disabled) {cursor: not-allowed;opacity: 0.5;}:host([readonly]) [part="grid"],
 :host([readonly]) [part="swatch"] {cursor: default;}@media print {:host {box-shadow: none;print-color-adjust: exact;}}`);

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

@@ -29,4 +29,4 @@ color-mix(in oklab, var(--helix-color-foreground) 14%, transparent)
 :host(:dir(rtl)) ::slotted([slot="next-icon"]) {scale: -1 1;}:host(:disabled) {cursor: not-allowed;opacity: 0.5;}:host([invalid]) [part~="cell"][aria-selected] [part~="day"],
 :host(:state(invalid)) [part~="cell"][aria-selected] [part~="day"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-danger);outline-offset: var(--helix-size-focus-offset);}:host([invalid]) [part~="cell"]:focus-visible [part~="day"],
 :host(:state(invalid)) [part~="cell"]:focus-visible [part~="day"] {outline-color: var(--helix-color-danger);}:host([invalid]) [part="grid"][data-unset],
-:host(:state(invalid)) [part="grid"][data-unset] {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-danger);outline-offset: var(--helix-size-focus-offset);}[part="feedback"] {color: var(--date-picker-feedback-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-sm) var(--helix-space-none) var(--helix-space-none);}@media print {:host {box-shadow: none;print-color-adjust: exact;}}`);
+:host(:state(invalid)) [part="grid"][data-unset] {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-danger);outline-offset: var(--helix-size-focus-offset);}[part="feedback"] {color: var(--date-picker-feedback-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-sm) var(--helix-space-none) var(--helix-space-none);}@media print {:host {box-shadow: none;print-color-adjust: exact;}}::slotted([slot="header"]) {display: block;margin-block-end: var(--helix-space-sm);}::slotted([slot="footer"]) {display: block;margin-block-start: var(--helix-space-sm);}`);

package/dist/element-events.generated.js

@@ -7,6 +7,7 @@ registerElementEvents({
     'helix-aura': ['helix-aura-fallback'],
     'helix-avatar': ['error', 'load'],
     'helix-bar-chart': ['helix-reading-change', 'helix-reading-press'],
+    'helix-breadcrumb': ['helix-select'],
     'helix-button': ['helix-press'],
     'helix-button-group': ['change', 'helix-before-change'],
     'helix-callout': ['helix-dismiss'],
@@ -245,7 +246,7 @@ registerElementEvents({
     'helix-step': ['helix-select'],
     'helix-steps': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-switch': ['change', 'helix-before-toggle', 'input'],
-    'helix-tab': ['helix-select'],
+    'helix-tab': ['helix-dismiss', 'helix-select'],
     'helix-table': [
         'helix-before-reorder',
         'helix-reorder',

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/slider/root/slider-root.css.js

@@ -41,7 +41,7 @@ currentColor var(--_slider-hole)
 circle at 50% calc(100% - var(--slider-fraction, 0) * 100%),
 transparent var(--_slider-hole),
 currentColor var(--_slider-hole)
-);}[part="marker"] {background-color: var(--slider-marker-color, var(--helix-color-background));block-size: var(--_slider-track);border-radius: var(--helix-radii-full);inline-size: var(--helix-border-thick);inset-block-start: 0;inset-inline-start: var(--slider-marker-at, 0%);position: absolute;translate: -50% 0;}:host(:dir(rtl)) [part="marker"] {translate: 50% 0;}:host(:disabled) [part="control"] {cursor: not-allowed;}:host(:disabled) {opacity: 0.5;}[part="control"]::-webkit-slider-runnable-track {background: var(--_slider-track-image);block-size: var(--_slider-track);border-radius: var(--helix-radii-full);}[part="control"]::-moz-range-track {background: var(--_slider-track-image);block-size: var(--_slider-track);border-radius: var(--helix-radii-full);}[part="control"]::-webkit-slider-thumb {appearance: none;background-color: var(--slider-thumb-color, var(--helix-color-surface-inverse));block-size: var(--_slider-thumb);border: none;border-radius: var(--_slider-thumb-radii);box-shadow:
+);}[part="marker"] {background-color: var(--slider-marker-color, var(--helix-color-background));block-size: var(--_slider-track);border-radius: var(--helix-radii-full);inline-size: var(--helix-border-thick);inset-block-start: 0;inset-inline-start: var(--slider-marker-at, 0%);position: absolute;translate: -50% 0;}:host(:dir(rtl)) [part="marker"] {translate: 50% 0;}:host(:disabled) [part="control"] {cursor: not-allowed;}:host([readonly]) [part="control"] {cursor: default;}:host(:disabled) {opacity: 0.5;}[part="control"]::-webkit-slider-runnable-track {background: var(--_slider-track-image);block-size: var(--_slider-track);border-radius: var(--helix-radii-full);}[part="control"]::-moz-range-track {background: var(--_slider-track-image);block-size: var(--_slider-track);border-radius: var(--helix-radii-full);}[part="control"]::-webkit-slider-thumb {appearance: none;background-color: var(--slider-thumb-color, var(--helix-color-surface-inverse));block-size: var(--_slider-thumb);border: none;border-radius: var(--_slider-thumb-radii);box-shadow:
 0 0 0 var(--helix-border-thick) var(--slider-thumb-ring-color, var(--helix-color-background)),
 var(--helix-shadow-md);inline-size: var(--_slider-thumb-length);margin-block-start: calc((var(--_slider-track) - var(--_slider-thumb)) / 2);}[part="control"]:focus-visible::-webkit-slider-thumb,
 [part="control"]:active::-webkit-slider-thumb {box-shadow:
@@ -62,7 +62,7 @@ var(--slider-fill-color, var(--helix-color-primary)) calc(var(--slider-from, 0)
 var(--slider-fill-color, var(--helix-color-primary)) calc(var(--slider-to, 1) * 100%),
 var(--_slider-track-color) calc(var(--slider-to, 1) * 100%)
 )
-);}:host([range]) [part="control"][data-thumb="end"]::-webkit-slider-runnable-track {background: transparent;}:host([range]) [part="control"][data-thumb="end"]::-moz-range-track {background: transparent;}:host([range]) [part="control"] {pointer-events: none;}:host([range]) [part="control"]::-webkit-slider-thumb {pointer-events: auto;}:host([range]) [part="control"]::-moz-range-thumb {pointer-events: auto;}:host([orientation="vertical"]) [part="field"] {flex-direction: column;}:host([orientation="vertical"]) [part="field"][data-markers] {grid-template-columns: none;grid-template-rows: 1fr auto;}:host([orientation="vertical"]) [part="control"] {--_slider-track-image: var(
+);}:host([range]) [part="control"]:not([data-thumb="start"])::-webkit-slider-runnable-track {background: transparent;}:host([range]) [part="control"]:not([data-thumb="start"])::-moz-range-track {background: transparent;}:host([range]) [part="control"] {pointer-events: none;}:host([range]) [part="control"]::-webkit-slider-thumb {pointer-events: auto;}:host([range]) [part="control"]::-moz-range-thumb {pointer-events: auto;}:host([orientation="vertical"]) [part="field"] {flex-direction: column;}:host([orientation="vertical"]) [part="field"][data-markers] {grid-template-columns: none;grid-template-rows: 1fr auto;}:host([orientation="vertical"]) [part="control"] {--_slider-track-image: var(
 --slider-track-image,
 linear-gradient(
 to top,
@@ -80,4 +80,5 @@ var(--_slider-track-color) calc(var(--slider-to, 0) * 100%)
 )
 );}:host([orientation="vertical"]) [part="marker"] {block-size: var(--helix-border-thick);inline-size: var(--_slider-track);inset-block-end: var(--slider-marker-at, 0%);inset-block-start: auto;inset-inline-start: 0;translate: 0 50%;}:host([orientation="vertical"]) [part="field"][data-markers] [part="output"] {grid-column: 1;grid-row: 2;}:host([orientation="vertical"]) [part="markers"] {align-self: stretch;block-size: auto;inline-size: var(--_slider-track);justify-self: center;margin-block: calc(var(--_slider-thumb) / 2);margin-inline: 0;}[part="field"][data-tooltip] {display: grid;grid-template-columns: 1fr auto;}[part="field"][data-tooltip] [part="control"],
 [part="tooltips"] {grid-column: 1;grid-row: 1;}[part="field"][data-tooltip] [part="output"] {grid-column: 2;grid-row: 1;}[part="tooltips"] {align-self: center;block-size: var(--_slider-track);margin-inline: calc(var(--_slider-thumb-length) / 2);pointer-events: none;position: relative;z-index: var(--helix-layer-overlay);}[part="tooltip"] {background-color: var(--slider-tooltip-background-color, var(--helix-color-surface-inverse));border-radius: var(--helix-radii-sm);color: var(--slider-tooltip-color, var(--helix-color-foreground-inverse));font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;inset-block-end: calc(50% + var(--_slider-thumb) / 2 + var(--helix-space-2xs));inset-inline-start: calc(var(--slider-at, 0) * 100%);opacity: 0;padding: var(--helix-space-2xs) var(--helix-space-xs);position: absolute;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);translate: -50% 0;white-space: nowrap;}:host(:dir(rtl)) [part="tooltip"] {translate: 50% 0;}:host(:hover) [part="tooltip"],
-:host(:focus-within) [part="tooltip"] {opacity: 1;}:host([orientation="vertical"]) [part="field"][data-tooltip] {grid-template-columns: none;grid-template-rows: 1fr auto;}:host([orientation="vertical"]) [part="field"][data-tooltip] [part="output"] {grid-column: 1;grid-row: 2;justify-self: center;}:host([orientation="vertical"]) [part="tooltips"] {align-self: stretch;block-size: auto;inline-size: var(--_slider-track);justify-self: center;margin-block: calc(var(--_slider-thumb) / 2);margin-inline: 0;}:host([orientation="vertical"]) [part="tooltip"] {inset-block-end: calc(var(--slider-at, 0) * 100%);inset-inline-start: calc(50% + var(--_slider-thumb) / 2 + var(--helix-space-2xs));translate: 0 50%;}@media print {:host {box-shadow: none;print-color-adjust: exact;}}`);
+:host(:focus-within) [part="tooltip"] {opacity: 1;}:host([orientation="vertical"]) [part="field"][data-tooltip] {grid-template-columns: none;grid-template-rows: 1fr auto;}:host([orientation="vertical"]) [part="field"][data-tooltip] [part="output"] {grid-column: 1;grid-row: 2;justify-self: center;}:host([orientation="vertical"]) [part="tooltips"] {align-self: stretch;block-size: auto;inline-size: var(--_slider-track);justify-self: center;margin-block: calc(var(--_slider-thumb) / 2);margin-inline: 0;}:host([orientation="vertical"]) [part="tooltip"] {inset-block-end: calc(var(--slider-at, 0) * 100%);inset-inline-start: calc(50% + var(--_slider-thumb) / 2 + var(--helix-space-2xs));translate: 0 50%;}[part="field"][data-thumbs] {display: grid;grid-template-columns: 1fr auto;}[part="field"][data-thumbs] [part="control"],
+[part="field"][data-thumbs] [part="thumbs"] {grid-column: 1;grid-row: 1;}[part="field"][data-thumbs] [part="output"] {grid-column: 2;grid-row: 1;}[part="field"][data-thumbs] [part="thumbs"] {align-self: center;block-size: var(--_slider-track);display: block;margin-inline: calc(var(--_slider-thumb-length) / 2);pointer-events: none;position: relative;z-index: var(--helix-layer-overlay);}[part="thumb"] {align-items: center;background-color: var(--slider-thumb-color, var(--helix-color-surface-inverse));block-size: var(--_slider-thumb);border-radius: var(--_slider-thumb-radii);color: var(--slider-thumb-content-color, var(--helix-color-foreground-inverse));display: flex;font-size: var(--helix-text-xs);inline-size: var(--_slider-thumb-length);inset-block-start: 50%;inset-inline-start: calc(var(--slider-at, 0) * 100%);justify-content: center;position: absolute;translate: -50% -50%;}:host(:dir(rtl)) [part="thumb"] {translate: 50% -50%;}:host([orientation="vertical"]) [part="field"][data-thumbs] {grid-template-columns: none;grid-template-rows: 1fr auto;}:host([orientation="vertical"]) [part="field"][data-thumbs] [part="output"] {grid-column: 1;grid-row: 2;justify-self: center;}:host([orientation="vertical"]) [part="field"][data-thumbs] [part="thumbs"] {align-self: stretch;block-size: auto;inline-size: var(--_slider-track);justify-self: center;margin-block: calc(var(--_slider-thumb-length) / 2);margin-inline: 0;}:host([orientation="vertical"]) [part="thumb"] {block-size: var(--_slider-thumb-length);inline-size: var(--_slider-thumb);inset-block-end: calc(var(--slider-at, 0) * 100%);inset-block-start: auto;inset-inline-start: 50%;translate: -50% 50%;}:host([orientation="vertical"]:dir(rtl)) [part="thumb"] {translate: 50% 50%;}@media print {:host {box-shadow: none;print-color-adjust: exact;}}`);

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

@@ -22,6 +22,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --slider-length - The length of a vertical track. It defaults to nine rem and applies only when `orientation` is `vertical`. A horizontal track takes the width of its row.
  * @cssproperty --slider-marker-color - The color of the marks along the track.
  * @cssproperty --slider-thumb-color - The color of the thumb.
+ * @cssproperty --slider-thumb-content-color - The color of content in the `thumb` and `thumb-end` slots, drawn on the thumb.
  * @cssproperty --slider-thumb-length - The thumb's size along the track. It follows `--slider-thumb-size` unless you set it, and setting one of the two makes the thumb an oval.
  * @cssproperty --slider-thumb-radius - The thumb's corner radius. It is fully round by default, so a thumb with two different dimensions is a capsule unless you change it.
  * @cssproperty --slider-thumb-ring-color - The color of the ring between the thumb and the track. Set it for a slider that sits on a surface other than the page background.

package/dist/speed-dial/item/speed-dial-item.css.js

@@ -1,5 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;}[part="item"] {align-items: center;background: none;border: none;color: inherit;cursor: pointer;display: inline-flex;flex-direction: var(--_speed-dial-row, row-reverse);font: inherit;gap: var(--helix-space-sm);padding: var(--helix-space-none);}[part="item"]:disabled {cursor: not-allowed;opacity: var(--speed-dial-item-disabled-opacity, 0.5);}[part="icon"] {--icon-size: var(--helix-size-icon);align-items: center;aspect-ratio: 1;background-color: var(--speed-dial-item-background-color, var(--helix-color-surface-overlay));border-radius: var(--helix-radii-full);box-shadow: var(--helix-shadow-md);color: var(--speed-dial-item-color, var(--helix-color-foreground));display: inline-flex;inline-size: var(--speed-dial-item-size, var(--helix-size-control-tight));justify-content: center;pointer-events: auto;transition:
+export const styles = createSheet(`:host {display: block;}[part="item"] {align-items: center;background: none;border: none;color: inherit;cursor: pointer;display: inline-flex;flex-direction: var(--_speed-dial-row, row-reverse);font: inherit;gap: var(--helix-space-sm);padding: var(--helix-space-none);text-decoration: none;}[part="item"]:disabled {cursor: not-allowed;opacity: var(--speed-dial-item-disabled-opacity, 0.5);}[part="icon"] {--icon-size: var(--helix-size-icon);align-items: center;aspect-ratio: 1;background-color: var(--speed-dial-item-background-color, var(--helix-color-surface-overlay));border-radius: var(--helix-radii-full);box-shadow: var(--helix-shadow-md);color: var(--speed-dial-item-color, var(--helix-color-foreground));display: inline-flex;inline-size: var(--speed-dial-item-size, var(--helix-size-control-tight));justify-content: center;pointer-events: auto;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
 box-shadow var(--helix-duration-fast) var(--helix-easing-standard);}[part="item"]:not(:disabled):hover [part="icon"] {background-color: var(
 --speed-dial-item-hover-background-color,

package/dist/speed-dial/root/speed-dial-root.css.js

@@ -2,5 +2,5 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {display: inline-flex;}[part="actions"] {background-color: transparent;border: none;display: flex;flex-direction: column;gap: var(--speed-dial-gap, var(--helix-space-sm));margin: var(--helix-space-none);overflow: visible;padding: var(--helix-space-none);}[part="actions"] {--_speed-dial-row: row-reverse;align-items: flex-end;}[part="actions"][data-placement$="-start"] {--_speed-dial-align: flex-start;--_speed-dial-row: row;align-items: flex-start;}[part="actions"][hidden] {display: none;}[part="actions"] {--_dial-from: var(--speed-dial-travel, var(--helix-space-md));}[part="actions"][data-placement^="bottom"] {--_dial-from: calc(var(--speed-dial-travel, var(--helix-space-md)) * -1);}[part="actions"] ::slotted(*) {opacity: 0;scale: 0.8;transition:
 opacity var(--helix-duration-fast) var(--helix-easing-standard),
 scale var(--helix-duration-fast) var(--helix-easing-emphasized),
-translate var(--helix-duration-fast) var(--helix-easing-emphasized);translate: 0 var(--_dial-from);}[part="actions"][data-placed] ::slotted(*) {opacity: 1;scale: 1;translate: 0 0;}[part="actions"] {--_speed-dial-stagger: var(--speed-dial-stagger, calc(var(--helix-duration-fast) / 3));}[part="actions"][data-placed] ::slotted(:nth-last-child(2)) {transition-delay: var(--_speed-dial-stagger);}[part="actions"][data-placed] ::slotted(:nth-last-child(3)) {transition-delay: calc(var(--_speed-dial-stagger) * 2);}[part="actions"][data-placed] ::slotted(:nth-last-child(4)) {transition-delay: calc(var(--_speed-dial-stagger) * 3);}[part="actions"][data-placed] ::slotted(:nth-last-child(n + 5)) {transition-delay: calc(var(--_speed-dial-stagger) * 4);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(2)) {transition-delay: var(--_speed-dial-stagger);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(3)) {transition-delay: calc(var(--_speed-dial-stagger) * 2);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(4)) {transition-delay: calc(var(--_speed-dial-stagger) * 3);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(n + 5)) {transition-delay: calc(var(--_speed-dial-stagger) * 4);}@media (prefers-reduced-motion: reduce) {[part="actions"] ::slotted(*) {opacity: 1;scale: 1;transition: none;transition-delay: 0s;translate: 0 0;}[part="trigger"] {transition: none;}}[part="trigger"] {--icon-size: var(--helix-size-icon);all: unset;align-items: center;background-color: var(--speed-dial-background-color, var(--helix-color-primary-surface));block-size: var(--speed-dial-size, var(--helix-size-control));border-radius: var(--helix-radii-full);box-shadow: var(--speed-dial-shadow, var(--helix-shadow-md));box-sizing: border-box;color: var(--speed-dial-color, var(--helix-color-foreground-on-primary));cursor: pointer;display: inline-flex;inline-size: var(--speed-dial-size, var(--helix-size-control));justify-content: center;transition: box-shadow var(--helix-duration-fast) var(--helix-easing-standard);}[part="trigger"]:hover {box-shadow: var(--helix-shadow-lg);}[part="trigger"]:active {box-shadow: var(--helix-shadow-sm);}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}@media print {:host {display: none;}}:host([labels="hover"]) {--_speed-dial-label-opacity: 0;}:host([labels="hover"]) [part="actions"],
+translate var(--helix-duration-fast) var(--helix-easing-emphasized);translate: 0 var(--_dial-from);}[part="actions"][data-placed] ::slotted(*) {opacity: 1;scale: 1;translate: 0 0;}[part="actions"] {--_speed-dial-stagger: var(--speed-dial-stagger, calc(var(--helix-duration-fast) / 3));}[part="actions"][data-placed] ::slotted(:nth-last-child(2)) {transition-delay: var(--_speed-dial-stagger);}[part="actions"][data-placed] ::slotted(:nth-last-child(3)) {transition-delay: calc(var(--_speed-dial-stagger) * 2);}[part="actions"][data-placed] ::slotted(:nth-last-child(4)) {transition-delay: calc(var(--_speed-dial-stagger) * 3);}[part="actions"][data-placed] ::slotted(:nth-last-child(n + 5)) {transition-delay: calc(var(--_speed-dial-stagger) * 4);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(2)) {transition-delay: var(--_speed-dial-stagger);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(3)) {transition-delay: calc(var(--_speed-dial-stagger) * 2);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(4)) {transition-delay: calc(var(--_speed-dial-stagger) * 3);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(n + 5)) {transition-delay: calc(var(--_speed-dial-stagger) * 4);}@media (prefers-reduced-motion: reduce) {[part="actions"] ::slotted(*) {opacity: 1;scale: 1;transition: none;transition-delay: 0s;translate: 0 0;}[part="trigger"] {transition: none;}}[part="trigger"] {--icon-size: var(--helix-size-icon);all: unset;align-items: center;background-color: var(--speed-dial-background-color, var(--helix-color-primary-surface));block-size: var(--speed-dial-size, var(--helix-size-control));border-radius: var(--helix-radii-full);box-shadow: var(--speed-dial-shadow, var(--helix-shadow-md));box-sizing: border-box;color: var(--speed-dial-color, var(--helix-color-foreground-on-primary));cursor: pointer;display: inline-flex;inline-size: var(--speed-dial-size, var(--helix-size-control));justify-content: center;transition: box-shadow var(--helix-duration-fast) var(--helix-easing-standard);}[part="trigger"]:hover {box-shadow: var(--helix-shadow-lg);}[part="trigger"]:active {box-shadow: var(--helix-shadow-sm);}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}::slotted([slot="icon"]) {block-size: var(--icon-size);inline-size: var(--icon-size);}@media print {:host {display: none;}}:host([labels="hover"]) {--_speed-dial-label-opacity: 0;}:host([labels="hover"]) [part="actions"],
 :host([labels="hover"]) [part="actions"] ::slotted(*) {pointer-events: none;}`);

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;}}`);

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

@@ -1,5 +1,9 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_tabs-rule: none;--_tab-radius: var(--helix-radii-sm);--_tab-selected-shadow: var(--helix-shadow-sm);--_tab-selected-surface: var(--helix-color-surface-raised);display: grid;grid-template-rows: auto minmax(0, 1fr);min-block-size: 0;}[part="tabs"] {background-image: var(--_tabs-rule, none);background-position: bottom;background-repeat: repeat-x;background-size: 100% var(--helix-border-thin);display: flex;gap: var(--tabs-gap, var(--helix-space-2xs));overflow-x: auto;}:host([variant="underlined"]) {--_tabs-rule: linear-gradient(
+export const styles = createSheet(`:host {--_tabs-rule: none;--_tab-radius: var(--helix-radii-sm);--_tab-selected-shadow: var(--helix-shadow-sm);--_tab-selected-surface: var(--helix-color-surface-raised);display: grid;grid-template-rows: auto minmax(0, 1fr);min-block-size: 0;}[part="tabs"] {background-image: var(--_tabs-rule, none);background-position: bottom;background-repeat: repeat-x;background-size: 100% var(--helix-border-thin);display: flex;gap: var(--tabs-gap, var(--helix-space-2xs));overflow-x: auto;}[part="scroll-start"],
+[part="scroll-end"] {align-items: center;background-color: var(--tabs-scroll-background-color, var(--helix-color-surface));border: none;color: var(--helix-color-foreground-subtle);cursor: pointer;display: inline-flex;flex: none;justify-content: center;padding-inline: var(--helix-space-2xs);position: sticky;z-index: 1;}[part="scroll-start"] {inset-inline-start: 0;}[part="scroll-end"] {inset-inline-end: 0;}[part="scroll-start"][hidden],
+[part="scroll-end"][hidden] {display: none;}[part="scroll-start"] svg,
+[part="scroll-end"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}[part="scroll-start"]:hover,
+[part="scroll-end"]:hover {color: var(--helix-color-foreground);}:host([orientation="vertical"]) [part="scroll-start"] {inset-block-start: 0;inset-inline-start: auto;padding-block: var(--helix-space-2xs);}:host([orientation="vertical"]) [part="scroll-end"] {inset-block-end: 0;inset-inline-end: auto;padding-block: var(--helix-space-2xs);}:host([variant="underlined"]) {--_tabs-rule: linear-gradient(
 var(--tabs-rule-color, var(--helix-color-border)),
 var(--tabs-rule-color, var(--helix-color-border))
 );--_tab-radius: var(--helix-radii-none);--_tab-selected-shadow: none;--_tab-selected-surface: transparent;}:host([variant="segmented"]) [part="tabs"] {--_tab-selected-surface: var(--helix-color-surface-overlay);--_tab-height: 100%;background-color: var(--helix-color-surface-sunken);block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);justify-self: start;padding: var(--helix-space-2xs);inline-size: fit-content;}[part="panels"] {display: grid;grid-template-rows: minmax(0, 1fr);min-block-size: 0;min-inline-size: 0;}[part="indicator"] {background-color: var(--_indicator-color, transparent);block-size: var(--_indicator-block, var(--helix-border-thick));border: var(--_indicator-border, 0) solid var(--_indicator-border-color, transparent);border-radius: var(--tabs-indicator-radius, var(--_indicator-radius, var(--helix-radii-none)));box-shadow: var(--tabs-indicator-shadow, var(--_indicator-shadow, none));inline-size: var(--indicator-inline-size, 0);inset-block-start: 0;inset-inline-start: 0;opacity: 0;position: absolute;translate: calc(var(--indicator-x, 0px) + var(--_indicator-offset-x, 0px))

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

@@ -27,6 +27,8 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart indicator - The mark that moves to the selected tab. It carries the selected tab's place and size as `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and `--indicator-block-size`.
  * @csspart panels - The panel container.
+ * @csspart scroll-end - The button that scrolls the strip toward its end, shown under `scroll-controls` while there is more that way. It holds to the end of the strip.
+ * @csspart scroll-start - The button that scrolls the strip toward its start, shown under `scroll-controls` while there is more that way. It holds to the start of the strip.
  * @csspart tabs - The tab list.
  *
  * @cssproperty --tabs-gap - The space between tabs.
@@ -35,6 +37,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --tabs-indicator-shadow - The shadow under the mark, which the pill and `segmented` draw.
  * @cssproperty --tabs-indicator-thickness - The height of the bar under `underlined`.
  * @cssproperty --tabs-rule-color - The color of the rule under the row in `underlined`.
+ * @cssproperty --tabs-scroll-background-color - The fill behind the scroll buttons, over the tabs that pass under them.
  */
 export declare class HelixTabs extends HelixHeadlessTabs {
     static styles: CSSResultGroup;

package/dist/tabs/tab/tab.css.js

@@ -10,4 +10,4 @@ color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)
 --tabs-tab-selected-background-color,
 var(--_tab-selected-surface, transparent)
 );box-shadow: var(--_tab-selected-shadow, none);color: var(--tabs-tab-selected-color, var(--helix-color-foreground));}[part="tab"]:disabled,
-[part="tab"][aria-disabled="true"] {cursor: not-allowed;opacity: var(--tabs-tab-disabled-opacity, 0.5);}[part="tab"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}`);
+[part="tab"][aria-disabled="true"] {cursor: not-allowed;opacity: var(--tabs-tab-disabled-opacity, 0.5);}[part="tab"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="dismiss"] {align-items: center;border-radius: var(--helix-radii-sm);color: var(--tabs-tab-dismiss-color, currentColor);display: inline-flex;margin-inline: var(--helix-space-2xs) calc(var(--helix-space-2xs) * -1);padding: var(--helix-space-none);}[part="dismiss"] svg {block-size: 1em;inline-size: 1em;}[part="dismiss"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 10%, transparent);}`);

package/dist/tabs/tab/tab.d.ts

@@ -15,11 +15,13 @@ import type { CSSResultGroup } from 'lit';
  *
  * @slot - The tab's label.
  *
+ * @csspart dismiss - The mark a pointer presses to close a `dismissible` tab.
  * @csspart tab - The tab itself.
  *
  * @cssproperty --tabs-tab-block-size - The height of a tab. `segmented` sizes its tabs to the track and does not read it.
  * @cssproperty --tabs-tab-color - The label color of a tab that is not current.
  * @cssproperty --tabs-tab-disabled-opacity - How faint a disabled tab is drawn.
+ * @cssproperty --tabs-tab-dismiss-color - The color of the mark that closes a `dismissible` tab.
  * @cssproperty --tabs-tab-font-size - The size of a tab's label.
  * @cssproperty --tabs-tab-font-weight - The weight of a tab's label.
  * @cssproperty --tabs-tab-hover-background-color - The wash under the pointer.

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

@@ -7,6 +7,11 @@ import type { CSSResultGroup } from 'lit';
  * Seven tones. The fill is a tint of the status color made with `color-mix`, so
  * when a theme changes its status colors, the tints change with them.
  *
+ * A tag takes its height from the region it is in, as the controls beside it
+ * do: `data-density="sm"`, `md`, or `lg` on the tag or on any element around
+ * it sets `--helix-size-tag` to the small, resting, or large step, so a row of
+ * tags and buttons stays one height. `shape="pill"` rounds its ends.
+ *
  * @since 0.1.0
  * @status stable
  * @category markers

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: inline-flex;position: relative;z-index: var(--helix-layer-raised);}[part="item"] {all: unset;box-sizing: border-box;}[part="item"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}@media print {:host {display: none;}}`);
+export const styles = createSheet(`:host {display: inline-flex;position: relative;z-index: var(--helix-layer-raised);}[part="item"] {all: unset;box-sizing: border-box;}::slotted([slot="start"]) {margin-inline-end: var(--helix-space-xs);}::slotted([slot="end"]) {margin-inline-start: var(--helix-space-xs);}[part="item"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}@media print {:host {display: none;}}`);