@fusion.dev/helix 0.145.0 → 0.147.0

package/dist/accordion/item/accordion-item.css.js

@@ -1,93 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-[part="trigger"] {
-all: unset;
-
-box-sizing: border-box;
-align-items: center;
-color: var(--helix-color-foreground);
-cursor: pointer;
-display: flex;
-font-size: var(--helix-text-md);
-font-weight: var(--helix-weight-medium);
-inline-size: 100%;
-
-gap: var(--helix-space-xs);
-
-min-block-size: var(--helix-size-control);
-padding: var(--accordion-item-padding, var(--helix-space-sm) var(--helix-space-md));
-transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="chevron"] {
-block-size: 1em;
-color: var(--helix-color-foreground-subtle);
-flex: 0 0 auto;
-inline-size: 1em;
-transform: scaleY(1);
-transition: transform var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-::slotted([slot="chevron"]) {
-block-size: 1em;
-color: var(--helix-color-foreground-subtle);
-flex: 0 0 auto;
-inline-size: 1em;
-transition: transform var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host(:not([chevron-placement="start"])) [part="chevron"],
-:host(:not([chevron-placement="start"])) ::slotted([slot="chevron"]) {
-margin-inline-start: auto;
-}
-
-:host(:state(open)) [part="chevron"],
-:host(:state(open)) ::slotted([slot="chevron"]) {
-transform: scaleY(-1);
-}
-
-[part="trigger"]:hover:not(:disabled) [part="chevron"],
-[part="trigger"]:hover:not(:disabled) ::slotted([slot="chevron"]) {
-color: var(--helix-color-foreground);
-}
-
-[part="trigger"]:disabled {
-cursor: not-allowed;
-opacity: 0.5;
-}
-
-[part="trigger"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: calc(var(--helix-size-focus-offset) * -1);
-}
-
-[part="content"] {
-display: grid;
-grid-template-rows: 0fr;
-transition: grid-template-rows var(--helix-duration-normal) var(--helix-easing-standard);
-}
-
-:host(:state(open)) [part="content"] {
-grid-template-rows: 1fr;
-}
-
-[part="content-inner"] {
-
-min-block-size: 0;
-overflow: hidden;
-}
-
-[part="content-inner"] > slot {
-color: var(--helix-color-foreground-muted);
-display: block;
-line-height: var(--helix-leading-normal);
-padding: var(--accordion-item-padding, var(--helix-space-sm) var(--helix-space-md));
-padding-block-start: 0;
-}
-
-:host([chevron-placement="start"]) [part="content-inner"] > slot {
-margin-inline-start: calc(var(--helix-text-md) + var(--helix-space-xs));
-}`);
+export const styles = createSheet(`:host {display: block;}[part="trigger"] {all: unset;box-sizing: border-box;align-items: center;color: var(--accordion-item-color, var(--helix-color-foreground));cursor: pointer;display: flex;font-size: var(--accordion-item-font-size, var(--helix-text-md));font-weight: var(--accordion-item-font-weight, var(--helix-weight-medium));inline-size: 100%;gap: var(--helix-space-xs);min-block-size: var(--helix-size-control);padding: var(--accordion-item-padding, var(--helix-space-sm) var(--helix-space-md));transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);}[part="chevron"] {block-size: 1em;color: var(--accordion-item-chevron-color, var(--helix-color-foreground-subtle));flex: 0 0 auto;inline-size: 1em;transform: scaleY(1);transition: transform var(--helix-duration-fast) var(--helix-easing-standard);}::slotted([slot="chevron"]) {block-size: 1em;color: var(--accordion-item-chevron-color, var(--helix-color-foreground-subtle));flex: 0 0 auto;inline-size: 1em;transition: transform var(--helix-duration-fast) var(--helix-easing-standard);}:host(:not([chevron-placement="start"])) [part="chevron"],
+:host(:not([chevron-placement="start"])) ::slotted([slot="chevron"]) {margin-inline-start: auto;}:host(:state(open)) [part="chevron"],
+:host(:state(open)) ::slotted([slot="chevron"]) {transform: scaleY(-1);}[part="trigger"]:hover:not(:disabled) {background-color: var(--accordion-item-hover-background-color, transparent);}[part="trigger"]:hover:not(:disabled) [part="chevron"],
+[part="trigger"]:hover:not(:disabled) ::slotted([slot="chevron"]) {color: var(--accordion-item-chevron-hover-color, var(--helix-color-foreground));}[part="trigger"]:disabled {cursor: not-allowed;opacity: var(--accordion-item-disabled-opacity, 0.5);}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="content"] {display: grid;grid-template-rows: 0fr;transition: grid-template-rows var(--helix-duration-normal) var(--helix-easing-standard);}:host(:state(open)) [part="content"] {grid-template-rows: 1fr;}[part="content-inner"] {min-block-size: 0;overflow: hidden;}[part="content-inner"] > slot {color: var(--accordion-item-content-color, var(--helix-color-foreground-muted));display: block;line-height: var(--helix-leading-normal);padding: var(--accordion-item-padding, var(--helix-space-sm) var(--helix-space-md));padding-block-start: 0;}:host([chevron-placement="start"]) [part="content-inner"] > slot {margin-inline-start: calc(var(--helix-text-md) + var(--helix-space-xs));}`);

package/dist/accordion/item/accordion-item.d.ts

@@ -27,6 +27,14 @@ import type { CSSResultGroup } from 'lit';
  * @csspart heading - The heading that holds the trigger.
  * @csspart trigger - The button that opens and closes the section, holding the summary.
  *
+ * @cssproperty --accordion-item-chevron-color - The color of the open and close indicator.
+ * @cssproperty --accordion-item-chevron-hover-color - The indicator's color while the pointer is on the trigger.
+ * @cssproperty --accordion-item-color - The color of the trigger's text.
+ * @cssproperty --accordion-item-content-color - The color of the content's text.
+ * @cssproperty --accordion-item-disabled-opacity - How faint a disabled trigger is drawn.
+ * @cssproperty --accordion-item-font-size - The size of the trigger's text.
+ * @cssproperty --accordion-item-font-weight - The weight of the trigger's text.
+ * @cssproperty --accordion-item-hover-background-color - The trigger's fill while the pointer is on it. Unset, there is none.
  * @cssproperty --accordion-item-padding - The padding of the trigger and the content.
  */
 export declare class HelixAccordionItem extends HelixHeadlessAccordionItem {

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

@@ -1,29 +1,3 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-:host([separation="outlined"]) {
-display: flex;
-flex-direction: column;
-gap: var(--accordion-gap, var(--helix-space-xs));
-}
-
-:host([separation="outlined"]) ::slotted(*) {
-border: var(--helix-border-thin) solid var(--accordion-border-color, var(--helix-color-border));
-
-border-radius: var(--accordion-radius, var(--helix-radii-sm));
-
-overflow: hidden;
-}
-
-:host(:not([separation="outlined"])) ::slotted(* + *) {
-border-block-start: var(--helix-border-thin) solid
-var(--accordion-border-color, var(--helix-color-border));
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+export const styles = createSheet(`:host {display: block;}:host([separation="outlined"]) {display: flex;flex-direction: column;gap: var(--accordion-gap, var(--helix-space-xs));}:host([separation="outlined"]) ::slotted(*) {border: var(--helix-border-thin) solid var(--accordion-border-color, var(--helix-color-border));border-radius: var(--accordion-radius, var(--helix-radii-sm));overflow: hidden;}:host(:not([separation="outlined"])) ::slotted(* + *) {border-block-start: var(--helix-border-thin) solid
+var(--accordion-border-color, var(--helix-color-border));}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -1,165 +1,21 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---helix-size-icon: var(--helix-size-icon-sm);
---helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
---helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
---helix-size-control: var(--helix-size-control-sm);
---helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
---helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
-
---_announcement-color: var(--helix-color-foreground-muted);
-
---_announcement-ground: var(--helix-color-background);
-
-align-items: center;
-background-color: var(--announcement-background-color, var(--helix-color-surface-sunken));
-
-color: var(--announcement-foreground-color, var(--helix-color-foreground));
-display: flex;
-font-size: var(--helix-text-sm);
-
-font-weight: var(--helix-weight-medium);
-inline-size: 100%;
-
-min-block-size: var(
+export const styles = createSheet(`:host {--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--_announcement-color: var(--helix-color-foreground-muted);--_announcement-ground: var(--helix-color-background);--_announcement-tint: var(--announcement-tone-color, var(--_announcement-color));align-items: center;background-color: var(--announcement-background-color, var(--helix-color-surface-sunken));color: var(--announcement-foreground-color, var(--helix-color-foreground));display: flex;font-size: var(--announcement-font-size, var(--helix-text-sm));font-weight: var(--helix-weight-medium);inline-size: 100%;min-block-size: var(
 --announcement-block-size,
 calc(var(--helix-size-control) + var(--helix-space-xs) * 2)
-);
-padding-block: var(--helix-space-xs);
-padding-inline: var(--announcement-inset, var(--helix-space-lg));
-
-position: relative;
-}
-
-:host([tone="info"]) {
---_announcement-color: var(--helix-color-info);
-}
-
-:host([tone="success"]) {
---_announcement-color: var(--helix-color-success);
-}
-
-:host([tone="warning"]) {
---_announcement-color: var(--helix-color-warning);
-}
-
-:host([tone="danger"]) {
---_announcement-color: var(--helix-color-danger);
-}
-
-:host([tone="neutral"]) {
-background-image: none;
-}
-
-:host([tone="primary"]) {
---_announcement-color: var(--helix-color-primary);
-}
-
-:host([tone="accent"]) {
---_announcement-color: var(--helix-color-accent);
-}
-
-:host([tone]:not([tone="neutral"])) {
-background-image: linear-gradient(
+);padding-block: var(--helix-space-xs);padding-inline: var(--announcement-inset, var(--helix-space-lg));position: relative;}:host([tone="info"]) {--_announcement-color: var(--helix-color-info);}:host([tone="success"]) {--_announcement-color: var(--helix-color-success);}:host([tone="warning"]) {--_announcement-color: var(--helix-color-warning);}:host([tone="danger"]) {--_announcement-color: var(--helix-color-danger);}:host([tone="neutral"]) {background-image: none;}:host([tone="primary"]) {--_announcement-color: var(--helix-color-primary);}:host([tone="accent"]) {--_announcement-color: var(--helix-color-accent);}:host([tone]:not([tone="neutral"])) {background-image: linear-gradient(
 to right,
 light-dark(
-color-mix(in oklab, var(--_announcement-color) 18%, var(--_announcement-ground)),
-color-mix(in oklab, var(--_announcement-color) 32%, var(--_announcement-ground))
+color-mix(in oklab, var(--_announcement-tint) 18%, var(--_announcement-ground)),
+color-mix(in oklab, var(--_announcement-tint) 32%, var(--_announcement-ground))
 ),
 light-dark(
-color-mix(in oklab, var(--_announcement-color) 10%, var(--_announcement-ground)),
-color-mix(in oklab, var(--_announcement-color) 20%, var(--_announcement-ground))
+color-mix(in oklab, var(--_announcement-tint) 10%, var(--_announcement-ground)),
+color-mix(in oklab, var(--_announcement-tint) 20%, var(--_announcement-ground))
 )
-);
-}
-
-:host([separation="filled"]) {
-background-color: var(--announcement-background-color, var(--helix-color-surface-sunken));
-}
-
-:host([separation="elevated"]) {
---_announcement-ground: var(--helix-color-surface);
-
-background-color: var(--announcement-background-color, var(--helix-color-surface));
-}
-
-:host([separation="outlined"]) {
-border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
-}
-
-:host([separation="outlined"][tone]:not([tone="neutral"])) {
-border-block-end-color: color-mix(
+);}:host([separation="filled"]) {background-color: var(--announcement-background-color, var(--helix-color-surface-sunken));}:host([separation="elevated"]) {--_announcement-ground: var(--helix-color-surface);background-color: var(--announcement-background-color, var(--helix-color-surface));}:host([separation="outlined"]) {border-block-end: var(--helix-border-thin) solid var(--helix-color-border);}:host([separation="outlined"][tone]:not([tone="neutral"])) {border-block-end-color: color-mix(
 in oklab,
-var(--_announcement-color) 40%,
+var(--_announcement-tint) 40%,
 var(--_announcement-ground)
-);
-}
-
-[part="content"] {
-flex: 1 1 auto;
-min-inline-size: 0;
-text-align: center;
-}
-
-:host([dismissible]) [part="content"] {
-padding-inline: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2 + var(--helix-space-xs));
-}
-
-[part="actions"] slot::slotted(*) {
-margin-inline-start: var(--helix-space-md);
-}
-
-[part="actions"] {
-align-items: center;
-display: flex;
-flex: 0 0 auto;
-gap: var(--helix-space-xs);
-}
-
-[part="dismiss"] {
-all: unset;
-
-box-sizing: border-box;
-
-block-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);
-inline-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-muted);
-cursor: pointer;
-display: inline-flex;
-flex: 0 0 auto;
-place-content: center;
-place-items: center;
-
-position: absolute;
-inset-inline-end: var(--announcement-inset, var(--helix-space-lg));
-transition:
+);}[part="content"] {flex: 1 1 auto;min-inline-size: 0;text-align: var(--announcement-text-align, center);}:host([dismissible]) [part="content"] {padding-inline: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2 + var(--helix-space-xs));}[part="actions"] slot::slotted(*) {margin-inline-start: var(--helix-space-md);}[part="actions"] {align-items: center;display: flex;flex: 0 0 auto;gap: var(--helix-space-xs);}[part="dismiss"] {all: unset;box-sizing: border-box;block-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);inline-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;flex: 0 0 auto;place-content: center;place-items: center;position: absolute;inset-inline-end: var(--announcement-inset, var(--helix-space-lg));transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="dismiss"]:hover {
-background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
-color: var(--helix-color-foreground);
-}
-
-[part="dismiss"] svg {
-block-size: var(--helix-size-icon);
-inline-size: var(--helix-size-icon);
-}
-
-[part="dismiss"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="actions"][data-empty] {
-display: none;
-}
-
-@media print {
-:host {
-background-color: transparent;
-}
-}`);
+color var(--helix-duration-fast) var(--helix-easing-standard);}[part="dismiss"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground);}[part="dismiss"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}[part="dismiss"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="actions"][data-empty] {display: none;}@media print {:host {background-color: transparent;}}`);

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

@@ -16,8 +16,11 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --announcement-background-color - The band's fill, in place of the one its separation gives it. A tone's tint still paints over it, so a band that sets this usually carries no tone.
  * @cssproperty --announcement-block-size - The band's minimum height, so adding a control to it does not move the page down. A message long enough to wrap makes the band taller.
+ * @cssproperty --announcement-font-size - The size of the message's text.
  * @cssproperty --announcement-foreground-color - The message's color, to pair with a fill set through the background hook.
  * @cssproperty --announcement-inset - The inline padding, matched to the page.
+ * @cssproperty --announcement-text-align - Where the message sits in the band. Centered by default; `start` lines it up with the page under it.
+ * @cssproperty --announcement-tone-color - The color a toned band's tint and outline are mixed from, in place of the tone's.
  */
 export declare class HelixAnnouncement extends HelixHeadlessAnnouncement {
     /**

package/dist/app-header/root/app-header-root.css.js

@@ -1,121 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---helix-size-checkbox: var(--helix-size-checkbox-sm);
---helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);
---helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);
-
---helix-size-icon: var(--helix-size-icon-sm);
---helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
---helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
---helix-size-control: var(--helix-size-control-sm);
---helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
---helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
---helix-size-tag: var(--helix-size-tag-sm);
-
-background-color: var(--app-header-background-color, var(--helix-color-background));
-border-block-end: var(--helix-border-thin) solid var(--app-header-border-color, transparent);
-
-container-type: inline-size;
-display: block;
-inline-size: 100%;
-
-transition:
+export const styles = createSheet(`:host {--helix-size-checkbox: var(--helix-size-checkbox-sm);--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-tag: var(--helix-size-tag-sm);background-color: var(--app-header-background-color, var(--helix-color-background));border-block-end: var(--helix-border-thin) solid var(--app-header-border-color, transparent);container-type: inline-size;display: block;inline-size: 100%;transition:
 backdrop-filter var(--helix-duration-normal) var(--helix-easing-standard),
 background-color var(--helix-duration-normal) var(--helix-easing-standard),
-border-color var(--helix-duration-normal) var(--helix-easing-standard);
-}
-
-:host([material="glass"]) {
-backdrop-filter: var(--app-header-backdrop, var(--helix-material-backdrop));
-background-color: var(--app-header-background-color, var(--helix-material-translucent));
-}
-
-:host([material="frosted"]) {
-backdrop-filter: var(--app-header-backdrop, blur(var(--helix-material-blur-lg)));
-background-color: var(--app-header-background-color, var(--helix-material-translucent-strong));
-}
-
-:host([material="transparent"]) {
-background-color: var(--app-header-background-color, transparent);
-}
-
-:host([material="transparent"]:state(scrolled)) {
-backdrop-filter: var(--app-header-backdrop, var(--helix-material-backdrop));
-background-color: var(--app-header-background-color, var(--helix-material-translucent));
-}
-
-:host([sticky]) {
-inset-block-start: 0;
-position: sticky;
-z-index: var(--helix-layer-sticky);
-}
-
-[part="row"] {
-align-items: center;
-block-size: var(--app-header-block-size, var(--helix-size-header));
-display: grid;
-gap: var(--helix-space-lg);
-grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
-margin-inline: auto;
-max-inline-size: var(--app-header-max-inline-size, 72rem);
-padding-inline: var(--app-header-padding, var(--helix-space-lg));
-}
-
-[part="start"] {
-align-items: center;
-display: flex;
-min-inline-size: 0;
-}
-
-[part="end"] {
-align-items: center;
-display: flex;
-gap: var(--helix-space-xs);
-justify-content: flex-end;
-min-inline-size: 0;
-}
-
-:host([content-align="start"]) [part="row"] {
-grid-template-columns: auto 1fr auto;
-}
-
-slot[name="start"]::slotted(*) {
-align-items: center;
-color: var(--helix-color-foreground);
-display: flex;
-flex: 0 0 auto;
-font-weight: var(--helix-weight-semibold);
-gap: var(--helix-space-xs);
-letter-spacing: var(--helix-tracking-tight);
-}
-
-[part="content"] {
-align-items: center;
-display: flex;
-
-position: relative;
-gap: var(--helix-space-md);
-
-justify-content: safe center;
-
-min-inline-size: 0;
-overflow-x: auto;
-}
-
-:host([content-align="start"]) [part="content"] {
-justify-content: flex-start;
-}
-
-@container (inline-size < 24rem) {
-[part="row"] {
-gap: var(--helix-space-md);
-padding-inline: var(--app-header-padding, var(--helix-space-md));
-}
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+border-color var(--helix-duration-normal) var(--helix-easing-standard);}:host([material="glass"]) {backdrop-filter: var(--app-header-backdrop, var(--helix-material-backdrop));background-color: var(--app-header-background-color, var(--helix-material-translucent));}:host([material="frosted"]) {backdrop-filter: var(--app-header-backdrop, blur(var(--helix-material-blur-lg)));background-color: var(--app-header-background-color, var(--helix-material-translucent-strong));}:host([material="transparent"]) {background-color: var(--app-header-background-color, transparent);}:host([material="transparent"]:state(scrolled)) {backdrop-filter: var(--app-header-backdrop, var(--helix-material-backdrop));background-color: var(--app-header-background-color, var(--helix-material-translucent));}:host([sticky]) {inset-block-start: 0;position: sticky;z-index: var(--helix-layer-sticky);}[part="row"] {align-items: center;block-size: var(--app-header-block-size, var(--helix-size-header));display: grid;gap: var(--helix-space-lg);grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);margin-inline: auto;max-inline-size: var(--app-header-max-inline-size, 72rem);padding-inline: var(--app-header-padding, var(--helix-space-lg));}[part="start"] {align-items: center;display: flex;min-inline-size: 0;}[part="end"] {align-items: center;display: flex;gap: var(--helix-space-xs);justify-content: flex-end;min-inline-size: 0;}:host([content-align="start"]) [part="row"] {grid-template-columns: auto 1fr auto;}slot[name="start"]::slotted(*) {align-items: center;color: var(--helix-color-foreground);display: flex;flex: 0 0 auto;font-weight: var(--helix-weight-semibold);gap: var(--helix-space-xs);letter-spacing: var(--helix-tracking-tight);}[part="content"] {align-items: center;display: flex;position: relative;gap: var(--helix-space-md);justify-content: safe center;min-inline-size: 0;overflow-x: auto;}:host([content-align="start"]) [part="content"] {justify-content: flex-start;}@container (inline-size < 24rem) {[part="row"] {gap: var(--helix-space-md);padding-inline: var(--app-header-padding, var(--helix-space-md));}}@media print {:host {display: none;}}`);

package/dist/area-chart/root/area-chart-root.css.js

@@ -1,98 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: grid;
-gap: var(--area-chart-gap, var(--helix-space-2xs));
-position: relative;
-}
-
-[part="plot"] {
-block-size: var(--area-chart-block-size, 12em);
-cursor: crosshair;
-position: relative;
-}
-
-[part="plot"] svg {
-block-size: 100%;
-inline-size: 100%;
-overflow: visible;
-}
-
-[part="area"] {
-fill: color-mix(
+export const styles = createSheet(`:host {display: grid;gap: var(--area-chart-gap, var(--helix-space-2xs));position: relative;}[part="plot"] {block-size: var(--area-chart-block-size, 12em);cursor: crosshair;position: relative;}[part="plot"] svg {block-size: 100%;inline-size: 100%;overflow: visible;}[part="area"] {fill: color-mix(
 in oklab,
 var(--chart-series) var(--area-chart-fill-strength, 55%),
 var(--helix-color-background)
-);
-stroke: none;
-}
-
-[part="line"] {
-stroke: var(--chart-series);
-stroke-linejoin: round;
-
-stroke-width: var(--area-chart-width, var(--_chart-stroke));
-vector-effect: non-scaling-stroke;
-}
-
-[part="baseline"] {
-stroke: var(--helix-color-border);
-stroke-width: var(--helix-border-thin);
-vector-effect: non-scaling-stroke;
-}
-
-[part="gridline"] {
-stroke: var(--area-chart-gridline-color, var(--helix-color-border));
-stroke-opacity: 0.7;
-stroke-width: var(--helix-border-thin);
-vector-effect: non-scaling-stroke;
-}
-
-[part="guide"] {
-stroke: var(--helix-color-foreground-muted);
-stroke-dasharray: 3 3;
-stroke-width: var(--helix-border-thin);
-vector-effect: non-scaling-stroke;
-}
-
-[part="labels"] {
-display: grid;
-grid-auto-columns: 1fr;
-grid-auto-flow: column;
-}
-
-[part="label"] {
-color: var(--helix-color-foreground-muted);
-font-size: var(--helix-text-xs);
-overflow: hidden;
-text-align: center;
-text-overflow: ellipsis;
-white-space: nowrap;
-}
-
-[part="summary"] {
-block-size: 1px;
-clip-path: inset(50%);
-inline-size: 1px;
-margin: var(--helix-space-none);
-overflow: hidden;
-position: absolute;
-white-space: nowrap;
-}
-
-[part="area"],
-[part="line"] {
-transition: d var(--helix-duration-normal) var(--helix-easing-decelerate);
-}
-
-@starting-style {
-[part="area"],
-[part="line"] {
-opacity: 0;
-}
-}
-
-@media print {
-:host {
-print-color-adjust: exact;
-}
-}`);
+);stroke: none;}:host([overlap]) [part="area"] {fill: var(--chart-series);fill-opacity: var(--area-chart-overlap-opacity, 0.3);}[part="line"] {stroke: var(--chart-series);stroke-linejoin: round;stroke-width: var(--area-chart-width, var(--_chart-stroke));vector-effect: non-scaling-stroke;}[part="baseline"] {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part="gridline"] {stroke: var(--area-chart-gridline-color, var(--helix-color-border));stroke-opacity: 0.7;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part="guide"] {stroke: var(--helix-color-foreground-muted);stroke-dasharray: 3 3;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part="labels"] {display: grid;grid-auto-columns: 1fr;grid-auto-flow: column;}[part="label"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);overflow: hidden;text-align: center;text-overflow: ellipsis;white-space: nowrap;}[part="summary"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap;}[part="area"],
+[part="line"] {transition: d var(--helix-duration-normal) var(--helix-easing-decelerate);}@starting-style {[part="area"],
+[part="line"] {opacity: 0;}}@media print {:host {print-color-adjust: exact;}}`);

