@yewdiel21/motion-kit 0.10.0 → 0.15.0

package/src/components/progress/react.tsx

@@ -0,0 +1,35 @@
+'use client';
+import { useRef, type HTMLAttributes } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createProgress, type ProgressInstance, type ProgressOptions } from './engine';
+
+export interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, ProgressOptions {}
+
+/** <Progress value={42} label="Subida" showValue />; value={null} is indeterminate. The engine owns the drawing and ARIA. */
+export function Progress({ value, min, max, label, variant, showValue, formatValue, className, ...props }: ProgressProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<ProgressInstance | null>(null);
+  const current = useLatest(value);
+  const format = useLatest(formatValue);
+  const formatted = formatValue !== undefined;
+  useIsomorphicLayoutEffect(() => {
+    const created = createProgress(ref.current, {
+      value: current.current,
+      min,
+      max,
+      label,
+      variant,
+      showValue,
+      formatValue: formatted ? (n, ratio) => format.current?.(n, ratio) ?? '' : undefined,
+    });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [min, max, label, variant, showValue, formatted]);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.setValue(value === undefined ? (min ?? 0) : value);
+  }, [value]);
+  return <div {...props} ref={ref} className={['mk-progress', className].filter(Boolean).join(' ')} />;
+}

package/src/components/questionnaire/README.md

@@ -0,0 +1,32 @@
+# questionnaire
+
+Preguntas por pasos sobre un formulario nativo: texto, respuesta única y múltiple, anterior/siguiente, progreso, validación de obligatorios y finalización. Compone el motor de [steps](../steps/README.md) (entrada/salida en flujo, contador y foco en el título); la persistencia es de la app.
+
+```html
+<mk-questionnaire>
+  <form class="mk-questionnaire">
+    <section data-mk-question>
+      <h3>¿Cómo te llamas?</h3>
+      <input name="name" required aria-label="Nombre" />
+      <button type="button" data-mk-question-next>Siguiente</button>
+    </section>
+    <section data-mk-question>
+      <h3>¿Qué te interesa?</h3>
+      <label><input type="checkbox" name="topics" value="diseño" required /> Diseño</label>
+      <label><input type="checkbox" name="topics" value="código" required /> Código</label>
+      <button type="button" data-mk-question-prev>Anterior</button>
+      <button type="submit">Finalizar</button>
+    </section>
+    <p data-mk-question-error role="alert"></p>
+    <div data-mk-question-complete hidden>¡Gracias! <button type="reset">Empezar de nuevo</button></div>
+  </form>
+</mk-questionnaire>
+```
+
+Vacío, `<mk-questionnaire questions='[{"id":"name","label":"Nombre","type":"text","required":true}]'>` crea el mismo marcado. React: `<Questionnaire questions={questions} onComplete={save} complete={(answers) => <Summary answers={answers} />} />` con `Question {id, label, type: 'text'|'textarea'|'single'|'multiple', options?, required?, description?, placeholder?}` y `defaultAnswers`.
+
+Opciones: `index`, `labels {required, choice}`, `onChange(index, answers)`, `onComplete(answers)`. API: `next(): Promise<boolean>`, `prev()`, `reset()`, `answers`, `index`, `count`, `complete`, `destroy()`. `readAnswers(form)` devuelve `QuestionnaireAnswers` (`string` o `string[]` por nombre de campo: casillas y selects múltiples dan arrays).
+
+Siguiente valida el paso actual: los campos obligatorios vacíos o inválidos y los grupos de casillas/radios obligatorios (basta uno marcado por grupo). Marca `aria-invalid`, escribe el mensaje en `[data-mk-question-error]`, enfoca el primer campo inválido y emite `mk:invalid`. Un campo corregido deja de estar inválido al momento. Los botones `[data-mk-question-next|prev]` son propios: nunca saltan la validación. Enviar en el último paso completa una sola vez (`mk:complete` con `{answers}`), muestra `[data-mk-question-complete]` y evita la navegación. El reset nativo limpia respuestas, errores y finalización y vuelve al primer paso. Cada cambio de paso emite `mk:question` `{index, previous, answers}`.
+
+Las respuestas viven en los controles nativos, así que se conservan al volver atrás y entre renders de React. `destroy()` restaura atributos, textos y visibilidad. Variables: `--mk-question-radius` (24px), `--mk-question-option-radius` (16px); `--mk-question-progress` lo escribe el motor. Movimiento reducido: los pasos cambian sin flujo y la barra sin transición.

