@yewdiel21/motion-kit 0.10.0 → 0.14.0

package/dist/elements/index.d.ts

@@ -1,8 +1,9 @@
 import { I as Instance } from '../types-BkS_raL8.js';
-import { S as StudioDockInstance, i as StudioDockView, T as TrailerInstance, D as DialogInstance, M as MenuInstance, Q as QuantityInstance, P as PaginationInstance, H as HoverCardInstance, I as InputOtpInstance, C as CalendarInstance, j as SlotPickerInstance } from '../reveal-jsX-uwUz.js';
-import { T as ThemePickerInstance, a as ToasterInstance, C as ChatInstance, b as ChatRole, N as NavInstance, c as NavStyle, d as CursorInstance, I as IslandInstance } from '../store-DYb3tTsZ.js';
-export { t as toast } from '../store-DYb3tTsZ.js';
-import { C as ChatBackgroundInstance, S as StepsInstance } from '../engine-GDGwQnJE.js';
+import { cS as StudioDockInstance, cV as StudioDockView, d6 as TrailerInstance, b6 as DialogInstance, b8 as DialogOptions, bS as MenuInstance, cc as QuantityInstance, b_ as PaginationInstance, bB as HoverCardInstance, bH as InputOtpInstance, ak as CalendarInstance, cF as SlotPickerInstance, a7 as AttachmentInstance, a6 as AttachmentFile, ac as AttachmentStatus, cC as SkeletonInstance, cf as QuestionnaireInstance, ce as QuestionnaireAnswers, az as CodeBlockInstance, aO as ContextMenuInstance, bM as LinkPreviewInstance, c9 as ProgressInstance, ck as RangeSliderInstance, cm as RangeValue, aq as ChartInstance, ar as ChartOptions, aR as CreditCardInstance, aQ as CreditCardField, aU as CreditCardValues, ap as CardBrand, aM as CommandSearchInstance, aL as CommandItem, bz as HoldConfirmInstance, bF as ImagePreviewInstance, bX as NotificationBellInstance, c3 as PasswordStrengthInstance, cy as ScratchCardInstance, cO as StarRatingInstance, aJ as ColorSliderInstance, aB as ColorAreaInstance, aE as ColorFieldInstance, aH as ColorPickerInstance, cZ as TimeFieldInstance, ci as RangeCalendarInstance, b1 as DateRange, b2 as DateRangePickerInstance, d4 as TooltipInstance, c7 as PopoverInstance, bP as LoadingButtonInstance, bR as LoadingState, ae as BreadcrumbInstance, bh as EmptyStateInstance, cQ as StatCardInstance, au as ChartTooltipInstance, bU as MultiSelectInstance, cX as TagInputInstance, b4 as DateTimePickerInstance, br as FilterBuilderInstance, bv as FilterGroup, d1 as TimelineInstance, d0 as TimelineEvent, a2 as ActivityFeedInstance, a4 as ActivityItem, d9 as TreeViewInstance, bm as FileExplorerInstance, bK as JsonViewerInstance, dc as VirtualListInstance, cn as ResizablePanelInstance, cM as SplitViewInstance, a_ as DataTableInstance, aY as DataRow, bc as EditableTableInstance, ct as RichTextEditorInstance } from '../reveal-DEvp6U6T.js';
+import { l as ThemePickerInstance, r as ToasterInstance, C as ChatInstance, c as ChatRole, h as NavInstance, j as NavStyle, d as CursorInstance, I as IslandInstance } from '../store-DjkTBX7f.js';
+export { L as toast } from '../store-DjkTBX7f.js';
+import { C as ChatBackgroundInstance, b as StepsInstance } from '../engine-Cn6IhE3z.js';
+import { L as LikeButtonInstance, S as SwipeActionsInstance } from '../engine-QECQnGz1.js';
 import 'gsap/Flip';
 
 type OptionType = 'string' | 'number' | 'boolean' | 'list' | 'json';