package/dist/area-chart/root/area-chart-root.d.ts

@@ -36,6 +36,7 @@ import '../../tooltip/index.js';
  * @cssproperty --area-chart-fill-strength - How much of its series' color a band takes, as a percentage mixed toward the page.
  * @cssproperty --area-chart-gap - Space between the drawing and its labels.
  * @cssproperty --area-chart-gridline-color - Color of the rules drawn across the plot under `gridlines`.
+ * @cssproperty --area-chart-overlap-opacity - How much of each band shows under `overlap`, where the bands in front let the ones behind show through.
  * @cssproperty --area-chart-width - Thickness of a band's top edge. Overrides `--chart-stroke`.
  * @cssproperty --chart-stroke - Thickness of a band's top edge. Area Chart, Line Chart, and Bar Chart's `lines` all read this one property. `--area-chart-width` overrides it here.
  */

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

@@ -1,59 +1,7 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---_aura-glow: var(--aura-glow, var(--helix-color-primary));
---_aura-ground: var(--aura-ground, var(--helix-color-background));
---_aura-haze: var(--aura-haze, var(--helix-color-primary-subtle));
-
-position: relative;
-display: block;
-inline-size: 100%;
-block-size: 100%;
-
-background-image: radial-gradient(
+export const styles = createSheet(`:host {--_aura-glow: var(--aura-glow, var(--helix-color-primary));--_aura-ground: var(--aura-ground, var(--helix-color-background));--_aura-haze: var(--aura-haze, var(--helix-color-primary-subtle));position: relative;display: block;inline-size: 100%;block-size: 100%;background-image: radial-gradient(
 120% 90% at 62% 12%,
 color-mix(in oklab, var(--_aura-glow) 38%, var(--_aura-ground)) 0%,
 var(--_aura-haze) 38%,
 var(--_aura-ground) 78%
-);
-}
-
-:host {
-pointer-events: none;
-}
-
-:host([interactive]) {
-pointer-events: auto;
-}
-
-[part="canvas"] {
-display: block;
-inline-size: 100%;
-block-size: 100%;
-
-caret-color: var(--aura-peak, var(--helix-color-foreground));
-color: var(--_aura-glow);
-column-rule-color: var(--aura-peak, var(--helix-color-primary-active));
-outline-color: var(--_aura-ground);
-text-decoration-color: var(--_aura-haze);
-}
-
-[part="content"] {
-inset: 0;
-pointer-events: none;
-position: absolute;
-}
-
-::slotted(*) {
-pointer-events: auto;
-}
-
-[part="canvas"][hidden] {
-display: none;
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+);}:host {pointer-events: none;}:host([interactive]) {pointer-events: auto;}[part="canvas"] {display: block;inline-size: 100%;block-size: 100%;caret-color: var(--aura-peak, var(--helix-color-foreground));color: var(--_aura-glow);column-rule-color: var(--aura-peak, var(--helix-color-primary-active));outline-color: var(--_aura-ground);text-decoration-color: var(--_aura-haze);transition-duration: var(--helix-duration-fast);transition-property: caret-color, color, column-rule-color, outline-color, text-decoration-color;}[part="content"] {inset: 0;pointer-events: none;position: absolute;}::slotted(*) {pointer-events: auto;}[part="canvas"][hidden] {display: none;}@media print {:host {display: none;}}`);