@fusion.dev/helix 0.145.0 → 0.147.0

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

@@ -1,230 +1,16 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: contents;
-}
-
-[part="dialog"] {
-background-color: var(--helix-color-surface-overlay);
-border: var(--dialog-border-width, var(--helix-border-floating)) solid
-var(--dialog-border-color, var(--helix-color-border));
-
-border-radius: var(--helix-radii-sm);
-box-shadow: var(--dialog-shadow, var(--helix-shadow-floating));
-box-sizing: border-box;
-color: var(--helix-color-foreground);
-display: flex;
-flex-direction: column;
-gap: var(--helix-space-md);
-
-inline-size: min(var(--dialog-inline-size, 28rem), calc(100vw - var(--helix-space-xl)));
-
-max-block-size: calc(100dvh - var(--helix-space-xl));
-overflow-y: auto;
-padding: var(--dialog-padding, var(--helix-space-lg));
-}
-
-[part="dialog"]:not([open]) {
-display: none;
-}
-
-:host([size="sm"]) [part="dialog"] {
---dialog-inline-size: 22rem;
-}
-
-:host([size="md"]) [part="dialog"] {
---dialog-inline-size: 28rem;
-}
-
-:host([size="lg"]) [part="dialog"] {
---dialog-inline-size: 44rem;
-}
-
-:host([size="full"]) [part="dialog"] {
---dialog-inline-size: 100vw;
-}
-
-[part="dialog"]:focus,
-[part="dialog"]:focus-visible {
-outline: none;
-}
-
-:host {
---_dialog-scrim: var(--helix-color-overlay);
-}
-
-[part="dialog"]::backdrop {
-background-color: var(--dialog-scrim, var(--_dialog-scrim));
-}
-
-::slotted([slot="header"]) {
-color: var(--helix-color-foreground);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xl);
-font-weight: var(--helix-weight-semibold);
-letter-spacing: var(--helix-tracking-tight);
-line-height: var(--helix-leading-tight);
-margin: var(--helix-space-none);
-}
-
-::slotted([slot="footer"]) {
-display: flex;
-gap: var(--helix-space-xs);
-justify-content: flex-start;
-}
-
-[part="dialog"] {
-opacity: 0;
-transition:
+export const styles = createSheet(`:host {display: contents;}[part="dialog"] {background-color: var(--dialog-background-color, var(--helix-color-surface-overlay));border: var(--dialog-border-width, var(--helix-border-floating)) solid
+var(--dialog-border-color, var(--helix-color-border));border-radius: var(--dialog-radius, var(--helix-radii-sm));box-shadow: var(--dialog-shadow, var(--helix-shadow-floating));box-sizing: border-box;color: var(--dialog-color, var(--helix-color-foreground));display: flex;flex-direction: column;gap: var(--helix-space-md);inline-size: min(var(--dialog-inline-size, 28rem), calc(100vw - var(--helix-space-xl)));max-block-size: calc(100dvh - var(--helix-space-xl));overflow-y: auto;padding: var(--dialog-padding, var(--helix-space-lg));}[part="dialog"]:not([open]) {display: none;}:host([size="sm"]) [part="dialog"] {--dialog-inline-size: 22rem;}:host([size="md"]) [part="dialog"] {--dialog-inline-size: 28rem;}:host([size="lg"]) [part="dialog"] {--dialog-inline-size: 44rem;}:host([size="full"]) [part="dialog"] {--dialog-inline-size: 100vw;}[part="dialog"]:focus,
+[part="dialog"]:focus-visible {outline: none;}:host {--_dialog-scrim: var(--helix-color-overlay);}[part="dialog"]::backdrop {background-color: var(--dialog-scrim, var(--_dialog-scrim));}::slotted([slot="header"]) {color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-xl);font-weight: var(--helix-weight-semibold);letter-spacing: var(--helix-tracking-tight);line-height: var(--helix-leading-tight);margin: var(--helix-space-none);}::slotted([slot="footer"]) {display: flex;gap: var(--helix-space-xs);justify-content: flex-start;}[part="dialog"] {opacity: 0;transition:
 opacity var(--helix-duration-normal) var(--helix-easing-standard),
 translate var(--helix-duration-normal) var(--helix-easing-decelerate),
 display var(--helix-duration-normal) allow-discrete,
-overlay var(--helix-duration-normal) allow-discrete;
-translate: 0 var(--dialog-rise, var(--helix-space-lg));
-}
-
-[part="dialog"][open] {
-opacity: 1;
-translate: 0 0;
-}
-
-@starting-style {
-[part="dialog"][open] {
-opacity: 0;
-translate: 0 var(--dialog-rise, var(--helix-space-lg));
-}
-}
-
-[part="dialog"]::backdrop {
-opacity: 0;
-transition:
+overlay var(--helix-duration-normal) allow-discrete;translate: 0 var(--dialog-rise, var(--helix-space-lg));}[part="dialog"][open] {opacity: 1;translate: 0 0;}@starting-style {[part="dialog"][open] {opacity: 0;translate: 0 var(--dialog-rise, var(--helix-space-lg));}}[part="dialog"]::backdrop {opacity: 0;transition:
 opacity var(--helix-duration-normal) var(--helix-easing-standard),
 display var(--helix-duration-normal) allow-discrete,
-overlay var(--helix-duration-normal) allow-discrete;
-}
-
-[part="dialog"][open]::backdrop {
-opacity: 1;
-}
-
-@starting-style {
-[part="dialog"][open]::backdrop {
-opacity: 0;
-}
-}
-
-@media (width < 30rem) {
-[part="dialog"] {
-
-margin-block-end: var(--helix-space-none);
-margin-block-start: auto;
-inline-size: 100vw;
-max-inline-size: 100vw;
-
-max-block-size: calc(100dvh - var(--helix-space-3xl));
-
-border-start-start-radius: var(--helix-radii-sm);
-border-start-end-radius: var(--helix-radii-sm);
-border-end-start-radius: var(--helix-radii-none);
-border-end-end-radius: var(--helix-radii-none);
-
-translate: 0 100%;
-}
-
-@starting-style {
-[part="dialog"][open] {
-translate: 0 100%;
-}
-}
-}
-
-[part="dialog"][data-refused] {
-animation: helix-dialog-refuse var(--helix-duration-normal) var(--helix-easing-emphasized);
-}
-
-@keyframes helix-dialog-refuse {
-50% {
-scale: 1.02;
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="dialog"],
-[part="dialog"]::backdrop {
-transition: none;
-}
-
-[part="dialog"][data-refused] {
-animation: none;
-}
-}
-
-::slotted([slot="icon"]) {
-block-size: var(--dialog-icon-size, calc(var(--helix-size-icon-lg) * 2));
-display: block;
-inline-size: var(--dialog-icon-size, calc(var(--helix-size-icon-lg) * 2));
-}
-
-:host([text-align="center"]) [part="dialog"] {
-text-align: center;
-}
-
-:host([text-align="center"]) ::slotted([slot="footer"]) {
-justify-content: center;
-}
-
-:host([text-align="center"]) ::slotted([slot="icon"]) {
-margin-inline: auto;
-}
-
-[part="dismiss"] {
-all: unset;
-
-box-sizing: border-box;
-position: absolute;
-inset-block-start: calc(
+overlay var(--helix-duration-normal) allow-discrete;}[part="dialog"][open]::backdrop {opacity: 1;}@starting-style {[part="dialog"][open]::backdrop {opacity: 0;}}@media (width < 30rem) {[part="dialog"] {margin-block-end: var(--helix-space-none);margin-block-start: auto;inline-size: 100vw;max-inline-size: 100vw;max-block-size: calc(100dvh - var(--helix-space-3xl));border-start-start-radius: var(--helix-radii-sm);border-start-end-radius: var(--helix-radii-sm);border-end-start-radius: var(--helix-radii-none);border-end-end-radius: var(--helix-radii-none);translate: 0 100%;}@starting-style {[part="dialog"][open] {translate: 0 100%;}}}[part="dialog"][data-refused] {animation: helix-dialog-refuse var(--helix-duration-normal) var(--helix-easing-emphasized);}@keyframes helix-dialog-refuse {50% {scale: 1.02;}}@media (prefers-reduced-motion: reduce) {[part="dialog"],
+[part="dialog"]::backdrop {transition: none;}[part="dialog"][data-refused] {animation: none;}}::slotted([slot="icon"]) {block-size: var(--dialog-icon-size, calc(var(--helix-size-icon-lg) * 2));display: block;inline-size: var(--dialog-icon-size, calc(var(--helix-size-icon-lg) * 2));}:host([text-align="center"]) [part="dialog"] {text-align: center;}:host([text-align="center"]) ::slotted([slot="footer"]) {justify-content: center;}:host([text-align="center"]) ::slotted([slot="icon"]) {margin-inline: auto;}[part="dismiss"] {all: unset;box-sizing: border-box;position: absolute;inset-block-start: calc(
 var(--dialog-padding, var(--helix-space-lg)) +
 (var(--helix-text-xl) * var(--helix-leading-tight) - var(--helix-size-control-sm)) /
 2
-);
-inset-inline-end: var(--helix-space-md);
-block-size: var(--helix-size-control-sm);
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-muted);
-cursor: pointer;
-display: inline-flex;
-inline-size: var(--helix-size-control-sm);
-place-content: center;
-place-items: center;
-transition: color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="dismiss"] svg {
-block-size: var(--helix-size-icon-sm);
-inline-size: var(--helix-size-icon-sm);
-}
-
-[part="dismiss"]:hover {
-background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
-color: var(--helix-color-foreground);
-}
-
-[part="dismiss"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host([dismissible]) ::slotted([slot="header"]) {
-padding-inline-end: calc(var(--helix-size-control-sm) + var(--helix-space-xs));
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="dismiss"] {
-transition: none;
-}
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+);inset-inline-end: var(--helix-space-md);block-size: var(--helix-size-control-sm);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;inline-size: var(--helix-size-control-sm);place-content: center;place-items: center;transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="dismiss"] svg {block-size: var(--helix-size-icon-sm);inline-size: var(--helix-size-icon-sm);}[part="dismiss"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground);}[part="dismiss"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([dismissible]) ::slotted([slot="header"]) {padding-inline-end: calc(var(--helix-size-control-sm) + var(--helix-space-xs));}@media (prefers-reduced-motion: reduce) {[part="dismiss"] {transition: none;}}@media print {:host {display: none;}}`);

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

@@ -14,13 +14,16 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Modal, Sheet
  * @documentation https://fusion.dev/helix/components/dialog
  *
+ * @cssproperty --dialog-background-color - The panel's fill. Follows `--helix-color-surface-overlay`.
  * @cssproperty --dialog-border-color - Color of the panel's edge.
  * @cssproperty --dialog-border-width - Width of the panel's edge. Follows
  *   `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless your
  *   theme sets a border.
+ * @cssproperty --dialog-color - Color of the words in the panel. Follows `--helix-color-foreground`.
  * @cssproperty --dialog-icon-size - How big the mark above the title is.
  * @cssproperty --dialog-inline-size - Width of the panel.
  * @cssproperty --dialog-padding - Padding inside the panel.
+ * @cssproperty --dialog-radius - The panel's corner radius. Follows `--helix-radii-sm`.
  * @cssproperty --dialog-rise - How far the panel rises as it opens. Follows
  *   `--helix-space-lg`.
  * @cssproperty --dialog-scrim - The tint over the page behind the dialog. Set it on the host, because a `var()` written inside `::backdrop` cannot read a token.

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

@@ -1,86 +1,11 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---_divider-thickness: var(--divider-thickness, var(--helix-border-thin));
-align-items: center;
-display: flex;
-}
-
-[part="content"] {
-color: var(--divider-content-color, var(--helix-color-foreground-muted));
-margin-inline: var(--divider-content-gap, var(--helix-space-sm));
-display: inline-flex;
-flex: 0 0 auto;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-line-height: var(--helix-leading-tight);
-}
-
-[part="content"] slot::slotted(*),
-[part="content"] {
-white-space: nowrap;
-}
-
-[part="content"][data-empty] {
-display: none;
-}
-
-:host {
-padding-inline-end: var(--divider-padding-end, var(--divider-padding, var(--helix-space-none)));
-padding-inline-start: var(
+export const styles = createSheet(`:host {--_divider-thickness: var(--divider-thickness, var(--helix-border-thin));align-items: center;display: flex;}[part="content"] {color: var(--divider-content-color, var(--helix-color-foreground-muted));margin-inline: var(--divider-content-gap, var(--helix-space-sm));display: inline-flex;flex: 0 0 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);line-height: var(--helix-leading-tight);}[part="content"] slot::slotted(*),
+[part="content"] {white-space: nowrap;}[part="content"][data-empty] {display: none;}:host {padding-inline-end: var(--divider-padding-end, var(--divider-padding, var(--helix-space-none)));padding-inline-start: var(
 --divider-padding-start,
 var(--divider-padding, var(--helix-space-none))
-);
-}
-
-:host([orientation="vertical"]) {
-padding-block-end: var(--divider-padding-end, var(--divider-padding, var(--helix-space-none)));
-padding-block-start: var(
+);}:host([orientation="vertical"]) {padding-block-end: var(--divider-padding-end, var(--divider-padding, var(--helix-space-none)));padding-block-start: var(
 --divider-padding-start,
 var(--divider-padding, var(--helix-space-none))
-);
-padding-inline: var(--helix-space-none);
-}
-
-:host([orientation="vertical"]) {
-align-self: stretch;
-display: inline-flex;
-flex-direction: column;
-}
-
-:host([orientation="vertical"]) [part="content"] {
-margin-block: var(--divider-content-gap, var(--helix-space-sm));
-margin-inline: var(--helix-space-none);
-}
-
-[part="line"] {
-background-color: var(--divider-color, var(--helix-color-border));
-}
-
-:host(:not([orientation])) [part="line"],
-:host([orientation="horizontal"]) [part="line"] {
-block-size: var(--_divider-thickness);
-flex: 1 1 0;
-}
-
-:host([orientation="vertical"]) {
-block-size: var(--divider-length, auto);
-}
-
-:host([orientation="vertical"]) [part="line"] {
-flex: 1 1 0;
-inline-size: var(--_divider-thickness);
-
-min-block-size: 1em;
-}
-
-:host([content-placement="start"]) [part="line"]:has(+ [part="content"]:not([data-empty])),
-:host([content-placement="end"]) [part="content"]:not([data-empty]) + [part="line"] {
-flex: 0 0 var(--divider-content-offset, var(--helix-space-lg));
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+);padding-inline: var(--helix-space-none);}:host([orientation="vertical"]) {align-self: stretch;display: inline-flex;flex-direction: column;}:host([orientation="vertical"]) [part="content"] {margin-block: var(--divider-content-gap, var(--helix-space-sm));margin-inline: var(--helix-space-none);}[part="line"] {background-color: var(--divider-color, var(--helix-color-border));}:host(:not([orientation])) [part="line"],
+:host([orientation="horizontal"]) [part="line"] {block-size: var(--_divider-thickness);flex: 1 1 0;}:host([orientation="vertical"]) {block-size: var(--divider-length, auto);}:host([orientation="vertical"]) [part="line"] {flex: 1 1 0;inline-size: var(--_divider-thickness);min-block-size: 1em;}:host([content-placement="start"]) [part="line"]:has(+ [part="content"]:not([data-empty])),
+:host([content-placement="end"]) [part="content"]:not([data-empty]) + [part="line"] {flex: 0 0 var(--divider-content-offset, var(--helix-space-lg));}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -1,188 +1,21 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: grid;
-position: relative;
-
-inline-size: var(--donut-chart-size, 16em);
-place-items: center;
-}
-
-[part="plot"] {
-grid-area: 1 / 1;
-}
-
-[part="plot"] {
-position: relative;
-
-inline-size: 100%;
-}
-
-[part="plot"] svg {
-aspect-ratio: 1;
-display: block;
-inline-size: 100%;
-}
-
-[part="track"],
-[part~="segment"] {
-transform: rotate(-90deg);
-transform-box: fill-box;
-transform-origin: center;
-}
-
-[part="track"] {
-stroke: var(--donut-chart-track-color, var(--helix-color-surface-sunken));
-}
-
-[part~="segment"] {
-stroke-linecap: butt;
-
-stroke-width: var(--donut-chart-stroke);
-}
-
-[part="center"] slot {
---stat-value-size: 24cqi;
-
-font-size: 13cqi;
-}
-
-[part="center"] {
-
-inset-block-start: 50%;
-inset-inline-start: 50%;
-pointer-events: none;
-position: absolute;
-translate: -50% -50%;
-
-box-sizing: border-box;
-
---_donut-chart-ring: 80;
-
-container-type: inline-size;
-display: grid;
-inline-size: calc(100% * (var(--_donut-chart-ring) - 2 * var(--donut-chart-stroke, 16)) / 100);
-place-items: center;
-text-align: center;
-}
-
-[part~="segment"] {
-stroke: var(--chart-series);
-}
-
-[part~="segment"][data-active] {
-stroke-width: calc(var(--donut-chart-stroke) * 1.18);
-}
-
-:host([emphasis="outlined"]) [part~="segment"][data-active] {
-stroke: var(--chart-series);
-stroke-width: var(--donut-chart-stroke);
-}
-
-[part~="segment"] {
-transition:
+export const styles = createSheet(`:host {display: grid;position: relative;inline-size: var(--donut-chart-size, 16em);place-items: center;}[part="plot"] {grid-area: 1 / 1;}[part="plot"] {position: relative;inline-size: 100%;}[part="plot"] svg {aspect-ratio: 1;display: block;inline-size: 100%;}[part="track"],
+[part~="segment"] {transform: rotate(-90deg);transform-box: fill-box;transform-origin: center;}[part="track"] {stroke: var(--donut-chart-track-color, var(--helix-color-surface-sunken));}[part~="segment"] {stroke-linecap: butt;stroke-width: var(--donut-chart-stroke);}[part="center"] slot {--stat-value-size: 24cqi;font-size: 13cqi;}[part="center"] {inset-block-start: 50%;inset-inline-start: 50%;pointer-events: none;position: absolute;translate: -50% -50%;box-sizing: border-box;--_donut-chart-ring: 80;container-type: inline-size;display: grid;inline-size: calc(100% * (var(--_donut-chart-ring) - 2 * var(--donut-chart-stroke, 16)) / 100);place-items: center;text-align: center;}[part~="segment"] {stroke: var(--chart-series);}[part~="segment"][data-active] {stroke-width: calc(var(--donut-chart-stroke) * 1.18);}:host([emphasis="outlined"]) [part~="segment"][data-active] {stroke: var(--chart-series);stroke-width: var(--donut-chart-stroke);}[part~="segment"] {transition:
 r var(--helix-duration-normal) var(--helix-easing-decelerate),
 stroke var(--helix-duration-fast) var(--helix-easing-decelerate),
 stroke-dasharray var(--helix-duration-normal) var(--helix-easing-decelerate),
 stroke-dashoffset var(--helix-duration-normal) var(--helix-easing-decelerate),
-stroke-width var(--helix-duration-fast) var(--helix-easing-decelerate);
-}
-
-@starting-style {
-[part~="segment"] {
-stroke-dasharray: 0 9999;
-}
-}
-
-[part="track"] {
-transition: r var(--helix-duration-normal) var(--helix-easing-decelerate);
-}
-
-[part~="segment"] {
-cursor: crosshair;
-}
-
-:host([sweep="half"]) [part="plot"] svg {
-aspect-ratio: 100 / calc(40 + var(--donut-chart-stroke, 16) / 2);
-}
-
-:host([sweep="half"]) [part="track"],
-:host([sweep="half"]) [part~="segment"] {
-transform: rotate(180deg);
-}
-
-:host([sweep="half"]) [part="center"] {
-inset-block-end: 0;
-inset-block-start: auto;
-translate: -50% 0;
-
-block-size: calc(
+stroke-width var(--helix-duration-fast) var(--helix-easing-decelerate);}@starting-style {[part~="segment"] {stroke-dasharray: 0 9999;}}[part="track"] {transition: r var(--helix-duration-normal) var(--helix-easing-decelerate);}[part~="segment"] {cursor: crosshair;}:host([sweep="half"]) [part="plot"] svg {aspect-ratio: 100 / calc(40 + var(--donut-chart-stroke, 16) / 2);}:host([sweep="half"]) [part="track"],
+:host([sweep="half"]) [part~="segment"] {transform: rotate(180deg);}:host([sweep="half"]) [part="center"] {inset-block-end: 0;inset-block-start: auto;translate: -50% 0;block-size: calc(
 100% *
 (40 - var(--donut-chart-stroke, 16)) /
 (40 + var(--donut-chart-stroke, 16) / 2)
-);
-}
-
-:host([sweep="half"]) [part="center"] slot {
---stat-value-size: 12cqi;
-
-font-size: 6.5cqi;
-}
-
-:host(:dir(rtl)) [part="center"] {
-translate: 50% -50%;
-}
-
-:host([sweep="half"]:dir(rtl)) [part="center"] {
-translate: 50% 0;
-}
-
-@media print {
-:host {
-print-color-adjust: exact;
-}
-}
-
-:host([emphasis="subtle"]) [part~="segment"] {
-stroke: color-mix(
+);}:host([sweep="half"]) [part="center"] slot {--stat-value-size: 12cqi;font-size: 6.5cqi;}:host(:dir(rtl)) [part="center"] {translate: 50% -50%;}:host([sweep="half"]:dir(rtl)) [part="center"] {translate: 50% 0;}@media print {:host {print-color-adjust: exact;}}:host([emphasis="subtle"]) [part~="segment"] {stroke: color-mix(
 in oklab,
 var(--chart-series) 30%,
 var(--donut-chart-track-color, var(--helix-color-surface-sunken))
-);
-}
-
-[part="segment-edge"] {
-fill: none;
-stroke: none;
-}
-
-:host([emphasis="outlined"]) [part~="segment"] {
-stroke: color-mix(
+);}[part="segment-edge"] {fill: none;stroke: none;}:host([emphasis="outlined"]) [part~="segment"] {stroke: color-mix(
 in oklab,
 var(--chart-series) 55%,
 var(--donut-chart-track-color, var(--helix-color-surface-sunken))
-);
-}
-
-:host([emphasis="outlined"]) [part="segment-edge"] {
-stroke: var(--chart-series);
-
-stroke-width: var(--donut-chart-edge-stroke, 3);
-}
-
-:host([material="glass"]) [part~="segment"] {
-stroke-opacity: calc(0.62 * var(--helix-material-opacity));
-}
-
-:host([material="frosted"]) [part~="segment"] {
-stroke-opacity: calc(0.88 * var(--helix-material-opacity));
-}
-
-[part="summary"] {
-block-size: 1px;
-clip-path: inset(50%);
-inline-size: 1px;
-margin: var(--helix-space-none);
-overflow: hidden;
-position: absolute;
-white-space: nowrap;
-}`);
+);}:host([emphasis="outlined"]) [part="segment-edge"] {stroke: var(--chart-series);stroke-width: var(--donut-chart-edge-stroke, 3);}:host([material="glass"]) [part~="segment"] {stroke-opacity: calc(0.62 * var(--helix-material-opacity));}:host([material="frosted"]) [part~="segment"] {stroke-opacity: calc(0.88 * var(--helix-material-opacity));}[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="slice-label"] {background-color: var(--donut-chart-slice-label-background-color, var(--helix-color-surface));border-radius: var(--helix-radii-sm);color: var(--donut-chart-slice-label-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--donut-chart-slice-label-font-size, var(--helix-text-xs));font-variant-numeric: tabular-nums;line-height: 1.4;padding: 0 var(--helix-space-2xs);pointer-events: none;position: absolute;translate: -50% -50%;white-space: nowrap;}:host([sweep="half"]:dir(rtl)) [part="slice-label"] {translate: 50% -50%;}`);

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

@@ -28,6 +28,9 @@ import '../../tooltip/index.js';
  *
  * @cssproperty --donut-chart-edge-stroke - Thickness of the slice boundary under `outlined`.
  * @cssproperty --donut-chart-size - Width and height of the ring.
+ * @cssproperty --donut-chart-slice-label-background-color - Plate behind a slice's share, under `slice-labels`.
+ * @cssproperty --donut-chart-slice-label-color - Color of a slice's share, under `slice-labels`.
+ * @cssproperty --donut-chart-slice-label-font-size - Size of a slice's share, under `slice-labels`.
  * @cssproperty --donut-chart-track-color - Color of the ring under the slices.
  */
 export declare class HelixDonutChart extends HelixHeadlessDonutChart {