@fusion.dev/helix 0.146.0 → 0.148.0

package/dist/avatar/group/avatar-group.css.js

@@ -1,20 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_avatar-group-ring: var(--avatar-group-ring-color, var(--helix-color-background));
-align-items: center;
-display: flex;
-}
-
-::slotted(*) {
-box-shadow: 0 0 0 var(--helix-border-thick) var(--_avatar-group-ring);
-flex: 0 0 auto;
-}
-
-::slotted(*:not(:first-child)) {
-margin-inline-start: calc(-1 * var(--avatar-group-overlap, var(--helix-space-sm)));
-}
-
-:host([max="1"]) ::slotted(:nth-child(n + 2)),
+export const styles = createSheet(`:host {--_avatar-group-ring: var(--avatar-group-ring-color, var(--helix-color-background));align-items: center;display: flex;}::slotted(*) {box-shadow: 0 0 0 var(--helix-border-thick) var(--_avatar-group-ring);flex: 0 0 auto;}::slotted(*:not(:first-child)) {margin-inline-start: calc(-1 * var(--avatar-group-overlap, var(--helix-space-sm)));}:host([max="1"]) ::slotted(:nth-child(n + 2)),
 :host([max="2"]) ::slotted(:nth-child(n + 3)),
 :host([max="3"]) ::slotted(:nth-child(n + 4)),
 :host([max="4"]) ::slotted(:nth-child(n + 5)),
@@ -25,23 +10,7 @@ margin-inline-start: calc(-1 * var(--avatar-group-overlap, var(--helix-space-sm)
 :host([max="9"]) ::slotted(:nth-child(n + 10)),
 :host([max="10"]) ::slotted(:nth-child(n + 11)),
 :host([max="11"]) ::slotted(:nth-child(n + 12)),
-:host([max="12"]) ::slotted(:nth-child(n + 13)) {
-display: none;
-}
-
-[part="overflow"] {
-align-items: center;
-margin-inline-start: calc(-1 * var(--avatar-group-overlap, var(--helix-space-sm)));
-background-color: var(--helix-color-surface-sunken);
-block-size: var(--avatar-size, var(--helix-size-control-md));
-border-radius: var(--helix-radii-full);
-box-shadow: 0 0 0 var(--helix-border-thick) var(--_avatar-group-ring);
-color: var(--helix-color-foreground-muted);
-display: inline-flex;
-flex: 0 0 auto;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-font-weight: var(--helix-weight-medium);
-inline-size: var(--avatar-size, var(--helix-size-control-md));
-justify-content: center;
-}`);
+:host([max="12"]) ::slotted(:nth-child(n + 13)) {display: none;}[part="overflow"] {align-items: center;margin-inline-start: calc(-1 * var(--avatar-group-overlap, var(--helix-space-sm)));background-color: var(
+--avatar-group-overflow-background-color,
+var(--helix-color-surface-sunken)
+);block-size: var(--avatar-size, var(--helix-size-control-md));border-radius: var(--helix-radii-full);box-shadow: 0 0 0 var(--helix-border-thick) var(--_avatar-group-ring);color: var(--avatar-group-overflow-color, var(--helix-color-foreground-muted));display: inline-flex;flex: 0 0 auto;font-family: var(--helix-font-sans);font-size: var(--avatar-group-overflow-font-size, var(--helix-text-xs));font-weight: var(--helix-weight-medium);inline-size: var(--avatar-size, var(--helix-size-control-md));justify-content: center;}`);

package/dist/avatar/group/avatar-group.d.ts

@@ -18,6 +18,9 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Avatar stack, Facepile
  * @documentation https://fusion.dev/helix/components/avatar
  *
+ * @cssproperty --avatar-group-overflow-background-color - The fill of the count of avatars past `max`.
+ * @cssproperty --avatar-group-overflow-color - The color of the count of avatars past `max`.
+ * @cssproperty --avatar-group-overflow-font-size - The type size of the count of avatars past `max`.
  * @cssproperty --avatar-group-overlap - How far each avatar sits over the one before it.
  * @cssproperty --avatar-group-ring-color - Color of the ring that separates one avatar from the next.
  */

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

@@ -1,54 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_avatar-size: var(--avatar-size, var(--helix-size-avatar));
-
-align-items: center;
-
-background-color: var(--avatar-background-color, var(--helix-color-surface-raised));
-block-size: var(--_avatar-size);
-border-radius: var(--helix-radii-full);
-color: var(--helix-color-foreground);
-display: inline-flex;
-flex: 0 0 auto;
-inline-size: var(--_avatar-size);
-justify-content: center;
-overflow: hidden;
-}
-
-:host([size="sm"]) {
---_avatar-size: var(--avatar-size, var(--helix-size-avatar-sm));
-}
-
-:host([size="lg"]) {
---_avatar-size: var(--avatar-size, var(--helix-size-avatar-lg));
-}
-
-:host([shape="rounded"]) {
-border-radius: var(--helix-radii-md);
-}
-
-::slotted(*) {
-block-size: 100%;
-inline-size: 100%;
-object-fit: cover;
-}
-
-[part="image"] {
-block-size: 100%;
-inline-size: 100%;
-object-fit: cover;
-}
-
-[part="initials"] {
-font-size: calc(var(--_avatar-size) * 0.4);
-font-weight: var(--helix-weight-medium);
-letter-spacing: var(--helix-tracking-wide);
-line-height: 1;
-user-select: none;
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+export const styles = createSheet(`:host {--_avatar-size: var(--avatar-size, var(--helix-size-avatar));align-items: center;background-color: var(--avatar-background-color, var(--helix-color-surface-raised));block-size: var(--_avatar-size);border-radius: var(--helix-radii-full);color: var(--avatar-color, var(--helix-color-foreground));display: inline-flex;flex: 0 0 auto;inline-size: var(--_avatar-size);justify-content: center;overflow: hidden;}:host([size="sm"]) {--_avatar-size: var(--avatar-size, var(--helix-size-avatar-sm));}:host([size="lg"]) {--_avatar-size: var(--avatar-size, var(--helix-size-avatar-lg));}:host([shape="rounded"]) {border-radius: var(--helix-radii-md);}::slotted(*) {block-size: 100%;inline-size: 100%;object-fit: cover;}[part="image"] {block-size: 100%;inline-size: 100%;object-fit: cover;}[part="initials"] {font-size: calc(var(--_avatar-size) * 0.4);font-weight: var(--avatar-font-weight, var(--helix-weight-medium));letter-spacing: var(--helix-tracking-wide);line-height: 1;user-select: none;}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -20,6 +20,8 @@ import type { CSSResultGroup } from 'lit';
  * @csspart initials - The initials shown when there is no usable image.
  *
  * @cssproperty --avatar-background-color - Fill behind the initials.