package/src/components/questionnaire/element.ts

@@ -0,0 +1,118 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import type { Instance } from '../../core/types';
+import { createQuestionnaire, type QuestionnaireInstance } from './engine';
+
+interface QuestionData {
+  id: string;
+  label: string;
+  type: 'text' | 'textarea' | 'single' | 'multiple';
+  options?: Array<string | { value: string; label: string }>;
+  required?: boolean;
+  description?: string;
+}
+
+const el = <K extends keyof HTMLElementTagNameMap>(tag: K, attrs: Record<string, string> = {}, text?: string) => {
+  const element = document.createElement(tag);
+  for (const [name, value] of Object.entries(attrs)) element.setAttribute(name, value);
+  if (text !== undefined) element.textContent = text;
+  return element;
+};
+
+/** The same form the React <Questionnaire> renders, built with DOM APIs (all text as text). */
+function buildForm(questions: QuestionData[]) {
+  const form = el('form', { class: 'mk-questionnaire', novalidate: '' });
+  const progress = el('div', { 'data-mk-question-progress': '', 'aria-hidden': 'true' });
+  progress.append(el('span', { 'data-mk-question-bar': '' }));
+  form.append(progress);
+  questions.forEach((question, i) => {
+    const titleId = `${question.id}-title`;
+    const section = el('section', { 'data-mk-question': '', 'aria-labelledby': titleId });
+    if (i) section.hidden = true;
+    section.append(el('p', { 'data-mk-question-step': '' }, `Pregunta ${i + 1} de ${questions.length}`));
+    const title = el('h3', { id: titleId, 'data-mk-step-title': '', 'data-mk-flow-item': '' }, question.label);
+    if (question.required) title.append(el('span', { 'data-mk-question-required': '', 'aria-hidden': 'true' }, ' *'));
+    section.append(title);
+    if (question.description) section.append(el('p', { 'data-mk-question-description': '', 'data-mk-flow-item': '' }, question.description));
+    const field = el('div', { 'data-mk-question-field': '', 'data-mk-flow-item': '' });
+    if (question.type === 'text' || question.type === 'textarea') {
+      const input = question.type === 'text' ? el('input', { type: 'text' }) : el('textarea', { rows: '4' });
+      input.name = question.id;
+      input.required = Boolean(question.required);
+      input.setAttribute('aria-labelledby', titleId);
+      field.append(input);
+    } else {
+      const group = el('div', { role: question.type === 'single' ? 'radiogroup' : 'group', 'aria-labelledby': titleId, 'data-mk-question-options': '' });
+      for (const raw of question.options ?? []) {
+        const option = typeof raw === 'string' ? { value: raw, label: raw } : raw;
+        const label = el('label', { 'data-mk-question-option': '' });
+        const input = el('input', { type: question.type === 'single' ? 'radio' : 'checkbox' });
+        input.name = question.id;
+        input.value = option.value;
+        input.required = Boolean(question.required);
+        label.append(input, el('span', {}, option.label));
+        group.append(label);
+      }
+      field.append(group);
+    }
+    section.append(field);
+    const actions = el('div', { 'data-mk-question-actions': '', 'data-mk-flow-item': '' });
+    if (i) actions.append(el('button', { type: 'button', class: 'mk-button mk-button--text', 'data-mk-question-prev': '' }, 'Anterior'));
+    actions.append(
+      i < questions.length - 1
+        ? el('button', { type: 'button', class: 'mk-button', 'data-mk-question-next': '' }, 'Siguiente')
+        : el('button', { type: 'submit', class: 'mk-button' }, 'Finalizar'),
+    );
+    section.append(actions);
+    form.append(section);
+  });
+  form.append(el('p', { 'data-mk-question-error': '', role: 'alert' }));
+  const done = el('div', { 'data-mk-question-complete': '' });
+  done.hidden = true;
+  done.append(el('p', {}, '¡Gracias! Respuestas enviadas.'), el('button', { type: 'reset', class: 'mk-button mk-button--tonal' }, 'Empezar de nuevo'));
+  form.append(done);
+  return form;
+}
+
+/**
+ * <mk-questionnaire><form>…<section data-mk-question>…</section>…</form></mk-questionnaire>
+ * or, empty, <mk-questionnaire questions='[{"id":"name","label":"Nombre","type":"text","required":true}]'>.
+ * Emits mk:question ({index, previous, answers}), mk:invalid and mk:complete ({answers}).
+ */
+export class MkQuestionnaireElement extends MkElement<Instance> {
+  static options: Record<string, OptionType> = { questions: 'json', index: 'number' };
+
+  questionnaire: QuestionnaireInstance | null = null;
+
+  protected create(options: Record<string, unknown>): Instance {
+    const questions = Array.isArray(options.questions) ? (options.questions as QuestionData[]) : null;
+    const built = questions && !this.querySelector('[data-mk-question]') ? buildForm(questions) : null;
+    if (built) this.append(built);
+    const engine = createQuestionnaire(this, { index: options.index as number | undefined });
+    this.questionnaire = engine;
+    return {
+      destroy: () => {
+        engine.destroy();
+        built?.remove();
+        this.questionnaire = null;
+      },
+    };
+  }
+
+  next() {
+    return this.questionnaire?.next() ?? Promise.resolve(false);
+  }
+
+  prev() {
+    return this.questionnaire?.prev() ?? Promise.resolve();
+  }
+
+  reset() {
+    this.questionnaire?.reset();
+  }
+
+  get answers() {
+    return this.questionnaire?.answers ?? {};
+  }
+}
+
+export const defineQuestionnaire = () => defineElement('mk-questionnaire', MkQuestionnaireElement);

