@yewdiel21/motion-kit 0.10.0 → 0.14.0

package/dist/elements/index.js

@@ -1,27 +1,76 @@
 import {
   createChat,
-  createChatBackground,
   createCursor,
   createIsland,
   createNav,
-  createSteps,
   createThemePicker,
   createToaster,
   iconSvg,
   toast
-} from "../chunk-IKQ5FODN.js";
+} from "../chunk-6P4P7NU6.js";
 import {
+  createActivityFeed,
+  createAttachment,
+  createBreadcrumb,
   createCalendar,
+  createChart,
+  createChartTooltip,
+  createChatBackground,
+  createCodeBlock,
+  createColorArea,
+  createColorField,
+  createColorPicker,
+  createColorSlider,
+  createCommandSearch,
+  createContextMenu,
+  createCreditCard,
+  createDataTable,
+  createDateRangePicker,
+  createDateTimePicker,
   createDialog,
+  createDrawer,
+  createEditableTable,
+  createEmptyState,
+  createFileExplorer,
+  createFilterBuilder,
+  createHoldConfirm,
   createHoverCard,
+  createImagePreview,
   createInputOtp,
+  createJsonViewer,
+  createLikeButton,
+  createLinkPreview,
+  createLoadingButton,
   createMenu,
+  createMultiSelect,
+  createNotificationBell,
   createPagination,
+  createPasswordStrength,
+  createPopover,
+  createProgress,
   createQuantity,
+  createQuestionnaire,
+  createRangeCalendar,
+  createRangeSlider,
+  createResizablePanel,
+  createRichTextEditor,
+  createScratchCard,
+  createSkeleton,
   createSlotPicker,
+  createSplitView,
+  createStarRating,
+  createStatCard,
+  createSteps,
   createStudioDock,
-  createTrailer
-} from "../chunk-TFNRIZHU.js";
+  createSwipeActions,
+  createTagInput,
+  createTimeField,
+  createTimeline,
+  createTooltip,
+  createTrailer,
+  createTreeView,
+  createVirtualList
+} from "../chunk-CU6SXW3E.js";
 import "../chunk-RVSKEBIC.js";
 import "../chunk-DOOMULVV.js";
 import "../chunk-TGV27ZWM.js";
@@ -195,7 +244,7 @@ var MkDialogElement = class extends MkElement {
       dialog.append(body);
     }
     this.append(dialog);
-    const engine = createDialog(dialog, {
+    const engine = this.createEngine(dialog, {
       variant: options.variant ?? "morph",
       placement: options.placement ?? "center",
       backdrop: !options.noBackdrop,
@@ -204,7 +253,7 @@ var MkDialogElement = class extends MkElement {
       float: options.float || false,
       triggers: this.id || false,
       labels: { close: closeLabel }
-    });
+    }, options);
     this.dialog = engine;
     return {
       destroy: () => {
@@ -215,6 +264,10 @@ var MkDialogElement = class extends MkElement {
       }
     };
   }
+  /** The engine on the built <dialog> (Drawer swaps it). */
+  createEngine(dialog, options, _attributes) {
+    return createDialog(dialog, options);
+  }
   open(origin) {
     this.dialog?.open(origin);
   }
@@ -582,6 +635,1208 @@ var MkSlotPickerElement = class extends MkElement {
   }
 };
 
