@editora/ui-core 0.1.8 → 0.1.10

package/dist/marquee.cjs.js

@@ -0,0 +1,513 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("./ElementBase-1b301e7f.js"),c="24px",f="48px",b=60,g=new Set(["none","sm","md","lg","full"]),v=new Set(["direction","speed","gap","size","padding"]),q=`
+  :host {
+    --ui-marquee-gap: ${c};
+    --ui-marquee-fade-size: ${f};
+    --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 _(i){return i==="right"||i==="up"||i==="down"?i:"left"}function x(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 y(i){return!!(i&&g.has(i.trim().toLowerCase()))}function z(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 k(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 E(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 k(e),e}class d extends p.ElementBase{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}v.has(e)&&this._scheduleMeasurement(e!=="speed")}}shouldRenderOnAttributeChange(){return!1}render(){this.setContent(`
+      <style>${q}</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=_(this.getAttribute("direction"));this.hasAttribute("direction")||this.setAttribute("direction",r);const t=this._measureCssLength(this.style.getPropertyValue("--ui-marquee-gap")||c),a=x(this.getAttribute("speed"),b),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 h=Math.max(s/a,.1);this.style.setProperty("--ui-marquee-distance",`${s}px`),this.style.setProperty("--ui-marquee-duration",`${h}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(z))||[];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=E(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&&!y(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",d);exports.UIMarquee=d;