@yewdiel21/motion-kit 0.14.0 → 0.16.0

package/dist/css/components/toolbar.css

@@ -0,0 +1,122 @@
+/* components/toolbar/toolbar.css */
+/* toolbar — a dark rail of round tools; a light blob sits under the chosen one and stretches like slime to the next.
+   The label beside a tool is a small dark pill. In the dark theme the rail turns light and the blob dark. */
+.mk-toolbar,
+mk-toolbar {
+  --mk-toolbar-rail: color-mix(in srgb, var(--mk-text) 86%, var(--mk-bg));
+  --mk-toolbar-on-rail: var(--mk-bg);
+  --mk-toolbar-blob: var(--mk-bg);
+  --mk-toolbar-on-blob: var(--mk-text);
+  --mk-toolbar-tool: 3.5rem;
+  position: relative;
+  display: inline-flex;
+  width: max-content;
+  max-width: 100%;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-toolbar-rail);
+  box-shadow: 0 10px 30px -12px var(--mk-shadow-color, rgb(0 0 0 / 0.35));
+}
+
+:is(.mk-toolbar, mk-toolbar)[data-mk-orientation='horizontal'] {
+  flex-direction: row;
+}
+
+:is(.mk-toolbar, mk-toolbar) > button {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: var(--mk-toolbar-tool);
+  height: var(--mk-toolbar-tool);
+  padding: 0;
+  border: 0;
+  border-radius: var(--mk-radius-full);
+  background: transparent;
+  color: var(--mk-toolbar-on-rail);
+  cursor: pointer;
+  transition: color 0.2s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+:is(.mk-toolbar, mk-toolbar) > button svg {
+  width: 1.5rem;
+  height: 1.5rem;
+  transition: transform 0.35s var(--mk-ease-swatch);
+}
+
+/* The chosen tool's icon turns dark as the blob arrives under it. */
+:is(.mk-toolbar, mk-toolbar) > button[aria-pressed='true'] {
+  color: var(--mk-toolbar-on-blob);
+  transition-delay: 0.12s;
+}
+
+@media (hover: hover) {
+  :is(.mk-toolbar, mk-toolbar) > button:hover svg {
+    transform: scale(1.1);
+  }
+}
+
+:is(.mk-toolbar, mk-toolbar) > button:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+:is(.mk-toolbar, mk-toolbar) > button:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+[data-mk-toolbar-blob] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--mk-toolbar-tool);
+  height: var(--mk-toolbar-tool);
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-toolbar-blob);
+  pointer-events: none;
+  will-change: transform, height, width;
+}
+
+[data-mk-toolbar-tip] {
+  position: absolute;
+  top: 0;
+  left: calc(100% + 0.75rem);
+  z-index: 2;
+  padding: 0.4rem 0.9rem;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-toolbar-rail);
+  color: var(--mk-toolbar-on-rail);
+  font: 500 0.875rem/1.2 var(--mk-font);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+:is(.mk-toolbar, mk-toolbar)[data-mk-orientation='horizontal'] [data-mk-toolbar-tip] {
+  top: auto;
+  bottom: calc(100% + 0.75rem);
+  left: 0;
+}
+
+[data-mk-toolbar-tip][hidden] {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-toolbar, mk-toolbar) > button,
+  :is(.mk-toolbar, mk-toolbar) > button svg {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-mk-toolbar-blob] {
+    background: Highlight;
+  }
+  :is(.mk-toolbar, mk-toolbar) > button[aria-pressed='true'] {
+    color: HighlightText;
+  }
+}

package/dist/css/components/tree-view.css

@@ -208,3 +208,82 @@ mk-tree-view {
     animation: none;
   }
 }
