@m3ui-vue/m3ui-vue 0.2.7 → 0.3.1

package/dist/rich-text-editor.js

@@ -1,4 +1,4 @@
-import { d as e, i as t, n, o as r, r as i, t as a } from "./MMenuItem-DpoEsH91.js";
+import { d as e, i as t, n, o as r, r as i, t as a } from "./MMenuItem-C6RwHl-l.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-4ccfbc3c],.m3-dialog-leave-active[data-v-4ccfbc3c]{transition:opacity .15s}.m3-dialog-enter-from[data-v-4ccfbc3c],.m3-dialog-leave-to[data-v-4ccfbc3c]{opacity:0}.m3-dialog-enter-active .dialog-box[data-v-4ccfbc3c],.m3-dialog-leave-active .dialog-box[data-v-4ccfbc3c]{transition:transform .15s}.m3-dialog-enter-from .dialog-box[data-v-4ccfbc3c],.m3-dialog-leave-to .dialog-box[data-v-4ccfbc3c]{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-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}.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-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}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-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)}.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-64ce9e7c]{grid-template-rows:1fr;padding-bottom:8px;display:grid}.toast-row>.toast-inner[data-v-64ce9e7c]{min-height:0}.m3-toast-bot-enter-active[data-v-64ce9e7c]{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-64ce9e7c]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-bot-enter-from[data-v-64ce9e7c]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-enter-from>.toast-inner[data-v-64ce9e7c]{opacity:0;transform:translateY(20px)scale(.94)}.m3-toast-bot-leave-active[data-v-64ce9e7c]{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-64ce9e7c]{transition:opacity .18s,transform .18s}.m3-toast-bot-leave-to[data-v-64ce9e7c]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-leave-to>.toast-inner[data-v-64ce9e7c]{opacity:0;transform:scale(.92)}.m3-toast-top-enter-active[data-v-64ce9e7c]{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-64ce9e7c]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-top-enter-from[data-v-64ce9e7c]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-enter-from>.toast-inner[data-v-64ce9e7c]{opacity:0;transform:translateY(-20px)scale(.94)}.m3-toast-top-leave-active[data-v-64ce9e7c]{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-64ce9e7c]{transition:opacity .18s,transform .18s}.m3-toast-top-leave-to[data-v-64ce9e7c]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-leave-to>.toast-inner[data-v-64ce9e7c]{opacity:0;transform:scale(.92)}@keyframes m3-toast-progress-64ce9e7c{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.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-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-4ccfbc3c],.m3-dialog-leave-active[data-v-4ccfbc3c]{transition:opacity .15s}.m3-dialog-enter-from[data-v-4ccfbc3c],.m3-dialog-leave-to[data-v-4ccfbc3c]{opacity:0}.m3-dialog-enter-active .dialog-box[data-v-4ccfbc3c],.m3-dialog-leave-active .dialog-box[data-v-4ccfbc3c]{transition:transform .15s}.m3-dialog-enter-from .dialog-box[data-v-4ccfbc3c],.m3-dialog-leave-to .dialog-box[data-v-4ccfbc3c]{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-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}.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-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}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)}.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-64ce9e7c]{grid-template-rows:1fr;padding-bottom:8px;display:grid}.toast-row>.toast-inner[data-v-64ce9e7c]{min-height:0}.m3-toast-bot-enter-active[data-v-64ce9e7c]{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-64ce9e7c]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-bot-enter-from[data-v-64ce9e7c]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-enter-from>.toast-inner[data-v-64ce9e7c]{opacity:0;transform:translateY(20px)scale(.94)}.m3-toast-bot-leave-active[data-v-64ce9e7c]{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-64ce9e7c]{transition:opacity .18s,transform .18s}.m3-toast-bot-leave-to[data-v-64ce9e7c]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-leave-to>.toast-inner[data-v-64ce9e7c]{opacity:0;transform:scale(.92)}.m3-toast-top-enter-active[data-v-64ce9e7c]{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-64ce9e7c]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-top-enter-from[data-v-64ce9e7c]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-enter-from>.toast-inner[data-v-64ce9e7c]{opacity:0;transform:translateY(-20px)scale(.94)}.m3-toast-top-leave-active[data-v-64ce9e7c]{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-64ce9e7c]{transition:opacity .18s,transform .18s}.m3-toast-top-leave-to[data-v-64ce9e7c]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-leave-to>.toast-inner[data-v-64ce9e7c]{opacity:0;transform:scale(.92)}@keyframes m3-toast-progress-64ce9e7c{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.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-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.2.7",
+  "version": "0.3.1",
   "description": "Material 3 component library for Vue 3 + Tailwind CSS v4",
   "type": "module",
   "license": "MIT",

