@fusion.dev/helix 0.182.1 → 0.183.0

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

@@ -1,29 +1,2 @@
 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,
-[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(
-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(
-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(
---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(
-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;}}`);
+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(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(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(--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(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}}`);

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

@@ -1,9 +1,4 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessVideo } from '@fusion.dev/helix-headless/video';
 import { property } from 'lit/decorators.js';

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

@@ -1,16 +1,2 @@
 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(--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: 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;}:host(:state(dragging)) {opacity: 0.5;}:host(:state(drop-before)),
-:host(:state(drop-after)) {position: relative;}:host(:state(drop-before))::before,
-:host(:state(drop-after))::before {background-color: var(--helix-color-primary);block-size: var(--helix-border-thick);content: "";inset-inline: 0;pointer-events: none;position: absolute;z-index: 1;}:host(:state(drop-before))::before {inset-block-start: 0;}:host(:state(drop-after))::before {inset-block-end: 0;}[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);}`);
+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: 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}:host(:state(dragging)) {opacity: 0.5}:host(:state(drop-before)), :host(:state(drop-after)) {position: relative}:host(:state(drop-before))::before, :host(:state(drop-after))::before {background-color: var(--helix-color-primary);block-size: var(--helix-border-thick);content: "";inset-inline: 0;pointer-events: none;position: absolute;z-index: 1}:host(:state(drop-before))::before {inset-block-start: 0}:host(:state(drop-after))::before {inset-block-end: 0}[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.js

@@ -1,9 +1,4 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessVideoPlaylistItem } from '@fusion.dev/helix-headless/video-playlist';
 import { styles } from './video-playlist-item.css.js';

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

@@ -1,2 +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/menu/video-playlist-menu.js

@@ -1,9 +1,4 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessVideoPlaylistMenu } from '@fusion.dev/helix-headless/video-playlist';
 import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-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;}[part="empty"] {color: var(--video-playlist-empty-color, var(--helix-color-foreground-muted));font-size: var(--helix-text-sm);padding: var(--video-playlist-empty-padding, var(--helix-space-md));text-align: center;}@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}[part="empty"] {color: var(--video-playlist-empty-color, var(--helix-color-foreground-muted));font-size: var(--helix-text-sm);padding: var(--video-playlist-empty-padding, var(--helix-space-md));text-align: center}@media print {:host {display: none}}`);

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

@@ -1,9 +1,4 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessVideoPlaylist } from '@fusion.dev/helix-headless/video-playlist';
 import { styles as liveStyles } from '../../shared/live/live.css.js';

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

@@ -1,12 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`::slotted([data-index]) {cursor: grab;user-select: none;}::slotted([data-dragging]) {opacity: var(--virtual-list-dragging-opacity, 0.5);}::slotted([data-drop-before]) {box-shadow: inset 0 var(--virtual-list-drop-indicator-size, var(--helix-border-thick)) 0 0
-var(--virtual-list-drop-indicator-color, var(--helix-color-primary));}::slotted([data-drop-after]) {box-shadow: inset 0 calc(-1 * var(--virtual-list-drop-indicator-size, var(--helix-border-thick)))
-0 0 var(--virtual-list-drop-indicator-color, var(--helix-color-primary));}:host(:state(horizontal)) ::slotted([data-drop-before]) {box-shadow: inset var(--virtual-list-drop-indicator-size, var(--helix-border-thick)) 0 0 0
-var(--virtual-list-drop-indicator-color, var(--helix-color-primary));}:host(:state(horizontal)) ::slotted([data-drop-after]) {box-shadow: inset calc(-1 * var(--virtual-list-drop-indicator-size, var(--helix-border-thick))) 0
-0 0 var(--virtual-list-drop-indicator-color, var(--helix-color-primary));}:host(:state(horizontal):dir(rtl)) ::slotted([data-drop-before]) {box-shadow: inset calc(-1 * var(--virtual-list-drop-indicator-size, var(--helix-border-thick))) 0
-0 0 var(--virtual-list-drop-indicator-color, var(--helix-color-primary));}:host(:state(horizontal):dir(rtl)) ::slotted([data-drop-after]) {box-shadow: inset var(--virtual-list-drop-indicator-size, var(--helix-border-thick)) 0 0 0
-var(--virtual-list-drop-indicator-color, var(--helix-color-primary));}[popover] {background-color: var(
---virtual-list-drag-preview-background-color,
-var(--helix-color-surface-raised)
-);border: var(--virtual-list-drag-preview-border-width, var(--helix-border-floating)) solid
-var(--virtual-list-drag-preview-border-color, var(--helix-color-border));border-radius: var(--virtual-list-drag-preview-radius, var(--helix-radii-sm));box-shadow: var(--virtual-list-drag-preview-shadow, var(--helix-shadow-floating));opacity: var(--virtual-list-drag-preview-opacity, 0.9);}[data-reorder-live] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;overflow: hidden;position: absolute;white-space: nowrap;}`);
+export const styles = createSheet(`::slotted([data-index]) {cursor: grab;user-select: none}::slotted([data-dragging]) {opacity: var(--virtual-list-dragging-opacity, 0.5)}::slotted([data-drop-before]) {box-shadow: inset 0 var(--virtual-list-drop-indicator-size, var(--helix-border-thick)) 0 0 var(--virtual-list-drop-indicator-color, var(--helix-color-primary))}::slotted([data-drop-after]) {box-shadow: inset 0 calc(-1 * var(--virtual-list-drop-indicator-size, var(--helix-border-thick))) 0 0 var(--virtual-list-drop-indicator-color, var(--helix-color-primary))}:host(:state(horizontal)) ::slotted([data-drop-before]) {box-shadow: inset var(--virtual-list-drop-indicator-size, var(--helix-border-thick)) 0 0 0 var(--virtual-list-drop-indicator-color, var(--helix-color-primary))}:host(:state(horizontal)) ::slotted([data-drop-after]) {box-shadow: inset calc(-1 * var(--virtual-list-drop-indicator-size, var(--helix-border-thick))) 0 0 0 var(--virtual-list-drop-indicator-color, var(--helix-color-primary))}:host(:state(horizontal):dir(rtl)) ::slotted([data-drop-before]) {box-shadow: inset calc(-1 * var(--virtual-list-drop-indicator-size, var(--helix-border-thick))) 0 0 0 var(--virtual-list-drop-indicator-color, var(--helix-color-primary))}:host(:state(horizontal):dir(rtl)) ::slotted([data-drop-after]) {box-shadow: inset var(--virtual-list-drop-indicator-size, var(--helix-border-thick)) 0 0 0 var(--virtual-list-drop-indicator-color, var(--helix-color-primary))}[popover] {background-color: var(--virtual-list-drag-preview-background-color, var(--helix-color-surface-raised));border: var(--virtual-list-drag-preview-border-width, var(--helix-border-floating)) solid var(--virtual-list-drag-preview-border-color, var(--helix-color-border));border-radius: var(--virtual-list-drag-preview-radius, var(--helix-radii-sm));box-shadow: var(--virtual-list-drag-preview-shadow, var(--helix-shadow-floating));opacity: var(--virtual-list-drag-preview-opacity, 0.9)}[data-reorder-live] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;overflow: hidden;position: absolute;white-space: nowrap}`);

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

