@yewdiel21/motion-kit 0.10.0 → 0.15.0

package/src/components/pie-chart/engine.ts

@@ -0,0 +1,283 @@
+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 { blurIn, rollDigits } from '../../motion/micro';
+import { arcPath, chartFrame, finite, formatNumber, onWidth, polar, round, slotColor, svg } from '../chart/parts';
+
+/*
+ * Pie chart: parts of a whole as a donut (default) or a pie, in chart's family
+ * (colour slots, inverse-glass tooltip, outlined legend, a table for screen
+ * readers). Slices sweep in clockwise from 12 o'clock on the swatch curve
+ * (.38,.49,0,1.5) while the total in the middle rolls up; new data glides each
+ * slice from its old angles. Pointing at a slice (or its legend pill, or the
+ * arrows) pulls it out along its middle and dims the others; the middle of a
+ * donut then says the slice, its value and share, else the tooltip does.
+ */
+
+export interface PieSlice {
+  label: string;
+  value: number;
+  color?: string;
+}
+
+export interface PieChartOptions {
+  data?: PieSlice[];
+  /** Hole size as a share of the radius: 0 is a pie (default 0.62). */
+  donut?: number;
+  /** Degrees of surface between slices (default 1.5). */
+  gap?: number;
+  /** Diameter in px (default 240; it shrinks with its container). */
+  size?: number;
+  /** Accessible name (and table caption). */
+  label?: string;
+  /** The donut's middle when nothing is chosen (default 'Total'). */
+  totalLabel?: string;
+  legend?: boolean;
+  formatValue?: (value: number) => string;
+  emptyLabel?: string;
+  onSelect?: (index: number | null) => void;
+}
+
+export interface PieChartInstance extends Instance {
+  update(options: PieChartOptions): void;
+  select(index: number | null): void;
+  readonly selected: number | null;
+}
+
+const PULL = 7;
+
+export function createPieChart(root: HTMLElement | null, initial: PieChartOptions = {}): PieChartInstance {
+  if (!root) return inert({ update() {}, select() {}, selected: null });
+  registerMotion();
+  const scope = createScope();
+  const frame = chartFrame(root, scope, 'pie');
+  const { plot, canvas, keep } = frame;
+  let options: PieChartOptions = { ...initial };
+  let selected: number | null = null;
+
+  const center = document.createElement('div');
+  center.dataset.mkPieCenter = '';
+  center.setAttribute('aria-hidden', 'true');
+  const centerValue = document.createElement('strong');
+  const centerLabel = document.createElement('span');
+  center.append(centerValue, centerLabel);
+  plot.append(center);
+  scope.add(() => center.remove());
+
+  const format = (value: number) => (options.formatValue ? options.formatValue(value) : formatNumber(value));
+  const slices = () =>
+    (options.data ?? [])
+      .filter((slice) => finite(slice.value) && slice.value > 0)
+      .map((slice, i, all) => ({ label: String(slice.label), value: slice.value, color: slice.color ?? slotColor(i, Math.max(2, all.length)) }));
+  let model = slices();
+  const total = () => model.reduce((sum, slice) => sum + slice.value, 0);
+  const share = (value: number) => new Intl.NumberFormat(undefined, { style: 'percent', maximumFractionDigits: 1 }).format(value / (total() || 1));
+  const donut = () => Math.min(0.9, Math.max(0, finite(options.donut) ? options.donut : 0.62));
+
+  /** Each slice's angles for `values` (fractions of a turn, with the gap taken from both sides). */
+  const anglesOf = (values: number[]) => {
+    const sum = values.reduce((a, b) => a + b, 0) || 1;
+    const pad = values.filter((v) => v > 0).length > 1 ? ((finite(options.gap) ? options.gap : 1.5) * Math.PI) / 180 : 0;
+    let at = 0;
+    return values.map((value) => {
+      const sweep = (value / sum) * Math.PI * 2;
+      const a0 = at + Math.min(pad / 2, sweep / 4);
+      const a1 = at + sweep - Math.min(pad / 2, sweep / 4);
+      at += sweep;
+      return [a0, Math.max(a0, a1)] as [number, number];
+    });
+  };
+
+  let paths: SVGPathElement[] = [];
+  let shown: Array<[number, number]> = [];
+  let geometry = { size: 240, cx: 120, cy: 120, outer: 112, inner: 70 };
+  let glide: gsap.core.Tween | null = null;
+  scope.add(() => glide?.kill());
+
+  const measure = () => {
+    const width = Math.round(plot.clientWidth || root.clientWidth || 0);
+    const wanted = finite(options.size) ? options.size : 240;
+    const size = Math.max(120, width ? Math.min(wanted, width) : wanted);
+    const outer = size / 2 - PULL - 2;
+    geometry = { size, cx: size / 2, cy: size / 2, outer, inner: outer * donut() };
+    canvas.setAttribute('viewBox', `0 0 ${size} ${size}`);
+    canvas.setAttribute('width', String(size));
+    canvas.setAttribute('height', String(size));
+    plot.style.setProperty('--mk-pie-size', `${size}px`);
+  };
+  scope.add(() => plot.style.removeProperty('--mk-pie-size'));
+
+  const paint = (angles: Array<[number, number]>) => {
+    shown = angles;
+    const { cx, cy, outer, inner } = geometry;
+    paths.forEach((path, i) => {
+      const [a0, a1] = angles[i] ?? [0, 0];
+      path.setAttribute('d', a1 - a0 > 1e-4 ? arcPath(cx, cy, outer, inner, a0, a1) : '');
+    });
+  };
+
+  const build = () => {
+    canvas.replaceChildren();
+    const group = svg('g', { 'data-mk-part': 'series' });
+    paths = model.map((slice, i) => {
+      const path = svg('path', { 'data-mk-index': i });
+      path.style.fill = slice.color;
+      group.append(path);
+      return path;
+    });
+    canvas.append(group);
+  };
+
+  const paintCenter = (animate: boolean) => {
+    center.hidden = donut() < 0.35 || !model.length;
+    if (center.hidden) return;
+    const slice = selected === null ? null : model[selected];
+    const text = slice ? format(slice.value) : format(total());
+    const caption = slice ? `${slice.label} · ${share(slice.value)}` : (options.totalLabel ?? 'Total');
+    const changed = centerLabel.textContent !== caption;
+    if (centerValue.textContent !== text) {
+      if (animate && !reduced() && centerValue.textContent) keep(rollDigits(centerValue, text, 1, 0.35));
+      else centerValue.textContent = text;
+    }
+    centerLabel.textContent = caption;
+    if (changed && animate && !reduced()) keep(blurIn(centerLabel, { from: 'soft', duration: 0.3 }));
+  };
+
+  const paintSelection = (announce: boolean) => {
+    const { outer } = geometry;
+    paths.forEach((path, i) => {
+      const chosen = i === selected;
+      path.toggleAttribute('data-mk-dim', selected !== null && !chosen);
+      if (!chosen) {
+        path.style.transform = '';
+        return;
+      }
+      const [a0, a1] = shown[i] ?? [0, 0];
+      const [dx, dy] = polar(0, 0, Math.min(PULL, outer * 0.06), (a0 + a1) / 2);
+      path.style.transform = `translate(${round(dx)}px, ${round(dy)}px)`;
+    });
+    legendItems.forEach((item, i) => item.toggleAttribute('data-mk-dim', selected !== null && i !== selected));
+    paintCenter(true);
+    const slice = selected === null ? null : model[selected];
+    // The tooltip speaks for a pie (a donut's middle already does).
+    if (slice && center.hidden) {
+      const [a0, a1] = shown[selected!] ?? [0, 0];
+      const [x, y] = polar(geometry.cx, geometry.cy, geometry.outer * 0.7, (a0 + a1) / 2);
+      frame.tip({ x, y, title: slice.label, rows: [{ name: share(slice.value), color: slice.color, value: format(slice.value) }] });
+    } else frame.tip(null);
+    if (announce && slice) frame.live.textContent = `${slice.label}: ${format(slice.value)}, ${share(slice.value)}`;
+  };
+
+  let legendItems: HTMLLIElement[] = [];
+  const draw = (animate: boolean) => {
+    glide?.kill();
+    const before = shown;
+    const sameCount = paths.length === model.length;
+    const name = options.label ?? 'Gráfica circular';
+    canvas.setAttribute('aria-label', model.length ? `${name}. ${model.length} partes, total ${format(total())}. Usa las flechas para recorrerlas.` : `${name}: ${options.emptyLabel ?? 'sin datos'}`);
+    frame.fillTable(name, ['Parte', 'Valor', 'Porcentaje'], model.map((slice) => [slice.label, format(slice.value), share(slice.value)]));
+    legendItems = frame.fillLegend(model.map((slice) => ({ name: slice.label, color: slice.color })), options.legend ?? true);
+    legendItems.forEach((item, i) => {
+      item.addEventListener('pointerenter', () => select(i));
+      item.addEventListener('pointerleave', () => select(null));
+    });
+    frame.empty.hidden = model.length > 0;
+    frame.empty.textContent = options.emptyLabel ?? 'Sin datos para mostrar';
+    plot.hidden = !model.length;
+    if (!model.length) {
+      canvas.replaceChildren();
+      paths = [];
+      shown = [];
+      selected = null;
+      return;
+    }
+    if (selected !== null && selected >= model.length) selected = null;
+    measure();
+    if (!sameCount || !before.length) build();
+    paths.forEach((path, i) => { path.style.fill = model[i]!.color; });
+    const target = anglesOf(model.map((slice) => slice.value));
+    const done = () => {
+      paint(target);
+      paintSelection(false);
+    };
+    if (!animate || reduced()) return done();
+    const state = { t: 0 };
+    if (sameCount && before.length) {
+      // New data: every slice glides from its old angles.
+      glide = gsap.to(state, {
+        t: 1,
+        duration: 0.6,
+        ease: EASE.swatch,
+        onUpdate: () => paint(target.map(([a0, a1], i) => [before[i]![0] + (a0 - before[i]![0]) * state.t, before[i]![1] + (a1 - before[i]![1]) * state.t])),
+        onComplete: done,
+      });
+      paintCenter(true);
+      return;
+    }
+    // First appearance: the slices sweep in clockwise from 12 o'clock and the total rolls up.
+    paint(target.map(() => [0, 0]));
+    centerValue.textContent = format(0);
+    glide = gsap.to(state, {
+      t: 1,
+      duration: 0.9,
+      ease: EASE.signature,
+      onUpdate: () => paint(target.map(([a0, a1]) => [a0 * state.t, a1 * state.t])),
+      onComplete: done,
+    });
+    paintCenter(true);
+  };
+
+  const select = (index: number | null, announce = false) => {
+    if (scope.disposed) return;
+    const next = index === null || !model.length ? null : ((Math.round(index) % model.length) + model.length) % model.length;
+    if (next === selected) return;
+    selected = next;
+    paintSelection(announce);
+    options.onSelect?.(selected);
+    const slice = selected === null ? null : model[selected];
+    root.dispatchEvent(new CustomEvent('mk:select', { bubbles: true, detail: { index: selected, label: slice?.label ?? null, value: slice?.value ?? null } }));
+  };
+
+  const indexAt = (event: PointerEvent) => {
+    const target = (event.target as Element).closest('[data-mk-index]');
+    return target ? Number(target.getAttribute('data-mk-index')) : null;
+  };
+  scope.on(canvas, 'pointermove', (event) => select(indexAt(event as PointerEvent)));
+  scope.on(canvas, 'pointerdown', (event) => select(indexAt(event as PointerEvent)));
+  scope.on(canvas, 'pointerleave', (event) => {
+    if ((event as PointerEvent).pointerType === 'mouse') select(null);
+  });
+  scope.on(canvas, 'focus', () => {
+    if (selected === null && model.length) select(0, true);
+  });
+  scope.on(canvas, 'blur', () => select(null));
+  scope.on(canvas, 'keydown', (event) => {
+    const key = (event as KeyboardEvent).key;
+    const moves: Record<string, number | null> = { ArrowRight: (selected ?? -1) + 1, ArrowDown: (selected ?? -1) + 1, ArrowLeft: (selected ?? 1) - 1, ArrowUp: (selected ?? 1) - 1, Home: 0, End: model.length - 1, Escape: null };
+    if (!(key in moves) || !model.length) return;
+    event.preventDefault();
+    select(moves[key]!, true);
+  });
+  onWidth(root, scope, () => {
+    measure();
+    paint(shown);
+    paintSelection(false);
+  });
+
+  draw(true);
+
+  return {
+    update(next) {
+      if (scope.disposed) return;
+      options = { ...options, ...next };
+      model = slices();
+      draw(true);
+    },
+    select: (index) => select(index),
+    get selected() {
+      return selected;
+    },
+    destroy: () => scope.dispose(),
+  };
+}