package/src/components/questionnaire/engine.ts

@@ -0,0 +1,255 @@
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+import { createSteps } from '../steps/engine';
+import { shake } from '../../motion/micro';
+
+/*
+ * Questionnaire: a native form split into [data-mk-question] steps, moved by
+ * the steps engine (flow out/in, counter, focus on the title). Next validates
+ * the current step first — required text, choices and checkbox groups (one
+ * checked is enough) — marks invalid fields, writes the message and focuses
+ * the first one. Submitting on the last step completes once; native reset
+ * clears errors and completion and returns to the first step.
+ * Parts: [data-mk-question], [data-mk-question-next|prev], [data-mk-question-error],
+ * [data-mk-question-complete], [data-mk-counter] (step number).
+ */
+
+export type QuestionnaireAnswers = Record<string, string | string[]>;
+
+export interface QuestionnaireLabels {
+  required?: string;
+  choice?: string;
+}
+
+export interface QuestionnaireOptions {
+  index?: number;
+  labels?: QuestionnaireLabels;
+  onChange?: (index: number, answers: QuestionnaireAnswers) => void;
+  onComplete?: (answers: QuestionnaireAnswers) => void;
+}
+
+export interface QuestionnaireInstance extends Instance {
+  /** Validate the current step and go on (or complete on the last one). */
+  next(): Promise<boolean>;
+  prev(): Promise<void>;
+  /** Native form reset: clears answers, errors and completion. */
+  reset(): void;
+  readonly answers: QuestionnaireAnswers;
+  readonly index: number;
+  readonly count: number;
+  readonly complete: boolean;
+}
+
+type Field = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+const FIELDS = 'input[name], select[name], textarea[name]';
+const SKIP = new Set(['button', 'submit', 'reset', 'image', 'file']);
+let sequence = 0;
+
+/** Answers of a form keyed by field name: checkboxes and multi-selects give arrays. */
+export function readAnswers(form: HTMLElement): QuestionnaireAnswers {
+  const answers: QuestionnaireAnswers = {};
+  for (const field of form.querySelectorAll<Field>(FIELDS)) {
+    if (field.disabled || SKIP.has(field.type)) continue;
+    const { name } = field;
+    if (field instanceof HTMLInputElement && field.type === 'checkbox') {
+      const list = (answers[name] as string[] | undefined) ?? [];
+      if (field.checked) list.push(field.value);
+      answers[name] = list;
+    } else if (field instanceof HTMLInputElement && field.type === 'radio') {
+      if (field.checked) answers[name] = field.value;
+      else answers[name] ??= '';
+    } else if (field instanceof HTMLSelectElement && field.multiple) {
+      answers[name] = [...field.selectedOptions].map((option) => option.value);
+    } else answers[name] = field.value;
+  }
+  return answers;
+}
+
+export function createQuestionnaire(root: HTMLElement | null, options: QuestionnaireOptions = {}): QuestionnaireInstance {
+  const form = root instanceof HTMLFormElement ? root : root?.querySelector('form') ?? null;
+  const sections = form ? [...form.querySelectorAll<HTMLElement>('[data-mk-question]')] : [];
+  if (!root || !form || !sections.length) {
+    return inert({ next: async () => false, prev: async () => {}, reset() {}, answers: {}, index: -1, count: 0, complete: false });
+  }
+  const scope = createScope();
+  const labels = { required: 'Completa este campo.', choice: 'Elige al menos una opción.', ...options.labels };
+  for (const section of sections) if (!section.hasAttribute('data-mk-step')) scope.attr(section, 'data-mk-step', '');
+  const start = Math.min(sections.length - 1, Math.max(0, Math.round(options.index ?? 0)));
+  let index = start;
+  let complete = false;
+  // Our own navigation buttons only (not [data-mk-step-*]): steps never skips validation.
+  const steps = createSteps(form, { index: start, animateFirst: false });
+  scope.add(() => steps.destroy());
+  scope.attr(form, 'novalidate', '');
+  scope.attr(form, 'data-mk-questionnaire', '');
+
+  const fieldsOf = (section: HTMLElement) => [...section.querySelectorAll<Field>(FIELDS)].filter((field) => !field.disabled && !SKIP.has(field.type));
+  const errorOf = (section: HTMLElement) => section.querySelector<HTMLElement>('[data-mk-question-error]') ?? form.querySelector<HTMLElement>('[data-mk-question-error]');
+  const errorTexts = new Map<HTMLElement, string | null>();
+  const writeError = (element: HTMLElement | null, text: string) => {
+    if (!element) return;
+    if (!errorTexts.has(element)) errorTexts.set(element, element.textContent);
+    element.textContent = text;
+  };
+  scope.add(() => errorTexts.forEach((text, element) => (element.textContent = text)));
+  for (const element of form.querySelectorAll<HTMLElement>('[data-mk-question-error]')) {
+    if (!element.id) scope.attr(element, 'id', `mk-question-error-${++sequence}`);
+    if (!element.matches('output') && !element.hasAttribute('role')) scope.attr(element, 'role', 'alert');
+  }
+
+  const markValid = (field: Field) => {
+    scope.attr(field, 'aria-invalid', null);
+    scope.attr(field, 'aria-errormessage', null);
+  };
+  const clearErrors = () => {
+    for (const field of form.querySelectorAll<Field>(FIELDS)) markValid(field);
+    for (const element of form.querySelectorAll<HTMLElement>('[data-mk-question-error]')) writeError(element, '');
+  };
+
+  /** Invalid fields of a step and the first message. */
+  const check = (section: HTMLElement) => {
+    const invalid: Field[] = [];
+    let message = '';
+    const groups = new Map<string, HTMLInputElement[]>();
+    for (const field of fieldsOf(section)) {
+      if (field instanceof HTMLInputElement && (field.type === 'checkbox' || field.type === 'radio')) {
+        const group = groups.get(field.name) ?? [];
+        group.push(field);
+        groups.set(field.name, group);
+        continue;
+      }
+      const empty = field.required && !field.value.trim();
+      if (empty || !field.checkValidity()) {
+        invalid.push(field);
+        message ||= empty ? labels.required : field.validationMessage || labels.required;
+      }
+    }
+    for (const group of groups.values()) {
+      const required = group.some((field) => field.required) || Boolean(group[0]!.closest('[data-mk-required]'));
+      if (required && !group.some((field) => field.checked)) {
+        invalid.push(...group);
+        message ||= labels.choice;
+      }
+    }
+    return { invalid, message };
+  };
+
+  const validate = (section: HTMLElement) => {
+    clearErrors();
+    const { invalid, message } = check(section);
+    if (!invalid.length) return true;
+    const error = errorOf(section);
+    writeError(error, message);
+    for (const field of invalid) {
+      scope.attr(field, 'aria-invalid', 'true');
+      if (error?.id) scope.attr(field, 'aria-errormessage', error.id);
+    }
+    invalid[0]!.focus();
+    shake(invalid[0]!.closest('[data-mk-question-options], [data-mk-question-field]') ?? invalid[0]!);
+    root.dispatchEvent(new CustomEvent('mk:invalid', { bubbles: true, detail: { index, fields: invalid } }));
+    return false;
+  };
+
+  const render = () => {
+    scope.attr(form, 'data-mk-complete', complete ? '' : null);
+    form.style.setProperty('--mk-question-progress', String(complete ? 1 : (index + 1) / sections.length));
+    for (const panel of form.querySelectorAll<HTMLElement>('[data-mk-question-complete]')) scope.attr(panel, 'hidden', complete ? null : '');
+  };
+  scope.attr(form, 'style', form.getAttribute('style'));
+
+  const finish = () => {
+    if (complete) return;
+    complete = true;
+    render();
+    const answers = readAnswers(form);
+    const panel = form.querySelector<HTMLElement>('[data-mk-question-complete]');
+    if (panel) {
+      if (!panel.hasAttribute('tabindex')) scope.attr(panel, 'tabindex', '-1');
+      panel.focus({ preventScroll: true });
+    }
+    options.onComplete?.(answers);
+    root.dispatchEvent(new CustomEvent('mk:complete', { bubbles: true, detail: { answers } }));
+  };
+
+  const go = async (to: number) => {
+    const previous = index;
+    index = to;
+    render();
+    await steps.goTo(to);
+    if (scope.disposed) return;
+    const answers = readAnswers(form);
+    options.onChange?.(index, answers);
+    root.dispatchEvent(new CustomEvent('mk:question', { bubbles: true, detail: { index, previous, answers } }));
+  };
+
+  // Everything before the first await runs at once: a submit completes synchronously.
+  const next = async () => {
+    if (scope.disposed) return false;
+    if (complete) return true;
+    if (!validate(sections[index]!)) return false;
+    if (index === sections.length - 1) {
+      finish();
+      return true;
+    }
+    await go(index + 1);
+    return !scope.disposed;
+  };
+  const prev = async () => {
+    if (scope.disposed || complete || index === 0) return;
+    clearErrors();
+    await go(index - 1);
+  };
+
+  scope.on(form, 'click', (event) => {
+    const trigger = (event.target as Element | null)?.closest<HTMLElement>('[data-mk-question-next], [data-mk-question-prev]');
+    if (!trigger || !form.contains(trigger)) return;
+    event.preventDefault();
+    if (trigger.hasAttribute('data-mk-question-next')) void next();
+    else void prev();
+  });
+  scope.on(form, 'submit', (event) => {
+    event.preventDefault();
+    void next();
+  });
+  // A corrected field stops being invalid as soon as it is.
+  const recheck = (event: Event) => {
+    const field = (event.target as Element | null)?.closest<Field>(FIELDS);
+    if (!field || field.getAttribute('aria-invalid') !== 'true') return;
+    const section = field.closest<HTMLElement>('[data-mk-question]');
+    if (!section) return;
+    const { invalid } = check(section);
+    for (const candidate of fieldsOf(section)) if (!invalid.includes(candidate)) markValid(candidate);
+    if (!invalid.length) writeError(errorOf(section), '');
+  };
+  scope.on(form, 'input', recheck);
+  scope.on(form, 'change', recheck);
+  scope.on(form, 'reset', (event) => {
+    if (event.defaultPrevented) return;
+    clearErrors();
+    complete = false;
+    if (index !== 0) void go(0);
+    else render();
+  });
+  render();
+
+  return {
+    next,
+    prev,
+    reset() {
+      if (!scope.disposed) form.reset();
+    },
+    get answers() {
+      return readAnswers(form);
+    },
+    get index() {
+      return index;
+    },
+    get count() {
+      return sections.length;
+    },
+    get complete() {
+      return complete;
+    },
+    destroy: () => scope.dispose(),
+  };
+}

