@fusion.dev/helix 0.145.0 → 0.147.0

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

@@ -1,136 +1,7 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---_card-inset: var(--card-padding, var(--helix-space-control));
-
---_card-media: var(--card-media-size, 12rem);
-
---_heading-ink: var(--helix-color-foreground);
-background-color: var(--card-background-color, var(--helix-color-surface));
-border: var(--card-border-width, var(--helix-border-surface)) solid
-var(--card-border-color, var(--helix-color-border));
-
-border-radius: var(--card-radius, var(--helix-radii-lg));
-
-box-shadow: var(--card-shadow, var(--helix-shadow-surface));
-color: var(--helix-color-foreground-muted);
-
-align-content: var(--card-align, start);
-display: grid;
-gap: var(--card-gap, var(--helix-space-sm));
-grid-template-columns: minmax(0, 1fr);
-line-height: var(--helix-leading-normal);
-
-overflow: hidden;
-padding: var(--_card-inset);
-transition:
+export const styles = createSheet(`:host {--_card-inset: var(--card-padding, var(--helix-space-control));--_card-media: var(--card-media-size, 12rem);--_heading-ink: var(--helix-color-foreground);background-color: var(--card-background-color, var(--helix-color-surface));border: var(--card-border-width, var(--helix-border-surface)) solid
+var(--card-border-color, var(--helix-color-border));border-radius: var(--card-radius, var(--helix-radii-lg));box-shadow: var(--card-shadow, var(--helix-shadow-surface));color: var(--helix-color-foreground-muted);align-content: var(--card-align, start);display: grid;gap: var(--card-gap, var(--helix-space-sm));grid-template-columns: minmax(0, 1fr);line-height: var(--helix-leading-normal);overflow: hidden;padding: var(--_card-inset);transition:
 border-color var(--helix-duration-fast) var(--helix-easing-standard),
-box-shadow var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host([separation="elevated"]) {
---card-shadow: var(--helix-shadow-md);
-border-color: light-dark(transparent, var(--helix-color-border));
-}
-
-:host([separation="filled"]) {
---card-shadow: none;
-border-color: transparent;
-}
-
-:host([separation="plain"]) {
---card-shadow: none;
-background-color: transparent;
-border-color: transparent;
-}
-
-slot[name="media"]::slotted(*) {
-
-block-size: var(--card-media-block-size, auto);
-display: block;
-inline-size: calc(100% + var(--_card-inset) * 2);
-margin: calc(var(--_card-inset) * -1);
-margin-block-end: 0;
-object-fit: cover;
-}
-
-:host([media-placement="end"]) slot[name="media"]::slotted(*) {
-margin-block-end: calc(var(--_card-inset) * -1);
-margin-block-start: 0;
-order: 1;
-}
-
-slot[name="header"]::slotted(*) {
-color: var(--helix-color-foreground);
-}
-
-slot[name="footer"]::slotted(*) {
-justify-self: end;
-}
-
-[part="header-row"],
-[part="footer-row"] {
-align-items: center;
-display: flex;
-
-flex-wrap: wrap;
-gap: var(--card-gap, var(--helix-space-sm));
-min-inline-size: 0;
-}
-
-[part="header-row"] slot[name="header"]::slotted(*) {
-flex: 1 1 auto;
-min-inline-size: 0;
-}
-
-slot[name="header-actions"]::slotted(*),
-slot[name="footer-actions"]::slotted(*) {
-flex: none;
-justify-self: end;
-}
-
-[part="footer-row"] slot[name="footer-actions"]::slotted(*) {
-margin-inline-start: auto;
-}
-
-:host([orientation="horizontal"]) {
-padding-inline-start: calc(var(--_card-media) + var(--_card-inset));
-position: relative;
-}
-
-:host([orientation="horizontal"]) slot[name="media"]::slotted(*) {
-block-size: 100%;
-inline-size: var(--_card-media);
-inset-block: 0;
-inset-inline-start: 0;
-margin: var(--helix-space-none);
-position: absolute;
-}
-
-@media (prefers-reduced-motion: reduce) {
-:host {
-transition: none;
-}
-}
-
-:host([material="glass"]) {
-backdrop-filter: var(--card-backdrop, var(--helix-material-backdrop));
-background-color: var(--card-background-color, var(--helix-material-translucent));
-}
-
-:host([material="frosted"]) {
-backdrop-filter: var(--card-backdrop, blur(var(--helix-material-blur-lg)));
-background-color: var(--card-background-color, var(--helix-material-translucent-strong));
-}
-
-:host([material="transparent"]) {
-backdrop-filter: none;
-background-color: transparent;
-}
-
-@media print {
-:host {
-background-color: transparent;
-box-shadow: none;
-}
-}`);
+box-shadow var(--helix-duration-fast) var(--helix-easing-standard);}:host([separation="elevated"]) {--card-shadow: var(--helix-shadow-md);border-color: light-dark(transparent, var(--helix-color-border));}:host([separation="filled"]) {--card-shadow: none;border-color: transparent;}:host([separation="plain"]) {--card-shadow: none;background-color: transparent;border-color: transparent;}slot[name="media"]::slotted(*) {block-size: var(--card-media-block-size, auto);display: block;inline-size: calc(100% + var(--_card-inset) * 2);margin: calc(var(--_card-inset) * -1);margin-block-end: 0;object-fit: cover;}:host([media-placement="end"]) slot[name="media"]::slotted(*) {margin-block-end: calc(var(--_card-inset) * -1);margin-block-start: 0;order: 1;}slot[name="header"]::slotted(*) {color: var(--helix-color-foreground);}slot[name="footer"]::slotted(*) {justify-self: end;}[part="header-row"],
+[part="footer-row"] {align-items: center;display: flex;flex-wrap: wrap;gap: var(--card-gap, var(--helix-space-sm));min-inline-size: 0;}[part="header-row"] slot[name="header"]::slotted(*) {flex: 1 1 auto;min-inline-size: 0;}slot[name="header-actions"]::slotted(*),
+slot[name="footer-actions"]::slotted(*) {flex: none;justify-self: end;}[part="footer-row"] slot[name="footer-actions"]::slotted(*) {margin-inline-start: auto;}:host([orientation="horizontal"]) {padding-inline-start: calc(var(--_card-media) + var(--_card-inset));position: relative;}:host([orientation="horizontal"]) slot[name="media"]::slotted(*) {block-size: 100%;inline-size: var(--_card-media);inset-block: 0;inset-inline-start: 0;margin: var(--helix-space-none);position: absolute;}@media (prefers-reduced-motion: reduce) {:host {transition: none;}}:host([material="glass"]) {backdrop-filter: var(--card-backdrop, var(--helix-material-backdrop));background-color: var(--card-background-color, var(--helix-material-translucent));}:host([material="frosted"]) {backdrop-filter: var(--card-backdrop, blur(var(--helix-material-blur-lg)));background-color: var(--card-background-color, var(--helix-material-translucent-strong));}:host([material="transparent"]) {backdrop-filter: none;background-color: transparent;}@media print {:host {background-color: transparent;box-shadow: none;}}`);

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

@@ -33,8 +33,14 @@ import type { CSSResultGroup } from 'lit';
  * @slot header-actions - Controls for the whole card at the end of the header's line, such as a menu.
  * @slot media - Image, video, or chart that runs edge to edge, outside the inset.
  *
+ * @csspart body - The slot the main content arrives through. A slot draws no box, so it passes inherited properties, such as color and font, to the content; `display: block` gives it one.
+ * @csspart footer - The slot the footer arrives through, drawing no box, as `body` does.
+ * @csspart footer-actions - The slot the footer's controls arrive through, drawing no box, as `body` does.
  * @csspart footer-row - The line holding `footer` and `footer-actions`, drawn only while `footer-actions` holds something.
+ * @csspart header - The slot the header arrives through, drawing no box, as `body` does.
+ * @csspart header-actions - The slot the header's controls arrive through, drawing no box, as `body` does.
  * @csspart header-row - The line holding `header` and `header-actions`, drawn only while `header-actions` holds something.
+ * @csspart media - The slot the media arrives through, drawing no box, as `body` does.
  *
  * @cssproperty --card-align - How the regions pack when the card is stretched
  *   taller than its content. `start` by default, so the slack is at the bottom;

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

@@ -1,221 +1,25 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_carousel-bleed: var(--carousel-bleed, var(--helix-space-md));
---_carousel-gap: var(--carousel-gap, var(--helix-space-md));
-}
-
-:host {
-display: grid;
-grid-template-columns: auto minmax(0, 1fr) auto;
-grid-template-rows: auto minmax(0, 1fr) auto;
-}
-
-[part="track"] {
-grid-area: 2 / 2;
-}
-
-[part="controls"],
-[part="indicators"] {
-align-items: center;
-display: flex;
-gap: var(--helix-space-2xs);
-}
-
-[part="indicators"] {
-grid-area: 3 / 2;
-justify-self: var(--_carousel-indicators-along);
-padding-block-start: var(--helix-space-sm);
-padding-inline: var(--_carousel-bleed);
-}
-
-[part="controls"] {
-grid-area: 3 / 2;
-justify-self: var(--_carousel-controls-along);
-padding-block-start: var(--helix-space-sm);
-padding-inline: var(--_carousel-bleed);
-}
-
-[part="indicators"] {
---_carousel-indicators-along: start;
-}
-
-[part="controls"] {
---_carousel-controls-along: end;
-}
-
-@media (hover: none) and (pointer: coarse) {
-
-:host(:not([controls="always"])) [part="indicators"] {
---_carousel-indicators-along: center;
-}
-}
-
-:host([indicator-placement="top"]) [part="indicators"] {
-grid-area: 1 / 2;
-padding-block: var(--helix-space-none) var(--helix-space-sm);
-}
-
-:host([controls-placement="top"]) [part="controls"] {
-grid-area: 1 / 2;
-padding-block: var(--helix-space-none) var(--helix-space-sm);
-}
-
-:host([indicator-placement="start"]) [part="indicators"],
-:host([indicator-placement="end"]) [part="indicators"] {
-align-self: var(--_carousel-indicators-along);
-flex-direction: column;
-justify-self: center;
-padding-block-start: var(--helix-space-none);
-padding-inline: var(--helix-space-none);
-}
-
-:host([controls-placement="start"]) [part="controls"],
-:host([controls-placement="end"]) [part="controls"] {
-align-self: var(--_carousel-controls-along);
-flex-direction: column;
-justify-self: center;
-padding-block-start: var(--helix-space-none);
-padding-inline: var(--helix-space-none);
-}
-
-:host([indicator-placement="start"]) [part="indicators"],
-:host([indicator-placement="end"]) [part="indicators"] {
---_carousel-indicators-along: center;
-}
-
-:host([controls-placement="start"]) [part="controls"],
+export const styles = createSheet(`:host {--_carousel-bleed: var(--carousel-bleed, var(--helix-space-md));--_carousel-gap: var(--carousel-gap, var(--helix-space-md));}:host {display: grid;grid-template-columns: auto minmax(0, 1fr) auto;grid-template-rows: auto minmax(0, 1fr) auto;}[part="track"] {grid-area: 2 / 2;}[part="controls"],
+[part="indicators"] {align-items: center;display: flex;gap: var(--helix-space-2xs);}[part="indicators"] {grid-area: 3 / 2;justify-self: var(--_carousel-indicators-along);padding-block-start: var(--helix-space-sm);padding-inline: var(--_carousel-bleed);}[part="controls"] {grid-area: 3 / 2;justify-self: var(--_carousel-controls-along);padding-block-start: var(--helix-space-sm);padding-inline: var(--_carousel-bleed);}[part="indicators"] {--_carousel-indicators-along: start;}[part="controls"] {--_carousel-controls-along: end;}@media (hover: none) and (pointer: coarse) {:host(:not([controls="always"])) [part="indicators"] {--_carousel-indicators-along: center;}}:host([indicator-placement="top"]) [part="indicators"] {grid-area: 1 / 2;padding-block: var(--helix-space-none) var(--helix-space-sm);}:host([controls-placement="top"]) [part="controls"] {grid-area: 1 / 2;padding-block: var(--helix-space-none) var(--helix-space-sm);}:host([indicator-placement="start"]) [part="indicators"],
+:host([indicator-placement="end"]) [part="indicators"] {align-self: var(--_carousel-indicators-along);flex-direction: column;justify-self: center;padding-block-start: var(--helix-space-none);padding-inline: var(--helix-space-none);}:host([controls-placement="start"]) [part="controls"],
+:host([controls-placement="end"]) [part="controls"] {align-self: var(--_carousel-controls-along);flex-direction: column;justify-self: center;padding-block-start: var(--helix-space-none);padding-inline: var(--helix-space-none);}:host([indicator-placement="start"]) [part="indicators"],
+:host([indicator-placement="end"]) [part="indicators"] {--_carousel-indicators-along: center;}:host([controls-placement="start"]) [part="controls"],
 :host([controls-placement="end"]) [part="controls"],
