@yewdiel21/motion-kit 0.17.0 → 0.19.0

package/dist/elements/index.js

@@ -15,13 +15,14 @@ import {
   createToaster,
   createToolbar,
   createVoiceDots,
-  iconSvg,
   toast
-} from "../chunk-VJFPTLAK.js";
+} from "../chunk-PEDYJ2TV.js";
 import {
   createActivityFeed,
   createAddToCart,
   createAttachment,
+  createBadgeButton,
+  createBentoGrid,
   createBreadcrumb,
   createCalendar,
   createChart,
@@ -43,8 +44,10 @@ import {
   createDrilldownMenu,
   createEditableTable,
   createEmptyState,
+  createEqualizerSlider,
   createFileExplorer,
   createFilterBuilder,
+  createHandwritingText,
   createHoldConfirm,
   createHoverCard,
   createImagePreview,
@@ -53,21 +56,30 @@ 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,
+  createScrollArea,
   createScrollIsland,
+  createScrollPreviewDock,
   createSelect,
   createSignaturePad,
   createSkeleton,
@@ -75,10 +87,13 @@ import {
   createSplitView,
   createStarRating,
   createStatCard,
+  createStepper,
   createSteps,
+  createStickyHeader,
   createStudioDock,
   createSwipeActions,
   createTagInput,
+  createTemperatureSlider,
   createTimeField,
   createTimeline,
   createTooltip,
@@ -87,10 +102,11 @@ import {
   createVirtualList,
   createVoiceMessageBubble,
   createWaveformPlayer,
-  createWheelPicker
-} from "../chunk-7IQTMF7Y.js";
+  createWheelPicker,
+  iconSvg
+} from "../chunk-Y4GIBTRG.js";
 import "../chunk-RVSKEBIC.js";
-import "../chunk-DOOMULVV.js";
+import "../chunk-OLT3CWDJ.js";
 import "../chunk-TGV27ZWM.js";
 
 // src/elements/base.ts
@@ -2328,11 +2344,18 @@ var defineDrilldownMenu = () => defineElement("mk-drilldown-menu", MkDrilldownMe
 // 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);
+    return createWheelPicker(this, { ...options, ...this.savedItems ? { items: this.savedItems } : {}, value: this.savedValue ?? options.value });
   }
   attributeChangedCallback(name, previous, next) {
-    if (previous === next || !this.instance) return;
+    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;
@@ -2342,7 +2365,13 @@ var MkWheelPickerElement = class extends MkElement {
       if (this.options.value !== void 0) this.instance.setValue(String(this.options.value));
       return;
     }
-    super.attributeChangedCallback(name, previous, next);
+    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 ?? "";
@@ -2354,11 +2383,539 @@ var MkWheelPickerElement = class extends MkElement {
     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/components/scroll-area/element.ts
+var flagOrNumber = (raw) => {
+  if (raw === void 0) return void 0;
+  const text = String(raw).trim();
+  if (text === "" || text === "true") return true;
+  if (text === "false") return false;
+  const value = Number(text);
+  return Number.isFinite(value) ? value : true;
+};
+var MkScrollAreaElement = class extends MkElement {
+  static options = {
+    visibility: "string",
+    axis: "string",
+    idle: "number",
+    fade: "string",
+    backToTop: "string",
+    label: "string",
+    focusable: "boolean",
+    decorative: "boolean"
+  };
+  create(options) {
+    return createScrollArea(this, { ...options, fade: flagOrNumber(options.fade), backToTop: flagOrNumber(options.backToTop) });
+  }
+};
+var defineScrollArea = () => defineElement("mk-scroll-area", MkScrollAreaElement);
+
 // src/elements/index.ts
 var ELEMENTS = {
   "mk-theme-picker": MkThemePickerElement,
@@ -2445,7 +3002,23 @@ var ELEMENTS = {
   "mk-waveform-player": MkWaveformPlayerElement,
   "mk-voice-message-bubble": MkVoiceMessageBubbleElement,
   "mk-drilldown-menu": MkDrilldownMenuElement,
-  "mk-wheel-picker": MkWheelPickerElement
+  "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,
+  "mk-scroll-area": MkScrollAreaElement
   // new-component:entries
 };
 function defineElements(names = Object.keys(ELEMENTS)) {
@@ -2456,6 +3029,8 @@ export {
   MkActivityFeedElement,
   MkAddToCartElement,
   MkAttachmentElement,
+  MkBadgeButtonElement,
+  MkBentoGridElement,
   MkBidirectionalSliderElement,
   MkBreadcrumbElement,
   MkCalendarElement,
@@ -2481,8 +3056,10 @@ export {
   MkEditableTableElement,
   MkElement,
   MkEmptyStateElement,
+  MkEqualizerSliderElement,
   MkFileExplorerElement,
   MkFilterBuilderElement,
+  MkHandwritingTextElement,
   MkHeatmapChartElement,
   MkHoldConfirmElement,
   MkHoverCardElement,
@@ -2493,12 +3070,17 @@ export {
   MkLikeButtonElement,
   MkLinkPreviewElement,
   MkLoadingButtonElement,
+  MkMagnetizeButtonElement,
   MkMenuElement,
+  MkMorphingPageDotsElement,
   MkMultiSelectElement,
   MkNavElement,
+  MkNotFoundElement,
   MkNotificationBellElement,
+  MkNotificationStackElement,
   MkOrbitMenuElement,
   MkPaginationElement,
+  MkParticleButtonElement,
   MkPasswordStrengthElement,
   MkPieChartElement,
   MkPillButtonElement,
@@ -2508,13 +3090,17 @@ export {
   MkQuestionnaireElement,
   MkRadarChartElement,
   MkRadialChartElement,
+  MkRadioGroupElement,
   MkRangeCalendarElement,
   MkRangeSliderElement,
+  MkRatingScaleElement,
   MkResizablePanelElement,
   MkRichTextEditorElement,
   MkSankeyChartElement,
   MkScratchCardElement,
+  MkScrollAreaElement,
   MkScrollIslandElement,
+  MkScrollPreviewDockElement,
   MkSelectElement,
   MkSignaturePadElement,
   MkSkeletonElement,
@@ -2522,10 +3108,13 @@ export {
   MkSplitViewElement,
   MkStarRatingElement,
   MkStatCardElement,
+  MkStepperElement,
   MkStepsElement,
+  MkStickyHeaderElement,
   MkStudioDockElement,
   MkSwipeActionsElement,
   MkTagInputElement,
+  MkTemperatureSliderElement,
   MkThemePickerElement,
   MkTimeFieldElement,
   MkTimelineElement,
@@ -2540,11 +3129,27 @@ export {
   MkWaveformPlayerElement,
   MkWheelPickerElement,
   SafeHTMLElement,
+  defineBadgeButton,
+  defineBentoGrid,
   defineDrilldownMenu,
   defineElement,
   defineElements,
+  defineEqualizerSlider,
+  defineHandwritingText,
+  defineMagnetizeButton,
+  defineMorphingPageDots,
+  defineNotFound,
+  defineNotificationStack,
+  defineParticleButton,
+  defineRadioGroup,
+  defineRatingScale,
+  defineScrollArea,
+  defineScrollPreviewDock,
   defineSignaturePad,
+  defineStepper,
+  defineStickyHeader,
   defineStudioDock,
+  defineTemperatureSlider,
   defineTrailer,
   defineVoiceMessageBubble,
   defineWaveformPlayer,