@@ -64,6 +65,8 @@ declare class MkDialogElement extends MkElement<Instance> {
     static options: Record<string, OptionType>;
     dialog: DialogInstance | null;
     protected create(options: Record<string, unknown>): Instance;
+    /** The engine on the built <dialog> (Drawer swaps it). */
+    protected createEngine(dialog: HTMLDialogElement, options: DialogOptions, _attributes: Record<string, unknown>): DialogInstance;
     open(origin?: HTMLElement | null): void;
     close(): void;
     get isOpen(): boolean;
@@ -223,6 +226,623 @@ declare class MkSlotPickerElement extends MkElement<SlotPickerInstance> {
     attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
 }
 
+/**
+ * <mk-attachment class="mk-attachment" accept="image/*,.pdf" multiple max-files="4" max-size="5000000"></mk-attachment>
+ * Emits mk:files ({added, files}), mk:remove ({file, files}) and mk:reject ({file, code, message}).
+ * Changing an attribute keeps the files already chosen.
+ */
+declare class MkAttachmentElement extends MkElement<AttachmentInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): AttachmentInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    addFiles(files: Iterable<File> | ArrayLike<File>): AttachmentFile[];
+    /** Remove one file (HTMLElement.remove() still removes the element). */
+    removeFile(id: string): void;
+    setProgress(id: string, value: number, status?: AttachmentStatus): void;
+    get files(): AttachmentFile[];
+}
+
+/**
+ * <mk-skeleton class="mk-skeleton" shape="card" label="Cargando perfil">
+ *   <article data-mk-skeleton-content>…</article>
+ * </mk-skeleton>
+ * Loading until `loaded` is set (or `setLoading(false)`); a placeholder is made from `shape`.
+ */
+declare class MkSkeletonElement extends MkElement<SkeletonInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): SkeletonInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    setLoading(loading: boolean): void;
+    get loading(): boolean;
+}
+
+/**
+ * <mk-questionnaire><form>…<section data-mk-question>…</section>…</form></mk-questionnaire>
+ * or, empty, <mk-questionnaire questions='[{"id":"name","label":"Nombre","type":"text","required":true}]'>.
+ * Emits mk:question ({index, previous, answers}), mk:invalid and mk:complete ({answers}).
+ */
+declare class MkQuestionnaireElement extends MkElement<Instance> {
+    static options: Record<string, OptionType>;
+    questionnaire: QuestionnaireInstance | null;
+    protected create(options: Record<string, unknown>): Instance;
+    next(): Promise<boolean>;
+    prev(): Promise<void>;
+    reset(): void;
+    get answers(): QuestionnaireAnswers;
+}
+
+/**
+ * <mk-code-block class="mk-code-block" title="Instalar" language="bash" line-numbers>
+ *   <pre><code>npm install @yewdiel21/motion-kit gsap</code></pre>
+ * </mk-code-block>
+ * Header, copy button and status are made when absent. Emits `mk:copy` ({ok, code}).
+ */
+declare class MkCodeBlockElement extends MkElement<CodeBlockInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): CodeBlockInstance;
+    setCode(code: string): void;
+    copy(): Promise<boolean>;
+}
+
+/**
+ * <mk-context-menu class="mk-context-menu">
+ *   <article>…the area…</article>
+ *   <dialog class="mk-dialog mk-menu" data-mk-context-menu aria-label="Acciones">
+ *     <button data-mk-item data-mk-value="rename">Renombrar</button>
+ *     <hr data-mk-separator />
+ *     <button data-mk-item data-mk-value="delete" disabled>Eliminar</button>
+ *   </dialog>
+ * </mk-context-menu>
+ * Emits mk:select (detail.value, detail.item) from the dialog.
+ */
+declare class MkContextMenuElement extends MkElement<ContextMenuInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): ContextMenuInstance;
+    openAt(x: number, y: number): void;
+    open(origin?: HTMLElement | null): void;
+    close(): void;
+    get isOpen(): boolean;
+}
+
+/**
+ * <mk-drawer id="filtros" side="left" heading="Filtros" [description] [no-backdrop] [persistent]>…</mk-drawer>
+ * Any [data-mk-open="filtros"] opens it. Children move into a native <dialog class="mk-dialog mk-drawer">
+ * (header, body and a [data-mk-part="footer"] child kept out of the scroll) and back on disconnect.
+ */
+declare class MkDrawerElement extends MkDialogElement {
+    static options: Record<string, OptionType>;
+    protected createEngine(dialog: HTMLDialogElement, options: DialogOptions, attributes: Record<string, unknown>): DialogInstance;
+}
+
+/**
+ * <mk-link-preview class="mk-link-preview" url="https://…" title="…" description="…" image="/thumb.jpg" site-name="Blog"></mk-link-preview>
+ * variant="hover" turns it into a link that previews the card (label = link text).
+ */
+declare class MkLinkPreviewElement extends MkElement<LinkPreviewInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): LinkPreviewInstance;
+}
+
+/**
+ * <mk-progress class="mk-progress" value="40" label="Subida" show-value></mk-progress>
+ * Without `value` (or value="indeterminate") it is indeterminate. A new value moves the fill.
+ */
+declare class MkProgressElement extends MkElement<ProgressInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): ProgressInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    setValue(value: number | null): void;
+    get value(): number | null;
+}
+
+/**
+ * <mk-range-slider class="mk-range-slider" min="0" max="100" step="5" label="Precio" value="[20,80]">
+ *   <div data-mk-range-track><input type="range" data-mk-range-input value="20"><input type="range" data-mk-range-input value="80"></div>
+ *   <output data-mk-range-output></output>
+ * </mk-range-slider>
+ * Empty, it makes its input(s). Emits `mk:input` while dragging and `mk:change` ({value, previous}) on commit.
+ * `el.formatValue = (n) => `${n} €`` formats the output and aria-valuetext.
+ */
+declare class MkRangeSliderElement extends MkElement<RangeSliderInstance> {
+    static options: Record<string, OptionType>;
+    private format;
+    /** Formatter for the output and aria-valuetext (code, so a property rather than an attribute). */
+    get formatValue(): ((value: number) => string) | undefined;
+    set formatValue(format: ((value: number) => string) | undefined);
+    protected create(options: Record<string, unknown>): RangeSliderInstance;
+    /** Rebuild with the current attributes; keepValue keeps the edited value over the `value` attribute. */
+    private rebuild;
+    attributeChangedCallback(_name: string, previous: string | null, next: string | null): void;
+    setValue(value: RangeValue, notify?: boolean): void;
+    get value(): RangeValue | undefined;
+}
+
+/**
+ * <mk-chart class="mk-chart" type="bar" stacked label="Sesiones por semana"
+ *   labels="S1,S2,S3" series='[{"name":"Ana","values":[4,6,5]},{"name":"Luis","values":[2,3,4]}]'></mk-chart>
+ * Attribute changes redraw in place. Emits mk:select ({index, label, values, x, y, series}); tooltip="false" leaves the card to chart-tooltip.
+ */
+declare class MkChartElement extends MkElement<ChartInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): ChartInstance;
+    attributeChangedCallback(_name: string, previous: string | null, next: string | null): void;
+    update(options: ChartOptions): void;
+    select(index: number | null): void;
+}
+
+/**
+ * <mk-credit-card class="mk-credit-card"></mk-credit-card>
+ * Makes the card and the four fields (or uses input[data-mk-card-field="number|name|expiry|cvc"] inside).
+ * Emits mk:change ({brand, complete, valid}) and mk:complete; the card data stays in the form.
+ */
+declare class MkCreditCardElement extends MkElement<CreditCardInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): CreditCardInstance;
+    focusField(field: CreditCardField): void;
+    flip(back?: boolean): void;
+    get values(): CreditCardValues | undefined;
+    get brand(): CardBrand;
+}
+
+/**
+ * <mk-command-search class="mk-command-search" items='[{"id":"charts","label":"Charts","group":"Páginas","href":"/chart"}]'>
+ *   <button data-mk-command-open>Buscar <kbd>⌘K</kbd></button>
+ * </mk-command-search>
+ * ⌘K / Ctrl+K or the button opens it. Emits mk:select ({item}, cancelable), mk:open and mk:close.
+ */
+declare class MkCommandSearchElement extends MkElement<CommandSearchInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): CommandSearchInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    open(): void;
+    close(): void;
+    setItems(items: CommandItem[]): void;
+}
+
+/**
+ * <mk-hold-confirm class="mk-hold-confirm" duration="1200"><button>Eliminar cuenta</button></mk-hold-confirm>
+ * Hold the button (pointer, Space or Enter) to confirm. Emits mk:confirm.
+ */
+declare class MkHoldConfirmElement extends MkElement<HoldConfirmInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): HoldConfirmInstance;
+    reset(): void;
+    get confirmed(): boolean;
+}
+
+/**
+ * <mk-image-preview class="mk-image-preview">
+ *   <button data-mk-image data-mk-src="/big/1.jpg" data-mk-caption="Atardecer"><img src="/thumb/1.jpg" alt="Atardecer en la sierra"></button>
+ * </mk-image-preview>
+ * Emits mk:open, mk:change ({index, previous}) and mk:close.
+ */
+declare class MkImagePreviewElement extends MkElement<ImagePreviewInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): ImagePreviewInstance;
+    open(index?: number): void;
+    close(): void;
+}
+
+/**
+ * <mk-like-button class="mk-like-button" count="128"><button></button></mk-like-button>
+ * Toggles with a burst; emits mk:change ({liked, count}).
+ */
+declare class MkLikeButtonElement extends MkElement<LikeButtonInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): LikeButtonInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    get liked(): boolean;
+    get count(): number;
+}
+
+/**
+ * <mk-notification-bell class="mk-notification-bell" count="2"></mk-notification-bell>
+ * el.notify('Nueva cita a las 10:00') rings it. Emits mk:open on click and mk:count when the count changes.
+ */
+declare class MkNotificationBellElement extends MkElement<NotificationBellInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): NotificationBellInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    notify(message?: string): void;
+    clear(): void;
+    get count(): number;
+}
+
+/**
+ * <mk-password-strength class="mk-password-strength" min-length="10">
+ *   <input type="password" name="password" autocomplete="new-password" aria-label="Contraseña" />
+ * </mk-password-strength>
+ * Emits mk:strength ({score, label, met}).
+ */
+declare class MkPasswordStrengthElement extends MkElement<PasswordStrengthInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): PasswordStrengthInstance;
+    get score(): number;
+}
+
+/**
+ * <mk-scratch-card class="mk-scratch-card" threshold="0.5">
+ *   <div data-mk-scratch-content>…the coupon…</div>
+ * </mk-scratch-card>
+ * Emits mk:progress ({progress}) and mk:reveal.
+ */
+declare class MkScratchCardElement extends MkElement<ScratchCardInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): ScratchCardInstance;
+    reveal(): void;
+    reset(): void;
+    get revealed(): boolean;
+}
+
+/**
+ * <mk-star-rating class="mk-star-rating" name="valoracion" value="4" allow-clear></mk-star-rating>
+ * readonly with value="4.5" draws a fixed rating. Emits mk:change ({value}).
+ */
+declare class MkStarRatingElement extends MkElement<StarRatingInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): StarRatingInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    get value(): number;
+}
+
+/**
+ * <mk-swipe-actions class="mk-swipe-actions">
+ *   <div data-mk-swipe-row>
+ *     <div data-mk-swipe-actions="left"><button data-mk-swipe-action="archive" aria-label="Archivar">…</button></div>
+ *     <div data-mk-swipe-content>…the row…</div>
+ *     <div data-mk-swipe-actions="right"><button data-mk-swipe-action="delete" data-mk-swipe-remove aria-label="Eliminar">…</button></div>
+ *   </div>
+ * </mk-swipe-actions>
+ * Emits mk:action ({action, row}) and mk:open ({row, side}).
+ */
+declare class MkSwipeActionsElement extends MkElement<SwipeActionsInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): SwipeActionsInstance;
+    close(): void;
+}
+
+/**
+ * <mk-color-slider class="mk-color-slider" channel="hue" value="#ff8800" show-value></mk-color-slider>
+ * Emits mk:input / mk:change ({value, color}). Changing `value` glides the thumb.
+ */
+declare class MkColorSliderElement extends MkElement<ColorSliderInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): ColorSliderInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    get value(): string;
+}
+
+/**
+ * <mk-color-area class="mk-color-area" value="#ff8800"></mk-color-area>
+ * Emits mk:input / mk:change ({value, color}). Changing `value` glides the thumb.
+ */
+declare class MkColorAreaElement extends MkElement<ColorAreaInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): ColorAreaInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    get value(): string;
+}
+
+/**
+ * <mk-color-field class="mk-color-field" value="#ff8800" format="hex"></mk-color-field>
+ * Emits mk:change ({value, color}) when a new colour is committed.
+ */
+declare class MkColorFieldElement extends MkElement<ColorFieldInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): ColorFieldInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    get value(): string;
+}
+
+/**
+ * <mk-color-picker class="mk-color-picker" value="#3b82f6" label="Color del evento"></mk-color-picker>
+ * `inline` shows the panel in place; `swatches="#111,#ef4444"` sets the presets.
+ * Emits mk:input (live) and mk:change (committed) with {value, color}.
+ */
+declare class MkColorPickerElement extends MkElement<ColorPickerInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): ColorPickerInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    open(): void;
+    close(): void;
+    get value(): string;
+}
+
+/**
+ * <mk-time-field class="mk-time-field" value="09:30" minute-step="15" name="hora"></mk-time-field>
+ * Emits mk:change ({value}: 24 h text, null while incomplete).
+ */
+declare class MkTimeFieldElement extends MkElement<TimeFieldInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): TimeFieldInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    get value(): string | null;
+}
+
+/**
+ * <mk-range-calendar class="mk-range-calendar" start="2026-11-23" end="2026-11-26" visible-months="2"
+ *   unavailable="2026-12-24,2026-12-25"></mk-range-calendar>
+ * Emits mk:change ({start, end, length}). Changing start/end moves the range.
+ */
+declare class MkRangeCalendarElement extends MkElement<RangeCalendarInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): RangeCalendarInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    get value(): DateRange | null;
+}
+
+/**
+ * <mk-date-range-picker class="mk-date-range-picker" start="2026-11-23" end="2026-11-26" name="viaje"
+ *   presets='[{"label":"Puente","start":"2026-12-05","end":"2026-12-08"}]'></mk-date-range-picker>
+ * Emits mk:change ({start, end, length}) for valid ranges.
+ */
+declare class MkDateRangePickerElement extends MkElement<DateRangePickerInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): DateRangePickerInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    open(): void;
+    close(): void;
+    get value(): DateRange | null;
+}
+
+/**
+ * <mk-tooltip class="mk-tooltip" content="Copiar enlace"><button>…</button></mk-tooltip>
+ * Without `content`, the trigger's title. Emits mk:open-change ({open}).
+ */
+declare class MkTooltipElement extends MkElement<TooltipInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): TooltipInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+
+/**
+ * <mk-popover class="mk-popover">
+ *   <button data-mk-popover-trigger>Filtros</button>
+ *   <div data-mk-popover-content>…</div>
+ * </mk-popover>
+ * Emits mk:open-change ({open}).
+ */
+declare class MkPopoverElement extends MkElement<PopoverInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): PopoverInstance;
+    open(): void;
+    close(): void;
+    get isOpen(): boolean;
+}
+
+/**
+ * <mk-loading-button><button class="mk-button">Guardar</button></mk-loading-button>
+ * The `state` attribute (idle | loading | success | error) drives it from outside; run(action) walks the states.
+ * Emits mk:state-change ({state}).
+ */
+declare class MkLoadingButtonElement extends MkElement<LoadingButtonInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): LoadingButtonInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    run(action: () => unknown): Promise<boolean>;
+    get state(): LoadingState;
+}
+
+/**
+ * <mk-breadcrumb class="mk-breadcrumb" items='[{"label":"Inicio","href":"/"},{"label":"Proyectos","href":"/p"},{"label":"Melon"}]'>
+ * </mk-breadcrumb> — or authored <a>/<span> children. Emits mk:navigate ({item, index}, cancelable).
+ */
+declare class MkBreadcrumbElement extends MkElement<BreadcrumbInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): BreadcrumbInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+
+/**
+ * <mk-empty-state class="mk-empty-state" illustration="search" title="Sin resultados"
+ *   description="Prueba con otras palabras." actions='[{"id":"clear","label":"Borrar filtros"}]'></mk-empty-state>
+ * Emits mk:action ({id}).
+ */
+declare class MkEmptyStateElement extends MkElement<EmptyStateInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): EmptyStateInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+
+/**
+ * <mk-stat-card class="mk-stat-card" label="Ingresos" value="128400" previous="118900"
+ *   format='{"style":"currency","currency":"MXN","maximumFractionDigits":0}' series="90,98,104,101,118,128"></mk-stat-card>
+ * Changing value, previous, series or target updates it in place (the figure counts).
+ */
+declare class MkStatCardElement extends MkElement<StatCardInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): StatCardInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+
+/**
+ * <mk-chart-tooltip class="mk-chart-tooltip" share total>
+ *   <mk-chart class="mk-chart" tooltip="false" …></mk-chart>
+ * </mk-chart-tooltip>
+ * Over another chart give it labels, series (JSON), align, inset (JSON), min and max.
+ * Emits mk:index-change ({index, pinned}).
+ */
+declare class MkChartTooltipElement extends MkElement<ChartTooltipInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): ChartTooltipInstance;
+    attributeChangedCallback(_name: string, previous: string | null, next: string | null): void;
+}
+
+/**
+ * <mk-multi-select class="mk-multi-select" label="Etiquetas">
+ *   <select multiple name="etiquetas"><option>Diseño</option><option selected>Código</option></select>
+ * </mk-multi-select>
+ * Or options='[{"value":"ana","label":"Ana"}]' value="ana" name="personas". Emits mk:change ({value}).
+ */
+declare class MkMultiSelectElement extends MkElement<MultiSelectInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): MultiSelectInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    get value(): string[];
+}
+
+/**
+ * <mk-tag-input class="mk-tag-input" label="Etiquetas" value="diseño,urgente" suggestions="diseño,código,urgente" max="5" name="tags">
+ * </mk-tag-input>
+ * Emits mk:change ({value}).
+ */
+declare class MkTagInputElement extends MkElement<TagInputInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): TagInputInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    get value(): string[];
+}
+
+/**
+ * <mk-date-time-picker class="mk-date-time-picker" value="2026-11-23T10:30" minute-step="15" name="cita"></mk-date-time-picker>
+ * Emits mk:change ({value: 'YYYY-MM-DDTHH:MM' | null}).
+ */
+declare class MkDateTimePickerElement extends MkElement<DateTimePickerInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): DateTimePickerInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    open(): void;
+    close(): void;
+    get value(): Date | null;
+}
+
+/**
+ * <mk-filter-builder class="mk-filter-builder"
+ *   fields='[{"key":"estado","label":"Estado","type":"select","options":[{"value":"activo","label":"Activo"}]},{"key":"monto","label":"Monto","type":"number"}]'>
+ * </mk-filter-builder>
+ * Emits mk:change ({value, summary}).
+ */
+declare class MkFilterBuilderElement extends MkElement<FilterBuilderInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): FilterBuilderInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    get value(): FilterGroup | null;
+}
+
+/**
+ * <mk-timeline class="mk-timeline" events='[{"id":"1","title":"Pedido recibido","time":"2026-11-23T09:12","status":"done"}]'>
+ * </mk-timeline> — or authored <ol><li data-status data-time>Title<p>Description</p></li></ol>.
+ */
+declare class MkTimelineElement extends MkElement<TimelineInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): TimelineInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    add(event: TimelineEvent, at?: 'start' | 'end'): void;
+}
+
+/**
+ * <mk-activity-feed class="mk-activity-feed" items='[{"id":"1","actor":"Ana Gómez","action":"comentó en","target":"Tarea 12","time":"2026-11-23T09:12","kind":"comment"}]'>
+ * </mk-activity-feed>. element.prepend([...]) / element.append([...]) for live and older activity.
+ */
+declare class MkActivityFeedElement extends MkElement<ActivityFeedInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): ActivityFeedInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    /** New activity on top (not Element.prepend). */
+    prependItems(items: ActivityItem[]): void;
+    appendItems(items: ActivityItem[]): void;
+}
+
+/**
+ * <mk-tree-view class="mk-tree-view" checkable search
+ *   nodes='[{"id":"a","label":"Proyectos","children":[{"id":"a1","label":"Melon"}]}]'></mk-tree-view>
+ * Emits mk:select ({id, node}), mk:check ({checked}), mk:expand ({id, expanded}).
+ */
+declare class MkTreeViewElement extends MkElement<TreeViewInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): TreeViewInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+
+/**
+ * <mk-file-explorer class="mk-file-explorer" root-label="Mi unidad" view="grid"
+ *   files='[{"id":"docs","name":"Documentos","children":[{"id":"cv","name":"Currículum.pdf","size":184320}]}]'>
+ * </mk-file-explorer>. Emits mk:open ({id, entry}), mk:navigate ({id, folder}), mk:select ({ids}), mk:change ({files, change}).
+ */
+declare class MkFileExplorerElement extends MkElement<FileExplorerInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): FileExplorerInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+
+/**
+ * <mk-json-viewer class="mk-json-viewer" expand-depth="2" search data='{"user":{"name":"Ana","roles":["admin"]}}'></mk-json-viewer>
+ * Or the JSON as the element's text. Emits mk:select ({path, value}) and mk:copy ({text, path}).
+ */
+declare class MkJsonViewerElement extends MkElement<JsonViewerInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): JsonViewerInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+
+/**
+ * <mk-virtual-list class="mk-virtual-list" item-height="44" selectable="multiple" items='["Uno","Dos", …]'></mk-virtual-list>
+ * Or an authored <ul><li>…</li></ul>. element.instance.setRenderer((item, i, row) => …) draws richer rows.
+ * Emits mk:select ({keys, items}).
+ */
+declare class MkVirtualListElement extends MkElement<VirtualListInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): VirtualListInstance<unknown>;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+
+/**
+ * <mk-resizable-panel class="mk-resizable-panel" sizes="25,75" collapsible="0" storage-key="layout">
+ *   <aside data-min="15">…</aside><main>…</main>
+ * </mk-resizable-panel>. Emits mk:resize ({sizes}) and mk:collapse ({index, collapsed}).
+ */
+declare class MkResizablePanelElement extends MkElement<ResizablePanelInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): ResizablePanelInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+
+/**
+ * <mk-split-view class="mk-split-view" ratio="0.35" stack-below="640" labels="Bandeja,Mensaje">
+ *   <section>…</section><section>…</section>
+ * </mk-split-view>. Emits mk:resize and mk:collapse from its separator.
+ */
+declare class MkSplitViewElement extends MkElement<SplitViewInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): SplitViewInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+
+/**
+ * <mk-data-table class="mk-data-table" selectable page-size="10" sort="monto:desc"
+ *   columns='[{"key":"cliente","label":"Cliente"},{"key":"monto","label":"Monto","type":"number"}]'
+ *   rows='[{"id":1,"cliente":"Ana","monto":1200}]' actions='[{"id":"editar","label":"Editar"}]'></mk-data-table>
+ * Emits mk:sort, mk:select, mk:action, mk:bulk-action, mk:page and mk:filter.
+ */
+declare class MkDataTableElement extends MkElement<DataTableInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): DataTableInstance<DataRow>;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+
+/**
+ * <mk-editable-table class="mk-editable-table" new-row='{"estado":"nuevo"}'
+ *   columns='[{"key":"producto","label":"Producto","required":true},{"key":"precio","label":"Precio","type":"number","min":0}]'
+ *   rows='[{"id":1,"producto":"Taza","precio":189}]'></mk-editable-table>
+ * Emits mk:change ({changes}) and mk:save ({changes}); listen to mk:save to send them (the engine keeps them as saved).
+ */
+declare class MkEditableTableElement extends MkElement<EditableTableInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): EditableTableInstance<DataRow>;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+
+/**
+ * <mk-rich-text-editor class="mk-rich-text-editor" name="cuerpo" max-length="500" placeholder="Cuenta tu idea…">
+ *   <p>Contenido <strong>inicial</strong></p>
+ * </mk-rich-text-editor>. Emits mk:change ({html, text}).
+ */
+declare class MkRichTextEditorElement extends MkElement<RichTextEditorInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): RichTextEditorInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+
 /** Tag name → element class, for every component. */
 declare const ELEMENTS: {
     readonly 'mk-theme-picker': typeof MkThemePickerElement;
@@ -243,9 +863,58 @@ declare const ELEMENTS: {
     readonly 'mk-trailer': typeof MkTrailerElement;
     readonly 'mk-calendar': typeof MkCalendarElement;
     readonly 'mk-slot-picker': typeof MkSlotPickerElement;
+    readonly 'mk-attachment': typeof MkAttachmentElement;
+    readonly 'mk-skeleton': typeof MkSkeletonElement;
+    readonly 'mk-questionnaire': typeof MkQuestionnaireElement;
+    readonly 'mk-code-block': typeof MkCodeBlockElement;
+    readonly 'mk-context-menu': typeof MkContextMenuElement;
+    readonly 'mk-drawer': typeof MkDrawerElement;
+    readonly 'mk-link-preview': typeof MkLinkPreviewElement;
+    readonly 'mk-progress': typeof MkProgressElement;
+    readonly 'mk-range-slider': typeof MkRangeSliderElement;
+    readonly 'mk-chart': typeof MkChartElement;
+    readonly 'mk-credit-card': typeof MkCreditCardElement;
+    readonly 'mk-command-search': typeof MkCommandSearchElement;
+    readonly 'mk-hold-confirm': typeof MkHoldConfirmElement;
+    readonly 'mk-image-preview': typeof MkImagePreviewElement;
+    readonly 'mk-like-button': typeof MkLikeButtonElement;
+    readonly 'mk-notification-bell': typeof MkNotificationBellElement;
+    readonly 'mk-password-strength': typeof MkPasswordStrengthElement;
+    readonly 'mk-scratch-card': typeof MkScratchCardElement;
+    readonly 'mk-star-rating': typeof MkStarRatingElement;
+    readonly 'mk-swipe-actions': typeof MkSwipeActionsElement;
+    readonly 'mk-color-slider': typeof MkColorSliderElement;
+    readonly 'mk-color-area': typeof MkColorAreaElement;
+    readonly 'mk-color-field': typeof MkColorFieldElement;
+    readonly 'mk-color-picker': typeof MkColorPickerElement;
+    readonly 'mk-time-field': typeof MkTimeFieldElement;
+    readonly 'mk-range-calendar': typeof MkRangeCalendarElement;
+    readonly 'mk-date-range-picker': typeof MkDateRangePickerElement;
+    readonly 'mk-tooltip': typeof MkTooltipElement;
+    readonly 'mk-popover': typeof MkPopoverElement;
+    readonly 'mk-loading-button': typeof MkLoadingButtonElement;
+    readonly 'mk-breadcrumb': typeof MkBreadcrumbElement;
+    readonly 'mk-empty-state': typeof MkEmptyStateElement;
+    readonly 'mk-stat-card': typeof MkStatCardElement;
+    readonly 'mk-chart-tooltip': typeof MkChartTooltipElement;
+    readonly 'mk-multi-select': typeof MkMultiSelectElement;
+    readonly 'mk-tag-input': typeof MkTagInputElement;
+    readonly 'mk-date-time-picker': typeof MkDateTimePickerElement;
+    readonly 'mk-filter-builder': typeof MkFilterBuilderElement;
+    readonly 'mk-timeline': typeof MkTimelineElement;
+    readonly 'mk-activity-feed': typeof MkActivityFeedElement;
+    readonly 'mk-tree-view': typeof MkTreeViewElement;
+    readonly 'mk-file-explorer': typeof MkFileExplorerElement;
+    readonly 'mk-json-viewer': typeof MkJsonViewerElement;
+    readonly 'mk-virtual-list': typeof MkVirtualListElement;
+    readonly 'mk-resizable-panel': typeof MkResizablePanelElement;
+    readonly 'mk-split-view': typeof MkSplitViewElement;
+    readonly 'mk-data-table': typeof MkDataTableElement;
+    readonly 'mk-editable-table': typeof MkEditableTableElement;
+    readonly 'mk-rich-text-editor': typeof MkRichTextEditorElement;
 };
 type ElementName = keyof typeof ELEMENTS;
 /** Register every motion-kit element (or the ones named). Safe to call more than once. */
 declare function defineElements(names?: ElementName[]): void;
 
-export { ELEMENTS, type ElementName, MkCalendarElement, MkChatBackgroundElement, MkChatElement, MkCursorElement, MkDialogElement, MkElement, MkHoverCardElement, MkInputOtpElement, MkIslandElement, MkMenuElement, MkNavElement, MkPaginationElement, MkQuantityElement, MkSlotPickerElement, MkStepsElement, MkStudioDockElement, MkThemePickerElement, MkToasterElement, MkTrailerElement, type OptionType, SafeHTMLElement, defineElement, defineElements, defineStudioDock, defineTrailer };
+export { ELEMENTS, type ElementName, 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, type OptionType, SafeHTMLElement, defineElement, defineElements, defineStudioDock, defineTrailer };