-:host([controls-placement="overlay"]) [part="controls"] {
---_carousel-controls-along: center;
-}
-
-:host([indicator-placement="overlay"]) [part="indicators"] {
---_carousel-indicators-along: center;
-}
-
-:host([indicator-align="start"]) [part="indicators"] {
---_carousel-indicators-along: start;
-}
-
-:host([indicator-align="center"]) [part="indicators"] {
---_carousel-indicators-along: center;
-}
-
-:host([indicator-align="end"]) [part="indicators"] {
---_carousel-indicators-along: end;
-}
-
-:host([controls-align="start"]) [part="controls"] {
---_carousel-controls-along: start;
-}
-
-:host([controls-align="center"]) [part="controls"] {
---_carousel-controls-along: center;
-}
-
-:host([controls-align="end"]) [part="controls"] {
---_carousel-controls-along: end;
-}
-
-:host([indicator-placement="start"]) [part="indicators"] {
-grid-area: 2 / 1;
-padding-inline-end: var(--helix-space-sm);
-}
-
-:host([controls-placement="start"]) [part="controls"] {
-grid-area: 2 / 1;
-padding-inline-end: var(--helix-space-sm);
-}
-
-:host([indicator-placement="end"]) [part="indicators"] {
-grid-area: 2 / 3;
-padding-inline-start: var(--helix-space-sm);
-}
-
-:host([controls-placement="end"]) [part="controls"] {
-grid-area: 2 / 3;
-padding-inline-start: var(--helix-space-sm);
-}
-
-[part="rotation"],
+:host([controls-placement="overlay"]) [part="controls"] {--_carousel-controls-along: center;}:host([indicator-placement="overlay"]) [part="indicators"] {--_carousel-indicators-along: center;}:host([indicator-align="start"]) [part="indicators"] {--_carousel-indicators-along: start;}:host([indicator-align="center"]) [part="indicators"] {--_carousel-indicators-along: center;}:host([indicator-align="end"]) [part="indicators"] {--_carousel-indicators-along: end;}:host([controls-align="start"]) [part="controls"] {--_carousel-controls-along: start;}:host([controls-align="center"]) [part="controls"] {--_carousel-controls-along: center;}:host([controls-align="end"]) [part="controls"] {--_carousel-controls-along: end;}:host([indicator-placement="start"]) [part="indicators"] {grid-area: 2 / 1;padding-inline-end: var(--helix-space-sm);}:host([controls-placement="start"]) [part="controls"] {grid-area: 2 / 1;padding-inline-end: var(--helix-space-sm);}:host([indicator-placement="end"]) [part="indicators"] {grid-area: 2 / 3;padding-inline-start: var(--helix-space-sm);}:host([controls-placement="end"]) [part="controls"] {grid-area: 2 / 3;padding-inline-start: var(--helix-space-sm);}[part="rotation"],
 [part="previous"],