+
+/* Folder and page icons (icons option): the folder's front opens like a lid with its branch, or under a dragged card. */
+:is([data-mk-tree-folder], [data-mk-tree-page]) {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 1.15rem;
+  height: 1.15rem;
+}
+
+:is([data-mk-tree-folder], [data-mk-tree-page]) svg {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+[data-mk-tree-folder-back] {
+  fill: color-mix(in srgb, var(--mk-accent) 70%, var(--mk-surface-1));
+}
+
+[data-mk-tree-folder-front] {
+  fill: var(--mk-accent);
+  transform-box: fill-box;
+  transform-origin: 50% 100%;
+  transition: transform 0.35s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+[role='treeitem'][aria-expanded='true'] > [data-mk-tree-row] [data-mk-tree-folder-front],
+[role='treeitem'][data-mk-tree-over] > [data-mk-tree-row] [data-mk-tree-folder-front] {
+  transform: skewX(-14deg) scaleY(0.78);
+}
+
+[data-mk-tree-sheet] {
+  fill: var(--mk-surface-3);
+  stroke: var(--mk-outline);
+  stroke-width: 2;
+}
+
+[data-mk-tree-fold] {
+  fill: var(--mk-outline);
+}
+
+/* Dragging: the source row fades, the branch under the card lights up, the card floats with a shadow. */
+[role='treeitem'][data-mk-tree-dragging] > [data-mk-tree-row] {
+  opacity: 0.4;
+}
+
+[role='treeitem'][data-mk-tree-over] > [data-mk-tree-row] {
+  background: color-mix(in srgb, var(--mk-accent) 14%, transparent);
+  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mk-accent) 55%, transparent);
+}
+
+[data-mk-tree-drag] {
+  position: fixed;
+  z-index: 2147483646;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  max-width: 16rem;
+  padding: 0.45rem 0.75rem;
+  overflow: hidden;
+  border-radius: 10px;
+  background: var(--mk-surface-1);
+  box-shadow:
+    0 0 0 1px var(--mk-outline-soft),
+    0 14px 30px -10px color-mix(in srgb, var(--mk-shadow-color, #000) 45%, transparent);
+  color: var(--mk-text);
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-tree-folder-front] {
+    transition: none;
+  }
+}

package/dist/css/components/voice-dots.css

@@ -0,0 +1,70 @@
+/* components/voice-dots/voice-dots.css */
+/* voice-dots — round dots in the text colour (or the chart colours) that stretch into pills with the voice.
+   The row is tall enough for the tallest pill, so the layout around it never moves. */
+.mk-voice-dots,
+mk-voice-dots {
+  --mk-voice-size: 12px;
+  --mk-voice-dot: var(--mk-text);
+  display: inline-grid;
+  place-items: center;
+  min-width: calc(var(--mk-voice-size) * 8);
+  height: calc(var(--mk-voice-size) * 4.6);
+}
+
+[data-mk-voice-row] {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--mk-voice-size) * 0.9);
+  height: 100%;
+}
+
+[data-mk-voice-dot] {
+  display: block;
+  width: var(--mk-voice-size);
+  height: var(--mk-voice-size);
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-voice-dot);
+  transition:
+    background-color 0.3s ease,
+    opacity 0.3s ease;
+  will-change: transform, height;
+}
+
+:is(.mk-voice-dots, mk-voice-dots)[data-mk-state='idle'] [data-mk-voice-dot] {
+  opacity: 0.55;
+}
+
+:is(.mk-voice-dots, mk-voice-dots)[data-mk-colorful] [data-mk-voice-dot='1'] {
+  --mk-voice-dot: var(--mk-chart-1, #2a78d6);
+}
+:is(.mk-voice-dots, mk-voice-dots)[data-mk-colorful] [data-mk-voice-dot='2'] {
+  --mk-voice-dot: var(--mk-chart-8, #e34948);
+}
+:is(.mk-voice-dots, mk-voice-dots)[data-mk-colorful] [data-mk-voice-dot='3'] {
+  --mk-voice-dot: var(--mk-chart-4, #eda100);
+}
+:is(.mk-voice-dots, mk-voice-dots)[data-mk-colorful] [data-mk-voice-dot='4'] {
+  --mk-voice-dot: var(--mk-chart-3, #1baf7a);
+}
+:is(.mk-voice-dots, mk-voice-dots)[data-mk-colorful] [data-mk-voice-dot='5'] {
+  --mk-voice-dot: var(--mk-chart-7, #6250d6);
+}
+:is(.mk-voice-dots, mk-voice-dots)[data-mk-colorful] [data-mk-voice-dot='6'] {
+  --mk-voice-dot: var(--mk-chart-2, #eb6834);
+}
+
+/* Without motion the state shows in the dots' colour. */
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-voice-dots, mk-voice-dots)[data-mk-state='listening'] [data-mk-voice-dot] {
+    --mk-voice-dot: var(--mk-accent);
+  }
+  :is(.mk-voice-dots, mk-voice-dots)[data-mk-state='thinking'] [data-mk-voice-dot] {
+    opacity: 0.75;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-mk-voice-dot] {
+    background: CanvasText;
+  }
+}

package/dist/elements/index.d.ts

@@ -1,8 +1,8 @@
 import { I as Instance } from '../types-BkS_raL8.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 { d0 as StudioDockInstance, d3 as StudioDockView, dg as TrailerInstance, bb as DialogInstance, bd as DialogOptions, bX as MenuInstance, ch as QuantityInstance, c3 as PaginationInstance, bG as HoverCardInstance, bM as InputOtpInstance, aq as CalendarInstance, cP as SlotPickerInstance, ad as AttachmentInstance, ac as AttachmentFile, ai as AttachmentStatus, cM as SkeletonInstance, ck as QuestionnaireInstance, cj as QuestionnaireAnswers, aF as CodeBlockInstance, aU as ContextMenuInstance, bR as LinkPreviewInstance, ce as ProgressInstance, cp as RangeSliderInstance, cr as RangeValue, aw as ChartInstance, ax as ChartOptions, aX as CreditCardInstance, aW as CreditCardField, a_ as CreditCardValues, av as CardBrand, aS as CommandSearchInstance, aR as CommandItem, bE as HoldConfirmInstance, bK as ImagePreviewInstance, c0 as NotificationBellInstance, c8 as PasswordStrengthInstance, cD as ScratchCardInstance, cY as StarRatingInstance, aP as ColorSliderInstance, aH as ColorAreaInstance, aK as ColorFieldInstance, aN as ColorPickerInstance, d7 as TimeFieldInstance, cn as RangeCalendarInstance, b6 as DateRange, b7 as DateRangePickerInstance, de as TooltipInstance, cc as PopoverInstance, bU as LoadingButtonInstance, bW as LoadingState, ak as BreadcrumbInstance, bm as EmptyStateInstance, c_ as StatCardInstance, aA as ChartTooltipInstance, bZ as MultiSelectInstance, d5 as TagInputInstance, b9 as DateTimePickerInstance, bw as FilterBuilderInstance, bA as FilterGroup, db as TimelineInstance, da as TimelineEvent, a6 as ActivityFeedInstance, a8 as ActivityItem, dj as TreeViewInstance, br as FileExplorerInstance, bP as JsonViewerInstance, dm as VirtualListInstance, cs as ResizablePanelInstance, cW as SplitViewInstance, b4 as DataTableInstance, b2 as DataRow, bh as EditableTableInstance, cy as RichTextEditorInstance, cH as SelectInstance, aa as AddToCartInstance, cF as ScrollIslandInstance } from '../reveal-DRpNO4KP.js';
+import { E as ThemePickerInstance, M as ToasterInstance, C as ChatInstance, d as ChatRole, l as NavInstance, n as NavStyle, o as NavStyleAlias, e as CursorInstance, I as IslandInstance, V as ToolbarInstance, B as BidirectionalSliderInstance, X as VoiceDotsInstance, Z as VoiceState, r as PieChartInstance, s as PieChartOptions, R as RadarChartInstance, u as RadarChartOptions, w as RadialChartInstance, x as RadialChartOptions, S as SankeyChartInstance, z as SankeyChartOptions, H as HeatmapChartInstance, h as HeatmapChartOptions, O as OrbitMenuInstance } from '../store-Da3zSh8Z.js';
+export { an as toast } from '../store-Da3zSh8Z.js';
+import { C as ChatBackgroundInstance, c as StepsInstance, P as PillButtonInstance } from '../engine-5zRIssTO.js';
 import { L as LikeButtonInstance, S as SwipeActionsInstance } from '../engine-QECQnGz1.js';
 import 'gsap/Flip';
 
@@ -127,7 +127,7 @@ declare class MkChatElement extends MkElement<Instance> {
 }
 
 /**
- * <mk-nav class="mk-nav mk-nav--bonita" nav-style="bonita" [accent] [reveal] [storage-key="mi-app-nav"]>
+ * <mk-nav class="mk-nav mk-nav--pills" nav-style="pills" [accent] [reveal] [storage-key="mi-app-nav"]>
  *   <div class="mk-nav__buttons"><a class="mk-nav__button" href="/">…</a></div>
  * </mk-nav>
  * Emits `mk:navigate` (detail: index, value, item, originalEvent) on click.
@@ -137,7 +137,7 @@ declare class MkNavElement extends MkElement<NavInstance> {
     protected create(options: Record<string, unknown>): NavInstance;
     attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
     select(target: number | string): void;
-    setStyle(style: NavStyle): void;
+    setStyle(style: NavStyle | NavStyleAlias): void;
 }
 
 /**
@@ -843,6 +843,166 @@ declare class MkRichTextEditorElement extends MkElement<RichTextEditorInstance>
     attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
 }
 
+/**
+ * <mk-select class="mk-select" label="Equipo"><select name="equipo">…</select></mk-select>
+ * The select inside gives the options and stays in step (forms post it). Emits mk:change ({value}).
+ */
+declare class MkSelectElement extends MkElement<SelectInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): SelectInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    get value(): string;
+}
+
+/**
+ * <mk-add-to-cart class="mk-add-to-cart" target="#carrito"><button>Agregar</button></mk-add-to-cart>
+ * Packs the product's [data-mk-cart-image] and flies it to the cart. Emits mk:add and mk:land ({count}).
+ */
+declare class MkAddToCartElement extends MkElement<AddToCartInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): AddToCartInstance;
+    get count(): number;
+}
+
+/**
+ * <mk-scroll-island class="mk-scroll-island" style="height: 24rem; overflow: auto">…</mk-scroll-island>
+ * or <mk-scroll-island page></mk-scroll-island> for the page. Emits mk:section ({section}).
+ */
+declare class MkScrollIslandElement extends MkElement<ScrollIslandInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): ScrollIslandInstance;
+}
+
+/**
+ * <mk-pill-button><button type="button">Haz una pregunta</button></mk-pill-button>
+ * The dark fill gathers into a circle around the arrow on hover. `expand` starts as the circle.
+ */
+declare class MkPillButtonElement extends MkElement<PillButtonInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): PillButtonInstance;
+}
+
+/**
+ * <mk-toolbar class="mk-toolbar" aria-label="Herramientas" value="lapiz">
+ *   <button data-mk-tool="lapiz" aria-label="Lápiz">…svg…</button> …
+ * </mk-toolbar>
+ * The chosen tool's blob stretches like slime to the next one. Emits mk:change ({value}).
+ */
+declare class MkToolbarElement extends MkElement<ToolbarInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): ToolbarInstance;
+    get value(): string;
+    set value(next: string);
+    setValue(value: string, notify?: boolean): void;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+
+/**
+ * <mk-bidirectional-slider class="mk-bidirectional-slider" label="Volumen" icons="volume" value="20"></mk-bidirectional-slider>
+ * A value either side of an origin; the fill grows from it. Emits mk:input and mk:change ({value}).
+ */
+declare class MkBidirectionalSliderElement extends MkElement<BidirectionalSliderInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): BidirectionalSliderInstance;
+    get value(): number;
+    set value(next: number);
+    setValue(value: number, notify?: boolean): void;
+    reset(notify?: boolean): void;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+
+/**
+ * <mk-voice-dots class="mk-voice-dots" state="listening"></mk-voice-dots>
+ * Dots that move with a voice. element.listen(stream) follows a microphone; emits mk:state ({state}).
+ */
+declare class MkVoiceDotsElement extends MkElement<VoiceDotsInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): VoiceDotsInstance;
+    /** A new state flows from where the dots are (the engine, and the audio it follows, stay). */
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    get state(): VoiceState;
+    set state(next: VoiceState);
+    setLevel(level: number | number[]): void;
+    listen(source: MediaStream | HTMLMediaElement): Promise<() => void>;
+    stop(): void;
+}
+
+/**
+ * <mk-pie-chart class="mk-chart mk-pie-chart" label="Ventas por canal"
+ *   data='[{"label":"Tienda","value":420},{"label":"En línea","value":310}]'></mk-pie-chart>
+ * donut="0" draws a pie. Attribute changes glide in place. Emits mk:select ({index, label, value}).
+ */
+declare class MkPieChartElement extends MkElement<PieChartInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): PieChartInstance;
+    attributeChangedCallback(_name: string, previous: string | null, next: string | null): void;
+    update(options: PieChartOptions): void;
+    select(index: number | null): void;
+}
+
+/**
+ * <mk-radar-chart class="mk-chart mk-radar-chart" label="Perfil" axes="Velocidad,Calidad,Precio,Soporte,Diseño"
+ *   series='[{"name":"Ana","values":[8,6,7,9,5]}]'></mk-radar-chart>
+ * Attribute changes glide in place. Emits mk:select ({index, label, values}).
+ */
+declare class MkRadarChartElement extends MkElement<RadarChartInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): RadarChartInstance;
+    attributeChangedCallback(_name: string, previous: string | null, next: string | null): void;
+    update(options: RadarChartOptions): void;
+    select(axis: number | null): void;
+}
+
+/**
+ * <mk-radial-chart class="mk-chart mk-radial-chart" label="Metas del día"
+ *   data='[{"label":"Pasos","value":7400,"max":10000},{"label":"Agua","value":5,"max":8}]'></mk-radial-chart>
+ * sweep="270" draws a gauge. Attribute changes glide in place. Emits mk:select ({index, label, value}).
+ */
+declare class MkRadialChartElement extends MkElement<RadialChartInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): RadialChartInstance;
+    attributeChangedCallback(_name: string, previous: string | null, next: string | null): void;
+    update(options: RadialChartOptions): void;
+    select(index: number | null): void;
+}
+
+/**
+ * <mk-sankey-chart class="mk-chart mk-sankey-chart" label="Embudo de ventas"
+ *   nodes='[{"id":"visitas","label":"Visitas"},{"id":"carrito","label":"Carrito"}]'
+ *   links='[{"source":"visitas","target":"carrito","value":420}]'></mk-sankey-chart>
+ * Attribute changes glide in place. Emits mk:select ({index, source, target, value}).
+ */
+declare class MkSankeyChartElement extends MkElement<SankeyChartInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): SankeyChartInstance;
+    attributeChangedCallback(_name: string, previous: string | null, next: string | null): void;
+    update(options: SankeyChartOptions): void;
+    select(index: number | null): void;
+}
+
+/** <mk-heatmap-chart></mk-heatmap-chart> */
+declare class MkHeatmapChartElement extends MkElement<HeatmapChartInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): HeatmapChartInstance;
+    attributeChangedCallback(_name: string, previous: string | null, next: string | null): void;
+    update(options: HeatmapChartOptions): void;
+    select(date: string | null): void;
+}
+
+/**
+ * <mk-orbit-menu class="mk-orbit-menu">
+ *   <button data-mk-orbit-toggle aria-label="Acciones"></button>
+ *   <button data-mk-orbit-item data-mk-value="nuevo" aria-label="Nuevo">…svg…</button> …
+ * </mk-orbit-menu>
+ * Options swirl out around the middle button. Emits mk:toggle ({open}) and mk:select ({value}).
+ */
+declare class MkOrbitMenuElement extends MkElement<OrbitMenuInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): OrbitMenuInstance;
+    open(): void;
+    close(): void;
+}
+
 /** Tag name → element class, for every component. */
 declare const ELEMENTS: {
     readonly 'mk-theme-picker': typeof MkThemePickerElement;
@@ -912,9 +1072,22 @@ declare const ELEMENTS: {
     readonly 'mk-data-table': typeof MkDataTableElement;
     readonly 'mk-editable-table': typeof MkEditableTableElement;
     readonly 'mk-rich-text-editor': typeof MkRichTextEditorElement;
+    readonly 'mk-select': typeof MkSelectElement;
+    readonly 'mk-add-to-cart': typeof MkAddToCartElement;
+    readonly 'mk-scroll-island': typeof MkScrollIslandElement;
+    readonly 'mk-pill-button': typeof MkPillButtonElement;
+    readonly 'mk-toolbar': typeof MkToolbarElement;
+    readonly 'mk-bidirectional-slider': typeof MkBidirectionalSliderElement;
+    readonly 'mk-voice-dots': typeof MkVoiceDotsElement;
+    readonly 'mk-pie-chart': typeof MkPieChartElement;
+    readonly 'mk-radar-chart': typeof MkRadarChartElement;
+    readonly 'mk-radial-chart': typeof MkRadialChartElement;
+    readonly 'mk-sankey-chart': typeof MkSankeyChartElement;
+    readonly 'mk-heatmap-chart': typeof MkHeatmapChartElement;
+    readonly 'mk-orbit-menu': typeof MkOrbitMenuElement;
 };
 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, 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 };
