@fusion.dev/helix 0.146.0 → 0.148.0

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

@@ -1,44 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-[part="figure"] {
-margin: var(--helix-space-none);
-}
-
-[part="blockquote"] {
-display: block;
-margin: var(--helix-space-none);
-}
-
-slot:not([name]) {
-
-color: var(--blockquote-color, var(--helix-color-foreground-muted));
-font-family: var(--blockquote-font-family, var(--helix-font-display));
-font-size: var(--blockquote-size, var(--helix-text-xl));
-font-weight: var(--blockquote-font-weight, var(--helix-weight-medium));
-letter-spacing: var(--helix-tracking-tight);
-line-height: var(--blockquote-line-height, var(--helix-leading-tight));
-}
-
-slot:not([name])::slotted(*) {
-margin: var(--helix-space-none);
-}
-
-[part="attribution"] {
-color: var(--blockquote-attribution-color, var(--helix-color-foreground-muted));
-font-size: var(--blockquote-attribution-size, var(--helix-text-sm));
-
-margin-block-start: var(--blockquote-gap, var(--helix-space-sm));
-}
-
-[part="attribution"][data-empty] {
-display: none;
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+export const styles = createSheet(`:host {display: block;}[part="figure"] {margin: var(--helix-space-none);}[part="blockquote"] {display: block;margin: var(--helix-space-none);}:host([marks]) [part="blockquote"]::before {color: var(--blockquote-mark-color, var(--helix-color-foreground-subtle));content: open-quote / "";float: inline-start;font-family: var(--blockquote-font-family, var(--helix-font-display));font-size: var(--blockquote-mark-size, var(--helix-text-3xl));line-height: 1;margin-inline-end: var(--helix-space-xs);}:host([marks]) [part="blockquote"]::after {content: no-close-quote;}slot:not([name]) {color: var(--blockquote-color, var(--helix-color-foreground-muted));font-family: var(--blockquote-font-family, var(--helix-font-display));font-size: var(--blockquote-size, var(--helix-text-xl));font-weight: var(--blockquote-font-weight, var(--helix-weight-medium));letter-spacing: var(--blockquote-letter-spacing, var(--helix-tracking-tight));line-height: var(--blockquote-line-height, var(--helix-leading-tight));}slot:not([name])::slotted(*) {margin: var(--helix-space-none);}[part="attribution"] {color: var(--blockquote-attribution-color, var(--helix-color-foreground-muted));font-family: var(--blockquote-attribution-font-family, inherit);font-size: var(--blockquote-attribution-size, var(--helix-text-sm));font-weight: var(--blockquote-attribution-font-weight, inherit);margin-block-start: var(--blockquote-gap, var(--helix-space-sm));}[part="attribution"][data-empty] {display: none;}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -5,8 +5,9 @@ import type { CSSResultGroup } from 'lit';
  *
  * @description
  * Set in the display face, larger than body text, to mark a change of voice. No
- * quotation marks are drawn, because the size and spacing already set the
- * passage apart.
+ * quotation marks are drawn by default, because the size and spacing already
+ * set the passage apart. `marks` draws one large opening mark over the passage,
+ * as a pull quote sets it, in the element's language.
  *
  * @since 0.1.0
  * @status stable
@@ -15,12 +16,17 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/blockquote
  *
  * @cssproperty --blockquote-attribution-color - The color of the attribution.
+ * @cssproperty --blockquote-attribution-font-family - The typeface of the attribution, the page's by default.
+ * @cssproperty --blockquote-attribution-font-weight - The weight of the attribution, the page's by default.
  * @cssproperty --blockquote-attribution-size - The font size of the attribution.
  * @cssproperty --blockquote-color - The color of the quoted passage.
  * @cssproperty --blockquote-font-family - The typeface of the quoted passage, the display face by default.
  * @cssproperty --blockquote-font-weight - The weight of the quoted passage, medium by default.
  * @cssproperty --blockquote-gap - The space between the passage and its attribution.
+ * @cssproperty --blockquote-letter-spacing - The letter spacing of the quoted passage, the tight tracking by default.
  * @cssproperty --blockquote-line-height - The line height of the quoted passage, the tight leading by default.
+ * @cssproperty --blockquote-mark-color - The color of the mark `marks` draws, the subtle foreground by default.
+ * @cssproperty --blockquote-mark-size - The font size of the mark `marks` draws.
  * @cssproperty --blockquote-size - The font size of the quoted passage.
  */
 export declare class HelixBlockquote extends HelixHeadlessBlockquote {

package/dist/breadcrumbs/breadcrumb/breadcrumb.css.js

@@ -1,107 +1,22 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---icon-button-size: var(
+export const styles = createSheet(`:host {--icon-button-size: var(
 --breadcrumbs-control-size,
 calc(var(--helix-text-control) * var(--helix-leading-normal) + var(--helix-space-2xs) * 2)
-);
-
---button-size: var(
+);--button-size: var(
 --breadcrumbs-control-size,
 calc(var(--helix-text-control) * var(--helix-leading-normal) + var(--helix-space-2xs) * 2)
-);
-
---button-padding-inline: var(--breadcrumbs-control-padding-inline, var(--helix-space-xs));
-
---button-gap: var(--helix-space-2xs);
-
-align-items: center;
-display: inline-flex;
-gap: var(--breadcrumbs-gap, var(--helix-space-xs));
-}
-
-[part="separator"] {
-color: var(--breadcrumbs-separator-color, var(--helix-color-foreground-subtle));
-display: block;
-user-select: none;
-}
-
-[part="separator"] svg {
-block-size: 1em;
-inline-size: 1em;
-vertical-align: calc(0.5cap - 0.5em);
-}
-
-:host(:first-child) [part="separator"] {
-display: none;
-}
-
-::slotted(a) {
-background-color: transparent;
-border-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));
-padding: var(--helix-space-2xs) var(--helix-space-xs);
-transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host(:first-child) ::slotted(a) {
-margin-inline-start: calc(var(--helix-space-xs) * -1);
-}
-
-::slotted(a:hover) {
-
-background-color: var(
+);--button-padding-inline: var(--breadcrumbs-control-padding-inline, var(--helix-space-xs));--button-gap: var(--helix-space-2xs);align-items: center;display: inline-flex;gap: var(--breadcrumbs-gap, var(--helix-space-xs));}[part="separator"] {color: var(--breadcrumbs-separator-color, var(--helix-color-foreground-subtle));display: block;user-select: none;}[part="separator"] svg {block-size: 1em;inline-size: 1em;vertical-align: calc(0.5cap - 0.5em);}:host(:first-child) [part="separator"] {display: none;}::slotted(a) {background-color: transparent;border-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));padding: var(--helix-space-2xs) var(--helix-space-xs);transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:first-child) ::slotted(a) {margin-inline-start: calc(var(--helix-space-xs) * -1);}::slotted(a:hover) {background-color: var(
 --breadcrumbs-hover-color,
 color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
-);
-}
-
-::slotted(a:focus-visible) {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host {
-font-weight: var(--breadcrumbs-font-weight, var(--helix-weight-medium));
-}
-
-:host([current]) {
-color: var(--breadcrumbs-current-color, var(--helix-color-foreground));
-}
-
-[part="link"] {
-align-items: center;
-border-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));
-color: var(--breadcrumbs-link-color, var(--helix-color-foreground-muted));
-display: inline-flex;
-gap: var(--helix-space-xs);
-padding: var(--helix-space-2xs) var(--helix-space-xs);
-text-decoration: none;
-}
-
-:host(:first-child) a[part="link"] {
-margin-inline-start: calc(var(--helix-space-xs) * -1);
-}
-
-:host(:not([href])) [part="link"] {
-padding-block: var(--helix-space-none);
-}
-
-:host(:not([href]):not([current])) [part="link"] {
-padding-inline: var(--helix-space-none);
-}
-
-a[part="link"]:hover {
-background-color: var(
+);}::slotted(a:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host {font-weight: var(--breadcrumbs-font-weight, var(--helix-weight-medium));}:host([current]) {color: var(--breadcrumbs-current-color, var(--helix-color-foreground));}[part="link"] {align-items: center;border-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));color: var(--breadcrumbs-link-color, var(--helix-color-foreground-muted));display: inline-flex;gap: var(--helix-space-xs);padding: var(--helix-space-2xs) var(--helix-space-xs);text-decoration: none;}:host(:first-child) a[part="link"] {margin-inline-start: calc(var(--helix-space-xs) * -1);}:host(:not([href])) [part="link"] {padding-block: var(--helix-space-none);}:host(:not([href]):not([current])) [part="link"] {padding-inline: var(--helix-space-none);}a[part="link"]: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));
-}
-
-:host([current]) [part="link"] {
-color: var(--breadcrumbs-current-color, var(--helix-color-foreground));
-}
-
-:host([hidden]) {
-display: none;
-}`);
+);color: var(--breadcrumbs-current-color, var(--helix-color-foreground));}a[part="link"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([current]) [part="link"] {color: var(--breadcrumbs-current-color, var(--helix-color-foreground));}:host(:state(end)) [part="link"],
+:host(:state(end)) ::slotted(a) {border-end-end-radius: var(--helix-radii-none);border-start-end-radius: var(--helix-radii-none);padding-inline-end: var(--helix-space-2xs);}:host(:state(end)) slot[name="end"] {--button-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));--button-radius-start: var(--helix-radii-none);--helix-size-focus-offset: calc(var(--helix-size-focus-ring) * -1);--icon-button-background-color-hover: var(
+--breadcrumbs-hover-color,
+color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
+);--icon-button-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));--icon-size: 1.15em;align-items: center;display: inline-flex;margin-inline-start: calc(var(--breadcrumbs-gap, var(--helix-space-xs)) * -1);}:host(:state(end)) a[part="link"]:focus-visible,
+: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;}`);

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

