@yewdiel21/motion-kit 0.16.0 → 0.18.0

package/dist/elements/index.js

@@ -17,11 +17,13 @@ import {
   createVoiceDots,
   iconSvg,
   toast
-} from "../chunk-RBEKR5UZ.js";
+} from "../chunk-AWDEKDEJ.js";
 import {
   createActivityFeed,
   createAddToCart,
   createAttachment,
+  createBadgeButton,
+  createBentoGrid,
   createBreadcrumb,
   createCalendar,
   createChart,
@@ -40,10 +42,13 @@ import {
   createDateTimePicker,
   createDialog,
   createDrawer,
+  createDrilldownMenu,
   createEditableTable,
   createEmptyState,
+  createEqualizerSlider,
   createFileExplorer,
   createFilterBuilder,
+  createHandwritingText,
   createHoldConfirm,
   createHoverCard,
   createImagePreview,
@@ -52,38 +57,53 @@ import {
   createLikeButton,
   createLinkPreview,
   createLoadingButton,
+  createMagnetizeButton,
   createMenu,
+  createMorphingPageDots,
   createMultiSelect,
+  createNotFound,
   createNotificationBell,
+  createNotificationStack,
   createPagination,
+  createParticleButton,
   createPasswordStrength,
   createPopover,
   createProgress,
   createQuantity,
   createQuestionnaire,
+  createRadioGroup,
   createRangeCalendar,
   createRangeSlider,
+  createRatingScale,
   createResizablePanel,
   createRichTextEditor,
   createScratchCard,
   createScrollIsland,
+  createScrollPreviewDock,
   createSelect,
+  createSignaturePad,
   createSkeleton,
   createSlotPicker,
   createSplitView,
   createStarRating,
   createStatCard,
+  createStepper,
   createSteps,
+  createStickyHeader,
   createStudioDock,
   createSwipeActions,
   createTagInput,
+  createTemperatureSlider,
   createTimeField,
   createTimeline,
   createTooltip,
   createTrailer,
   createTreeView,
-  createVirtualList
-} from "../chunk-SDQ776LG.js";
+  createVirtualList,
+  createVoiceMessageBubble,
+  createWaveformPlayer,
+  createWheelPicker
+} from "../chunk-Q7IW4FV3.js";
 import "../chunk-RVSKEBIC.js";
 import "../chunk-DOOMULVV.js";
 import "../chunk-TGV27ZWM.js";
@@ -2097,6 +2117,778 @@ var MkOrbitMenuElement = class extends MkElement {
   }
 };
 
