@m3ui-vue/m3ui-vue 0.1.11 → 0.2.0

package/dist/rich-text-editor.js

@@ -1,4 +1,4 @@
-import { i as e, n as t, o as n, r, t as i } from "./MMenuItem-_n5OG5MT.js";
+import { i as e, n as t, o as n, r, t as i } from "./MMenuItem-CIDblhtb.js";
 import { t as a } from "./MIcon-CaEooCmZ.js";
 import { t as o } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { Fragment as s, computed as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, normalizeStyle as g, onBeforeUnmount as _, onMounted as v, openBlock as y, ref as b, renderList as x, shallowRef as S, toDisplayString as C, watch as w, withCtx as T, withKeys as E } 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-e7dfca29],.m3-dialog-leave-active[data-v-e7dfca29]{transition:opacity .15s}.m3-dialog-enter-from[data-v-e7dfca29],.m3-dialog-leave-to[data-v-e7dfca29]{opacity:0}.m3-dialog-enter-active .dialog-box[data-v-e7dfca29],.m3-dialog-leave-active .dialog-box[data-v-e7dfca29]{transition:transform .15s}.m3-dialog-enter-from .dialog-box[data-v-e7dfca29],.m3-dialog-leave-to .dialog-box[data-v-e7dfca29]{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}.hue-slider[data-v-872ab758]{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.hue-slider[data-v-872ab758]::-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-872ab758]::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0006}.m3-cmd-enter-active[data-v-da578f14],.m3-cmd-leave-active[data-v-da578f14]{transition:opacity .15s}.m3-cmd-enter-from[data-v-da578f14],.m3-cmd-leave-to[data-v-da578f14]{opacity:0}.m3-cmd-enter-active .cmd-box[data-v-da578f14],.m3-cmd-leave-active .cmd-box[data-v-da578f14]{transition:transform .15s}.m3-cmd-enter-from .cmd-box[data-v-da578f14],.m3-cmd-leave-to .cmd-box[data-v-da578f14]{transform:scale(.95)translateY(-10px)}.dt-expand-grid[data-v-fcd73278]{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-fcd73278]{grid-template-rows:1fr}.dt-expand-body[data-v-fcd73278]{min-height:0;overflow:hidden}.expand-grid[data-v-89e4475b]{grid-template-rows:1fr;display:grid}.expand-body[data-v-89e4475b]{min-height:0;overflow:hidden}.expand-enter-active[data-v-89e4475b]{transition:grid-template-rows .28s cubic-bezier(.2,0,0,1)}.expand-enter-active>.expand-body[data-v-89e4475b]{transition:opacity .22s}.expand-enter-from[data-v-89e4475b]{grid-template-rows:0fr}.expand-enter-from>.expand-body[data-v-89e4475b]{opacity:0}.expand-leave-active[data-v-89e4475b]{transition:grid-template-rows .22s cubic-bezier(.4,0,1,1)}.expand-leave-active>.expand-body[data-v-89e4475b]{transition:opacity .15s}.expand-leave-to[data-v-89e4475b]{grid-template-rows:0fr}.expand-leave-to>.expand-body[data-v-89e4475b]{opacity:0}.m3-file-enter-active[data-v-34a862f0],.m3-file-leave-active[data-v-34a862f0]{transition:all .2s}.m3-file-enter-from[data-v-34a862f0],.m3-file-leave-to[data-v-34a862f0]{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}.nd-scrim[data-v-ae3b65c3]{transition:opacity .28s}.nd-enter-from .nd-scrim[data-v-ae3b65c3],.nd-leave-to .nd-scrim[data-v-ae3b65c3]{opacity:0}.nd-panel[data-v-ae3b65c3]{transition:transform .3s cubic-bezier(.2,0,0,1)}.nd-enter-from .nd-panel[data-v-ae3b65c3],.nd-leave-to .nd-panel[data-v-ae3b65c3]{transform:translate(-100%)}.nd-section-grid[data-v-ae3b65c3]{grid-template-rows:1fr;display:grid}.nd-section-body[data-v-ae3b65c3]{min-height:0;overflow:hidden}.nd-section-enter-active[data-v-ae3b65c3]{transition:grid-template-rows .35s cubic-bezier(.2,0,0,1)}.nd-section-enter-active>.nd-section-body[data-v-ae3b65c3]{transition:opacity .25s cubic-bezier(.2,0,0,1) 80ms}.nd-section-enter-from[data-v-ae3b65c3]{grid-template-rows:0fr}.nd-section-enter-from>.nd-section-body[data-v-ae3b65c3]{opacity:0}.nd-section-leave-active[data-v-ae3b65c3]{transition:grid-template-rows .28s cubic-bezier(.4,0,1,1)}.nd-section-leave-active>.nd-section-body[data-v-ae3b65c3]{transition:opacity .15s cubic-bezier(.4,0,1,1)}.nd-section-leave-to[data-v-ae3b65c3]{grid-template-rows:0fr}.nd-section-leave-to>.nd-section-body[data-v-ae3b65c3]{opacity:0}.nd-inline[data-v-ae3b65c3]{transition:width .3s cubic-bezier(.2,0,0,1);overflow:hidden}.nd-inline[data-v-ae3b65c3]>*{min-width:18rem}.nd-inline.nd-collapsed[data-v-ae3b65c3]>*{min-width:0}.nd-label[data-v-ae3b65c3]{transition:opacity .2s cubic-bezier(.2,0,0,1) 80ms}.nd-inline.nd-collapsed .nd-label[data-v-ae3b65c3]{opacity:0;transition:opacity .1s cubic-bezier(.2,0,0,1)}.nd-inline .nd-collapse-h[data-v-ae3b65c3]{max-height:80px;transition:max-height .3s cubic-bezier(.2,0,0,1)}.nd-inline.nd-collapsed .nd-collapse-h[data-v-ae3b65c3]{max-height:0}.nd-inline .nd-section-body[data-v-ae3b65c3]>*{transition:padding .3s cubic-bezier(.2,0,0,1)}@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)}.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}.toast-row[data-v-746fa345]{grid-template-rows:1fr;padding-bottom:8px;display:grid}.toast-row>.toast-inner[data-v-746fa345]{min-height:0}.m3-toast-bot-enter-active[data-v-746fa345]{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-746fa345]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-bot-enter-from[data-v-746fa345]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-enter-from>.toast-inner[data-v-746fa345]{opacity:0;transform:translateY(20px)scale(.94)}.m3-toast-bot-leave-active[data-v-746fa345]{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-746fa345]{transition:opacity .18s,transform .18s}.m3-toast-bot-leave-to[data-v-746fa345]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-leave-to>.toast-inner[data-v-746fa345]{opacity:0;transform:scale(.92)}.m3-toast-top-enter-active[data-v-746fa345]{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-746fa345]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-top-enter-from[data-v-746fa345]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-enter-from>.toast-inner[data-v-746fa345]{opacity:0;transform:translateY(-20px)scale(.94)}.m3-toast-top-leave-active[data-v-746fa345]{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-746fa345]{transition:opacity .18s,transform .18s}.m3-toast-top-leave-to[data-v-746fa345]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-leave-to>.toast-inner[data-v-746fa345]{opacity:0;transform:scale(.92)}@keyframes m3-toast-progress-746fa345{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.m3-spot-enter-active[data-v-51b103ff],.m3-spot-leave-active[data-v-51b103ff]{transition:opacity .15s}.m3-spot-enter-from[data-v-51b103ff],.m3-spot-leave-to[data-v-51b103ff]{opacity:0}.m3-spot-enter-active .spot-box[data-v-51b103ff],.m3-spot-leave-active .spot-box[data-v-51b103ff]{transition:transform .15s,opacity .15s}.m3-spot-enter-from .spot-box[data-v-51b103ff]{opacity:0;transform:scale(.96)translateY(-8px)}.m3-spot-leave-to .spot-box[data-v-51b103ff]{opacity:0;transform:scale(.98)}.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-c59a60e3] .tiptap{min-height:inherit;outline:none}.rte-content[data-v-c59a60e3] .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-c59a60e3] 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-c59a60e3] 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-c59a60e3] 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-c59a60e3] p{margin:.5em 0}.rte-content[data-v-c59a60e3] ul{margin:.5em 0;padding-left:1.5em;list-style-type:disc}.rte-content[data-v-c59a60e3] ol{margin:.5em 0;padding-left:1.5em;list-style-type:decimal}.rte-content[data-v-c59a60e3] blockquote{border-left:3px solid var(--color-primary);color:var(--color-on-surface-variant);margin:.5em 0;padding-left:1em}.rte-content[data-v-c59a60e3] code{background:var(--color-surface-container-highest);border-radius:4px;padding:.15em .4em;font-size:.875em}.rte-content[data-v-c59a60e3] pre{background:var(--color-surface-container-highest);border-radius:8px;margin:.5em 0;padding:1em;overflow-x:auto}.rte-content[data-v-c59a60e3] pre code{background:0 0;padding:0}.rte-content[data-v-c59a60e3] a{color:var(--color-primary);text-decoration:underline}.rte-content[data-v-c59a60e3] mark{background:var(--color-tertiary-container);color:var(--color-on-tertiary-container);border-radius:2px;padding:.1em .2em}.rte-content[data-v-c59a60e3] 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-e7dfca29],.m3-dialog-leave-active[data-v-e7dfca29]{transition:opacity .15s}.m3-dialog-enter-from[data-v-e7dfca29],.m3-dialog-leave-to[data-v-e7dfca29]{opacity:0}.m3-dialog-enter-active .dialog-box[data-v-e7dfca29],.m3-dialog-leave-active .dialog-box[data-v-e7dfca29]{transition:transform .15s}.m3-dialog-enter-from .dialog-box[data-v-e7dfca29],.m3-dialog-leave-to .dialog-box[data-v-e7dfca29]{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}.m3-carousel-right-enter-active,.m3-carousel-right-leave-active,.m3-carousel-left-enter-active,.m3-carousel-left-leave-active{transition:transform .5s cubic-bezier(.2,0,0,1),opacity .5s cubic-bezier(.2,0,0,1)}.m3-carousel-right-enter-from{opacity:0;transform:translate(100%)}.m3-carousel-right-leave-to,.m3-carousel-left-enter-from{opacity:0;transform:translate(-100%)}.m3-carousel-left-leave-to{opacity:0;transform:translate(100%)}.hue-slider[data-v-872ab758]{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.hue-slider[data-v-872ab758]::-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-872ab758]::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0006}.m3-cmd-enter-active[data-v-da578f14],.m3-cmd-leave-active[data-v-da578f14]{transition:opacity .15s}.m3-cmd-enter-from[data-v-da578f14],.m3-cmd-leave-to[data-v-da578f14]{opacity:0}.m3-cmd-enter-active .cmd-box[data-v-da578f14],.m3-cmd-leave-active .cmd-box[data-v-da578f14]{transition:transform .15s}.m3-cmd-enter-from .cmd-box[data-v-da578f14],.m3-cmd-leave-to .cmd-box[data-v-da578f14]{transform:scale(.95)translateY(-10px)}.dt-expand-grid[data-v-891083a3]{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-891083a3]{grid-template-rows:1fr}.dt-expand-body[data-v-891083a3]{min-height:0;overflow:hidden}.expand-grid[data-v-89e4475b]{grid-template-rows:1fr;display:grid}.expand-body[data-v-89e4475b]{min-height:0;overflow:hidden}.expand-enter-active[data-v-89e4475b]{transition:grid-template-rows .28s cubic-bezier(.2,0,0,1)}.expand-enter-active>.expand-body[data-v-89e4475b]{transition:opacity .22s}.expand-enter-from[data-v-89e4475b]{grid-template-rows:0fr}.expand-enter-from>.expand-body[data-v-89e4475b]{opacity:0}.expand-leave-active[data-v-89e4475b]{transition:grid-template-rows .22s cubic-bezier(.4,0,1,1)}.expand-leave-active>.expand-body[data-v-89e4475b]{transition:opacity .15s}.expand-leave-to[data-v-89e4475b]{grid-template-rows:0fr}.expand-leave-to>.expand-body[data-v-89e4475b]{opacity:0}.m3-file-enter-active[data-v-34a862f0],.m3-file-leave-active[data-v-34a862f0]{transition:all .2s}.m3-file-enter-from[data-v-34a862f0],.m3-file-leave-to[data-v-34a862f0]{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}input[type=number][data-v-9068433a]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number][data-v-9068433a]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number][data-v-9068433a]{-moz-appearance:textfield}.nd-scrim[data-v-51e30965]{transition:opacity .28s}.nd-enter-from .nd-scrim[data-v-51e30965],.nd-leave-to .nd-scrim[data-v-51e30965]{opacity:0}.nd-panel[data-v-51e30965]{transition:transform .3s cubic-bezier(.2,0,0,1)}.nd-enter-from .nd-panel[data-v-51e30965],.nd-leave-to .nd-panel[data-v-51e30965]{transform:translate(-100%)}.nd-section-grid[data-v-51e30965]{grid-template-rows:1fr;display:grid}.nd-section-body[data-v-51e30965]{min-height:0;overflow:hidden}.nd-section-enter-active[data-v-51e30965]{transition:grid-template-rows .35s cubic-bezier(.2,0,0,1)}.nd-section-enter-active>.nd-section-body[data-v-51e30965]{transition:opacity .25s cubic-bezier(.2,0,0,1) 80ms}.nd-section-enter-from[data-v-51e30965]{grid-template-rows:0fr}.nd-section-enter-from>.nd-section-body[data-v-51e30965]{opacity:0}.nd-section-leave-active[data-v-51e30965]{transition:grid-template-rows .28s cubic-bezier(.4,0,1,1)}.nd-section-leave-active>.nd-section-body[data-v-51e30965]{transition:opacity .15s cubic-bezier(.4,0,1,1)}.nd-section-leave-to[data-v-51e30965]{grid-template-rows:0fr}.nd-section-leave-to>.nd-section-body[data-v-51e30965]{opacity:0}.nd-inline[data-v-51e30965]{transition:width .3s cubic-bezier(.2,0,0,1);overflow:hidden}.nd-inline[data-v-51e30965]>*{min-width:18rem}.nd-inline.nd-collapsed[data-v-51e30965]>*{min-width:0}.nd-label[data-v-51e30965]{transition:opacity .2s cubic-bezier(.2,0,0,1) 80ms}.nd-inline.nd-collapsed .nd-label[data-v-51e30965],.nd-inline.nd-collapsed[data-v-51e30965] .nd-label{opacity:0;transition:opacity .1s cubic-bezier(.2,0,0,1)}.nd-inline .nd-collapse-h[data-v-51e30965]{max-height:80px;transition:max-height .3s cubic-bezier(.2,0,0,1)}.nd-inline.nd-collapsed .nd-collapse-h[data-v-51e30965]{max-height:0}.nd-inline .nd-section-body[data-v-51e30965]>*,.nd-inline[data-v-51e30965] .nd-section-body>*{transition:padding .3s cubic-bezier(.2,0,0,1)}.nd-children-divider[data-v-51e30965]{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-51e30965]{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)}.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}.toast-row[data-v-746fa345]{grid-template-rows:1fr;padding-bottom:8px;display:grid}.toast-row>.toast-inner[data-v-746fa345]{min-height:0}.m3-toast-bot-enter-active[data-v-746fa345]{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-746fa345]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-bot-enter-from[data-v-746fa345]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-enter-from>.toast-inner[data-v-746fa345]{opacity:0;transform:translateY(20px)scale(.94)}.m3-toast-bot-leave-active[data-v-746fa345]{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-746fa345]{transition:opacity .18s,transform .18s}.m3-toast-bot-leave-to[data-v-746fa345]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-leave-to>.toast-inner[data-v-746fa345]{opacity:0;transform:scale(.92)}.m3-toast-top-enter-active[data-v-746fa345]{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-746fa345]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-top-enter-from[data-v-746fa345]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-enter-from>.toast-inner[data-v-746fa345]{opacity:0;transform:translateY(-20px)scale(.94)}.m3-toast-top-leave-active[data-v-746fa345]{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-746fa345]{transition:opacity .18s,transform .18s}.m3-toast-top-leave-to[data-v-746fa345]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-leave-to>.toast-inner[data-v-746fa345]{opacity:0;transform:scale(.92)}@keyframes m3-toast-progress-746fa345{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.m3-spot-enter-active[data-v-51b103ff],.m3-spot-leave-active[data-v-51b103ff]{transition:opacity .15s}.m3-spot-enter-from[data-v-51b103ff],.m3-spot-leave-to[data-v-51b103ff]{opacity:0}.m3-spot-enter-active .spot-box[data-v-51b103ff],.m3-spot-leave-active .spot-box[data-v-51b103ff]{transition:transform .15s,opacity .15s}.m3-spot-enter-from .spot-box[data-v-51b103ff]{opacity:0;transform:scale(.96)translateY(-8px)}.m3-spot-leave-to .spot-box[data-v-51b103ff]{opacity:0;transform:scale(.98)}.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-c59a60e3] .tiptap{min-height:inherit;outline:none}.rte-content[data-v-c59a60e3] .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-c59a60e3] 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-c59a60e3] 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-c59a60e3] 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-c59a60e3] p{margin:.5em 0}.rte-content[data-v-c59a60e3] ul{margin:.5em 0;padding-left:1.5em;list-style-type:disc}.rte-content[data-v-c59a60e3] ol{margin:.5em 0;padding-left:1.5em;list-style-type:decimal}.rte-content[data-v-c59a60e3] blockquote{border-left:3px solid var(--color-primary);color:var(--color-on-surface-variant);margin:.5em 0;padding-left:1em}.rte-content[data-v-c59a60e3] code{background:var(--color-surface-container-highest);border-radius:4px;padding:.15em .4em;font-size:.875em}.rte-content[data-v-c59a60e3] pre{background:var(--color-surface-container-highest);border-radius:8px;margin:.5em 0;padding:1em;overflow-x:auto}.rte-content[data-v-c59a60e3] pre code{background:0 0;padding:0}.rte-content[data-v-c59a60e3] a{color:var(--color-primary);text-decoration:underline}.rte-content[data-v-c59a60e3] mark{background:var(--color-tertiary-container);color:var(--color-on-tertiary-container);border-radius:2px;padding:.1em .2em}.rte-content[data-v-c59a60e3] 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.1.11",
