@m3ui-vue/m3ui-vue 0.4.1 → 0.4.3

package/dist/plugin.d.ts

@@ -1,10 +1,10 @@
-import type { App } from 'vue';
+import type { App, MaybeRef } from 'vue';
 import type { Palette } from './composables/useColorPalette';
 import type { M3Locale } from './composables/useLocale';
 export interface M3UIOptions {
     palette?: string;
     customPalettes?: Palette[];
-    locale?: Partial<M3Locale>;
+    locale?: MaybeRef<Partial<M3Locale>>;
 }
 export declare function createM3UI(options?: M3UIOptions): {
     install(app: App): void;

package/dist/rich-text-editor.js

@@ -1,4 +1,4 @@
-import { a as e, d as t, i as n, n as r, r as i, t as a } from "./MMenuItem-FyttjOj_.js";
+import { a as e, f as t, i as n, n as r, r as i, t as a } from "./MMenuItem-COdgD4m7.js";
 import { t as o } from "./MIcon-CaEooCmZ.js";
 import { t as s } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { Fragment as c, computed as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, normalizeClass as g, normalizeStyle as _, onBeforeUnmount as v, onMounted as y, openBlock as b, ref as x, renderList as S, shallowRef as C, toDisplayString as w, watch as T, withCtx as E, withKeys as D } from "vue";

package/dist/styles.css

@@ -1,2 +1,2 @@
-.code-editor-container[data-v-b0a66a4b] .cm-editor{height:100%;min-height:inherit;font-family:Roboto Mono,Fira Code,Consolas,monospace;font-size:.8125rem;line-height:1.6}.code-editor-container[data-v-b0a66a4b] .cm-editor.cm-focused{outline:none}.code-editor-container[data-v-b0a66a4b] .cm-scroller{min-height:inherit}.code-editor-container[data-v-b0a66a4b] .cm-content{padding:12px 0}.code-editor-container[data-v-b0a66a4b] .cm-line{padding:0 16px}.code-editor-container[data-v-b0a66a4b] .cm-gutters{background:var(--color-surface-container);border-right:1px solid var(--color-outline-variant);color:var(--color-outline);padding:0 4px;font-size:.75rem}.code-editor-container[data-v-b0a66a4b] .cm-activeLineGutter{background:var(--color-surface-container-high);color:var(--color-on-surface-variant)}.code-editor-container[data-v-b0a66a4b] .cm-activeLine{background:var(--color-surface-container-lowest)}.code-editor-container[data-v-b0a66a4b] .cm-selectionBackground{background:var(--color-primary-container)!important}.code-editor-container[data-v-b0a66a4b] .cm-cursor{border-left-color:var(--color-primary);border-left-width:2px}.code-editor-container[data-v-b0a66a4b] .cm-matchingBracket{background:var(--color-tertiary-container);color:var(--color-on-tertiary-container);border-radius:2px}.code-editor-container[data-v-b0a66a4b] .cm-foldGutter span{color:var(--color-on-surface-variant)}@keyframes m3-wavy-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes m3-wavy-travel{0%{stroke-dashoffset:0}to{stroke-dashoffset:calc(var(--m3-wave-len) * -1px)}}@media (prefers-reduced-motion:reduce){.animate-\[m3-wavy-spin_2\.8s_linear_infinite\]{animation:2.8s linear infinite m3-wavy-spin}.animate-\[m3-wavy-travel_2s_linear_infinite\]{animation:none!important}}.m3-dialog-enter-active[data-v-2e3c3567],.m3-dialog-leave-active[data-v-2e3c3567]{transition:opacity .15s}.m3-dialog-enter-from[data-v-2e3c3567],.m3-dialog-leave-to[data-v-2e3c3567]{opacity:0}.m3-dialog-enter-active .dialog-box[data-v-2e3c3567],.m3-dialog-leave-active .dialog-box[data-v-2e3c3567]{transition:transform .15s}.m3-dialog-enter-from .dialog-box[data-v-2e3c3567],.m3-dialog-leave-to .dialog-box[data-v-2e3c3567]{transform:scale(.95)}.m3-dialog-fs-enter-active[data-v-2e3c3567],.m3-dialog-fs-leave-active[data-v-2e3c3567]{transition:transform .25s cubic-bezier(.2,0,0,1),opacity .15s}.m3-dialog-fs-enter-from[data-v-2e3c3567],.m3-dialog-fs-leave-to[data-v-2e3c3567]{opacity:0;transform:translateY(100%)}.toast-row[data-v-0859cf20]{grid-template-rows:1fr;padding-bottom:8px;display:grid}.toast-row>.toast-inner[data-v-0859cf20]{min-height:0}.m3-toast-bot-enter-active[data-v-0859cf20]{transition:grid-template-rows .22s cubic-bezier(.2,0,0,1),padding-bottom .22s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-bot-enter-active>.toast-inner[data-v-0859cf20]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-bot-enter-from[data-v-0859cf20]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-enter-from>.toast-inner[data-v-0859cf20]{opacity:0;transform:translateY(20px)scale(.94)}.m3-toast-bot-leave-active[data-v-0859cf20]{transition:grid-template-rows .3s cubic-bezier(.2,0,0,1),padding-bottom .3s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-bot-leave-active>.toast-inner[data-v-0859cf20]{transition:opacity .18s,transform .18s}.m3-toast-bot-leave-to[data-v-0859cf20]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-leave-to>.toast-inner[data-v-0859cf20]{opacity:0;transform:scale(.92)}.m3-toast-top-enter-active[data-v-0859cf20]{transition:grid-template-rows .22s cubic-bezier(.2,0,0,1),padding-bottom .22s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-top-enter-active>.toast-inner[data-v-0859cf20]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-top-enter-from[data-v-0859cf20]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-enter-from>.toast-inner[data-v-0859cf20]{opacity:0;transform:translateY(-20px)scale(.94)}.m3-toast-top-leave-active[data-v-0859cf20]{transition:grid-template-rows .3s cubic-bezier(.2,0,0,1),padding-bottom .3s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-top-leave-active>.toast-inner[data-v-0859cf20]{transition:opacity .18s,transform .18s}.m3-toast-top-leave-to[data-v-0859cf20]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-leave-to>.toast-inner[data-v-0859cf20]{opacity:0;transform:scale(.92)}@keyframes m3-toast-progress-0859cf20{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.notif-row[data-v-6eb78ef7]{grid-template-rows:1fr;padding-bottom:6px;display:grid}.notif-row>.notif-inner[data-v-6eb78ef7]{min-height:0}.m3-notif-bot-enter-active[data-v-6eb78ef7]{transition:grid-template-rows .2s,padding-bottom .2s;overflow:hidden}.m3-notif-bot-enter-active>.notif-inner[data-v-6eb78ef7]{transition:opacity .15s,transform .2s}.m3-notif-bot-enter-from[data-v-6eb78ef7]{grid-template-rows:0fr;padding-bottom:0}.m3-notif-bot-enter-from>.notif-inner[data-v-6eb78ef7]{opacity:0;transform:translateY(12px)scale(.95)}.m3-notif-bot-leave-active[data-v-6eb78ef7]{transition:grid-template-rows .25s,padding-bottom .25s;overflow:hidden}.m3-notif-bot-leave-active>.notif-inner[data-v-6eb78ef7]{transition:opacity .15s,transform .15s}.m3-notif-bot-leave-to[data-v-6eb78ef7]{grid-template-rows:0fr;padding-bottom:0}.m3-notif-bot-leave-to>.notif-inner[data-v-6eb78ef7]{opacity:0;transform:scale(.93)}.m3-notif-top-enter-active[data-v-6eb78ef7]{transition:grid-template-rows .2s,padding-bottom .2s;overflow:hidden}.m3-notif-top-enter-active>.notif-inner[data-v-6eb78ef7]{transition:opacity .15s,transform .2s}.m3-notif-top-enter-from[data-v-6eb78ef7]{grid-template-rows:0fr;padding-bottom:0}.m3-notif-top-enter-from>.notif-inner[data-v-6eb78ef7]{opacity:0;transform:translateY(-12px)scale(.95)}.m3-notif-top-leave-active[data-v-6eb78ef7]{transition:grid-template-rows .25s,padding-bottom .25s;overflow:hidden}.m3-notif-top-leave-active>.notif-inner[data-v-6eb78ef7]{transition:opacity .15s,transform .15s}.m3-notif-top-leave-to[data-v-6eb78ef7]{grid-template-rows:0fr;padding-bottom:0}.m3-notif-top-leave-to>.notif-inner[data-v-6eb78ef7]{opacity:0;transform:scale(.93)}.m3-ac-modal-enter-active[data-v-09d3e71c],.m3-ac-modal-leave-active[data-v-09d3e71c]{transition:opacity .15s}.m3-ac-modal-enter-from[data-v-09d3e71c],.m3-ac-modal-leave-to[data-v-09d3e71c]{opacity:0}.m3-ac-modal-enter-active .ac-modal-box[data-v-09d3e71c],.m3-ac-modal-leave-active .ac-modal-box[data-v-09d3e71c]{transition:transform .15s}.m3-ac-modal-enter-from .ac-modal-box[data-v-09d3e71c],.m3-ac-modal-leave-to .ac-modal-box[data-v-09d3e71c]{transform:scale(.95)}.bs-scrim[data-v-5b1fb748]{transition:opacity .3s}.bs-enter-from .bs-scrim[data-v-5b1fb748],.bs-leave-to .bs-scrim[data-v-5b1fb748]{opacity:0}.bs-panel[data-v-5b1fb748]{transition:transform .32s cubic-bezier(.2,0,0,1),opacity .24s}.bs-enter-from .bs-panel[data-v-5b1fb748]{opacity:0;transform:translateY(40%)}.bs-leave-to .bs-panel[data-v-5b1fb748]{opacity:0;transform:translateY(100%)!important}.carousel-track[data-v-f1acc440]{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}.carousel-track[data-v-f1acc440]::-webkit-scrollbar{display:none}.snap-center[data-v-f1acc440]>*{scroll-snap-align:center}.snap-start[data-v-f1acc440]>*{scroll-snap-align:start}.hue-slider[data-v-cf276414]{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.hue-slider[data-v-cf276414]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0006}.hue-slider[data-v-cf276414]::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0006}.hue-slider[data-v-59c0237f]{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.hue-slider[data-v-59c0237f]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0006}.hue-slider[data-v-59c0237f]::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0006}.m3-cp-modal-enter-active[data-v-59c0237f],.m3-cp-modal-leave-active[data-v-59c0237f]{transition:opacity .15s}.m3-cp-modal-enter-from[data-v-59c0237f],.m3-cp-modal-leave-to[data-v-59c0237f]{opacity:0}.m3-cp-modal-enter-active .cp-box[data-v-59c0237f],.m3-cp-modal-leave-active .cp-box[data-v-59c0237f]{transition:transform .15s}.m3-cp-modal-enter-from .cp-box[data-v-59c0237f],.m3-cp-modal-leave-to .cp-box[data-v-59c0237f]{transform:scale(.95)}.m3-cmd-enter-active[data-v-4d6cca63],.m3-cmd-leave-active[data-v-4d6cca63]{transition:opacity .15s}.m3-cmd-enter-from[data-v-4d6cca63],.m3-cmd-leave-to[data-v-4d6cca63]{opacity:0}.m3-cmd-enter-active .cmd-box[data-v-4d6cca63],.m3-cmd-leave-active .cmd-box[data-v-4d6cca63]{transition:transform .15s}.m3-cmd-enter-from .cmd-box[data-v-4d6cca63],.m3-cmd-leave-to .cmd-box[data-v-4d6cca63]{transform:scale(.95)translateY(-10px)}.dt-expand-grid[data-v-857139c7]{grid-template-rows:0fr;transition:grid-template-rows .25s cubic-bezier(.2,0,0,1);display:grid}.dt-expand-grid.dt-expand-open[data-v-857139c7]{grid-template-rows:1fr}.dt-expand-body[data-v-857139c7]{min-height:0;overflow:hidden}.m3-dp-modal-enter-active[data-v-ac5f05d4],.m3-dp-modal-leave-active[data-v-ac5f05d4]{transition:opacity .15s}.m3-dp-modal-enter-from[data-v-ac5f05d4],.m3-dp-modal-leave-to[data-v-ac5f05d4]{opacity:0}.m3-dp-modal-enter-active .dp-box[data-v-ac5f05d4],.m3-dp-modal-leave-active .dp-box[data-v-ac5f05d4]{transition:transform .15s}.m3-dp-modal-enter-from .dp-box[data-v-ac5f05d4],.m3-dp-modal-leave-to .dp-box[data-v-ac5f05d4]{transform:scale(.95)}.m3-drp-modal-enter-active[data-v-fcb7a791],.m3-drp-modal-leave-active[data-v-fcb7a791]{transition:opacity .15s}.m3-drp-modal-enter-from[data-v-fcb7a791],.m3-drp-modal-leave-to[data-v-fcb7a791]{opacity:0}.m3-drp-modal-enter-active .drp-box[data-v-fcb7a791],.m3-drp-modal-leave-active .drp-box[data-v-fcb7a791]{transition:transform .15s}.m3-drp-modal-enter-from .drp-box[data-v-fcb7a791],.m3-drp-modal-leave-to .drp-box[data-v-fcb7a791]{transform:scale(.95)}.expand-grid[data-v-31731809]{grid-template-rows:0fr;transition:grid-template-rows .3s ease-in-out;display:grid}.expand-grid.expand-open[data-v-31731809]{grid-template-rows:1fr}.expand-body[data-v-31731809]{min-height:0;overflow:hidden}.m3-fab-content-enter-active[data-v-02ba313e]{transition:opacity .2s,transform .2s cubic-bezier(.2,0,0,1)}.m3-fab-content-leave-active[data-v-02ba313e]{transition:opacity .15s,transform .15s}.m3-fab-content-enter-from[data-v-02ba313e]{opacity:0;transform:scale(.85)}.m3-fab-content-leave-to[data-v-02ba313e]{opacity:0;transform:scale(.9)}.m3-file-enter-active[data-v-6b150427],.m3-file-leave-active[data-v-6b150427]{transition:all .2s}.m3-file-enter-from[data-v-6b150427],.m3-file-leave-to[data-v-6b150427]{opacity:0;transform:translateY(-8px)}.mli-expand-grid{grid-template-rows:1fr;display:grid}.mli-expand-body{min-height:0;padding-left:2rem;overflow:hidden}.mli-expand-enter-active{transition:grid-template-rows .3s cubic-bezier(.2,0,0,1)}.mli-expand-enter-active>.mli-expand-body{transition:opacity .2s cubic-bezier(.2,0,0,1) 80ms}.mli-expand-enter-from{grid-template-rows:0fr}.mli-expand-enter-from>.mli-expand-body{opacity:0}.mli-expand-leave-active{transition:grid-template-rows .25s cubic-bezier(.4,0,1,1)}.mli-expand-leave-active>.mli-expand-body{transition:opacity .12s cubic-bezier(.4,0,1,1)}.mli-expand-leave-to{grid-template-rows:0fr}.mli-expand-leave-to>.mli-expand-body{opacity:0}.m3-mac-modal-enter-active[data-v-a848fbd2],.m3-mac-modal-leave-active[data-v-a848fbd2]{transition:opacity .15s}.m3-mac-modal-enter-from[data-v-a848fbd2],.m3-mac-modal-leave-to[data-v-a848fbd2]{opacity:0}.m3-mac-modal-enter-active .mac-modal-box[data-v-a848fbd2],.m3-mac-modal-leave-active .mac-modal-box[data-v-a848fbd2]{transition:transform .15s}.m3-mac-modal-enter-from .mac-modal-box[data-v-a848fbd2],.m3-mac-modal-leave-to .mac-modal-box[data-v-a848fbd2]{transform:scale(.95)}.m3-ms-modal-enter-active[data-v-fc4bb9ca],.m3-ms-modal-leave-active[data-v-fc4bb9ca]{transition:opacity .15s}.m3-ms-modal-enter-from[data-v-fc4bb9ca],.m3-ms-modal-leave-to[data-v-fc4bb9ca]{opacity:0}.m3-ms-modal-enter-active .ms-modal-box[data-v-fc4bb9ca],.m3-ms-modal-leave-active .ms-modal-box[data-v-fc4bb9ca]{transition:transform .15s}.m3-ms-modal-enter-from .ms-modal-box[data-v-fc4bb9ca],.m3-ms-modal-leave-to .ms-modal-box[data-v-fc4bb9ca]{transform:scale(.95)}input[type=number][data-v-8b2327d2]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number][data-v-8b2327d2]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number][data-v-8b2327d2]{-moz-appearance:textfield}.nd-scrim[data-v-ec337590]{transition:opacity .28s}.nd-enter-from .nd-scrim[data-v-ec337590],.nd-leave-to .nd-scrim[data-v-ec337590]{opacity:0}.nd-panel[data-v-ec337590]{transition:transform .3s cubic-bezier(.2,0,0,1)}.nd-enter-from .nd-panel-left[data-v-ec337590],.nd-leave-to .nd-panel-left[data-v-ec337590]{transform:translate(-100%)}.nd-enter-from .nd-panel-right[data-v-ec337590],.nd-leave-to .nd-panel-right[data-v-ec337590]{transform:translate(100%)}.nd-enter-from .nd-panel-top[data-v-ec337590],.nd-leave-to .nd-panel-top[data-v-ec337590]{transform:translateY(-100%)}.nd-enter-from .nd-panel-bottom[data-v-ec337590],.nd-leave-to .nd-panel-bottom[data-v-ec337590]{transform:translateY(100%)}.nd-section-grid[data-v-ec337590]{grid-template-rows:1fr;display:grid}.nd-section-body[data-v-ec337590]{min-height:0;overflow:hidden}.nd-section-enter-active[data-v-ec337590]{transition:grid-template-rows .35s cubic-bezier(.2,0,0,1)}.nd-section-enter-active>.nd-section-body[data-v-ec337590]{transition:opacity .25s cubic-bezier(.2,0,0,1) 80ms}.nd-section-enter-from[data-v-ec337590]{grid-template-rows:0fr}.nd-section-enter-from>.nd-section-body[data-v-ec337590]{opacity:0}.nd-section-leave-active[data-v-ec337590]{transition:grid-template-rows .28s cubic-bezier(.4,0,1,1)}.nd-section-leave-active>.nd-section-body[data-v-ec337590]{transition:opacity .15s cubic-bezier(.4,0,1,1)}.nd-section-leave-to[data-v-ec337590]{grid-template-rows:0fr}.nd-section-leave-to>.nd-section-body[data-v-ec337590]{opacity:0}.nd-inline[data-v-ec337590]{transition:width .3s cubic-bezier(.2,0,0,1);overflow:hidden}.nd-inline[data-v-ec337590]>*{min-width:var(--nd-width,18rem)}.nd-inline.nd-collapsed[data-v-ec337590]>*{min-width:0}.nd-toggle[data-v-ec337590]{align-items:center;display:flex}.nd-toggle-inner[data-v-ec337590]{flex-shrink:0;justify-content:center;align-items:center;width:72px;height:64px;display:flex}.nd-label[data-v-ec337590]{transition:opacity .2s cubic-bezier(.2,0,0,1) 80ms}.nd-inline.nd-collapsed .nd-label[data-v-ec337590],.nd-inline.nd-collapsed[data-v-ec337590] .nd-label{opacity:0;transition:opacity .1s cubic-bezier(.2,0,0,1)}.nd-inline .nd-collapse-h[data-v-ec337590]{max-height:80px;transition:max-height .3s cubic-bezier(.2,0,0,1)}.nd-inline.nd-collapsed .nd-collapse-h[data-v-ec337590]{max-height:0}.nd-inline .nd-section-body[data-v-ec337590]>*,.nd-inline[data-v-ec337590] .nd-section-body>*{transition:padding .3s cubic-bezier(.2,0,0,1)}.nd-children-divider[data-v-ec337590]{border-top:1px solid #0000;height:0;margin:0 .75rem;transition:border-color .1s,margin .1s}.nd-inline.nd-collapsed .nd-children-divider[data-v-ec337590]{border-top-color:var(--color-outline-variant);margin:.25rem .75rem;transition:border-color .2s .3s,margin .2s .3s}@keyframes m3-wave-flow{0%{transform:translate(0)}to{transform:translate(-20px)}}@keyframes m3-progress-indeterminate{0%{left:-40%}to{left:100%}}@media (prefers-reduced-motion:reduce){.animate-\[m3-wave-flow_1\.2s_linear_infinite\],.animate-\[m3-wave-flow_0\.9s_linear_infinite\],.animate-\[m3-progress-indeterminate_1\.6s_ease-in-out_infinite\]{animation:none!important}}.m3-radio-dot[data-v-cdb650b5]{transform-box:fill-box;transform-origin:50%;transition:transform .15s;transform:scale(0)}.m3-radio-dot.is-checked[data-v-cdb650b5]{transform:scale(1)}.m3-select-modal-enter-active[data-v-bc6f9740],.m3-select-modal-leave-active[data-v-bc6f9740]{transition:opacity .15s}.m3-select-modal-enter-from[data-v-bc6f9740],.m3-select-modal-leave-to[data-v-bc6f9740]{opacity:0}.m3-select-modal-enter-active .select-modal-box[data-v-bc6f9740],.m3-select-modal-leave-active .select-modal-box[data-v-bc6f9740]{transition:transform .15s}.m3-select-modal-enter-from .select-modal-box[data-v-bc6f9740],.m3-select-modal-leave-to .select-modal-box[data-v-bc6f9740]{transform:scale(.95)}.ss-scrim[data-v-ba5b6f4b]{transition:opacity .28s}.ss-enter-from .ss-scrim[data-v-ba5b6f4b],.ss-leave-to .ss-scrim[data-v-ba5b6f4b]{opacity:0}.ss-panel[data-v-ba5b6f4b]{transition:transform .32s cubic-bezier(.2,0,0,1),opacity .24s}.ss-enter-from .ss-panel[data-v-ba5b6f4b]{opacity:0;transform:translate(40%)}.ss-leave-to .ss-panel[data-v-ba5b6f4b]{opacity:0;transform:translate(100%)!important}@keyframes skeleton-wave-move-32ecf05b{0%{transform:translate(-100%)}60%{transform:translate(100%)}to{transform:translate(100%)}}.skeleton-wave[data-v-32ecf05b]{position:relative;overflow:hidden}.skeleton-wave[data-v-32ecf05b]:after{content:"";background:linear-gradient(90deg, transparent 0%, var(--color-on-surface) 50%, transparent 100%);opacity:.06;animation:1.8s ease-in-out infinite skeleton-wave-move-32ecf05b;position:absolute;inset:0}.toggle-btn[data-v-ec1435bc]{transition:border-radius .25s,background-color .15s}.m3-spot-enter-active[data-v-1fa0da82],.m3-spot-leave-active[data-v-1fa0da82]{transition:opacity .15s}.m3-spot-enter-from[data-v-1fa0da82],.m3-spot-leave-to[data-v-1fa0da82]{opacity:0}.m3-spot-enter-active .spot-box[data-v-1fa0da82],.m3-spot-leave-active .spot-box[data-v-1fa0da82]{transition:transform .15s,opacity .15s}.m3-spot-enter-from .spot-box[data-v-1fa0da82]{opacity:0;transform:scale(.96)translateY(-8px)}.m3-spot-leave-to .spot-box[data-v-1fa0da82]{opacity:0;transform:scale(.98)}.m3-tp-modal-enter-active[data-v-a2a090e9],.m3-tp-modal-leave-active[data-v-a2a090e9]{transition:opacity .15s}.m3-tp-modal-enter-from[data-v-a2a090e9],.m3-tp-modal-leave-to[data-v-a2a090e9]{opacity:0}.m3-tp-modal-enter-active .tp-box[data-v-a2a090e9],.m3-tp-modal-leave-active .tp-box[data-v-a2a090e9]{transition:transform .15s}.m3-tp-modal-enter-from .tp-box[data-v-a2a090e9],.m3-tp-modal-leave-to .tp-box[data-v-a2a090e9]{transform:scale(.95)}.m3-tour-highlight{box-shadow:0 0 0 4px var(--color-primary);border-radius:8px;position:relative;z-index:201!important}.m3-tour-enter-active,.m3-tour-leave-active{transition:opacity .2s}.m3-tour-enter-from,.m3-tour-leave-to{opacity:0}.m3-markdown[data-v-23db2c2c] h1{font-size:var(--text-headline-large);line-height:var(--text-headline-large--line-height);color:var(--color-on-surface);margin:1em 0 .5em;font-weight:600}.m3-markdown[data-v-23db2c2c] h2{font-size:var(--text-headline-medium);line-height:var(--text-headline-medium--line-height);color:var(--color-on-surface);margin:1em 0 .5em;font-weight:600}.m3-markdown[data-v-23db2c2c] h3{font-size:var(--text-headline-small);line-height:var(--text-headline-small--line-height);color:var(--color-on-surface);margin:.75em 0 .25em;font-weight:600}.m3-markdown[data-v-23db2c2c] h4{font-size:var(--text-title-large);line-height:var(--text-title-large--line-height);color:var(--color-on-surface);margin:.75em 0 .25em;font-weight:600}.m3-markdown[data-v-23db2c2c] p{margin:.5em 0}.m3-markdown[data-v-23db2c2c] a{color:var(--color-primary);text-underline-offset:2px;text-decoration:underline}.m3-markdown[data-v-23db2c2c] a:hover{opacity:.8}.m3-markdown[data-v-23db2c2c] strong{color:var(--color-on-surface);font-weight:600}.m3-markdown[data-v-23db2c2c] em{font-style:italic}.m3-markdown[data-v-23db2c2c] ul{margin:.5em 0;padding-left:1.5em;list-style-type:disc}.m3-markdown[data-v-23db2c2c] ol{margin:.5em 0;padding-left:1.5em;list-style-type:decimal}.m3-markdown[data-v-23db2c2c] li{margin:.25em 0}.m3-markdown[data-v-23db2c2c] li::marker{color:var(--color-on-surface-variant)}.m3-markdown[data-v-23db2c2c] blockquote{border-left:3px solid var(--color-primary);background:var(--color-surface-container);color:var(--color-on-surface-variant);border-radius:0 8px 8px 0;margin:.75em 0;padding:.5em 1em}.m3-markdown[data-v-23db2c2c] code{background:var(--color-surface-container-highest);color:var(--color-primary);border-radius:4px;padding:.15em .4em;font-family:Roboto Mono,Fira Code,Consolas,monospace;font-size:.875em}.m3-markdown[data-v-23db2c2c] pre{background:var(--color-surface-container-highest);border:1px solid var(--color-outline-variant);border-radius:12px;margin:.75em 0;padding:1em;overflow-x:auto}.m3-markdown[data-v-23db2c2c] pre code{color:var(--color-on-surface);background:0 0;padding:0;font-size:.8125rem;line-height:1.6}.m3-markdown[data-v-23db2c2c] .hljs-keyword,.m3-markdown[data-v-23db2c2c] .hljs-selector-tag,.m3-markdown[data-v-23db2c2c] .hljs-built_in,.m3-markdown[data-v-23db2c2c] .hljs-tag .hljs-keyword{color:var(--color-primary)}.m3-markdown[data-v-23db2c2c] .hljs-string,.m3-markdown[data-v-23db2c2c] .hljs-regexp,.m3-markdown[data-v-23db2c2c] .hljs-template-variable{color:var(--color-tertiary)}.m3-markdown[data-v-23db2c2c] .hljs-number,.m3-markdown[data-v-23db2c2c] .hljs-literal{color:var(--color-error)}.m3-markdown[data-v-23db2c2c] .hljs-title.function_,.m3-markdown[data-v-23db2c2c] .hljs-title.function_>.hljs-keyword{color:var(--color-secondary);font-weight:500}.m3-markdown[data-v-23db2c2c] .hljs-type,.m3-markdown[data-v-23db2c2c] .hljs-title.class_{color:var(--color-primary);font-style:italic}.m3-markdown[data-v-23db2c2c] .hljs-comment,.m3-markdown[data-v-23db2c2c] .hljs-quote{color:var(--color-outline);font-style:italic}.m3-markdown[data-v-23db2c2c] .hljs-attr,.m3-markdown[data-v-23db2c2c] .hljs-attribute{color:var(--color-tertiary)}.m3-markdown[data-v-23db2c2c] .hljs-tag{color:var(--color-on-surface-variant)}.m3-markdown[data-v-23db2c2c] .hljs-name{color:var(--color-primary)}.m3-markdown[data-v-23db2c2c] .hljs-punctuation,.m3-markdown[data-v-23db2c2c] .hljs-operator,.m3-markdown[data-v-23db2c2c] .hljs-meta,.m3-markdown[data-v-23db2c2c] .hljs-meta .hljs-keyword{color:var(--color-on-surface-variant)}.m3-markdown[data-v-23db2c2c] .hljs-variable,.m3-markdown[data-v-23db2c2c] .hljs-property,.m3-markdown[data-v-23db2c2c] .hljs-symbol,.m3-markdown[data-v-23db2c2c] .hljs-params{color:var(--color-on-surface)}.m3-markdown[data-v-23db2c2c] .m3-code-block{position:relative}.m3-markdown[data-v-23db2c2c] .m3-code-copy{background:var(--color-surface-container);width:28px;height:28px;color:var(--color-on-surface-variant);cursor:pointer;opacity:0;z-index:1;border:none;border-radius:6px;justify-content:center;align-items:center;transition:opacity .15s;display:flex;position:absolute;top:8px;right:8px}.m3-markdown[data-v-23db2c2c] .m3-code-block:hover .m3-code-copy{opacity:1}.m3-markdown[data-v-23db2c2c] .m3-code-copy:hover{background:var(--color-surface-container-high);color:var(--color-on-surface)}.m3-markdown[data-v-23db2c2c] .m3-code-line{display:block}.m3-markdown[data-v-23db2c2c] .m3-line-hl{background:color-mix(in srgb, var(--color-primary) 8%, transparent);border-left:2px solid color-mix(in srgb, var(--color-primary) 40%, transparent);margin:0 -1em;padding:0 1em 0 calc(1em - 2px)}.m3-markdown[data-v-23db2c2c] hr{border:none;border-top:1px solid var(--color-outline-variant);margin:1.5em 0}.m3-markdown[data-v-23db2c2c] table{border-collapse:collapse;width:100%;margin:.75em 0}.m3-markdown[data-v-23db2c2c] th{background:var(--color-surface-container);text-align:left;border-bottom:2px solid var(--color-outline-variant);font-weight:600;font-size:var(--text-label-large);color:var(--color-on-surface);padding:.5em .75em}.m3-markdown[data-v-23db2c2c] td{border-bottom:1px solid var(--color-outline-variant);padding:.5em .75em}.m3-markdown[data-v-23db2c2c] img{border-radius:12px;max-width:100%;height:auto;margin:.5em 0}.rte-content[data-v-e6829e5c] .tiptap{min-height:inherit;outline:none}.rte-content[data-v-e6829e5c] .tiptap p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;color:var(--color-on-surface-variant);opacity:.5;pointer-events:none;height:0}.rte-content[data-v-e6829e5c] h1{font-size:var(--text-headline-large);line-height:var(--text-headline-large--line-height);margin:.75em 0 .25em;font-weight:600}.rte-content[data-v-e6829e5c] h2{font-size:var(--text-headline-medium);line-height:var(--text-headline-medium--line-height);margin:.75em 0 .25em;font-weight:600}.rte-content[data-v-e6829e5c] h3{font-size:var(--text-headline-small);line-height:var(--text-headline-small--line-height);margin:.75em 0 .25em;font-weight:600}.rte-content[data-v-e6829e5c] p{margin:.5em 0}.rte-content[data-v-e6829e5c] ul{margin:.5em 0;padding-left:1.5em;list-style-type:disc}.rte-content[data-v-e6829e5c] ol{margin:.5em 0;padding-left:1.5em;list-style-type:decimal}.rte-content[data-v-e6829e5c] blockquote{border-left:3px solid var(--color-primary);color:var(--color-on-surface-variant);margin:.5em 0;padding-left:1em}.rte-content[data-v-e6829e5c] code{background:var(--color-surface-container-highest);border-radius:4px;padding:.15em .4em;font-size:.875em}.rte-content[data-v-e6829e5c] pre{background:var(--color-surface-container-highest);border-radius:8px;margin:.5em 0;padding:1em;overflow-x:auto}.rte-content[data-v-e6829e5c] pre code{background:0 0;padding:0}.rte-content[data-v-e6829e5c] a{color:var(--color-primary);text-decoration:underline}.rte-content[data-v-e6829e5c] mark{background:var(--color-tertiary-container);color:var(--color-on-tertiary-container);border-radius:2px;padding:.1em .2em}.rte-content[data-v-e6829e5c] img{border-radius:8px;max-width:100%;height:auto;margin:.5em 0}
+.code-editor-container[data-v-b0a66a4b] .cm-editor{height:100%;min-height:inherit;font-family:Roboto Mono,Fira Code,Consolas,monospace;font-size:.8125rem;line-height:1.6}.code-editor-container[data-v-b0a66a4b] .cm-editor.cm-focused{outline:none}.code-editor-container[data-v-b0a66a4b] .cm-scroller{min-height:inherit}.code-editor-container[data-v-b0a66a4b] .cm-content{padding:12px 0}.code-editor-container[data-v-b0a66a4b] .cm-line{padding:0 16px}.code-editor-container[data-v-b0a66a4b] .cm-gutters{background:var(--color-surface-container);border-right:1px solid var(--color-outline-variant);color:var(--color-outline);padding:0 4px;font-size:.75rem}.code-editor-container[data-v-b0a66a4b] .cm-activeLineGutter{background:var(--color-surface-container-high);color:var(--color-on-surface-variant)}.code-editor-container[data-v-b0a66a4b] .cm-activeLine{background:var(--color-surface-container-lowest)}.code-editor-container[data-v-b0a66a4b] .cm-selectionBackground{background:var(--color-primary-container)!important}.code-editor-container[data-v-b0a66a4b] .cm-cursor{border-left-color:var(--color-primary);border-left-width:2px}.code-editor-container[data-v-b0a66a4b] .cm-matchingBracket{background:var(--color-tertiary-container);color:var(--color-on-tertiary-container);border-radius:2px}.code-editor-container[data-v-b0a66a4b] .cm-foldGutter span{color:var(--color-on-surface-variant)}@keyframes m3-wavy-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes m3-wavy-travel{0%{stroke-dashoffset:0}to{stroke-dashoffset:calc(var(--m3-wave-len) * -1px)}}@media (prefers-reduced-motion:reduce){.animate-\[m3-wavy-spin_2\.8s_linear_infinite\]{animation:2.8s linear infinite m3-wavy-spin}.animate-\[m3-wavy-travel_2s_linear_infinite\]{animation:none!important}}.m3-dialog-enter-active[data-v-2e3c3567],.m3-dialog-leave-active[data-v-2e3c3567]{transition:opacity .15s}.m3-dialog-enter-from[data-v-2e3c3567],.m3-dialog-leave-to[data-v-2e3c3567]{opacity:0}.m3-dialog-enter-active .dialog-box[data-v-2e3c3567],.m3-dialog-leave-active .dialog-box[data-v-2e3c3567]{transition:transform .15s}.m3-dialog-enter-from .dialog-box[data-v-2e3c3567],.m3-dialog-leave-to .dialog-box[data-v-2e3c3567]{transform:scale(.95)}.m3-dialog-fs-enter-active[data-v-2e3c3567],.m3-dialog-fs-leave-active[data-v-2e3c3567]{transition:transform .25s cubic-bezier(.2,0,0,1),opacity .15s}.m3-dialog-fs-enter-from[data-v-2e3c3567],.m3-dialog-fs-leave-to[data-v-2e3c3567]{opacity:0;transform:translateY(100%)}.toast-row[data-v-0859cf20]{grid-template-rows:1fr;padding-bottom:8px;display:grid}.toast-row>.toast-inner[data-v-0859cf20]{min-height:0}.m3-toast-bot-enter-active[data-v-0859cf20]{transition:grid-template-rows .22s cubic-bezier(.2,0,0,1),padding-bottom .22s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-bot-enter-active>.toast-inner[data-v-0859cf20]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-bot-enter-from[data-v-0859cf20]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-enter-from>.toast-inner[data-v-0859cf20]{opacity:0;transform:translateY(20px)scale(.94)}.m3-toast-bot-leave-active[data-v-0859cf20]{transition:grid-template-rows .3s cubic-bezier(.2,0,0,1),padding-bottom .3s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-bot-leave-active>.toast-inner[data-v-0859cf20]{transition:opacity .18s,transform .18s}.m3-toast-bot-leave-to[data-v-0859cf20]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-leave-to>.toast-inner[data-v-0859cf20]{opacity:0;transform:scale(.92)}.m3-toast-top-enter-active[data-v-0859cf20]{transition:grid-template-rows .22s cubic-bezier(.2,0,0,1),padding-bottom .22s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-top-enter-active>.toast-inner[data-v-0859cf20]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-top-enter-from[data-v-0859cf20]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-enter-from>.toast-inner[data-v-0859cf20]{opacity:0;transform:translateY(-20px)scale(.94)}.m3-toast-top-leave-active[data-v-0859cf20]{transition:grid-template-rows .3s cubic-bezier(.2,0,0,1),padding-bottom .3s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-top-leave-active>.toast-inner[data-v-0859cf20]{transition:opacity .18s,transform .18s}.m3-toast-top-leave-to[data-v-0859cf20]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-leave-to>.toast-inner[data-v-0859cf20]{opacity:0;transform:scale(.92)}@keyframes m3-toast-progress-0859cf20{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.notif-row[data-v-6eb78ef7]{grid-template-rows:1fr;padding-bottom:6px;display:grid}.notif-row>.notif-inner[data-v-6eb78ef7]{min-height:0}.m3-notif-bot-enter-active[data-v-6eb78ef7]{transition:grid-template-rows .2s,padding-bottom .2s;overflow:hidden}.m3-notif-bot-enter-active>.notif-inner[data-v-6eb78ef7]{transition:opacity .15s,transform .2s}.m3-notif-bot-enter-from[data-v-6eb78ef7]{grid-template-rows:0fr;padding-bottom:0}.m3-notif-bot-enter-from>.notif-inner[data-v-6eb78ef7]{opacity:0;transform:translateY(12px)scale(.95)}.m3-notif-bot-leave-active[data-v-6eb78ef7]{transition:grid-template-rows .25s,padding-bottom .25s;overflow:hidden}.m3-notif-bot-leave-active>.notif-inner[data-v-6eb78ef7]{transition:opacity .15s,transform .15s}.m3-notif-bot-leave-to[data-v-6eb78ef7]{grid-template-rows:0fr;padding-bottom:0}.m3-notif-bot-leave-to>.notif-inner[data-v-6eb78ef7]{opacity:0;transform:scale(.93)}.m3-notif-top-enter-active[data-v-6eb78ef7]{transition:grid-template-rows .2s,padding-bottom .2s;overflow:hidden}.m3-notif-top-enter-active>.notif-inner[data-v-6eb78ef7]{transition:opacity .15s,transform .2s}.m3-notif-top-enter-from[data-v-6eb78ef7]{grid-template-rows:0fr;padding-bottom:0}.m3-notif-top-enter-from>.notif-inner[data-v-6eb78ef7]{opacity:0;transform:translateY(-12px)scale(.95)}.m3-notif-top-leave-active[data-v-6eb78ef7]{transition:grid-template-rows .25s,padding-bottom .25s;overflow:hidden}.m3-notif-top-leave-active>.notif-inner[data-v-6eb78ef7]{transition:opacity .15s,transform .15s}.m3-notif-top-leave-to[data-v-6eb78ef7]{grid-template-rows:0fr;padding-bottom:0}.m3-notif-top-leave-to>.notif-inner[data-v-6eb78ef7]{opacity:0;transform:scale(.93)}.m3-ac-modal-enter-active[data-v-4ee54742],.m3-ac-modal-leave-active[data-v-4ee54742]{transition:opacity .15s}.m3-ac-modal-enter-from[data-v-4ee54742],.m3-ac-modal-leave-to[data-v-4ee54742]{opacity:0}.m3-ac-modal-enter-active .ac-modal-box[data-v-4ee54742],.m3-ac-modal-leave-active .ac-modal-box[data-v-4ee54742]{transition:transform .15s}.m3-ac-modal-enter-from .ac-modal-box[data-v-4ee54742],.m3-ac-modal-leave-to .ac-modal-box[data-v-4ee54742]{transform:scale(.95)}.bs-scrim[data-v-5b1fb748]{transition:opacity .3s}.bs-enter-from .bs-scrim[data-v-5b1fb748],.bs-leave-to .bs-scrim[data-v-5b1fb748]{opacity:0}.bs-panel[data-v-5b1fb748]{transition:transform .32s cubic-bezier(.2,0,0,1),opacity .24s}.bs-enter-from .bs-panel[data-v-5b1fb748]{opacity:0;transform:translateY(40%)}.bs-leave-to .bs-panel[data-v-5b1fb748]{opacity:0;transform:translateY(100%)!important}.carousel-track[data-v-f1acc440]{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}.carousel-track[data-v-f1acc440]::-webkit-scrollbar{display:none}.snap-center[data-v-f1acc440]>*{scroll-snap-align:center}.snap-start[data-v-f1acc440]>*{scroll-snap-align:start}.hue-slider[data-v-cf276414]{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.hue-slider[data-v-cf276414]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0006}.hue-slider[data-v-cf276414]::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0006}.hue-slider[data-v-59c0237f]{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.hue-slider[data-v-59c0237f]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0006}.hue-slider[data-v-59c0237f]::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0006}.m3-cp-modal-enter-active[data-v-59c0237f],.m3-cp-modal-leave-active[data-v-59c0237f]{transition:opacity .15s}.m3-cp-modal-enter-from[data-v-59c0237f],.m3-cp-modal-leave-to[data-v-59c0237f]{opacity:0}.m3-cp-modal-enter-active .cp-box[data-v-59c0237f],.m3-cp-modal-leave-active .cp-box[data-v-59c0237f]{transition:transform .15s}.m3-cp-modal-enter-from .cp-box[data-v-59c0237f],.m3-cp-modal-leave-to .cp-box[data-v-59c0237f]{transform:scale(.95)}.m3-cmd-enter-active[data-v-4d6cca63],.m3-cmd-leave-active[data-v-4d6cca63]{transition:opacity .15s}.m3-cmd-enter-from[data-v-4d6cca63],.m3-cmd-leave-to[data-v-4d6cca63]{opacity:0}.m3-cmd-enter-active .cmd-box[data-v-4d6cca63],.m3-cmd-leave-active .cmd-box[data-v-4d6cca63]{transition:transform .15s}.m3-cmd-enter-from .cmd-box[data-v-4d6cca63],.m3-cmd-leave-to .cmd-box[data-v-4d6cca63]{transform:scale(.95)translateY(-10px)}.dt-expand-grid[data-v-857139c7]{grid-template-rows:0fr;transition:grid-template-rows .25s cubic-bezier(.2,0,0,1);display:grid}.dt-expand-grid.dt-expand-open[data-v-857139c7]{grid-template-rows:1fr}.dt-expand-body[data-v-857139c7]{min-height:0;overflow:hidden}.m3-dp-modal-enter-active[data-v-ac5f05d4],.m3-dp-modal-leave-active[data-v-ac5f05d4]{transition:opacity .15s}.m3-dp-modal-enter-from[data-v-ac5f05d4],.m3-dp-modal-leave-to[data-v-ac5f05d4]{opacity:0}.m3-dp-modal-enter-active .dp-box[data-v-ac5f05d4],.m3-dp-modal-leave-active .dp-box[data-v-ac5f05d4]{transition:transform .15s}.m3-dp-modal-enter-from .dp-box[data-v-ac5f05d4],.m3-dp-modal-leave-to .dp-box[data-v-ac5f05d4]{transform:scale(.95)}.m3-drp-modal-enter-active[data-v-fcb7a791],.m3-drp-modal-leave-active[data-v-fcb7a791]{transition:opacity .15s}.m3-drp-modal-enter-from[data-v-fcb7a791],.m3-drp-modal-leave-to[data-v-fcb7a791]{opacity:0}.m3-drp-modal-enter-active .drp-box[data-v-fcb7a791],.m3-drp-modal-leave-active .drp-box[data-v-fcb7a791]{transition:transform .15s}.m3-drp-modal-enter-from .drp-box[data-v-fcb7a791],.m3-drp-modal-leave-to .drp-box[data-v-fcb7a791]{transform:scale(.95)}.expand-grid[data-v-31731809]{grid-template-rows:0fr;transition:grid-template-rows .3s ease-in-out;display:grid}.expand-grid.expand-open[data-v-31731809]{grid-template-rows:1fr}.expand-body[data-v-31731809]{min-height:0;overflow:hidden}.m3-fab-content-enter-active[data-v-02ba313e]{transition:opacity .2s,transform .2s cubic-bezier(.2,0,0,1)}.m3-fab-content-leave-active[data-v-02ba313e]{transition:opacity .15s,transform .15s}.m3-fab-content-enter-from[data-v-02ba313e]{opacity:0;transform:scale(.85)}.m3-fab-content-leave-to[data-v-02ba313e]{opacity:0;transform:scale(.9)}.m3-file-enter-active[data-v-6b150427],.m3-file-leave-active[data-v-6b150427]{transition:all .2s}.m3-file-enter-from[data-v-6b150427],.m3-file-leave-to[data-v-6b150427]{opacity:0;transform:translateY(-8px)}.mli-expand-grid{grid-template-rows:1fr;display:grid}.mli-expand-body{min-height:0;padding-left:2rem;overflow:hidden}.mli-expand-enter-active{transition:grid-template-rows .3s cubic-bezier(.2,0,0,1)}.mli-expand-enter-active>.mli-expand-body{transition:opacity .2s cubic-bezier(.2,0,0,1) 80ms}.mli-expand-enter-from{grid-template-rows:0fr}.mli-expand-enter-from>.mli-expand-body{opacity:0}.mli-expand-leave-active{transition:grid-template-rows .25s cubic-bezier(.4,0,1,1)}.mli-expand-leave-active>.mli-expand-body{transition:opacity .12s cubic-bezier(.4,0,1,1)}.mli-expand-leave-to{grid-template-rows:0fr}.mli-expand-leave-to>.mli-expand-body{opacity:0}.m3-mac-modal-enter-active[data-v-1c95b672],.m3-mac-modal-leave-active[data-v-1c95b672]{transition:opacity .15s}.m3-mac-modal-enter-from[data-v-1c95b672],.m3-mac-modal-leave-to[data-v-1c95b672]{opacity:0}.m3-mac-modal-enter-active .mac-modal-box[data-v-1c95b672],.m3-mac-modal-leave-active .mac-modal-box[data-v-1c95b672]{transition:transform .15s}.m3-mac-modal-enter-from .mac-modal-box[data-v-1c95b672],.m3-mac-modal-leave-to .mac-modal-box[data-v-1c95b672]{transform:scale(.95)}.m3-ms-modal-enter-active[data-v-fc4bb9ca],.m3-ms-modal-leave-active[data-v-fc4bb9ca]{transition:opacity .15s}.m3-ms-modal-enter-from[data-v-fc4bb9ca],.m3-ms-modal-leave-to[data-v-fc4bb9ca]{opacity:0}.m3-ms-modal-enter-active .ms-modal-box[data-v-fc4bb9ca],.m3-ms-modal-leave-active .ms-modal-box[data-v-fc4bb9ca]{transition:transform .15s}.m3-ms-modal-enter-from .ms-modal-box[data-v-fc4bb9ca],.m3-ms-modal-leave-to .ms-modal-box[data-v-fc4bb9ca]{transform:scale(.95)}input[type=number][data-v-d624d5b1]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number][data-v-d624d5b1]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number][data-v-d624d5b1]{-moz-appearance:textfield}.nd-scrim[data-v-ec337590]{transition:opacity .28s}.nd-enter-from .nd-scrim[data-v-ec337590],.nd-leave-to .nd-scrim[data-v-ec337590]{opacity:0}.nd-panel[data-v-ec337590]{transition:transform .3s cubic-bezier(.2,0,0,1)}.nd-enter-from .nd-panel-left[data-v-ec337590],.nd-leave-to .nd-panel-left[data-v-ec337590]{transform:translate(-100%)}.nd-enter-from .nd-panel-right[data-v-ec337590],.nd-leave-to .nd-panel-right[data-v-ec337590]{transform:translate(100%)}.nd-enter-from .nd-panel-top[data-v-ec337590],.nd-leave-to .nd-panel-top[data-v-ec337590]{transform:translateY(-100%)}.nd-enter-from .nd-panel-bottom[data-v-ec337590],.nd-leave-to .nd-panel-bottom[data-v-ec337590]{transform:translateY(100%)}.nd-section-grid[data-v-ec337590]{grid-template-rows:1fr;display:grid}.nd-section-body[data-v-ec337590]{min-height:0;overflow:hidden}.nd-section-enter-active[data-v-ec337590]{transition:grid-template-rows .35s cubic-bezier(.2,0,0,1)}.nd-section-enter-active>.nd-section-body[data-v-ec337590]{transition:opacity .25s cubic-bezier(.2,0,0,1) 80ms}.nd-section-enter-from[data-v-ec337590]{grid-template-rows:0fr}.nd-section-enter-from>.nd-section-body[data-v-ec337590]{opacity:0}.nd-section-leave-active[data-v-ec337590]{transition:grid-template-rows .28s cubic-bezier(.4,0,1,1)}.nd-section-leave-active>.nd-section-body[data-v-ec337590]{transition:opacity .15s cubic-bezier(.4,0,1,1)}.nd-section-leave-to[data-v-ec337590]{grid-template-rows:0fr}.nd-section-leave-to>.nd-section-body[data-v-ec337590]{opacity:0}.nd-inline[data-v-ec337590]{transition:width .3s cubic-bezier(.2,0,0,1);overflow:hidden}.nd-inline[data-v-ec337590]>*{min-width:var(--nd-width,18rem)}.nd-inline.nd-collapsed[data-v-ec337590]>*{min-width:0}.nd-toggle[data-v-ec337590]{align-items:center;display:flex}.nd-toggle-inner[data-v-ec337590]{flex-shrink:0;justify-content:center;align-items:center;width:72px;height:64px;display:flex}.nd-label[data-v-ec337590]{transition:opacity .2s cubic-bezier(.2,0,0,1) 80ms}.nd-inline.nd-collapsed .nd-label[data-v-ec337590],.nd-inline.nd-collapsed[data-v-ec337590] .nd-label{opacity:0;transition:opacity .1s cubic-bezier(.2,0,0,1)}.nd-inline .nd-collapse-h[data-v-ec337590]{max-height:80px;transition:max-height .3s cubic-bezier(.2,0,0,1)}.nd-inline.nd-collapsed .nd-collapse-h[data-v-ec337590]{max-height:0}.nd-inline .nd-section-body[data-v-ec337590]>*,.nd-inline[data-v-ec337590] .nd-section-body>*{transition:padding .3s cubic-bezier(.2,0,0,1)}.nd-children-divider[data-v-ec337590]{border-top:1px solid #0000;height:0;margin:0 .75rem;transition:border-color .1s,margin .1s}.nd-inline.nd-collapsed .nd-children-divider[data-v-ec337590]{border-top-color:var(--color-outline-variant);margin:.25rem .75rem;transition:border-color .2s .3s,margin .2s .3s}@keyframes m3-wave-flow{0%{transform:translate(0)}to{transform:translate(-20px)}}@keyframes m3-progress-indeterminate{0%{left:-40%}to{left:100%}}@media (prefers-reduced-motion:reduce){.animate-\[m3-wave-flow_1\.2s_linear_infinite\],.animate-\[m3-wave-flow_0\.9s_linear_infinite\],.animate-\[m3-progress-indeterminate_1\.6s_ease-in-out_infinite\]{animation:none!important}}.m3-radio-dot[data-v-cdb650b5]{transform-box:fill-box;transform-origin:50%;transition:transform .15s;transform:scale(0)}.m3-radio-dot.is-checked[data-v-cdb650b5]{transform:scale(1)}.m3-select-modal-enter-active[data-v-bc6f9740],.m3-select-modal-leave-active[data-v-bc6f9740]{transition:opacity .15s}.m3-select-modal-enter-from[data-v-bc6f9740],.m3-select-modal-leave-to[data-v-bc6f9740]{opacity:0}.m3-select-modal-enter-active .select-modal-box[data-v-bc6f9740],.m3-select-modal-leave-active .select-modal-box[data-v-bc6f9740]{transition:transform .15s}.m3-select-modal-enter-from .select-modal-box[data-v-bc6f9740],.m3-select-modal-leave-to .select-modal-box[data-v-bc6f9740]{transform:scale(.95)}.ss-scrim[data-v-ba5b6f4b]{transition:opacity .28s}.ss-enter-from .ss-scrim[data-v-ba5b6f4b],.ss-leave-to .ss-scrim[data-v-ba5b6f4b]{opacity:0}.ss-panel[data-v-ba5b6f4b]{transition:transform .32s cubic-bezier(.2,0,0,1),opacity .24s}.ss-enter-from .ss-panel[data-v-ba5b6f4b]{opacity:0;transform:translate(40%)}.ss-leave-to .ss-panel[data-v-ba5b6f4b]{opacity:0;transform:translate(100%)!important}@keyframes skeleton-wave-move-32ecf05b{0%{transform:translate(-100%)}60%{transform:translate(100%)}to{transform:translate(100%)}}.skeleton-wave[data-v-32ecf05b]{position:relative;overflow:hidden}.skeleton-wave[data-v-32ecf05b]:after{content:"";background:linear-gradient(90deg, transparent 0%, var(--color-on-surface) 50%, transparent 100%);opacity:.06;animation:1.8s ease-in-out infinite skeleton-wave-move-32ecf05b;position:absolute;inset:0}.toggle-btn[data-v-ec1435bc]{transition:border-radius .25s,background-color .15s}.m3-spot-enter-active[data-v-1fa0da82],.m3-spot-leave-active[data-v-1fa0da82]{transition:opacity .15s}.m3-spot-enter-from[data-v-1fa0da82],.m3-spot-leave-to[data-v-1fa0da82]{opacity:0}.m3-spot-enter-active .spot-box[data-v-1fa0da82],.m3-spot-leave-active .spot-box[data-v-1fa0da82]{transition:transform .15s,opacity .15s}.m3-spot-enter-from .spot-box[data-v-1fa0da82]{opacity:0;transform:scale(.96)translateY(-8px)}.m3-spot-leave-to .spot-box[data-v-1fa0da82]{opacity:0;transform:scale(.98)}.m3-tp-modal-enter-active[data-v-a2a090e9],.m3-tp-modal-leave-active[data-v-a2a090e9]{transition:opacity .15s}.m3-tp-modal-enter-from[data-v-a2a090e9],.m3-tp-modal-leave-to[data-v-a2a090e9]{opacity:0}.m3-tp-modal-enter-active .tp-box[data-v-a2a090e9],.m3-tp-modal-leave-active .tp-box[data-v-a2a090e9]{transition:transform .15s}.m3-tp-modal-enter-from .tp-box[data-v-a2a090e9],.m3-tp-modal-leave-to .tp-box[data-v-a2a090e9]{transform:scale(.95)}.m3-tour-highlight{box-shadow:0 0 0 4px var(--color-primary);border-radius:8px;position:relative;z-index:201!important}.m3-tour-enter-active,.m3-tour-leave-active{transition:opacity .2s}.m3-tour-enter-from,.m3-tour-leave-to{opacity:0}.m3-markdown[data-v-23db2c2c] h1{font-size:var(--text-headline-large);line-height:var(--text-headline-large--line-height);color:var(--color-on-surface);margin:1em 0 .5em;font-weight:600}.m3-markdown[data-v-23db2c2c] h2{font-size:var(--text-headline-medium);line-height:var(--text-headline-medium--line-height);color:var(--color-on-surface);margin:1em 0 .5em;font-weight:600}.m3-markdown[data-v-23db2c2c] h3{font-size:var(--text-headline-small);line-height:var(--text-headline-small--line-height);color:var(--color-on-surface);margin:.75em 0 .25em;font-weight:600}.m3-markdown[data-v-23db2c2c] h4{font-size:var(--text-title-large);line-height:var(--text-title-large--line-height);color:var(--color-on-surface);margin:.75em 0 .25em;font-weight:600}.m3-markdown[data-v-23db2c2c] p{margin:.5em 0}.m3-markdown[data-v-23db2c2c] a{color:var(--color-primary);text-underline-offset:2px;text-decoration:underline}.m3-markdown[data-v-23db2c2c] a:hover{opacity:.8}.m3-markdown[data-v-23db2c2c] strong{color:var(--color-on-surface);font-weight:600}.m3-markdown[data-v-23db2c2c] em{font-style:italic}.m3-markdown[data-v-23db2c2c] ul{margin:.5em 0;padding-left:1.5em;list-style-type:disc}.m3-markdown[data-v-23db2c2c] ol{margin:.5em 0;padding-left:1.5em;list-style-type:decimal}.m3-markdown[data-v-23db2c2c] li{margin:.25em 0}.m3-markdown[data-v-23db2c2c] li::marker{color:var(--color-on-surface-variant)}.m3-markdown[data-v-23db2c2c] blockquote{border-left:3px solid var(--color-primary);background:var(--color-surface-container);color:var(--color-on-surface-variant);border-radius:0 8px 8px 0;margin:.75em 0;padding:.5em 1em}.m3-markdown[data-v-23db2c2c] code{background:var(--color-surface-container-highest);color:var(--color-primary);border-radius:4px;padding:.15em .4em;font-family:Roboto Mono,Fira Code,Consolas,monospace;font-size:.875em}.m3-markdown[data-v-23db2c2c] pre{background:var(--color-surface-container-highest);border:1px solid var(--color-outline-variant);border-radius:12px;margin:.75em 0;padding:1em;overflow-x:auto}.m3-markdown[data-v-23db2c2c] pre code{color:var(--color-on-surface);background:0 0;padding:0;font-size:.8125rem;line-height:1.6}.m3-markdown[data-v-23db2c2c] .hljs-keyword,.m3-markdown[data-v-23db2c2c] .hljs-selector-tag,.m3-markdown[data-v-23db2c2c] .hljs-built_in,.m3-markdown[data-v-23db2c2c] .hljs-tag .hljs-keyword{color:var(--color-primary)}.m3-markdown[data-v-23db2c2c] .hljs-string,.m3-markdown[data-v-23db2c2c] .hljs-regexp,.m3-markdown[data-v-23db2c2c] .hljs-template-variable{color:var(--color-tertiary)}.m3-markdown[data-v-23db2c2c] .hljs-number,.m3-markdown[data-v-23db2c2c] .hljs-literal{color:var(--color-error)}.m3-markdown[data-v-23db2c2c] .hljs-title.function_,.m3-markdown[data-v-23db2c2c] .hljs-title.function_>.hljs-keyword{color:var(--color-secondary);font-weight:500}.m3-markdown[data-v-23db2c2c] .hljs-type,.m3-markdown[data-v-23db2c2c] .hljs-title.class_{color:var(--color-primary);font-style:italic}.m3-markdown[data-v-23db2c2c] .hljs-comment,.m3-markdown[data-v-23db2c2c] .hljs-quote{color:var(--color-outline);font-style:italic}.m3-markdown[data-v-23db2c2c] .hljs-attr,.m3-markdown[data-v-23db2c2c] .hljs-attribute{color:var(--color-tertiary)}.m3-markdown[data-v-23db2c2c] .hljs-tag{color:var(--color-on-surface-variant)}.m3-markdown[data-v-23db2c2c] .hljs-name{color:var(--color-primary)}.m3-markdown[data-v-23db2c2c] .hljs-punctuation,.m3-markdown[data-v-23db2c2c] .hljs-operator,.m3-markdown[data-v-23db2c2c] .hljs-meta,.m3-markdown[data-v-23db2c2c] .hljs-meta .hljs-keyword{color:var(--color-on-surface-variant)}.m3-markdown[data-v-23db2c2c] .hljs-variable,.m3-markdown[data-v-23db2c2c] .hljs-property,.m3-markdown[data-v-23db2c2c] .hljs-symbol,.m3-markdown[data-v-23db2c2c] .hljs-params{color:var(--color-on-surface)}.m3-markdown[data-v-23db2c2c] .m3-code-block{position:relative}.m3-markdown[data-v-23db2c2c] .m3-code-copy{background:var(--color-surface-container);width:28px;height:28px;color:var(--color-on-surface-variant);cursor:pointer;opacity:0;z-index:1;border:none;border-radius:6px;justify-content:center;align-items:center;transition:opacity .15s;display:flex;position:absolute;top:8px;right:8px}.m3-markdown[data-v-23db2c2c] .m3-code-block:hover .m3-code-copy{opacity:1}.m3-markdown[data-v-23db2c2c] .m3-code-copy:hover{background:var(--color-surface-container-high);color:var(--color-on-surface)}.m3-markdown[data-v-23db2c2c] .m3-code-line{display:block}.m3-markdown[data-v-23db2c2c] .m3-line-hl{background:color-mix(in srgb, var(--color-primary) 8%, transparent);border-left:2px solid color-mix(in srgb, var(--color-primary) 40%, transparent);margin:0 -1em;padding:0 1em 0 calc(1em - 2px)}.m3-markdown[data-v-23db2c2c] hr{border:none;border-top:1px solid var(--color-outline-variant);margin:1.5em 0}.m3-markdown[data-v-23db2c2c] table{border-collapse:collapse;width:100%;margin:.75em 0}.m3-markdown[data-v-23db2c2c] th{background:var(--color-surface-container);text-align:left;border-bottom:2px solid var(--color-outline-variant);font-weight:600;font-size:var(--text-label-large);color:var(--color-on-surface);padding:.5em .75em}.m3-markdown[data-v-23db2c2c] td{border-bottom:1px solid var(--color-outline-variant);padding:.5em .75em}.m3-markdown[data-v-23db2c2c] img{border-radius:12px;max-width:100%;height:auto;margin:.5em 0}.rte-content[data-v-e6829e5c] .tiptap{min-height:inherit;outline:none}.rte-content[data-v-e6829e5c] .tiptap p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;color:var(--color-on-surface-variant);opacity:.5;pointer-events:none;height:0}.rte-content[data-v-e6829e5c] h1{font-size:var(--text-headline-large);line-height:var(--text-headline-large--line-height);margin:.75em 0 .25em;font-weight:600}.rte-content[data-v-e6829e5c] h2{font-size:var(--text-headline-medium);line-height:var(--text-headline-medium--line-height);margin:.75em 0 .25em;font-weight:600}.rte-content[data-v-e6829e5c] h3{font-size:var(--text-headline-small);line-height:var(--text-headline-small--line-height);margin:.75em 0 .25em;font-weight:600}.rte-content[data-v-e6829e5c] p{margin:.5em 0}.rte-content[data-v-e6829e5c] ul{margin:.5em 0;padding-left:1.5em;list-style-type:disc}.rte-content[data-v-e6829e5c] ol{margin:.5em 0;padding-left:1.5em;list-style-type:decimal}.rte-content[data-v-e6829e5c] blockquote{border-left:3px solid var(--color-primary);color:var(--color-on-surface-variant);margin:.5em 0;padding-left:1em}.rte-content[data-v-e6829e5c] code{background:var(--color-surface-container-highest);border-radius:4px;padding:.15em .4em;font-size:.875em}.rte-content[data-v-e6829e5c] pre{background:var(--color-surface-container-highest);border-radius:8px;margin:.5em 0;padding:1em;overflow-x:auto}.rte-content[data-v-e6829e5c] pre code{background:0 0;padding:0}.rte-content[data-v-e6829e5c] a{color:var(--color-primary);text-decoration:underline}.rte-content[data-v-e6829e5c] mark{background:var(--color-tertiary-container);color:var(--color-on-tertiary-container);border-radius:2px;padding:.1em .2em}.rte-content[data-v-e6829e5c] img{border-radius:8px;max-width:100%;height:auto;margin:.5em 0}
 /*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3ui-vue/m3ui-vue",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "Material 3 component library for Vue 3 + Tailwind CSS v4",
   "type": "module",
   "license": "MIT",

package/src/__tests__/useDebounce.test.ts

@@ -0,0 +1,75 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { defineComponent, h } from 'vue'
+import { useDebounce } from '../composables/useDebounce'
+
+function withSetup<T>(fn: () => T): { result: T; unmount: () => void } {
+  let result!: T
+  const wrapper = mount(defineComponent({
+    setup() {
+      result = fn()
+      return () => h('div')
+    },
+  }))
+  return { result, unmount: () => wrapper.unmount() }
+}
+
+describe('useDebounce', () => {
+  it('delays execution by the given ms', () => {
+    vi.useFakeTimers()
+    const spy = vi.fn()
+    const { result } = withSetup(() => useDebounce(spy, 300))
+
+    result.debounced('a')
+    expect(spy).not.toHaveBeenCalled()
+
+    vi.advanceTimersByTime(200)
+    expect(spy).not.toHaveBeenCalled()
+
+    vi.advanceTimersByTime(100)
+    expect(spy).toHaveBeenCalledWith('a')
+    vi.useRealTimers()
+  })
+
+  it('resets the timer on subsequent calls', () => {
+    vi.useFakeTimers()
+    const spy = vi.fn()
+    const { result } = withSetup(() => useDebounce(spy, 300))
+
+    result.debounced('a')
+    vi.advanceTimersByTime(200)
+    result.debounced('b')
+    vi.advanceTimersByTime(200)
+    expect(spy).not.toHaveBeenCalled()
+
+    vi.advanceTimersByTime(100)
+    expect(spy).toHaveBeenCalledTimes(1)
+    expect(spy).toHaveBeenCalledWith('b')
+    vi.useRealTimers()
+  })
+
+  it('cancel prevents pending execution', () => {
+    vi.useFakeTimers()
+    const spy = vi.fn()
+    const { result } = withSetup(() => useDebounce(spy, 300))
+
+    result.debounced('a')
+    vi.advanceTimersByTime(100)
+    result.cancel()
+    vi.advanceTimersByTime(300)
+    expect(spy).not.toHaveBeenCalled()
+    vi.useRealTimers()
+  })
+
+  it('cleans up on unmount', () => {
+    vi.useFakeTimers()
+    const spy = vi.fn()
+    const { result, unmount } = withSetup(() => useDebounce(spy, 300))
+
+    result.debounced('a')
+    unmount()
+    vi.advanceTimersByTime(300)
+    expect(spy).not.toHaveBeenCalled()
+    vi.useRealTimers()
+  })
+})

package/src/__tests__/useLocale.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, ref, nextTick } from 'vue'
 import { useLocale, defaultLocale, M3_LOCALE_KEY } from '../composables/useLocale'
 
 function withSetup<T>(fn: () => T, provide?: Record<symbol, unknown>): T {
@@ -40,6 +40,22 @@ describe('useLocale', () => {
     expect(locale.next).toBe('Next')
   })
 
+  it('reacts to ref-based locale changes', async () => {
+    const localeRef = ref<Partial<typeof defaultLocale>>({ search: 'Buscar...' })
+    const locale = withSetup(
+      () => useLocale(),
+      { [M3_LOCALE_KEY as symbol]: localeRef },
+    )
+    expect(locale.search).toBe('Buscar...')
+    expect(locale.close).toBe('Close')
+
+    localeRef.value = { search: 'Rechercher...', close: 'Fermer' }
+    await nextTick()
+    expect(locale.search).toBe('Rechercher...')
+    expect(locale.close).toBe('Fermer')
+    expect(locale.cancel).toBe('Cancel')
+  })
+
   it('defaultLocale has all keys defined', () => {
     const keys = Object.keys(defaultLocale)
     expect(keys.length).toBeGreaterThan(50)

package/src/components/MAutocomplete.vue

@@ -4,6 +4,7 @@ import MIcon from './MIcon.vue'
 import MIconButton from './MIconButton.vue'
 import { useFieldBg } from '../composables/useFieldBg'
 import { useLocale } from '../composables/useLocale'
+import { useDebounce } from '../composables/useDebounce'
 import type { SelectOption } from './MSelect.vue'
 
 const props = withDefaults(
@@ -22,6 +23,7 @@ const props = withDefaults(
     clearable?: boolean
     fieldBg?: string
     noResultsText?: string
+    debounce?: number
   }>(),
   {
     modelValue: undefined,
@@ -30,10 +32,11 @@ const props = withDefaults(
     disabled: false,
     required: false,
     clearable: false,
+    debounce: 0,
   },
 )
 
-const emit = defineEmits<{ 'update:modelValue': [unknown] }>()
+const emit = defineEmits<{ 'update:modelValue': [unknown]; debounced: [string] }>()
 
 const locale = useLocale()
 const id = useId()
@@ -47,6 +50,23 @@ const inputEl = ref<HTMLInputElement | null>(null)
 const { resolvedFieldBg } = useFieldBg(fieldEl, () => props.fieldBg)
 const dropdownEl = ref<HTMLElement | null>(null)
 const dropPos = ref({ top: '0px', left: '0px', width: '0px' })
+const filterQuery = ref('')
+const modalFilterQuery = ref('')
+
+const { debounced: setFilterQuery } = useDebounce((v: string) => { filterQuery.value = v; emit('debounced', v) }, props.debounce)
+const { debounced: setModalFilterQuery } = useDebounce((v: string) => { modalFilterQuery.value = v; emit('debounced', v) }, props.debounce)
+
+function updateSearch(v: string) {
+  search.value = v
+  if (props.debounce > 0) setFilterQuery(v)
+  else filterQuery.value = v
+}
+
+function updateModalSearch(v: string) {
+  modalSearch.value = v
+  if (props.debounce > 0) setModalFilterQuery(v)
+  else modalFilterQuery.value = v
+}
 
 function eq(a: unknown, b: unknown): boolean {
   if (a === b) return true
@@ -60,8 +80,8 @@ const selectedLabel = computed(
 )
 
 const filteredOptions = computed(() => {
-  if (!search.value) return props.options
-  const q = search.value.toLowerCase()
+  if (!filterQuery.value) return props.options
+  const q = filterQuery.value.toLowerCase()
   return props.options.filter((o) => o.label.toLowerCase().includes(q))
 })
 
@@ -81,8 +101,8 @@ function computeDropPos() {
 }
 
 const modalFilteredOptions = computed(() => {
-  if (!modalSearch.value) return props.options
-  const q = modalSearch.value.toLowerCase()
+  if (!modalFilterQuery.value) return props.options
+  const q = modalFilterQuery.value.toLowerCase()
   return props.options.filter((o) => o.label.toLowerCase().includes(q))
 })
 
@@ -103,6 +123,8 @@ function closeDropdown() {
   modalOpen.value = false
   search.value = ''
   modalSearch.value = ''
+  filterQuery.value = ''
+  modalFilterQuery.value = ''
   highlightIndex.value = -1
 }
 
@@ -130,7 +152,7 @@ function onInputBlur(e: FocusEvent) {
 }
 
 function onInput(e: Event) {
-  search.value = (e.target as HTMLInputElement).value
+  updateSearch((e.target as HTMLInputElement).value)
   if (!open.value) openDropdown()
   highlightIndex.value = -1
   nextTick(computeDropPos)
@@ -404,10 +426,11 @@ const labelClasses = computed(() => {
             <div class="flex items-center gap-2 rounded-full bg-surface-container-highest px-3 py-2">
               <MIcon name="search" :size="16" class="shrink-0 text-on-surface-variant" />
               <input
-                v-model="modalSearch"
+                :value="modalSearch"
                 type="text"
                 :placeholder="locale.search"
                 class="w-full bg-transparent text-body-medium text-on-surface outline-none placeholder:text-on-surface-variant"
+                @input="updateModalSearch(($event.target as HTMLInputElement).value)"
               />
             </div>
           </div>

package/src/components/MMaskField.vue

@@ -2,6 +2,7 @@
 import { computed, ref, useId, watch } from 'vue'
 import MIcon from './MIcon.vue'
 import { useFieldBg } from '../composables/useFieldBg'
+import { useDebounce } from '../composables/useDebounce'
 
 export type MaskPreset = 'credit-card' | 'phone' | 'date' | 'time' | 'cpf' | 'cnpj' | 'zip'
 
@@ -28,14 +29,16 @@ const props = withDefaults(
     leadingIcon?: string
     clearable?: boolean
     fieldBg?: string
+    debounce?: number
   }>(),
   {
     variant: 'filled',
     clearable: false,
+    debounce: 0,
   },
 )
 
-const emit = defineEmits<{ 'update:modelValue': [string] }>()
+const emit = defineEmits<{ 'update:modelValue': [string]; debounced: [string] }>()
 
 const id = useId()
 const fieldBgEl = ref<HTMLElement | null>(null)
@@ -44,6 +47,8 @@ const inputEl = ref<HTMLInputElement | null>(null)
 
 const resolvedMask = computed(() => PRESETS[props.mask as MaskPreset] ?? props.mask)
 
+const { debounced: emitDebounced, cancel: cancelDebounce } = useDebounce((v: string) => emit('debounced', v), props.debounce)
+
 const showClear = computed(() => props.clearable && props.modelValue.length > 0 && !props.disabled)
 
 function rawToMasked(raw: string, mask: string): string {
@@ -74,6 +79,7 @@ function onInput(e: Event) {
   const raw = input.value.replace(/[^\d]/g, '')
   const masked = rawToMasked(raw, resolvedMask.value)
   emit('update:modelValue', masked)
+  if (props.debounce > 0) emitDebounced(masked)
 
   requestAnimationFrame(() => {
     if (inputEl.value) inputEl.value.value = masked
@@ -88,6 +94,7 @@ function onKeydown(e: KeyboardEvent) {
       const newRaw = raw.slice(0, -1)
       const masked = rawToMasked(newRaw, resolvedMask.value)
       emit('update:modelValue', masked)
+      if (props.debounce > 0) emitDebounced(masked)
       requestAnimationFrame(() => {
         if (inputEl.value) inputEl.value.value = masked
       })
@@ -185,7 +192,7 @@ const labelClasses = computed(() => {
         v-if="showClear"
         type="button"
         class="absolute right-3 top-1/2 -translate-y-1/2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-on-surface-variant transition-colors hover:bg-on-surface/8 hover:text-on-surface"
-        @click="emit('update:modelValue', '')"
+        @click="cancelDebounce(); emit('update:modelValue', '')"
       >
         <MIcon name="close" :size="18" />
       </button>

package/src/components/MMultiAutocomplete.vue

@@ -5,6 +5,7 @@ import MIconButton from './MIconButton.vue'
 import MCheckbox from './MCheckbox.vue'
 import { useFieldBg } from '../composables/useFieldBg'
 import { useLocale } from '../composables/useLocale'
+import { useDebounce } from '../composables/useDebounce'
 import type { MultiSelectOption } from './MMultiSelect.vue'
 
 const props = withDefaults(
@@ -25,6 +26,7 @@ const props = withDefaults(
     maxChips?: number
     noResultsText?: string
     hideSelected?: boolean
+    debounce?: number
   }>(),
   {
     modelValue: () => [],
@@ -35,10 +37,11 @@ const props = withDefaults(
     clearable: false,
     maxChips: 3,
     hideSelected: false,
+    debounce: 0,
   },
 )
 
-const emit = defineEmits<{ 'update:modelValue': [unknown[]] }>()
+const emit = defineEmits<{ 'update:modelValue': [unknown[]]; debounced: [string] }>()
 
 const locale = useLocale()
 const id = useId()
@@ -52,6 +55,23 @@ const inputEl = ref<HTMLInputElement | null>(null)
 const { resolvedFieldBg } = useFieldBg(fieldEl, () => props.fieldBg)
 const dropdownEl = ref<HTMLElement | null>(null)
 const dropPos = ref({ top: '0px', left: '0px', width: '0px' })
+const filterQuery = ref('')
+const modalFilterQuery = ref('')
+
+const { debounced: setFilterQuery } = useDebounce((v: string) => { filterQuery.value = v; emit('debounced', v) }, props.debounce)
+const { debounced: setModalFilterQuery } = useDebounce((v: string) => { modalFilterQuery.value = v; emit('debounced', v) }, props.debounce)
+
+function updateSearch(v: string) {
+  search.value = v
+  if (props.debounce > 0) setFilterQuery(v)
+  else filterQuery.value = v
+}
+
+function updateModalSearch(v: string) {
+  modalSearch.value = v
+  if (props.debounce > 0) setModalFilterQuery(v)
+  else modalFilterQuery.value = v
+}
 
 function eq(a: unknown, b: unknown): boolean {
   if (a === b) return true
@@ -70,8 +90,8 @@ const filteredOptions = computed(() => {
   if (props.hideSelected) {
     opts = opts.filter((o) => !includes(props.modelValue, o.value))
   }
-  if (!search.value) return opts
-  const q = search.value.toLowerCase()
+  if (!filterQuery.value) return opts
+  const q = filterQuery.value.toLowerCase()
   return opts.filter((o) => o.label.toLowerCase().includes(q))
 })
 
@@ -136,8 +156,8 @@ const modalFilteredOptions = computed(() => {
   if (props.hideSelected) {
     opts = opts.filter((o) => !includes(props.modelValue, o.value))
   }
-  if (!modalSearch.value) return opts
-  const q = modalSearch.value.toLowerCase()
+  if (!modalFilterQuery.value) return opts
+  const q = modalFilterQuery.value.toLowerCase()
   return opts.filter((o) => o.label.toLowerCase().includes(q))
 })
 
@@ -158,6 +178,8 @@ function closeDropdown() {
   modalOpen.value = false
   search.value = ''
   modalSearch.value = ''
+  filterQuery.value = ''
+  modalFilterQuery.value = ''
   highlightIndex.value = -1
 }
 
@@ -177,7 +199,7 @@ function onInputBlur(e: FocusEvent) {
 }
 
 function onInput(e: Event) {
-  search.value = (e.target as HTMLInputElement).value
+  updateSearch((e.target as HTMLInputElement).value)
   if (!open.value) openDropdown()
   highlightIndex.value = -1
   nextTick(computeDropPos)
@@ -484,10 +506,11 @@ const labelClasses = computed(() => {
             <div class="flex items-center gap-2 rounded-full bg-surface-container-highest px-3 py-2">
               <MIcon name="search" :size="16" class="shrink-0 text-on-surface-variant" />
               <input
-                v-model="modalSearch"
+                :value="modalSearch"
                 type="text"
                 :placeholder="locale.search"
                 class="w-full bg-transparent text-body-medium text-on-surface outline-none placeholder:text-on-surface-variant"
+                @input="updateModalSearch(($event.target as HTMLInputElement).value)"
               />
             </div>
           </div>

package/src/components/MNumberField.vue

@@ -3,6 +3,7 @@ import { computed, ref, useId } from 'vue'
 import MIcon from './MIcon.vue'
 import MIconButton from './MIconButton.vue'
 import { useFieldBg } from '../composables/useFieldBg'
+import { useDebounce } from '../composables/useDebounce'
 
 const props = withDefaults(
   defineProps<{
@@ -19,21 +20,25 @@ const props = withDefaults(
     leadingIcon?: string
     stepper?: boolean
     fieldBg?: string
+    debounce?: number
   }>(),
   {
     variant: 'filled',
     step: 1,
     stepper: true,
     modelValue: null,
+    debounce: 0,
   },
 )
 
-const emit = defineEmits<{ 'update:modelValue': [number | null] }>()
+const emit = defineEmits<{ 'update:modelValue': [number | null]; debounced: [number | null] }>()
 
 const id = useId()
 const fieldBgEl = ref<HTMLElement | null>(null)
 const { resolvedFieldBg } = useFieldBg(fieldBgEl, () => props.fieldBg)
 
+const { debounced: emitDebounced } = useDebounce((v: number | null) => emit('debounced', v), props.debounce)
+
 const hasValue = computed(() => props.modelValue !== null && props.modelValue !== undefined)
 
 function clamp(val: number): number {
@@ -44,21 +49,31 @@ function clamp(val: number): number {
 
 function onInput(e: Event) {
   const raw = (e.target as HTMLInputElement).value
-  if (raw === '') { emit('update:modelValue', null); return }
+  if (raw === '') {
+    emit('update:modelValue', null)
+    if (props.debounce > 0) emitDebounced(null)
+    return
+  }
   const n = Number(raw)
-  if (!Number.isNaN(n)) emit('update:modelValue', clamp(n))
+  if (!Number.isNaN(n)) {
+    const v = clamp(n)
+    emit('update:modelValue', v)
+    if (props.debounce > 0) emitDebounced(v)
+  }
 }
 
 function increment() {
   if (props.disabled) return
-  const current = props.modelValue ?? 0
-  emit('update:modelValue', clamp(current + props.step))
+  const v = clamp((props.modelValue ?? 0) + props.step)
+  emit('update:modelValue', v)
+  if (props.debounce > 0) emitDebounced(v)
 }
 
 function decrement() {
   if (props.disabled) return
-  const current = props.modelValue ?? 0
-  emit('update:modelValue', clamp(current - props.step))
+  const v = clamp((props.modelValue ?? 0) - props.step)
+  emit('update:modelValue', v)
+  if (props.debounce > 0) emitDebounced(v)
 }
 
 function onKeydown(e: KeyboardEvent) {

package/src/components/MSlider.vue

@@ -170,7 +170,7 @@ const stopPositions = computed(() => {
 
 const r = computed(() => s.value.radius)
 const nd = computed(() => !dragging.value)
-const tr = computed(() => nd.value ? '75ms ease' : 'none')
+const tr = computed(() => nd.value ? '75ms ease' : '0s')
 
 function thumbPos(pct: number) {
   const tw = isVertical.value ? s.value.thumbH : s.value.thumbW