@editora/ui-core 0.1.9 → 0.1.12

package/dist/animated-text.esm.js

@@ -0,0 +1,1020 @@
+import { E as w } from "./ElementBase-909688f3.mjs";
+const k = "720ms", T = "55ms", A = "0ms", x = 1400, M = /* @__PURE__ */ new Set([
+  "fade-up",
+  "fade-down",
+  "slide-left",
+  "slide-right",
+  "blur",
+  "blur-up",
+  "pop",
+  "wave",
+  "zoom-in",
+  "rotate-in",
+  "flip-up",
+  "skew-in",
+  "glow",
+  "typewriter"
+]), S = /* @__PURE__ */ new Set(["chars", "words", "lines"]), z = /* @__PURE__ */ new Set(["load", "visible", "manual"]), C = /* @__PURE__ */ new Set(["none", "sm", "md", "lg", "full"]), R = `
+  :host {
+    --ui-animated-text-duration: ${k};
+    --ui-animated-text-stagger: ${T};
+    --ui-animated-text-delay: ${A};
+    --ui-animated-text-gap-inline: 0;
+    --ui-animated-text-gap-block: 0.18em;
+    --ui-animated-text-padding-inline: 0px;
+    --ui-animated-text-padding-block: 0px;
+    --ui-animated-text-radius: var(--base-animated-text-radius, 22px);
+    --ui-animated-text-bg: transparent;
+    --ui-animated-text-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-animated-text-border: 1px solid transparent;
+    --ui-animated-text-shadow: none;
+    --ui-animated-text-backdrop: none;
+    --ui-animated-text-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    --ui-animated-text-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+    --ui-animated-text-font-size: 1.375rem;
+    --ui-animated-text-line-height: 1.08;
+    --ui-animated-text-letter-spacing: -0.03em;
+    --ui-animated-text-font-weight: 700;
+    --ui-animated-text-align: start;
+    --ui-animated-text-max-inline-size: 100%;
+    --ui-animated-text-ease: cubic-bezier(0.2, 0.9, 0.24, 1);
+    --ui-animated-text-caret-color: currentColor;
+    --ui-animated-text-safe-inline-end: 0.08em;
+    --ui-animated-text-safe-block-end: 0.12em;
+    display: block;
+    min-inline-size: 0;
+    max-inline-size: var(--ui-animated-text-max-inline-size);
+    color-scheme: light dark;
+    color: var(--ui-animated-text-color);
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    box-sizing: border-box;
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-animated-text-font-size: 1rem;
+    --ui-animated-text-line-height: 1.18;
+    --ui-animated-text-letter-spacing: -0.012em;
+    --ui-animated-text-font-weight: 650;
+    --ui-animated-text-safe-inline-end: 0.04em;
+    --ui-animated-text-safe-block-end: 0.08em;
+  }
+
+  :host([size="md"]),
+  :host([size="2"]) {
+    --ui-animated-text-font-size: 1.375rem;
+    --ui-animated-text-line-height: 1.08;
+    --ui-animated-text-letter-spacing: -0.03em;
+    --ui-animated-text-font-weight: 700;
+    --ui-animated-text-safe-inline-end: 0.08em;
+    --ui-animated-text-safe-block-end: 0.12em;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-animated-text-font-size: clamp(1.8rem, 2.6vw, 2.5rem);
+    --ui-animated-text-line-height: 1.02;
+    --ui-animated-text-letter-spacing: -0.04em;
+    --ui-animated-text-font-weight: 760;
+    --ui-animated-text-safe-inline-end: 0.1em;
+    --ui-animated-text-safe-block-end: 0.14em;
+  }
+
+  :host([size="xl"]),
+  :host([size="4"]) {
+    --ui-animated-text-font-size: clamp(2.5rem, 5vw, 4.5rem);
+    --ui-animated-text-line-height: 0.98;
+    --ui-animated-text-letter-spacing: -0.055em;
+    --ui-animated-text-font-weight: 800;
+    --ui-animated-text-safe-inline-end: 0.12em;
+    --ui-animated-text-safe-block-end: 0.16em;
+  }
+
+  :host([tone="neutral"]) {
+    --ui-animated-text-accent: #64748b;
+  }
+
+  :host([tone="info"]) {
+    --ui-animated-text-accent: #0ea5e9;
+  }
+
+  :host([tone="success"]) {
+    --ui-animated-text-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-animated-text-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-animated-text-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([variant="soft"]) {
+    --ui-animated-text-color:
+      color-mix(in srgb, var(--ui-animated-text-accent) 72%, var(--ui-color-text, var(--ui-text, #0f172a)));
+    --ui-animated-text-bg:
+      color-mix(in srgb, var(--ui-animated-text-accent) 8%, var(--ui-color-surface, #ffffff));
+    --ui-animated-text-border:
+      1px solid color-mix(in srgb, var(--ui-animated-text-accent) 18%, transparent);
+    --ui-animated-text-padding-inline: 0.34em;
+    --ui-animated-text-padding-block: 0.16em;
+  }
+
+  :host([variant="solid"]) {
+    --ui-animated-text-color: color-mix(in srgb, var(--ui-animated-text-accent) 88%, #061221);
+    --ui-animated-text-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-animated-text-accent) 12%, var(--ui-color-surface, #ffffff)),
+        color-mix(in srgb, var(--ui-animated-text-accent) 5%, var(--ui-color-surface, #ffffff))
+      );
+    --ui-animated-text-border:
+      1px solid color-mix(in srgb, var(--ui-animated-text-accent) 24%, transparent);
+    --ui-animated-text-shadow:
+      0 1px 2px rgba(15, 23, 42, 0.05),
+      0 18px 34px color-mix(in srgb, var(--ui-animated-text-accent) 9%, rgba(15, 23, 42, 0.08));
+    --ui-animated-text-padding-inline: 0.42em;
+    --ui-animated-text-padding-block: 0.18em;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-animated-text-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, #04111f 88%, var(--ui-animated-text-accent) 12%),
+        color-mix(in srgb, #0a2344 84%, var(--ui-animated-text-accent) 16%)
+      );
+    --ui-animated-text-color: #f8fbff;
+    --ui-animated-text-border:
+      1px solid color-mix(in srgb, #ffffff 14%, transparent);
+    --ui-animated-text-shadow:
+      0 2px 10px rgba(2, 6, 23, 0.18),
+      0 26px 54px rgba(2, 6, 23, 0.3);
+    --ui-animated-text-caret-color: #f8fbff;
+    --ui-animated-text-padding-inline: 0.42em;
+    --ui-animated-text-padding-block: 0.18em;
+  }
+
+  :host([variant="gradient"]) {
+    --ui-animated-text-bg: transparent;
+    --ui-animated-text-border: none;
+    --ui-animated-text-shadow: none;
+    --ui-animated-text-color: var(--ui-color-text, var(--ui-text, #0f172a));
+  }
+
+  :host([variant="minimal"]) {
+    --ui-animated-text-color:
+      color-mix(in srgb, var(--ui-animated-text-accent) 84%, var(--ui-color-text, var(--ui-text, #0f172a)));
+    --ui-animated-text-bg: transparent;
+    --ui-animated-text-border: none;
+    --ui-animated-text-shadow: none;
+    --ui-animated-text-padding-inline: 0px;
+    --ui-animated-text-padding-block: 0px;
+  }
+
+  :host([radius="none"]) {
+    --ui-animated-text-radius: 0px;
+  }
+
+  :host([radius="sm"]) {
+    --ui-animated-text-radius: 12px;
+  }
+
+  :host([radius="md"]) {
+    --ui-animated-text-radius: 18px;
+  }
+
+  :host([radius="lg"]) {
+    --ui-animated-text-radius: 26px;
+  }
+
+  :host([radius="full"]) {
+    --ui-animated-text-radius: 999px;
+  }
+
+  :host([elevation="none"]) {
+    --ui-animated-text-shadow: none;
+  }
+
+  :host([elevation="low"]) {
+    --ui-animated-text-shadow:
+      0 1px 2px rgba(15, 23, 42, 0.05),
+      0 16px 30px rgba(15, 23, 42, 0.08);
+  }
+
+  :host([elevation="high"]) {
+    --ui-animated-text-shadow:
+      0 2px 8px rgba(15, 23, 42, 0.08),
+      0 28px 54px rgba(15, 23, 42, 0.16);
+  }
+
+  :host([align="center"]) {
+    --ui-animated-text-align: center;
+  }
+
+  :host([align="right"]),
+  :host([align="end"]) {
+    --ui-animated-text-align: end;
+  }
+
+  .root {
+    display: block;
+    min-inline-size: 0;
+  }
+
+  .surface {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    max-inline-size: 100%;
+    overflow: visible;
+    padding:
+      var(
+        --ui-animated-text-padding,
+        var(--ui-animated-text-padding-block) var(--ui-animated-text-padding-inline)
+      );
+    border-radius: var(--ui-animated-text-radius);
+    background: var(--ui-animated-text-bg);
+    color: var(--ui-animated-text-color);
+    border: var(--ui-animated-text-border);
+    box-shadow: var(--ui-animated-text-shadow);
+    backdrop-filter: var(--ui-animated-text-backdrop);
+    box-sizing: border-box;
+    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);
+  }
+
+  .content {
+    position: relative;
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: var(--ui-animated-text-gap-block) var(--ui-animated-text-gap-inline);
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    overflow: visible;
+    padding-inline-end: var(--ui-animated-text-safe-inline-end);
+    padding-block-end: var(--ui-animated-text-safe-block-end);
+    margin-inline-end: calc(var(--ui-animated-text-safe-inline-end) * -1);
+    margin-block-end: calc(var(--ui-animated-text-safe-block-end) * -1);
+    font-size: var(--ui-animated-text-font-size);
+    line-height: var(--ui-animated-text-line-height);
+    letter-spacing: var(--ui-animated-text-letter-spacing);
+    font-weight: var(--ui-animated-text-font-weight);
+    text-align: var(--ui-animated-text-align);
+    color: inherit;
+  }
+
+  .content[data-split="lines"] {
+    display: grid;
+    justify-items: start;
+    gap: 0.12em;
+  }
+
+  .content[data-split="lines"][data-align="center"] {
+    justify-items: center;
+  }
+
+  .content[data-split="lines"][data-align="end"] {
+    justify-items: end;
+  }
+
+  .segment {
+    display: inline-block;
+    min-inline-size: 0;
+    white-space: pre-wrap;
+    overflow: visible;
+    padding-inline-end: calc(var(--ui-animated-text-safe-inline-end) * 0.82);
+    padding-block-end: calc(var(--ui-animated-text-safe-block-end) * 0.9);
+    margin-inline-end: calc(var(--ui-animated-text-safe-inline-end) * -0.82);
+    margin-block-end: calc(var(--ui-animated-text-safe-block-end) * -0.9);
+    transform-origin: center 80%;
+    will-change: transform, opacity, filter;
+    animation-duration: var(--ui-animated-text-duration);
+    animation-delay: calc(
+      var(--ui-animated-text-delay) + var(--ui-animated-text-index, 0) * var(--ui-animated-text-stagger)
+    );
+    animation-timing-function: var(--ui-animated-text-animation-timing, var(--ui-animated-text-ease));
+    animation-direction: var(--ui-animated-text-animation-direction, normal);
+    animation-iteration-count: var(--ui-animated-text-animation-iteration-count, 1);
+    animation-fill-mode: var(--ui-animated-text-animation-fill-mode, both);
+    animation-play-state: running;
+  }
+
+  .segment[data-line="true"] {
+    display: block;
+  }
+
+  .segment[data-space="true"] {
+    padding-inline-end: 0;
+    padding-block-end: 0;
+    margin-inline-end: 0;
+    margin-block-end: 0;
+    animation: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+    filter: none !important;
+    will-change: auto;
+  }
+
+  .content[data-hidden="true"] {
+    visibility: hidden;
+  }
+
+  .content[data-animate="false"] .segment:not([data-space="true"]) {
+    opacity: 1;
+    transform: none;
+    filter: none;
+    animation: none;
+  }
+
+  .content[data-paused="true"] .segment:not([data-space="true"]) {
+    opacity: 1;
+    transform: none;
+    filter: none;
+    animation-play-state: paused;
+  }
+
+  .content[data-animate="true"] .segment:not([data-space="true"]) {
+    opacity: 0;
+  }
+
+  .content[data-animate="true"][data-effect="fade-up"] .segment:not([data-space="true"]) {
+    animation-name: ui-animated-text-fade-up;
+  }
+
+  .content[data-animate="true"][data-effect="fade-down"] .segment:not([data-space="true"]) {
+    animation-name: ui-animated-text-fade-down;
+  }
+
+  .content[data-animate="true"][data-effect="slide-left"] .segment:not([data-space="true"]) {
+    animation-name: ui-animated-text-slide-left;
+  }
+
+  .content[data-animate="true"][data-effect="slide-right"] .segment:not([data-space="true"]) {
+    animation-name: ui-animated-text-slide-right;
+  }
+
+  .content[data-animate="true"][data-effect="blur"] .segment:not([data-space="true"]) {
+    animation-name: ui-animated-text-blur;
+  }
+
+  .content[data-animate="true"][data-effect="blur-up"] .segment:not([data-space="true"]) {
+    animation-name: ui-animated-text-blur-up;
+  }
+
+  .content[data-animate="true"][data-effect="pop"] .segment:not([data-space="true"]) {
+    animation-name: ui-animated-text-pop;
+  }
+
+  .content[data-animate="true"][data-effect="wave"] .segment:not([data-space="true"]) {
+    animation-name: ui-animated-text-wave;
+  }
+
+  .content[data-animate="true"][data-effect="zoom-in"] .segment:not([data-space="true"]) {
+    animation-name: ui-animated-text-zoom-in;
+  }
+
+  .content[data-animate="true"][data-effect="rotate-in"] .segment:not([data-space="true"]) {
+    animation-name: ui-animated-text-rotate-in;
+  }
+
+  .content[data-animate="true"][data-effect="flip-up"] .segment:not([data-space="true"]) {
+    animation-name: ui-animated-text-flip-up;
+  }
+
+  .content[data-animate="true"][data-effect="skew-in"] .segment:not([data-space="true"]) {
+    animation-name: ui-animated-text-skew-in;
+  }
+
+  .content[data-animate="true"][data-effect="glow"] .segment:not([data-space="true"]) {
+    animation-name: ui-animated-text-glow;
+  }
+
+  .content[data-animate="true"][data-effect="typewriter"] .segment:not([data-space="true"]) {
+    animation-name: ui-animated-text-typewriter;
+    animation-timing-function: var(--ui-animated-text-animation-timing, steps(2, end));
+  }
+
+  .content[data-animate="true"][data-effect="custom"] .segment:not([data-space="true"]) {
+    animation-name: var(--ui-animated-text-custom-animation-name);
+  }
+
+  .content[data-variant="gradient"] .segment:not([data-space="true"]) {
+    background:
+      linear-gradient(
+        135deg,
+        color-mix(in srgb, var(--ui-animated-text-accent) 96%, #ffffff 4%),
+        color-mix(in srgb, var(--ui-animated-text-accent) 58%, #0f172a 42%)
+      );
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+
+  .caret {
+    align-self: stretch;
+    inline-size: 0.08em;
+    margin-inline-start: 0.08em;
+    border-radius: 999px;
+    background: var(--ui-animated-text-caret-color);
+    opacity: 0;
+  }
+
+  .content[data-effect="typewriter"][data-animate="true"] + .caret {
+    opacity: 1;
+    animation: ui-animated-text-caret 920ms steps(1, end) infinite;
+  }
+
+  .content[data-effect="typewriter"][data-paused="true"] + .caret {
+    animation-play-state: paused;
+    opacity: 0.65;
+  }
+
+  :host(:focus-visible) .surface {
+    outline: none;
+    border-color: color-mix(in srgb, var(--ui-animated-text-focus-ring) 24%, transparent);
+    box-shadow:
+      0 0 0 3px color-mix(in srgb, var(--ui-animated-text-focus-ring) 18%, transparent),
+      var(--ui-animated-text-shadow);
+  }
+
+  @keyframes ui-animated-text-fade-up {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 0.58em, 0);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes ui-animated-text-fade-down {
+    from {
+      opacity: 0;
+      transform: translate3d(0, -0.58em, 0);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes ui-animated-text-slide-left {
+    from {
+      opacity: 0;
+      transform: translate3d(0.72em, 0, 0);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes ui-animated-text-slide-right {
+    from {
+      opacity: 0;
+      transform: translate3d(-0.72em, 0, 0);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes ui-animated-text-blur {
+    from {
+      opacity: 0;
+      filter: blur(14px);
+      transform: translate3d(0, 0.28em, 0) scale(0.98);
+    }
+    to {
+      opacity: 1;
+      filter: blur(0);
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+  }
+
+  @keyframes ui-animated-text-blur-up {
+    from {
+      opacity: 0;
+      filter: blur(18px);
+      transform: translate3d(0, 0.42em, 0) scale(0.95);
+    }
+    to {
+      opacity: 1;
+      filter: blur(0);
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+  }
+
+  @keyframes ui-animated-text-pop {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 0.16em, 0) scale(0.84);
+    }
+    72% {
+      opacity: 1;
+      transform: translate3d(0, -0.02em, 0) scale(1.04);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+  }
+
+  @keyframes ui-animated-text-wave {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 0.7em, 0) rotate(10deg) scale(0.96);
+    }
+    55% {
+      opacity: 1;
+      transform: translate3d(0, -0.08em, 0) rotate(-3deg) scale(1.01);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
+    }
+  }
+
+  @keyframes ui-animated-text-zoom-in {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 0.12em, 0) scale(0.72);
+    }
+    70% {
+      opacity: 1;
+      transform: translate3d(0, -0.02em, 0) scale(1.03);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+  }
+
+  @keyframes ui-animated-text-rotate-in {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 0.18em, 0) rotate(-12deg) scale(0.94);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
+    }
+  }
+
+  @keyframes ui-animated-text-flip-up {
+    from {
+      opacity: 0;
+      transform: perspective(560px) rotateX(76deg) translate3d(0, 0.4em, 0);
+    }
+    65% {
+      opacity: 1;
+      transform: perspective(560px) rotateX(-8deg) translate3d(0, -0.03em, 0);
+    }
+    to {
+      opacity: 1;
+      transform: perspective(560px) rotateX(0deg) translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes ui-animated-text-skew-in {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 0.28em, 0) skewY(10deg) scaleX(0.94);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) skewY(0deg) scaleX(1);
+    }
+  }
+
+  @keyframes ui-animated-text-glow {
+    from {
+      opacity: 0;
+      filter: blur(10px) brightness(1.7);
+      transform: translate3d(0, 0.1em, 0) scale(0.98);
+    }
+    to {
+      opacity: 1;
+      filter: blur(0) brightness(1);
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+  }
+
+  @keyframes ui-animated-text-typewriter {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes ui-animated-text-caret {
+    0%, 46% {
+      opacity: 1;
+    }
+    47%, 100% {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .segment,
+    .caret {
+      animation: none !important;
+      transition: none !important;
+      opacity: 1 !important;
+      transform: none !important;
+      filter: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .surface {
+      outline: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .surface {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+
+    .content[data-variant="gradient"] .segment:not([data-space="true"]) {
+      background: none;
+      color: CanvasText;
+    }
+
+    .caret {
+      background: CanvasText;
+    }
+  }
+`;
+function p(a) {
+  return a.split("&").join("&amp;").split("<").join("&lt;").split(">").join("&gt;").split('"').join("&quot;").split("'").join("&#39;");
+}
+function L(a) {
+  return /^\s+$/.test(a);
+}
+function h(a) {
+  if (!a)
+    return null;
+  const t = a.trim();
+  return t ? /^-?\d+(\.\d+)?$/.test(t) ? `${t}ms` : /^-?\d+(\.\d+)?m?s$/.test(t) ? t : null : null;
+}
+function g(a) {
+  if (!a)
+    return null;
+  const t = a.trim();
+  if (!t)
+    return null;
+  const e = t.split(/\s+/).filter(Boolean);
+  return e.length ? e.map((i) => /^-?\d+(\.\d+)?$/.test(i) ? `${i}px` : i).join(" ") : null;
+}
+function f(a, t) {
+  const e = h(a);
+  if (!e)
+    return t;
+  if (e.endsWith("ms")) {
+    const i = Number.parseFloat(e.slice(0, -2));
+    return Number.isFinite(i) && i >= 0 ? i : t;
+  }
+  if (e.endsWith("s")) {
+    const i = Number.parseFloat(e.slice(0, -1));
+    return Number.isFinite(i) && i >= 0 ? i * 1e3 : t;
+  }
+  return t;
+}
+function I(a) {
+  const t = globalThis.Intl.Segmenter;
+  if (typeof t == "function") {
+    const e = new t(void 0, { granularity: "grapheme" });
+    return Array.from(e.segment(a), (i) => i.segment);
+  }
+  return Array.from(a);
+}
+function P(a) {
+  const t = globalThis.Intl.Segmenter;
+  if (typeof t == "function") {
+    const e = new t(void 0, { granularity: "word" });
+    return Array.from(e.segment(a), (i) => i.segment).filter(Boolean);
+  }
+  return a.split(/(\s+)/).filter(Boolean);
+}
+function b(a, t) {
+  return a ? t === "lines" ? a.split(/\r\n|\r|\n/).map((i) => ({
+    text: i || " ",
+    animated: !!i.trim(),
+    line: !0
+  })) : (t === "chars" ? I(a) : P(a)).map((i) => ({
+    text: i,
+    animated: !L(i),
+    line: !1
+  })) : [];
+}
+function E(a, t) {
+  const e = (t || "").trim();
+  if (e)
+    return { mode: "custom", value: e };
+  const i = (a || "").trim();
+  return i ? M.has(i) ? { mode: "builtin", value: i } : { mode: "custom", value: i } : { mode: "builtin", value: "fade-up" };
+}
+function $(a, t) {
+  if (t === "typewriter")
+    return "chars";
+  const e = (a || "").trim();
+  return S.has(e) ? e : "words";
+}
+function O(a) {
+  const t = (a || "").trim();
+  return z.has(t) ? t : "load";
+}
+class Q extends w {
+  constructor() {
+    super(), this._sourceObserver = null, this._intersectionObserver = null, this._mediaQuery = null, this._loopTimer = null, this._visible = !1, this._hasStarted = !1, this._runId = 0, this._handleSourceMutation = this._handleSourceMutation.bind(this), this._handleIntersection = this._handleIntersection.bind(this), this._handleReducedMotionChange = this._handleReducedMotionChange.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "text",
+      "effect",
+      "split",
+      "trigger",
+      "duration",
+      "stagger",
+      "delay",
+      "loop-delay",
+      "paused",
+      "loop",
+      "custom-effect",
+      "effect-timing",
+      "effect-direction",
+      "effect-iteration-count",
+      "effect-fill-mode",
+      "variant",
+      "tone",
+      "size",
+      "radius",
+      "padding",
+      "elevation",
+      "align"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "text"), this._sourceObserver = new MutationObserver(this._handleSourceMutation), this._sourceObserver.observe(this, {
+      childList: !0,
+      subtree: !0,
+      characterData: !0
+    }), this._setupReducedMotionQuery(), this._updateVisibilityObservation(), this._syncHostStyles(), queueMicrotask(() => {
+      this._triggerMode() === "load" && this._resolvedText().trim() ? this._startIfNeeded() : this._updateRuntimeState(), this._syncLoopTimer();
+    });
+  }
+  disconnectedCallback() {
+    var t, e;
+    (t = this._sourceObserver) == null || t.disconnect(), this._sourceObserver = null, (e = this._intersectionObserver) == null || e.disconnect(), this._intersectionObserver = null, this._detachReducedMotionQuery(), this._clearLoopTimer(), super.disconnectedCallback();
+  }
+  get text() {
+    return this.getAttribute("text") ?? this._sourceText();
+  }
+  set text(t) {
+    t ? this.setAttribute("text", t) : this.removeAttribute("text");
+  }
+  pause() {
+    this.hasAttribute("paused") ? (this._syncLoopTimer(), this._updateRuntimeState()) : this.setAttribute("paused", "");
+  }
+  play() {
+    this.hasAttribute("paused") && this.removeAttribute("paused"), this._startIfNeeded(), this._syncLoopTimer(), this._updateRuntimeState();
+  }
+  replay() {
+    this._resolvedText().trim() && (this._hasStarted = !0, this._runId += 1, this.invalidateContentCache(), this.requestRender(), this._syncLoopTimer(), this._updateRuntimeState());
+  }
+  refresh() {
+    this.invalidateContentCache(), this.requestRender(), this._syncLoopTimer(), this._updateRuntimeState();
+  }
+  attributeChangedCallback(t, e, i) {
+    e !== i && (t === "trigger" && (this._updateVisibilityObservation(), this._triggerMode() === "load" && this._resolvedText().trim() && this._startIfNeeded()), t === "text" && this._handleTextChange(), super.attributeChangedCallback(t, e, i), this._syncHostStyles(), this._syncLoopTimer(), this._updateRuntimeState());
+  }
+  _sourceText() {
+    return this.textContent || "";
+  }
+  _resolvedText() {
+    return this.getAttribute("text") ?? this._sourceText();
+  }
+  _resolvedEffect() {
+    return E(this.getAttribute("effect"), this.getAttribute("custom-effect"));
+  }
+  _effect() {
+    const t = this._resolvedEffect();
+    return t.mode === "builtin" ? t.value : "fade-up";
+  }
+  _splitMode() {
+    return $(this.getAttribute("split"), this._effect());
+  }
+  _triggerMode() {
+    return O(this.getAttribute("trigger"));
+  }
+  _durationMs() {
+    return f(this.getAttribute("duration"), 720);
+  }
+  _staggerMs() {
+    return f(this.getAttribute("stagger"), 55);
+  }
+  _delayMs() {
+    return f(this.getAttribute("delay"), 0);
+  }
+  _loopDelayMs() {
+    const t = this.getAttribute("loop-delay");
+    if (!t)
+      return x;
+    const e = f(t, x);
+    return Math.max(0, e);
+  }
+  _shouldLoop() {
+    return this.hasAttribute("loop");
+  }
+  _hiddenUntilStarted() {
+    if (this._hasStarted)
+      return !1;
+    const t = this._triggerMode();
+    return t === "manual" ? !0 : t === "visible" && !this._visible;
+  }
+  _shouldAnimate() {
+    return this._hasStarted && !this._isMotionReduced() && !!this._resolvedText().trim();
+  }
+  _isMotionReduced() {
+    var t;
+    return !!((t = this._mediaQuery) != null && t.matches);
+  }
+  _isMotionPaused() {
+    return this._hasStarted ? !!(this.hasAttribute("paused") || this._isMotionReduced() || this._triggerMode() === "visible" && !this._visible) : !1;
+  }
+  _currentAlignValue() {
+    const t = (this.getAttribute("align") || "").trim().toLowerCase();
+    return t === "center" ? "center" : t === "right" || t === "end" ? "end" : "start";
+  }
+  _countAnimatedSegments(t, e) {
+    return b(t, e).filter((i) => i.animated).length;
+  }
+  _cycleDurationMs(t) {
+    const e = this._countAnimatedSegments(t, this._splitMode());
+    return e <= 0 ? this._durationMs() + this._delayMs() : this._delayMs() + this._durationMs() + this._staggerMs() * Math.max(0, e - 1);
+  }
+  _syncHostStyles() {
+    const t = h(this.getAttribute("duration")), e = h(this.getAttribute("stagger")), i = h(this.getAttribute("delay")), n = this.getAttribute("radius"), o = g(this.getAttribute("padding")), d = (this.getAttribute("effect-timing") || "").trim(), u = (this.getAttribute("effect-direction") || "").trim(), m = (this.getAttribute("effect-iteration-count") || "").trim(), l = (this.getAttribute("effect-fill-mode") || "").trim(), s = this._resolvedEffect();
+    if (t ? this.style.setProperty("--ui-animated-text-duration", t) : this.style.removeProperty("--ui-animated-text-duration"), e ? this.style.setProperty("--ui-animated-text-stagger", e) : this.style.removeProperty("--ui-animated-text-stagger"), i ? this.style.setProperty("--ui-animated-text-delay", i) : this.style.removeProperty("--ui-animated-text-delay"), n && !C.has(n)) {
+      const c = g(n);
+      c ? this.style.setProperty("--ui-animated-text-radius", c) : this.style.removeProperty("--ui-animated-text-radius");
+    } else
+      this.style.removeProperty("--ui-animated-text-radius");
+    o ? this.style.setProperty("--ui-animated-text-padding", o) : this.style.removeProperty("--ui-animated-text-padding"), s.mode === "custom" && s.value ? this.style.setProperty("--ui-animated-text-custom-animation-name", s.value) : this.style.removeProperty("--ui-animated-text-custom-animation-name"), d ? this.style.setProperty("--ui-animated-text-animation-timing", d) : this.style.removeProperty("--ui-animated-text-animation-timing"), u ? this.style.setProperty("--ui-animated-text-animation-direction", u) : this.style.removeProperty("--ui-animated-text-animation-direction"), m ? this.style.setProperty("--ui-animated-text-animation-iteration-count", m) : this.style.removeProperty("--ui-animated-text-animation-iteration-count"), l ? this.style.setProperty("--ui-animated-text-animation-fill-mode", l) : this.style.removeProperty("--ui-animated-text-animation-fill-mode");
+  }
+  _setupReducedMotionQuery() {
+    if (!(typeof window > "u" || typeof window.matchMedia != "function")) {
+      if (this._mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)"), typeof this._mediaQuery.addEventListener == "function") {
+        this._mediaQuery.addEventListener("change", this._handleReducedMotionChange);
+        return;
+      }
+      this._mediaQuery.addListener(this._handleReducedMotionChange);
+    }
+  }
+  _detachReducedMotionQuery() {
+    this._mediaQuery && (typeof this._mediaQuery.removeEventListener == "function" ? this._mediaQuery.removeEventListener("change", this._handleReducedMotionChange) : this._mediaQuery.removeListener(this._handleReducedMotionChange), this._mediaQuery = null);
+  }
+  _handleReducedMotionChange() {
+    this.invalidateContentCache(), this.requestRender(), this._syncLoopTimer(), this._updateRuntimeState();
+  }
+  _updateVisibilityObservation() {
+    var t;
+    if ((t = this._intersectionObserver) == null || t.disconnect(), this._intersectionObserver = null, this._triggerMode() !== "visible") {
+      this._visible = !0;
+      return;
+    }
+    if (typeof IntersectionObserver > "u") {
+      this._visible = !0;
+      return;
+    }
+    this._visible = !1, this._intersectionObserver = new IntersectionObserver(this._handleIntersection, {
+      threshold: 0.2
+    }), this._intersectionObserver.observe(this);
+  }
+  _handleIntersection(t) {
+    const e = t[t.length - 1], i = !!(e != null && e.isIntersecting);
+    this._visible !== i && (this._visible = i, this._visible ? this._startIfNeeded() : (this._syncLoopTimer(), this._updateRuntimeState(), this.requestRender()));
+  }
+  _handleSourceMutation() {
+    this.hasAttribute("text") || this._handleTextChange();
+  }
+  _handleTextChange() {
+    if (!this._resolvedText().trim()) {
+      this._hasStarted = !1, this._clearLoopTimer(), this._updateRuntimeState(), this.requestRender();
+      return;
+    }
+    if (this._triggerMode() === "manual" && !this._hasStarted) {
+      this.invalidateContentCache(), this.requestRender(), this._updateRuntimeState();
+      return;
+    }
+    if (this._triggerMode() === "visible" && !this._visible && !this._hasStarted) {
+      this.invalidateContentCache(), this.requestRender(), this._updateRuntimeState();
+      return;
+    }
+    this._hasStarted = !0, this._runId += 1, this.invalidateContentCache(), this.requestRender(), this._syncLoopTimer(), this._updateRuntimeState();
+  }
+  _startIfNeeded() {
+    if (!this._resolvedText().trim()) {
+      this._updateRuntimeState();
+      return;
+    }
+    if (this._triggerMode() === "visible" && !this._visible) {
+      this._updateRuntimeState();
+      return;
+    }
+    this._hasStarted || (this._hasStarted = !0, this._runId += 1, this.invalidateContentCache(), this.requestRender()), this._syncLoopTimer(), this._updateRuntimeState();
+  }
+  _clearLoopTimer() {
+    this._loopTimer != null && (window.clearTimeout(this._loopTimer), this._loopTimer = null);
+  }
+  _syncLoopTimer() {
+    this._clearLoopTimer();
+    const t = this._resolvedText();
+    if (!this._shouldLoop() || !this._shouldAnimate() || this._isMotionPaused() || !t.trim())
+      return;
+    const e = this._cycleDurationMs(t) + this._loopDelayMs();
+    this._loopTimer = window.setTimeout(() => {
+      this._loopTimer = null, this.replay();
+    }, Math.max(0, e));
+  }
+  _updateRuntimeState() {
+    if (!this._resolvedText().trim()) {
+      this.setAttribute("data-state", "idle");
+      return;
+    }
+    if (!this._hasStarted) {
+      this.setAttribute("data-state", "idle");
+      return;
+    }
+    if (this._isMotionPaused()) {
+      this.setAttribute("data-state", "paused");
+      return;
+    }
+    this.setAttribute("data-state", "running");
+  }
+  render() {
+    const t = this._resolvedText(), e = this._resolvedEffect(), i = e.mode === "builtin" ? e.value : "custom", n = this._splitMode(), o = this._shouldAnimate(), d = this._hiddenUntilStarted(), u = this._isMotionPaused(), m = this._currentAlignValue(), l = (this.getAttribute("variant") || "default").trim(), s = b(t, n);
+    let c = 0;
+    const v = s.map((r) => {
+      const y = r.animated ? c++ : 0, _ = r.text === " " ? "&nbsp;" : p(r.text);
+      return `
+          <span
+            class="segment"
+            part="segment"
+            data-line="${r.line ? "true" : "false"}"
+            data-space="${r.animated ? "false" : "true"}"
+            style="${r.animated ? `--ui-animated-text-index:${y};` : ""}"
+          >${_}</span>
+        `;
+    }).join("");
+    t.trim() ? this.setAttribute("aria-label", t) : this.removeAttribute("aria-label"), this.setContent(`
+      <style>${R}</style>
+      <div class="root" part="root">
+        <span class="surface" part="surface">
+          <span
+            class="content"
+            part="content"
+            data-effect="${i}"
+            data-effect-name="${p(e.value)}"
+            data-split="${n}"
+            data-variant="${p(l)}"
+            data-align="${m}"
+            data-run="${this._runId}"
+            data-animate="${o ? "true" : "false"}"
+            data-hidden="${d ? "true" : "false"}"
+            data-paused="${u ? "true" : "false"}"
+            aria-hidden="true"
+          >${v}</span>
+          <span class="caret" aria-hidden="true"></span>
+        </span>
+      </div>
+    `);
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-animated-text") && customElements.define("ui-animated-text", Q);
+export {
+  Q as UIAnimatedText
+};