+  "version": "0.2.0",
   "description": "Material 3 component library for Vue 3 + Tailwind CSS v4",
   "type": "module",
   "license": "MIT",

package/src/components/MCarousel.vue

@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import MIcon from './MIcon.vue'
+
+export interface CarouselItem {
+  src: string
+  alt?: string
+  title?: string
+  subtitle?: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    items: CarouselItem[]
+    autoplay?: boolean
+    interval?: number
+    showArrows?: boolean
+    showIndicators?: boolean
+    aspectRatio?: string
+    rounded?: boolean
+  }>(),
+  {
+    autoplay: false,
+    interval: 5000,
+    showArrows: true,
+    showIndicators: true,
+    aspectRatio: '16/9',
+    rounded: true,
+  },
+)
+
+const emit = defineEmits<{ change: [index: number] }>()
+
+const current = ref(0)
+const direction = ref<'left' | 'right'>('right')
+const transitioning = ref(false)
+let timer: ReturnType<typeof setInterval> | null = null
+let touchStartX = 0
+
+const total = computed(() => props.items.length)
+const currentItem = computed(() => props.items[current.value])
+
+function goTo(index: number) {
+  if (transitioning.value || index === current.value) return
+  direction.value = index > current.value ? 'right' : 'left'
+  transitioning.value = true
+  current.value = ((index % total.value) + total.value) % total.value
+  emit('change', current.value)
+}
+
+function next() {
+  goTo(current.value + 1)
+}
+
+function prev() {
+  goTo(current.value - 1)
+}
+
+function onTransitionEnd() {
+  transitioning.value = false
+}
+
+function startAutoplay() {
+  stopAutoplay()
+  if (props.autoplay && total.value > 1) {
+    timer = setInterval(next, props.interval)
+  }
+}
+
+function stopAutoplay() {
+  if (timer) { clearInterval(timer); timer = null }
+}
+
+function onTouchStart(e: TouchEvent) {
+  touchStartX = e.touches[0]!.clientX
+  stopAutoplay()
+}
+
+function onTouchEnd(e: TouchEvent) {
+  const dx = e.changedTouches[0]!.clientX - touchStartX
+  if (Math.abs(dx) > 50) {
+    dx < 0 ? next() : prev()
+  }
+  startAutoplay()
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'ArrowRight') next()
+  else if (e.key === 'ArrowLeft') prev()
+}
+
+watch(() => props.autoplay, startAutoplay)
+onMounted(startAutoplay)
+onBeforeUnmount(stopAutoplay)
+
+defineExpose({ next, prev, goTo })
+</script>
+
+<template>
+  <div
+    class="group relative overflow-hidden bg-surface-container-highest"
+    :class="rounded ? 'rounded-2xl' : ''"
+    :style="{ aspectRatio }"
+    tabindex="0"
+    @keydown="onKeydown"
+    @touchstart.passive="onTouchStart"
+    @touchend.passive="onTouchEnd"
+    @mouseenter="stopAutoplay"
+    @mouseleave="startAutoplay"
+  >
+    <!-- Slides -->
+    <TransitionGroup
+      :name="direction === 'right' ? 'm3-carousel-right' : 'm3-carousel-left'"
+      tag="div"
+      class="relative h-full w-full"
+      @after-enter="onTransitionEnd"
+      @after-leave="onTransitionEnd"
+    >
+      <div
+        v-for="(item, i) in items"
+        v-show="i === current"
+        :key="i"
+        class="absolute inset-0"
+      >
+        <img
+          :src="item.src"
+          :alt="item.alt ?? item.title ?? ''"
+          class="h-full w-full object-cover"
+        />
+
+        <!-- Overlay with text -->
+        <div
+          v-if="item.title || item.subtitle"
+          class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent px-6 pb-6 pt-16"
+        >
+          <h3 v-if="item.title" class="text-title-large font-medium text-white">{{ item.title }}</h3>
+          <p v-if="item.subtitle" class="mt-1 text-body-medium text-white/80">{{ item.subtitle }}</p>
+        </div>
+      </div>
+    </TransitionGroup>
+
+    <!-- Arrows -->
+    <template v-if="showArrows && total > 1">
+      <button
+        type="button"
+        class="absolute left-3 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-surface/80 text-on-surface shadow-elevation-1 opacity-0 backdrop-blur-sm transition-all duration-200 hover:bg-surface hover:shadow-elevation-2 group-hover:opacity-100"
+        @click="prev"
+      >
+        <MIcon name="chevron_left" :size="24" />
+      </button>
+      <button
+        type="button"
+        class="absolute right-3 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-surface/80 text-on-surface shadow-elevation-1 opacity-0 backdrop-blur-sm transition-all duration-200 hover:bg-surface hover:shadow-elevation-2 group-hover:opacity-100"
+        @click="next"
+      >
+        <MIcon name="chevron_right" :size="24" />
+      </button>
+    </template>
+
+    <!-- Indicators -->
+    <div
+      v-if="showIndicators && total > 1"
+      class="absolute inset-x-0 bottom-0 z-10 flex justify-center gap-2 pb-3"
+      :class="currentItem?.title || currentItem?.subtitle ? 'pb-20' : 'pb-3'"
+    >
+      <button
+        v-for="(_, i) in items"
+        :key="i"
+        type="button"
+        class="h-2 cursor-pointer rounded-full transition-all duration-300"
+        :class="i === current ? 'w-6 bg-white' : 'w-2 bg-white/50 hover:bg-white/70'"
+        @click="goTo(i)"
+      />
+    </div>
+  </div>
+</template>
+
+<style>
+.m3-carousel-right-enter-active,
+.m3-carousel-right-leave-active,
+.m3-carousel-left-enter-active,
+.m3-carousel-left-leave-active {
+  transition: transform 500ms cubic-bezier(0.2, 0, 0, 1), opacity 500ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.m3-carousel-right-enter-from {
+  transform: translateX(100%);
+  opacity: 0;
+}
+.m3-carousel-right-leave-to {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+
+.m3-carousel-left-enter-from {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+.m3-carousel-left-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
+</style>

package/src/components/MDataTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, useSlots, watch } from 'vue'
+import { computed, ref, useSlots, watch, onMounted } from 'vue'
 import MCheckbox from './MCheckbox.vue'
 import MIcon from './MIcon.vue'
 import MIconButton from './MIconButton.vue'
@@ -43,6 +43,9 @@ const props = withDefaults(defineProps<{
   groupBy?: string
   columnToggle?: boolean
   exportable?: boolean
+  serverSide?: boolean
+  total?: number
+  page?: number
 }>(), {
   loading: false,
   emptyText: 'Sin resultados',
@@ -57,11 +60,24 @@ const props = withDefaults(defineProps<{
   stickyHeader: false,
   columnToggle: false,
   exportable: false,
+  serverSide: false,
+  total: 0,
+  page: 1,
 })
 
+export interface DataTableFetchParams {
+  page: number
+  perPage: number
+  search: string
+  sortKey: string
+  sortDir: 'asc' | 'desc' | ''
+}
+
 const emit = defineEmits<{
   'update:modelValue': [Record<string, any>[]]
+  'update:page': [number]
   rowClick: [Record<string, any>]
+  fetch: [DataTableFetchParams]
 }>()
 
 const slots = useSlots()
@@ -87,7 +103,16 @@ function toggleSort(key: string) {
   else { sortKey.value = ''; sortDir.value = '' }
 }
 
+const currentPage = computed({
+  get: () => props.serverSide ? (props.page ?? 1) : internalPage.value,
+  set: (val: number) => {
+    if (props.serverSide) emit('update:page', val)
+    else internalPage.value = val
+  },
+})
+
 const processedRows = computed(() => {
+  if (props.serverSide) return props.rows
   let result = props.rows
   if (search.value.trim()) {
     const q = search.value.toLowerCase()
@@ -119,13 +144,43 @@ const groupedRows = computed(() => {
   return map
 })
 
-const totalCount = computed(() => processedRows.value.length)
+const totalCount = computed(() => props.serverSide ? (props.total ?? 0) : processedRows.value.length)
 const visibleRows = computed(() => {
-  const start = (internalPage.value - 1) * props.perPage
+  if (props.serverSide) return props.rows
+  const start = (currentPage.value - 1) * props.perPage
   return processedRows.value.slice(start, start + props.perPage)
 })
 
-watch([search, sortKey, sortDir], () => { internalPage.value = 1 })
+watch([search, sortKey, sortDir], () => {
+  if (!props.serverSide) internalPage.value = 1
+})
+
+function emitFetch() {
+  emit('fetch', {
+    page: currentPage.value,
+    perPage: props.perPage,
+    search: search.value,
+    sortKey: sortKey.value,
+    sortDir: sortDir.value,
+  })
+}
+
+const mounted = ref(false)
+onMounted(() => {
+  mounted.value = true
+  if (props.serverSide) emitFetch()
+})
+
+watch([search, sortKey, sortDir], () => {
+  if (!props.serverSide || !mounted.value) return
+  internalPage.value = 1
+  emitFetch()
+})
+
+watch(currentPage, () => {
+  if (!props.serverSide || !mounted.value) return
+  emitFetch()
+})
 
 const selected = computed({
   get: () => props.modelValue ?? [],
@@ -376,7 +431,7 @@ function colStyle(col: DataTableColumn) {
       <span class="text-label-small text-on-surface-variant">
         {{ totalCount }} registro{{ totalCount !== 1 ? 's' : '' }}
       </span>
-      <MPagination :page="internalPage" :per-page="perPage" :total="totalCount" @update:page="internalPage = $event" />
+      <MPagination :page="currentPage" :per-page="perPage" :total="totalCount" @update:page="currentPage = $event" />
     </div>
   </div>
 </template>

package/src/components/MMaskField.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { computed, ref, useId, watch } from 'vue'
+import MIcon from './MIcon.vue'
+import { useFieldBg } from '../composables/useFieldBg'
+
+export type MaskPreset = 'credit-card' | 'phone' | 'date' | 'time' | 'cpf' | 'cnpj' | 'zip'
+
+const PRESETS: Record<MaskPreset, string> = {
+  'credit-card': '#### #### #### ####',
+  phone: '(###) ###-####',
+  date: '##/##/####',
+  time: '##:##',
+  cpf: '###.###.###-##',
+  cnpj: '##.###.###/####-##',
+  zip: '#####-####',
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string
+    label: string
+    mask: string | MaskPreset
+    variant?: 'filled' | 'outlined'
+    error?: string
+    hint?: string
+    disabled?: boolean
+    required?: boolean
+    leadingIcon?: string
+    clearable?: boolean
+    fieldBg?: string
+  }>(),
+  {
+    variant: 'filled',
+    clearable: false,
+  },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [string] }>()
+
+const id = useId()
+const fieldBgEl = ref<HTMLElement | null>(null)
+const { resolvedFieldBg } = useFieldBg(fieldBgEl, () => props.fieldBg)
+const inputEl = ref<HTMLInputElement | null>(null)
+
+const resolvedMask = computed(() => PRESETS[props.mask as MaskPreset] ?? props.mask)
+
+const showClear = computed(() => props.clearable && props.modelValue.length > 0 && !props.disabled)
+
+function rawToMasked(raw: string, mask: string): string {
+  let result = ''
+  let ri = 0
+  for (let mi = 0; mi < mask.length && ri < raw.length; mi++) {
+    if (mask[mi] === '#') {
+      result += raw[ri++]
+    } else {
+      result += mask[mi]
+      if (raw[ri] === mask[mi]) ri++
+    }
+  }
+  return result
+}
+
+function maskedToRaw(masked: string): string {
+  const mask = resolvedMask.value
+  let raw = ''
+  for (let i = 0; i < masked.length && i < mask.length; i++) {
+    if (mask[i] === '#') raw += masked[i]
+  }
+  return raw
+}
+
+function onInput(e: Event) {
+  const input = e.target as HTMLInputElement
+  const raw = input.value.replace(/[^\d]/g, '')
+  const masked = rawToMasked(raw, resolvedMask.value)
+  emit('update:modelValue', masked)
+
+  requestAnimationFrame(() => {
+    if (inputEl.value) inputEl.value.value = masked
+  })
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Backspace' && props.modelValue.length > 0) {
+    const raw = maskedToRaw(props.modelValue)
+    if (raw.length > 0) {
+      e.preventDefault()
+      const newRaw = raw.slice(0, -1)
+      const masked = rawToMasked(newRaw, resolvedMask.value)
+      emit('update:modelValue', masked)
+      requestAnimationFrame(() => {
+        if (inputEl.value) inputEl.value.value = masked
+      })
+    }
+  }
+}
+
+const hasTrailing = computed(() => props.clearable)
+
+const inputClasses = computed(() => {
+  const pl = props.leadingIcon ? 'pl-12' : 'pl-4'
+  const pr = hasTrailing.value ? 'pr-12' : 'pr-4'
+  const base = [
+    'peer block w-full text-body-large text-on-surface outline-none placeholder:text-transparent',
+    'transition-[border-color,border-width] duration-150',
+    'disabled:cursor-not-allowed disabled:opacity-[0.38]',
+    'h-14', pl, pr,
+  ]
+  if (props.variant === 'outlined') {
+    return [...base,
+      'rounded-sm border bg-transparent py-4',
+      props.error
+        ? 'border-error focus:border-2 focus:border-error'
+        : 'border-outline hover:border-on-surface focus:border-2 focus:border-primary',
+    ].join(' ')
+  }
+  return [...base,
+    'rounded-t-sm bg-surface-container-highest border-b pt-6 pb-2',
+    props.error
+      ? 'border-error focus:border-b-2 focus:border-error'
+      : 'border-on-surface-variant hover:border-on-surface focus:border-b-2 focus:border-primary',
+  ].join(' ')
+})
+
+const labelClasses = computed(() => {
+  const left = props.leadingIcon
+    ? (props.variant === 'outlined' ? 'left-11' : 'left-12')
+    : (props.variant === 'outlined' ? 'left-3' : 'left-4')
+  const unfloatedTop = props.variant === 'filled' ? 'top-[53%]' : 'top-1/2'
+  const base = [
+    'pointer-events-none absolute truncate transition-all duration-200',
+    left, 'right-4', `${unfloatedTop} -translate-y-1/2 text-body-large`,
+  ]
+  if (props.variant === 'outlined') {
+    return [...base,
+      'peer-focus:-top-2.5 peer-focus:translate-y-0 peer-focus:text-label-small peer-focus:right-auto peer-focus:max-w-[calc(100%-1.5rem)] peer-focus:bg-[var(--field-bg)] peer-focus:px-1',
+      'peer-[&:not(:placeholder-shown)]:-top-2.5 peer-[&:not(:placeholder-shown)]:translate-y-0 peer-[&:not(:placeholder-shown)]:right-auto peer-[&:not(:placeholder-shown)]:max-w-[calc(100%-1.5rem)]',
+      'peer-[&:not(:placeholder-shown)]:text-label-small peer-[&:not(:placeholder-shown)]:bg-[var(--field-bg)] peer-[&:not(:placeholder-shown)]:px-1',
+      props.error ? 'text-error peer-focus:text-error' : 'text-on-surface-variant peer-focus:text-primary',
+    ].join(' ')
+  }
+  return [...base,
+    'peer-focus:top-2 peer-focus:translate-y-0 peer-focus:text-label-small',
+    'peer-[&:not(:placeholder-shown)]:top-2 peer-[&:not(:placeholder-shown)]:translate-y-0 peer-[&:not(:placeholder-shown)]:text-label-small',
+    props.error ? 'text-error peer-focus:text-error' : 'text-on-surface-variant peer-focus:text-primary',
+  ].join(' ')
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <div
+      ref="fieldBgEl"
+      class="relative"
+      :class="variant === 'outlined' ? 'mt-2' : ''"
+      :style="variant === 'outlined' ? { '--field-bg': resolvedFieldBg } : undefined"
+    >
+      <div
+        v-if="leadingIcon"
+        class="pointer-events-none absolute left-3.5 text-on-surface-variant"
+        :class="variant === 'filled' ? 'top-[57%] -translate-y-1/2' : 'top-[55%] -translate-y-1/2'"
+      >
+        <MIcon :name="leadingIcon" :size="20" />
+      </div>
+
+      <input
+        :id="id"
+        ref="inputEl"
+        type="text"
+        inputmode="numeric"
+        :value="modelValue"
+        :disabled="disabled"
+        :required="required"
+        placeholder=" "
+        :class="inputClasses"
+        @input="onInput"
+        @keydown="onKeydown"
+      />
+
+      <label :for="id" :class="labelClasses">
+        {{ label }}<span v-if="required" class="text-error">&nbsp;*</span>
+      </label>
+
+      <button
+        v-if="showClear"
+        type="button"
+        class="absolute right-3 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"
+        :class="variant === 'filled' ? 'top-[57%] -translate-y-1/2' : 'top-[55%] -translate-y-1/2'"
+        @click="emit('update:modelValue', '')"
+      >
+        <MIcon name="close" :size="18" />
+      </button>
+    </div>
+
+    <p v-if="error" class="px-4 text-body-small text-error">{{ error }}</p>
+    <p v-else-if="hint" class="px-4 text-body-small text-on-surface-variant">{{ hint }}</p>
+  </div>
+</template>