package/src/components/questionnaire/questionnaire.css

@@ -0,0 +1,216 @@
+/* questionnaire — one question at a time on a soft card: a thin progress line, large title, pill choices. */
+.mk-questionnaire,
+mk-questionnaire > form {
+  --mk-question-radius: var(--mk-radius-lg, 24px);
+  --mk-question-option-radius: var(--mk-radius-md, 16px);
+  display: grid;
+  gap: 1.25rem;
+  padding: clamp(1.25rem, 4vw, 2rem);
+  border-radius: var(--mk-question-radius);
+  background: var(--mk-surface-1);
+  box-shadow: inset 0 0 0 1px var(--mk-outline-soft);
+  color: var(--mk-text);
+  font-family: var(--mk-font);
+}
+
+mk-questionnaire {
+  display: block;
+}
+
+:is(.mk-questionnaire, mk-questionnaire) [data-mk-question-progress] {
+  height: 4px;
+  overflow: hidden;
+  border-radius: var(--mk-radius-full);
+  background: color-mix(in srgb, var(--mk-text) 9%, transparent);
+}
+
+:is(.mk-questionnaire, mk-questionnaire) [data-mk-question-bar] {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--mk-accent);
+  transform: scaleX(var(--mk-question-progress, 0));
+  transform-origin: left center;
+  transition: transform 0.7s cubic-bezier(0.38, 0.49, 0, 1);
+}
+
+/* A full-width column (steps' own flex centring does not apply here). */
+:is(.mk-questionnaire, mk-questionnaire) [data-mk-question] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 1rem;
+  align-content: start;
+  justify-content: normal;
+  justify-items: stretch;
+}
+
+:is(.mk-questionnaire, mk-questionnaire) [data-mk-question][hidden],
+:is(.mk-questionnaire, mk-questionnaire)[data-mk-complete] [data-mk-question],
+:is(.mk-questionnaire, mk-questionnaire) [data-mk-question-complete][hidden] {
+  display: none !important;
+}
+
+:is(.mk-questionnaire, mk-questionnaire) [data-mk-question-step] {
+  margin: 0;
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+  letter-spacing: 0.02em;
+}
+
+:is(.mk-questionnaire, mk-questionnaire) [data-mk-question] h3 {
+  margin: 0;
+  font-size: clamp(1.35rem, 3vw, 1.75rem);
+  font-weight: 500;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+}
+
+:is(.mk-questionnaire, mk-questionnaire) [data-mk-question] h3:focus {
+  outline: none;
+}
+
+:is(.mk-questionnaire, mk-questionnaire) [data-mk-question-required] {
+  color: var(--mk-accent);
+}
+
+:is(.mk-questionnaire, mk-questionnaire) [data-mk-question-description] {
+  margin: -0.5rem 0 0;
+  color: var(--mk-muted);
+}
+
+:is(.mk-questionnaire, mk-questionnaire) :is(input[type='text'], input[type='email'], input[type='number'], textarea, select) {
+  width: 100%;
+  min-height: 3.25rem;
+  padding: 0.75rem 1.1rem;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: var(--mk-question-option-radius);
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  font: inherit;
+  transition:
+    border-color 0.2s ease,
+    background-color 0.2s ease;
+}
+
+:is(.mk-questionnaire, mk-questionnaire) textarea {
+  resize: vertical;
+}
+
+:is(.mk-questionnaire, mk-questionnaire) :is(input, textarea, select):focus-visible {
+  border-color: var(--mk-accent);
+  outline: 2px solid color-mix(in srgb, var(--mk-accent) 35%, transparent);
+  outline-offset: 1px;
+}
+
+:is(.mk-questionnaire, mk-questionnaire) [data-mk-question-options] {
+  display: grid;
+  gap: 0.5rem;
+}
+
+/* Melonmind label.style-1: padding and radius spring; a chosen option becomes a pill. */
+:is(.mk-questionnaire, mk-questionnaire) [data-mk-question-option] {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-height: 3.25rem;
+  padding: 0.5rem 1.1rem;
+  border-radius: 16px;
+  background: var(--mk-surface-3);
+  cursor: pointer;
+  user-select: none;
+  transition:
+    padding 300ms cubic-bezier(0.38, 0.49, 0, 2),
+    background-color 300ms cubic-bezier(0.38, 0.49, 0, 1.5),
+    color 300ms cubic-bezier(0.38, 0.49, 0, 1.5),
+    border-radius 200ms cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+:is(.mk-questionnaire, mk-questionnaire) [data-mk-question-option]:hover {
+  padding-inline: 1.3rem;
+  background: var(--mk-surface-4);
+}
+
+:is(.mk-questionnaire, mk-questionnaire) [data-mk-question-option]:active {
+  animation: mk-question-press 500ms cubic-bezier(0.37, 1.42, 0.37, 1);
+}
+
+:is(.mk-questionnaire, mk-questionnaire) [data-mk-question-option]:has(input:checked) {
+  padding-inline: 1.5rem;
+  border-radius: 64px;
+  background: var(--mk-accent-soft);
+  color: var(--mk-on-accent-soft);
+}
+
+@keyframes mk-question-press {
+  50% {
+    transform: scale(0.98, 0.94);
+  }
+}
+
+:is(.mk-questionnaire, mk-questionnaire) [data-mk-question-option]:has(input:focus-visible) {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+:is(.mk-questionnaire, mk-questionnaire) [data-mk-question-option] input {
+  width: 1.15rem;
+  height: 1.15rem;
+  margin: 0;
+  accent-color: var(--mk-accent);
+}
+
+:is(.mk-questionnaire, mk-questionnaire) [aria-invalid='true']:not([type='checkbox'], [type='radio']) {
+  border-color: var(--mk-error);
+}
+
+:is(.mk-questionnaire, mk-questionnaire) [data-mk-question-option]:has([aria-invalid='true']) {
+  border-color: color-mix(in srgb, var(--mk-error) 60%, transparent);
+}
+
+:is(.mk-questionnaire, mk-questionnaire) [data-mk-question-actions] {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+}
+
+:is(.mk-questionnaire, mk-questionnaire) [data-mk-question-error] {
+  margin: 0;
+  color: var(--mk-error);
+  font-size: 0.875rem;
+}
+
+:is(.mk-questionnaire, mk-questionnaire) [data-mk-question-error]:empty {
+  display: none;
+}
+
+:is(.mk-questionnaire, mk-questionnaire) [data-mk-question-complete] {
+  display: grid;
+  gap: 1rem;
+  justify-items: start;
+  animation: mk-question-done 0.45s var(--mk-ease-sheet, ease-out) both;
+}
+
+:is(.mk-questionnaire, mk-questionnaire) [data-mk-question-complete]:focus {
+  outline: none;
+}
+
+@keyframes mk-question-done {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-questionnaire, mk-questionnaire) :is([data-mk-question-bar], [data-mk-question-option], [data-mk-question-complete]) {
+    transition: none;
+    animation: none;
+    transform: none;
+  }
+
+  :is(.mk-questionnaire, mk-questionnaire) [data-mk-question-bar] {
+    transform: scaleX(var(--mk-question-progress, 0));
+  }
+}