package/src/components/MAppBar.vue

@@ -16,27 +16,31 @@ const colorMap: Record<string, string> = {
 
 <template>
   <div
-    class="flex w-full items-center gap-2 px-4 transition-shadow"
+    class="w-full transition-shadow"
     :class="[
       colorMap[color],
       elevated ? 'shadow-elevation-2' : '',
       bordered ? 'border-b border-outline-variant' : '',
-      dense ? 'h-12' : 'h-16',
     ]"
   >
-    <!-- Leading -->
-    <div v-if="$slots.leading" class="flex shrink-0 items-center">
-      <slot name="leading" />
-    </div>
+    <div
+      class="flex items-center gap-2 px-4"
+      :class="dense ? 'h-12' : 'h-16'"
+    >
+      <!-- Leading -->
+      <div v-if="$slots.leading" class="flex shrink-0 items-center">
+        <slot name="leading" />
+      </div>
 
-    <!-- Content -->
-    <div class="flex flex-1 items-center overflow-hidden">
-      <slot />
-    </div>
+      <!-- Content -->
+      <div class="flex flex-1 items-center overflow-hidden">
+        <slot />
+      </div>
 
-    <!-- Trailing -->
-    <div v-if="$slots.trailing" class="flex shrink-0 items-center gap-1">
-      <slot name="trailing" />
+      <!-- Trailing -->
+      <div v-if="$slots.trailing" class="flex shrink-0 items-center gap-1">
+        <slot name="trailing" />
+      </div>
     </div>
   </div>
 </template>

package/src/components/MAutocomplete.vue

