@m3ui-vue/m3ui-vue 0.1.4 → 0.1.6

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)}.bs-scrim[data-v-941a89e7]{transition:opacity .3s}.bs-enter-from .bs-scrim[data-v-941a89e7],.bs-leave-to .bs-scrim[data-v-941a89e7]{opacity:0}.bs-panel[data-v-941a89e7]{transition:transform .32s cubic-bezier(.2,0,0,1),opacity .24s}.bs-enter-from .bs-panel[data-v-941a89e7]{opacity:0;transform:translateY(40%)}.bs-leave-to .bs-panel[data-v-941a89e7]{opacity:0;transform:translateY(100%)!important}@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}}.hue-slider[data-v-9ee0043f]{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.hue-slider[data-v-9ee0043f]::-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-9ee0043f]::-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)}.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)}.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)}.nd-scrim[data-v-98c11a62]{transition:opacity .28s}.nd-enter-from .nd-scrim[data-v-98c11a62],.nd-leave-to .nd-scrim[data-v-98c11a62]{opacity:0}.nd-panel[data-v-98c11a62]{transition:transform .3s cubic-bezier(.2,0,0,1)}.nd-enter-from .nd-panel[data-v-98c11a62],.nd-leave-to .nd-panel[data-v-98c11a62]{transform:translate(-100%)}@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-f8751672]{transition:opacity .28s}.ss-enter-from .ss-scrim[data-v-f8751672],.ss-leave-to .ss-scrim[data-v-f8751672]{opacity:0}.ss-panel[data-v-f8751672]{transition:transform .32s cubic-bezier(.2,0,0,1),opacity .24s}.ss-enter-from .ss-panel[data-v-f8751672]{opacity:0;transform:translate(40%)}.ss-leave-to .ss-panel[data-v-f8751672]{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-e83a5c10]{grid-template-rows:1fr;padding-bottom:8px;display:grid}.toast-row>.toast-inner[data-v-e83a5c10]{min-height:0}.m3-toast-bot-enter-active[data-v-e83a5c10]{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-e83a5c10]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-bot-enter-from[data-v-e83a5c10]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-enter-from>.toast-inner[data-v-e83a5c10]{opacity:0;transform:translateY(20px)scale(.94)}.m3-toast-bot-leave-active[data-v-e83a5c10]{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-e83a5c10]{transition:opacity .18s,transform .18s}.m3-toast-bot-leave-to[data-v-e83a5c10]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-leave-to>.toast-inner[data-v-e83a5c10]{opacity:0;transform:scale(.92)}.m3-toast-top-enter-active[data-v-e83a5c10]{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-e83a5c10]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-top-enter-from[data-v-e83a5c10]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-enter-from>.toast-inner[data-v-e83a5c10]{opacity:0;transform:translateY(-20px)scale(.94)}.m3-toast-top-leave-active[data-v-e83a5c10]{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-e83a5c10]{transition:opacity .18s,transform .18s}.m3-toast-top-leave-to[data-v-e83a5c10]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-leave-to>.toast-inner[data-v-e83a5c10]{opacity:0;transform:scale(.92)}@keyframes m3-toast-progress-e83a5c10{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-6e4dc2b6] 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-6e4dc2b6] 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-6e4dc2b6] 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-6e4dc2b6] 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-6e4dc2b6] p{margin:.5em 0}.m3-markdown[data-v-6e4dc2b6] a{color:var(--color-primary);text-underline-offset:2px;text-decoration:underline}.m3-markdown[data-v-6e4dc2b6] a:hover{opacity:.8}.m3-markdown[data-v-6e4dc2b6] strong{color:var(--color-on-surface);font-weight:600}.m3-markdown[data-v-6e4dc2b6] em{font-style:italic}.m3-markdown[data-v-6e4dc2b6] ul,.m3-markdown[data-v-6e4dc2b6] ol{margin:.5em 0;padding-left:1.5em}.m3-markdown[data-v-6e4dc2b6] li{margin:.25em 0}.m3-markdown[data-v-6e4dc2b6] li::marker{color:var(--color-on-surface-variant)}.m3-markdown[data-v-6e4dc2b6] 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-6e4dc2b6] code{background:var(--color-surface-container-highest);color:var(--color-primary);border-radius:4px;padding:.15em .4em;font-family:JetBrains Mono,Fira Code,monospace;font-size:.875em}.m3-markdown[data-v-6e4dc2b6] 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-6e4dc2b6] pre code{color:var(--color-on-surface);background:0 0;padding:0}.m3-markdown[data-v-6e4dc2b6] hr{border:none;border-top:1px solid var(--color-outline-variant);margin:1.5em 0}.m3-markdown[data-v-6e4dc2b6] table{border-collapse:collapse;width:100%;margin:.75em 0}.m3-markdown[data-v-6e4dc2b6] 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-6e4dc2b6] td{border-bottom:1px solid var(--color-outline-variant);padding:.5em .75em}.m3-markdown[data-v-6e4dc2b6] img{border-radius:12px;max-width:100%;height:auto;margin:.5em 0}.rte-content[data-v-89c08c83] .tiptap{min-height:inherit;outline:none}.rte-content[data-v-89c08c83] .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-89c08c83] 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-89c08c83] 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-89c08c83] 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-89c08c83] p{margin:.5em 0}.rte-content[data-v-89c08c83] ul,.rte-content[data-v-89c08c83] ol{margin:.5em 0;padding-left:1.5em}.rte-content[data-v-89c08c83] blockquote{border-left:3px solid var(--color-primary);color:var(--color-on-surface-variant);margin:.5em 0;padding-left:1em}.rte-content[data-v-89c08c83] code{background:var(--color-surface-container-highest);border-radius:4px;padding:.15em .4em;font-size:.875em}.rte-content[data-v-89c08c83] pre{background:var(--color-surface-container-highest);border-radius:8px;margin:.5em 0;padding:1em;overflow-x:auto}.rte-content[data-v-89c08c83] pre code{background:0 0;padding:0}.rte-content[data-v-89c08c83] a{color:var(--color-primary);text-decoration:underline}.rte-content[data-v-89c08c83] mark{background:var(--color-tertiary-container);color:var(--color-on-tertiary-container);border-radius:2px;padding:.1em .2em}.rte-content[data-v-89c08c83] 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)}.bs-scrim[data-v-941a89e7]{transition:opacity .3s}.bs-enter-from .bs-scrim[data-v-941a89e7],.bs-leave-to .bs-scrim[data-v-941a89e7]{opacity:0}.bs-panel[data-v-941a89e7]{transition:transform .32s cubic-bezier(.2,0,0,1),opacity .24s}.bs-enter-from .bs-panel[data-v-941a89e7]{opacity:0;transform:translateY(40%)}.bs-leave-to .bs-panel[data-v-941a89e7]{opacity:0;transform:translateY(100%)!important}@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}}.hue-slider[data-v-9ee0043f]{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.hue-slider[data-v-9ee0043f]::-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-9ee0043f]::-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)}.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)}.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)}.nd-scrim[data-v-d898f7f1]{transition:opacity .28s}.nd-enter-from .nd-scrim[data-v-d898f7f1],.nd-leave-to .nd-scrim[data-v-d898f7f1]{opacity:0}.nd-panel[data-v-d898f7f1]{transition:transform .3s cubic-bezier(.2,0,0,1)}.nd-enter-from .nd-panel[data-v-d898f7f1],.nd-leave-to .nd-panel[data-v-d898f7f1]{transform:translate(-100%)}.nd-section-grid[data-v-d898f7f1]{grid-template-rows:1fr;display:grid}.nd-section-body[data-v-d898f7f1]{min-height:0;overflow:hidden}.nd-section-enter-active[data-v-d898f7f1]{transition:grid-template-rows .35s cubic-bezier(.2,0,0,1)}.nd-section-enter-active>.nd-section-body[data-v-d898f7f1]{transition:opacity .25s cubic-bezier(.2,0,0,1) 80ms}.nd-section-enter-from[data-v-d898f7f1]{grid-template-rows:0fr}.nd-section-enter-from>.nd-section-body[data-v-d898f7f1]{opacity:0}.nd-section-leave-active[data-v-d898f7f1]{transition:grid-template-rows .28s cubic-bezier(.4,0,1,1)}.nd-section-leave-active>.nd-section-body[data-v-d898f7f1]{transition:opacity .15s cubic-bezier(.4,0,1,1)}.nd-section-leave-to[data-v-d898f7f1]{grid-template-rows:0fr}.nd-section-leave-to>.nd-section-body[data-v-d898f7f1]{opacity:0}.nd-inline[data-v-d898f7f1]{transition:width .3s cubic-bezier(.2,0,0,1)}.nd-inline .nd-collapse-h[data-v-d898f7f1]{max-height:80px;transition:max-height .3s cubic-bezier(.2,0,0,1)}.nd-inline.nd-collapsed .nd-collapse-h[data-v-d898f7f1]{max-height:0}.nd-inline .nd-section-body[data-v-d898f7f1]>*{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-f8751672]{transition:opacity .28s}.ss-enter-from .ss-scrim[data-v-f8751672],.ss-leave-to .ss-scrim[data-v-f8751672]{opacity:0}.ss-panel[data-v-f8751672]{transition:transform .32s cubic-bezier(.2,0,0,1),opacity .24s}.ss-enter-from .ss-panel[data-v-f8751672]{opacity:0;transform:translate(40%)}.ss-leave-to .ss-panel[data-v-f8751672]{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-e83a5c10]{grid-template-rows:1fr;padding-bottom:8px;display:grid}.toast-row>.toast-inner[data-v-e83a5c10]{min-height:0}.m3-toast-bot-enter-active[data-v-e83a5c10]{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-e83a5c10]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-bot-enter-from[data-v-e83a5c10]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-enter-from>.toast-inner[data-v-e83a5c10]{opacity:0;transform:translateY(20px)scale(.94)}.m3-toast-bot-leave-active[data-v-e83a5c10]{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-e83a5c10]{transition:opacity .18s,transform .18s}.m3-toast-bot-leave-to[data-v-e83a5c10]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-leave-to>.toast-inner[data-v-e83a5c10]{opacity:0;transform:scale(.92)}.m3-toast-top-enter-active[data-v-e83a5c10]{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-e83a5c10]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-top-enter-from[data-v-e83a5c10]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-enter-from>.toast-inner[data-v-e83a5c10]{opacity:0;transform:translateY(-20px)scale(.94)}.m3-toast-top-leave-active[data-v-e83a5c10]{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-e83a5c10]{transition:opacity .18s,transform .18s}.m3-toast-top-leave-to[data-v-e83a5c10]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-leave-to>.toast-inner[data-v-e83a5c10]{opacity:0;transform:scale(.92)}@keyframes m3-toast-progress-e83a5c10{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-6e4dc2b6] 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-6e4dc2b6] 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-6e4dc2b6] 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-6e4dc2b6] 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-6e4dc2b6] p{margin:.5em 0}.m3-markdown[data-v-6e4dc2b6] a{color:var(--color-primary);text-underline-offset:2px;text-decoration:underline}.m3-markdown[data-v-6e4dc2b6] a:hover{opacity:.8}.m3-markdown[data-v-6e4dc2b6] strong{color:var(--color-on-surface);font-weight:600}.m3-markdown[data-v-6e4dc2b6] em{font-style:italic}.m3-markdown[data-v-6e4dc2b6] ul,.m3-markdown[data-v-6e4dc2b6] ol{margin:.5em 0;padding-left:1.5em}.m3-markdown[data-v-6e4dc2b6] li{margin:.25em 0}.m3-markdown[data-v-6e4dc2b6] li::marker{color:var(--color-on-surface-variant)}.m3-markdown[data-v-6e4dc2b6] 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-6e4dc2b6] code{background:var(--color-surface-container-highest);color:var(--color-primary);border-radius:4px;padding:.15em .4em;font-family:JetBrains Mono,Fira Code,monospace;font-size:.875em}.m3-markdown[data-v-6e4dc2b6] 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-6e4dc2b6] pre code{color:var(--color-on-surface);background:0 0;padding:0}.m3-markdown[data-v-6e4dc2b6] hr{border:none;border-top:1px solid var(--color-outline-variant);margin:1.5em 0}.m3-markdown[data-v-6e4dc2b6] table{border-collapse:collapse;width:100%;margin:.75em 0}.m3-markdown[data-v-6e4dc2b6] 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-6e4dc2b6] td{border-bottom:1px solid var(--color-outline-variant);padding:.5em .75em}.m3-markdown[data-v-6e4dc2b6] img{border-radius:12px;max-width:100%;height:auto;margin:.5em 0}.rte-content[data-v-89c08c83] .tiptap{min-height:inherit;outline:none}.rte-content[data-v-89c08c83] .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-89c08c83] 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-89c08c83] 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-89c08c83] 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-89c08c83] p{margin:.5em 0}.rte-content[data-v-89c08c83] ul,.rte-content[data-v-89c08c83] ol{margin:.5em 0;padding-left:1.5em}.rte-content[data-v-89c08c83] blockquote{border-left:3px solid var(--color-primary);color:var(--color-on-surface-variant);margin:.5em 0;padding-left:1em}.rte-content[data-v-89c08c83] code{background:var(--color-surface-container-highest);border-radius:4px;padding:.15em .4em;font-size:.875em}.rte-content[data-v-89c08c83] pre{background:var(--color-surface-container-highest);border-radius:8px;margin:.5em 0;padding:1em;overflow-x:auto}.rte-content[data-v-89c08c83] pre code{background:0 0;padding:0}.rte-content[data-v-89c08c83] a{color:var(--color-primary);text-decoration:underline}.rte-content[data-v-89c08c83] mark{background:var(--color-tertiary-container);color:var(--color-on-tertiary-container);border-radius:2px;padding:.1em .2em}.rte-content[data-v-89c08c83] 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.4",
+  "version": "0.1.6",
   "description": "Material 3 component library for Vue 3 + Tailwind CSS v4",
   "type": "module",
   "license": "MIT",