+// src/components/signature-pad/element.ts
+var MkSignaturePadElement = class extends MkElement {
+  static options = {
+    data: "json",
+    label: "string",
+    hint: "string",
+    placeholder: "string",
+    color: "string",
+    width: "number",
+    disabled: "boolean",
+    readOnly: "boolean",
+    toolbar: "boolean",
+    name: "string",
+    historyLimit: "number"
+  };
+  saved;
+  create(options) {
+    return createSignaturePad(this, { ...options, data: options.data ?? this.saved });
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance || !this.isConnected) return;
+    if (name === "disabled") {
+      this.instance.setDisabled(next !== null && next !== "false");
+      return;
+    }
+    if (name === "read-only") {
+      this.instance.setReadOnly(next !== null && next !== "false");
+      return;
+    }
+    if (name === "data") {
+      try {
+        this.instance.importData(next === null ? { version: 1, strokes: [] } : JSON.parse(next), false);
+      } catch {
+      }
+      return;
+    }
+    this.saved = this.instance.exportData();
+    this.instance.destroy();
+    this.instance = createSignaturePad(this, { ...this.options, data: this.saved });
+  }
+  disconnectedCallback() {
+    this.saved = this.instance?.exportData() ?? this.saved;
+    super.disconnectedCallback();
+  }
+  connectedCallback() {
+    if (!this.instance) this.instance = createSignaturePad(this, { ...this.options, data: this.saved ?? this.options.data });
+  }
+  get data() {
+    if (this.instance) return this.instance.exportData();
+    return this.saved ? { version: 1, strokes: this.saved.strokes.map((stroke) => ({ ...stroke, points: stroke.points.map((point) => ({ ...point })) })) } : { version: 1, strokes: [] };
+  }
+  set data(value) {
+    this.importData(value);
+  }
+  get isEmpty() {
+    return this.instance?.isEmpty ?? !this.saved?.strokes.length;
+  }
+  get canUndo() {
+    return this.instance?.canUndo ?? false;
+  }
+  get canRedo() {
+    return this.instance?.canRedo ?? false;
+  }
+  undo() {
+    this.instance?.undo();
+  }
+  redo() {
+    this.instance?.redo();
+  }
+  clear() {
+    this.instance?.clear();
+  }
+  importData(value, notify = true) {
+    return this.instance?.importData(value, notify) ?? false;
+  }
+  exportData() {
+    return this.instance?.exportData() ?? this.data;
+  }
+  exportSVG(options) {
+    return this.instance?.exportSVG(options) ?? "";
+  }
+  exportPNG(options) {
+    return this.instance?.exportPNG(options) ?? Promise.resolve(null);
+  }
+};
+var defineSignaturePad = () => defineElement("mk-signature-pad", MkSignaturePadElement);
+
+// src/components/waveform-player/element.ts
+var MkWaveformPlayerElement = class _MkWaveformPlayerElement extends MkElement {
+  static options = { src: "string", peaks: "json", label: "string", disabled: "boolean", playbackRates: "json" };
+  create(options) {
+    return createWaveformPlayer(this, options);
+  }
+  play() {
+    return this.instance?.play() ?? Promise.resolve(false);
+  }
+  pause() {
+    this.instance?.pause();
+  }
+  seek(seconds) {
+    this.instance?.seek(seconds);
+  }
+  update(options) {
+    this.instance?.update(options);
+  }
+  get state() {
+    return this.instance?.state;
+  }
+  get audio() {
+    return this.instance?.audio ?? null;
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    const option = name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+    if (!Object.hasOwn(_MkWaveformPlayerElement.options, option)) return;
+    this.instance.update({ [option]: this.options[option] });
+  }
+};
+var defineWaveformPlayer = () => defineElement("mk-waveform-player", MkWaveformPlayerElement);
+
+// src/components/voice-message-bubble/element.ts
+var MkVoiceMessageBubbleElement = class _MkVoiceMessageBubbleElement extends MkElement {
+  static options = { src: "string", peaks: "json", label: "string", disabled: "boolean", playbackRates: "json", direction: "string", author: "string", timestamp: "string", dateTime: "string", status: "string" };
+  create(options) {
+    return createVoiceMessageBubble(this, options);
+  }
+  play() {
+    return this.instance?.play() ?? Promise.resolve(false);
+  }
+  pause() {
+    this.instance?.pause();
+  }
+  seek(seconds) {
+    this.instance?.seek(seconds);
+  }
+  update(options) {
+    this.instance?.update(options);
+  }
+  get state() {
+    return this.instance?.state;
+  }
+  get audio() {
+    return this.instance?.audio ?? null;
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    const option = name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+    if (!Object.hasOwn(_MkVoiceMessageBubbleElement.options, option)) return;
+    this.instance.update({ [option]: this.options[option] });
+  }
+};
+var defineVoiceMessageBubble = () => defineElement("mk-voice-message-bubble", MkVoiceMessageBubbleElement);
+
+// src/components/drilldown-menu/element.ts
+var MkDrilldownMenuElement = class extends MkElement {
+  static options = { items: "json", path: "json", label: "string", backLabel: "string", emptyText: "string" };
+  pendingItems;
+  pendingPath;
+  create(options) {
+    return createDrilldownMenu(this, {
+      ...options,
+      ...this.pendingItems !== void 0 ? { items: this.pendingItems } : {},
+      ...this.pendingPath !== void 0 ? { path: this.pendingPath } : {}
+    });
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next) return;
+    if (name === "items" || name === "path") {
+      try {
+        const value = JSON.parse(next ?? "[]");
+        if (!Array.isArray(value)) return;
+        if (name === "items") {
+          this.pendingItems = value;
+          this.instance?.setItems(this.pendingItems);
+        } else {
+          this.pendingPath = value;
+          this.instance?.setPath(this.pendingPath);
+        }
+      } catch {
+      }
+    } else if (this.instance) {
+      const { label, backLabel, emptyText } = this.options;
+      this.instance.update({ label, backLabel, emptyText });
+    }
+  }
+  get items() {
+    return this.pendingItems ?? this.options.items ?? [];
+  }
+  set items(items) {
+    this.pendingItems = items;
+    this.instance?.setItems(items);
+  }
+  get path() {
+    return this.instance?.path ?? this.pendingPath ?? this.options.path ?? [];
+  }
+  set path(path) {
+    this.pendingPath = path;
+    this.instance?.setPath(path);
+  }
+  open(id) {
+    return this.instance?.open(id) ?? false;
+  }
+  back() {
+    return this.instance?.back() ?? false;
+  }
+  root() {
+    this.instance?.root();
+  }
+  reset() {
+    this.instance?.reset();
+  }
+  setItems(items) {
+    this.items = items;
+  }
+  setPath(path) {
+    this.path = path;
+  }
+  focusItem(id) {
+    this.instance?.focusItem(id);
+  }
+};
+var defineDrilldownMenu = () => defineElement("mk-drilldown-menu", MkDrilldownMenuElement);
+
+// src/components/wheel-picker/element.ts
+var MkWheelPickerElement = class extends MkElement {
+  static options = { items: "json", value: "string", name: "string", label: "string", disabled: "boolean", visibleItems: "number", itemHeight: "number" };
+  savedValue;
+  savedItems;
+  create(options) {
+    return createWheelPicker(this, { ...options, ...this.savedItems ? { items: this.savedItems } : {}, value: this.savedValue ?? options.value });
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next) return;
+    if (name === "items") this.savedItems = void 0;
+    if (!this.instance) {
+      if (name === "value") this.savedValue = next ?? void 0;
+      return;
+    }
+    if (name === "value" && next !== null) {
+      this.instance.setValue(next);
+      return;
+    }
+    if (name === "items") {
+      this.instance.setItems(this.options.items ?? []);
+      if (this.options.value !== void 0) this.instance.setValue(String(this.options.value));
+      return;
+    }
+    this.savedValue = name === "value" ? void 0 : this.instance.value;
+    this.instance.destroy();
+    this.instance = this.create(this.options);
+  }
+  disconnectedCallback() {
+    this.savedValue = this.instance?.value ?? this.savedValue;
+    super.disconnectedCallback();
+  }
+  get value() {
+    return this.instance?.value ?? "";
+  }
+  set value(next) {
+    this.setAttribute("value", next);
+  }
+  setValue(value, notify = false) {
+    this.instance?.setValue(value, notify);
+  }
+  setItems(items, notify = false) {
+    this.savedItems = items.map((item) => typeof item === "string" ? item : { ...item });
+    this.instance?.setItems(items, notify);
+  }
+};
+var defineWheelPicker = () => defineElement("mk-wheel-picker", MkWheelPickerElement);
+
+// src/components/stepper/element.ts
+var MkStepperElement = class extends MkElement {
+  static options = { "items": "json", "value": "number", "label": "string", "name": "string", "variant": "string", "linear": "boolean", "disabled": "boolean" };
+  baseline;
+  saved;
+  create(options) {
+    const created = createStepper(this, { ...options, value: this.saved !== void 0 ? this.saved : options.value, defaultValue: this.baseline });
+    if (this.baseline === void 0) this.baseline = created.value;
+    this.saved = void 0;
+    return created;
+  }
+  disconnectedCallback() {
+    this.saved = this.instance?.value;
+    super.disconnectedCallback();
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next) return;
+    if (name === "value" && (!this.instance || !this.isConnected)) {
+      this.saved = next === null ? this.baseline ?? 0 : Number.isFinite(Number(next)) ? Number(next) : this.baseline ?? 0;
+      return;
+    }
+    if (!this.instance || !this.isConnected) return;
+    if (name === "value") {
+      const parsed = next === null ? this.baseline ?? 0 : Number(next);
+      this.instance.setValue(parsed, false);
+      return;
+    }
+    this.saved = this.instance.value;
+    super.attributeChangedCallback(name, previous, next);
+  }
+  get value() {
+    return this.instance?.value ?? this.saved ?? 0;
+  }
+  set value(next) {
+    this.setValue(next);
+  }
+  setValue(value, notify = false) {
+    if (this.instance) this.instance.setValue(value, notify);
+    else this.saved = value;
+  }
+  reset(notify = false) {
+    this.instance?.reset(notify);
+  }
+  next(notify = true) {
+    this.instance?.next(notify);
+  }
+  previous(notify = true) {
+    this.instance?.previous(notify);
+  }
+};
+var defineStepper = () => defineElement("mk-stepper", MkStepperElement);
+
+// src/components/radio-group/element.ts
+var MkRadioGroupElement = class extends MkElement {
+  static options = { "items": "json", "value": "string", "name": "string", "label": "string", "disabled": "boolean", "required": "boolean", "error": "string", "variant": "string" };
+  baseline;
+  saved;
+  create(options) {
+    const created = createRadioGroup(this, { ...options, value: this.saved !== void 0 ? this.saved : options.value, defaultValue: this.baseline });
+    if (this.baseline === void 0) this.baseline = created.value;
+    this.saved = void 0;
+    return created;
+  }
+  disconnectedCallback() {
+    this.saved = this.instance?.value;
+    super.disconnectedCallback();
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next) return;
+    if (name === "value" && (!this.instance || !this.isConnected)) {
+      this.saved = next === null ? this.baseline ?? null : next;
+      return;
+    }
+    if (!this.instance || !this.isConnected) return;
+    if (name === "value") {
+      const parsed = next === null ? this.baseline ?? null : next;
+      this.instance.setValue(parsed, false);
+      return;
+    }
+    this.saved = this.instance.value;
+    super.attributeChangedCallback(name, previous, next);
+  }
+  get value() {
+    return this.instance?.value ?? this.saved ?? null;
+  }
+  set value(next) {
+    this.setValue(next);
+  }
+  setValue(value, notify = false) {
+    if (this.instance) this.instance.setValue(value, notify);
+    else this.saved = value;
+  }
+  reset(notify = false) {
+    this.instance?.reset(notify);
+  }
+};
+var defineRadioGroup = () => defineElement("mk-radio-group", MkRadioGroupElement);
+
+// src/components/equalizer-slider/element.ts
+var MkEqualizerSliderElement = class extends MkElement {
+  static options = { "min": "number", "max": "number", "step": "number", "value": "number", "label": "string", "name": "string", "disabled": "boolean", "error": "string", "waveform": "json", "bars": "number" };
+  baseline;
+  saved;
+  create(options) {
+    const created = createEqualizerSlider(this, { ...options, value: this.saved !== void 0 ? this.saved : options.value, defaultValue: this.baseline });
+    if (this.baseline === void 0) this.baseline = created.value;
+    this.saved = void 0;
+    return created;
+  }
+  disconnectedCallback() {
+    this.saved = this.instance?.value;
+    super.disconnectedCallback();
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next) return;
+    if (name === "value" && (!this.instance || !this.isConnected)) {
+      this.saved = next === null ? this.baseline ?? 60 : Number.isFinite(Number(next)) ? Number(next) : this.baseline ?? 60;
+      return;
+    }
+    if (!this.instance || !this.isConnected) return;
+    if (name === "value") {
+      const parsed = next === null ? this.baseline ?? 60 : Number(next);
+      this.instance.setValue(parsed, false);
+      return;
+    }
+    this.saved = this.instance.value;
+    super.attributeChangedCallback(name, previous, next);
+  }
+  get value() {
+    return this.instance?.value ?? this.saved ?? 60;
+  }
+  set value(next) {
+    this.setValue(next);
+  }
+  setValue(value, notify = false) {
+    if (this.instance) this.instance.setValue(value, notify);
+    else this.saved = value;
+  }
+  reset(notify = false) {
+    this.instance?.reset(notify);
+  }
+};
+var defineEqualizerSlider = () => defineElement("mk-equalizer-slider", MkEqualizerSliderElement);
+
+// src/components/temperature-slider/element.ts
+var MkTemperatureSliderElement = class extends MkElement {
+  static options = { "min": "number", "max": "number", "step": "number", "value": "number", "label": "string", "name": "string", "disabled": "boolean", "error": "string", "unit": "string" };
+  baseline;
+  saved;
+  syncing = false;
+  create(options) {
+    const created = createTemperatureSlider(this, { ...options, value: this.saved !== void 0 ? this.saved : options.value, defaultValue: this.baseline });
+    if (this.baseline === void 0) this.baseline = created.value;
+    this.saved = void 0;
+    return created;
+  }
+  disconnectedCallback() {
+    this.saved = this.instance?.value;
+    super.disconnectedCallback();
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || this.syncing) return;
+    if (name === "value" && (!this.instance || !this.isConnected)) {
+      this.saved = next === null ? this.baseline ?? 22 : Number.isFinite(Number(next)) ? Number(next) : this.baseline ?? 22;
+      return;
+    }
+    if (!this.instance || !this.isConnected) return;
+    if (name === "value") {
+      const parsed = next === null ? this.baseline ?? 22 : Number(next);
+      this.instance.setValue(parsed, false);
+      return;
+    }
+    this.saved = this.instance.value;
+    super.attributeChangedCallback(name, previous, next);
+  }
+  get value() {
+    return this.instance?.value ?? this.saved ?? 22;
+  }
+  set value(next) {
+    this.setValue(next);
+  }
+  setValue(value, notify = false) {
+    if (this.instance) this.instance.setValue(value, notify);
+    else this.saved = value;
+  }
+  reset(notify = false) {
+    this.instance?.reset(notify);
+  }
+  get unit() {
+    return this.instance?.unit ?? (this.getAttribute("unit") === "F" ? "F" : "C");
+  }
+  /** Converts in place and glides; the unit, min and max attributes follow without remounting. */
+  setUnit(unit, notify = false) {
+    if (!this.instance) {
+      this.setAttribute("unit", unit);
+      return;
+    }
+    this.instance.setUnit(unit, {}, notify);
+    this.syncing = true;
+    try {
+      this.setAttribute("unit", this.instance.unit);
+      for (const name of ["min", "max"]) this.removeAttribute(name);
+    } finally {
+      this.syncing = false;
+    }
+  }
+};
+var defineTemperatureSlider = () => defineElement("mk-temperature-slider", MkTemperatureSliderElement);
+
+// src/components/rating-scale/element.ts
+var MkRatingScaleElement = class extends MkElement {
+  static options = { "min": "number", "max": "number", "value": "number", "variant": "string", "labels": "json", "label": "string", "name": "string", "disabled": "boolean", "required": "boolean", "error": "string" };
+  baseline;
+  saved;
+  create(options) {
+    const created = createRatingScale(this, { ...options, value: this.saved !== void 0 ? this.saved : options.value, defaultValue: this.baseline });
+    if (this.baseline === void 0) this.baseline = created.value;
+    this.saved = void 0;
+    return created;
+  }
+  disconnectedCallback() {
+    this.saved = this.instance?.value;
+    super.disconnectedCallback();
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next) return;
+    if (name === "value" && (!this.instance || !this.isConnected)) {
+      this.saved = next === null ? this.baseline ?? null : Number.isFinite(Number(next)) ? Number(next) : this.baseline ?? null;
+      return;
+    }
+    if (!this.instance || !this.isConnected) return;
+    if (name === "value") {
+      const parsed = next === null ? this.baseline ?? null : Number(next);
+      this.instance.setValue(parsed, false);
+      return;
+    }
+    this.saved = this.instance.value;
+    super.attributeChangedCallback(name, previous, next);
+  }
+  get value() {
+    return this.instance?.value ?? this.saved ?? null;
+  }
+  set value(next) {
+    this.setValue(next);
+  }
+  setValue(value, notify = false) {
+    if (this.instance) this.instance.setValue(value, notify);
+    else this.saved = value;
+  }
+  reset(notify = false) {
+    this.instance?.reset(notify);
+  }
+};
+var defineRatingScale = () => defineElement("mk-rating-scale", MkRatingScaleElement);
+
+// src/components/notification-stack/element.ts
+var MkNotificationStackElement = class extends MkElement {
+  static options = { "items": "json", "expanded": "boolean", "direction": "string", "duration": "number", "disabled": "boolean", "label": "string", "labels": "json" };
+  create(options) {
+    return createNotificationStack(this, options);
+  }
+  setOptions(options) {
+    this.instance?.setOptions(options);
+  }
+  push(item) {
+    this.instance?.push(item);
+  }
+  dismiss(id) {
+    this.instance?.dismiss(id);
+  }
+  clear() {
+    this.instance?.clear();
+  }
+  expand() {
+    this.instance?.expand();
+  }
+  collapse() {
+    this.instance?.collapse();
+  }
+  toggle() {
+    this.instance?.toggle();
+  }
+  get expanded() {
+    return this.instance?.expanded ?? false;
+  }
+  set expanded(value) {
+    this.instance?.setOptions({ expanded: value });
+  }
+  get items() {
+    return [...this.instance?.items ?? []];
+  }
+  set items(value) {
+    this.instance?.setOptions({ items: value });
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.isConnected || !this.instance) return;
+    const option = name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+    const defaults = { "items": [], "expanded": false, "direction": "down", "duration": 6e3, "disabled": false, "label": "Notificaciones", "labels": {} };
+    this.instance.setOptions({ [option]: this.options[option] ?? defaults[option] });
+  }
+};
+var defineNotificationStack = () => defineElement("mk-notification-stack", MkNotificationStackElement);
+
+// src/components/bento-grid/element.ts
+var MkBentoGridElement = class extends MkElement {
+  static options = { "columns": "number", "gap": "number", "filter": "string", "duration": "number" };
+  create(options) {
+    return createBentoGrid(this, options);
+  }
+  setOptions(options) {
+    this.instance?.setOptions(options);
+  }
+  refresh() {
+    this.instance?.refresh();
+  }
+  setFilter(filter) {
+    this.instance?.setFilter(filter);
+  }
+  reorder(keys) {
+    this.instance?.reorder(keys);
+  }
+  mutate(change) {
+    this.instance?.mutate(change);
+  }
+  get filter() {
+    return this.instance?.filter ?? null;
+  }
+  get keys() {
+    return this.instance?.keys ?? [];
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.isConnected || !this.instance) return;
+    const option = name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+    const defaults = { "columns": 3, "gap": 12, "filter": null, "duration": 0.55 };
+    this.instance.setOptions({ [option]: this.options[option] ?? defaults[option] });
+  }
+};
+var defineBentoGrid = () => defineElement("mk-bento-grid", MkBentoGridElement);
+
+// src/components/scroll-preview-dock/element.ts
+var MkScrollPreviewDockElement = class extends MkElement {
+  static options = { "items": "json", "scroller": "string", "offset": "number", "label": "string", "disabled": "boolean" };
+  create(options) {
+    return createScrollPreviewDock(this, options);
+  }
+  setOptions(options) {
+    this.instance?.setOptions(options);
+  }
+  select(id) {
+    this.instance?.select(id);
+  }
+  update() {
+    this.instance?.update();
+  }
+  get value() {
+    return this.instance?.value ?? "";
+  }
+  set items(value) {
+    this.instance?.setOptions({ items: value });
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.isConnected || !this.instance) return;
+    const option = name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+    const defaults = { "items": [], "scroller": null, "offset": 0, "label": "Explorar secciones", "disabled": false };
+    this.instance.setOptions({ [option]: this.options[option] ?? defaults[option] });
+  }
+};
+var defineScrollPreviewDock = () => defineElement("mk-scroll-preview-dock", MkScrollPreviewDockElement);
+
+// src/components/sticky-header/element.ts
+var MkStickyHeaderElement = class extends MkElement {
+  static options = { "scroller": "string", "expandedHeight": "number", "compactHeight": "number", "threshold": "number", "range": "number", "top": "number", "disabled": "boolean" };
+  create(options) {
+    return createStickyHeader(this, options);
+  }
+  setOptions(options) {
+    this.instance?.setOptions(options);
+  }
+  update() {
+    this.instance?.update();
+  }
+  get compact() {
+    return this.instance?.compact ?? false;
+  }
+  get progress() {
+    return this.instance?.progress ?? 0;
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.isConnected || !this.instance) return;
+    const option = name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+    const defaults = { "scroller": null, "expandedHeight": 104, "compactHeight": 64, "threshold": 8, "range": 96, "top": 0, "disabled": false };
+    this.instance.setOptions({ [option]: this.options[option] ?? defaults[option] });
+  }
+};
+var defineStickyHeader = () => defineElement("mk-sticky-header", MkStickyHeaderElement);
+
+// src/components/handwriting-text/element.ts
+var MkHandwritingTextElement = class extends MkElement {
+  static options = { text: "string", duration: "number", autoplay: "boolean" };
+  retained;
+  create(options) {
+    return createHandwritingText(this, { ...options, ...this.retained === void 0 ? {} : { text: this.retained } });
+  }
+  disconnectedCallback() {
+    this.retained = this.instance?.text ?? this.retained;
+    super.disconnectedCallback();
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous !== next) this.retained = name === "text" ? void 0 : this.instance?.text ?? this.retained;
+    super.attributeChangedCallback(name, previous, next);
+  }
+};
+var defineHandwritingText = () => defineElement("mk-handwriting-text", MkHandwritingTextElement);
+
+// src/components/particle-button/element.ts
+var MkParticleButtonElement = class extends MkElement {
+  static options = { label: "string", count: "number", distance: "number" };
+  create(options) {
+    return createParticleButton(this, options);
+  }
+  attributeChangedCallback(name, previous, next) {
+    const focused = this.contains(document.activeElement);
+    super.attributeChangedCallback(name, previous, next);
+    if (focused) this.querySelector("button")?.focus({ preventScroll: true });
+  }
+};
+var defineParticleButton = () => defineElement("mk-particle-button", MkParticleButtonElement);
+
+// src/components/magnetize-button/element.ts
+var MkMagnetizeButtonElement = class extends MkElement {
+  static options = { label: "string", count: "number", reach: "number" };
+  create(options) {
+    return createMagnetizeButton(this, options);
+  }
+  attributeChangedCallback(name, previous, next) {
+    const focused = this.contains(document.activeElement);
+    super.attributeChangedCallback(name, previous, next);
+    if (focused) this.querySelector("button")?.focus({ preventScroll: true });
+  }
+};
+var defineMagnetizeButton = () => defineElement("mk-magnetize-button", MkMagnetizeButtonElement);
+
+// src/components/badge-button/element.ts
+var MkBadgeButtonElement = class extends MkElement {
+  static options = { label: "string", count: "number", step: "number", hideZero: "boolean", max: "number" };
+  retained;
+  create(options) {
+    return createBadgeButton(this, { ...options, ...this.retained === void 0 ? {} : { count: this.retained } });
+  }
+  disconnectedCallback() {
+    this.retained = this.instance?.count ?? this.retained;
+    super.disconnectedCallback();
+  }
+  attributeChangedCallback(name, previous, next) {
+    const focused = this.contains(document.activeElement);
+    if (previous !== next) this.retained = name === "count" ? void 0 : this.instance?.count ?? this.retained;
+    super.attributeChangedCallback(name, previous, next);
+    if (focused) this.querySelector("button")?.focus({ preventScroll: true });
+  }
+};
+var defineBadgeButton = () => defineElement("mk-badge-button", MkBadgeButtonElement);
+
+// src/components/morphing-page-dots/element.ts
+var MkMorphingPageDotsElement = class extends MkElement {
+  static options = { count: "number", value: "number", label: "string", labels: "json", pageIds: "json", disabled: "boolean" };
+  retained;
+  create(options) {
+    return createMorphingPageDots(this, { ...options, ...this.retained === void 0 ? {} : { value: this.retained } });
+  }
+  disconnectedCallback() {
+    this.retained = this.instance?.value ?? this.retained;
+    super.disconnectedCallback();
+  }
+  attributeChangedCallback(name, previous, next) {
+    const focusIndex = [...this.querySelectorAll("button")].findIndex((button) => button === document.activeElement);
+    if (previous !== next) this.retained = name === "value" ? void 0 : this.instance?.value ?? this.retained;
+    super.attributeChangedCallback(name, previous, next);
+    if (focusIndex >= 0) {
+      const buttons = this.querySelectorAll("button");
+      buttons[Math.min(focusIndex, buttons.length - 1)]?.focus({ preventScroll: true });
+    }
+  }
+};
+var defineMorphingPageDots = () => defineElement("mk-morphing-page-dots", MkMorphingPageDotsElement);
+
+// src/components/not-found/element.ts
+var MkNotFoundElement = class extends MkElement {
+  static options = { brand: "string", title: "string", description: "string", homeHref: "string", homeLabel: "string", backLabel: "string", showBack: "boolean" };
+  create(options) {
+    return createNotFound(this, options);
+  }
+  attributeChangedCallback(name, previous, next) {
+    const active = document.activeElement;
+    const focused = this.contains(active);
+    const back = active?.tagName === "BUTTON";
+    super.attributeChangedCallback(name, previous, next);
+    if (focused) (this.querySelector(back ? "button:not(:disabled)" : "a") ?? this.querySelector("a"))?.focus({ preventScroll: true });
+  }
+};
+var defineNotFound = () => defineElement("mk-not-found", MkNotFoundElement);
+
 // src/elements/index.ts
 var ELEMENTS = {
   "mk-theme-picker": MkThemePickerElement,
@@ -2178,7 +2970,27 @@ var ELEMENTS = {
   "mk-radial-chart": MkRadialChartElement,
   "mk-sankey-chart": MkSankeyChartElement,
   "mk-heatmap-chart": MkHeatmapChartElement,
-  "mk-orbit-menu": MkOrbitMenuElement
+  "mk-orbit-menu": MkOrbitMenuElement,
+  "mk-signature-pad": MkSignaturePadElement,
+  "mk-waveform-player": MkWaveformPlayerElement,
+  "mk-voice-message-bubble": MkVoiceMessageBubbleElement,
+  "mk-drilldown-menu": MkDrilldownMenuElement,
+  "mk-wheel-picker": MkWheelPickerElement,
+  "mk-stepper": MkStepperElement,
+  "mk-radio-group": MkRadioGroupElement,
+  "mk-equalizer-slider": MkEqualizerSliderElement,
+  "mk-temperature-slider": MkTemperatureSliderElement,
+  "mk-rating-scale": MkRatingScaleElement,
+  "mk-notification-stack": MkNotificationStackElement,
+  "mk-bento-grid": MkBentoGridElement,
+  "mk-scroll-preview-dock": MkScrollPreviewDockElement,
+  "mk-sticky-header": MkStickyHeaderElement,
+  "mk-handwriting-text": MkHandwritingTextElement,
+  "mk-particle-button": MkParticleButtonElement,
+  "mk-magnetize-button": MkMagnetizeButtonElement,
+  "mk-badge-button": MkBadgeButtonElement,
+  "mk-morphing-page-dots": MkMorphingPageDotsElement,
+  "mk-not-found": MkNotFoundElement
   // new-component:entries
 };
 function defineElements(names = Object.keys(ELEMENTS)) {
@@ -2189,6 +3001,8 @@ export {
   MkActivityFeedElement,
   MkAddToCartElement,
   MkAttachmentElement,
+  MkBadgeButtonElement,
+  MkBentoGridElement,
   MkBidirectionalSliderElement,
   MkBreadcrumbElement,
   MkCalendarElement,
@@ -2210,11 +3024,14 @@ export {
   MkDateTimePickerElement,
   MkDialogElement,
   MkDrawerElement,
+  MkDrilldownMenuElement,
   MkEditableTableElement,
   MkElement,
   MkEmptyStateElement,
+  MkEqualizerSliderElement,
   MkFileExplorerElement,
   MkFilterBuilderElement,
+  MkHandwritingTextElement,
   MkHeatmapChartElement,
   MkHoldConfirmElement,
   MkHoverCardElement,
@@ -2225,12 +3042,17 @@ export {
   MkLikeButtonElement,
   MkLinkPreviewElement,
   MkLoadingButtonElement,
+  MkMagnetizeButtonElement,
   MkMenuElement,
+  MkMorphingPageDotsElement,
   MkMultiSelectElement,
   MkNavElement,
+  MkNotFoundElement,
   MkNotificationBellElement,
+  MkNotificationStackElement,
   MkOrbitMenuElement,
   MkPaginationElement,
+  MkParticleButtonElement,
   MkPasswordStrengthElement,
   MkPieChartElement,
   MkPillButtonElement,
@@ -2240,23 +3062,30 @@ export {
   MkQuestionnaireElement,
   MkRadarChartElement,
   MkRadialChartElement,
+  MkRadioGroupElement,
   MkRangeCalendarElement,
   MkRangeSliderElement,
+  MkRatingScaleElement,
   MkResizablePanelElement,
   MkRichTextEditorElement,
   MkSankeyChartElement,
   MkScratchCardElement,
   MkScrollIslandElement,
+  MkScrollPreviewDockElement,
   MkSelectElement,
+  MkSignaturePadElement,
   MkSkeletonElement,
   MkSlotPickerElement,
   MkSplitViewElement,
   MkStarRatingElement,
   MkStatCardElement,
+  MkStepperElement,
   MkStepsElement,
+  MkStickyHeaderElement,
   MkStudioDockElement,
   MkSwipeActionsElement,
   MkTagInputElement,
+  MkTemperatureSliderElement,
   MkThemePickerElement,
   MkTimeFieldElement,
   MkTimelineElement,
@@ -2267,11 +3096,34 @@ export {
   MkTreeViewElement,
   MkVirtualListElement,
   MkVoiceDotsElement,
+  MkVoiceMessageBubbleElement,
+  MkWaveformPlayerElement,
+  MkWheelPickerElement,
   SafeHTMLElement,
+  defineBadgeButton,
+  defineBentoGrid,
+  defineDrilldownMenu,
   defineElement,
   defineElements,
+  defineEqualizerSlider,
+  defineHandwritingText,
+  defineMagnetizeButton,
+  defineMorphingPageDots,
+  defineNotFound,
+  defineNotificationStack,
+  defineParticleButton,
+  defineRadioGroup,
+  defineRatingScale,
+  defineScrollPreviewDock,
+  defineSignaturePad,
+  defineStepper,
+  defineStickyHeader,
   defineStudioDock,
+  defineTemperatureSlider,
   defineTrailer,
+  defineVoiceMessageBubble,
+  defineWaveformPlayer,
+  defineWheelPicker,
   toast
 };
 //# sourceMappingURL=index.js.map