@@ -0,0 +1,373 @@
+<script setup lang="ts">
+import { computed, ref, useId, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import MIcon from './MIcon.vue'
+import { useFieldBg } from '../composables/useFieldBg'
+import { useLocale } from '../composables/useLocale'
+import type { SelectOption } from './MSelect.vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: unknown
+    options: SelectOption[]
+    label?: string
+    placeholder?: string
+    variant?: 'filled' | 'outlined'
+    disabled?: boolean
+    error?: string
+    hint?: string
+    required?: boolean
+    leadingIcon?: string
+    clearable?: boolean
+    fieldBg?: string
+    noResultsText?: string
+  }>(),
+  {
+    modelValue: undefined,
+    variant: 'filled',
+    disabled: false,
+    required: false,
+    clearable: false,
+  },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [unknown] }>()
+
+const locale = useLocale()
+const id = useId()
+const open = ref(false)
+const search = ref('')
+const highlightIndex = ref(-1)
+const fieldEl = ref<HTMLElement | null>(null)
+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' })
+
+function eq(a: unknown, b: unknown): boolean {
+  if (a === b) return true
+  if (typeof a !== 'object' || typeof b !== 'object' || a == null || b == null) return false
+  return JSON.stringify(a) === JSON.stringify(b)
+}
+
+const hasValue = computed(() => props.modelValue != null && props.modelValue !== '')
+const selectedLabel = computed(
+  () => props.options.find((o) => eq(o.value, props.modelValue))?.label ?? '',
+)
+
+const filteredOptions = computed(() => {
+  if (!search.value) return props.options
+  const q = search.value.toLowerCase()
+  return props.options.filter((o) => o.label.toLowerCase().includes(q))
+})
+
+const resolvedNoResultsText = computed(() => props.noResultsText ?? locale.noResults)
+
+function computeDropPos() {
+  if (!fieldEl.value) return
+  const rect = fieldEl.value.getBoundingClientRect()
+  const spaceBelow = window.innerHeight - rect.bottom - 8
+  const dropH = Math.min(240, filteredOptions.value.length * 52 + 8)
+  const openAbove = spaceBelow < dropH && rect.top > dropH
+  dropPos.value = {
+    top: openAbove ? `${rect.top - 4 - dropH}px` : `${rect.bottom + 4}px`,
+    left: `${rect.left}px`,
+    width: `${rect.width}px`,
+  }
+}
+
+function openDropdown() {
+  if (props.disabled || open.value) return
+  computeDropPos()
+  open.value = true
+  highlightIndex.value = -1
+}
+
+function closeDropdown() {
+  open.value = false
+  search.value = ''
+  highlightIndex.value = -1
+}
+
+function select(opt: SelectOption) {
+  if (opt.disabled) return
+  emit('update:modelValue', opt.value)
+  closeDropdown()
+  nextTick(() => inputEl.value?.blur())
+}
+
+function onInputFocus() {
+  search.value = ''
+  openDropdown()
+}
+
+function onInputBlur(e: FocusEvent) {
+  const related = e.relatedTarget as Node | null
+  if (dropdownEl.value?.contains(related) || fieldEl.value?.contains(related)) return
+  closeDropdown()
+}
+
+function onInput(e: Event) {
+  search.value = (e.target as HTMLInputElement).value
+  if (!open.value) openDropdown()
+  highlightIndex.value = -1
+  nextTick(computeDropPos)
+}
+
+function onOutsideClick(e: MouseEvent) {
+  const t = e.target as Node
+  if (!fieldEl.value?.contains(t) && !dropdownEl.value?.contains(t)) closeDropdown()
+}
+
+function onScroll(e: Event) {
+  if (!open.value) return
+  // Scrolling inside the dropdown list itself -- do nothing
+  if (dropdownEl.value?.contains(e.target as Node)) return
+  // Recompute position to track the trigger element as the page scrolls
+  if (!fieldEl.value) return
+  const rect = fieldEl.value.getBoundingClientRect()
+  // Only close if the trigger has scrolled completely out of the viewport
+  if (rect.bottom < 0 || rect.top > window.innerHeight) {
+    closeDropdown()
+    return
+  }
+  computeDropPos()
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    closeDropdown()
+    inputEl.value?.blur()
+    return
+  }
+
+  if (!open.value) {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault()
+      openDropdown()
+      return
+    }
+    return
+  }
+
+  const opts = filteredOptions.value.filter((o) => !o.disabled)
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    highlightIndex.value = highlightIndex.value < opts.length - 1 ? highlightIndex.value + 1 : 0
+    scrollToHighlighted()
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    highlightIndex.value = highlightIndex.value > 0 ? highlightIndex.value - 1 : opts.length - 1
+    scrollToHighlighted()
+  } else if (e.key === 'Enter') {
+    e.preventDefault()
+    const idx = highlightIndex.value >= 0 ? highlightIndex.value : 0
+    const target = opts[idx]
+    if (target) {
+      select(target)
+    }
+  }
+}
+
+function scrollToHighlighted() {
+  nextTick(() => {
+    if (!dropdownEl.value) return
+    const items = dropdownEl.value.querySelectorAll('[data-option]')
+    const item = items[highlightIndex.value] as HTMLElement | undefined
+    item?.scrollIntoView({ block: 'nearest' })
+  })
+}
+
+// Map highlight index to the full filteredOptions index (skipping disabled)
+function getEnabledIndex(opt: SelectOption): number {
+  return filteredOptions.value.filter((o) => !o.disabled).indexOf(opt)
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', onOutsideClick)
+  window.addEventListener('scroll', onScroll, true)
+})
+onUnmounted(() => {
+  document.removeEventListener('mousedown', onOutsideClick)
+  window.removeEventListener('scroll', onScroll, true)
+})
+
+// Recompute dropdown position when filtered options change while open
+watch(filteredOptions, () => {
+  if (open.value) nextTick(computeDropPos)
+})
+
+const displayValue = computed(() => {
+  if (open.value) return search.value
+  return selectedLabel.value
+})
+
+const triggerClasses = computed(() => {
+  const pl = props.leadingIcon ? 'pl-12' : 'pl-4'
+  const base = [
+    'flex w-full items-center pr-10 text-body-large transition-[border-color,border-width] duration-150',
+    pl,
+  ]
+
+  if (props.variant === 'outlined') {
+    return [
+      ...base,
+      'h-14 rounded-sm border bg-transparent',
+      open.value
+        ? (props.error ? 'border-2 border-error' : 'border-2 border-primary')
+        : (props.error ? 'border-error' : 'border-outline hover:border-on-surface'),
+    ].join(' ')
+  }
+
+  return [
+    ...base,
+    'h-14 rounded-t-sm bg-surface-container-highest border-b pt-6 pb-2',
+    open.value
+      ? (props.error ? 'border-b-2 border-error' : 'border-b-2 border-primary')
+      : (props.error ? 'border-error' : 'border-on-surface-variant hover:border-on-surface'),
+  ].join(' ')
+})
+
+const isFloated = computed(() => hasValue.value || open.value)
+
+const labelClasses = computed(() => {
+  const left = props.leadingIcon
+    ? (props.variant === 'outlined' ? 'left-11' : 'left-12')
+    : (props.variant === 'outlined' ? 'left-3' : 'left-4')
+
+  const floated = props.variant === 'outlined'
+    ? '-top-2.5 translate-y-0 text-label-small bg-[var(--field-bg)] px-1 right-auto max-w-[calc(100%-1.5rem)]'
+    : 'top-2 translate-y-0 text-label-small'
+
+  const unFloated = props.variant === 'filled'
+    ? 'top-[53%] -translate-y-1/2 text-body-large'
+    : 'top-1/2 -translate-y-1/2 text-body-large'
+
+  return [
+    'pointer-events-none absolute right-10 truncate transition-all duration-200',
+    left,
+    isFloated.value ? floated : unFloated,
+    open.value
+      ? (props.error ? 'text-error' : 'text-primary')
+      : (props.error ? 'text-error' : 'text-on-surface-variant'),
+  ].join(' ')
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <div
+      ref="fieldEl"
+      class="relative"
+      :class="variant === 'outlined' ? 'mt-2' : ''"
+      :style="variant === 'outlined' ? { '--field-bg': resolvedFieldBg } : undefined"
+    >
+      <!-- Leading icon -->
+      <div
+        v-if="leadingIcon"
+        class="pointer-events-none absolute left-3.5 text-on-surface-variant"
+        :class="variant === 'filled' ? 'top-5' : 'top-4.5'"
+      >
+        <MIcon :name="leadingIcon" :size="20" />
+      </div>
+
+      <!-- Input trigger -->
+      <input
+        :id="id"
+        ref="inputEl"
+        type="text"
+        :value="displayValue"
+        :placeholder="!label ? placeholder : undefined"
+        :disabled="disabled"
+        autocomplete="off"
+        role="combobox"
+        :aria-expanded="open"
+        :aria-disabled="disabled"
+        :class="[
+          triggerClasses,
+          'outline-none text-on-surface',
+          disabled ? 'pointer-events-none opacity-[0.38]' : 'cursor-text',
+        ]"
+        @focus="onInputFocus"
+        @blur="onInputBlur"
+        @input="onInput"
+        @keydown="onKeydown"
+      />
+
+      <!-- Floating label -->
+      <label :for="id" :class="labelClasses">
+        {{ label }}<span v-if="required" class="text-error">&nbsp;*</span>
+      </label>
+
+      <!-- Clear button -->
+      <button
+        v-if="clearable && hasValue && !disabled"
+        type="button"
+        class="absolute right-9 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.stop="emit('update:modelValue', undefined as any); closeDropdown()"
+      >
+        <MIcon name="close" :size="18" />
+      </button>
+
+      <!-- Arrow icon -->
+      <div class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 flex h-6 items-center">
+        <MIcon
+          :name="open ? 'arrow_drop_up' : 'arrow_drop_down'"
+          :size="24"
+          class="text-on-surface-variant transition-transform duration-200"
+        />
+      </div>
+    </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>
+
+  <!-- Dropdown teleported to body to escape overflow clipping -->
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-[opacity,transform] duration-150"
+      enter-from-class="opacity-0 -translate-y-1 scale-[0.98]"
+      enter-to-class="opacity-100 translate-y-0 scale-100"
+      leave-active-class="transition-[opacity,transform] duration-100"
+      leave-from-class="opacity-100 translate-y-0 scale-100"
+      leave-to-class="opacity-0 -translate-y-1 scale-[0.98]"
+    >
+      <div
+        v-if="open"
+        ref="dropdownEl"
+        class="fixed z-500 max-h-60 overflow-auto rounded-sm bg-surface-container py-1 shadow-elevation-2"
+        :style="dropPos"
+      >
+        <div
+          v-for="(opt, i) in filteredOptions"
+          :key="i"
+          data-option
+          class="flex cursor-pointer items-center gap-3 px-4 py-3 text-body-large"
+          :class="[
+            opt.disabled
+              ? 'cursor-not-allowed opacity-38 text-on-surface'
+              : 'text-on-surface hover:bg-on-surface/8',
+            eq(opt.value, modelValue) ? 'bg-primary/8 text-primary font-medium' : '',
+            getEnabledIndex(opt) === highlightIndex && !opt.disabled ? 'bg-on-surface/12' : '',
+          ]"
+          @mousedown.prevent="select(opt)"
+        >
+          <MIcon
+            v-if="eq(opt.value, modelValue)"
+            name="check"
+            :size="18"
+            class="shrink-0 text-primary"
+          />
+          <span v-else class="w-[18px] shrink-0" />
+          {{ opt.label }}
+        </div>
+        <p
+          v-if="!filteredOptions.length"
+          class="px-4 py-3 text-center text-body-small text-on-surface-variant"
+        >
+          {{ resolvedNoResultsText }}
+        </p>
+      </div>
+    </Transition>
+  </Teleport>
+</template>