package/src/components/MButton.vue

@@ -19,6 +19,7 @@ const props = withDefaults(
     disabled?: boolean
     loading?: boolean
     icon?: string
+    to?: string | Record<string, any>
   }>(),
   {
     variant: 'filled',
@@ -29,6 +30,8 @@ const props = withDefaults(
   },
 )
 
+const tag = computed(() => props.to ? 'RouterLink' : 'button')
+
 const isCustomColor = computed(
   () => !!props.color && !(NAMED_COLORS as readonly string[]).includes(props.color),
 )
@@ -97,8 +100,10 @@ function createRipple(event: PointerEvent) {
 </script>
 
 <template>
-  <button
-    :type="type"
+  <component
+    :is="tag"
+    :to="to || undefined"
+    :type="to ? undefined : type"
     :disabled="disabled || loading"
     :class="[base, variantClasses]"
     :style="customStyle"
@@ -107,5 +112,5 @@ function createRipple(event: PointerEvent) {
     <MSpinner v-if="loading" :size="18" />
     <MIcon v-else-if="icon" :name="icon" :size="20" />
     <slot />
-  </button>
+  </component>
 </template>

package/src/components/MCard.vue

@@ -10,6 +10,8 @@ const props = withDefaults(
     image?: string
     imageAlt?: string
     imageHeight?: string
+    title?: string
+    subtitle?: string
   }>(),
   { variant: 'elevated', clickable: false, elevated: false },
 )
@@ -51,6 +53,18 @@ const fieldBgByVariant: Record<string, string> = {
       <slot v-else name="media" />
     </div>
 
+    <div v-if="$slots.header" class="px-4 pt-4 pb-2">
+      <slot name="header" />
+    </div>
+    <div v-else-if="title" class="px-4 pt-4 pb-2">
+      <h3 class="text-title-large font-medium text-on-surface">{{ title }}</h3>
+      <p v-if="subtitle" class="mt-1 text-body-medium text-on-surface-variant">{{ subtitle }}</p>
+    </div>
+
     <slot />
+
+    <div v-if="$slots.actions" class="flex justify-end gap-2 px-4 pt-2 pb-4">
+      <slot name="actions" />
+    </div>
   </div>
 </template>

package/src/components/MContextMenu.vue

@@ -9,6 +9,7 @@ export interface ContextMenuItem {
   disabled?: boolean
   danger?: boolean
   divider?: boolean
+  to?: string | Record<string, any>
   children?: ContextMenuItem[]
   onClick?: () => void
 }

package/src/components/MFab.vue

@@ -5,6 +5,7 @@ import MIcon from './MIcon.vue'
 export interface SpeedDialItem {
   icon: string
   label?: string
+  to?: string | Record<string, any>
   onClick?: () => void
 }
 
@@ -17,6 +18,7 @@ const props = withDefaults(
     disabled?: boolean
     items?: SpeedDialItem[]
     direction?: 'up' | 'down' | 'left' | 'right' | 'radial'
+    to?: string | Record<string, any>
   }>(),
   {
     color: 'primary',
@@ -26,6 +28,8 @@ const props = withDefaults(
   },
 )
 
+const fabTag = computed(() => props.to ? 'RouterLink' : 'button')
+
 const emit = defineEmits<{ click: [MouseEvent] }>()
 
 const open = ref(false)
@@ -186,12 +190,14 @@ onUnmounted(() => {
 
 <template>
   <div ref="fabEl" class="relative inline-flex items-center justify-center">
-    <button
-      type="button"
+    <component
+      :is="fabTag"
+      :to="to || undefined"
+      :type="to ? undefined : 'button'"
       class="relative inline-flex cursor-pointer items-center justify-center overflow-hidden shadow-elevation-1 transition-shadow duration-150 hover:shadow-elevation-2 active:shadow-elevation-1 disabled:cursor-not-allowed disabled:opacity-[0.38] before:content-[''] before:pointer-events-none before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:duration-150 hover:before:opacity-[0.08] active:before:opacity-[0.12]"
       :class="[colorMap[color], fabSizeClasses]"
       :disabled="disabled"
-      @pointerdown="(e) => { createRipple(e); handleFabClick(e) }"
+      @pointerdown="(e: PointerEvent) => { createRipple(e); handleFabClick(e) }"
     >
       <MIcon
         :name="icon"
@@ -200,7 +206,7 @@ onUnmounted(() => {
         :class="hasItems && open ? 'rotate-45' : ''"
       />
       <span v-if="label" class="text-label-large font-medium">{{ label }}</span>
-    </button>
+    </component>
   </div>
 
   <Teleport to="body">
@@ -221,15 +227,17 @@ onUnmounted(() => {
           {{ item.label }}
         </span>
 
-        <button
-          type="button"
+        <component
+          :is="item.to ? 'RouterLink' : 'button'"
+          :to="item.to || undefined"
+          :type="item.to ? undefined : 'button'"
           class="relative flex cursor-pointer items-center justify-center overflow-hidden rounded-lg shadow-elevation-1 transition-shadow duration-150 hover:shadow-elevation-2 active:shadow-elevation-1 before:content-[''] before:pointer-events-none before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:duration-150 hover:before:opacity-[0.08] active:before:opacity-[0.12]"
           :class="colorMap[color]"
           :style="{ width: `${ITEM_PX}px`, height: `${ITEM_PX}px` }"
-          @pointerdown="(e) => handleItemClick(e, item, e.currentTarget as HTMLElement)"
+          @pointerdown="(e: PointerEvent) => handleItemClick(e, item, e.currentTarget as HTMLElement)"
         >
           <MIcon :name="item.icon" :size="20" />
-        </button>
+        </component>
       </div>
     </template>
   </Teleport>

package/src/components/MIconButton.vue

@@ -9,6 +9,7 @@ const props = withDefaults(
     variant?: 'standard' | 'filled' | 'tonal' | 'outlined'
     disabled?: boolean
     size?: number
+    to?: string | Record<string, any>
   }>(),
   {
     variant: 'standard',
@@ -17,6 +18,8 @@ const props = withDefaults(
   },
 )
 
+const tag = computed(() => props.to ? 'RouterLink' : 'button')
+
 const base =
   'inline-flex shrink-0 items-center justify-center rounded-full transition-colors duration-150 cursor-pointer ' +
   'disabled:cursor-not-allowed disabled:opacity-[0.38]'
@@ -36,8 +39,10 @@ const variantClasses = computed(() => {
 </script>
 
 <template>
-  <button
-    type="button"
+  <component
+    :is="tag"
+    :to="to || undefined"
+    :type="to ? undefined : 'button'"
     :aria-label="label"
     :title="label"
     :disabled="disabled"
@@ -45,5 +50,5 @@ const variantClasses = computed(() => {
     :style="{ width: `${size}px`, height: `${size}px` }"
   >
     <MIcon :name="icon" :size="Math.round(size * 0.55)" />
-  </button>
+  </component>
 </template>

package/src/components/MMenuItem.vue

@@ -1,15 +1,20 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import MIcon from './MIcon.vue'
 
-withDefaults(defineProps<{ icon?: string }>(), {})
+const props = withDefaults(defineProps<{ icon?: string; to?: string | Record<string, any> }>(), {})
+
+const tag = computed(() => props.to ? 'RouterLink' : 'button')
 </script>
 
 <template>
-  <button
-    type="button"
+  <component
+    :is="tag"
+    :to="to || undefined"
+    :type="to ? undefined : 'button'"
     class="flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-left text-body-large text-on-surface hover:bg-on-surface/8"
   >
     <MIcon v-if="icon" :name="icon" :size="20" class="text-on-surface-variant" />
     <slot />
-  </button>
+  </component>
 </template>

package/src/components/MNavigationDrawer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch } from 'vue'
+import { ref, watch } from 'vue'
 import MIcon from './MIcon.vue'
 
 export interface DrawerItem {
@@ -8,11 +8,14 @@ export interface DrawerItem {
   icon?: string
   badge?: string | number
   disabled?: boolean
+  to?: string | Record<string, any>
 }
 
 export interface DrawerSection {
   title?: string
+  icon?: string
   items: DrawerItem[]
+  collapsible?: boolean
 }
 
 const props = withDefaults(defineProps<{
@@ -21,6 +24,7 @@ const props = withDefaults(defineProps<{
   sections: DrawerSection[]
   title?: string
   modal?: boolean
+  collapsed?: boolean
 }>(), { modal: true })
 
 const emit = defineEmits<{
@@ -28,6 +32,18 @@ const emit = defineEmits<{
   select: [string | number]
 }>()
 
+const openSections = ref<Record<string, boolean>>({})
+
+function isSectionOpen(section: DrawerSection, index: number) {
+  const key = section.title ?? `__${index}`
+  return openSections.value[key] !== false
+}
+
+function toggleSection(section: DrawerSection, index: number) {
+  const key = section.title ?? `__${index}`
+  openSections.value[key] = !isSectionOpen(section, index)
+}
+
 function close() { emit('update:modelValue', false) }
 function select(item: DrawerItem) {
   if (item.disabled) return
@@ -35,60 +51,87 @@ function select(item: DrawerItem) {
   if (props.modal) close()
 }
 
+function itemTag(item: DrawerItem) {
+  return item.to && !item.disabled ? 'RouterLink' : 'button'
+}
+
+
 watch(() => props.modelValue, (open) => {
-  if (open) document.body.style.overflow = 'hidden'
-  else document.body.style.overflow = ''
+  if (props.modal) {
+    document.body.style.overflow = open ? 'hidden' : ''
+  }
 })
 </script>
 
 <template>
-  <!-- Modal variant -->
+  <!-- ── Modal variant ──────────────────────────────────────── -->
   <Teleport v-if="modal" to="body">
     <Transition name="nd" :duration="{ enter: 300, leave: 280 }">
       <div v-if="modelValue" class="fixed inset-0 z-[100] flex">
-        <!-- Scrim -->
         <div class="nd-scrim absolute inset-0 bg-black/40" @click="close" />
 
-        <!-- Panel -->
         <nav class="nd-panel relative flex h-full w-72 max-w-[85vw] flex-col bg-surface-container shadow-elevation-3">
-          <!-- Header -->
           <div v-if="title || $slots.header" class="shrink-0 px-5 pt-6 pb-2">
             <slot name="header">
               <h2 class="text-title-small font-medium text-on-surface-variant">{{ title }}</h2>
             </slot>
           </div>
 
-          <!-- Sections -->
           <div class="flex-1 overflow-y-auto px-3 py-2">
             <template v-for="(section, si) in sections" :key="si">
-              <div v-if="si > 0" class="my-2 border-t border-outline-variant" />
-              <p v-if="section.title" class="px-4 pt-4 pb-2 text-title-small font-medium text-on-surface-variant">
-                {{ section.title }}
-              </p>
+              <div v-if="si > 0" class="my-1 border-t border-outline-variant" />
+
               <button
-                v-for="item in section.items"
-                :key="item.value"
+                v-if="section.title && section.collapsible"
                 type="button"
-                class="flex w-full items-center gap-3 rounded-full px-4 py-3 text-left transition-colors focus-visible:outline-none"
-                :class="[
-                  item.disabled
-                    ? 'cursor-not-allowed opacity-[0.38]'
-                    : item.value === selected
-                      ? 'bg-secondary-container text-on-secondary-container'
-                      : 'cursor-pointer text-on-surface-variant hover:bg-on-surface/8',
-                ]"
-                :disabled="item.disabled"
-                @click="select(item)"
+                class="mt-1 flex w-full cursor-pointer items-center gap-3 rounded-xl px-3 py-2.5 text-on-surface-variant transition-colors hover:bg-on-surface/8"
+                @click="toggleSection(section, si)"
               >
-                <MIcon v-if="item.icon" :name="item.icon" :size="24" />
-                <span class="flex-1 text-label-large font-medium">{{ item.label }}</span>
-                <span
-                  v-if="item.badge != null"
-                  class="text-label-medium text-on-surface-variant"
-                >
-                  {{ item.badge }}
-                </span>
+                <MIcon v-if="section.icon" :name="section.icon" :size="24" class="shrink-0" />
+                <span class="flex-1 text-left text-title-small font-medium">{{ section.title }}</span>
+                <MIcon
+                  :name="isSectionOpen(section, si) ? 'expand_less' : 'expand_more'"
+                  :size="18"
+                  class="shrink-0"
+                />
               </button>
+              <p v-else-if="section.title" class="px-4 pt-4 pb-2 text-title-small font-medium text-on-surface-variant">
+                {{ section.title }}
+              </p>
+
+              <Transition name="nd-section">
+                <div v-if="!section.collapsible || isSectionOpen(section, si)" class="nd-section-grid">
+                  <div class="nd-section-body">
+                    <component
+                      :is="itemTag(item)"
+                      v-for="item in section.items"
+                      :key="item.value"
+                      :to="item.to && !item.disabled ? item.to : undefined"
+                      :type="item.to ? undefined : 'button'"
+                      class="flex w-full items-center gap-3 rounded-full py-2.5 text-left transition-colors focus-visible:outline-none"
+                      :class="[
+                        section.collapsible ? 'pl-8 pr-3' : 'px-4',
+                        item.disabled
+                          ? 'cursor-not-allowed opacity-[0.38]'
+                          : item.value === selected
+                            ? 'bg-secondary-container text-on-secondary-container'
+                            : 'cursor-pointer text-on-surface-variant hover:bg-on-surface/8',
+                      ]"
+                      :disabled="item.disabled && !item.to"
+                      @click="select(item)"
+                    >
+                      <MIcon v-if="item.icon" :name="item.icon" :size="24" />
+                      <span class="flex-1 text-label-large font-medium">{{ item.label }}</span>
+                      <span
+                        v-if="item.badge != null"
+                        class="text-label-medium text-on-surface-variant"
+                      >
+                        {{ item.badge }}
+                      </span>
+                    </component>
+                  </div>
+                </div>
+              </Transition>
             </template>
           </div>
         </nav>
@@ -96,49 +139,89 @@ watch(() => props.modelValue, (open) => {
     </Transition>
   </Teleport>
 
-  <!-- Standard (inline) variant -->
-  <nav
-    v-else
-    class="flex h-full w-72 flex-col border-r border-outline-variant bg-surface"
-  >
-    <div v-if="title || $slots.header" class="shrink-0 px-5 pt-6 pb-2">
-      <slot name="header">
-        <h2 class="text-title-small font-medium text-on-surface-variant">{{ title }}</h2>
-      </slot>
-    </div>
-    <div class="flex-1 overflow-y-auto px-3 py-2">
-      <template v-for="(section, si) in sections" :key="si">
-        <div v-if="si > 0" class="my-2 border-t border-outline-variant" />
-        <p v-if="section.title" class="px-4 pt-4 pb-2 text-title-small font-medium text-on-surface-variant">
-          {{ section.title }}
-        </p>
-        <button
-          v-for="item in section.items"
-          :key="item.value"
-          type="button"
-          class="flex w-full items-center gap-3 rounded-full px-4 py-3 text-left transition-colors focus-visible:outline-none"
-          :class="[
-            item.disabled
-              ? 'cursor-not-allowed opacity-[0.38]'
-              : item.value === selected
-                ? 'bg-secondary-container text-on-secondary-container'
-                : 'cursor-pointer text-on-surface-variant hover:bg-on-surface/8',
-          ]"
-          :disabled="item.disabled"
-          @click="select(item)"
-        >
-          <MIcon v-if="item.icon" :name="item.icon" :size="24" />
-          <span class="flex-1 text-label-large font-medium">{{ item.label }}</span>
-          <span v-if="item.badge != null" class="text-label-medium text-on-surface-variant">
-            {{ item.badge }}
-          </span>
-        </button>
-      </template>
-    </div>
-  </nav>
+  <!-- ── Standard (inline) variant ──────────────────────────── -->
+  <template v-else>
+    <nav
+      class="nd-inline flex h-full shrink-0 flex-col border-r border-outline-variant bg-surface"
+      :class="collapsed ? 'nd-collapsed w-[72px]' : 'w-72'"
+    >
+      <div v-if="$slots.header" class="shrink-0">
+        <slot name="header" />
+      </div>
+      <div v-else-if="title" class="nd-collapse-h shrink-0 overflow-hidden">
+        <div class="px-5 pt-6 pb-2">
+          <h2 class="whitespace-nowrap text-title-small font-medium text-on-surface-variant">{{ title }}</h2>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-1 overflow-y-auto overflow-x-hidden px-3 py-2">
+        <template v-for="(section, si) in sections" :key="si">
+          <div v-if="si > 0" class="my-1 border-t border-outline-variant" />
+
+          <!-- Collapsible section header -->
+          <button
+            v-if="section.title && section.collapsible"
+            type="button"
+            class="mt-1 flex w-full cursor-pointer items-center gap-3 overflow-hidden whitespace-nowrap rounded-xl px-3 py-2.5 text-on-surface-variant hover:bg-on-surface/8"
+            :title="collapsed ? section.title : undefined"
+            @click="toggleSection(section, si)"
+          >
+            <MIcon v-if="section.icon" :name="section.icon" :size="24" class="shrink-0" />
+            <span class="min-w-0 flex-1 text-left text-title-small font-medium">{{ section.title }}</span>
+            <MIcon
+              :name="isSectionOpen(section, si) ? 'expand_less' : 'expand_more'"
+              :size="18"
+              class="shrink-0"
+            />
+          </button>
+
+          <!-- Static section title -->
+          <div v-else-if="section.title" class="nd-collapse-h overflow-hidden">
+            <p class="whitespace-nowrap px-4 pt-4 pb-2 text-title-small font-medium text-on-surface-variant">
+              {{ section.title }}
+            </p>
+          </div>
+
+          <Transition name="nd-section">
+            <div v-if="!section.collapsible || isSectionOpen(section, si)" class="nd-section-grid">
+              <div class="nd-section-body">
+                <component
+                  :is="itemTag(item)"
+                  v-for="item in section.items"
+                  :key="item.value"
+                  :to="item.to && !item.disabled ? item.to : undefined"
+                  :type="item.to ? undefined : 'button'"
+                  :title="collapsed ? item.label : undefined"
+                  class="flex w-full items-center gap-3 overflow-hidden whitespace-nowrap rounded-full py-2.5 text-left focus-visible:outline-none"
+                  :class="[
+                    section.collapsible && !collapsed ? 'pl-8 pr-3' : 'px-3',
+                    item.disabled
+                      ? 'cursor-not-allowed opacity-[0.38]'
+                      : item.value === selected
+                        ? 'bg-secondary-container text-on-secondary-container'
+                        : 'cursor-pointer text-on-surface-variant hover:bg-on-surface/8',
+                  ]"
+                  :disabled="item.disabled && !item.to"
+                  @click="select(item)"
+                >
+                  <MIcon v-if="item.icon" :name="item.icon" :size="24" class="shrink-0" />
+                  <span class="min-w-0 flex-1 text-label-large font-medium">{{ item.label }}</span>
+                  <span v-if="item.badge != null" class="text-label-medium text-on-surface-variant">
+                    {{ item.badge }}
+                  </span>
+                </component>
+              </div>
+            </div>
+          </Transition>
+        </template>
+      </div>
+    </nav>
+
+  </template>
 </template>
 
 <style scoped>
+/* ── Modal transitions ─────────────────────────────────── */
 .nd-scrim {
   transition: opacity 280ms ease;
 }
@@ -154,4 +237,58 @@ watch(() => props.modelValue, (open) => {
 .nd-leave-to .nd-panel {
   transform: translateX(-100%);
 }
+
+/* ── Section collapse animation ────────────────────────── */
+.nd-section-grid {
+  display: grid;
+  grid-template-rows: 1fr;
+}
+.nd-section-body {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.nd-section-enter-active {
+  transition: grid-template-rows 350ms cubic-bezier(0.2, 0, 0, 1);
+}
+.nd-section-enter-active > .nd-section-body {
+  transition: opacity 250ms 80ms cubic-bezier(0.2, 0, 0, 1);
+}
+.nd-section-enter-from {
+  grid-template-rows: 0fr;
+}
+.nd-section-enter-from > .nd-section-body {
+  opacity: 0;
+}
+
+.nd-section-leave-active {
+  transition: grid-template-rows 280ms cubic-bezier(0.4, 0, 1, 1);
+}
+.nd-section-leave-active > .nd-section-body {
+  transition: opacity 150ms cubic-bezier(0.4, 0, 1, 1);
+}
+.nd-section-leave-to {
+  grid-template-rows: 0fr;
+}
+.nd-section-leave-to > .nd-section-body {
+  opacity: 0;
+}
+
+/* ── Inline sidebar width transition ───────────────────── */
+.nd-inline {
+  transition: width 300ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+/* Elements that should collapse to 0 height when sidebar is collapsed */
+.nd-inline .nd-collapse-h {
+  max-height: 80px;
+  transition: max-height 300ms cubic-bezier(0.2, 0, 0, 1);
+}
+.nd-inline.nd-collapsed .nd-collapse-h {
+  max-height: 0;
+}
+
+.nd-inline .nd-section-body > * {
+  transition: padding 300ms cubic-bezier(0.2, 0, 0, 1);
+}
 </style>

package/src/components/MSplitter.vue

@@ -80,9 +80,11 @@ onBeforeUnmount(() => {
           : 'h-2 cursor-row-resize flex-row',
         dragging ? 'bg-primary/20' : 'bg-outline-variant/40 hover:bg-primary/12',
       ]"
+      style="touch-action: none"
       @pointerdown="onPointerDown"
       @pointermove="onPointerMove"
       @pointerup="onPointerUp"
+      @pointercancel="onPointerUp"
     >
       <div
         class="rounded-full bg-outline"