@yewdiel21/motion-kit 0.10.0 → 0.14.0

package/src/components/password-strength/password-strength.css

@@ -0,0 +1,182 @@
+/* password-strength — a Melonmind field (16 px radius, surface-container-high, 3 px focus ring) with an eye toggle,
+   four rounded segments that light up by level and a checklist whose checks draw themselves. */
+.mk-password-strength,
+mk-password-strength {
+  --mk-password-weak: var(--mk-error);
+  --mk-password-fair: #e8a317;
+  --mk-password-good: #3c9a5f;
+  --mk-password-strong: var(--mk-accent);
+  --mk-password-tone: var(--mk-outline);
+  display: grid;
+  gap: 0.75rem;
+  color: var(--mk-text);
+  font-family: var(--mk-font);
+}
+
+:is(.mk-password-strength, mk-password-strength):is([data-mk-score='0'], [data-mk-score='1']) {
+  --mk-password-tone: var(--mk-password-weak);
+}
+
+:is(.mk-password-strength, mk-password-strength)[data-mk-score='2'] {
+  --mk-password-tone: var(--mk-password-fair);
+}
+
+:is(.mk-password-strength, mk-password-strength)[data-mk-score='3'] {
+  --mk-password-tone: var(--mk-password-good);
+}
+
+:is(.mk-password-strength, mk-password-strength)[data-mk-score='4'] {
+  --mk-password-tone: var(--mk-password-strong);
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password-field] {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password] {
+  width: 100%;
+  min-height: 3.25rem;
+  padding: 0 3.5rem 0 1.1rem;
+  border: 0;
+  border-radius: 16px;
+  outline: none;
+  background: var(--mk-surface-4);
+  color: var(--mk-text);
+  font: inherit;
+  font-size: 1rem;
+  letter-spacing: 0.02em;
+  transition:
+    box-shadow 0.5s,
+    background-color 0.5s;
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password]:hover {
+  background: var(--mk-surface-5);
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password]:focus {
+  background: var(--mk-surface-2);
+  box-shadow:
+    0 0 0 3px var(--mk-outline-soft),
+    0 0.5px 2.5px rgb(0 0 0 / 0.3);
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password-toggle] {
+  position: absolute;
+  right: 0.4rem;
+  display: grid;
+  place-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--mk-muted);
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password-toggle]:hover {
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password-toggle]:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+:is(.mk-password-strength, mk-password-strength) svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password-meter] {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password-meter] > span:not([data-mk-password-label]) {
+  height: 6px;
+  overflow: hidden;
+  border-radius: 64px;
+  background: var(--mk-surface-4);
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password-meter] i {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--mk-password-tone);
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: background-color 0.3s ease;
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password-label] {
+  min-width: 6.5rem;
+  margin-left: 0.4rem;
+  color: var(--mk-password-tone);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-align: right;
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password-checks] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  gap: 0.3rem 1rem;
+  margin: 0;
+  padding: 0;
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+  list-style: none;
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-check] {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  transition: color 0.2s ease;
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-check] svg {
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+  padding: 2px;
+  border-radius: 50%;
+  background: var(--mk-surface-3);
+  stroke: transparent;
+  stroke-width: 3;
+  transition:
+    background-color 0.2s ease,
+    stroke 0.2s ease;
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-check][data-mk-met] {
+  color: var(--mk-text);
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-check][data-mk-met] svg {
+  background: var(--mk-password-good);
+  stroke: #fff;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-password-strength, mk-password-strength) :is([data-mk-password], [data-mk-check], [data-mk-check] svg, [data-mk-password-meter] i) {
+    transition: none;
+  }
+}

package/src/components/password-strength/react.tsx