package/src/components/MChatBubble.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import MAvatar from './MAvatar.vue'
+import MIcon from './MIcon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    text?: string
+    sender?: string
+    time?: string
+    side?: 'left' | 'right'
+    avatar?: string
+    avatarSrc?: string
+    status?: 'sent' | 'delivered' | 'read'
+    color?: 'primary' | 'secondary' | 'tertiary'
+    tail?: boolean
+    size?: 'small' | 'medium' | 'large'
+    maxWidth?: string
+  }>(),
+  { side: 'left', color: 'primary', tail: true, size: 'medium', maxWidth: '320px' },
+)
+
+const isRight = computed(() => props.side === 'right')
+
+const sizeClass = computed(() => {
+  if (props.size === 'small') return 'text-body-small'
+  if (props.size === 'large') return 'text-body-large'
+  return 'text-body-medium'
+})
+
+const colorMap: Record<string, { bg: string; text: string; timeCls: string }> = {
+  primary: { bg: 'bg-primary', text: 'text-on-primary', timeCls: 'text-on-primary/60' },
+  secondary: { bg: 'bg-secondary', text: 'text-on-secondary', timeCls: 'text-on-secondary/60' },
+  tertiary: { bg: 'bg-tertiary', text: 'text-on-tertiary', timeCls: 'text-on-tertiary/60' },
+}
+
+const bubbleClasses = computed(() => {
+  const classes = ['rounded-2xl', 'px-3', 'py-2']
+
+  if (isRight.value) {
+    const c = colorMap[props.color]!
+    classes.push(c.bg, c.text)
+    if (props.tail) classes.push('rounded-br-sm')
+  } else {
+    classes.push('bg-surface-container-high', 'text-on-surface')
+    if (props.tail) classes.push('rounded-bl-sm')
+  }
+
+  return classes
+})
+
+const timeClasses = computed(() =>
+  isRight.value ? colorMap[props.color]!.timeCls : 'text-on-surface-variant',
+)
+
+const statusIcon = computed(() => {
+  if (!props.status) return null
+  return props.status === 'sent' ? 'check' : 'done_all'
+})
+
+const statusClasses = computed(() => {
+  if (props.status === 'sent') return 'text-on-primary/40'
+  if (props.status === 'delivered') return 'text-on-primary/60'
+  if (props.status === 'read') return 'text-on-primary'
+  return ''
+})
+</script>
+
+<template>
+  <div class="flex gap-2" :class="isRight ? 'justify-end' : 'justify-start'">
+    <MAvatar
+      v-if="avatar && !isRight"
+      :name="avatar"
+      :size="32"
+      class="shrink-0 mt-auto"
+    />
+
+    <div class="w-fit" :style="{ maxWidth: maxWidth }">
+      <p v-if="sender && !isRight" class="text-label-small font-medium text-on-surface-variant mb-0.5 ml-1">
+        {{ sender }}
+      </p>
+
+      <div :class="bubbleClasses">
+        <p :class="sizeClass"><slot>{{ text }}</slot></p>
+
+        <div v-if="time || (status && isRight)" class="flex items-center justify-end gap-1 mt-0.5">
+          <span v-if="time" class="text-label-small" :class="timeClasses">{{ time }}</span>
+          <MIcon
+            v-if="status && isRight"
+            :name="statusIcon!"
+            :size="14"
+            :class="statusClasses"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/MMaskField.vue

@@ -158,7 +158,7 @@ const labelClasses = computed(() => {
       <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'"
+        :class="variant === 'filled' ? 'top-5' : 'top-4.5'"
       >
         <MIcon :name="leadingIcon" :size="20" />
       </div>
@@ -184,8 +184,7 @@ const labelClasses = computed(() => {
       <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'"
+        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', '')"
       >
         <MIcon name="close" :size="18" />