package/src/components/pie-chart/pie-chart.css

@@ -0,0 +1,92 @@
+/* pie-chart — a donut (or pie) in chart's family: it needs chart.css for the colours, tooltip, legend and table.
+   Slices are parted by the surface; the chosen one slides out, the others dim; the donut's middle names it. */
+.mk-pie-chart,
+mk-pie-chart {
+  display: grid;
+  justify-items: center;
+  gap: 1rem;
+}
+
+[data-mk-chart-type='pie'] [data-mk-chart-plot] {
+  width: 100%;
+}
+
+[data-mk-chart-type='pie'] [data-mk-chart-svg] {
+  width: var(--mk-pie-size, 240px);
+  max-width: 100%;
+  margin-inline: auto;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+[data-mk-chart-type='pie'] [data-mk-part='series'] path {
+  stroke: var(--mk-chart-surface);
+  stroke-width: 1;
+  stroke-linejoin: round;
+  transition:
+    transform 0.45s var(--mk-ease-swatch),
+    opacity 0.2s ease;
+}
+
+[data-mk-chart-type='pie'] [data-mk-part='series'] path[data-mk-dim] {
+  opacity: 0.4;
+}
+
+[data-mk-pie-center] {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: grid;
+  justify-items: center;
+  gap: 0.15rem;
+  max-width: calc(var(--mk-pie-size, 240px) * 0.5);
+  transform: translate(-50%, -50%);
+  text-align: center;
+  pointer-events: none;
+}
+
+[data-mk-pie-center][hidden] {
+  display: none;
+}
+
+[data-mk-pie-center] strong {
+  color: var(--mk-text);
+  font-size: clamp(1.1rem, calc(var(--mk-pie-size, 240px) * 0.11), 2rem);
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+[data-mk-pie-center] span {
+  overflow: hidden;
+  max-width: 100%;
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+[data-mk-chart-type='pie'] [data-mk-chart-legend] {
+  justify-content: center;
+}
+
+[data-mk-chart-type='pie'] [data-mk-chart-legend] li {
+  transition: opacity 0.2s ease;
+}
+
+[data-mk-chart-type='pie'] [data-mk-chart-legend] li[data-mk-dim] {
+  opacity: 0.45;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-chart-type='pie'] [data-mk-part='series'] path {
+    transition: opacity 0.2s ease;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-mk-chart-type='pie'] [data-mk-part='series'] path {
+    stroke: Canvas;
+  }
+}

package/src/components/pie-chart/react.tsx

@@ -0,0 +1,14 @@
+'use client';
+import type { HTMLAttributes } from 'react';
+import { useChart } from '../chart/use-chart';
+import { createPieChart, type PieChartInstance, type PieChartOptions } from './engine';
+
+export interface PieChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'children'>, PieChartOptions {
+  instanceRef?: { current: PieChartInstance | null };
+}
+
+/** <PieChart label="Ventas por canal" data={[{ label: 'Tienda', value: 420 }, …]} formatValue={money} /> */
+export function PieChart({ data, donut, gap, size, label, totalLabel, legend, emptyLabel, formatValue, onSelect, instanceRef, className, ...props }: PieChartProps) {
+  const ref = useChart(createPieChart, { data, donut, gap, size, label, totalLabel, legend, emptyLabel } as PieChartOptions, { formatValue, onSelect }, instanceRef);
+  return <div {...props} ref={ref} className={['mk-chart mk-pie-chart', className].filter(Boolean).join(' ')} />;
+}

package/src/components/pill-button/README.md

@@ -0,0 +1,46 @@
+# pill-button
+
+Botón píldora cuyo fondo se reúne alrededor del icono al pasar el puntero, enfocar o tocar.
+
+## Instalación
+
+```tsx
+import '@yewdiel21/motion-kit/css';
+import { PillButton } from '@yewdiel21/motion-kit/react';
+```
+
+```sh
+npx @yewdiel21/motion-kit add pill-button --react --elements
+```
+
+## React
+
+```tsx
+<PillButton onClick={ask}>Haz una pregunta</PillButton>
+```
+
+Los callbacks del ejemplo (`ask`, `run`, `setTool`, `setVolume`) pertenecen a tu aplicación. React acepta `className`, `style` y atributos HTML. Los componentes con estado exponen `instanceRef` (excepto PillButton).
+
+## HTML / Astro
+
+```html
+<mk-pill-button><button type="button">Haz una pregunta</button></mk-pill-button>
+<script type="module">
+  import { defineElements } from '@yewdiel21/motion-kit/elements';
+  defineElements(['mk-pill-button']);
+</script>
+```
+
+En Astro usa un `<script>` procesado por Astro. En HTML directo el import requiere bundler o import map. También puedes usar `import { createPillButton } from '@yewdiel21/motion-kit'` y llamar a la factory con el contenedor y las mismas opciones. Al desmontar, llama a `instance.destroy()`.
+
+## Opciones
+
+expand: invierte la animación (false). icon: marcado del icono en vanilla o ReactNode en React.
+
+Los nombres camelCase se escriben como atributos kebab-case. Los arrays y objetos se pasan como JSON. Los booleanos aceptan atributo vacío o `"false"`.
+
+## Estilos y accesibilidad
+
+Variables: --mk-pill-height, --mk-pill-dot, --mk-pill-ink, --mk-pill-on-ink.
+
+Respeta los colores del tema, foco visible y `prefers-reduced-motion`. Los gráficos incluyen una tabla accesible y selección con flechas, Home, End y Escape. Heatmap usa arriba/abajo para un día e izquierda/derecha para una semana. Toolbar usa flechas y Home/End; OrbitMenu cierra con Escape y devuelve el foco. Los controles conservan nombres accesibles; VoiceDots anuncia los estados sin leer cada fotograma.

package/src/components/pill-button/element.ts

@@ -0,0 +1,16 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createPillButton, type PillButtonInstance } from './engine';
+
+/**
+ * <mk-pill-button><button type="button">Haz una pregunta</button></mk-pill-button>
+ * The dark fill gathers into a circle around the arrow on hover. `expand` starts as the circle.
+ */
+export class MkPillButtonElement extends MkElement<PillButtonInstance> {
+  static options: Record<string, OptionType> = { expand: 'boolean', icon: 'string' };
+
+  protected create(options: Record<string, unknown>) {
+    return createPillButton(this, options);
+  }
+}
+
+export const definePillButton = () => defineElement('mk-pill-button', MkPillButtonElement);

package/src/components/pill-button/engine.ts

@@ -0,0 +1,77 @@
+import { registerMotion } from '../../core/gsap';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+import { press } from '../../motion/micro';
+
+/*
+ * Pill button: a dark pill with a label and an arrow. When the pointer comes in
+ * (or the keyboard focuses it) the dark fill gathers into a circle around the
+ * icon on the swatch curve (.38,.49,0,1.5, a small overshoot), the label slides
+ * left and turns to the text colour, and the arrow nudges forward; leaving, the
+ * fill spreads back into the pill. `expand` turns it around: a circle by the
+ * label that spreads into the pill. The motion is CSS (pill-button.css); the
+ * engine builds the label, icon and fill when the markup lacks them, presses on
+ * click, and shows the gathered state for a moment after a tap on touch.
+ */
+
+export interface PillButtonOptions {
+  /** Start as the circle and spread into the pill on hover (default false). */
+  expand?: boolean;
+  /** The icon's markup when the button has no [data-mk-pill-icon] (default: an arrow). */
+  icon?: string;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface PillButtonInstance extends Instance {}
+
+export const PILL_ARROW =
+  '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>';
+
+export function createPillButton(root: HTMLElement | null, options: PillButtonOptions = {}): PillButtonInstance {
+  const control = root ? (root.matches('button, a, [role="button"]') ? root : root.querySelector<HTMLElement>('button, a, [role="button"]')) : null;
+  if (!root || !control) return inert();
+  registerMotion();
+  const scope = createScope();
+
+  // Only what the engine adds is taken back (React keeps its own nodes).
+  const icon = control.querySelector<HTMLElement>('[data-mk-pill-icon]');
+  if (!control.querySelector('[data-mk-pill-label]')) {
+    const label = document.createElement('span');
+    label.dataset.mkPillLabel = '';
+    for (const node of [...control.childNodes]) if (node !== icon) label.append(node);
+    control.prepend(label);
+    scope.add(() => label.replaceWith(...label.childNodes));
+  }
+  if (!icon) {
+    const made = document.createElement('span');
+    made.dataset.mkPillIcon = '';
+    made.setAttribute('aria-hidden', 'true');
+    made.innerHTML = options.icon ?? PILL_ARROW;
+    control.append(made);
+    scope.add(() => made.remove());
+  }
+  const fill = document.createElement('span');
+  fill.dataset.mkPillFill = '';
+  fill.setAttribute('aria-hidden', 'true');
+  control.prepend(fill);
+  scope.add(() => fill.remove());
+
+  scope.attr(control, 'data-mk-pill', options.expand ? 'expand' : '');
+  scope.attr(root, 'data-mk-ready', '');
+
+  // A tap has no hover: the gathered state shows for a moment.
+  let tapped: ReturnType<typeof setTimeout> | undefined;
+  scope.on(control, 'pointerdown', (event) => {
+    press(control);
+    if ((event as PointerEvent).pointerType !== 'touch') return;
+    control.setAttribute('data-mk-active', '');
+    clearTimeout(tapped);
+    tapped = setTimeout(() => control.removeAttribute('data-mk-active'), 650);
+  });
+  scope.add(() => {
+    clearTimeout(tapped);
+    control.removeAttribute('data-mk-active');
+  });
+
+  return { destroy: () => scope.dispose() };
+}

package/src/components/pill-button/pill-button.css

@@ -0,0 +1,134 @@
+/* pill-button — a dark pill whose fill gathers into a circle around the icon on hover (and spreads back on leave).
+   The fill is one layer clipped with inset(); the label and icon sit above it. `expand` starts as the circle. */
+.mk-pill-button:is(button, a),
+[data-mk-pill] {
+  --mk-pill-height: 3rem;
+  --mk-pill-dot: 2.25rem;
+  --mk-pill-ink: var(--mk-text);
+  --mk-pill-on-ink: var(--mk-bg);
+  --mk-pill-gap: calc((var(--mk-pill-height) - var(--mk-pill-dot)) / 2);
+  --mk-pill-gathered: inset(var(--mk-pill-gap) var(--mk-pill-gap) var(--mk-pill-gap) calc(100% - var(--mk-pill-gap) - var(--mk-pill-dot)) round var(--mk-radius-full));
+  --mk-pill-spread: inset(0 0 0 0 round var(--mk-radius-full));
+  position: relative;
+  isolation: isolate;
+  display: inline-flex;
+  align-items: center;
+  gap: 1.25rem;
+  height: var(--mk-pill-height);
+  padding: 0 calc(var(--mk-pill-gap) + (var(--mk-pill-dot) - 1.125rem) / 2) 0 1.5rem;
+  border: 0;
+  border-radius: var(--mk-radius-full);
+  background: transparent;
+  color: var(--mk-pill-on-ink);
+  font: 500 1rem/1 var(--mk-font);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+mk-pill-button {
+  display: inline-flex;
+}
+
+[data-mk-pill-fill] {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--mk-pill-ink);
+  clip-path: var(--mk-pill-spread);
+  transition: clip-path 0.5s var(--mk-ease-swatch);
+}
+
+[data-mk-pill-label] {
+  display: inline-block;
+  color: var(--mk-pill-on-ink);
+  transition:
+    transform 0.45s var(--mk-ease-swatch),
+    color 0.2s ease 0.05s;
+}
+
+[data-mk-pill-icon] {
+  display: inline-grid;
+  place-items: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  color: var(--mk-pill-on-ink);
+  transition: transform 0.45s var(--mk-ease-swatch);
+}
+
+[data-mk-pill-icon] svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* Gathered: on hover, keyboard focus or a tap. */
+@media (hover: hover) {
+  :is([data-mk-pill=''], .mk-pill-button:is(button, a):not([data-mk-pill])):hover [data-mk-pill-fill] {
+    clip-path: var(--mk-pill-gathered);
+  }
+  :is([data-mk-pill=''], .mk-pill-button:is(button, a):not([data-mk-pill])):hover [data-mk-pill-label] {
+    color: var(--mk-pill-ink);
+    transform: translateX(-0.5rem);
+  }
+  :is([data-mk-pill], .mk-pill-button:is(button, a)):hover [data-mk-pill-icon] {
+    transform: translateX(2px);
+  }
+}
+[data-mk-pill='']:is(:focus-visible, [data-mk-active]) [data-mk-pill-fill] {
+  clip-path: var(--mk-pill-gathered);
+}
+[data-mk-pill='']:is(:focus-visible, [data-mk-active]) [data-mk-pill-label] {
+  color: var(--mk-pill-ink);
+  transform: translateX(-0.5rem);
+}
+
+/* expand: the circle spreads into the pill. */
+[data-mk-pill='expand'] [data-mk-pill-fill] {
+  clip-path: var(--mk-pill-gathered);
+}
+[data-mk-pill='expand'] [data-mk-pill-label] {
+  color: var(--mk-pill-ink);
+}
+@media (hover: hover) {
+  [data-mk-pill='expand']:hover [data-mk-pill-fill] {
+    clip-path: var(--mk-pill-spread);
+  }
+  [data-mk-pill='expand']:hover [data-mk-pill-label] {
+    color: var(--mk-pill-on-ink);
+    transform: translateX(0.25rem);
+  }
+}
+[data-mk-pill='expand']:is(:focus-visible, [data-mk-active]) [data-mk-pill-fill] {
+  clip-path: var(--mk-pill-spread);
+}
+[data-mk-pill='expand']:is(:focus-visible, [data-mk-active]) [data-mk-pill-label] {
+  color: var(--mk-pill-on-ink);
+  transform: translateX(0.25rem);
+}
+
+:is([data-mk-pill], .mk-pill-button:is(button, a)):focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 3px;
+}
+
+:is([data-mk-pill], .mk-pill-button:is(button, a)):is(:disabled, [aria-disabled='true']) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-pill-fill],
+  [data-mk-pill-label],
+  [data-mk-pill-icon] {
+    transition-duration: 0.01s;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-mk-pill] {
+    border: 1px solid ButtonText;
+  }
+}