@yewdiel21/motion-kit 0.10.0 → 0.15.0

package/src/components/context-menu/engine.ts

@@ -0,0 +1,153 @@
+import { createScope } from '../../core/scope';
+import { inert, warnOnce, type Instance } from '../../core/types';
+import { createMenu, type MenuInstance, type MenuOptions } from '../menu/engine';
+
+/*
+ * Context menu: the options menu (same surface, cascade, arrows/Home/End,
+ * Enter, Escape, disabled items) opened by a right click at the pointer, by
+ * the Menu key or Shift+F10 beside the focused element, or by a long press on
+ * touch. It scales in where it opens (no morph from a phantom source), stays
+ * inside the viewport and gives focus back to the element focused before it.
+ * Inputs and editable text keep the browser's own menu unless overrideEditable.
+ * Parts: [data-mk-context-trigger] (else the root) and dialog[data-mk-context-menu].
+ */
+
+export interface ContextMenuOptions extends Omit<MenuOptions, 'triggers' | 'anchor'> {
+  /** Replace the browser menu on inputs and editable text too. */
+  overrideEditable?: boolean;
+  /** Touch long press that opens it, in ms (0: off). Default 550. */
+  longPress?: number;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export interface ContextMenuInstance extends Instance {
+  /** Open at viewport coordinates; focus returns to `origin` (default: the focused element). */
+  openAt(x: number, y: number, origin?: HTMLElement | null): void;
+  /** Open beside `origin` (default: the focused element in the trigger, else the trigger). */
+  open(origin?: HTMLElement | null): void;
+  close(): void;
+  readonly isOpen: boolean;
+  readonly menu: MenuInstance | null;
+}
+
+const TRIGGER = '[data-mk-context-trigger]';
+const EDITABLE = 'input, textarea, select, [contenteditable]:not([contenteditable="false"])';
+const SLOP = 10;
+
+const pointBox = (x: number, y: number) =>
+  ({ x, y, left: x, top: y, right: x, bottom: y, width: 0, height: 0, toJSON: () => ({ x, y }) }) as DOMRect;
+
+const focusable = (element: Element | null): element is HTMLElement =>
+  element instanceof HTMLElement && element !== document.body && element.isConnected && !element.hasAttribute('disabled') && (element.tabIndex >= 0 || element.matches('a[href], button, input, select, textarea, [tabindex]'));
+
+export function createContextMenu(root: HTMLElement | null, options: ContextMenuOptions = {}): ContextMenuInstance {
+  const trigger = root ? (root.matches(TRIGGER) ? root : root.querySelector<HTMLElement>(TRIGGER) ?? root) : null;
+  const dialog = root?.querySelector<HTMLElement>('[data-mk-context-menu]') ?? null;
+  if (!root || !trigger || !dialog) {
+    warnOnce('context-menu: needs a [data-mk-context-menu] <dialog> inside the root');
+    return inert({ openAt() {}, open() {}, close() {}, isOpen: false, menu: null });
+  }
+  const scope = createScope();
+  const { overrideEditable = false, longPress = 550, onOpenChange, ...menuOptions } = options;
+  let box: DOMRect | null = null;
+  let returnTo: HTMLElement | null = null;
+
+  const menu = createMenu(dialog, { ...menuOptions, triggers: false, anchor: () => box });
+  scope.add(() => menu.destroy());
+  if (!focusable(trigger)) scope.attr(trigger, 'tabindex', '0');
+  scope.attr(trigger, 'aria-haspopup', 'menu');
+  scope.attr(root, 'data-mk-ready', '');
+
+  const inMenu = (target: EventTarget | null) => target instanceof Node && dialog.contains(target);
+  const editable = (target: EventTarget | null) => !overrideEditable && target instanceof Element && Boolean(target.closest(EDITABLE));
+
+  const show = (rect: DOMRect, origin: HTMLElement | null) => {
+    if (scope.disposed || menu.isOpen) return;
+    box = rect;
+    const active = document.activeElement;
+    returnTo = origin ?? (focusable(active) && !inMenu(active) ? active : focusable(trigger) ? trigger : null);
+    // null: no morph source; the menu scales in where it is placed.
+    menu.open(null);
+  };
+  const openAt = (x: number, y: number, origin?: HTMLElement | null) => {
+    if (!Number.isFinite(x) || !Number.isFinite(y)) return;
+    show(pointBox(x, y), origin ?? null);
+  };
+  const open = (origin?: HTMLElement | null) => {
+    const active = document.activeElement;
+    const from = origin ?? (active instanceof HTMLElement && trigger.contains(active) && !inMenu(active) ? active : trigger);
+    show(from.getBoundingClientRect(), from);
+  };
+
+  scope.on(dialog, 'mk:open', () => {
+    scope.attr(trigger, 'aria-expanded', 'true');
+    onOpenChange?.(true);
+  });
+  scope.on(dialog, 'mk:closed', () => {
+    scope.attr(trigger, 'aria-expanded', null);
+    box = null;
+    const target = returnTo;
+    returnTo = null;
+    if (target?.isConnected) target.focus({ preventScroll: true });
+    onOpenChange?.(false);
+  });
+
+  scope.on(trigger, 'contextmenu', (event) => {
+    if (inMenu(event.target)) {
+      event.preventDefault();
+      return;
+    }
+    if (editable(event.target)) return;
+    event.preventDefault();
+    if (menu.isOpen) return;
+    const mouse = event as MouseEvent;
+    // A keyboard-made contextmenu has no pointer position worth using.
+    if (mouse.button === 0 && mouse.clientX === 0 && mouse.clientY === 0) open();
+    else openAt(mouse.clientX, mouse.clientY);
+  });
+  scope.on(trigger, 'keydown', (event) => {
+    const key = event as KeyboardEvent;
+    if (inMenu(key.target) || !(key.key === 'ContextMenu' || (key.key === 'F10' && key.shiftKey))) return;
+    if (editable(key.target)) return;
+    key.preventDefault();
+    open(key.target instanceof HTMLElement && trigger.contains(key.target) ? key.target : trigger);
+  });
+
+  if (longPress > 0) {
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    let start: { x: number; y: number } | null = null;
+    const cancel = () => {
+      clearTimeout(timer);
+      timer = undefined;
+      start = null;
+    };
+    scope.on(trigger, 'pointerdown', (event) => {
+      const pointer = event as PointerEvent;
+      if (pointer.pointerType !== 'touch' || inMenu(pointer.target) || editable(pointer.target)) return;
+      cancel();
+      start = { x: pointer.clientX, y: pointer.clientY };
+      timer = setTimeout(() => {
+        const at = start;
+        cancel();
+        if (at) openAt(at.x, at.y, focusable(trigger) ? trigger : null);
+      }, longPress);
+    });
+    scope.on(trigger, 'pointermove', (event) => {
+      const pointer = event as PointerEvent;
+      if (start && Math.hypot(pointer.clientX - start.x, pointer.clientY - start.y) > SLOP) cancel();
+    });
+    for (const type of ['pointerup', 'pointercancel', 'pointerleave']) scope.on(trigger, type, cancel);
+    scope.add(cancel);
+  }
+
+  return {
+    openAt,
+    open,
+    close: () => menu.close(),
+    get isOpen() {
+      return menu.isOpen;
+    },
+    menu,
+    destroy: () => scope.dispose(),
+  };
+}

package/src/components/context-menu/react.tsx

@@ -0,0 +1,57 @@
+'use client';
+import { useRef, type HTMLAttributes, type ReactNode } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import type { DialogVariant } from '../dialog/engine';
+import { Menu } from '../menu/react';
+import { createContextMenu, type ContextMenuInstance } from './engine';
+
+export interface ContextMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+  /** The options: <ContextMenu.Item value="…">, <ContextMenu.Separator />. */
+  menu: ReactNode;
+  /** Accessible name of the menu. */
+  label?: string;
+  onSelect?: (value: string, item: HTMLElement) => void;
+  onOpenChange?: (open: boolean) => void;
+  closeOnSelect?: boolean;
+  overrideEditable?: boolean;
+  longPress?: number;
+  variant?: Exclude<DialogVariant, 'sheet' | 'drawer'>;
+  instanceRef?: { current: ContextMenuInstance | null };
+}
+
+function Root({ menu, label = 'Acciones', onSelect, onOpenChange, closeOnSelect = true, overrideEditable, longPress, variant, instanceRef, className, children, ...props }: ContextMenuProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const select = useLatest(onSelect);
+  const change = useLatest(onOpenChange);
+  useIsomorphicLayoutEffect(() => {
+    const created = createContextMenu(ref.current, {
+      closeOnSelect,
+      overrideEditable,
+      longPress,
+      variant,
+      onSelect: (value, item) => select.current?.(value, item),
+      onOpenChange: (open) => change.current?.(open),
+    });
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      if (instanceRef) instanceRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [closeOnSelect, overrideEditable, longPress, variant]);
+  return (
+    <div {...props} ref={ref} className={['mk-context-menu', className].filter(Boolean).join(' ')} data-mk-context-trigger="">
+      {children}
+      <dialog data-mk-context-menu="" className="mk-dialog mk-menu" aria-label={label}>
+        {menu}
+      </dialog>
+    </div>
+  );
+}
+
+/**
+ * context menu for React: the children are the area that answers a right click,
+ * Menu key, Shift+F10 or long press; `menu` holds the options.
+ * <ContextMenu menu={<><ContextMenu.Item value="rename">Renombrar</ContextMenu.Item><ContextMenu.Separator /></>} onSelect={run}>…</ContextMenu>
+ */
+export const ContextMenu = Object.assign(Root, { Item: Menu.Item, Separator: Menu.Separator });

package/src/components/credit-card/README.md

@@ -0,0 +1,20 @@
+# credit-card
+
+Tarjeta de crédito que se rellena mientras escribes y gira en 3D al llegar al CVC. Los campos son nativos (`autocomplete` cc-number, cc-name, cc-exp y cc-csc); la tarjeta es decorativa (`aria-hidden`).
+
+```html
+<form>
+  <mk-credit-card class="mk-credit-card"></mk-credit-card>
+  <button class="mk-button">Pagar</button>
+</form>
+```
+
+`defineElements()`, `createCreditCard(root, options)` o `<CreditCard onComplete={…} />`. Con `input[data-mk-card-field="number|name|expiry|cvc"]` propios se usan esos; si faltan, el motor los crea.
+
+Microinteracciones (GSAP): cada carácter nuevo entra en su hueco rodando desde abajo con blur; un marco se desliza hasta la parte de la tarjeta que se edita; la marca aparece con `pop`; enfocar el CVC gira la tarjeta 180° (0.8 s, curva swing de Melonmind) y salir la devuelve; un puntero fino la inclina un poco; un dato inválido hace temblar campo y tarjeta.
+
+Opciones: `labels` (textos de campos y errores), `names` (nombres de formulario), `tilt=true`, `onChange({brand, complete, valid})`, `onComplete()`. API: `values` (`{number, name, expiry, cvc}`), `brand`, `valid`, `focus(field)`, `flip(back?)`, `destroy()`. Eventos `mk:change` y `mk:complete`, sin datos de la tarjeta.
+
+Validación de formato: marca por prefijo (Visa, Mastercard, Amex, Discover; la marca se muestra como texto, sin logotipos), agrupación 4-4-4-4 o 4-6-5, Luhn, caducidad MM/AA no vencida y longitud del CVC (4 en Amex). Utilidades puras: `detectBrand`, `formatNumber`, `luhn`, `parseExpiry`, `cvcLength`. No procesa pagos ni guarda datos.
+
+Variables: `--mk-card-width` (22rem), `--mk-card-bg`, `--mk-card-text`, `--mk-card-radius`. Movimiento reducido: los cambios y el giro son instantáneos.

package/src/components/credit-card/card.ts

@@ -0,0 +1,77 @@
+/*
+ * Card number helpers (pure): brand by prefix, grouping, Luhn, expiry and CVC
+ * length. They validate format only; payment checks belong to the app's processor.
+ */
+
+export type CardBrand = 'visa' | 'mastercard' | 'amex' | 'discover' | 'unknown';
+
+/** Text shown on the card for each brand (no logos). */
+export const BRAND_LABELS: Record<CardBrand, string> = { visa: 'VISA', mastercard: 'Mastercard', amex: 'AMEX', discover: 'Discover', unknown: '' };
+
+const only = (text: string) => String(text ?? '').replace(/\D/g, '');
+
+export function detectBrand(number: string): CardBrand {
+  const digits = only(number);
+  if (/^4/.test(digits)) return 'visa';
+  if (/^3[47]/.test(digits)) return 'amex';
+  if (/^(6011|65|64[4-9])/.test(digits)) return 'discover';
+  const two = Number(digits.slice(0, 2));
+  const four = Number(digits.slice(0, 4));
+  if ((two >= 51 && two <= 55) || (digits.length >= 4 && four >= 2221 && four <= 2720)) return 'mastercard';
+  return 'unknown';
+}
+
+/** Digit groups of a brand: Amex 4-6-5, the rest 4-4-4-4. */
+export const cardGroups = (brand: CardBrand) => (brand === 'amex' ? [4, 6, 5] : [4, 4, 4, 4]);
+export const cardLength = (brand: CardBrand) => cardGroups(brand).reduce((sum, n) => sum + n, 0);
+export const cvcLength = (brand: CardBrand) => (brand === 'amex' ? 4 : 3);
+
+/** Digits with a space between groups. */
+export function formatNumber(number: string, brand = detectBrand(number)) {
+  const digits = only(number).slice(0, cardLength(brand));
+  const parts: string[] = [];
+  let at = 0;
+  for (const size of cardGroups(brand)) {
+    if (at >= digits.length) break;
+    parts.push(digits.slice(at, at + size));
+    at += size;
+  }
+  return parts.join(' ');
+}
+
+export function luhn(number: string) {
+  const digits = only(number);
+  if (digits.length < 12) return false;
+  let sum = 0;
+  for (let i = 0; i < digits.length; i++) {
+    let n = Number(digits[digits.length - 1 - i]);
+    if (i % 2 === 1) {
+      n *= 2;
+      if (n > 9) n -= 9;
+    }
+    sum += n;
+  }
+  return sum % 10 === 0;
+}
+
+export interface Expiry {
+  month: number;
+  year: number;
+  /** MM/YY as typed so far. */
+  text: string;
+  valid: boolean;
+}
+
+/** MM/YY from what was typed; valid when complete and not before the current month. */
+export function parseExpiry(text: string, now = new Date()): Expiry {
+  const digits = only(text).slice(0, 4);
+  let formatted = digits;
+  // A first digit above 1 is a month on its own: 4 → 04.
+  if (/^[2-9]$/.test(digits)) formatted = `0${digits}`;
+  if (formatted.length >= 2) formatted = `${formatted.slice(0, 2)}/${formatted.slice(2)}`;
+  const month = Number(formatted.slice(0, 2));
+  const year = formatted.length === 5 ? 2000 + Number(formatted.slice(3, 5)) : NaN;
+  const end = new Date(year, month, 1);
+  const valid = formatted.length === 5 && month >= 1 && month <= 12 && end > new Date(now.getFullYear(), now.getMonth(), 1);
+  return { month, year, text: formatted, valid };
+}

package/src/components/credit-card/credit-card.css

@@ -0,0 +1,287 @@
+/* credit-card — a dark card that fills in as you type (front: chip, brand, number, holder, expiry; back: stripe and CVC),
+   above Melonmind fields (16 px radius, surface-container, 3 px focus ring). The engine rolls the characters in, glides
+   the frame and turns the card in 3D. */
+.mk-credit-card,
+mk-credit-card {
+  --mk-card-width: 22rem;
+  --mk-card-bg: linear-gradient(145deg, #2b2c30 0%, #121315 55%, #050506 100%);
+  --mk-card-text: #f2f3f5;
+  --mk-card-muted: rgb(242 243 245 / 0.55);
+  --mk-card-radius: 20px;
+  display: grid;
+  gap: 1.5rem;
+  justify-items: center;
+  color: var(--mk-text);
+  font-family: var(--mk-font);
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-visual] {
+  width: min(100%, var(--mk-card-width));
+  aspect-ratio: 1.586;
+  container-type: inline-size;
+  perspective: 1200px;
+  cursor: pointer;
+  user-select: none;
+  transform-style: preserve-3d;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-inner] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-face] {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  padding: 7% 7.5%;
+  border-radius: var(--mk-card-radius);
+  background: var(--mk-card-bg);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.12),
+    inset 0 0 0 1px rgb(255 255 255 / 0.06),
+    0 24px 48px -20px rgb(0 0 0 / 0.6);
+  color: var(--mk-card-text);
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+/* A soft sheen across the face. */
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-face]::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(120% 80% at 15% 0%, rgb(255 255 255 / 0.1), transparent 55%);
+  pointer-events: none;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-face='back'] {
+  padding: 0;
+  transform: rotateY(180deg);
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-chip] {
+  position: absolute;
+  top: 12%;
+  left: 7.5%;
+  width: 13%;
+  aspect-ratio: 1.3;
+  border-radius: 6px;
+  background:
+    linear-gradient(90deg, transparent 32%, rgb(0 0 0 / 0.25) 33% 35%, transparent 36% 64%, rgb(0 0 0 / 0.25) 65% 67%, transparent 68%),
+    linear-gradient(180deg, transparent 45%, rgb(0 0 0 / 0.25) 46% 54%, transparent 55%),
+    linear-gradient(135deg, #e9e1c4, #b9ad86);
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-brand] {
+  position: absolute;
+  top: 11%;
+  right: 7.5%;
+  font-size: clamp(0.9rem, 4.6cqi, 1.35rem);
+  font-style: italic;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-face='back'] [data-mk-card-brand] {
+  top: auto;
+  bottom: 11%;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-region] {
+  position: absolute;
+  display: grid;
+  gap: 0.15rem;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-region='number'] {
+  bottom: 13%;
+  left: 7.5%;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-region='name'] {
+  bottom: 33%;
+  left: 7.5%;
+  max-width: 58%;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-region='expiry'] {
+  right: 7.5%;
+  bottom: 33%;
+  text-align: right;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-caption] {
+  color: var(--mk-card-muted);
+  font-size: 0.5625rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+:is(.mk-credit-card, mk-credit-card) :is([data-mk-card-number], [data-mk-card-name], [data-mk-card-expiry], [data-mk-card-cvc]) {
+  display: inline-flex;
+  overflow: hidden;
+  font-family: var(--mk-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  white-space: pre;
+}
+
+:is(.mk-credit-card, mk-credit-card) :is([data-mk-card-number], [data-mk-card-name], [data-mk-card-expiry], [data-mk-card-cvc]) > span {
+  display: inline-block;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-number] {
+  font-size: clamp(1rem, 5.4cqi, 1.45rem);
+  font-weight: 500;
+  letter-spacing: 0.06em;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-number] [data-mk-space] {
+  width: 0.6em;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-name] {
+  overflow: hidden;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-overflow: ellipsis;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-expiry] {
+  justify-content: flex-end;
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-placeholder] {
+  color: var(--mk-card-muted);
+}
+
+/* The frame around the part being edited. */
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-frame] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 10px;
+  box-shadow:
+    inset 0 0 0 1.5px rgb(255 255 255 / 0.55),
+    0 0 18px rgb(255 255 255 / 0.12);
+  opacity: 0;
+  pointer-events: none;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-stripe] {
+  position: absolute;
+  top: 14%;
+  inset-inline: 0;
+  height: 20%;
+  background: #050506;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-signature] {
+  position: absolute;
+  top: 44%;
+  left: 7.5%;
+  right: 7.5%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: 18%;
+  padding: 0 0.75rem;
+  border-radius: 6px;
+  background: repeating-linear-gradient(135deg, #e9e9ec 0 6px, #dcdce0 6px 12px);
+  color: #121315;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-cvc] {
+  padding: 0.15rem 0.45rem;
+  border-radius: 4px;
+  background: #fff;
+  font-size: 0.875rem;
+  font-style: italic;
+  font-weight: 600;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-cvc] [data-mk-placeholder] {
+  color: #9a9ca3;
+}
+
+/* Fields (Melonmind input: surface-container-high, 16 px radius, 3 px focus ring). */
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-fields] {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+  width: min(100%, var(--mk-card-width));
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-label] {
+  display: grid;
+  gap: 0.35rem;
+  min-width: 0;
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+}
+
+:is(.mk-credit-card, mk-credit-card) :is([data-mk-card-label='number'], [data-mk-card-label='name']) {
+  grid-column: 1 / -1;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-field] {
+  width: 100%;
+  min-height: 3rem;
+  padding: 0 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-credit-card, mk-credit-card) :is([data-mk-card-field='number'], [data-mk-card-field='expiry'], [data-mk-card-field='cvc']) {
+  font-family: var(--mk-font-mono, ui-monospace, monospace);
+  font-variant-numeric: tabular-nums;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-field]:hover {
+  background: var(--mk-surface-5);
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-field]: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-credit-card, mk-credit-card) [data-mk-card-field][aria-invalid='true'] {
+  background: var(--mk-error-soft);
+  color: var(--mk-on-error-soft);
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-error] {
+  min-height: 0;
+  color: var(--mk-error);
+  font-size: 0.75rem;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-error]:empty {
+  display: none;
+}
+
+mk-credit-card {
+  display: grid;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-credit-card, mk-credit-card) [data-mk-card-field] {
+    transition: none;
+  }
+}

package/src/components/credit-card/element.ts

@@ -0,0 +1,33 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createCreditCard, type CreditCardField, type CreditCardInstance } from './engine';
+
+/**
+ * <mk-credit-card class="mk-credit-card"></mk-credit-card>
+ * Makes the card and the four fields (or uses input[data-mk-card-field="number|name|expiry|cvc"] inside).
+ * Emits mk:change ({brand, complete, valid}) and mk:complete; the card data stays in the form.
+ */
+export class MkCreditCardElement extends MkElement<CreditCardInstance> {
+  static options: Record<string, OptionType> = { tilt: 'boolean', labels: 'json', names: 'json' };
+
+  protected create(options: Record<string, unknown>) {
+    return createCreditCard(this, options);
+  }
+
+  focusField(field: CreditCardField) {
+    this.instance?.focus(field);
+  }
+
+  flip(back?: boolean) {
+    this.instance?.flip(back);
+  }
+
+  get values() {
+    return this.instance?.values;
+  }
+
+  get brand() {
+    return this.instance?.brand ?? 'unknown';
+  }
+}
+
+export const defineCreditCard = () => defineElement('mk-credit-card', MkCreditCardElement);