@editora/ui-core 0.1.9 → 0.1.12

package/dist/marquee.esm.js

@@ -0,0 +1,767 @@
+import { E as h } from "./ElementBase-909688f3.mjs";
+const c = "24px", p = "48px", f = 60, b = /* @__PURE__ */ new Set(["none", "sm", "md", "lg", "full"]), g = /* @__PURE__ */ new Set(["direction", "speed", "gap", "size", "padding"]), v = `
+  :host {
+    --ui-marquee-gap: ${c};
+    --ui-marquee-fade-size: ${p};
+    --ui-marquee-duration: 12s;
+    --ui-marquee-distance: 0px;
+    --ui-marquee-padding-inline: 18px;
+    --ui-marquee-padding-block: 12px;
+    --ui-marquee-content-align: center;
+    --ui-marquee-min-block-size: 56px;
+    --ui-marquee-radius: var(--base-marquee-radius, 18px);
+    --ui-marquee-bg: var(--base-marquee-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
+    --ui-marquee-color: var(--ui-color-text, var(--ui-text, #202020));
+    --ui-marquee-border-color:
+      color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 82%, transparent);
+    --ui-marquee-border: 1px solid var(--ui-marquee-border-color);
+    --ui-marquee-shadow:
+      0 1px 2px rgba(15, 23, 42, 0.05),
+      0 16px 30px rgba(15, 23, 42, 0.08);
+    --ui-marquee-backdrop: none;
+    --ui-marquee-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    --ui-marquee-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+
+    --ui-marquee-item-radius: 999px;
+    --ui-marquee-item-padding-inline: 14px;
+    --ui-marquee-item-padding-block: 8px;
+    --ui-marquee-item-gap: 8px;
+    --ui-marquee-item-min-block-size: 36px;
+    --ui-marquee-item-font-size: 13px;
+    --ui-marquee-item-line-height: 1.25;
+    --ui-marquee-item-bg: color-mix(in srgb, var(--ui-marquee-accent) 8%, transparent);
+    --ui-marquee-item-border: 1px solid color-mix(in srgb, var(--ui-marquee-accent) 18%, transparent);
+    --ui-marquee-item-shadow: none;
+    --ui-marquee-item-backdrop: none;
+    --ui-marquee-item-color: inherit;
+
+    display: block;
+    min-inline-size: 0;
+    min-block-size: var(--ui-marquee-min-block-size);
+    box-sizing: border-box;
+    color-scheme: light dark;
+    color: var(--ui-marquee-color);
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .root {
+    position: relative;
+    display: block;
+    min-inline-size: 0;
+    min-block-size: inherit;
+  }
+
+  .viewport {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    min-inline-size: 0;
+    min-block-size: inherit;
+    padding: var(--ui-marquee-padding, var(--ui-marquee-padding-block) var(--ui-marquee-padding-inline));
+    border-radius: var(--ui-marquee-radius);
+    border: var(--ui-marquee-border);
+    background: var(--ui-marquee-bg);
+    color: var(--ui-marquee-color);
+    box-shadow: var(--ui-marquee-shadow);
+    backdrop-filter: var(--ui-marquee-backdrop);
+    box-sizing: border-box;
+    isolation: isolate;
+    transition:
+      background-color 180ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      border-color 180ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      box-shadow 180ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      color 180ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      backdrop-filter 180ms cubic-bezier(0.2, 0.9, 0.24, 1);
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-marquee-gap: 16px;
+    --ui-marquee-padding-inline: 14px;
+    --ui-marquee-padding-block: 10px;
+    --ui-marquee-min-block-size: 48px;
+    --ui-marquee-item-padding-inline: 12px;
+    --ui-marquee-item-padding-block: 7px;
+    --ui-marquee-item-min-block-size: 32px;
+    --ui-marquee-item-font-size: 12px;
+  }
+
+  :host([size="md"]),
+  :host([size="2"]) {
+    --ui-marquee-gap: ${c};
+    --ui-marquee-padding-inline: 18px;
+    --ui-marquee-padding-block: 12px;
+    --ui-marquee-min-block-size: 56px;
+    --ui-marquee-item-padding-inline: 14px;
+    --ui-marquee-item-padding-block: 8px;
+    --ui-marquee-item-min-block-size: 36px;
+    --ui-marquee-item-font-size: 13px;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-marquee-gap: 30px;
+    --ui-marquee-padding-inline: 22px;
+    --ui-marquee-padding-block: 16px;
+    --ui-marquee-min-block-size: 68px;
+    --ui-marquee-item-padding-inline: 18px;
+    --ui-marquee-item-padding-block: 10px;
+    --ui-marquee-item-min-block-size: 42px;
+    --ui-marquee-item-font-size: 14px;
+  }
+
+  :host([tone="neutral"]) {
+    --ui-marquee-accent: #64748b;
+  }
+
+  :host([tone="info"]) {
+    --ui-marquee-accent: #0ea5e9;
+  }
+
+  :host([tone="success"]) {
+    --ui-marquee-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-marquee-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-marquee-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([variant="soft"]) {
+    --ui-marquee-bg:
+      color-mix(in srgb, var(--ui-marquee-accent) 7%, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
+    --ui-marquee-border-color:
+      color-mix(in srgb, var(--ui-marquee-accent) 18%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    --ui-marquee-shadow: none;
+    --ui-marquee-item-bg: color-mix(in srgb, var(--ui-marquee-accent) 12%, transparent);
+    --ui-marquee-item-border: 1px solid color-mix(in srgb, var(--ui-marquee-accent) 22%, transparent);
+  }
+
+  :host([variant="solid"]) {
+    --ui-marquee-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-marquee-accent) 12%, var(--color-panel-solid, var(--ui-color-surface, #ffffff))),
+        color-mix(in srgb, var(--ui-marquee-accent) 6%, var(--color-panel-solid, var(--ui-color-surface, #ffffff)))
+      );
+    --ui-marquee-border-color:
+      color-mix(in srgb, var(--ui-marquee-accent) 24%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    --ui-marquee-shadow:
+      0 1px 3px rgba(15, 23, 42, 0.06),
+      0 18px 36px color-mix(in srgb, var(--ui-marquee-accent) 10%, rgba(15, 23, 42, 0.08));
+    --ui-marquee-item-bg:
+      color-mix(in srgb, var(--ui-marquee-accent) 16%, rgba(255, 255, 255, 0.72));
+    --ui-marquee-item-border:
+      1px solid color-mix(in srgb, var(--ui-marquee-accent) 28%, transparent);
+    --ui-marquee-item-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
+  }
+
+  :host([variant="glass"]) {
+    --ui-marquee-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--color-panel-solid, var(--ui-color-surface, #ffffff)) 82%, #ffffff 18%),
+        color-mix(in srgb, var(--color-panel-solid, var(--ui-color-surface, #ffffff)) 92%, transparent)
+      );
+    --ui-marquee-border-color:
+      color-mix(in srgb, #ffffff 28%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    --ui-marquee-shadow:
+      0 1px 3px rgba(15, 23, 42, 0.08),
+      0 24px 48px rgba(15, 23, 42, 0.12);
+    --ui-marquee-backdrop: blur(16px) saturate(1.08);
+    --ui-marquee-item-bg: color-mix(in srgb, #ffffff 42%, transparent);
+    --ui-marquee-item-border: 1px solid color-mix(in srgb, #ffffff 36%, transparent);
+    --ui-marquee-item-backdrop: blur(10px) saturate(1.05);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-marquee-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, #07162d 92%, var(--ui-marquee-accent) 8%),
+        color-mix(in srgb, #0f2d57 84%, var(--ui-marquee-accent) 16%)
+      );
+    --ui-marquee-color: #f8fbff;
+    --ui-marquee-border-color: color-mix(in srgb, #9ec5ff 18%, transparent);
+    --ui-marquee-shadow: 0 28px 56px rgba(2, 6, 23, 0.32);
+    --ui-marquee-item-bg: color-mix(in srgb, #ffffff 10%, transparent);
+    --ui-marquee-item-border: 1px solid color-mix(in srgb, #ffffff 14%, transparent);
+    --ui-marquee-item-color: #f8fbff;
+  }
+
+  :host([variant="minimal"]) {
+    --ui-marquee-bg: transparent;
+    --ui-marquee-border: none;
+    --ui-marquee-shadow: none;
+    --ui-marquee-item-bg: color-mix(in srgb, var(--ui-marquee-accent) 8%, transparent);
+    --ui-marquee-item-border: 1px solid color-mix(in srgb, var(--ui-marquee-accent) 18%, transparent);
+  }
+
+  :host([radius="none"]) {
+    --ui-marquee-radius: 0px;
+    --ui-marquee-item-radius: 0px;
+  }
+
+  :host([radius="sm"]) {
+    --ui-marquee-radius: 10px;
+    --ui-marquee-item-radius: 12px;
+  }
+
+  :host([radius="md"]) {
+    --ui-marquee-radius: 16px;
+    --ui-marquee-item-radius: 16px;
+  }
+
+  :host([radius="lg"]) {
+    --ui-marquee-radius: 22px;
+    --ui-marquee-item-radius: 18px;
+  }
+
+  :host([radius="full"]) {
+    --ui-marquee-radius: 999px;
+    --ui-marquee-item-radius: 999px;
+  }
+
+  :host([elevation="none"]) {
+    --ui-marquee-shadow: none;
+  }
+
+  :host([elevation="low"]) {
+    --ui-marquee-shadow:
+      0 1px 2px rgba(15, 23, 42, 0.05),
+      0 16px 30px rgba(15, 23, 42, 0.08);
+  }
+
+  :host([elevation="high"]) {
+    --ui-marquee-shadow:
+      0 2px 8px rgba(15, 23, 42, 0.08),
+      0 28px 54px rgba(15, 23, 42, 0.16);
+  }
+
+  .track {
+    display: flex;
+    align-items: var(--ui-marquee-content-align);
+    gap: var(--ui-marquee-gap);
+    inline-size: max-content;
+    min-inline-size: 100%;
+    will-change: transform;
+    animation-duration: var(--ui-marquee-duration);
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-play-state: paused;
+  }
+
+  .lane,
+  .source,
+  .clone-content {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: var(--ui-marquee-content-align);
+    gap: var(--ui-marquee-gap);
+    min-inline-size: max-content;
+  }
+
+  .lane {
+    min-block-size: 100%;
+  }
+
+  .lane--clone {
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .lane--clone,
+  .lane--clone * {
+    pointer-events: none !important;
+  }
+
+  .source slot {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: var(--ui-marquee-content-align);
+    gap: var(--ui-marquee-gap);
+    min-inline-size: max-content;
+  }
+
+  .source slot::slotted(*) {
+    flex: 0 0 auto;
+    color: inherit;
+  }
+
+  .source slot::slotted(img),
+  .source slot::slotted(video),
+  .source slot::slotted(canvas),
+  .source slot::slotted(svg) {
+    display: block;
+    max-inline-size: none;
+  }
+
+  .source slot::slotted([data-ui-marquee-item]) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: 0;
+    min-block-size: var(--ui-marquee-item-min-block-size);
+    gap: var(--ui-marquee-item-gap);
+    padding: var(--ui-marquee-item-padding-block) var(--ui-marquee-item-padding-inline);
+    border-radius: var(--ui-marquee-item-radius);
+    border: var(--ui-marquee-item-border);
+    background: var(--ui-marquee-item-bg);
+    color: var(--ui-marquee-item-color);
+    box-shadow: var(--ui-marquee-item-shadow);
+    backdrop-filter: var(--ui-marquee-item-backdrop);
+    box-sizing: border-box;
+    font-size: var(--ui-marquee-item-font-size);
+    line-height: var(--ui-marquee-item-line-height);
+    white-space: nowrap;
+  }
+
+  .clone-content [data-ui-marquee-item] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: 0;
+    min-block-size: var(--ui-marquee-item-min-block-size);
+    gap: var(--ui-marquee-item-gap);
+    padding: var(--ui-marquee-item-padding-block) var(--ui-marquee-item-padding-inline);
+    border-radius: var(--ui-marquee-item-radius);
+    border: var(--ui-marquee-item-border);
+    background: var(--ui-marquee-item-bg);
+    color: var(--ui-marquee-item-color);
+    box-shadow: var(--ui-marquee-item-shadow);
+    backdrop-filter: var(--ui-marquee-item-backdrop);
+    box-sizing: border-box;
+    font-size: var(--ui-marquee-item-font-size);
+    line-height: var(--ui-marquee-item-line-height);
+    white-space: nowrap;
+  }
+
+  .clone-content img,
+  .clone-content video,
+  .clone-content canvas,
+  .clone-content svg {
+    display: block;
+    max-inline-size: none;
+  }
+
+  :host([direction="up"]) .track,
+  :host([direction="down"]) .track {
+    flex-direction: column;
+    align-items: stretch;
+    min-inline-size: 0;
+    min-block-size: 100%;
+  }
+
+  :host([direction="up"]) .lane,
+  :host([direction="up"]) .source,
+  :host([direction="up"]) .clone-content,
+  :host([direction="down"]) .lane,
+  :host([direction="down"]) .source,
+  :host([direction="down"]) .clone-content {
+    display: grid;
+    min-inline-size: 100%;
+    min-block-size: max-content;
+    justify-items: stretch;
+    align-items: stretch;
+  }
+
+  :host([direction="up"]) .source slot,
+  :host([direction="down"]) .source slot {
+    display: grid;
+    min-inline-size: 100%;
+    min-block-size: max-content;
+  }
+
+  :host([data-state="running"]) .track {
+    animation-play-state: running;
+  }
+
+  :host(:focus-visible) {
+    outline: none;
+  }
+
+  :host([pause-on-hover]:hover) .track,
+  :host([pause-on-focus]:focus-within) .track,
+  :host([paused]) .track {
+    animation-play-state: paused;
+  }
+
+  :host([pause-on-focus]:focus-within) .viewport {
+    border-color: color-mix(in srgb, var(--ui-marquee-accent) 24%, var(--ui-marquee-border-color));
+    box-shadow:
+      0 0 0 3px color-mix(in srgb, var(--ui-marquee-focus-ring) 22%, transparent),
+      var(--ui-marquee-shadow);
+  }
+
+  :host(:not([direction])) .track,
+  :host([direction="left"]) .track {
+    animation-name: ui-marquee-scroll-left;
+  }
+
+  :host([direction="right"]) .track {
+    animation-name: ui-marquee-scroll-right;
+  }
+
+  :host([direction="up"]) .track {
+    animation-name: ui-marquee-scroll-up;
+  }
+
+  :host([direction="down"]) .track {
+    animation-name: ui-marquee-scroll-down;
+  }
+
+  :host([fade]) .viewport {
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+  }
+
+  :host([fade][direction="left"]) .viewport,
+  :host([fade][direction="right"]) .viewport {
+    -webkit-mask-image:
+      linear-gradient(
+        90deg,
+        transparent 0,
+        #000 min(12%, var(--ui-marquee-fade-size)),
+        #000 calc(100% - min(12%, var(--ui-marquee-fade-size))),
+        transparent 100%
+      );
+    mask-image:
+      linear-gradient(
+        90deg,
+        transparent 0,
+        #000 min(12%, var(--ui-marquee-fade-size)),
+        #000 calc(100% - min(12%, var(--ui-marquee-fade-size))),
+        transparent 100%
+      );
+  }
+
+  :host([fade][direction="up"]) .viewport,
+  :host([fade][direction="down"]) .viewport {
+    -webkit-mask-image:
+      linear-gradient(
+        180deg,
+        transparent 0,
+        #000 min(12%, var(--ui-marquee-fade-size)),
+        #000 calc(100% - min(12%, var(--ui-marquee-fade-size))),
+        transparent 100%
+      );
+    mask-image:
+      linear-gradient(
+        180deg,
+        transparent 0,
+        #000 min(12%, var(--ui-marquee-fade-size)),
+        #000 calc(100% - min(12%, var(--ui-marquee-fade-size))),
+        transparent 100%
+      );
+  }
+
+  @keyframes ui-marquee-scroll-left {
+    from { transform: translate3d(0, 0, 0); }
+    to { transform: translate3d(calc(var(--ui-marquee-distance) * -1), 0, 0); }
+  }
+
+  @keyframes ui-marquee-scroll-right {
+    from { transform: translate3d(calc(var(--ui-marquee-distance) * -1), 0, 0); }
+    to { transform: translate3d(0, 0, 0); }
+  }
+
+  @keyframes ui-marquee-scroll-up {
+    from { transform: translate3d(0, 0, 0); }
+    to { transform: translate3d(0, calc(var(--ui-marquee-distance) * -1), 0); }
+  }
+
+  @keyframes ui-marquee-scroll-down {
+    from { transform: translate3d(0, calc(var(--ui-marquee-distance) * -1), 0); }
+    to { transform: translate3d(0, 0, 0); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .track {
+      animation: none !important;
+      transform: none !important;
+    }
+
+    .lane--clone {
+      display: none !important;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host([fade]) .viewport {
+      -webkit-mask-image: none !important;
+      mask-image: none !important;
+    }
+  }
+`;
+function q(i) {
+  return i === "right" || i === "up" || i === "down" ? i : "left";
+}
+function _(i, e) {
+  if (i == null || i === "")
+    return e;
+  const r = Number(i);
+  return Number.isFinite(r) && r > 0 ? r : e;
+}
+function l(i) {
+  if (i == null || i.trim() === "")
+    return null;
+  const e = i.trim();
+  return /^-?\d+(\.\d+)?$/.test(e) ? `${e}px` : e;
+}
+function x(i) {
+  return !!(i && b.has(i.trim().toLowerCase()));
+}
+function y(i) {
+  var e;
+  return i.nodeType === Node.TEXT_NODE ? !!((e = i.textContent) != null && e.trim()) : i.nodeType === Node.ELEMENT_NODE;
+}
+function m(i) {
+  if (i.tabIndex = -1, "inert" in i)
+    try {
+      i.inert = !0;
+    } catch {
+    }
+  if ("disabled" in i)
+    try {
+      i.disabled = !0;
+    } catch {
+    }
+  i.setAttribute("aria-hidden", "true"), i.removeAttribute("autofocus");
+}
+function z(i) {
+  if (i.nodeType !== Node.ELEMENT_NODE)
+    return;
+  const e = i;
+  if (e.removeAttribute("id"), e.removeAttribute("slot"), e.setAttribute("data-marquee-clone", ""), m(e), e instanceof HTMLAnchorElement && e.removeAttribute("href"), e instanceof HTMLMediaElement) {
+    e.muted = !0, e.controls = !1, e.autoplay = !1, e.loop = !0;
+    try {
+      e.pause();
+    } catch {
+    }
+  }
+  e.querySelectorAll("*").forEach((t) => {
+    if (t.removeAttribute("id"), t.removeAttribute("slot"), t.setAttribute("data-marquee-clone", ""), m(t), t instanceof HTMLAnchorElement && t.removeAttribute("href"), t instanceof HTMLMediaElement) {
+      t.muted = !0, t.controls = !1, t.autoplay = !1, t.loop = !0;
+      try {
+        t.pause();
+      } catch {
+      }
+    }
+  });
+}
+function k(i) {
+  if (i.nodeType === Node.TEXT_NODE)
+    return document.createTextNode(i.textContent || "");
+  if (i.nodeType !== Node.ELEMENT_NODE)
+    return null;
+  const e = i.cloneNode(!0);
+  return z(e), e;
+}
+class E extends h {
+  constructor() {
+    super(), this._slotEl = null, this._viewportEl = null, this._sourceEl = null, this._trackEl = null, this._cloneRootEl = null, this._resizeObserver = null, this._lightDomObserver = null, this._mediaQuery = null, this._measureFrame = null, this._cloneCount = 0, this._onSlotChange = this._onSlotChange.bind(this), this._onContentMutation = this._onContentMutation.bind(this), this._onResize = this._onResize.bind(this), this._onReducedMotionChange = this._onReducedMotionChange.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "direction",
+      "speed",
+      "gap",
+      "fade",
+      "fade-size",
+      "paused",
+      "pause-on-hover",
+      "pause-on-focus",
+      "variant",
+      "tone",
+      "size",
+      "radius",
+      "elevation",
+      "padding"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._observeLightDom(), this._bindReducedMotion(), this._syncHostStyles();
+  }
+  disconnectedCallback() {
+    if (this._slotEl && (this._slotEl.removeEventListener("slotchange", this._onSlotChange), this._slotEl = null), this._resizeObserver && (this._resizeObserver.disconnect(), this._resizeObserver = null), this._lightDomObserver && (this._lightDomObserver.disconnect(), this._lightDomObserver = null), this._mediaQuery) {
+      try {
+        this._mediaQuery.removeEventListener("change", this._onReducedMotionChange);
+      } catch {
+        this._mediaQuery.removeListener(this._onReducedMotionChange);
+      }
+      this._mediaQuery = null;
+    }
+    this._measureFrame != null && (this._cancelFrame(this._measureFrame), this._measureFrame = null), super.disconnectedCallback();
+  }
+  play() {
+    this.removeAttribute("paused"), this._syncPlaybackState();
+  }
+  pause() {
+    this.setAttribute("paused", ""), this._syncPlaybackState();
+  }
+  refresh() {
+    this._scheduleMeasurement(!0);
+  }
+  attributeChangedCallback(e, r, t) {
+    if (!(r === t || !e || !this.isConnected)) {
+      if ((e === "gap" || e === "fade-size" || e === "radius" || e === "padding") && this._syncHostStyles(), e === "paused") {
+        this._syncPlaybackState();
+        return;
+      }
+      g.has(e) && this._scheduleMeasurement(e !== "speed");
+    }
+  }
+  shouldRenderOnAttributeChange() {
+    return !1;
+  }
+  render() {
+    this.setContent(`
+      <style>${v}</style>
+      <div class="root" part="root">
+        <div class="viewport" part="viewport">
+          <div class="track" part="track">
+            <div class="lane lane--source" part="lane lane-source">
+              <div class="source" part="source">
+                <slot></slot>
+              </div>
+            </div>
+            <div class="clone-root" part="clones"></div>
+          </div>
+        </div>
+      </div>
+    `), this._bindElements(), this._syncHostStyles(), this._scheduleMeasurement();
+  }
+  _bindElements() {
+    const e = this.root.querySelector("slot");
+    e && e !== this._slotEl && (this._slotEl && this._slotEl.removeEventListener("slotchange", this._onSlotChange), e.addEventListener("slotchange", this._onSlotChange), this._slotEl = e), this._viewportEl = this.root.querySelector(".viewport"), this._sourceEl = this.root.querySelector(".source"), this._trackEl = this.root.querySelector(".track"), this._cloneRootEl = this.root.querySelector(".clone-root"), this._ensureResizeObserver();
+  }
+  _observeLightDom() {
+    this._lightDomObserver || typeof MutationObserver > "u" || (this._lightDomObserver = new MutationObserver(this._onContentMutation), this._lightDomObserver.observe(this, {
+      childList: !0,
+      subtree: !0,
+      characterData: !0,
+      attributes: !0
+    }));
+  }
+  _bindReducedMotion() {
+    if (!(this._mediaQuery || typeof window > "u" || typeof window.matchMedia != "function")) {
+      this._mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+      try {
+        this._mediaQuery.addEventListener("change", this._onReducedMotionChange);
+      } catch {
+        this._mediaQuery.addListener(this._onReducedMotionChange);
+      }
+      this._syncPlaybackState();
+    }
+  }
+  _ensureResizeObserver() {
+    var r;
+    if (!this.isConnected || typeof ResizeObserver > "u")
+      return;
+    this._resizeObserver || (this._resizeObserver = new ResizeObserver(this._onResize)), this._resizeObserver.disconnect(), this._viewportEl && this._resizeObserver.observe(this._viewportEl), this._sourceEl && this._resizeObserver.observe(this._sourceEl), this._resizeObserver.observe(this), (((r = this._slotEl) == null ? void 0 : r.assignedElements({ flatten: !0 })) || []).forEach((t) => {
+      var a;
+      return (a = this._resizeObserver) == null ? void 0 : a.observe(t);
+    });
+  }
+  _onSlotChange() {
+    this._ensureResizeObserver(), this._scheduleMeasurement(!0);
+  }
+  _onContentMutation() {
+    this._ensureResizeObserver(), this._scheduleMeasurement(!0);
+  }
+  _onResize() {
+    this._scheduleMeasurement();
+  }
+  _onReducedMotionChange() {
+    this._syncPlaybackState();
+  }
+  _scheduleMeasurement(e = !1) {
+    this.isConnected && (this._measureFrame != null && (this._cancelFrame(this._measureFrame), this._measureFrame = null), this._measureFrame = this._requestFrame(() => {
+      this._measureFrame = null, this._syncLayout(e);
+    }));
+  }
+  _syncLayout(e = !1) {
+    if (!this._viewportEl || !this._sourceEl || !this._cloneRootEl)
+      return;
+    const r = q(this.getAttribute("direction"));
+    this.hasAttribute("direction") || this.setAttribute("direction", r);
+    const t = this._measureCssLength(this.style.getPropertyValue("--ui-marquee-gap") || c), a = _(this.getAttribute("speed"), f), n = this._measureSourceSize(r), o = this._measureViewportSize(r);
+    if (n <= 0 || o <= 0) {
+      this._cloneRootEl.innerHTML = "", this._cloneCount = 0, this._setRuntimeState("idle"), this.style.setProperty("--ui-marquee-distance", "0px"), this.style.setProperty("--ui-marquee-duration", "0s");
+      return;
+    }
+    const s = Math.max(n + t, n), u = Math.max(1, Math.ceil((o + t) / Math.max(s, 1)) + 1);
+    (e || u !== this._cloneCount || !this._cloneRootEl.childElementCount) && this._syncClones(u);
+    const d = Math.max(s / a, 0.1);
+    this.style.setProperty("--ui-marquee-distance", `${s}px`), this.style.setProperty("--ui-marquee-duration", `${d}s`), this._setRuntimeState(this._isMotionPaused() ? "paused" : "running");
+  }
+  _syncClones(e) {
+    var t;
+    if (!this._cloneRootEl)
+      return;
+    this._cloneRootEl.innerHTML = "", this._cloneCount = e;
+    const r = ((t = this._slotEl) == null ? void 0 : t.assignedNodes({ flatten: !0 }).filter(y)) || [];
+    for (let a = 0; a < e; a += 1) {
+      const n = document.createElement("div");
+      n.className = "lane lane--clone", n.setAttribute("part", "lane lane-clone"), n.setAttribute("aria-hidden", "true");
+      const o = document.createElement("div");
+      o.className = "clone-content", o.setAttribute("part", "clone-content"), r.forEach((s) => {
+        const u = k(s);
+        u && o.appendChild(u);
+      }), n.appendChild(o), this._cloneRootEl.appendChild(n);
+    }
+  }
+  _syncHostStyles() {
+    const e = l(this.getAttribute("gap")), r = l(this.getAttribute("fade-size")), t = l(this.getAttribute("padding")), a = l(this.getAttribute("radius"));
+    e ? this.style.setProperty("--ui-marquee-gap", e) : this.style.removeProperty("--ui-marquee-gap"), r ? this.style.setProperty("--ui-marquee-fade-size", r) : this.style.removeProperty("--ui-marquee-fade-size"), t ? this.style.setProperty("--ui-marquee-padding", t) : this.style.removeProperty("--ui-marquee-padding"), a && !x(this.getAttribute("radius")) ? this.style.setProperty("--ui-marquee-radius", a) : this.style.removeProperty("--ui-marquee-radius"), this._syncPlaybackState();
+  }
+  _syncPlaybackState() {
+    this._trackEl && this._setRuntimeState(this._isMotionPaused() ? "paused" : "running");
+  }
+  _setRuntimeState(e) {
+    this.getAttribute("data-state") !== e && this.setAttribute("data-state", e);
+  }
+  _isMotionPaused() {
+    var e;
+    return this.hasAttribute("paused") ? !0 : !!((e = this._mediaQuery) != null && e.matches);
+  }
+  _measureViewportSize(e) {
+    return this._viewportEl ? e === "up" || e === "down" ? this._viewportEl.clientHeight || this._viewportEl.getBoundingClientRect().height || 0 : this._viewportEl.clientWidth || this._viewportEl.getBoundingClientRect().width || 0 : 0;
+  }
+  _measureSourceSize(e) {
+    if (!this._sourceEl)
+      return 0;
+    const r = this._sourceEl.getBoundingClientRect();
+    return e === "up" || e === "down" ? Math.max(this._sourceEl.scrollHeight, this._sourceEl.offsetHeight, r.height || 0) : Math.max(this._sourceEl.scrollWidth, this._sourceEl.offsetWidth, r.width || 0);
+  }
+  _measureCssLength(e) {
+    const r = e.trim();
+    if (!r)
+      return 0;
+    if (/^-?\d+(\.\d+)?px$/.test(r) || /^-?\d+(\.\d+)?$/.test(r))
+      return parseFloat(r);
+    const t = document.createElement("div");
+    t.style.position = "absolute", t.style.visibility = "hidden", t.style.pointerEvents = "none", t.style.inlineSize = r, this.appendChild(t);
+    const a = parseFloat(getComputedStyle(t).inlineSize || getComputedStyle(t).width || "0");
+    return t.remove(), Number.isFinite(a) ? a : 0;
+  }
+  _requestFrame(e) {
+    return typeof requestAnimationFrame == "function" ? requestAnimationFrame(e) : window.setTimeout(() => e(performance.now()), 16);
+  }
+  _cancelFrame(e) {
+    if (typeof cancelAnimationFrame == "function") {
+      cancelAnimationFrame(e);
+      return;
+    }
+    window.clearTimeout(e);
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-marquee") && customElements.define("ui-marquee", E);
+export {
+  E as UIMarquee
+};