@fusion.dev/helix 0.145.0 → 0.147.0

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

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(--helix-weight-medium);
-letter-spacing: var(--helix-tracking-tight);
-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);}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;}}`);

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

@@ -18,7 +18,9 @@ import type { CSSResultGroup } from 'lit';
  * @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-line-height - The line height of the quoted passage, the tight leading by default.
  * @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,22 +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);
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+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;}}`);

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

@@ -16,13 +16,31 @@ import '../breadcrumb/breadcrumb.js';
  *
  * @slot - The trail's items, in order from root to current page.
  *
+ * @csspart expand - The button in the folded crumb that shows the whole trail.
  * @csspart list - The ordered list.
  *
  * @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);