@@ -1,45 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-[part="list"] {
-align-items: center;
-display: flex;
-flex-wrap: wrap;
-font-size: var(--breadcrumbs-font-size, var(--helix-text-sm));
-gap: var(--breadcrumbs-gap, var(--helix-space-xs));
-
-list-style: none;
-margin: var(--helix-space-none);
-padding: var(--helix-space-none);
-}
-
-[part="expand"] {
-all: unset;
-border-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));
-box-sizing: border-box;
-color: var(--breadcrumbs-link-color, var(--helix-color-foreground-muted));
-cursor: pointer;
-line-height: var(--helix-leading-normal);
-padding: var(--helix-space-2xs) var(--helix-space-xs);
-}
-
-[part="expand"]:hover {
-background-color: var(
+export const styles = createSheet(`:host {--_breadcrumbs-split-fill: var(
+--breadcrumbs-split-fill,
+color-mix(in oklab, var(--helix-color-foreground) 4%, transparent)
+);--_breadcrumbs-split-rule: transparent;display: block;}:host([separation="outlined"]) {--_breadcrumbs-split-fill: transparent;--_breadcrumbs-split-rule: var(--breadcrumbs-split-divider-color, var(--helix-color-border));}[part="list"] {align-items: center;display: flex;flex-wrap: wrap;font-size: var(--breadcrumbs-font-size, var(--helix-text-sm));gap: var(--breadcrumbs-gap, var(--helix-space-xs));list-style: none;margin: var(--helix-space-none);padding: var(--helix-space-none);}[part="expand"] {all: unset;border-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));box-sizing: border-box;color: var(--breadcrumbs-link-color, var(--helix-color-foreground-muted));cursor: pointer;line-height: var(--helix-leading-normal);padding: var(--helix-space-2xs) var(--helix-space-xs);}[part="expand"]:hover {background-color: var(
 --breadcrumbs-hover-color,
 color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
-);
-color: var(--breadcrumbs-current-color, var(--helix-color-foreground));
-}
-
-[part="expand"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+);color: var(--breadcrumbs-current-color, var(--helix-color-foreground));}[part="expand"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -21,9 +21,26 @@ import '../breadcrumb/breadcrumb.js';
  *
  * @cssproperty --breadcrumbs-font-size - Size of the trail's text.
  * @cssproperty --breadcrumbs-gap - Space between items and separators.
+ * @cssproperty --breadcrumbs-split-divider-color - Color of the line between the two halves of a
+ *   split crumb, under `separation="outlined"`.
+ * @cssproperty --breadcrumbs-split-fill - Fill across both halves of a split crumb while one of
+ *   them is under the pointer, under the default `plain` separation.
  */
 export declare class HelixBreadcrumbs extends HelixHeadlessBreadcrumbs {
     static tier: string;
+    /**
+     * How the two halves of a split crumb are told apart. A split crumb is one
+     * with a control in its `end` slot, such as a switcher's menu trigger.
+     *
+     * - `plain` is the default. The halves are text at rest, like every other
+     *   crumb. While one half is under the pointer, both halves take a light fill
+     *   and that half takes the full hover fill.
+     * - `outlined` draws a hairline between the halves, at rest and under the
+     *   pointer, the way an outlined surface keeps its edge at rest.
+     *
+     * The other crumbs look the same under either value.
+     */
+    separation?: 'outlined' | 'plain';
     static styles: CSSResultGroup;
 }
 declare global {

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

@@ -6,12 +6,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessBreadcrumbs } from '@fusion.dev/helix-headless/breadcrumbs';
+import { property } from 'lit/decorators.js';
 import { styles } from './breadcrumbs-root.css.js';
 import '../breadcrumb/breadcrumb.js';
 let HelixBreadcrumbs = class HelixBreadcrumbs extends HelixHeadlessBreadcrumbs {
     static { this.tier = 'helix-'; }
     static { this.styles = styles; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixBreadcrumbs.prototype, "separation", void 0);
 HelixBreadcrumbs = __decorate([
     customElement('helix-breadcrumbs')
 ], HelixBreadcrumbs);

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

@@ -1,228 +1,47 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: inline-flex;
-
-min-inline-size: var(--button-inline-size, auto);
-max-inline-size: 100%;
-}
-
-:host {
---_button-edge: var(--helix-color-border);
-
---_button-fill: var(--_button-tone);
---_button-fill-hover: var(--_button-tone-hover);
---_button-on-tone: var(--helix-color-background);
---_button-tone: var(--helix-color-foreground);
-
---_button-turn: 0.8s;
-
---_button-tone-hover: color-mix(
+export const styles = createSheet(`:host {display: inline-flex;min-inline-size: var(--button-inline-size, auto);max-inline-size: 100%;}:host {--_button-edge: var(--helix-color-border);--_button-fill: var(--_button-tone);--_button-fill-hover: var(--_button-tone-hover);--_button-on-tone: var(--helix-color-background);--_button-tone: var(--helix-color-foreground);--_button-turn: 0.8s;--_button-tone-hover: color-mix(
 in oklab,
 var(--helix-color-foreground) 86%,
 var(--helix-color-background)
-);
-}
-:host([tone="primary"]) {
---_button-edge: var(--helix-color-primary);
---_button-fill: var(--helix-color-primary-surface);
---_button-fill-hover: var(--helix-color-primary-surface-hover);
---_button-on-tone: var(--helix-color-foreground-on-primary);
---_button-tone: var(--helix-color-primary);
---_button-tone-hover: var(--helix-color-primary-hover);
-}
-
-:host([tone="accent"]) {
---_button-edge: var(--helix-color-accent);
---_button-fill: var(--helix-color-accent-surface);
---_button-fill-hover: var(--helix-color-accent-surface-hover);
---_button-on-tone: var(--helix-color-foreground-on-accent);
---_button-tone: var(--helix-color-accent);
---_button-tone-hover: var(--helix-color-accent-hover);
-}
-:host([tone="danger"]) {
---_button-edge: var(--helix-color-danger);
---_button-fill: var(--helix-color-danger-surface);
---_button-fill-hover: var(--helix-color-danger-surface-hover);
---_button-on-tone: var(--helix-color-foreground-on-status);
---_button-tone: var(--helix-color-danger);
-
---_button-tone-hover: color-mix(
+);}:host([tone="primary"]) {--_button-edge: var(--helix-color-primary);--_button-fill: var(--helix-color-primary-surface);--_button-fill-hover: var(--helix-color-primary-surface-hover);--_button-on-tone: var(--helix-color-foreground-on-primary);--_button-tone: var(--helix-color-primary);--_button-tone-hover: var(--helix-color-primary-hover);}:host([tone="accent"]) {--_button-edge: var(--helix-color-accent);--_button-fill: var(--helix-color-accent-surface);--_button-fill-hover: var(--helix-color-accent-surface-hover);--_button-on-tone: var(--helix-color-foreground-on-accent);--_button-tone: var(--helix-color-accent);--_button-tone-hover: var(--helix-color-accent-hover);}:host([tone="danger"]) {--_button-edge: var(--helix-color-danger);--_button-fill: var(--helix-color-danger-surface);--_button-fill-hover: var(--helix-color-danger-surface-hover);--_button-on-tone: var(--helix-color-foreground-on-status);--_button-tone: var(--helix-color-danger);--_button-tone-hover: color-mix(
 in oklab,
 var(--helix-color-danger) 86%,
 var(--helix-color-foreground)
-);
-}
-
-[part="button"] {
-all: unset;
-align-items: center;
-
-background-color: var(
+);}[part="button"] {all: unset;align-items: center;background-color: var(
 --button-background-color,
 color-mix(in oklab, var(--_button-tone) 6%, transparent)
-);
-
-block-size: var(--button-size, var(--helix-size-control));
-border: var(--helix-border-thin) solid var(--button-border-color, var(--_button-edge));
-box-sizing: border-box;
-color: var(--button-foreground-color, var(--_button-tone));
-cursor: pointer;
-display: inline-flex;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-control);
-font-weight: var(--helix-weight-medium);
-gap: var(--button-gap, var(--helix-space-xs));
-inline-size: 100%;
-justify-content: center;
-letter-spacing: var(--helix-tracking-normal);
-line-height: var(--helix-leading-tight);
-
-padding-inline: var(--button-padding-inline, var(--helix-space-control));
-text-decoration: none;
-transition:
+);block-size: var(--button-size, var(--helix-size-control));border: var(--helix-border-thin) solid var(--button-border-color, var(--_button-edge));box-sizing: border-box;color: var(--button-foreground-color, var(--_button-tone));cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-control);font-weight: var(--helix-weight-medium);gap: var(--button-gap, var(--helix-space-xs));inline-size: 100%;justify-content: center;letter-spacing: var(--helix-tracking-normal);line-height: var(--helix-leading-tight);padding-inline: var(--button-padding-inline, var(--helix-space-control));text-decoration: none;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
 border-color var(--helix-duration-fast) var(--helix-easing-standard),
-color var(--helix-duration-fast) var(--helix-easing-standard);
-white-space: nowrap;
-}
-
-[part="button"] {
-border-end-end-radius: var(
+color var(--helix-duration-fast) var(--helix-easing-standard);white-space: nowrap;}[part="button"] {border-end-end-radius: var(
 --button-radius-end-end,
 var(--button-radius-end, var(--button-radius, var(--helix-radii-sm)))
-);
-border-end-start-radius: var(
+);border-end-start-radius: var(
 --button-radius-end-start,
 var(--button-radius-start, var(--button-radius, var(--helix-radii-sm)))
-);
-border-start-end-radius: var(
+);border-start-end-radius: var(
 --button-radius-start-end,
 var(--button-radius-end, var(--button-radius, var(--helix-radii-sm)))
-);
-border-start-start-radius: var(
+);border-start-start-radius: var(
 --button-radius-start-start,
 var(--button-radius-start, var(--button-radius, var(--helix-radii-sm)))
-);
-}
-
-:host(:not(:disabled)) [part="button"]:hover {
-background-color: var(
+);}:host(:not(:disabled)) [part="button"]:hover {background-color: var(
 --button-background-color-hover,
 var(--button-background-color, color-mix(in oklab, var(--_button-tone) 12%, transparent))
-);
-}
-
-[part="button"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host([emphasis="solid"]) [part="button"] {
-background-color: var(--button-background-color, var(--_button-fill));
-border-color: transparent;
-color: var(--button-foreground-color, var(--_button-on-tone));
-}
-:host(:not(:disabled)[emphasis="solid"]) [part="button"]:hover {
-background-color: var(
+);}[part="button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([emphasis="solid"]) [part="button"] {background-color: var(--button-background-color, var(--_button-fill));border-color: transparent;color: var(--button-foreground-color, var(--_button-on-tone));}:host(:not(:disabled)[emphasis="solid"]) [part="button"]:hover {background-color: var(
 --button-background-color-hover,
 var(--button-background-color, var(--_button-fill-hover))
-);
-border-color: transparent;
-}
-
-:host([emphasis="subtle"]) [part="button"] {
-background-color: var(
+);border-color: transparent;}:host([emphasis="subtle"]) [part="button"] {background-color: var(
 --button-background-color,
 color-mix(in oklab, var(--_button-tone) 14%, transparent)
-);
-border-color: transparent;
-color: var(
+);border-color: transparent;color: var(
 --button-foreground-color,
 color-mix(in oklab, var(--_button-tone) 78%, var(--helix-color-foreground))
-);
-}
-
-:host(:not(:disabled)[emphasis="subtle"]) [part="button"]:hover {
-background-color: var(
+);}:host(:not(:disabled)[emphasis="subtle"]) [part="button"]:hover {background-color: var(
 --button-background-color-hover,
 var(--button-background-color, color-mix(in oklab, var(--_button-tone) 22%, transparent))
-);
-border-color: transparent;
-}
-:host([emphasis="ghost"]) [part="button"] {
-background-color: var(--button-background-color, transparent);
-border-color: transparent;
-color: var(--button-foreground-color, var(--_button-tone));
-}
-
-:host(:not(:disabled)[emphasis="ghost"]) [part="button"]:hover {
-background-color: var(
+);border-color: transparent;}:host([emphasis="ghost"]) [part="button"] {background-color: var(--button-background-color, transparent);border-color: transparent;color: var(--button-foreground-color, var(--_button-tone));}:host(:not(:disabled)[emphasis="ghost"]) [part="button"]:hover {background-color: var(
 --button-background-color-hover,
 var(--button-background-color, color-mix(in oklab, var(--_button-tone) 8%, transparent))
-);
-border-color: transparent;
-}
-
-:host([width="full"]) {
-display: flex;
-inline-size: 100%;
-}
-
-:host(:disabled) [part="button"] {
-cursor: not-allowed;
-opacity: 0.5;
-}
-
-@supports (text-box: trim-both cap alphabetic) {
-slot:not([name]) {
-display: block;
-padding-block: var(--helix-space-2xs);
-text-box: trim-both cap alphabetic;
-}
-}
-
-[part="button"] ::slotted(helix-icon) {
---icon-size: 1.15em;
-}
-
-:host(:state(pending)) [part="button"] {
-cursor: progress;
-position: relative;
-}
-
-:host(:state(pending)) [part="button"] > slot {
-visibility: hidden;
-}
-
-:host(:state(pending)) [part="button"]::after {
-animation: helix-button-turn var(--button-spinner-duration, var(--_button-turn)) linear infinite;
-block-size: var(--button-spinner-size, 1.15em);
-border: var(--helix-border-thick) solid
-color-mix(in oklab, var(--button-spinner-color, currentColor) 30%, transparent);
-border-block-start-color: var(--button-spinner-color, currentColor);
-border-radius: var(--helix-radii-full);
-box-sizing: border-box;
-content: "";
-inline-size: var(--button-spinner-size, 1.15em);
-inset: 0;
-margin: auto;
-position: absolute;
-}
-
-@keyframes helix-button-turn {
-to {
-rotate: 1turn;
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-:host(:state(pending)) [part="button"]::after {
-animation-duration: calc(var(--helix-duration-slow) * 12);
-}
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+);border-color: transparent;}:host([width="full"]) {display: flex;inline-size: 100%;}:host(:disabled) [part="button"] {cursor: not-allowed;opacity: 0.5;}@supports (text-box: trim-both cap alphabetic) {slot:not([name]) {display: block;padding-block: var(--helix-space-2xs);text-box: trim-both cap alphabetic;}}[part="button"] ::slotted(helix-icon) {--icon-size: 1.15em;}:host(:state(pending)) [part="button"] {cursor: progress;position: relative;}:host(:state(pending)) [part="button"] > slot {visibility: hidden;}[part="spinner"] {animation: helix-button-turn var(--button-spinner-duration, var(--_button-turn)) linear infinite;block-size: var(--button-spinner-size, 1.15em);border: var(--helix-border-thick) solid
+color-mix(in oklab, var(--button-spinner-color, currentColor) 30%, transparent);border-block-start-color: var(--button-spinner-color, currentColor);border-radius: var(--helix-radii-full);box-sizing: border-box;inline-size: var(--button-spinner-size, 1.15em);inset: 0;margin: auto;position: absolute;}@keyframes helix-button-turn {to {rotate: 1turn;}}@media (prefers-reduced-motion: reduce) {[part="spinner"] {animation-duration: calc(var(--helix-duration-slow) * 12);}}@media print {:host {display: none;}}`);

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

@@ -27,6 +27,7 @@ declare const HelixButton_base: (new (...args: any[]) => import("../../shared/mi
  *
  * @csspart button - The inner control.
  * @csspart live - The live region that says `pending-label` when the button becomes pending under focus. It is clipped out of view and still read.
+ * @csspart spinner - The ring a pending button turns over its words, sized and colored by the `--button-spinner-*` hooks.
  *
  * @cssproperty --button-background-color - Fill behind the button, in every state.
  * @cssproperty --button-background-color-hover - Fill behind the button under the pointer. Without it, `--button-background-color` also applies on hover.

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

@@ -1,53 +1,12 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: inline-flex;
-}
-
-:host(:not([variant="spaced"])) ::slotted(*:not(:first-child)) {
-margin-inline-start: calc(var(--helix-border-thin) * -1);
-}
-
-:host(:not([variant="spaced"])) ::slotted(*:not(:first-child)) {
---button-radius-start: 0;
-}
-
-:host(:not([variant="spaced"])) ::slotted(*:not(:last-child)) {
---button-radius-end: 0;
-}
-
-:host([orientation="vertical"]) {
-align-items: stretch;
-flex-direction: column;
-}
-
-:host([orientation="vertical"]:not([variant="spaced"])) ::slotted(*:not(:first-child)) {
---button-radius-start-start: 0;
---button-radius-start-end: 0;
---button-radius-start: var(--button-radius, var(--helix-radii-sm));
-margin-block-start: calc(var(--helix-border-thin) * -1);
-
-margin-inline-start: 0;
-}
-
-:host([orientation="vertical"]:not([variant="spaced"])) ::slotted(*:not(:last-child)) {
---button-radius-end-end: 0;
---button-radius-end-start: 0;
---button-radius-end: var(--button-radius, var(--helix-radii-sm));
-}
-
-::slotted(*:hover),
-::slotted(*:focus-within) {
-position: relative;
-
-z-index: var(--helix-layer-raised);
-}
-
-:host([variant="spaced"]) {
-gap: var(--button-group-gap, var(--helix-space-xs));
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+export const styles = createSheet(`:host {display: inline-flex;}:host([size="sm"]) {--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-control: var(--helix-size-control-sm);--helix-size-icon: var(--helix-size-icon-sm);--helix-space-control: var(--helix-space-sm);--helix-text-control: var(--helix-text-xs);}:host([size="md"]) {--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-control: var(--helix-size-control-md);--helix-size-icon: var(--helix-size-icon-md);--helix-space-control: var(--helix-space-md);--helix-text-control: var(--helix-text-sm);}:host([size="lg"]) {--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-control: var(--helix-size-control-lg);--helix-size-icon: var(--helix-size-icon-lg);--helix-space-control: var(--helix-space-lg);--helix-text-control: var(--helix-text-md);}:host([size]) ::slotted(button) {block-size: var(--helix-size-control);font-size: var(--helix-text-control);}:host([selection-mode]) {--_button-group-pressed-background: var(
+--button-group-pressed-background-color,
+var(--helix-color-foreground)
+);--_button-group-pressed-border: var(
+--button-group-pressed-border-color,
+var(--_button-group-pressed-background)
+);--_button-group-pressed-foreground: var(
+--button-group-pressed-color,
+var(--helix-color-background)
+);}:host(:not([variant="spaced"])) ::slotted(*:not(:first-child)) {margin-inline-start: calc(var(--helix-border-thin) * -1);}:host(:not([variant="spaced"])) ::slotted(*:not(:first-child)) {--button-radius-start: 0;}:host(:not([variant="spaced"])) ::slotted(*:not(:last-child)) {--button-radius-end: 0;}:host([orientation="vertical"]) {align-items: stretch;flex-direction: column;}:host([orientation="vertical"]:not([variant="spaced"])) ::slotted(*:not(:first-child)) {--button-radius-start-start: 0;--button-radius-start-end: 0;--button-radius-start: var(--button-radius, var(--helix-radii-sm));margin-block-start: calc(var(--helix-border-thin) * -1);margin-inline-start: 0;}:host([orientation="vertical"]:not([variant="spaced"])) ::slotted(*:not(:last-child)) {--button-radius-end-end: 0;--button-radius-end-start: 0;--button-radius-end: var(--button-radius, var(--helix-radii-sm));}::slotted(*:hover),
+::slotted(*:focus-within) {position: relative;z-index: var(--helix-layer-raised);}:host([variant="spaced"]) {gap: var(--button-group-gap, var(--helix-space-xs));}@media print {:host {display: none;}}`);