@@ -0,0 +1,36 @@
+'use client';
+import { useRef, type InputHTMLAttributes } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createPasswordStrength, type PasswordStrengthOptions } from './engine';
+
+export interface PasswordStrengthProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'>, Omit<PasswordStrengthOptions, 'onChange'> {
+  onStrength?: PasswordStrengthOptions['onChange'];
+  /** The text of the field as it changes. */
+  onValueChange?: (value: string) => void;
+}
+
+/** <PasswordStrength name="password" aria-label="Contraseña" requireScore={3} onStrength={setResult} />. The field stays uncontrolled. */
+export function PasswordStrength({ minLength, score, requireScore, labels, onStrength, onValueChange, className, ...props }: PasswordStrengthProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const strength = useLatest(onStrength);
+  const value = useLatest(onValueChange);
+  const scorer = useLatest(score);
+  const custom = score !== undefined;
+  const key = JSON.stringify(labels ?? {});
+  useIsomorphicLayoutEffect(() => {
+    const instance = createPasswordStrength(ref.current, {
+      minLength,
+      requireScore,
+      labels,
+      score: custom ? (text) => scorer.current!(text) : undefined,
+      onChange: (result) => strength.current?.(result),
+    });
+    return () => instance.destroy();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [minLength, requireScore, key, custom]);
+  return (
+    <div ref={ref} className={['mk-password-strength', className].filter(Boolean).join(' ')}>
+      <input autoComplete="new-password" aria-label="Contraseña" {...props} type="password" onInput={(event) => value.current?.(event.currentTarget.value)} />
+    </div>
+  );
+}

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

@@ -0,0 +1,62 @@
+/*
+ * Password strength (pure): length and variety raise the score, common
+ * passwords, runs (abc, 123) and repeats (aaa) lower it. 0–4, a label and the
+ * checks met. A heuristic for feedback, not a security guarantee: the server
+ * decides what it accepts.
+ */
+
+export interface PasswordChecks {
+  length: boolean;
+  lower: boolean;
+  upper: boolean;
+  number: boolean;
+  symbol: boolean;
+}
+
+export interface PasswordScore {
+  score: 0 | 1 | 2 | 3 | 4;
+  label: string;
+  checks: PasswordChecks;
+}
+
+export const STRENGTH_LABELS = ['Muy débil', 'Débil', 'Aceptable', 'Fuerte', 'Muy fuerte'] as const;
+
+const COMMON = new Set(
+  'password password1 123456 1234567 12345678 123456789 1234567890 qwerty qwerty123 abc123 111111 000000 iloveyou admin welcome letmein monkey dragon contraseña contrasena secreto hola123 football baseball sunshine princess'.split(' '),
+);
+
+const runs = (value: string) => {
+  const text = value.toLowerCase();
+  for (let i = 0; i + 2 < text.length; i++) {
+    const [a, b, c] = [text.charCodeAt(i), text.charCodeAt(i + 1), text.charCodeAt(i + 2)];
+    if ((b - a === 1 && c - b === 1) || (a - b === 1 && b - c === 1)) return true;
+  }
+  return false;
+};
+
+export function scorePassword(value: string, minLength = 8): PasswordScore {
+  const text = String(value ?? '');
+  const checks: PasswordChecks = {
+    length: text.length >= minLength,
+    lower: /[a-zà-ÿ]/.test(text),
+    upper: /[A-ZÀ-Þ]/.test(text),
+    number: /\d/.test(text),
+    symbol: /[^\p{L}\p{N}\s]/u.test(text),
+  };
+  if (!text) return { score: 0, label: '', checks };
+  const variety = [checks.lower, checks.upper, checks.number, checks.symbol].filter(Boolean).length;
+  let points = 0;
+  if (text.length >= minLength) points += 1;
+  if (text.length >= minLength + 4) points += 1;
+  if (text.length >= minLength + 8) points += 1;
+  if (variety >= 3) points += 1;
+  if (variety === 4) points += 1;
+  // Penalties count after the cap: a long, varied password with a pattern is not the best.
+  points = Math.min(4, points);
+  if (/(.)\1\1/.test(text)) points -= 1;
+  if (runs(text)) points -= 1;
+  if (text.length < minLength) points = Math.min(points, 1);
+  if (COMMON.has(text.toLowerCase())) points = 0;
+  const score = Math.max(0, Math.min(4, points)) as PasswordScore['score'];
+  return { score, label: STRENGTH_LABELS[score], checks };
+}

package/src/components/popover/README.md

@@ -0,0 +1,44 @@
+# popover
+
+Panel flotante interactivo anclado a su botón, sobre la misma superficie que `menu` y `color-picker`: crece desde el botón (transformación de contenedor de `motion/morph.ts`) mientras su contenido entra en cascada como las opciones de un menú (desde 90 % y un blur de 4 px, 40 ms entre piezas), y al cerrar se pliega de vuelta en él. Se cierra con Escape, con un clic fuera o con cualquier `[data-mk-close]` de dentro, y el foco vuelve al botón.
+
+Importa también `css/components/dialog.css` (o el CSS completo). La CLI lo copia: la entrada `requires` dialog.
+
+## HTML / Astro
+
+```html
+<mk-popover class="mk-popover">
+  <button class="mk-button" data-mk-popover-trigger>Filtros</button>
+  <div data-mk-popover-content>
+    <label class="mk-field">Estado <select>…</select></label>
+    <button class="mk-button mk-button--primary" data-mk-close>Aplicar</button>
+  </div>
+</mk-popover>
+```
+
+`[data-mk-popover-content]` pasa a un `<dialog>` que crea el motor y vuelve a su sitio al destruirlo. También puedes escribir directamente `<dialog data-mk-popover-panel>`.
+
+## React
+
+```tsx
+<Popover trigger={<button className="mk-button">Filtros</button>} onOpenChange={setOpen}>
+  <FiltersForm />
+</Popover>
+```
+
+Con `open` es controlado. `ref` da `open()` y `close()`.
+
+## Opciones
+
+| Opción | Atributo | Por defecto | Qué hace |
+|---|---|---|---|
+| `label` | `label` | el texto del botón | Nombre accesible del panel. |
+| `onOpenChange(open)` | — | — | Al abrirse o cerrarse. |
+
+## API y eventos
+
+`open()`, `close()`, `toggle()`, `isOpen`, `panel` (el `<dialog>`), `destroy()`. Evento `mk:open-change` con `{ open }`.
+
+## Estilo
+
+Esquinas de 20 px sobre `--mk-surface-1`, tan ancho como su contenido hasta 22rem, con 1rem de relleno. Se estiliza por clase (`.mk-popover-panel`), así la copia que se pliega al cerrar conserva su aspecto. En teléfonos el diálogo anclado se centra. Con movimiento reducido aparece sin crecer.

package/src/components/popover/element.ts

@@ -0,0 +1,31 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createPopover, type PopoverInstance } from './engine';
+
+/**
+ * <mk-popover class="mk-popover">
+ *   <button data-mk-popover-trigger>Filtros</button>
+ *   <div data-mk-popover-content>…</div>
+ * </mk-popover>
+ * Emits mk:open-change ({open}).
+ */
+export class MkPopoverElement extends MkElement<PopoverInstance> {
+  static options: Record<string, OptionType> = { label: 'string' };
+
+  protected create(options: Record<string, unknown>) {
+    return createPopover(this, options);
+  }
+
+  open() {
+    this.instance?.open();
+  }
+
+  close() {
+    this.instance?.close();
+  }
+
+  get isOpen() {
+    return this.instance?.isOpen ?? false;
+  }
+}
+
+export const definePopover = () => defineElement('mk-popover', MkPopoverElement);

