@fusion.dev/helix 0.145.0 → 0.147.0

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

@@ -1,411 +1,29 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-color-scheme: dark;
-
---_video-rail-size: 4px;
---_video-spin: 0.8s;
---_video-thumb-size: 12px;
-
-display: block;
-position: relative;
-}
-
-[part="stage"] {
-border-radius: var(--video-radius, var(--helix-radii-md));
-display: block;
-
-outline: var(--helix-border-thin) solid var(--helix-color-border);
-outline-offset: calc(var(--helix-border-thin) * -1);
-overflow: hidden;
-position: relative;
-}
-
-[part="stage"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: calc(var(--helix-size-focus-offset) * -1);
-}
-
-[part="video"] {
-
-aspect-ratio: var(--video-aspect-ratio, var(--video-intrinsic-ratio, 16 / 9));
-
-background-color: var(--video-well-color, var(--helix-color-surface-media));
-block-size: auto;
-display: block;
-inline-size: 100%;
-object-fit: contain;
-}
-
-[part="controls"] {
-align-items: center;
-
-color: var(--video-controls-color, var(--helix-color-foreground));
-display: flex;
-gap: var(--helix-space-xs);
-inset-block-end: 0;
-inset-inline: 0;
-opacity: 1;
-padding: var(--helix-space-xs) var(--helix-space-sm);
-position: absolute;
-transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host([separation="filled"]) [part="controls"] {
-background-color: var(--helix-color-surface);
-color: var(--helix-color-foreground);
-}
-
-[part="stage"]::before {
-background-image: linear-gradient(to top, var(--helix-color-overlay), transparent);
-block-size: calc(var(--helix-size-icon-loose) + var(--helix-space-2xl));
-content: "";
-inset-block-end: 0;
-inset-inline: 0;
-opacity: 1;
-pointer-events: none;
-position: absolute;
-transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host([separation="filled"]) [part="stage"]::before {
-content: none;
-}
-
-:host([separation="filled"][data-idle]:not(:focus-within)) [part="controls"] {
-opacity: 1;
-}
-
-:host([data-idle]:not(:focus-within)) [part="stage"]::before {
-opacity: 0;
-}
-
-:host([separation="plain"]) [part="stage"]::before,
-:host([controls]) [part="stage"]::before {
-content: none;
-}
-
-:host([data-idle]:not(:focus-within)) [part="controls"] {
-opacity: 0;
-}
-
-[part="controls"] :where(a, button) {
---icon-size: var(--helix-size-icon-tight);
-all: unset;
-
-align-items: center;
-border-radius: var(--helix-radii-sm);
-box-sizing: border-box;
-color: inherit;
-cursor: pointer;
-display: flex;
-flex: 0 0 auto;
-justify-content: center;
-min-block-size: var(--helix-size-icon-loose);
-min-inline-size: var(--helix-size-icon-loose);
-}
-
-slot[name$="-icon"]::slotted(*) {
-block-size: var(--icon-size, var(--helix-size-icon));
-flex: 0 0 auto;
-inline-size: var(--icon-size, var(--helix-size-icon));
-}
-
-[part="controls"] :where(a, button):focus-visible,
+export const styles = createSheet(`:host {color-scheme: dark;--_video-rail-size: 4px;--_video-spin: 0.8s;--_video-thumb-size: 12px;display: block;position: relative;}[part="stage"] {border-radius: var(--video-radius, var(--helix-radii-md));display: block;outline: var(--helix-border-thin) solid var(--helix-color-border);outline-offset: calc(var(--helix-border-thin) * -1);overflow: hidden;position: relative;}[part="stage"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="video"] {aspect-ratio: var(--video-aspect-ratio, var(--video-intrinsic-ratio, 16 / 9));background-color: var(--video-well-color, var(--helix-color-surface-media));block-size: auto;display: block;inline-size: 100%;object-fit: contain;}[part="controls"] {align-items: center;color: var(--video-controls-color, var(--helix-color-foreground));display: flex;gap: var(--helix-space-xs);inset-block-end: 0;inset-inline: 0;opacity: 1;padding: var(--helix-space-xs) var(--helix-space-sm);position: absolute;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);}:host([separation="filled"]) [part="controls"] {background-color: var(--helix-color-surface);color: var(--helix-color-foreground);}[part="stage"]::before {background-image: linear-gradient(to top, var(--helix-color-overlay), transparent);block-size: calc(var(--helix-size-icon-loose) + var(--helix-space-2xl));content: "";inset-block-end: 0;inset-inline: 0;opacity: 1;pointer-events: none;position: absolute;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);}:host([separation="filled"]) [part="stage"]::before {content: none;}:host([separation="filled"][data-idle]:not(:focus-within)) [part="controls"] {opacity: 1;}:host([data-idle]:not(:focus-within)) [part="stage"]::before {opacity: 0;}:host([separation="plain"]) [part="stage"]::before,
+:host([controls]) [part="stage"]::before {content: none;}:host([data-idle]:not(:focus-within)) [part="controls"] {opacity: 0;}[part="controls"] :where(a, button) {--icon-size: var(--helix-size-icon-tight);all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: inherit;cursor: pointer;display: flex;flex: 0 0 auto;justify-content: center;min-block-size: var(--helix-size-icon-loose);min-inline-size: var(--helix-size-icon-loose);}slot[name$="-icon"]::slotted(*) {block-size: var(--icon-size, var(--helix-size-icon));flex: 0 0 auto;inline-size: var(--icon-size, var(--helix-size-icon));}[part="controls"] :where(a, button):focus-visible,
 [part="scrubber"]:focus-visible,
-[part="volume"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="time"] {
-color: inherit;
-flex: 0 0 auto;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-font-variant-numeric: tabular-nums;
-}
-
-[part="scrubber"],
-[part="volume"] {
-appearance: none;
-border-radius: var(--helix-radii-full);
-cursor: pointer;
-margin: var(--helix-space-none);
-}
-
-[part="scrubber"] {
-background-color: color-mix(in oklab, currentColor 28%, transparent);
-background-image: linear-gradient(
+[part="volume"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="time"] {color: inherit;flex: 0 0 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;}[part="scrubber"],
+[part="volume"] {appearance: none;border-radius: var(--helix-radii-full);cursor: pointer;margin: var(--helix-space-none);}[part="scrubber"] {background-color: color-mix(in oklab, currentColor 28%, transparent);background-image: linear-gradient(
 to right,
 var(--_video-fill) calc(var(--_video-at, 0) * 100%),
 transparent calc(var(--_video-at, 0) * 100%)
-);
-block-size: var(--_video-rail-size);
-}
-
-[part="scrubber"] {
---_video-at: var(--video-progress, 0);
---_video-fill: var(--video-accent-color, var(--helix-color-primary));
-
-flex: 1 1 auto;
-min-inline-size: 0;
-}
-
-[part="volume"] {
---_video-at: var(--video-level, 1);
---_video-fill: currentColor;
-}
-
-[part="sound"] {
---_video-level-size: 4.5rem;
-
---_video-level-gap: var(--helix-space-2xs);
---_video-level-lift: calc(100% + var(--_video-level-gap));
-
-align-items: center;
-display: flex;
-flex: 0 0 auto;
-position: relative;
-}
-
-[part="volume"] {
-
-writing-mode: vertical-rl;
-
-background-color: color-mix(in oklab, currentColor 28%, transparent);
-background-image: linear-gradient(
+);block-size: var(--_video-rail-size);}[part="scrubber"] {--_video-at: var(--video-progress, 0);--_video-fill: var(--video-accent-color, var(--helix-color-primary));flex: 1 1 auto;min-inline-size: 0;}[part="volume"] {--_video-at: var(--video-level, 1);--_video-fill: currentColor;}[part="sound"] {--_video-level-size: 4.5rem;--_video-level-gap: var(--helix-space-2xs);--_video-level-lift: calc(100% + var(--_video-level-gap));align-items: center;display: flex;flex: 0 0 auto;position: relative;}[part="volume"] {writing-mode: vertical-rl;background-color: color-mix(in oklab, currentColor 28%, transparent);background-image: linear-gradient(
 to top,
 var(--_video-fill) calc(var(--_video-at, 1) * 100%),
 transparent calc(var(--_video-at, 1) * 100%)
-);
-
-block-size: var(--_video-rail-size);
-bottom: var(--_video-level-lift);
-direction: rtl;
-inline-size: var(--_video-level-size);
-
-left: 50%;
-opacity: 0;
-padding: var(--helix-space-none);
-pointer-events: none;
-position: absolute;
-transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
-translate: -50% 0;
-}
-
-[part="sound"]:hover [part="volume"],
-[part="sound"]:focus-within [part="volume"] {
-opacity: 1;
-pointer-events: auto;
-}
-
-[part="sound"]:hover::after,
-[part="sound"]:focus-within::after {
-block-size: var(--_video-level-gap);
-bottom: 100%;
-content: "";
-inline-size: var(--helix-size-icon-loose);
-left: 50%;
-position: absolute;
-translate: -50% 0;
-}
-
-[part="sound"]:hover::before,
-[part="sound"]:focus-within::before {
-background-color: var(--helix-color-overlay);
-border-radius: var(--helix-radii-full);
-content: "";
-block-size: calc(var(--_video-level-size) + var(--helix-space-xs) * 2);
-
-bottom: calc(var(--_video-level-lift) - var(--helix-space-xs));
-inline-size: var(--helix-size-icon-loose);
-left: 50%;
-position: absolute;
-translate: -50% 0;
-}
-
-[part="scrubber"]::-webkit-slider-thumb,
-[part="volume"]::-webkit-slider-thumb {
-appearance: none;
-background-color: currentColor;
-block-size: var(--_video-thumb-size);
-border: none;
-border-radius: var(--helix-radii-full);
-inline-size: var(--_video-thumb-size);
-}
-
-[part="scrubber"]::-moz-range-thumb,
-[part="volume"]::-moz-range-thumb {
-background-color: currentColor;
-block-size: var(--_video-thumb-size);
-border: none;
-border-radius: var(--helix-radii-full);
-inline-size: var(--_video-thumb-size);
-}
-
-:host([separation="filled"]) [part="sound"] {
---_video-level-gap: calc(var(--helix-space-xs) * 2);
-}
-
-[part="overflow"] {
-display: contents;
-}
-
-[part="start"] {
---icon-size: 40%;
-all: unset;
-
-align-items: center;
-aspect-ratio: 1;
-background-color: var(--helix-color-overlay);
-border-radius: var(--helix-radii-full);
-box-shadow: 0 0 0 var(--helix-border-thin)
-color-mix(in oklab, var(--helix-color-foreground) 40%, transparent);
-box-sizing: border-box;
-color: var(--helix-color-foreground);
-cursor: pointer;
-display: flex;
-
-inline-size: var(
+);block-size: var(--_video-rail-size);bottom: var(--_video-level-lift);direction: rtl;inline-size: var(--_video-level-size);left: 50%;opacity: 0;padding: var(--helix-space-none);pointer-events: none;position: absolute;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);translate: -50% 0;}[part="sound"]:hover [part="volume"],
+[part="sound"]:focus-within [part="volume"] {opacity: 1;pointer-events: auto;}[part="sound"]:hover::after,
+[part="sound"]:focus-within::after {block-size: var(--_video-level-gap);bottom: 100%;content: "";inline-size: var(--helix-size-icon-loose);left: 50%;position: absolute;translate: -50% 0;}[part="sound"]:hover::before,
+[part="sound"]:focus-within::before {background-color: var(--helix-color-overlay);border-radius: var(--helix-radii-full);content: "";block-size: calc(var(--_video-level-size) + var(--helix-space-xs) * 2);bottom: calc(var(--_video-level-lift) - var(--helix-space-xs));inline-size: var(--helix-size-icon-loose);left: 50%;position: absolute;translate: -50% 0;}[part="scrubber"]::-webkit-slider-thumb,
+[part="volume"]::-webkit-slider-thumb {appearance: none;background-color: currentColor;block-size: var(--_video-thumb-size);border: none;border-radius: var(--helix-radii-full);inline-size: var(--_video-thumb-size);}[part="scrubber"]::-moz-range-thumb,
+[part="volume"]::-moz-range-thumb {background-color: currentColor;block-size: var(--_video-thumb-size);border: none;border-radius: var(--helix-radii-full);inline-size: var(--_video-thumb-size);}:host([separation="filled"]) [part="sound"] {--_video-level-gap: calc(var(--helix-space-xs) * 2);}[part="overflow"] {display: contents;}[part="start"] {--icon-size: 40%;all: unset;align-items: center;aspect-ratio: 1;background-color: var(--helix-color-overlay);border-radius: var(--helix-radii-full);box-shadow: 0 0 0 var(--helix-border-thin)
+color-mix(in oklab, var(--helix-color-foreground) 40%, transparent);box-sizing: border-box;color: var(--helix-color-foreground);cursor: pointer;display: flex;inline-size: var(
 --video-start-size,
 clamp(var(--helix-size-control), 15%, calc(var(--helix-size-control-loose) * 1.5))
-);
-inset-block-start: 50%;
-inset-inline-start: 50%;
-justify-content: center;
-position: absolute;
-transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
-translate: -50% -50%;
-}
-
-[part="start"]:hover {
-background-color: color-mix(
+);inset-block-start: 50%;inset-inline-start: 50%;justify-content: center;position: absolute;transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);translate: -50% -50%;}[part="start"]:hover {background-color: color-mix(
 in oklab,
 var(--helix-color-overlay) 88%,
 var(--helix-color-foreground)
-);
-}
-
-[part="start"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="cue"] {
-background-color: var(--helix-color-overlay);
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-md);
-inline-size: max-content;
-inset-block-end: calc(var(--helix-size-icon-loose) + var(--helix-space-lg));
-inset-inline-start: 50%;
-margin: var(--helix-space-none);
-max-inline-size: min(80%, 36rem);
-padding: var(--helix-space-2xs) var(--helix-space-xs);
-position: absolute;
-text-align: center;
-text-wrap: balance;
-transition: inset-block-end var(--helix-duration-fast) var(--helix-easing-standard);
-translate: -50% 0;
-}
-
-:host([data-idle]:not(:focus-within)) [part="cue"] {
-inset-block-end: var(--helix-space-lg);
-}
-
-[part="poster"] {
-display: block;
-inset: 0;
-
-pointer-events: none;
-position: absolute;
-}
-
-[part="poster"]::slotted(*) {
-pointer-events: auto;
-}
-
-[part="poster"]::slotted(*) {
-block-size: 100%;
-display: block;
-inline-size: 100%;
-object-fit: contain;
-}
-
-[part="speed"] {
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-font-variant-numeric: tabular-nums;
-font-weight: var(--helix-weight-medium);
-min-inline-size: var(--video-speed-size, 2.5rem);
-}
-
-[part~="remote"][aria-pressed="true"] {
-color: var(--helix-color-primary);
-}
-
-[part="loading"],
-[part="failure"] {
-align-items: center;
-background-color: color-mix(in oklab, var(--helix-color-surface-media) 72%, transparent);
-border-radius: var(--helix-radii-md);
-color: var(--helix-color-foreground-media);
-display: flex;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-gap: var(--helix-space-xs);
-inset-block-start: 50%;
-inset-inline-start: 50%;
-padding: var(--helix-space-xs) var(--helix-space-sm);
-position: absolute;
-translate: -50% -50%;
-}
-
-[part="loading"]::before {
-animation: video-spin var(--_video-spin) linear infinite;
-block-size: var(--helix-size-icon-tight);
-border: var(--helix-border-thick) solid
-color-mix(in oklab, var(--helix-color-foreground-media) 30%, transparent);
-border-block-start-color: var(--helix-color-foreground-media);
-border-radius: var(--helix-radii-full);
-content: "";
-flex: 0 0 auto;
-inline-size: var(--helix-size-icon-tight);
-}
-
-@keyframes video-spin {
-to {
-rotate: 1turn;
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="loading"]::before {
-animation: none;
-}
-}
-
-[part="header"] {
-align-items: center;
-
-color: var(--video-controls-color, var(--helix-color-foreground));
-display: flex;
-gap: var(--helix-space-sm);
-inset-block-start: var(--helix-space-sm);
-inset-inline-start: var(--helix-space-sm);
-max-inline-size: calc(100% - 2 * var(--helix-space-sm));
-opacity: inherit;
-position: absolute;
-z-index: var(--helix-layer-raised);
-}
-
-[part="header"]:not(:has(*)) {
-display: none;
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+);}[part="start"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="cue"] {background-color: var(--helix-color-overlay);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-md);inline-size: max-content;inset-block-end: calc(var(--helix-size-icon-loose) + var(--helix-space-lg));inset-inline-start: 50%;margin: var(--helix-space-none);max-inline-size: min(80%, 36rem);padding: var(--helix-space-2xs) var(--helix-space-xs);position: absolute;text-align: center;text-wrap: balance;transition: inset-block-end var(--helix-duration-fast) var(--helix-easing-standard);translate: -50% 0;}:host([data-idle]:not(:focus-within)) [part="cue"] {inset-block-end: var(--helix-space-lg);}[part="poster"] {display: block;inset: 0;pointer-events: none;position: absolute;}[part="poster"]::slotted(*) {pointer-events: auto;}[part="poster"]::slotted(*) {block-size: 100%;display: block;inline-size: 100%;object-fit: contain;}[part="speed"] {font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-medium);min-inline-size: var(--video-speed-size, 2.5rem);}[part~="remote"][aria-pressed="true"] {color: var(--helix-color-primary);}[part="loading"],
+[part="failure"] {align-items: center;background-color: color-mix(in oklab, var(--helix-color-surface-media) 72%, transparent);border-radius: var(--helix-radii-md);color: var(--helix-color-foreground-media);display: flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);gap: var(--helix-space-xs);inset-block-start: 50%;inset-inline-start: 50%;padding: var(--helix-space-xs) var(--helix-space-sm);position: absolute;translate: -50% -50%;}[part="loading"]::before {animation: video-spin var(--_video-spin) linear infinite;block-size: var(--helix-size-icon-tight);border: var(--helix-border-thick) solid
+color-mix(in oklab, var(--helix-color-foreground-media) 30%, transparent);border-block-start-color: var(--helix-color-foreground-media);border-radius: var(--helix-radii-full);content: "";flex: 0 0 auto;inline-size: var(--helix-size-icon-tight);}@keyframes video-spin {to {rotate: 1turn;}}@media (prefers-reduced-motion: reduce) {[part="loading"]::before {animation: none;}}[part="header"] {align-items: center;color: var(--video-controls-color, var(--helix-color-foreground));display: flex;gap: var(--helix-space-sm);inset-block-start: var(--helix-space-sm);inset-inline-start: var(--helix-space-sm);max-inline-size: calc(100% - 2 * var(--helix-space-sm));opacity: inherit;position: absolute;z-index: var(--helix-layer-raised);}[part="header"]:not(:has(*)) {display: none;}@media print {:host {display: none;}}`);

package/dist/video-playlist/item/video-playlist-item.css.js

@@ -1,88 +1,14 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-[part~="item"] {
-all: unset;
-box-sizing: border-box;
-
-align-items: center;
-background-color: var(--video-playlist-item-background-color, transparent);
-border-radius: var(--helix-radii-sm);
-cursor: pointer;
-display: flex;
-gap: var(--helix-space-sm);
-inline-size: 100%;
-
-padding: var(--helix-space-2xs) var(--helix-space-2xs) var(--helix-space-2xs)
-var(--helix-space-sm);
-position: relative;
-text-align: start;
-transition:
+export const styles = createSheet(`:host {display: block;}[part~="item"] {all: unset;box-sizing: border-box;align-items: center;background-color: var(--video-playlist-item-background-color, transparent);border-radius: var(--video-playlist-item-radius, var(--helix-radii-sm));cursor: pointer;display: flex;gap: var(--video-playlist-item-gap, var(--helix-space-sm));inline-size: 100%;padding: var(--video-playlist-item-padding-block, var(--helix-space-2xs))
+var(--video-playlist-item-padding-inline-end, var(--helix-space-2xs))
+var(--video-playlist-item-padding-block, var(--helix-space-2xs))
+var(--video-playlist-item-padding-inline-start, var(--helix-space-sm));position: relative;text-align: start;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host(:not([disabled])) [part~="item"]:hover {
-background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
-}
-
-[part~="item"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: calc(var(--helix-size-focus-offset) * -1);
-}
-
-[part~="item"][aria-current="true"] {
-background-color: color-mix(in oklab, var(--helix-color-foreground) 6%, transparent);
-color: var(--helix-color-foreground);
-}
-
-[part~="item"][aria-current="true"]::before {
-background-color: var(--helix-color-primary);
-border-radius: var(--helix-radii-full);
-content: "";
-inline-size: var(--helix-border-thick);
-inset-block: var(--helix-space-2xs);
-inset-inline-start: var(--helix-space-2xs);
-position: absolute;
-}
-
-:host([disabled]) [part~="item"] {
-cursor: not-allowed;
-opacity: 0.5;
-}
-
-[part="media"] {
-aspect-ratio: 16 / 9;
-border-radius: var(--helix-radii-sm);
-flex: 0 0 auto;
-inline-size: var(--video-playlist-media-size, 5rem);
-overflow: hidden;
-}
-
-[part="media"] ::slotted(*),
-[part="thumbnail"] {
-block-size: 100%;
-display: block;
-inline-size: 100%;
-object-fit: cover;
-}
-
-[part="label"] {
-color: var(--helix-color-foreground);
-display: flex;
-flex-direction: column;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-medium);
-gap: var(--helix-space-2xs);
-line-height: var(--helix-leading-tight);
-min-inline-size: 0;
-}
-
-[part="label"] ::slotted([slot="meta"]) {
-color: var(--helix-color-foreground-subtle);
-font-size: var(--helix-text-xs);
-font-weight: var(--helix-weight-regular);
-}`);
+color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:not([disabled])) [part~="item"]:hover {background-color: var(
+--video-playlist-item-hover-background-color,
+color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
+);}[part~="item"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part~="item"][aria-current="true"] {background-color: var(
+--video-playlist-item-current-background-color,
+color-mix(in oklab, var(--helix-color-foreground) 6%, transparent)
+);color: var(--helix-color-foreground);}[part~="item"][aria-current="true"]::before {background-color: var(--video-playlist-item-current-mark-color, var(--helix-color-primary));border-radius: var(--helix-radii-full);content: "";inline-size: var(--helix-border-thick);inset-block: var(--helix-space-2xs);inset-inline-start: var(--helix-space-2xs);position: absolute;}:host([disabled]) [part~="item"] {cursor: not-allowed;opacity: 0.5;}[part="media"] {aspect-ratio: var(--video-playlist-media-aspect-ratio, 16 / 9);border-radius: var(--video-playlist-media-radius, var(--helix-radii-sm));flex: 0 0 auto;inline-size: var(--video-playlist-media-size, 5rem);overflow: hidden;}[part="media"] ::slotted(*),
+[part="thumbnail"] {block-size: 100%;display: block;inline-size: 100%;object-fit: cover;}[part="label"] {color: var(--video-playlist-item-color, var(--helix-color-foreground));display: flex;flex-direction: column;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);gap: var(--helix-space-2xs);line-height: var(--helix-leading-tight);min-inline-size: 0;}[part="label"] ::slotted([slot="meta"]) {color: var(--video-playlist-item-meta-color, var(--helix-color-foreground-subtle));font-size: var(--helix-text-xs);font-weight: var(--helix-weight-regular);}`);

package/dist/video-playlist/item/video-playlist-item.d.ts

@@ -13,6 +13,18 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/video-playlist
  *
  * @cssproperty --video-playlist-item-background-color - The fill behind a row.
+ * @cssproperty --video-playlist-item-color - The color of an entry's name.
+ * @cssproperty --video-playlist-item-current-background-color - The fill behind the entry that is playing.
+ * @cssproperty --video-playlist-item-current-mark-color - The color of the bar beside the entry that is playing.
+ * @cssproperty --video-playlist-item-gap - The space between the thumbnail and the name.
+ * @cssproperty --video-playlist-item-hover-background-color - The fill behind a row under the pointer.
+ * @cssproperty --video-playlist-item-meta-color - The color of the content in the `meta` slot.
+ * @cssproperty --video-playlist-item-padding-block - The space above and below a row's content.
+ * @cssproperty --video-playlist-item-padding-inline-end - The space after a row's content.
+ * @cssproperty --video-playlist-item-padding-inline-start - The space before a row's content, where the bar beside the playing entry sits.
+ * @cssproperty --video-playlist-item-radius - The corner radius of a row.
+ * @cssproperty --video-playlist-media-aspect-ratio - The shape of the thumbnail column.
+ * @cssproperty --video-playlist-media-radius - The corner radius of the thumbnail.
  * @cssproperty --video-playlist-media-size - The width of the thumbnail column.
  */
 export declare class HelixVideoPlaylistItem extends HelixHeadlessVideoPlaylistItem {

package/dist/video-playlist/menu/video-playlist-menu.css.js

@@ -1,42 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: flex;
-flex: 0 0 auto;
-}
-
-[part="trigger"] {
---icon-size: var(--video-playlist-menu-size, var(--helix-size-icon-tight));
-all: unset;
-
-align-items: center;
-border-radius: var(--helix-radii-sm);
-box-sizing: border-box;
-color: var(--video-playlist-menu-color, inherit);
-cursor: pointer;
-display: flex;
-flex: 0 0 auto;
-justify-content: center;
-min-block-size: var(--helix-size-icon-loose);
-min-inline-size: var(--helix-size-icon-loose);
-}
-
-[part="trigger"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="entry"] {
---menu-item-start: var(--video-playlist-menu-poster, calc(var(--helix-size-icon-loose) * 2));
-}
-
-[part="entry"]::part(item) {
-padding-block: var(--helix-space-2xs);
-}
-
-[part="poster"] {
-aspect-ratio: 16 / 9;
-border-radius: var(--helix-radii-sm);
-display: block;
-inline-size: 100%;
-object-fit: cover;
-}`);
+export const styles = createSheet(`:host {display: flex;flex: 0 0 auto;}[part="trigger"] {--icon-size: var(--video-playlist-menu-size, var(--helix-size-icon-tight));all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--video-playlist-menu-color, inherit);cursor: pointer;display: flex;flex: 0 0 auto;justify-content: center;min-block-size: var(--helix-size-icon-loose);min-inline-size: var(--helix-size-icon-loose);}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="entry"] {--menu-item-start: var(--video-playlist-menu-poster, calc(var(--helix-size-icon-loose) * 2));}[part="entry"]::part(item) {padding-block: var(--helix-space-2xs);}[part="poster"] {aspect-ratio: 16 / 9;border-radius: var(--helix-radii-sm);display: block;inline-size: 100%;object-fit: cover;}`);