@@ -1,11 +1,2 @@
 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);scrollbar-color: var(--virtual-list-scrollbar-thumb-color, var(--helix-scrollbar-thumb-color))
-var(--virtual-list-scrollbar-track-color, var(--helix-scrollbar-track-color));scrollbar-width: thin;}:host(:state(horizontal)) [part="viewport"] {block-size: var(--virtual-list-block-size, auto);margin-block: calc(var(--helix-size-focus-reach) * -1);margin-inline: 0;overflow-x: auto;overflow-y: hidden;padding-block: var(--helix-size-focus-reach);padding-inline: 0;}[part="viewport"]:hover {scrollbar-color: var(
---virtual-list-scrollbar-thumb-hover-color,
-var(--helix-scrollbar-thumb-hover-color)
-)
-var(--virtual-list-scrollbar-track-color, var(--helix-scrollbar-track-color));}::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)
-);color: var(--virtual-list-selected-color, inherit);}::slotted([aria-disabled="true"]) {cursor: not-allowed;opacity: var(--virtual-list-disabled-opacity, 0.5);}[part="empty"] {color: var(--virtual-list-empty-color, var(--helix-color-foreground-muted));font-size: var(--helix-text-sm);padding: var(--virtual-list-empty-padding, var(--helix-space-md));text-align: center;}[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;}}`);
+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(--virtual-list-scrollbar-thumb-color, var(--helix-scrollbar-thumb-color)) var(--virtual-list-scrollbar-track-color, var(--helix-scrollbar-track-color));scrollbar-width: thin}:host(:state(horizontal)) [part="viewport"] {block-size: var(--virtual-list-block-size, auto);margin-block: calc(var(--helix-size-focus-reach) * -1);margin-inline: 0;overflow-x: auto;overflow-y: hidden;padding-block: var(--helix-size-focus-reach);padding-inline: 0}[part="viewport"]:hover {scrollbar-color: var(--virtual-list-scrollbar-thumb-hover-color, var(--helix-scrollbar-thumb-hover-color)) var(--virtual-list-scrollbar-track-color, var(--helix-scrollbar-track-color))}::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));color: var(--virtual-list-selected-color, inherit)}::slotted([aria-disabled="true"]) {cursor: not-allowed;opacity: var(--virtual-list-disabled-opacity, 0.5)}[part="empty"] {color: var(--virtual-list-empty-color, var(--helix-color-foreground-muted));font-size: var(--helix-text-sm);padding: var(--virtual-list-empty-padding, var(--helix-space-md));text-align: center}[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}}`);

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

@@ -1,9 +1,4 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessVirtualList } from '@fusion.dev/helix-headless/virtual-list';
 import { styles } from './virtual-list-root.css.js';