package/src/components/popover/engine.ts

@@ -0,0 +1,114 @@
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+import { flowInMenu } from '../../motion/entrances';
+import { createDialog } from '../dialog/engine';
+
+/*
+ * Popover: an interactive panel anchored to its trigger, on the same anchored
+ * dialog surface as menu and color-picker. It grows out of the trigger
+ * (motion/morph.ts container transform) while its content flows in like a
+ * menu's options (from 90 % out of a 4 px blur, 40 ms apart), folds back into
+ * the trigger on close, closes with Escape, a click outside or any
+ * [data-mk-close] inside, and gives the focus back to the trigger. A
+ * dialog[data-mk-popover-panel] is used as it is; [data-mk-popover-content] is
+ * moved into a dialog the engine creates and put back on destroy.
+ */
+
+export interface PopoverOptions {
+  /** Accessible name of the panel (default: the trigger's text). */
+  label?: string;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export interface PopoverInstance extends Instance {
+  open(): void;
+  close(): void;
+  toggle(): void;
+  readonly isOpen: boolean;
+  /** The panel (a <dialog>). */
+  readonly panel: HTMLElement | null;
+}
+
+let sequence = 0;
+
+export function createPopover(root: HTMLElement | null, options: PopoverOptions = {}): PopoverInstance {
+  const inertInstance = inert<PopoverInstance>({ open() {}, close() {}, toggle() {}, isOpen: false, panel: null });
+  if (!root) return inertInstance;
+  let dialog = root.querySelector<HTMLDialogElement>('dialog[data-mk-popover-panel]');
+  const content = dialog ? null : root.querySelector<HTMLElement>('[data-mk-popover-content]');
+  const trigger =
+    root.querySelector<HTMLElement>('[data-mk-popover-trigger]') ??
+    [...root.querySelectorAll<HTMLElement>('button, a[href], [role="button"]')].find((element) => !dialog?.contains(element) && !content?.contains(element)) ??
+    null;
+  if (!trigger || (!dialog && !content)) return inertInstance;
+  const scope = createScope();
+
+  if (!dialog) {
+    // The authored content moves into a dialog in its place, and back on destroy.
+    const created = document.createElement('dialog');
+    const anchor = content!.nextSibling;
+    const parent = content!.parentNode!;
+    parent.insertBefore(created, content);
+    created.append(content!);
+    dialog = created;
+    scope.add(() => {
+      if (content!.isConnected || created.isConnected) parent.insertBefore(content!, created.isConnected ? created : anchor);
+      created.remove();
+    });
+  }
+  const panel = dialog;
+  // Classes, not only attributes: the copy that folds back into the trigger on close keeps classes only.
+  scope.attr(panel, 'class', [panel.getAttribute('class'), 'mk-dialog', 'mk-popover-panel'].filter(Boolean).join(' '));
+  if (!panel.id) scope.attr(panel, 'id', `mk-popover-${++sequence}`);
+  if (!panel.hasAttribute('aria-label') && !panel.hasAttribute('aria-labelledby')) scope.attr(panel, 'aria-label', options.label ?? trigger.textContent?.trim() ?? 'Panel');
+  scope.attr(trigger, 'aria-haspopup', 'dialog');
+  scope.attr(trigger, 'aria-expanded', 'false');
+  scope.attr(trigger, 'aria-controls', panel.id);
+  scope.attr(root, 'data-mk-ready', '');
+
+  const announce = (open: boolean) => {
+    trigger.setAttribute('aria-expanded', String(open));
+    options.onOpenChange?.(open);
+    root.dispatchEvent(new CustomEvent('mk:open-change', { bubbles: true, detail: { open } }));
+  };
+  let flow: ReturnType<typeof flowInMenu> = null;
+  const surface = createDialog(panel, {
+    placement: 'anchor',
+    backdrop: false,
+    drag: false,
+    autoResize: false,
+    triggers: false,
+    animateContent: false,
+    // Like a menu's options: the content flows in while the surface grows out of the trigger.
+    onOpen: () => {
+      flow?.kill();
+      flow = flowInMenu([...panel.children].filter((child) => !child.classList.contains('mk-morph-face')));
+      announce(true);
+    },
+    onClose: () => announce(false),
+  });
+  scope.add(() => {
+    flow?.kill();
+    surface.destroy();
+  });
+
+  const open = () => {
+    if (!surface.isOpen) surface.open(trigger);
+  };
+  scope.on(trigger, 'click', (event) => {
+    event.preventDefault();
+    if (surface.isOpen) surface.close();
+    else open();
+  });
+
+  return {
+    open,
+    close: () => surface.close(),
+    toggle: () => (surface.isOpen ? surface.close() : open()),
+    get isOpen() {
+      return surface.isOpen;
+    },
+    panel,
+    destroy: () => scope.dispose(),
+  };
+}

package/src/components/popover/popover.css

@@ -0,0 +1,24 @@
+/* popover — an anchored .mk-dialog (needs dialog.css): 20 px corners on surface-1, as wide as its content up to
+   22rem, 1rem padding. Styled by class: the copy that folds back into the trigger keeps classes only. */
+.mk-popover,
+mk-popover {
+  display: inline-block;
+}
+
+.mk-dialog.mk-popover-panel {
+  --mk-dialog-radius: 20px;
+  --mk-dialog-bg: var(--mk-surface-1);
+  --mk-dialog-shadow: 0 16px 48px -12px color-mix(in srgb, var(--mk-shadow-color, #000) 35%, transparent);
+  gap: 0.75rem;
+  width: max-content;
+  min-width: min(14rem, calc(100vw - 32px));
+  max-width: min(22rem, calc(100vw - 32px));
+  padding: 1rem;
+}
+
+/* Phones: the anchored dialog is centred by dialog.css; keep it a panel, not a sheet. */
+@media (max-width: 679px) {
+  .mk-dialog.mk-popover-panel {
+    max-width: calc(100vw - 32px);
+  }
+}

package/src/components/popover/react.tsx

@@ -0,0 +1,50 @@
+'use client';
+import { forwardRef, useImperativeHandle, useRef, type HTMLAttributes, type ReactNode } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createPopover, type PopoverInstance, type PopoverOptions } from './engine';
+
+export interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'>, PopoverOptions {
+  /** The control that opens it (a button). */
+  trigger: ReactNode;
+  /** Controlled open state (optional). */
+  open?: boolean;
+  /** Extra class for the panel. */
+  panelClassName?: string;
+}
+
+export interface PopoverHandle {
+  open(): void;
+  close(): void;
+}
+
+/** <Popover trigger={<button>Filtros</button>}>…</Popover>: the panel grows out of the trigger. */
+export const Popover = forwardRef<PopoverHandle, PopoverProps>(function Popover({ trigger, open, label, onOpenChange, panelClassName, className, children, ...props }, handle) {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<PopoverInstance | null>(null);
+  const change = useLatest(onOpenChange);
+  useImperativeHandle(handle, () => ({ open: () => instance.current?.open(), close: () => instance.current?.close() }), []);
+  useIsomorphicLayoutEffect(() => {
+    const created = createPopover(ref.current, { label, onOpenChange: (value) => change.current?.(value) });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [label]);
+  useIsomorphicLayoutEffect(() => {
+    if (open === undefined || !instance.current || instance.current.isOpen === open) return;
+    if (open) instance.current.open();
+    else instance.current.close();
+  }, [open]);
+  return (
+    <div {...props} ref={ref} className={['mk-popover', className].filter(Boolean).join(' ')}>
+      <span data-mk-popover-trigger-slot="" style={{ display: 'contents' }}>
+        {trigger}
+      </span>
+      <dialog data-mk-popover-panel="" className={panelClassName}>
+        {children}
+      </dialog>
+    </div>
+  );
+});

package/src/components/progress/README.md

@@ -0,0 +1,17 @@
+# progress
+
+Barra o anillo de progreso con valor determinado o indeterminado. El anillo sigue el `MetricsRing` de Melon Mind: radio `(tamaño − trazo) / 2`, `stroke-dasharray` derivado del ratio y arranque a las 12.
+
+```html
+<mk-progress class="mk-progress" value="40" label="Subiendo informe" show-value></mk-progress>
+<mk-progress class="mk-progress" variant="ring" value="72" label="Meta mensual" show-value></mk-progress>
+<mk-progress class="mk-progress" label="Procesando"></mk-progress> <!-- indeterminado -->
+```
+
+`defineElements()` desde `/elements`, `createProgress(root, options)` o `<Progress value={42} label="Subida" showValue />` desde `/react`.
+
+Opciones: `value` (número o `null` = indeterminado; por defecto `min`), `min=0`, `max=100`, `label` (aria-label), `variant='linear'|'ring'`, `showValue`, `formatValue(value, ratio)` (texto visible y `aria-valuetext`), `duration=.7` (segundos del deslizamiento). API: `setValue(number | null)`, `value`, `destroy()`.
+
+El root recibe `role="progressbar"`, `aria-valuemin/max/now` (sin `aria-valuenow` cuando es indeterminado). Valores no finitos se ignoran y los demás se acotan a los límites. No hay región viva: el valor se lee al llegar a la barra, sin anunciar cada cambio.
+
+El dibujo es un único hijo decorativo `[data-mk-progress-visual]`; el contenido que ya tenga el root se conserva y `destroy()` restaura atributos y estilos. Al subir o bajar, el relleno (o el arco) se desliza con GSAP, las cifras ruedan, la punta brilla al avanzar, el anillo respira y llegar al máximo lanza un estallido. Variables: `--mk-progress-height` (10px), `--mk-progress-size` (anillo, 4.5rem), `--mk-progress-track`, `--mk-progress-fill`. Movimiento reducido: el valor cambia sin transición y el indeterminado queda como relleno parcial estático.

package/src/components/progress/element.ts

@@ -0,0 +1,30 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createProgress, type ProgressInstance } from './engine';
+
+/**
+ * <mk-progress class="mk-progress" value="40" label="Subida" show-value></mk-progress>
+ * Without `value` (or value="indeterminate") it is indeterminate. A new value moves the fill.
+ */
+export class MkProgressElement extends MkElement<ProgressInstance> {
+  static options: Record<string, OptionType> = { value: 'number', min: 'number', max: 'number', label: 'string', variant: 'string', showValue: 'boolean' };
+
+  protected create(options: Record<string, unknown>) {
+    return createProgress(this, { ...options, value: typeof options.value === 'number' ? options.value : null });
+  }
+
+  attributeChangedCallback(name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.instance) return;
+    if (name === 'value') this.instance.setValue(next === null || !Number.isFinite(Number(next)) ? null : Number(next));
+    else super.attributeChangedCallback(name, previous, next);
+  }
+
+  setValue(value: number | null) {
+    this.instance?.setValue(value);
+  }
+
+  get value() {
+    return this.instance?.value ?? null;
+  }
+}
+
+export const defineProgress = () => defineElement('mk-progress', MkProgressElement);