+export { ELEMENTS, type ElementName, MkActivityFeedElement, MkAddToCartElement, MkAttachmentElement, MkBidirectionalSliderElement, 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, MkHeatmapChartElement, MkHoldConfirmElement, MkHoverCardElement, MkImagePreviewElement, MkInputOtpElement, MkIslandElement, MkJsonViewerElement, MkLikeButtonElement, MkLinkPreviewElement, MkLoadingButtonElement, MkMenuElement, MkMultiSelectElement, MkNavElement, MkNotificationBellElement, MkOrbitMenuElement, MkPaginationElement, MkPasswordStrengthElement, MkPieChartElement, MkPillButtonElement, MkPopoverElement, MkProgressElement, MkQuantityElement, MkQuestionnaireElement, MkRadarChartElement, MkRadialChartElement, MkRangeCalendarElement, MkRangeSliderElement, MkResizablePanelElement, MkRichTextEditorElement, MkSankeyChartElement, MkScratchCardElement, MkScrollIslandElement, MkSelectElement, MkSkeletonElement, MkSlotPickerElement, MkSplitViewElement, MkStarRatingElement, MkStatCardElement, MkStepsElement, MkStudioDockElement, MkSwipeActionsElement, MkTagInputElement, MkThemePickerElement, MkTimeFieldElement, MkTimelineElement, MkToasterElement, MkToolbarElement, MkTooltipElement, MkTrailerElement, MkTreeViewElement, MkVirtualListElement, MkVoiceDotsElement, type OptionType, SafeHTMLElement, defineElement, defineElements, defineStudioDock, defineTrailer };