@editora/ui-core 0.1.8 → 0.1.10

package/dist/animated-text.cjs.js

@@ -0,0 +1,683 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("./ElementBase-1b301e7f.js"),T="720ms",A="55ms",M="0ms",x=1400,S=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"]),z=new Set(["chars","words","lines"]),C=new Set(["load","visible","manual"]),R=new Set(["none","sm","md","lg","full"]),L=`
+  :host {
+    --ui-animated-text-duration: ${T};
+    --ui-animated-text-stagger: ${A};
+    --ui-animated-text-delay: ${M};
+    --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 I(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 P(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 E(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"?P(a):E(a)).map(i=>({text:i,animated:!I(i),line:!1})):[]}function $(a,t){const e=(t||"").trim();if(e)return{mode:"custom",value:e};const i=(a||"").trim();return i?S.has(i)?{mode:"builtin",value:i}:{mode:"custom",value:i}:{mode:"builtin",value:"fade-up"}}function O(a,t){if(t==="typewriter")return"chars";const e=(a||"").trim();return z.has(e)?e:"words"}function Q(a){const t=(a||"").trim();return C.has(t)?t:"load"}class v extends k.ElementBase{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 $(this.getAttribute("effect"),this.getAttribute("custom-effect"))}_effect(){const t=this._resolvedEffect();return t.mode==="builtin"?t.value:"fade-up"}_splitMode(){return O(this.getAttribute("split"),this._effect())}_triggerMode(){return Q(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&&!R.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:.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 y=s.map(r=>{const _=r.animated?c++:0,w=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:${_};`:""}"
+          >${w}</span>
+        `}).join("");t.trim()?this.setAttribute("aria-label",t):this.removeAttribute("aria-label"),this.setContent(`
+      <style>${L}</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"
+          >${y}</span>
+          <span class="caret" aria-hidden="true"></span>
+        </span>
+      </div>
+    `)}}typeof customElements<"u"&&!customElements.get("ui-animated-text")&&customElements.define("ui-animated-text",v);exports.UIAnimatedText=v;