-[part="next"] {
-all: unset;
-
-box-sizing: border-box;
-align-items: center;
-block-size: var(--helix-size-control-tight);
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-muted);
-cursor: pointer;
-display: inline-flex;
-inline-size: var(--helix-size-control-tight);
-justify-content: center;
-}
-
-[part="rotation"]:hover,
+[part="next"] {all: unset;box-sizing: border-box;align-items: center;block-size: var(--helix-size-control-tight);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;inline-size: var(--helix-size-control-tight);justify-content: center;}[part="rotation"]:hover,
 [part="previous"]:hover,
-[part="next"]:hover {
-background-color: var(--helix-color-surface-sunken);
-color: var(--helix-color-foreground);
-}
-
-[part="rotation"]:focus-visible,
+[part="next"]:hover {background-color: var(--helix-color-surface-sunken);color: var(--helix-color-foreground);}[part="rotation"]:focus-visible,
 [part="previous"]:focus-visible,
-[part="next"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="rotation"] svg,
+[part="next"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="rotation"] svg,
 [part="previous"] svg,
 [part="next"] svg,
 ::slotted([slot="previous-icon"]),
-::slotted([slot="next-icon"]) {
-block-size: 1em;
-inline-size: 1em;
-}
-
-:host(:dir(rtl)) ::slotted([slot="previous-icon"]),
-:host(:dir(rtl)) ::slotted([slot="next-icon"]) {
-scale: -1 1;
-}
-
-:host([mouse-drag]) [part="track"] {
-cursor: grab;
-}
-
-:host(:state(dragging)) [part="track"] {
-cursor: grabbing;
-user-select: none;
-}
-
-[part="track"] {
-
---_carousel-share: calc(
+::slotted([slot="next-icon"]) {block-size: 1em;inline-size: 1em;}:host(:dir(rtl)) ::slotted([slot="previous-icon"]),
+:host(:dir(rtl)) ::slotted([slot="next-icon"]) {scale: -1 1;}:host([mouse-drag]) [part="track"] {cursor: grab;}:host(:state(dragging)) [part="track"] {cursor: grabbing;user-select: none;}[part="track"] {--_carousel-share: calc(
 (100% - (var(--carousel-per-view, 1) - 1) * var(--_carousel-gap)) /
 var(--carousel-per-view, 1)
-);
---carousel-gap: var(--_carousel-gap);
---carousel-pane: calc(round(var(--_carousel-share) - 0.015625px, 0.03125px) + 0.015625px);
-display: flex;
-gap: var(--_carousel-gap);
-overflow-x: auto;
-
-padding-block: var(--helix-space-md);
-padding-inline: var(--_carousel-bleed);
-scroll-padding-inline: var(--_carousel-bleed);
-scroll-snap-type: x mandatory;
-scrollbar-width: none;
-}
-
-[part="track"]::-webkit-scrollbar {
-display: none;
-}
-
-:host([per-view="auto"]:not([orientation="vertical"])) [part="track"] {
---carousel-per-view: max(
+);--carousel-gap: var(--_carousel-gap);--carousel-pane: calc(round(var(--_carousel-share) - 0.015625px, 0.03125px) + 0.015625px);display: flex;gap: var(--_carousel-gap);overflow-x: auto;padding-block: var(--helix-space-md);padding-inline: var(--_carousel-bleed);scroll-padding-inline: var(--_carousel-bleed);scroll-snap-type: x mandatory;scrollbar-width: none;}[part="track"]::-webkit-scrollbar {display: none;}:host([per-view="auto"]:not([orientation="vertical"])) [part="track"] {--carousel-per-view: max(
 1,
 round(
 down,
@@ -225,185 +29,15 @@ calc(
 ),
 1
 )
-);
-container-type: inline-size;
-}
-
-:host([orientation="vertical"]) [part="track"] {
-block-size: var(--carousel-block-size, 20rem);
-flex-direction: column;
-overflow-x: hidden;
-overflow-y: auto;
-padding-block: var(--_carousel-bleed);
-scroll-padding-block: var(--_carousel-bleed);
-scroll-snap-type: y mandatory;
-}
-
-[part="slide"] {
-display: flex;
-flex: 0 0 var(--carousel-pane);
-margin-inline-end: var(--carousel-run-end, 0px);
-scroll-snap-align: start;
-}
-
-:host([per-view="auto"]:not([orientation="vertical"])) [part="slide"] {
-flex-grow: 1;
-}
-
-[part="slide"] ::slotted(*) {
-flex: 1 1 0;
-min-block-size: 0;
-min-inline-size: 0;
-}
-
-:host([orientation="vertical"]) [part="slide"] {
-flex-direction: column;
-flex: 0 0 var(--_carousel-share);
-}
-
-[part~="indicator"] {
-
---_carousel-indicator-motion: var(--helix-duration-slow) var(--helix-easing-emphasized);
-all: unset;
-background-color: var(--helix-color-border);
-block-size: var(--helix-space-xs);
-border-radius: var(--helix-radii-full);
-box-sizing: border-box;
-cursor: pointer;
-inline-size: var(--helix-space-xs);
-transition:
+);container-type: inline-size;}:host([orientation="vertical"]) [part="track"] {block-size: var(--carousel-block-size, 20rem);flex-direction: column;overflow-x: hidden;overflow-y: auto;padding-block: var(--_carousel-bleed);scroll-padding-block: var(--_carousel-bleed);scroll-snap-type: y mandatory;}[part="slide"] {display: flex;flex: 0 0 var(--carousel-pane);margin-inline-end: var(--carousel-run-end, 0px);scroll-snap-align: start;}:host([per-view="auto"]:not([orientation="vertical"])) [part="slide"] {flex-grow: 1;}[part="slide"] ::slotted(*) {flex: 1 1 0;min-block-size: 0;min-inline-size: 0;}:host([orientation="vertical"]) [part="slide"] {flex-direction: column;flex: 0 0 var(--_carousel-share);}[part~="indicator"] {--_carousel-indicator-motion: var(--helix-duration-slow) var(--helix-easing-emphasized);all: unset;background-color: var(--helix-color-border);block-size: var(--helix-space-xs);border-radius: var(--helix-radii-full);box-sizing: border-box;cursor: pointer;inline-size: var(--helix-space-xs);transition:
 background-color var(--_carousel-indicator-motion),
-inline-size var(--_carousel-indicator-motion);
-}
-
-[part~="indicator"][data-current] {
-background-color: var(--helix-color-primary);
-inline-size: var(--helix-space-lg);
-}
-
-:host([indicator-placement="start"]) [part~="indicator"],
-:host([indicator-placement="end"]) [part~="indicator"] {
-transition:
+inline-size var(--_carousel-indicator-motion);}[part~="indicator"][data-current] {background-color: var(--helix-color-primary);inline-size: var(--helix-space-lg);}:host([indicator-placement="start"]) [part~="indicator"],
+:host([indicator-placement="end"]) [part~="indicator"] {transition:
 background-color var(--_carousel-indicator-motion),
-block-size var(--_carousel-indicator-motion);
-}
-
-:host([indicator-placement="start"]) [part~="indicator"][data-current],
-:host([indicator-placement="end"]) [part~="indicator"][data-current] {
-block-size: var(--helix-space-lg);
-inline-size: var(--helix-space-xs);
-}
-
-[part~="indicator"]:hover {
-background-color: var(--helix-color-foreground-muted);
-}
-
-[part~="indicator"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host([controls-placement="overlay"]) [part="controls"] {
-grid-area: 2 / 2;
-justify-self: stretch;
-}
-
-:host([controls-placement="overlay"]) [part="controls"] {
-align-items: var(--_carousel-controls-along);
-
-justify-content: flex-start;
-padding-block-start: var(--helix-space-none);
-
-padding-inline: calc(var(--_carousel-bleed) + var(--helix-space-md));
-pointer-events: none;
-z-index: var(--helix-layer-raised);
-}
-
-:host([controls-placement="overlay"]) [part="previous"],
+block-size var(--_carousel-indicator-motion);}:host([indicator-placement="start"]) [part~="indicator"][data-current],
+:host([indicator-placement="end"]) [part~="indicator"][data-current] {block-size: var(--helix-space-lg);inline-size: var(--helix-space-xs);}[part~="indicator"]:hover {background-color: var(--helix-color-foreground-muted);}[part~="indicator"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([controls-placement="overlay"]) [part="controls"] {grid-area: 2 / 2;justify-self: stretch;}:host([controls-placement="overlay"]) [part="controls"] {align-items: var(--_carousel-controls-along);justify-content: flex-start;padding-block-start: var(--helix-space-none);padding-inline: calc(var(--_carousel-bleed) + var(--helix-space-md));pointer-events: none;z-index: var(--helix-layer-raised);}:host([controls-placement="overlay"]) [part="previous"],
 :host([controls-placement="overlay"]) [part="next"],
-:host([controls-placement="overlay"]) [part="rotation"] {
-background-color: var(--helix-color-surface-overlay);
-border-color: transparent;
-box-shadow: var(--helix-shadow-md);
-pointer-events: auto;
-}
-
-:host([indicator-placement="overlay"]) [part="indicators"] {
-align-self: end;
-grid-area: 2 / 2;
-z-index: var(--helix-layer-raised);
-}
-
-:host([indicator-placement="overlay"]) [part="indicators"] {
-background-color: var(--helix-color-surface-overlay);
-border-radius: var(--helix-radii-full);
-box-shadow: var(--helix-shadow-md);
-margin-block-end: calc(var(--_carousel-bleed) + var(--helix-space-md));
-padding-block: var(--helix-space-2xs);
-padding-inline: var(--helix-space-xs);
-}
-
-:host([indicator-placement="overlay"]) [part~="indicator"] {
-background-color: var(--helix-color-foreground-muted);
-}
-
-:host([indicator-placement="overlay"]) [part~="indicator"][data-current] {
-background-color: var(--helix-color-primary);
-}
-
-:host([controls-placement="overlay"]) [part="next"] {
-margin-inline-start: auto;
-}
-
-:host([controls-placement="overlay"]) [part="rotation"] {
-order: 1;
-}
-
-:host([orientation="vertical"]:not([indicator-placement])) [part="indicators"] {
-align-self: var(--_carousel-indicators-along);
-flex-direction: column;
-grid-area: 2 / 3;
-justify-self: center;
-padding-block-start: var(--helix-space-none);
-padding-inline: var(--helix-space-none);
-padding-inline-start: var(--helix-space-sm);
-}
-
-:host([orientation="vertical"]:not([controls-placement])) [part="controls"] {
-align-self: var(--_carousel-controls-along);
-flex-direction: column;
-grid-area: 2 / 3;
-justify-self: center;
-padding-block-start: var(--helix-space-none);
-padding-inline: var(--helix-space-none);
-padding-inline-start: var(--helix-space-sm);
-}
-
-:host([orientation="vertical"]:not([indicator-placement])) [part~="indicator"] {
-transition:
+:host([controls-placement="overlay"]) [part="rotation"] {background-color: var(--helix-color-surface-overlay);border-color: transparent;box-shadow: var(--helix-shadow-md);pointer-events: auto;}:host([indicator-placement="overlay"]) [part="indicators"] {align-self: end;grid-area: 2 / 2;z-index: var(--helix-layer-raised);}:host([indicator-placement="overlay"]) [part="indicators"] {background-color: var(--helix-color-surface-overlay);border-radius: var(--helix-radii-full);box-shadow: var(--helix-shadow-md);margin-block-end: calc(var(--_carousel-bleed) + var(--helix-space-md));padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);}:host([indicator-placement="overlay"]) [part~="indicator"] {background-color: var(--helix-color-foreground-muted);}:host([indicator-placement="overlay"]) [part~="indicator"][data-current] {background-color: var(--helix-color-primary);}:host([controls-placement="overlay"]) [part="next"] {margin-inline-start: auto;}:host([controls-placement="overlay"]) [part="rotation"] {order: 1;}:host([orientation="vertical"]:not([indicator-placement])) [part="indicators"] {align-self: var(--_carousel-indicators-along);flex-direction: column;grid-area: 2 / 3;justify-self: center;padding-block-start: var(--helix-space-none);padding-inline: var(--helix-space-none);padding-inline-start: var(--helix-space-sm);}:host([orientation="vertical"]:not([controls-placement])) [part="controls"] {align-self: var(--_carousel-controls-along);flex-direction: column;grid-area: 2 / 3;justify-self: center;padding-block-start: var(--helix-space-none);padding-inline: var(--helix-space-none);padding-inline-start: var(--helix-space-sm);}:host([orientation="vertical"]:not([indicator-placement])) [part~="indicator"] {transition:
 background-color var(--_carousel-indicator-motion),
-block-size var(--_carousel-indicator-motion);
-}
-
-:host([orientation="vertical"]:not([indicator-placement])) [part~="indicator"][data-current] {
-block-size: var(--helix-space-lg);
-inline-size: var(--helix-space-xs);
-}
-
-@media print {
-:host {
-box-shadow: none;
-overflow: visible;
-}
-}
-
-@media (hover: none) and (pointer: coarse) {
-:host(:not([controls="always"])) [part="previous"],
-:host(:not([controls="always"])) [part="next"] {
-display: none;
-}
-
-:host(:not([controls="always"]):not([autoplay])) [part="controls"] {
-display: none;
-}
-}`);
+block-size var(--_carousel-indicator-motion);}:host([orientation="vertical"]:not([indicator-placement])) [part~="indicator"][data-current] {block-size: var(--helix-space-lg);inline-size: var(--helix-space-xs);}@media print {:host {box-shadow: none;overflow: visible;}}@media (hover: none) and (pointer: coarse) {:host(:not([controls="always"])) [part="previous"],
+:host(:not([controls="always"])) [part="next"] {display: none;}:host(:not([controls="always"]):not([autoplay])) [part="controls"] {display: none;}}`);