+ * @cssproperty --avatar-color - The color of the initials.
+ * @cssproperty --avatar-font-weight - The weight of the initials.
  * @cssproperty --avatar-size - Edge length of the avatar.
  */
 export declare class HelixAvatar extends HelixHeadlessAvatar {

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

@@ -1,217 +1,22 @@
 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(--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(--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"]: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:
 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:
+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),
-scale var(--helix-duration-fast) var(--helix-easing-accelerate);
-}
-
-:host([tone="primary"]) {
---_badge-fill: var(--helix-color-primary-surface);
-}
-
-:host([tone="accent"]) {
---_badge-fill: var(--helix-color-accent-surface);
-}
-
-:host([tone="accent"]) {
---_badge-on: var(--helix-color-foreground-on-accent);
-}
-
-:host([tone="danger"]),
+scale var(--helix-duration-fast) var(--helix-easing-accelerate);}:host([tone="primary"]) {--_badge-fill: var(--helix-color-primary-surface);}:host([tone="accent"]) {--_badge-fill: var(--helix-color-accent-surface);}:host([tone="accent"]) {--_badge-on: var(--helix-color-foreground-on-accent);}:host([tone="danger"]),
 :host([tone="info"]),
 :host([tone="success"]),
-:host([tone="warning"]) {
---_badge-on: var(--helix-color-foreground-on-status);
-}
-
-:host([tone="info"]) {
---_badge-fill: var(--helix-color-info-surface);
-}
-
-:host([tone="success"]) {
---_badge-fill: var(--helix-color-success-surface);
-}
-
-:host([tone="warning"]) {
---_badge-fill: var(--helix-color-warning-surface);
-}
-
-:host([tone="danger"]) {
---_badge-fill: var(--helix-color-danger-surface);
-}
-
-:host([tone="neutral"]) {
---_badge-fill: var(--helix-color-surface-raised);
---_badge-on: var(--helix-color-foreground);
-}
-
-:host([placement="top-start"]) [part="indicator"],
-:host([placement="bottom-start"]) [part="indicator"] {
-inset-inline-end: auto;
-inset-inline-start: var(--badge-offset, calc(var(--_badge-size) / 4));
-}
-
-:host([placement="bottom-end"]) [part="indicator"],
-:host([placement="bottom-start"]) [part="indicator"] {
-inset-block-end: var(--badge-offset, calc(var(--_badge-size) / 4));
-inset-block-start: auto;
-}
-
-:host([placement="top-start"]) [part="indicator"] {
-translate: -50% -50%;
-}
-
-:host([placement="bottom-end"]) [part="indicator"] {
-translate: 50% 50%;
-}
-
-:host([placement="bottom-start"]) [part="indicator"] {
-translate: -50% 50%;
-}
-
-:host([placement="inline"]) {
-align-items: center;
-gap: var(--badge-gap, var(--helix-space-2xs));
-}
-
-:host([placement="inline"]) [part="indicator"] {
-box-shadow: none;
-position: static;
-translate: none;
-}
-
-:host([emphasis="outlined"]) [part="indicator"] {
-background-color: var(--badge-background-color, var(--helix-color-background));
-box-shadow:
+:host([tone="warning"]) {--_badge-on: var(--helix-color-foreground-on-status);}:host([tone="info"]) {--_badge-fill: var(--helix-color-info-surface);}:host([tone="success"]) {--_badge-fill: var(--helix-color-success-surface);}:host([tone="warning"]) {--_badge-fill: var(--helix-color-warning-surface);}:host([tone="danger"]) {--_badge-fill: var(--helix-color-danger-surface);}:host([tone="neutral"]) {--_badge-fill: var(--helix-color-surface-raised);--_badge-on: var(--helix-color-foreground);}:host([placement="top-start"]) [part="indicator"],
+:host([placement="bottom-start"]) [part="indicator"] {inset-inline-end: auto;inset-inline-start: var(--badge-offset, calc(var(--_badge-size) / 4));}:host([placement="bottom-end"]) [part="indicator"],
+:host([placement="bottom-start"]) [part="indicator"] {inset-block-end: var(--badge-offset, calc(var(--_badge-size) / 4));inset-block-start: auto;}:host([placement="top-start"]) [part="indicator"] {translate: -50% -50%;}:host([placement="bottom-end"]) [part="indicator"] {translate: 50% 50%;}:host([placement="bottom-start"]) [part="indicator"] {translate: -50% 50%;}:host([placement="inline"]) {align-items: center;gap: var(--badge-gap, var(--helix-space-2xs));}:host([placement="inline"]) [part="indicator"] {box-shadow: none;position: static;translate: none;}:host([emphasis="outlined"]) [part="indicator"] {background-color: var(--badge-background-color, var(--helix-color-background));box-shadow:
 inset 0 0 0 var(--helix-border-thick) var(--_badge-fill),
-0 0 0 var(--helix-border-thick) var(--badge-ring-color, var(--helix-color-background));
-color: var(--badge-color, var(--helix-color-foreground));
-}
-
-:host([emphasis="subtle"]) [part="indicator"] {
-background-color: var(
+0 0 0 var(--helix-border-thick) var(--badge-ring-color, var(--helix-color-background));color: var(--badge-color, var(--helix-color-foreground));}:host([emphasis="subtle"]) [part="indicator"] {background-color: var(
 --badge-background-color,
 color-mix(in oklab, var(--_badge-fill) 22%, var(--helix-color-background))
-);
-color: var(--badge-color, var(--helix-color-foreground));
-}
-
-:host([emphasis="outlined"][placement="inline"]) [part="indicator"] {
-box-shadow: inset 0 0 0 var(--helix-border-thick) var(--_badge-fill);
-}
-
-:host([attention="pulse"]) [part="indicator"]:not([data-blank]) {
-animation: badge-pulse var(--badge-attention-duration, 1.5s) var(--helix-easing-standard) infinite;
-}
-
-:host([attention="bounce"]) [part="indicator"]:not([data-blank]) {
-animation: badge-bounce var(--badge-attention-duration, 1s) var(--helix-easing-standard) infinite;
-}
-
-@keyframes badge-pulse {
-0%,
-100% {
-transform: scale(1);
-}
-
-50% {
-transform: scale(1.18);
-}
-}
-
-@keyframes badge-bounce {
-0%,
+);color: var(--badge-color, var(--helix-color-foreground));}:host([emphasis="outlined"][placement="inline"]) [part="indicator"] {box-shadow: inset 0 0 0 var(--helix-border-thick) var(--_badge-fill);}:host([attention="pulse"]) [part="indicator"]:not([data-blank]) {animation: badge-pulse var(--badge-attention-duration, 1.5s) var(--helix-easing-standard) infinite;}:host([attention="bounce"]) [part="indicator"]:not([data-blank]) {animation: badge-bounce var(--badge-attention-duration, 1s) var(--helix-easing-standard) infinite;}@keyframes badge-pulse {0%,
+100% {transform: scale(1);}50% {transform: scale(1.18);}}@keyframes badge-bounce {0%,
 20%,
 53%,
-100% {
-transform: translateY(0);
-}
-
-40%,
-43% {
-transform: translateY(-30%);
-}
-
-70% {
-transform: translateY(-15%);
-}
-
-90% {
-transform: translateY(-4%);
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-:host([attention="pulse"]) [part="indicator"]:not([data-blank]),
-:host([attention="bounce"]) [part="indicator"]:not([data-blank]) {
-animation: none;
-}
-}
-
-@media print {
-:host {
-box-shadow: none;
-}
-}`);
+100% {transform: translateY(0);}40%,
+43% {transform: translateY(-30%);}70% {transform: translateY(-15%);}90% {transform: translateY(-4%);}}@media (prefers-reduced-motion: reduce) {:host([attention="pulse"]) [part="indicator"]:not([data-blank]),
+:host([attention="bounce"]) [part="indicator"]:not([data-blank]) {animation: none;}}@media print {:host {box-shadow: none;}}`);

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

@@ -23,8 +23,10 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --badge-attention-duration - How long one beat of `attention` takes.
  * @cssproperty --badge-background-color - The fill of the indicator.
  * @cssproperty --badge-color - The color of the count, to pair with a fill set through `--badge-background-color`.
+ * @cssproperty --badge-font-weight - The weight of the count.
  * @cssproperty --badge-gap - The space between the content and the count under `placement="inline"`.
  * @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.
  */
 export declare class HelixBadge extends HelixHeadlessBadge {

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

@@ -1,302 +1,18 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: grid;
-position: relative;
-gap: var(--bar-chart-gap, var(--helix-space-2xs));
-}
-
-[part="plot"] {
-position: relative;
-
-block-size: var(--bar-chart-block-size, 12em);
-}
-
-[part="plot"] svg {
-block-size: 100%;
-inline-size: 100%;
-
-overflow: visible;
-}
-
-[part="baseline"] {
-stroke: var(--helix-color-border);
-stroke-width: var(--helix-border-thin);
-vector-effect: non-scaling-stroke;
-}
-
-[part="bar"] {
---_bar-chart-corners: var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0 0;
---_bar-chart-base: 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2) 0;
-clip-path: inset(var(--_bar-chart-foot, 0) round var(--_bar-chart-corners));
-fill: var(--_bar-chart-series);
-}
-
-:host([orientation="horizontal"]) [part="bar"] {
---_bar-chart-corners: 0 var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0;
---_bar-chart-base: 0 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2);
-}
-
-[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;
-}
-
-:host([orientation="horizontal"]) {
-grid-template-columns: auto 1fr;
-}
-
-:host([orientation="horizontal"]) [part="labels"] {
-grid-column: 1;
-grid-row: 1;
-}
-
-:host([orientation="horizontal"]) [part="plot"] {
-grid-column: 2;
-grid-row: 1;
-}
-
-:host([orientation="horizontal"]) [part="labels"] {
-grid-auto-columns: auto;
-grid-auto-flow: row;
-grid-auto-rows: 1fr;
-}
-
-:host([orientation="horizontal"]) [part="label"] {
-align-self: center;
-text-align: end;
-}
-
-[part="bar"],
-[part="line"] {
---_bar-chart-series: var(--chart-series);
-}
-
-[part="plot"]:has([data-active]) [part~="group"]:not([data-active]) {
-opacity: 0.45;
-}
-
-[part~="group"] {
-transition: opacity var(--helix-duration-fast) var(--helix-easing-decelerate);
-}
-
-[part="bar"] {
-transition:
+export const styles = createSheet(`:host {display: grid;position: relative;gap: var(--bar-chart-gap, var(--helix-space-2xs));}[part="plot"] {position: relative;block-size: var(--bar-chart-block-size, 12em);}[part="plot"] svg {block-size: 100%;inline-size: 100%;overflow: visible;}[part="baseline"] {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part="bar"] {--_bar-chart-corners: var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0 0;--_bar-chart-base: 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2) 0;clip-path: inset(var(--_bar-chart-foot, 0) round var(--_bar-chart-corners));fill: var(--_bar-chart-series);}:host([orientation="horizontal"]) [part="bar"] {--_bar-chart-corners: 0 var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0;--_bar-chart-base: 0 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2);}[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;}:host([orientation="horizontal"]) {grid-template-columns: auto 1fr;}:host([orientation="horizontal"]) [part="labels"] {grid-column: 1;grid-row: 1;}:host([orientation="horizontal"]) [part="plot"] {grid-column: 2;grid-row: 1;}:host([orientation="horizontal"]) [part="labels"] {grid-auto-columns: auto;grid-auto-flow: row;grid-auto-rows: 1fr;}:host([orientation="horizontal"]) [part="label"] {align-self: center;text-align: end;}[part="bar"],
+[part="line"] {--_bar-chart-series: var(--chart-series);}[part="plot"]:has([data-active]) [part~="group"]:not([data-active]) {opacity: 0.45;}[part~="group"] {transition: opacity var(--helix-duration-fast) var(--helix-easing-decelerate);}[part="bar"] {transition:
 height var(--helix-duration-normal) var(--helix-easing-decelerate),
 width var(--helix-duration-normal) var(--helix-easing-decelerate),
 x var(--helix-duration-normal) var(--helix-easing-decelerate),
-y var(--helix-duration-normal) var(--helix-easing-decelerate);
-}
-
-@starting-style {
-:host(:not([orientation="horizontal"])) [part="bar"] {
-height: 0;
-y: 100;
-}
-
-:host([orientation="horizontal"]) [part="bar"] {
-width: 0;
-}
-}
-
-[part="plot"] {
-cursor: crosshair;
-}
-
-[part="gridline"] {
-stroke: var(--bar-chart-gridline-color, var(--helix-color-border));
-stroke-width: var(--helix-border-thin);
-vector-effect: non-scaling-stroke;
-}
-
-[part="band"] {
-fill: var(--bar-chart-band-color, var(--helix-color-surface-sunken));
-}
-
-[part="line"] {
-fill: none;
-stroke: var(--bar-chart-line-color, var(--_bar-chart-series, var(--helix-color-series-1)));
-stroke-linecap: round;
-stroke-linejoin: round;
-
-stroke-width: var(--bar-chart-line-width, var(--_chart-stroke));
-vector-effect: non-scaling-stroke;
-}
-
-:host([secondary]) {
-grid-template-columns: auto 1fr auto;
-}
-
-:host([secondary]) [part="axis"][data-axis="primary"] {
-grid-column: 1;
-grid-row: 1;
-}
-
-:host([secondary]) [part="plot"] {
-grid-column: 2;
-grid-row: 1;
-}
-
-[part="axis"][data-axis="secondary"] {
---_bar-chart-axis-ink: color-mix(
+y var(--helix-duration-normal) var(--helix-easing-decelerate);}@starting-style {:host(:not([orientation="horizontal"])) [part="bar"] {height: 0;y: 100;}:host([orientation="horizontal"]) [part="bar"] {width: 0;}}[part="plot"] {cursor: crosshair;}[part="gridline"] {stroke: var(--bar-chart-gridline-color, var(--helix-color-border));stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part="band"] {fill: var(--bar-chart-band-color, var(--helix-color-surface-sunken));}[part="line"] {fill: none;stroke: var(--bar-chart-line-color, var(--_bar-chart-series, var(--helix-color-series-1)));stroke-linecap: round;stroke-linejoin: round;stroke-width: var(--bar-chart-line-width, var(--_chart-stroke));vector-effect: non-scaling-stroke;}:host([secondary]) {grid-template-columns: auto 1fr auto;}:host([secondary]) [part="axis"][data-axis="primary"] {grid-column: 1;grid-row: 1;}:host([secondary]) [part="plot"] {grid-column: 2;grid-row: 1;}[part="axis"][data-axis="secondary"] {--_bar-chart-axis-ink: color-mix(
 in oklab,
 var(--bar-chart-secondary) 45%,
 var(--helix-color-foreground)
-);
-
-color: var(--_bar-chart-axis-ink, var(--helix-color-foreground-subtle));
-}
-
-:host([secondary]) [part="axis"][data-axis="secondary"] {
-grid-column: 3;
-grid-row: 1;
-}
-
-:host([secondary]) [part="labels"] {
-grid-column: 2;
-grid-row: 2;
-}
-
-:host([orientation="horizontal"][secondary]) {
-grid-template-columns: auto 1fr;
-grid-template-rows: auto 1fr auto;
-}
-
-:host([orientation="horizontal"][secondary]) [part="axis"][data-axis="secondary"] {
-grid-column: 2;
-grid-row: 1;
-}
-
-:host([orientation="horizontal"][secondary]) [part="labels"] {
-grid-column: 1;
-grid-row: 2;
-}
-
-:host([orientation="horizontal"][secondary]) [part="plot"] {
-grid-column: 2;
-grid-row: 2;
-}
-
-:host([orientation="horizontal"][secondary]) [part="axis"][data-axis="primary"] {
-grid-column: 2;
-grid-row: 3;
-}
-
-[part="axis"] {
-color: var(--helix-color-foreground-subtle);
-font-size: var(--helix-text-xs);
-font-variant-numeric: tabular-nums;
-pointer-events: none;
-position: relative;
-}
-
-:host(:not([orientation="horizontal"])) [part="axis"] {
-inline-size: var(--bar-chart-axis, 3ch);
-}
-
-:host([orientation="horizontal"]) [part="axis"] {
-block-size: 1lh;
-}
-
-[part="tick"] {
-position: absolute;
-}
-
-:host(:not([orientation="horizontal"])) [part="tick"] {
-inset-inline-end: 0;
-translate: 0 -50%;
-}
-
-:host([orientation="horizontal"]) [part="tick"] {
-translate: -50% 0;
-}
-
-:host([orientation="horizontal"]:dir(rtl)) [part="tick"] {
-translate: 50% 0;
-}
-
-:host(:not([orientation="horizontal"])) [part="axis"][data-axis="secondary"] [part="tick"] {
-inset-inline-end: auto;
-inset-inline-start: 0;
-}
-
-[part="bar"] {
-fill-opacity: calc(var(--_bar-chart-area, 1) * var(--_bar-chart-through, 1));
-stroke-opacity: var(--_bar-chart-through, 1);
-}
-
-[part="bar"][data-emphasis="outlined"],
-:host([emphasis="outlined"]) [part="bar"]:not([data-emphasis]) {
-
---_bar-chart-foot: var(--_bar-chart-base);
-fill: var(--_bar-chart-shade);
-stroke: var(--_bar-chart-series);
-stroke-width: var(--bar-chart-bar-stroke, var(--helix-border-thick));
-vector-effect: non-scaling-stroke;
-}
-
-[part="bar"][data-emphasis="subtle"],
-:host([emphasis="subtle"]) [part="bar"]:not([data-emphasis]) {
---_bar-chart-area: 0.2;
-
---_bar-chart-foot: var(--_bar-chart-base);
-stroke: var(--_bar-chart-series);
-stroke-width: var(--bar-chart-bar-stroke, var(--helix-border-thick));
-vector-effect: non-scaling-stroke;
-}
-
-[part="bar"] {
---_bar-chart-shade: color-mix(
+);color: var(--_bar-chart-axis-ink, var(--helix-color-foreground-subtle));}:host([secondary]) [part="axis"][data-axis="secondary"] {grid-column: 3;grid-row: 1;}:host([secondary]) [part="labels"] {grid-column: 2;grid-row: 2;}:host([orientation="horizontal"][secondary]) {grid-template-columns: auto 1fr;grid-template-rows: auto 1fr auto;}:host([orientation="horizontal"][secondary]) [part="axis"][data-axis="secondary"] {grid-column: 2;grid-row: 1;}:host([orientation="horizontal"][secondary]) [part="labels"] {grid-column: 1;grid-row: 2;}:host([orientation="horizontal"][secondary]) [part="plot"] {grid-column: 2;grid-row: 2;}:host([orientation="horizontal"][secondary]) [part="axis"][data-axis="primary"] {grid-column: 2;grid-row: 3;}[part="axis"] {color: var(--helix-color-foreground-subtle);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;pointer-events: none;position: relative;}:host(:not([orientation="horizontal"])) [part="axis"] {inline-size: var(--bar-chart-axis, 3ch);}:host([orientation="horizontal"]) [part="axis"] {block-size: 1lh;}[part="tick"] {position: absolute;}:host(:not([orientation="horizontal"])) [part="tick"] {inset-inline-end: 0;translate: 0 -50%;}:host([orientation="horizontal"]) [part="tick"] {translate: -50% 0;}:host([orientation="horizontal"]:dir(rtl)) [part="tick"] {translate: 50% 0;}:host(:not([orientation="horizontal"])) [part="axis"][data-axis="secondary"] [part="tick"] {inset-inline-end: auto;inset-inline-start: 0;}[part="bar"] {fill-opacity: calc(var(--_bar-chart-area, 1) * var(--_bar-chart-through, 1));stroke-opacity: var(--_bar-chart-through, 1);}[part="bar"][data-emphasis="outlined"],
+:host([emphasis="outlined"]) [part="bar"]:not([data-emphasis]) {--_bar-chart-foot: var(--_bar-chart-base);fill: var(--_bar-chart-shade);stroke: var(--_bar-chart-series);stroke-width: var(--bar-chart-bar-stroke, var(--helix-border-thick));vector-effect: non-scaling-stroke;}[part="bar"][data-emphasis="subtle"],
+:host([emphasis="subtle"]) [part="bar"]:not([data-emphasis]) {--_bar-chart-area: 0.2;--_bar-chart-foot: var(--_bar-chart-base);stroke: var(--_bar-chart-series);stroke-width: var(--bar-chart-bar-stroke, var(--helix-border-thick));vector-effect: non-scaling-stroke;}[part="bar"] {--_bar-chart-shade: color-mix(
 in oklab,
 var(--_bar-chart-series) 60%,
 var(--helix-color-background)
-);
-}
-
-[part="bar"][data-material="glass"],
-:host([material="glass"]) [part="bar"]:not([data-material]) {
---_bar-chart-through: calc(0.62 * var(--helix-material-opacity));
-}
-
-:host([material="frosted"]) [part="bar"]:not([data-material]) {
---_bar-chart-through: calc(0.88 * var(--helix-material-opacity));
-}
-
-:host([wash="gradient"]) [part="bar"] {
-fill: var(--chart-bar-wash);
-}
-
-[part="bar-wash-start"] {
-stop-color: var(--chart-series);
-stop-opacity: calc(1 * var(--helix-material-opacity));
-}
-
-[part="bar-wash-end"] {
-stop-color: var(--chart-series);
-stop-opacity: calc(0.35 * var(--helix-material-opacity));
-}
-
-@media print {
-:host {
-print-color-adjust: exact;
-}
-}
-
-[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="bar"][data-material="glass"],
+:host([material="glass"]) [part="bar"]:not([data-material]) {--_bar-chart-through: calc(0.62 * var(--helix-material-opacity));}:host([material="frosted"]) [part="bar"]:not([data-material]) {--_bar-chart-through: calc(0.88 * var(--helix-material-opacity));}:host([wash="gradient"]) [part="bar"] {fill: var(--chart-bar-wash);}[part="bar-wash-start"] {stop-color: var(--chart-series);stop-opacity: calc(1 * var(--helix-material-opacity));}[part="bar-wash-end"] {stop-color: var(--chart-series);stop-opacity: calc(0.35 * var(--helix-material-opacity));}@media print {:host {print-color-adjust: exact;}}[part="summary"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap;}`);