@yewdiel21/motion-kit 0.10.0 → 0.14.0

package/src/components/notification-bell/engine.ts

@@ -0,0 +1,202 @@
+import { gsap, ELASTIC, EASE, registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+import { blurIn, blurOut, rollDigits } from '../../motion/micro';
+
+/*
+ * Notification bell: a bell with a badge on a button. notify() rings it — the
+ * bell swings from its top in a damped arc (±18°) with the clapper a beat
+ * behind, waves ripple out, the badge pops in elastically (or its number rolls
+ * up), and an optional message rises beside it for a few seconds. The button's
+ * name carries the count and a polite status announces new ones.
+ */
+
+export interface NotificationBellOptions {
+  count?: number;
+  /** Accessible name before the count (default 'Notificaciones'). */
+  label?: string;
+  /** How long a message stays, in ms (default 3200). */
+  messageDuration?: number;
+  /** Above this the badge reads n+ (default 99). */
+  max?: number;
+  onOpen?: () => void;
+}
+
+export interface NotificationBellInstance extends Instance {
+  /** Ring with a new notification (and show `message`, as text). */
+  notify(message?: string): void;
+  setCount(count: number): void;
+  clear(): void;
+  readonly count: number;
+}
+
+const SVG = 'http://www.w3.org/2000/svg';
+const BODY = 'M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 2H4.5z';
+
+export function createNotificationBell(root: HTMLElement | null, options: NotificationBellOptions = {}): NotificationBellInstance {
+  const button = root ? ((root.matches('button') ? root : root.querySelector('button')) as HTMLButtonElement | null) : null;
+  if (!root || !button) return inert({ notify() {}, setCount() {}, clear() {}, count: 0 });
+  registerMotion();
+  const scope = createScope();
+  const max = Number.isFinite(options.max) && options.max! > 0 ? Math.floor(options.max!) : 99;
+  const label = options.label ?? 'Notificaciones';
+  const stay = Number.isFinite(options.messageDuration) ? Math.max(0, options.messageDuration!) : 3200;
+  let count = Math.max(0, Math.round(Number.isFinite(options.count) ? options.count! : 0));
+
+  const made: Element[] = [];
+  scope.add(() => made.forEach((element) => element.remove()));
+  const icon = document.createElementNS(SVG, 'svg');
+  icon.setAttribute('viewBox', '0 0 24 24');
+  icon.setAttribute('aria-hidden', 'true');
+  icon.dataset.mkBellIcon = '';
+  const bell = document.createElementNS(SVG, 'g');
+  bell.dataset.mkPart = 'bell';
+  const body = document.createElementNS(SVG, 'path');
+  body.setAttribute('d', BODY);
+  const top = document.createElementNS(SVG, 'path');
+  top.setAttribute('d', 'M12 3v2');
+  bell.append(body, top);
+  const clapper = document.createElementNS(SVG, 'path');
+  clapper.setAttribute('d', 'M10 20.5a2 2 0 0 0 4 0');
+  clapper.dataset.mkPart = 'clapper';
+  icon.append(bell, clapper);
+  const waves = document.createElement('span');
+  waves.dataset.mkBellWaves = '';
+  waves.setAttribute('aria-hidden', 'true');
+  const badge = document.createElement('span');
+  badge.dataset.mkBellBadge = '';
+  badge.setAttribute('aria-hidden', 'true');
+  button.prepend(waves, icon);
+  button.append(badge);
+  const bubble = document.createElement('span');
+  bubble.dataset.mkBellMessage = '';
+  bubble.setAttribute('aria-hidden', 'true');
+  bubble.hidden = true;
+  const live = document.createElement('span');
+  live.className = 'mk-sr-only';
+  live.setAttribute('role', 'status');
+  (root === button ? button : root).append(bubble, live);
+  made.push(waves, icon, badge, bubble, live);
+
+  scope.attr(button, 'type', button.getAttribute('type') ?? 'button');
+  scope.attr(button, 'data-mk-bell', '');
+  scope.attr(root, 'data-mk-ready', '');
+
+  let hideTimer: ReturnType<typeof setTimeout> | undefined;
+  const effects = new Set<gsap.core.Animation>();
+  const keep = (animation: gsap.core.Animation | null) => {
+    if (!animation) return;
+    effects.add(animation);
+    // Finished ones leave as new ones arrive: the animation's own onComplete stays untouched.
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
+  };
+  scope.add(() => {
+    clearTimeout(hideTimer);
+    for (const effect of effects) effect.kill();
+    effects.clear();
+    gsap.killTweensOf([bell, clapper, badge, bubble]);
+  });
+
+  const text = (n: number) => (n > max ? `${max}+` : String(n));
+  const name = () => (count ? `${label}, ${count} sin leer` : label);
+  const paint = () => {
+    scope.attr(button, 'aria-label', name());
+    badge.hidden = count === 0;
+  };
+
+  const showBadge = (previous: number) => {
+    if (count === 0) {
+      if (reduced() || previous === 0) {
+        badge.hidden = true;
+        return;
+      }
+      keep(gsap.to(badge, { scale: 0, duration: 0.2, ease: 'power2.in', onComplete: () => void (badge.hidden = true), clearProps: 'scale,transform' }));
+      return;
+    }
+    if (previous === 0) {
+      badge.textContent = text(count);
+      badge.hidden = false;
+      if (!reduced()) keep(gsap.fromTo(badge, { scale: 0 }, { scale: 1, duration: 0.8, ease: ELASTIC, clearProps: 'scale,transform' }));
+    } else keep(rollDigits(badge, text(count), count >= previous ? 1 : -1, 0.4));
+  };
+
+  const ring = () => {
+    if (reduced()) return;
+    gsap.killTweensOf([bell, clapper]);
+    keep(gsap.fromTo(bell, { rotation: 0 }, { keyframes: { rotation: [18, -14, 10, -6, 3, 0] }, duration: 1, ease: 'power1.out', svgOrigin: '12 4', clearProps: 'rotation,transform' }));
+    keep(gsap.fromTo(clapper, { x: 0 }, { keyframes: { x: [0, -2.5, 2, -1.4, 0.8, 0] }, duration: 1, delay: 0.06, ease: 'power1.out', clearProps: 'x,transform' }));
+    for (let i = 0; i < 2; i++) {
+      const wave = document.createElement('i');
+      waves.append(wave);
+      keep(gsap.fromTo(wave, { scale: 0.6, opacity: 0.55 }, { scale: 1.9, opacity: 0, duration: 0.8, delay: i * 0.18, ease: 'power2.out', onComplete: () => wave.remove() }));
+    }
+  };
+
+  // The message rises on the side with room inside the bell's container (and the window), so a bell at the
+  // right edge of a card speaks to its left instead of running over the next thing.
+  const place = () => {
+    bubble.style.maxWidth = '';
+    const box = root.getBoundingClientRect();
+    const frame = root.parentElement?.getBoundingClientRect();
+    const right = Math.min(frame?.right ?? innerWidth, innerWidth) - box.right;
+    const left = box.left - Math.max(frame?.left ?? 0, 0);
+    const side = right >= bubble.offsetWidth + 12 || right >= left ? 'right' : 'left';
+    bubble.dataset.mkSide = side;
+    bubble.style.maxWidth = `min(16rem, ${Math.max(140, (side === 'right' ? right : left) - 12)}px)`;
+  };
+
+  const say = (message: string) => {
+    clearTimeout(hideTimer);
+    gsap.killTweensOf(bubble);
+    bubble.textContent = message;
+    bubble.hidden = false;
+    place();
+    keep(blurIn(bubble, { from: 'pop' }));
+    hideTimer = setTimeout(() => {
+      if (scope.disposed) return;
+      const out = blurOut(bubble, {
+        to: 'up',
+        onComplete: () => {
+          bubble.hidden = true;
+          gsap.set(bubble, { clearProps: 'all' });
+        },
+      });
+      keep(out);
+    }, stay);
+  };
+
+  const setCount = (next: number, announce = false) => {
+    if (scope.disposed || !Number.isFinite(next)) return;
+    const previous = count;
+    count = Math.max(0, Math.round(next));
+    if (count === previous) return;
+    paint();
+    showBadge(previous);
+    if (announce) live.textContent = name();
+    root.dispatchEvent(new CustomEvent('mk:count', { bubbles: true, detail: { count } }));
+  };
+
+  scope.on(button, 'click', () => {
+    options.onOpen?.();
+    root.dispatchEvent(new CustomEvent('mk:open', { bubbles: true, detail: { count } }));
+  });
+  badge.textContent = text(count);
+  paint();
+
+  return {
+    notify(message) {
+      if (scope.disposed) return;
+      setCount(count + 1, true);
+      ring();
+      if (message) say(String(message));
+      if (message) live.textContent = `${name()}. ${message}`;
+    },
+    setCount: (next) => setCount(next),
+    clear: () => setCount(0),
+    get count() {
+      return count;
+    },
+    destroy: () => scope.dispose(),
+  };
+}

package/src/components/notification-bell/notification-bell.css

@@ -0,0 +1,126 @@
+/* notification-bell — a round Melonmind icon button (surface tone) with a bell, a badge in the error tone and a
+   message that rises beside it in the inverse glass. */
+.mk-notification-bell,
+mk-notification-bell {
+  position: relative;
+  display: inline-flex;
+}
+
+[data-mk-bell] {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 3rem;
+  height: 3rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+[data-mk-bell]:hover {
+  background: var(--mk-surface-4);
+}
+
+[data-mk-bell]:active {
+  animation: mk-bell-press 500ms cubic-bezier(0.37, 1.42, 0.37, 1);
+}
+
+[data-mk-bell]:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 3px;
+}
+
+[data-mk-bell] [data-mk-bell-icon] {
+  width: 1.5rem;
+  height: 1.5rem;
+  overflow: visible;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+[data-mk-bell] [data-mk-bell-waves] {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  pointer-events: none;
+}
+
+[data-mk-bell] [data-mk-bell-waves] i {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 2px var(--mk-text);
+}
+
+[data-mk-bell] [data-mk-bell-badge] {
+  position: absolute;
+  top: 0.15rem;
+  right: 0.1rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.3rem;
+  border-radius: 64px;
+  background: var(--mk-error);
+  box-shadow: 0 0 0 2px var(--mk-bg);
+  color: var(--mk-on-error);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+[data-mk-bell] [data-mk-bell-badge][hidden] {
+  display: none;
+}
+
+:is(.mk-notification-bell, mk-notification-bell) [data-mk-bell-message] {
+  position: absolute;
+  top: 50%;
+  left: calc(100% + 0.75rem);
+  width: max-content;
+  max-width: 16rem;
+  padding: 0.5rem 0.85rem;
+  border-radius: 16px;
+  background: var(--mk-glass-inverse);
+  box-shadow: var(--mk-glass-bevel);
+  backdrop-filter: blur(16px);
+  color: var(--mk-on-glass-inverse);
+  font-size: 0.8125rem;
+  translate: 0 -50%;
+  pointer-events: none;
+  transform-origin: 0 50%;
+}
+
+:is(.mk-notification-bell, mk-notification-bell) [data-mk-bell-message][data-mk-side='left'] {
+  right: calc(100% + 0.75rem);
+  left: auto;
+  transform-origin: 100% 50%;
+}
+
+:is(.mk-notification-bell, mk-notification-bell) [data-mk-bell-message][hidden] {
+  display: none;
+}
+
+@keyframes mk-bell-press {
+  50% {
+    transform: scale(0.92);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-bell] {
+    animation: none !important;
+    transition: none;
+  }
+}

package/src/components/notification-bell/react.tsx

@@ -0,0 +1,57 @@
+'use client';
+import { useRef, type ButtonHTMLAttributes, type MutableRefObject } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createNotificationBell, type NotificationBellInstance } from './engine';
+
+export interface NotificationBellProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+  /** Unread count. A higher count than before rings the bell. */
+  count?: number;
+  /** The newest message: a new value rings the bell and shows it. */
+  message?: string;
+  label?: string;
+  messageDuration?: number;
+  max?: number;
+  onOpen?: () => void;
+  instanceRef?: MutableRefObject<NotificationBellInstance | null>;
+}
+
+/** <NotificationBell count={unread} message={latest} onOpen={openPanel} />. */
+export function NotificationBell({ count = 0, message, label, messageDuration, max, onOpen, instanceRef, className, ...props }: NotificationBellProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const instance = useRef<NotificationBellInstance | null>(null);
+  const open = useLatest(onOpen);
+  const initial = useRef(count);
+  useIsomorphicLayoutEffect(() => {
+    const created = createNotificationBell(ref.current, { count: initial.current, label, messageDuration, max, onOpen: () => open.current?.() });
+    instance.current = created;
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      initial.current = created.count;
+      created.destroy();
+      instance.current = null;
+      if (instanceRef) instanceRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [label, messageDuration, max]);
+  const seen = useRef({ count, message });
+  useIsomorphicLayoutEffect(() => {
+    const bell = instance.current;
+    if (!bell) return;
+    const before = seen.current;
+    seen.current = { count, message };
+    const fresh = message !== undefined && message !== before.message;
+    if (count > bell.count) {
+      // One ring for the newest; the rest of the jump is set at once.
+      bell.setCount(count - 1);
+      bell.notify(fresh ? message : undefined);
+    } else {
+      bell.setCount(count);
+      if (fresh && message) bell.notify(message);
+    }
+  }, [count, message]);
+  return (
+    <span ref={ref} className={['mk-notification-bell', className].filter(Boolean).join(' ')}>
+      <button type="button" {...props} />
+    </span>
+  );
+}

package/src/components/password-strength/README.md

@@ -0,0 +1,17 @@
+# password-strength
+
+Campo de contraseña nativo con fortaleza en vivo: botón mostrar/ocultar (el ojo cambia con blur y su barra se dibuja), medidor de cuatro segmentos que se encienden en cascada y cambian de color por nivel (débil → aceptable → fuerte → muy fuerte), etiqueta que cambia con blur y lista de requisitos cuyos ✓ se dibujan. Un estado educado anuncia el nivel cuando dejas de escribir.
+
+```html
+<mk-password-strength class="mk-password-strength">
+  <input type="password" name="password" autocomplete="new-password" aria-label="Contraseña" />
+</mk-password-strength>
+```
+
+`defineElements()`, `createPasswordStrength(root, options)` o `<PasswordStrength name="password" requireScore={3} onStrength={setResult} />` (el campo sigue sin control; `onValueChange` da el texto).
+
+Opciones: `minLength=8`, `score(value)` (sustituye la puntuación), `requireScore` (por debajo, el campo se marca inválido con `setCustomValidity`), `labels {show, hide, invalid, checks}`, `onChange(result)`. API: `score`, `value`, `destroy()`. Evento `mk:strength` con `{score, label, met}`.
+
+Utilidad pura `scorePassword(value, minLength)`: la longitud y la variedad suben la puntuación; contraseñas comunes, secuencias (abc, 123) y repeticiones (aaa) la bajan. Es orientativa: el servidor decide qué acepta.
+
+Variables: `--mk-password-weak`, `--mk-password-fair`, `--mk-password-good`, `--mk-password-strong`. Movimiento reducido: los segmentos y la etiqueta cambian sin animación.

package/src/components/password-strength/element.ts

@@ -0,0 +1,22 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createPasswordStrength, type PasswordStrengthInstance } from './engine';
+
+/**
+ * <mk-password-strength class="mk-password-strength" min-length="10">
+ *   <input type="password" name="password" autocomplete="new-password" aria-label="Contraseña" />
+ * </mk-password-strength>
+ * Emits mk:strength ({score, label, met}).
+ */
+export class MkPasswordStrengthElement extends MkElement<PasswordStrengthInstance> {
+  static options: Record<string, OptionType> = { minLength: 'number', requireScore: 'number', labels: 'json' };
+
+  protected create(options: Record<string, unknown>) {
+    return createPasswordStrength(this, options);
+  }
+
+  get score() {
+    return this.instance?.score ?? 0;
+  }
+}
+
+export const definePasswordStrength = () => defineElement('mk-password-strength', MkPasswordStrengthElement);

package/src/components/password-strength/engine.ts

@@ -0,0 +1,212 @@
+import { gsap, EASE, registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+import { scorePassword, type PasswordChecks, type PasswordScore } from './score';
+
+/*
+ * Password strength: a native password field with a show/hide toggle (the eye
+ * swaps with a blur), a four-segment meter whose segments light up one after
+ * another and change colour by level (error → warning → good → strong), a label
+ * that changes with a blur and a list of requirements whose checks draw
+ * themselves. A polite status announces the level once typing pauses.
+ */
+
+export interface PasswordStrengthOptions {
+  minLength?: number;
+  /** Replace the built-in scoring. */
+  score?: (value: string) => PasswordScore;
+  /** Below this score the field reports itself invalid (setCustomValidity). */
+  requireScore?: number;
+  labels?: { show?: string; hide?: string; invalid?: string; checks?: Partial<Record<keyof PasswordChecks, string>> };
+  onChange?: (result: PasswordScore) => void;
+}
+
+export interface PasswordStrengthInstance extends Instance {
+  readonly score: number;
+  readonly value: string;
+}
+
+const EYE = 'M2.5 12s3.5-6.5 9.5-6.5 9.5 6.5 9.5 6.5-3.5 6.5-9.5 6.5S2.5 12 2.5 12z';
+const PUPIL = 'M12 9.2a2.8 2.8 0 1 0 0 5.6 2.8 2.8 0 0 0 0-5.6z';
+const SLASH = 'M4 4l16 16';
+const CHECK = 'M5 12.5l4.5 4.5L19 7.5';
+const ORDER: Array<keyof PasswordChecks> = ['length', 'lower', 'upper', 'number', 'symbol'];
+let sequence = 0;
+
+const icon = (paths: string[], part: string) => {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('aria-hidden', 'true');
+  svg.dataset.mkPart = part;
+  for (const d of paths) {
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', d);
+    path.setAttribute('pathLength', '1');
+    svg.append(path);
+  }
+  return svg;
+};
+
+export function createPasswordStrength(root: HTMLElement | null, options: PasswordStrengthOptions = {}): PasswordStrengthInstance {
+  if (!root) return inert({ score: 0, value: '' });
+  registerMotion();
+  const scope = createScope();
+  const uid = `mk-password-${++sequence}`;
+  const minLength = Number.isFinite(options.minLength) && options.minLength! > 0 ? Math.floor(options.minLength!) : 8;
+  const score = options.score ?? ((value: string) => scorePassword(value, minLength));
+  const labels = {
+    show: 'Mostrar contraseña',
+    hide: 'Ocultar contraseña',
+    invalid: 'Elige una contraseña más fuerte.',
+    ...options.labels,
+    checks: { length: `Al menos ${minLength} caracteres`, lower: 'Una minúscula', upper: 'Una mayúscula', number: 'Un número', symbol: 'Un símbolo', ...options.labels?.checks },
+  };
+  const made: Element[] = [];
+  scope.add(() => made.forEach((element) => element.remove()));
+
+  let input = root.querySelector<HTMLInputElement>('input[type="password"], input[data-mk-password]');
+  if (!input) {
+    input = document.createElement('input');
+    input.autocomplete = 'new-password';
+    input.setAttribute('aria-label', 'Contraseña');
+    root.append(input);
+    made.push(input);
+  }
+  scope.attr(input, 'type', 'password');
+  scope.attr(input, 'data-mk-password', '');
+  const field = document.createElement('span');
+  field.dataset.mkPasswordField = '';
+  input.replaceWith(field);
+  field.append(input);
+  scope.add(() => field.replaceWith(input!));
+  const toggle = document.createElement('button');
+  toggle.type = 'button';
+  toggle.dataset.mkPasswordToggle = '';
+  toggle.setAttribute('aria-pressed', 'false');
+  toggle.setAttribute('aria-label', labels.show);
+  if (input.id) toggle.setAttribute('aria-controls', input.id);
+  const eye = icon([EYE, PUPIL, SLASH], 'eye');
+  toggle.append(eye);
+  field.append(toggle);
+
+  const meter = document.createElement('div');
+  meter.dataset.mkPasswordMeter = '';
+  meter.setAttribute('aria-hidden', 'true');
+  const segments = Array.from({ length: 4 }, () => {
+    const segment = document.createElement('span');
+    segment.append(document.createElement('i'));
+    meter.append(segment);
+    return segment;
+  });
+  const label = document.createElement('span');
+  label.dataset.mkPasswordLabel = '';
+  meter.append(label);
+  const list = document.createElement('ul');
+  list.dataset.mkPasswordChecks = '';
+  list.id = `${uid}-checks`;
+  const items = ORDER.map((key) => {
+    const item = document.createElement('li');
+    item.dataset.mkCheck = key;
+    item.append(icon([CHECK], 'check'), labels.checks[key] ?? key);
+    list.append(item);
+    return item;
+  });
+  const live = document.createElement('span');
+  live.className = 'mk-sr-only';
+  live.setAttribute('role', 'status');
+  root.append(meter, list, live);
+  made.push(meter, list, live);
+  scope.attr(input, 'aria-describedby', [input.getAttribute('aria-describedby'), list.id].filter(Boolean).join(' '));
+  scope.attr(root, 'data-mk-ready', '');
+
+  const effects = new Set<gsap.core.Animation>();
+  const keep = (animation: gsap.core.Animation | null) => {
+    if (!animation) return;
+    effects.add(animation);
+    // Finished ones leave as new ones arrive: the animation's own onComplete stays untouched.
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
+  };
+  let announce: ReturnType<typeof setTimeout> | undefined;
+  scope.add(() => {
+    clearTimeout(announce);
+    for (const effect of effects) effect.kill();
+    effects.clear();
+  });
+
+  let result = score(input.value);
+  let lit = 0;
+  const paint = (animate: boolean) => {
+    const previous = lit;
+    const level = input!.value ? Math.max(1, result.score) : 0;
+    lit = level;
+    scope.attr(root, 'data-mk-score', input!.value ? String(result.score) : null);
+    const bars = segments.map((segment) => segment.firstElementChild as HTMLElement);
+    if (!animate || reduced()) gsap.set(bars, { scaleX: (i: number) => (i < level ? 1 : 0) });
+    else if (level > previous) keep(gsap.fromTo(bars.slice(previous, level), { scaleX: 0 }, { scaleX: 1, duration: 0.35, ease: EASE.swatch, stagger: 0.07 }));
+    else if (level < previous) keep(gsap.to(bars.slice(level, previous).reverse(), { scaleX: 0, duration: 0.2, ease: 'power2.in', stagger: 0.04 }));
+    if (label.textContent !== result.label) {
+      if (!animate || reduced()) label.textContent = result.label;
+      else {
+        gsap.killTweensOf(label);
+        keep(
+          gsap
+            .timeline()
+            .to(label, { opacity: 0, filter: 'blur(4px)', y: -3, duration: 0.12 })
+            .call(() => {
+              label.textContent = result.label;
+            })
+            .fromTo(label, { opacity: 0, filter: 'blur(4px)', y: 3 }, { opacity: 1, filter: 'blur(0px)', y: 0, duration: 0.25, ease: EASE.pop, clearProps: 'all' }),
+        );
+      }
+    }
+    items.forEach((item, i) => {
+      const met = result.checks[ORDER[i]!];
+      if (item.hasAttribute('data-mk-met') === met) return;
+      item.toggleAttribute('data-mk-met', met);
+      const path = item.querySelector('path');
+      if (met && path && animate && !reduced()) keep(gsap.fromTo(path, { strokeDashoffset: 1 }, { strokeDashoffset: 0, duration: 0.35, ease: 'power2.out' }));
+    });
+    if (Number.isFinite(options.requireScore)) input!.setCustomValidity(input!.value && result.score < options.requireScore! ? labels.invalid : '');
+  };
+
+  const update = () => {
+    result = score(input!.value);
+    paint(true);
+    options.onChange?.(result);
+    root.dispatchEvent(new CustomEvent('mk:strength', { bubbles: true, detail: { score: result.score, label: result.label, met: result.checks } }));
+    clearTimeout(announce);
+    announce = setTimeout(() => {
+      if (!scope.disposed) live.textContent = input!.value ? `Fortaleza: ${result.label}` : '';
+    }, 700);
+  };
+
+  scope.on(input, 'input', update);
+  scope.on(toggle, 'click', () => {
+    const show = input!.type === 'password';
+    input!.type = show ? 'text' : 'password';
+    toggle.setAttribute('aria-pressed', String(show));
+    toggle.setAttribute('aria-label', show ? labels.hide : labels.show);
+    root.toggleAttribute('data-mk-visible', show);
+    const slash = eye.querySelectorAll('path')[2];
+    if (!reduced()) {
+      keep(gsap.fromTo(eye, { scale: 0.7, filter: 'blur(3px)' }, { scale: 1, filter: 'blur(0px)', duration: 0.35, ease: EASE.click, clearProps: 'all' }));
+      if (slash) keep(gsap.fromTo(slash, { strokeDashoffset: show ? 1 : 0 }, { strokeDashoffset: show ? 0 : 1, duration: 0.3, ease: 'power2.out' }));
+    } else if (slash) gsap.set(slash, { strokeDashoffset: show ? 0 : 1 });
+  });
+  scope.add(() => root.removeAttribute('data-mk-visible'));
+  scope.add(() => input!.setCustomValidity(''));
+  gsap.set(eye.querySelectorAll('path')[2]!, { strokeDasharray: 1, strokeDashoffset: 1 });
+  for (const item of items) gsap.set(item.querySelector('path')!, { strokeDasharray: 1, strokeDashoffset: 0 });
+  paint(false);
+
+  return {
+    get score() {
+      return result.score;
+    },
+    get value() {
+      return input!.value;
+    },
+    destroy: () => scope.dispose(),
+  };
+}