+// src/components/attachment/element.ts
+var MkAttachmentElement = class extends MkElement {
+  static options = {
+    accept: "string",
+    multiple: "boolean",
+    maxFiles: "number",
+    maxSize: "number",
+    disabled: "boolean",
+    name: "string",
+    hint: "string",
+    initialFiles: "json"
+  };
+  create(options) {
+    return createAttachment(this, options);
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.isConnected || !this.instance) return;
+    const files = this.instance.files;
+    this.instance.destroy();
+    this.instance = this.create({ ...this.options, initialFiles: files });
+  }
+  addFiles(files) {
+    return this.instance?.addFiles(files) ?? [];
+  }
+  /** Remove one file (HTMLElement.remove() still removes the element). */
+  removeFile(id) {
+    this.instance?.remove(id);
+  }
+  setProgress(id, value, status) {
+    this.instance?.setProgress(id, value, status);
+  }
+  get files() {
+    return this.instance?.files ?? [];
+  }
+};
+
+// src/components/skeleton/element.ts
+var MkSkeletonElement = class extends MkElement {
+  static options = { loaded: "boolean", animation: "string", shape: "string", lines: "number", label: "string" };
+  create(options) {
+    return createSkeleton(this, { ...options, loading: !options.loaded });
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "loaded") this.instance.setLoading(next === null || next === "false");
+    else super.attributeChangedCallback(name, previous, next);
+  }
+  setLoading(loading) {
+    this.instance?.setLoading(loading);
+  }
+  get loading() {
+    return this.instance?.loading ?? false;
+  }
+};
+
+// src/components/questionnaire/element.ts
+var el = (tag, attrs = {}, text) => {
+  const element = document.createElement(tag);
+  for (const [name, value] of Object.entries(attrs)) element.setAttribute(name, value);
+  if (text !== void 0) element.textContent = text;
+  return element;
+};
+function buildForm(questions) {
+  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", {}, "\xA1Gracias! Respuestas enviadas."), el("button", { type: "reset", class: "mk-button mk-button--tonal" }, "Empezar de nuevo"));
+  form.append(done);
+  return form;
+}
+var MkQuestionnaireElement = class extends MkElement {
+  static options = { questions: "json", index: "number" };
+  questionnaire = null;
+  create(options) {
+    const questions = Array.isArray(options.questions) ? options.questions : null;
+    const built = questions && !this.querySelector("[data-mk-question]") ? buildForm(questions) : null;
+    if (built) this.append(built);
+    const engine = createQuestionnaire(this, { index: options.index });
+    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 ?? {};
+  }
+};
+
+// src/components/code-block/element.ts
+var MkCodeBlockElement = class extends MkElement {
+  static options = {
+    code: "string",
+    language: "string",
+    title: "string",
+    lineNumbers: "boolean",
+    copyLabel: "string",
+    copiedLabel: "string",
+    errorLabel: "string"
+  };
+  create(options) {
+    return createCodeBlock(this, options);
+  }
+  setCode(code) {
+    this.instance?.setCode(code);
+  }
+  copy() {
+    return this.instance?.copy() ?? Promise.resolve(false);
+  }
+};
+
+// src/components/context-menu/element.ts
+var MkContextMenuElement = class extends MkElement {
+  static options = { keepOpen: "boolean", overrideEditable: "boolean", longPress: "number", variant: "string" };
+  create(options) {
+    const { keepOpen, ...rest } = options;
+    return createContextMenu(this, { ...rest, closeOnSelect: !keepOpen });
+  }
+  openAt(x, y) {
+    this.instance?.openAt(x, y);
+  }
+  open(origin) {
+    this.instance?.open(origin);
+  }
+  close() {
+    this.instance?.close();
+  }
+  get isOpen() {
+    return this.instance?.isOpen ?? false;
+  }
+};
+
+// src/components/drawer/element.ts
+var MkDrawerElement = class extends MkDialogElement {
+  static options = { ...MkDialogElement.options, side: "string" };
+  createEngine(dialog, options, attributes) {
+    dialog.classList.add("mk-drawer");
+    const { variant: _variant, placement: _placement, float: _float, ...rest } = options;
+    return createDrawer(dialog, { ...rest, side: attributes.side });
+  }
+};
+
+// src/components/link-preview/element.ts
+var MkLinkPreviewElement = class extends MkElement {
+  static options = {
+    url: "string",
+    title: "string",
+    description: "string",
+    image: "string",
+    imageAlt: "string",
+    siteName: "string",
+    variant: "string",
+    label: "string",
+    target: "string",
+    openDelay: "number",
+    closeDelay: "number",
+    placement: "string"
+  };
+  create(options) {
+    return createLinkPreview(this, options);
+  }
+};
+
+// src/components/progress/element.ts
+var MkProgressElement = class extends MkElement {
+  static options = { value: "number", min: "number", max: "number", label: "string", variant: "string", showValue: "boolean" };
+  create(options) {
+    return createProgress(this, { ...options, value: typeof options.value === "number" ? options.value : null });
+  }
+  attributeChangedCallback(name, previous, next) {
+    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) {
+    this.instance?.setValue(value);
+  }
+  get value() {
+    return this.instance?.value ?? null;
+  }
+};
+
+// src/components/range-slider/element.ts
+var MkRangeSliderElement = class extends MkElement {
+  static options = { min: "number", max: "number", step: "number", value: "json", disabled: "boolean", name: "string", label: "string" };
+  format;
+  /** Formatter for the output and aria-valuetext (code, so a property rather than an attribute). */
+  get formatValue() {
+    return this.format;
+  }
+  set formatValue(format) {
+    this.format = format;
+    this.rebuild(true);
+  }
+  create(options) {
+    return createRangeSlider(this, { ...options, formatValue: this.format });
+  }
+  /** Rebuild with the current attributes; keepValue keeps the edited value over the `value` attribute. */
+  rebuild(keepValue) {
+    if (!this.isConnected || !this.instance) return;
+    const value = this.instance.value;
+    this.instance.destroy();
+    this.instance = this.create(keepValue ? { ...this.options, value } : { value, ...this.options });
+  }
+  // Bounds rebuild the engine but keep the edited value unless `value` is set.
+  attributeChangedCallback(_name, previous, next) {
+    if (previous !== next) this.rebuild(false);
+  }
+  setValue(value, notify) {
+    this.instance?.setValue(value, notify);
+  }
+  get value() {
+    return this.instance?.value;
+  }
+};
+
+// src/components/chart/element.ts
+var MkChartElement = class extends MkElement {
+  static options = {
+    type: "string",
+    labels: "list",
+    series: "json",
+    points: "json",
+    stacked: "boolean",
+    label: "string",
+    height: "number",
+    emptyLabel: "string",
+    legend: "boolean",
+    tooltip: "boolean"
+  };
+  create(options) {
+    return createChart(this, options);
+  }
+  attributeChangedCallback(_name, previous, next) {
+    if (previous === next || !this.instance) return;
+    this.instance.update({ stacked: false, legend: void 0, ...this.options });
+  }
+  update(options) {
+    this.instance?.update(options);
+  }
+  select(index) {
+    this.instance?.select(index);
+  }
+};
+
+// src/components/credit-card/element.ts
+var MkCreditCardElement = class extends MkElement {
+  static options = { tilt: "boolean", labels: "json", names: "json" };
+  create(options) {
+    return createCreditCard(this, options);
+  }
+  focusField(field) {
+    this.instance?.focus(field);
+  }
+  flip(back) {
+    this.instance?.flip(back);
+  }
+  get values() {
+    return this.instance?.values;
+  }
+  get brand() {
+    return this.instance?.brand ?? "unknown";
+  }
+};
+
+// src/components/command-search/element.ts
+var MkCommandSearchElement = class extends MkElement {
+  static options = { items: "json", placeholder: "string", emptyLabel: "string", label: "string", shortcut: "boolean", limit: "number" };
+  create(options) {
+    return createCommandSearch(this, options);
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "items") this.instance.setItems(this.options.items ?? []);
+    else super.attributeChangedCallback(name, previous, next);
+  }
+  open() {
+    this.instance?.open();
+  }
+  close() {
+    this.instance?.close();
+  }
+  setItems(items) {
+    this.instance?.setItems(items);
+  }
+};
+
+// src/components/hold-confirm/element.ts
+var MkHoldConfirmElement = class extends MkElement {
+  static options = { duration: "number", resetAfter: "number", holdingLabel: "string", doneLabel: "string", hint: "string", disabled: "boolean" };
+  create(options) {
+    return createHoldConfirm(this, options);
+  }
+  reset() {
+    this.instance?.reset();
+  }
+  get confirmed() {
+    return this.instance?.confirmed ?? false;
+  }
+};
+
+// src/components/image-preview/element.ts
+var MkImagePreviewElement = class extends MkElement {
+  static options = { loop: "boolean", labels: "json" };
+  create(options) {
+    return createImagePreview(this, options);
+  }
+  open(index) {
+    this.instance?.open(index);
+  }
+  close() {
+    this.instance?.close();
+  }
+};
+
+// src/components/like-button/element.ts
+var MkLikeButtonElement = class extends MkElement {
+  static options = { liked: "boolean", count: "number", label: "string", hideCount: "boolean" };
+  create(options) {
+    let made = null;
+    if (!this.querySelector("button")) {
+      made = document.createElement("button");
+      made.type = "button";
+      this.append(made);
+    }
+    const engine = createLikeButton(this, options);
+    if (made) {
+      const destroy = engine.destroy;
+      engine.destroy = () => {
+        destroy();
+        made.remove();
+      };
+    }
+    return engine;
+  }
+  // A new `liked` or `count` attribute updates in place (with the animation).
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "liked") this.instance.setLiked(next !== null && next !== "false", false);
+    else if (name === "count") this.instance.setCount(Number(next));
+    else super.attributeChangedCallback(name, previous, next);
+  }
+  get liked() {
+    return this.instance?.liked ?? false;
+  }
+  get count() {
+    return this.instance?.count ?? 0;
+  }
+};
+
+// src/components/notification-bell/element.ts
+var MkNotificationBellElement = class extends MkElement {
+  static options = { count: "number", label: "string", messageDuration: "number", max: "number" };
+  create(options) {
+    let made = null;
+    if (!this.querySelector("button")) {
+      made = document.createElement("button");
+      made.type = "button";
+      this.append(made);
+    }
+    const engine = createNotificationBell(this, options);
+    if (made) {
+      const destroy = engine.destroy;
+      engine.destroy = () => {
+        destroy();
+        made.remove();
+      };
+    }
+    return engine;
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "count") this.instance.setCount(Number(next) || 0);
+    else super.attributeChangedCallback(name, previous, next);
+  }
+  notify(message) {
+    this.instance?.notify(message);
+  }
+  clear() {
+    this.instance?.clear();
+  }
+  get count() {
+    return this.instance?.count ?? 0;
+  }
+};
+
+// src/components/password-strength/element.ts
+var MkPasswordStrengthElement = class extends MkElement {
+  static options = { minLength: "number", requireScore: "number", labels: "json" };
+  create(options) {
+    return createPasswordStrength(this, options);
+  }
+  get score() {
+    return this.instance?.score ?? 0;
+  }
+};
+
+// src/components/scratch-card/element.ts
+var MkScratchCardElement = class extends MkElement {
+  static options = { threshold: "number", brush: "number", coverLabel: "string", revealLabel: "string", revealedLabel: "string", celebrate: "boolean" };
+  create(options) {
+    return createScratchCard(this, options);
+  }
+  reveal() {
+    this.instance?.reveal();
+  }
+  reset() {
+    this.instance?.reset();
+  }
+  get revealed() {
+    return this.instance?.revealed ?? false;
+  }
+};
+
+// src/components/star-rating/element.ts
+var MkStarRatingElement = class extends MkElement {
+  static options = { max: "number", value: "number", name: "string", label: "string", labels: "list", readonly: "boolean", allowClear: "boolean", disabled: "boolean" };
+  create(options) {
+    return createStarRating(this, options);
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "value") this.instance.setValue(Number(next) || 0);
+    else super.attributeChangedCallback(name, previous, next);
+  }
+  get value() {
+    return this.instance?.value ?? 0;
+  }
+};
+
+// src/components/swipe-actions/element.ts
+var MkSwipeActionsElement = class extends MkElement {
+  static options = { fullSwipe: "number" };
+  create(options) {
+    return createSwipeActions(this, options);
+  }
+  close() {
+    this.instance?.close();
+  }
+};
+
+// src/components/color-slider/element.ts
+var MkColorSliderElement = class extends MkElement {
+  static options = { channel: "string", value: "string", label: "string", orientation: "string", step: "number", showValue: "boolean", name: "string", disabled: "boolean" };
+  create(options) {
+    return createColorSlider(this, options);
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "value" && next) this.instance.setColor(next, false);
+    else super.attributeChangedCallback(name, previous, next);
+  }
+  get value() {
+    return this.instance?.value ?? "";
+  }
+};
+
+// src/components/color-area/element.ts
+var MkColorAreaElement = class extends MkElement {
+  static options = { value: "string", label: "string", step: "number", name: "string", disabled: "boolean" };
+  create(options) {
+    return createColorArea(this, options);
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "value" && next) this.instance.setColor(next, false);
+    else super.attributeChangedCallback(name, previous, next);
+  }
+  get value() {
+    return this.instance?.value ?? "";
+  }
+};
+
+// src/components/color-field/element.ts
+var MkColorFieldElement = class extends MkElement {
+  static options = { value: "string", format: "string", alpha: "boolean", label: "string", name: "string", disabled: "boolean", readOnly: "boolean" };
+  create(options) {
+    return createColorField(this, options);
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "value" && next) this.instance.setColor(next, false);
+    else super.attributeChangedCallback(name, previous, next);
+  }
+  get value() {
+    return this.instance?.value ?? "";
+  }
+};
+
+// src/components/color-picker/element.ts
+var MkColorPickerElement = class extends MkElement {
+  static options = {
+    value: "string",
+    alpha: "boolean",
+    format: "string",
+    swatches: "list",
+    label: "string",
+    name: "string",
+    disabled: "boolean",
+    inline: "boolean",
+    eyedropper: "boolean"
+  };
+  create(options) {
+    return createColorPicker(this, options);
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "value" && next) this.instance.setColor(next, false);
+    else super.attributeChangedCallback(name, previous, next);
+  }
+  open() {
+    this.instance?.open();
+  }
+  close() {
+    this.instance?.close();
+  }
+  get value() {
+    return this.instance?.value ?? "";
+  }
+};
+
+// src/components/time-field/element.ts
+var MkTimeFieldElement = class extends MkElement {
+  static options = {
+    value: "string",
+    locale: "string",
+    hourCycle: "number",
+    seconds: "boolean",
+    minuteStep: "number",
+    min: "string",
+    max: "string",
+    label: "string",
+    name: "string",
+    disabled: "boolean",
+    readOnly: "boolean"
+  };
+  create(options) {
+    return createTimeField(this, options);
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "value") this.instance.setValue(next);
+    else super.attributeChangedCallback(name, previous, next);
+  }
+  get value() {
+    return this.instance?.value ?? null;
+  }
+};
+
+// src/components/range-calendar/element.ts
+var MkRangeCalendarElement = class extends MkElement {
+  static options = {
+    start: "string",
+    end: "string",
+    month: "string",
+    visibleMonths: "number",
+    firstDay: "number",
+    min: "string",
+    max: "string",
+    unavailable: "list",
+    locale: "string",
+    today: "string"
+  };
+  create(options) {
+    const { start, end, ...rest } = options;
+    return createRangeCalendar(this, { ...rest, value: start && end ? { start, end } : null });
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "start" || name === "end") {
+      const start = this.getAttribute("start");
+      const end = this.getAttribute("end");
+      this.instance.setValue(start && end ? { start, end } : null);
+    } else super.attributeChangedCallback(name, previous, next);
+  }
+  get value() {
+    return this.instance?.value ?? null;
+  }
+};
+
+// src/components/date-range-picker/element.ts
+var MkDateRangePickerElement = class extends MkElement {
+  static options = {
+    start: "string",
+    end: "string",
+    min: "string",
+    max: "string",
+    unavailable: "list",
+    firstDay: "number",
+    locale: "string",
+    today: "string",
+    label: "string",
+    name: "string",
+    presets: "json",
+    disabled: "boolean"
+  };
+  create(options) {
+    const { start, end, ...rest } = options;
+    return createDateRangePicker(this, { ...rest, value: start && end ? { start, end } : null });
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "start" || name === "end") {
+      const start = this.getAttribute("start");
+      const end = this.getAttribute("end");
+      this.instance.setValue(start && end ? { start, end } : null);
+    } else super.attributeChangedCallback(name, previous, next);
+  }
+  open() {
+    this.instance?.open();
+  }
+  close() {
+    this.instance?.close();
+  }
+  get value() {
+    return this.instance?.value ?? null;
+  }
+};
+
+// src/components/tooltip/element.ts
+var MkTooltipElement = class extends MkElement {
+  static options = { content: "string", placement: "string", openDelay: "number", closeDelay: "number", interactive: "boolean", arrow: "boolean" };
+  create(options) {
+    return createTooltip(this, options);
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "content") this.instance.setContent(next ?? "");
+    else super.attributeChangedCallback(name, previous, next);
+  }
+};
+
+// src/components/popover/element.ts
+var MkPopoverElement = class extends MkElement {
+  static options = { label: "string" };
+  create(options) {
+    return createPopover(this, options);
+  }
+  open() {
+    this.instance?.open();
+  }
+  close() {
+    this.instance?.close();
+  }
+  get isOpen() {
+    return this.instance?.isOpen ?? false;
+  }
+};
+
+// src/components/loading-button/element.ts
+var MkLoadingButtonElement = class extends MkElement {
+  static options = { labels: "json", compact: "boolean", resetAfter: "number", state: "string" };
+  create(options) {
+    const { state, ...rest } = options;
+    const instance = createLoadingButton(this, rest);
+    if (state) instance.setState(state);
+    return instance;
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "state") this.instance.setState(next || "idle");
+    else super.attributeChangedCallback(name, previous, next);
+  }
+  run(action) {
+    return this.instance?.run(action) ?? Promise.resolve(false);
+  }
+  get state() {
+    return this.instance?.state ?? "idle";
+  }
+};
+
+// src/components/breadcrumb/element.ts
+var MkBreadcrumbElement = class extends MkElement {
+  static options = { items: "json", label: "string", maxItems: "number" };
+  create(options) {
+    return createBreadcrumb(this, options);
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "items") {
+      try {
+        this.instance.setItems(JSON.parse(next ?? "[]"));
+      } catch {
+      }
+    } else super.attributeChangedCallback(name, previous, next);
+  }
+};
+
+// src/components/empty-state/element.ts
+var MkEmptyStateElement = class extends MkElement {
+  static options = { illustration: "string", title: "string", description: "string", actions: "json", loop: "boolean" };
+  create(options) {
+    return createEmptyState(this, options);
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "loop") return super.attributeChangedCallback(name, previous, next);
+    this.instance.update(this.options);
+  }
+};
+
+// src/components/stat-card/element.ts
+var MkStatCardElement = class extends MkElement {
+  static options = {
+    label: "string",
+    value: "number",
+    previous: "number",
+    format: "json",
+    locale: "string",
+    positive: "string",
+    comparison: "string",
+    series: "list",
+    target: "number",
+    countOnView: "boolean"
+  };
+  create(options) {
+    return createStatCard(this, normalise(options));
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "locale" || name === "count-on-view") return super.attributeChangedCallback(name, previous, next);
+    this.instance.update(normalise(this.options));
+  }
+};
+var normalise = (options) => ({
+  ...options,
+  series: Array.isArray(options.series) ? options.series.map(Number).filter(Number.isFinite) : void 0
+});
+
+// src/components/chart-tooltip/element.ts
+var MkChartTooltipElement = class extends MkElement {
+  static options = {
+    labels: "list",
+    series: "json",
+    align: "string",
+    inset: "json",
+    min: "number",
+    max: "number",
+    delta: "boolean",
+    share: "boolean",
+    total: "boolean",
+    sort: "boolean",
+    pin: "boolean",
+    label: "string"
+  };
+  create(options) {
+    return createChartTooltip(this, options);
+  }
+  attributeChangedCallback(_name, previous, next) {
+    if (previous === next || !this.instance) return;
+    this.instance.update(this.options);
+  }
+};
+
+// src/components/multi-select/element.ts
+var MkMultiSelectElement = class extends MkElement {
+  static options = { options: "json", value: "list", placeholder: "string", label: "string", name: "string", max: "number", closeOnSelect: "boolean", disabled: "boolean" };
+  create(options) {
+    return createMultiSelect(this, options);
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "value") this.instance.setValue((next ?? "").split(",").map((item) => item.trim()).filter(Boolean));
+    else super.attributeChangedCallback(name, previous, next);
+  }
+  get value() {
+    return this.instance?.value ?? [];
+  }
+};
+
+// src/components/tag-input/element.ts
+var MkTagInputElement = class extends MkElement {
+  static options = {
+    value: "list",
+    suggestions: "list",
+    placeholder: "string",
+    label: "string",
+    name: "string",
+    max: "number",
+    restrict: "boolean",
+    allowDuplicates: "boolean",
+    disabled: "boolean"
+  };
+  create(options) {
+    return createTagInput(this, options);
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    const list = (next ?? "").split(",").map((item) => item.trim()).filter(Boolean);
+    if (name === "value") this.instance.setValue(list);
+    else if (name === "suggestions") this.instance.setSuggestions(list);
+    else super.attributeChangedCallback(name, previous, next);
+  }
+  get value() {
+    return this.instance?.value ?? [];
+  }
+};
+
+// src/components/date-time-picker/element.ts
+var MkDateTimePickerElement = class extends MkElement {
+  static options = {
+    value: "string",
+    min: "string",
+    max: "string",
+    locale: "string",
+    hourCycle: "number",
+    minuteStep: "number",
+    firstDay: "number",
+    unavailable: "list",
+    today: "string",
+    label: "string",
+    name: "string",
+    disabled: "boolean"
+  };
+  create(options) {
+    return createDateTimePicker(this, options);
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "value") this.instance.setValue(next);
+    else super.attributeChangedCallback(name, previous, next);
+  }
+  open() {
+    this.instance?.open();
+  }
+  close() {
+    this.instance?.close();
+  }
+  get value() {
+    return this.instance?.value ?? null;
+  }
+};
+
+// src/components/filter-builder/element.ts
+var MkFilterBuilderElement = class extends MkElement {
+  static options = { fields: "json", value: "json", maxDepth: "number", label: "string", summary: "boolean" };
+  create(options) {
+    return createFilterBuilder(this, options);
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "value" && next) {
+      try {
+        this.instance.setValue(JSON.parse(next));
+      } catch {
+      }
+    } else super.attributeChangedCallback(name, previous, next);
+  }
+  get value() {
+    return this.instance?.value ?? null;
+  }
+};
+
+// src/components/timeline/element.ts
+var MkTimelineElement = class extends MkElement {
+  static options = { events: "json", layout: "string", group: "boolean", relative: "boolean", locale: "string", label: "string" };
+  create(options) {
+    return createTimeline(this, options);
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "events") {
+      try {
+        this.instance.setEvents(JSON.parse(next ?? "[]"));
+      } catch {
+      }
+    } else super.attributeChangedCallback(name, previous, next);
+  }
+  add(event, at) {
+    this.instance?.add(event, at);
+  }
+};
+
+// src/components/activity-feed/element.ts
+var MkActivityFeedElement = class extends MkElement {
+  static options = { items: "json", locale: "string", label: "string", emptyLabel: "string" };
+  create(options) {
+    return createActivityFeed(this, options);
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "items") {
+      try {
+        this.instance.setItems(JSON.parse(next ?? "[]"));
+      } catch {
+      }
+    } else super.attributeChangedCallback(name, previous, next);
+  }
+  /** New activity on top (not Element.prepend). */
+  prependItems(items) {
+    this.instance?.prepend(items);
+  }
+  appendItems(items) {
+    this.instance?.append(items);
+  }
+};
+
+// src/components/tree-view/element.ts
+var MkTreeViewElement = class extends MkElement {
+  static options = { nodes: "json", checkable: "boolean", checked: "list", expanded: "list", selected: "string", search: "string", label: "string" };
+  create(options) {
+    const search = this.hasAttribute("search") ? this.getAttribute("search") || true : void 0;
+    const expanded = this.getAttribute("expanded") === "all" ? true : options.expanded;
+    return createTreeView(this, { ...options, search, expanded });
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "nodes") {
+      try {
+        this.instance.setNodes(JSON.parse(next ?? "[]"));
+      } catch {
+      }
+    } else if (name === "selected") this.instance.select(next);
+    else super.attributeChangedCallback(name, previous, next);
+  }
+};
+
+// src/components/file-explorer/element.ts
+var MkFileExplorerElement = class extends MkElement {
+  static options = {
+    files: "json",
+    rootLabel: "string",
+    folder: "string",
+    view: "string",
+    tree: "boolean",
+    readOnly: "boolean",
+    locale: "string",
+    label: "string"
+  };
+  create(options) {
+    return createFileExplorer(this, options);
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "files") {
+      try {
+        this.instance.setFiles(JSON.parse(next ?? "[]"));
+      } catch {
+      }
+    } else if (name === "view") this.instance.setView(next === "grid" ? "grid" : "list");
+    else if (name === "folder") this.instance.open(next || "/");
+    else super.attributeChangedCallback(name, previous, next);
+  }
+};
+
+// src/components/json-viewer/element.ts
+var MkJsonViewerElement = class extends MkElement {
+  static options = {
+    data: "json",
+    expandDepth: "number",
+    rootName: "string",
+    search: "string",
+    toolbar: "boolean",
+    sortKeys: "boolean",
+    label: "string"
+  };
+  create(options) {
+    const search = this.hasAttribute("search") ? this.getAttribute("search") || true : void 0;
+    return createJsonViewer(this, { ...options, search });
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "data") {
+      try {
+        this.instance.setData(JSON.parse(next ?? "null"));
+      } catch {
+      }
+    } else super.attributeChangedCallback(name, previous, next);
+  }
+};
+
+// src/components/virtual-list/element.ts
+var MkVirtualListElement = class extends MkElement {
+  static options = {
+    items: "json",
+    itemHeight: "number",
+    estimatedHeight: "number",
+    overscan: "number",
+    selectable: "string",
+    selected: "list",
+    label: "string",
+    emptyLabel: "string",
+    locale: "string"
+  };
+  create(options) {
+    const raw = this.getAttribute("selectable");
+    const selectable = raw === null || raw === "false" ? false : raw === "multiple" ? "multiple" : "single";
+    return createVirtualList(this, { ...options, selectable });
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "items") {
+      try {
+        this.instance.setItems(JSON.parse(next ?? "[]"));
+      } catch {
+      }
+    } else if (name === "selected") this.instance.select((next ?? "").split(",").map((key) => key.trim()).filter(Boolean));
+    else super.attributeChangedCallback(name, previous, next);
+  }
+};
+
+// src/components/resizable-panel/element.ts
+var MkResizablePanelElement = class extends MkElement {
+  static options = {
+    orientation: "string",
+    sizes: "list",
+    min: "number",
+    max: "number",
+    collapsible: "list",
+    collapsed: "list",
+    step: "number",
+    storageKey: "string",
+    handleButtons: "boolean",
+    labels: "list"
+  };
+  create(options) {
+    const numbers = (value) => Array.isArray(value) ? value.map(Number).filter(Number.isFinite) : void 0;
+    return createResizablePanel(this, { ...options, sizes: numbers(options.sizes), collapsible: numbers(options.collapsible), collapsed: numbers(options.collapsed) });
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "orientation") this.instance.setOrientation(next === "vertical" ? "vertical" : "horizontal");
+    else if (name === "sizes") this.instance.setSizes((next ?? "").split(",").map(Number).filter(Number.isFinite));
+    else super.attributeChangedCallback(name, previous, next);
+  }
+};
+
+// src/components/split-view/element.ts
+var MkSplitViewElement = class extends MkElement {
+  static options = {
+    orientation: "string",
+    ratio: "number",
+    min: "number",
+    collapsible: "string",
+    stackBelow: "number",
+    storageKey: "string",
+    labels: "list"
+  };
+  create(options) {
+    const raw = this.getAttribute("collapsible");
+    const collapsible = raw === null || raw === "" || raw === "true" ? true : raw === "false" ? false : raw === "start" || raw === "end" ? raw : true;
+    const labels = Array.isArray(options.labels) && options.labels.length === 2 ? options.labels : void 0;
+    return createSplitView(this, { ...options, collapsible, labels });
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "ratio" && next !== null && Number.isFinite(Number(next))) this.instance.setRatio(Number(next));
+    else super.attributeChangedCallback(name, previous, next);
+  }
+};
+
+// src/components/data-table/element.ts
+var MkDataTableElement = class extends MkElement {
+  static options = {
+    columns: "json",
+    rows: "json",
+    rowKey: "string",
+    caption: "string",
+    pageSize: "number",
+    pageSizes: "json",
+    selectable: "boolean",
+    search: "string",
+    filters: "boolean",
+    columnsMenu: "boolean",
+    actions: "json",
+    bulkActions: "json",
+    sort: "string",
+    loading: "boolean",
+    emptyTitle: "string",
+    emptyDescription: "string",
+    locale: "string"
+  };
+  create(options) {
+    const raw = this.getAttribute("search");
+    const search = raw === null || raw === "" ? true : raw === "false" ? false : raw;
+    const [key, direction] = String(options.sort ?? "").split(":");
+    const sort = key ? { key, direction: direction === "desc" ? "desc" : "asc" } : null;
+    return createDataTable(this, { ...options, search, sort });
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "rows") {
+      try {
+        this.instance.setRows(JSON.parse(next ?? "[]"));
+      } catch {
+      }
+    } else if (name === "loading") this.instance.setLoading(next !== null && next !== "false");
+    else super.attributeChangedCallback(name, previous, next);
+  }
+};
+
+// src/components/editable-table/element.ts
+var MkEditableTableElement = class extends MkElement {
+  static options = {
+    columns: "json",
+    rows: "json",
+    rowKey: "string",
+    caption: "string",
+    pageSize: "number",
+    selectable: "boolean",
+    search: "string",
+    filters: "boolean",
+    columnsMenu: "boolean",
+    newRow: "json",
+    locale: "string"
+  };
+  create(options) {
+    const raw = this.getAttribute("search");
+    const search = raw === null || raw === "" ? true : raw === "false" ? false : raw;
+    const template = options.newRow;
+    return createEditableTable(this, { ...options, search, newRow: template ? () => ({ ...template }) : void 0 });
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "rows") {
+      try {
+        this.instance.setRows(JSON.parse(next ?? "[]"));
+      } catch {
+      }
+    } else super.attributeChangedCallback(name, previous, next);
+  }
+};
+
+// src/components/rich-text-editor/element.ts
+var MkRichTextEditorElement = class extends MkElement {
+  static options = {
+    value: "string",
+    placeholder: "string",
+    toolbar: "list",
+    maxLength: "number",
+    counter: "string",
+    name: "string",
+    label: "string",
+    readOnly: "boolean",
+    markdown: "boolean"
+  };
+  create(options) {
+    const counter = options.counter === "false" ? false : options.counter === "characters" ? "characters" : options.counter === "words" ? "words" : void 0;
+    return createRichTextEditor(this, { ...options, counter, toolbar: options.toolbar });
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "value") this.instance.setValue(next ?? "");
+    else super.attributeChangedCallback(name, previous, next);
+  }
+};
+
 // src/elements/index.ts
 var ELEMENTS = {
   "mk-theme-picker": MkThemePickerElement,
@@ -601,7 +1856,56 @@ var ELEMENTS = {
   "mk-studio-dock": MkStudioDockElement,
   "mk-trailer": MkTrailerElement,
   "mk-calendar": MkCalendarElement,
-  "mk-slot-picker": MkSlotPickerElement
+  "mk-slot-picker": MkSlotPickerElement,
+  "mk-attachment": MkAttachmentElement,
+  "mk-skeleton": MkSkeletonElement,
+  "mk-questionnaire": MkQuestionnaireElement,
+  "mk-code-block": MkCodeBlockElement,
+  "mk-context-menu": MkContextMenuElement,
+  "mk-drawer": MkDrawerElement,
+  "mk-link-preview": MkLinkPreviewElement,
+  "mk-progress": MkProgressElement,
+  "mk-range-slider": MkRangeSliderElement,
+  "mk-chart": MkChartElement,
+  "mk-credit-card": MkCreditCardElement,
+  "mk-command-search": MkCommandSearchElement,
+  "mk-hold-confirm": MkHoldConfirmElement,
+  "mk-image-preview": MkImagePreviewElement,
+  "mk-like-button": MkLikeButtonElement,
+  "mk-notification-bell": MkNotificationBellElement,
+  "mk-password-strength": MkPasswordStrengthElement,
+  "mk-scratch-card": MkScratchCardElement,
+  "mk-star-rating": MkStarRatingElement,
+  "mk-swipe-actions": MkSwipeActionsElement,
+  "mk-color-slider": MkColorSliderElement,
+  "mk-color-area": MkColorAreaElement,
+  "mk-color-field": MkColorFieldElement,
+  "mk-color-picker": MkColorPickerElement,
+  "mk-time-field": MkTimeFieldElement,
+  "mk-range-calendar": MkRangeCalendarElement,
+  "mk-date-range-picker": MkDateRangePickerElement,
+  "mk-tooltip": MkTooltipElement,
+  "mk-popover": MkPopoverElement,
+  "mk-loading-button": MkLoadingButtonElement,
+  "mk-breadcrumb": MkBreadcrumbElement,
+  "mk-empty-state": MkEmptyStateElement,
+  "mk-stat-card": MkStatCardElement,
+  "mk-chart-tooltip": MkChartTooltipElement,
+  "mk-multi-select": MkMultiSelectElement,
+  "mk-tag-input": MkTagInputElement,
+  "mk-date-time-picker": MkDateTimePickerElement,
+  "mk-filter-builder": MkFilterBuilderElement,
+  "mk-timeline": MkTimelineElement,
+  "mk-activity-feed": MkActivityFeedElement,
+  "mk-tree-view": MkTreeViewElement,
+  "mk-file-explorer": MkFileExplorerElement,
+  "mk-json-viewer": MkJsonViewerElement,
+  "mk-virtual-list": MkVirtualListElement,
+  "mk-resizable-panel": MkResizablePanelElement,
+  "mk-split-view": MkSplitViewElement,
+  "mk-data-table": MkDataTableElement,
+  "mk-editable-table": MkEditableTableElement,
+  "mk-rich-text-editor": MkRichTextEditorElement
   // new-component:entries
 };
 function defineElements(names = Object.keys(ELEMENTS)) {
@@ -609,25 +1913,74 @@ function defineElements(names = Object.keys(ELEMENTS)) {
 }
 export {
   ELEMENTS,
+  MkActivityFeedElement,
+  MkAttachmentElement,
+  MkBreadcrumbElement,
   MkCalendarElement,
+  MkChartElement,
+  MkChartTooltipElement,
   MkChatBackgroundElement,
   MkChatElement,
+  MkCodeBlockElement,
+  MkColorAreaElement,
+  MkColorFieldElement,
+  MkColorPickerElement,
+  MkColorSliderElement,
+  MkCommandSearchElement,
+  MkContextMenuElement,
+  MkCreditCardElement,
   MkCursorElement,
+  MkDataTableElement,
+  MkDateRangePickerElement,
+  MkDateTimePickerElement,
   MkDialogElement,
+  MkDrawerElement,
+  MkEditableTableElement,
   MkElement,
+  MkEmptyStateElement,
+  MkFileExplorerElement,
+  MkFilterBuilderElement,
+  MkHoldConfirmElement,
   MkHoverCardElement,
+  MkImagePreviewElement,
   MkInputOtpElement,
   MkIslandElement,
+  MkJsonViewerElement,
+  MkLikeButtonElement,
+  MkLinkPreviewElement,
+  MkLoadingButtonElement,
   MkMenuElement,
+  MkMultiSelectElement,
   MkNavElement,
+  MkNotificationBellElement,
   MkPaginationElement,
+  MkPasswordStrengthElement,
+  MkPopoverElement,
+  MkProgressElement,
   MkQuantityElement,
+  MkQuestionnaireElement,
+  MkRangeCalendarElement,
+  MkRangeSliderElement,
+  MkResizablePanelElement,
+  MkRichTextEditorElement,
+  MkScratchCardElement,
+  MkSkeletonElement,
   MkSlotPickerElement,
+  MkSplitViewElement,
+  MkStarRatingElement,
+  MkStatCardElement,
   MkStepsElement,
   MkStudioDockElement,
+  MkSwipeActionsElement,
+  MkTagInputElement,
   MkThemePickerElement,
+  MkTimeFieldElement,
+  MkTimelineElement,
   MkToasterElement,
+  MkTooltipElement,
   MkTrailerElement,
+  MkTreeViewElement,
+  MkVirtualListElement,
   SafeHTMLElement,
   defineElement,
   defineElements,