package/dist/video-playlist/root/video-playlist-root.css.js

@@ -1,20 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: grid;
-gap: var(--helix-space-md);
-grid-template-columns: var(--video-playlist-layout, 1fr);
-}
-
-[part="items"] {
-display: flex;
-flex-direction: column;
-gap: var(--helix-space-2xs);
-max-block-size: var(--video-playlist-size, 26rem);
-overflow-y: auto;
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+export const styles = createSheet(`:host {display: grid;gap: var(--video-playlist-gap, var(--helix-space-md));grid-template-columns: var(--video-playlist-layout, 1fr);}[part="items"] {display: flex;flex-direction: column;gap: var(--video-playlist-items-gap, var(--helix-space-2xs));max-block-size: var(--video-playlist-size, 26rem);overflow-y: auto;}@media print {:host {display: none;}}`);

package/dist/video-playlist/root/video-playlist-root.d.ts

@@ -13,6 +13,8 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Playlist, Queue, Up next
  * @documentation https://fusion.dev/helix/components/video-playlist
  *
+ * @cssproperty --video-playlist-gap - The space between the player and the list.
+ * @cssproperty --video-playlist-items-gap - The space between the entries.
  * @cssproperty --video-playlist-layout - The grid columns for the player and the list.
  * @cssproperty --video-playlist-size - The height the list reaches before it scrolls.
  */

package/dist/virtual-list/root/virtual-list-root.css.js

@@ -1,29 +1,6 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-[part="viewport"] {
-block-size: var(--virtual-list-block-size, 20em);
-
-margin-inline: calc(var(--helix-size-focus-reach) * -1);
-overflow-y: auto;
-overscroll-behavior: contain;
-padding-inline: var(--helix-size-focus-reach);
-}
-
-::slotted([data-index]:focus-visible) {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: calc(var(--helix-size-focus-offset) * -1);
-}
-
-[part="after"],
-[part="before"] {
-flex: none;
-}
-
-@media print {
-:host {
-overflow: visible;
-}
-}`);
+export const styles = createSheet(`:host {display: block;}[part="viewport"] {block-size: var(--virtual-list-block-size, 20em);margin-inline: calc(var(--helix-size-focus-reach) * -1);overflow-y: auto;overscroll-behavior: contain;padding-inline: var(--helix-size-focus-reach);scrollbar-color: var(--helix-color-border) transparent;scrollbar-width: thin;}::slotted([data-index]:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}::slotted([aria-selected="true"]) {background-color: var(
+--virtual-list-selected-background-color,
+var(--helix-color-primary-subtle)
+);}[part="loading"] {color: var(--virtual-list-loading-color, var(--helix-color-foreground-muted));font-size: var(--helix-text-sm);padding: var(--virtual-list-loading-padding, var(--helix-space-sm));text-align: center;}[part="after"],
+[part="before"] {flex: none;}@media print {:host {overflow: visible;}}`);