@m3ui-vue/m3ui-vue 0.1.7 → 0.1.8

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-ebc5ef9c]{transition:opacity .28s}.nd-enter-from .nd-scrim[data-v-ebc5ef9c],.nd-leave-to .nd-scrim[data-v-ebc5ef9c]{opacity:0}.nd-panel[data-v-ebc5ef9c]{transition:transform .3s cubic-bezier(.2,0,0,1)}.nd-enter-from .nd-panel[data-v-ebc5ef9c],.nd-leave-to .nd-panel[data-v-ebc5ef9c]{transform:translate(-100%)}.nd-section-grid[data-v-ebc5ef9c]{grid-template-rows:1fr;display:grid}.nd-section-body[data-v-ebc5ef9c]{min-height:0;overflow:hidden}.nd-section-enter-active[data-v-ebc5ef9c]{transition:grid-template-rows .35s cubic-bezier(.2,0,0,1)}.nd-section-enter-active>.nd-section-body[data-v-ebc5ef9c]{transition:opacity .25s cubic-bezier(.2,0,0,1) 80ms}.nd-section-enter-from[data-v-ebc5ef9c]{grid-template-rows:0fr}.nd-section-enter-from>.nd-section-body[data-v-ebc5ef9c]{opacity:0}.nd-section-leave-active[data-v-ebc5ef9c]{transition:grid-template-rows .28s cubic-bezier(.4,0,1,1)}.nd-section-leave-active>.nd-section-body[data-v-ebc5ef9c]{transition:opacity .15s cubic-bezier(.4,0,1,1)}.nd-section-leave-to[data-v-ebc5ef9c]{grid-template-rows:0fr}.nd-section-leave-to>.nd-section-body[data-v-ebc5ef9c]{opacity:0}.nd-inline[data-v-ebc5ef9c]{transition:width .3s cubic-bezier(.2,0,0,1)}.nd-inline .nd-collapse-h[data-v-ebc5ef9c]{max-height:80px;transition:max-height .3s cubic-bezier(.2,0,0,1)}.nd-inline.nd-collapsed .nd-collapse-h[data-v-ebc5ef9c]{max-height:0}.nd-inline.nd-hidden[data-v-ebc5ef9c]{overflow:hidden}.nd-inline .nd-section-body[data-v-ebc5ef9c]>*{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}
+.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-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}@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-872ab758]{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.hue-slider[data-v-872ab758]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0006}.hue-slider[data-v-872ab758]::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0006}.m3-cmd-enter-active[data-v-da578f14],.m3-cmd-leave-active[data-v-da578f14]{transition:opacity .15s}.m3-cmd-enter-from[data-v-da578f14],.m3-cmd-leave-to[data-v-da578f14]{opacity:0}.m3-cmd-enter-active .cmd-box[data-v-da578f14],.m3-cmd-leave-active .cmd-box[data-v-da578f14]{transition:transform .15s}.m3-cmd-enter-from .cmd-box[data-v-da578f14],.m3-cmd-leave-to .cmd-box[data-v-da578f14]{transform:scale(.95)translateY(-10px)}.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)}.dt-expand-grid[data-v-fcd73278]{grid-template-rows:0fr;transition:grid-template-rows .25s cubic-bezier(.2,0,0,1);display:grid}.dt-expand-grid.dt-expand-open[data-v-fcd73278]{grid-template-rows:1fr}.dt-expand-body[data-v-fcd73278]{min-height:0;overflow:hidden}.expand-grid[data-v-89e4475b]{grid-template-rows:1fr;display:grid}.expand-body[data-v-89e4475b]{min-height:0;overflow:hidden}.expand-enter-active[data-v-89e4475b]{transition:grid-template-rows .28s cubic-bezier(.2,0,0,1)}.expand-enter-active>.expand-body[data-v-89e4475b]{transition:opacity .22s}.expand-enter-from[data-v-89e4475b]{grid-template-rows:0fr}.expand-enter-from>.expand-body[data-v-89e4475b]{opacity:0}.expand-leave-active[data-v-89e4475b]{transition:grid-template-rows .22s cubic-bezier(.4,0,1,1)}.expand-leave-active>.expand-body[data-v-89e4475b]{transition:opacity .15s}.expand-leave-to[data-v-89e4475b]{grid-template-rows:0fr}.expand-leave-to>.expand-body[data-v-89e4475b]{opacity:0}.m3-file-enter-active[data-v-34a862f0],.m3-file-leave-active[data-v-34a862f0]{transition:all .2s}.m3-file-enter-from[data-v-34a862f0],.m3-file-leave-to[data-v-34a862f0]{opacity:0;transform:translateY(-8px)}.nd-scrim[data-v-a5cf49d0]{transition:opacity .28s}.nd-enter-from .nd-scrim[data-v-a5cf49d0],.nd-leave-to .nd-scrim[data-v-a5cf49d0]{opacity:0}.nd-panel[data-v-a5cf49d0]{transition:transform .3s cubic-bezier(.2,0,0,1)}.nd-enter-from .nd-panel[data-v-a5cf49d0],.nd-leave-to .nd-panel[data-v-a5cf49d0]{transform:translate(-100%)}.nd-section-grid[data-v-a5cf49d0]{grid-template-rows:1fr;display:grid}.nd-section-body[data-v-a5cf49d0]{min-height:0;overflow:hidden}.nd-section-enter-active[data-v-a5cf49d0]{transition:grid-template-rows .35s cubic-bezier(.2,0,0,1)}.nd-section-enter-active>.nd-section-body[data-v-a5cf49d0]{transition:opacity .25s cubic-bezier(.2,0,0,1) 80ms}.nd-section-enter-from[data-v-a5cf49d0]{grid-template-rows:0fr}.nd-section-enter-from>.nd-section-body[data-v-a5cf49d0]{opacity:0}.nd-section-leave-active[data-v-a5cf49d0]{transition:grid-template-rows .28s cubic-bezier(.4,0,1,1)}.nd-section-leave-active>.nd-section-body[data-v-a5cf49d0]{transition:opacity .15s cubic-bezier(.4,0,1,1)}.nd-section-leave-to[data-v-a5cf49d0]{grid-template-rows:0fr}.nd-section-leave-to>.nd-section-body[data-v-a5cf49d0]{opacity:0}.nd-inline[data-v-a5cf49d0]{transition:width .3s cubic-bezier(.2,0,0,1);overflow:hidden}.nd-inline[data-v-a5cf49d0]>*{min-width:18rem}.nd-inline.nd-collapsed[data-v-a5cf49d0]>*{min-width:0}.nd-label[data-v-a5cf49d0]{transition:opacity .2s cubic-bezier(.2,0,0,1) 80ms}.nd-inline.nd-collapsed .nd-label[data-v-a5cf49d0]{opacity:0;transition:opacity .1s cubic-bezier(.2,0,0,1)}.nd-inline .nd-collapse-h[data-v-a5cf49d0]{max-height:80px;transition:max-height .3s cubic-bezier(.2,0,0,1)}.nd-inline.nd-collapsed .nd-collapse-h[data-v-a5cf49d0]{max-height:0}.nd-inline .nd-section-body[data-v-a5cf49d0]>*{transition:padding .3s cubic-bezier(.2,0,0,1)}@keyframes m3-wave-flow{0%{transform:translate(0)}to{transform:translate(-20px)}}@keyframes m3-progress-indeterminate{0%{left:-40%}to{left:100%}}@media (prefers-reduced-motion:reduce){.animate-\[m3-wave-flow_1\.2s_linear_infinite\],.animate-\[m3-wave-flow_0\.9s_linear_infinite\],.animate-\[m3-progress-indeterminate_1\.6s_ease-in-out_infinite\]{animation:none!important}}.m3-radio-dot[data-v-cdb650b5]{transform-box:fill-box;transform-origin:50%;transition:transform .15s;transform:scale(0)}.m3-radio-dot.is-checked[data-v-cdb650b5]{transform:scale(1)}.ss-scrim[data-v-ba5b6f4b]{transition:opacity .28s}.ss-enter-from .ss-scrim[data-v-ba5b6f4b],.ss-leave-to .ss-scrim[data-v-ba5b6f4b]{opacity:0}.ss-panel[data-v-ba5b6f4b]{transition:transform .32s cubic-bezier(.2,0,0,1),opacity .24s}.ss-enter-from .ss-panel[data-v-ba5b6f4b]{opacity:0;transform:translate(40%)}.ss-leave-to .ss-panel[data-v-ba5b6f4b]{opacity:0;transform:translate(100%)!important}@keyframes skeleton-wave-move-32ecf05b{0%{transform:translate(-100%)}60%{transform:translate(100%)}to{transform:translate(100%)}}.skeleton-wave[data-v-32ecf05b]{position:relative;overflow:hidden}.skeleton-wave[data-v-32ecf05b]:after{content:"";background:linear-gradient(90deg, transparent 0%, var(--color-on-surface) 50%, transparent 100%);opacity:.06;animation:1.8s ease-in-out infinite skeleton-wave-move-32ecf05b;position:absolute;inset:0}.toast-row[data-v-746fa345]{grid-template-rows:1fr;padding-bottom:8px;display:grid}.toast-row>.toast-inner[data-v-746fa345]{min-height:0}.m3-toast-bot-enter-active[data-v-746fa345]{transition:grid-template-rows .22s cubic-bezier(.2,0,0,1),padding-bottom .22s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-bot-enter-active>.toast-inner[data-v-746fa345]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-bot-enter-from[data-v-746fa345]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-enter-from>.toast-inner[data-v-746fa345]{opacity:0;transform:translateY(20px)scale(.94)}.m3-toast-bot-leave-active[data-v-746fa345]{transition:grid-template-rows .3s cubic-bezier(.2,0,0,1),padding-bottom .3s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-bot-leave-active>.toast-inner[data-v-746fa345]{transition:opacity .18s,transform .18s}.m3-toast-bot-leave-to[data-v-746fa345]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-leave-to>.toast-inner[data-v-746fa345]{opacity:0;transform:scale(.92)}.m3-toast-top-enter-active[data-v-746fa345]{transition:grid-template-rows .22s cubic-bezier(.2,0,0,1),padding-bottom .22s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-top-enter-active>.toast-inner[data-v-746fa345]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-top-enter-from[data-v-746fa345]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-enter-from>.toast-inner[data-v-746fa345]{opacity:0;transform:translateY(-20px)scale(.94)}.m3-toast-top-leave-active[data-v-746fa345]{transition:grid-template-rows .3s cubic-bezier(.2,0,0,1),padding-bottom .3s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-top-leave-active>.toast-inner[data-v-746fa345]{transition:opacity .18s,transform .18s}.m3-toast-top-leave-to[data-v-746fa345]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-leave-to>.toast-inner[data-v-746fa345]{opacity:0;transform:scale(.92)}@keyframes m3-toast-progress-746fa345{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.m3-spot-enter-active[data-v-51b103ff],.m3-spot-leave-active[data-v-51b103ff]{transition:opacity .15s}.m3-spot-enter-from[data-v-51b103ff],.m3-spot-leave-to[data-v-51b103ff]{opacity:0}.m3-spot-enter-active .spot-box[data-v-51b103ff],.m3-spot-leave-active .spot-box[data-v-51b103ff]{transition:transform .15s,opacity .15s}.m3-spot-enter-from .spot-box[data-v-51b103ff]{opacity:0;transform:scale(.96)translateY(-8px)}.m3-spot-leave-to .spot-box[data-v-51b103ff]{opacity:0;transform:scale(.98)}.m3-tour-highlight{box-shadow:0 0 0 4px var(--color-primary);border-radius:8px;position:relative;z-index:201!important}.m3-tour-enter-active,.m3-tour-leave-active{transition:opacity .2s}.m3-tour-enter-from,.m3-tour-leave-to{opacity:0}.m3-markdown[data-v-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.7",
+  "version": "0.1.8",
   "description": "Material 3 component library for Vue 3 + Tailwind CSS v4",
   "type": "module",
   "license": "MIT",

package/src/components/MBottomSheet.vue

@@ -41,13 +41,13 @@ const sheetStyle = computed(() => ({
 <template>
   <Teleport to="body">
     <Transition name="bs" :duration="{ enter: 320, leave: 280 }">
-      <div v-if="modelValue" class="fixed inset-0 z-[200] flex flex-col justify-end">
+      <div v-if="modelValue" class="fixed inset-0 z-200 flex flex-col justify-end">
         <!-- Scrim -->
         <div class="bs-scrim absolute inset-0 bg-black/40" @click="close" />
 
         <!-- Panel -->
         <div
-          class="bs-panel relative flex w-full flex-col rounded-t-[28px] bg-surface-container-low shadow-elevation-3"
+          class="bs-panel relative flex w-full flex-col rounded-t-xl bg-surface-container-low shadow-elevation-3"
           :class="fullHeight ? 'max-h-[92vh]' : 'max-h-[60vh]'"
           :style="sheetStyle"
         >

package/src/components/MCalendar.vue

@@ -125,7 +125,7 @@ const eventColor: Record<string, string> = {
       <div
         v-for="(day, i) in calendarDays"
         :key="i"
-        class="flex min-h-[80px] cursor-pointer flex-col border-b border-r border-outline-variant/50 p-1.5 transition-colors hover:bg-on-surface/[0.03]"
+        class="flex min-h-[80px] cursor-pointer flex-col border-b border-r border-outline-variant/50 p-1.5 transition-colors hover:bg-on-surface/3"
         :class="[
           !day.current ? 'bg-surface-container-lowest/50' : 'bg-surface',
           (i + 1) % 7 === 0 ? 'border-r-0' : '',

package/src/components/MColorPicker.vue

@@ -191,7 +191,7 @@ onUnmounted(() => {
       </button>
       <label
         v-if="label"
-        class="pointer-events-none absolute -top-2.5 left-3 bg-[var(--field-bg)] px-1 text-label-small transition-colors"
+        class="pointer-events-none absolute -top-2.5 left-3 bg-(--field-bg) px-1 text-label-small transition-colors"
         :class="open ? (error ? 'text-error' : 'text-primary') : error ? 'text-error' : 'text-on-surface-variant'"
       >
         {{ label }}
@@ -211,7 +211,7 @@ onUnmounted(() => {
         <div
           v-if="open"
           ref="panelEl"
-          class="fixed z-[500] w-[280px] rounded-lg bg-surface-container p-4 shadow-elevation-3"
+          class="fixed z-500 w-[280px] rounded-lg bg-surface-container p-4 shadow-elevation-3"
           :style="dropPos"
         >
           <!-- Saturation / Brightness area -->

package/src/components/MContextMenu.vue

@@ -51,7 +51,7 @@ defineExpose({ show, showAt, hide })
     >
       <div
         v-if="visible"
-        class="fixed inset-0 z-[200]"
+        class="fixed inset-0 z-200"
         @mousedown.self="hide"
         @contextmenu.prevent
       >

package/src/components/MDataTable.vue

@@ -248,7 +248,7 @@ function colStyle(col: DataTableColumn) {
     <!-- Table -->
     <div class="overflow-x-auto">
       <table class="w-full border-collapse">
-        <thead :class="stickyHeader ? 'sticky top-0 z-[1]' : ''">
+        <thead :class="stickyHeader ? 'sticky top-0 z-1' : ''">
           <tr class="bg-surface-container-high">
             <th v-if="hasExpand" class="w-10 px-2" :class="dense ? 'py-2' : 'py-3'" />
             <th v-if="selectable" class="w-12 px-4" :class="dense ? 'py-2' : 'py-3'">
@@ -320,8 +320,8 @@ function colStyle(col: DataTableColumn) {
               <tr
                 :class="[
                   'border-t border-outline-variant transition-colors duration-100',
-                  'hover:bg-on-surface/[0.04]',
-                  selectable && isSelected(row) ? 'bg-primary/[0.06]' : '',
+                  'hover:bg-on-surface/4',
+                  selectable && isSelected(row) ? 'bg-primary/6' : '',
                   striped ? 'even:bg-surface-container-lowest' : '',
                   selectable ? 'cursor-pointer' : '',
                 ]"
@@ -354,9 +354,15 @@ function colStyle(col: DataTableColumn) {
                 </td>
               </tr>
               <!-- Expanded content -->
-              <tr v-if="hasExpand && isExpanded(row)">
-                <td :colspan="visibleColumns.length + extraCols" class="border-t border-outline-variant/50 bg-surface-container-lowest px-6 py-4">
-                  <slot name="row-expand" :row="row" />
+              <tr v-if="hasExpand">
+                <td :colspan="visibleColumns.length + extraCols" class="border-t border-outline-variant/50 bg-surface-container-lowest p-0">
+                  <div class="dt-expand-grid" :class="isExpanded(row) ? 'dt-expand-open' : ''">
+                    <div class="dt-expand-body">
+                      <div class="px-6 py-4">
+                        <slot name="row-expand" :row="row" />
+                      </div>
+                    </div>
+                  </div>
                 </td>
               </tr>
             </template>
@@ -374,3 +380,18 @@ function colStyle(col: DataTableColumn) {
     </div>
   </div>
 </template>
+
+<style scoped>
+.dt-expand-grid {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 250ms cubic-bezier(0.2, 0, 0, 1);
+}
+.dt-expand-grid.dt-expand-open {
+  grid-template-rows: 1fr;
+}
+.dt-expand-body {
+  min-height: 0;
+  overflow: hidden;
+}
+</style>

package/src/components/MDatePicker.vue

@@ -184,7 +184,7 @@ onUnmounted(() => {
       </button>
       <label
         v-if="label"
-        class="pointer-events-none absolute -top-2.5 left-3 bg-[var(--field-bg)] px-1 text-label-small transition-colors"
+        class="pointer-events-none absolute -top-2.5 left-3 bg-(--field-bg) px-1 text-label-small transition-colors"
         :class="open ? (error ? 'text-error' : 'text-primary') : error ? 'text-error' : 'text-on-surface-variant'"
       >
         {{ label }}
@@ -205,7 +205,7 @@ onUnmounted(() => {
         <div
           v-if="open"
           ref="panelEl"
-          class="fixed z-[500] w-[320px] rounded-lg bg-surface-container p-4 shadow-elevation-3"
+          class="fixed z-500 w-[320px] rounded-lg bg-surface-container p-4 shadow-elevation-3"
           :style="dropPos"
         >
           <!-- Header -->

package/src/components/MDateRangePicker.vue

@@ -195,7 +195,7 @@ onUnmounted(() => {
       </button>
       <label
         v-if="label"
-        class="pointer-events-none absolute -top-2.5 left-3 bg-[var(--field-bg)] px-1 text-label-small transition-colors"
+        class="pointer-events-none absolute -top-2.5 left-3 bg-(--field-bg) px-1 text-label-small transition-colors"
         :class="open ? (error ? 'text-error' : 'text-primary') : error ? 'text-error' : 'text-on-surface-variant'"
       >
         {{ label }}
@@ -215,7 +215,7 @@ onUnmounted(() => {
         <div
           v-if="open"
           ref="panelEl"
-          class="fixed z-[500] w-[320px] rounded-lg bg-surface-container p-4 shadow-elevation-3"
+          class="fixed z-500 w-[320px] rounded-lg bg-surface-container p-4 shadow-elevation-3"
           :style="dropPos"
         >
           <p class="mb-2 text-center text-label-medium text-on-surface-variant">

package/src/components/MIconButton.vue

@@ -44,7 +44,6 @@ const variantClasses = computed(() => {
     :to="to || undefined"
     :type="to ? undefined : 'button'"
     :aria-label="label"
-    :title="label"
     :disabled="disabled"
     :class="[base, variantClasses]"
     :style="{ width: `${size}px`, height: `${size}px` }"

package/src/components/MJsonViewer.vue

@@ -62,7 +62,7 @@ function formatValue(val: unknown) {
     <template v-if="isExpandable">
       <button
         type="button"
-        class="group inline-flex cursor-pointer items-center gap-0.5 rounded px-0.5 hover:bg-on-surface/[0.06]"
+        class="group inline-flex cursor-pointer items-center gap-0.5 rounded px-0.5 hover:bg-on-surface/6"
         @click="expanded = !expanded"
       >
         <MIcon

package/src/components/MLoadingOverlay.vue

@@ -20,7 +20,7 @@ withDefaults(defineProps<{
     >
       <div
         v-if="visible"
-        class="fixed inset-0 z-[300] flex flex-col items-center justify-center gap-4"
+        class="fixed inset-0 z-300 flex flex-col items-center justify-center gap-4"
         :class="opaque ? 'bg-surface' : 'bg-surface/80 backdrop-blur-sm'"
       >
         <MSpinner :size="spinnerSize" class="text-primary" />

package/src/components/MMenu.vue

@@ -102,7 +102,7 @@ const origin = computed(() =>
       <div
         v-if="open"
         ref="dropdownEl"
-        class="fixed z-[500] min-w-48 overflow-y-auto overflow-x-hidden rounded-xs bg-surface-container py-1 shadow-elevation-2"
+        class="fixed z-500 min-w-48 overflow-y-auto overflow-x-hidden rounded-xs bg-surface-container py-1 shadow-elevation-2"
         :style="{ ...dropStyle, transformOrigin: origin }"
         @click="close"
       >

package/src/components/MMultiSelect.vue

@@ -263,7 +263,7 @@ const labelClasses = computed(() => {
       <div
         v-if="open"
         ref="dropdownEl"
-        class="fixed z-[500] max-h-60 overflow-auto rounded-sm bg-surface-container shadow-elevation-2"
+        class="fixed z-500 max-h-60 overflow-auto rounded-sm bg-surface-container shadow-elevation-2"
         :style="dropPos"
       >
         <!-- Search -->

package/src/components/MNavigationDrawer.vue

@@ -67,7 +67,7 @@ watch(() => props.modelValue, (open) => {
   <!-- ── 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">
+      <div v-if="modelValue" class="fixed inset-0 z-100 flex">
         <div class="nd-scrim absolute inset-0 bg-black/40" @click="close" />
 
         <nav class="nd-panel relative flex h-full w-72 max-w-[85vw] flex-col bg-surface-container shadow-elevation-3">
@@ -169,11 +169,11 @@ watch(() => props.modelValue, (open) => {
             @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>
+            <span class="nd-label 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"
+              class="nd-label shrink-0"
             />
           </button>
 
@@ -207,8 +207,8 @@ watch(() => props.modelValue, (open) => {
                   @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">
+                  <span class="nd-label min-w-0 flex-1 text-label-large font-medium">{{ item.label }}</span>
+                  <span v-if="item.badge != null" class="nd-label text-label-medium text-on-surface-variant">
                     {{ item.badge }}
                   </span>
                 </component>
@@ -279,6 +279,25 @@ watch(() => props.modelValue, (open) => {
 /* ── Inline sidebar width transition ───────────────────── */
 .nd-inline {
   transition: width 300ms cubic-bezier(0.2, 0, 0, 1);
+  overflow: hidden;
+}
+
+/* Freeze layout so content clips like a curtain during open/close */
+.nd-inline > * {
+  min-width: 18rem;
+}
+/* Collapse-to-icons: let children adapt to 72px width */
+.nd-inline.nd-collapsed > * {
+  min-width: 0;
+}
+
+/* Collapse-to-icons: fade out labels before width squishes them */
+.nd-label {
+  transition: opacity 200ms 80ms cubic-bezier(0.2, 0, 0, 1);
+}
+.nd-inline.nd-collapsed .nd-label {
+  opacity: 0;
+  transition: opacity 100ms cubic-bezier(0.2, 0, 0, 1);
 }
 
 /* Elements that should collapse to 0 height when sidebar is collapsed */
@@ -290,10 +309,6 @@ watch(() => props.modelValue, (open) => {
   max-height: 0;
 }
 
-.nd-inline.nd-hidden {
-  overflow: hidden;
-}
-
 .nd-inline .nd-section-body > * {
   transition: padding 300ms cubic-bezier(0.2, 0, 0, 1);
 }

package/src/components/MScheduler.vue

@@ -200,14 +200,14 @@ const eventColors: Record<string, string> = {
               v-for="day in visibleDays"
               :key="fmt(day)"
               class="relative h-14 border-r border-b border-outline-variant/50 p-0 last:border-r-0"
-              :class="fmt(day) === todayIso ? 'bg-primary-container/[0.05]' : ''"
+              :class="fmt(day) === todayIso ? 'bg-primary-container/5' : ''"
               @click="emit('slotClick', { date: fmt(day), hour })"
             >
               <template v-for="ev in eventsForDayHour(day, hour)" :key="ev.id">
                 <button
                   v-if="isEventStart(ev, hour)"
                   type="button"
-                  class="absolute inset-x-0.5 top-0.5 z-[5] cursor-pointer overflow-hidden rounded border-l-[3px] px-2 py-1 text-left transition-opacity hover:opacity-90"
+                  class="absolute inset-x-0.5 top-0.5 z-5 cursor-pointer overflow-hidden rounded border-l-[3px] px-2 py-1 text-left transition-opacity hover:opacity-90"
                   :class="eventColors[ev.color ?? 'primary']"
                   :style="{ height: `calc(${eventDuration(ev) * 100}% - 4px)` }"
                   @click.stop="emit('eventClick', ev)"

package/src/components/MSelect.vue

@@ -223,7 +223,7 @@ const labelClasses = computed(() => {
       <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"
+        class="fixed z-500 max-h-60 overflow-auto rounded-sm bg-surface-container py-1 shadow-elevation-2"
         :style="dropPos"
       >
         <div

package/src/components/MSideSheet.vue

@@ -40,7 +40,7 @@ const panelStyle = computed(() => ({
 <template>
   <Teleport to="body">
     <Transition name="ss" :duration="{ enter: 320, leave: 280 }">
-      <div v-if="modelValue" class="fixed inset-0 z-[200] flex justify-end">
+      <div v-if="modelValue" class="fixed inset-0 z-200 flex justify-end">
         <!-- Scrim -->
         <div class="ss-scrim absolute inset-0 bg-black/40" @click="close" />
 

package/src/components/MSnackbar.vue

@@ -85,13 +85,14 @@ const getVariantStyle = (variant: string): VariantStyle =>
       <div v-for="t in toasts" :key="t.id" class="toast-row w-full min-w-64 max-w-xs">
         <div
           class="toast-inner pointer-events-auto relative flex items-center gap-3 overflow-hidden rounded-2xl px-4 py-4 shadow-elevation-2"
-          :class="getVariantStyle(t.variant).container"
+          :class="t.color ? 'text-white ring-1 ring-inset ring-white/10' : getVariantStyle(t.variant).container"
+          :style="t.color ? { backgroundColor: t.color } : undefined"
         >
           <MIcon
-            :name="getVariantStyle(t.variant).iconName"
+            :name="t.icon ?? getVariantStyle(t.variant).iconName"
             :size="20"
             class="shrink-0"
-            :class="getVariantStyle(t.variant).icon"
+            :class="t.color ? '' : getVariantStyle(t.variant).icon"
           />
 
           <p class="flex-1 text-body-medium leading-snug">{{ t.message }}</p>
@@ -101,7 +102,7 @@ const getVariantStyle = (variant: string): VariantStyle =>
               v-if="t.action"
               type="button"
               class="cursor-pointer rounded px-2 py-1 text-label-medium font-semibold transition-colors"
-              :class="getVariantStyle(t.variant).action"
+              :class="t.color ? 'text-white/90 hover:bg-white/15' : getVariantStyle(t.variant).action"
               @click="
                 () => {
                   t.action!.onClick();
@@ -115,7 +116,7 @@ const getVariantStyle = (variant: string): VariantStyle =>
             <button
               type="button"
               class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full transition-colors"
-              :class="getVariantStyle(t.variant).close"
+              :class="t.color ? 'text-white/60 hover:bg-white/15' : getVariantStyle(t.variant).close"
               aria-label="Cerrar"
               @click="dismiss(t.id)"
             >
@@ -127,7 +128,7 @@ const getVariantStyle = (variant: string): VariantStyle =>
           <div
             v-if="t.duration > 0"
             class="absolute right-0 bottom-0 left-0 h-0.5 origin-left"
-            :class="getVariantStyle(t.variant).progress"
+            :class="t.color ? 'bg-white/30' : getVariantStyle(t.variant).progress"
             :style="{ animation: `m3-toast-progress ${t.duration}ms linear forwards` }"
           />
         </div>

package/src/components/MStepper.vue

@@ -88,7 +88,7 @@ function select(index: number) {
         class="mt-[18px] flex flex-1 items-center px-2"
       >
         <div
-          class="h-[1px] w-full transition-colors duration-300"
+          class="h-px w-full transition-colors duration-300"
           :class="i < modelValue ? 'bg-primary' : 'bg-outline-variant'"
         />
       </div>
@@ -121,7 +121,7 @@ function select(index: number) {
           <!-- Vertical connector -->
           <div
             v-if="i < steps.length - 1"
-            class="my-1 w-[1px] flex-1 transition-colors duration-300"
+            class="my-1 w-px flex-1 transition-colors duration-300"
             :class="i < modelValue ? 'bg-primary' : 'bg-outline-variant'"
             style="min-height: 24px"
           />

package/src/components/MTable.vue

@@ -359,8 +359,8 @@ const hasActions = computed(() => !!slots['row-actions'])
               :key="rowId(row)"
               :class="[
                 'border-t border-outline-variant transition-colors duration-100',
-                'hover:bg-on-surface/[0.04]',
-                selectable && isSelected(row) ? 'bg-primary/[0.06]' : '',
+                'hover:bg-on-surface/4',
+                selectable && isSelected(row) ? 'bg-primary/6' : '',
                 selectable ? 'cursor-pointer' : '',
               ]"
               @click="selectable ? toggleRow(row) : undefined"

package/src/components/MTimePicker.vue

@@ -140,7 +140,7 @@ onUnmounted(() => {
       </button>
       <label
         v-if="label"
-        class="pointer-events-none absolute -top-2.5 left-3 bg-[var(--field-bg)] px-1 text-label-small transition-colors"
+        class="pointer-events-none absolute -top-2.5 left-3 bg-(--field-bg) px-1 text-label-small transition-colors"
         :class="open ? (error ? 'text-error' : 'text-primary') : error ? 'text-error' : 'text-on-surface-variant'"
       >
         {{ label }}
@@ -160,7 +160,7 @@ onUnmounted(() => {
         <div
           v-if="open"
           ref="panelEl"
-          class="fixed z-[500] w-[280px] rounded-lg bg-surface-container shadow-elevation-3"
+          class="fixed z-500 w-[280px] rounded-lg bg-surface-container shadow-elevation-3"
           :style="dropPos"
         >
           <!-- Display -->

package/src/components/MTimeline.vue

@@ -41,7 +41,7 @@ const dotBg: Record<string, string> = {
         <!-- Line + dot -->
         <div class="flex flex-col items-center">
           <div
-            class="z-[1] flex shrink-0 items-center justify-center rounded-full"
+            class="z-1 flex shrink-0 items-center justify-center rounded-full"
             :class="[item.icon ? 'h-9 w-9' : 'h-3 w-3', dotBg[item.color ?? 'primary']]"
             :style="item.dotColor ? { backgroundColor: item.dotColor } : undefined"
           >
@@ -100,7 +100,7 @@ const dotBg: Record<string, string> = {
         <!-- Center column: dot + continuous line -->
         <div class="flex w-14 shrink-0 flex-col items-center">
           <div
-            class="z-[1] flex shrink-0 items-center justify-center rounded-full"
+            class="z-1 flex shrink-0 items-center justify-center rounded-full"
             :class="[item.icon ? 'h-9 w-9' : 'h-3.5 w-3.5', dotBg[item.color ?? 'primary']]"
             :style="item.dotColor ? { backgroundColor: item.dotColor } : undefined"
           >

package/src/components/MTooltip.vue

@@ -78,7 +78,7 @@ onUnmounted(() => window.removeEventListener('scroll', onScroll, true))
       <div
         v-if="visible && text"
         ref="tipEl"
-        class="pointer-events-none fixed z-[400] max-w-[220px] rounded bg-inverse-surface px-3 py-1.5 text-label-medium text-inverse-on-surface shadow-elevation-2"
+        class="pointer-events-none fixed z-400 max-w-[220px] rounded bg-inverse-surface px-3 py-1.5 text-label-medium text-inverse-on-surface shadow-elevation-2"
         :style="tipStyle"
         role="tooltip"
       >

package/src/components/MTour.vue

@@ -149,14 +149,14 @@ onBeforeUnmount(clearHighlight)
   <Teleport to="body">
     <!-- Overlay -->
     <Transition name="m3-tour">
-      <div v-if="modelValue && step" class="fixed inset-0 z-[200] bg-black/40" @click="close" />
+      <div v-if="modelValue && step" class="fixed inset-0 z-200 bg-black/40" @click="close" />
     </Transition>
 
     <!-- Tooltip -->
     <Transition name="m3-tour">
       <div
         v-if="modelValue && step"
-        class="fixed z-[202] w-80 rounded-xl bg-surface-container-high p-5 shadow-elevation-3"
+        class="fixed z-202 w-80 rounded-xl bg-surface-container-high p-5 shadow-elevation-3"
         :style="tooltipStyle"
       >
         <!-- Arrow -->

package/src/components/MTreeTable.vue

@@ -114,7 +114,7 @@ function alignClass(a?: string) { return a === 'center' ? 'text-center' : a ===
           <tr
             v-for="(item, i) in flatRows"
             :key="item.row[rowKey] ?? i"
-            class="border-t border-outline-variant transition-colors duration-100 hover:bg-on-surface/[0.04]"
+            class="border-t border-outline-variant transition-colors duration-100 hover:bg-on-surface/4"
             :class="item.depth > 0 ? 'bg-surface-container-lowest/50' : ''"
             @click="emit('rowClick', item.row)"
           >

package/src/components/MVirtualTable.vue

@@ -122,7 +122,7 @@ function alignClass(a?: string) { return a === 'center' ? 'text-center' : a ===
         <div
           v-for="{ row, index, top } in visibleRows"
           :key="row[rowKey] ?? index"
-          class="absolute left-0 right-0 flex border-t border-outline-variant transition-colors duration-75 hover:bg-on-surface/[0.04]"
+          class="absolute left-0 right-0 flex border-t border-outline-variant transition-colors duration-75 hover:bg-on-surface/4"
           :class="index % 2 === 0 ? '' : 'bg-surface-container-lowest/50'"
           :style="{ top: `${top}px`, height: `${rowHeight}px` }"
           @click="emit('rowClick', row)"

package/src/components/_MContextMenuPanel.vue

@@ -66,7 +66,7 @@ function onPanelMouseLeave(e: MouseEvent) {
 <template>
   <div
     ref="panel"
-    class="m3-ctx-panel absolute z-[201] min-w-[200px] rounded-sm bg-surface-container shadow-elevation-2"
+    class="m3-ctx-panel absolute z-201 min-w-[200px] rounded-sm bg-surface-container shadow-elevation-2"
     :style="{ left: `${panelX}px`, top: `${panelY}px` }"
     @mouseleave="onPanelMouseLeave"
   >

package/src/components/_MTreeNode.vue

@@ -82,9 +82,9 @@ function onAfterLeave(el: Element) {
           ? 'cursor-not-allowed opacity-38'
           : 'cursor-pointer',
         !node.disabled && isSelected
-          ? 'bg-primary/[0.10]'
+          ? 'bg-primary/10'
           : !node.disabled
-            ? 'hover:bg-on-surface/[0.04]'
+            ? 'hover:bg-on-surface/4'
             : '',
       ]"
       @click="onRowClick"

package/src/composables/useToast.ts

@@ -13,6 +13,8 @@ export interface Toast {
   variant: ToastVariant
   duration: number
   action?: ToastAction
+  icon?: string
+  color?: string
 }
 
 let nextId = 1
@@ -24,27 +26,30 @@ function dismiss(id: number) {
   toasts.value = toasts.value.filter((t) => t.id !== id)
 }
 
+export interface ToastOptions {
+  duration?: number
+  action?: ToastAction
+  icon?: string
+  color?: string
+}
+
 function show(
   message: string,
   variant: ToastVariant = 'info',
-  options: number | { duration?: number; action?: ToastAction } = {},
+  options: number | ToastOptions = {},
 ) {
   const id = nextId++
   const opts = typeof options === 'number' ? { duration: options } : options
   const duration = opts.duration ?? (variant === 'error' ? 6000 : 4000)
-  toasts.value.push({ id, message, variant, duration, action: opts.action })
+  toasts.value.push({ id, message, variant, duration, action: opts.action, icon: opts.icon, color: opts.color })
   if (duration > 0) setTimeout(() => dismiss(id), duration)
   return id
 }
 
-const success = (msg: string, opts?: { duration?: number; action?: ToastAction }) =>
-  show(msg, 'success', opts ?? {})
-const error = (msg: string, opts?: { duration?: number; action?: ToastAction }) =>
-  show(msg, 'error', opts ?? {})
-const warning = (msg: string, opts?: { duration?: number; action?: ToastAction }) =>
-  show(msg, 'warning', opts ?? {})
-const info = (msg: string, opts?: { duration?: number; action?: ToastAction }) =>
-  show(msg, 'info', opts ?? {})
+const success = (msg: string, opts?: ToastOptions) => show(msg, 'success', opts ?? {})
+const error = (msg: string, opts?: ToastOptions) => show(msg, 'error', opts ?? {})
+const warning = (msg: string, opts?: ToastOptions) => show(msg, 'warning', opts ?? {})
+const info = (msg: string, opts?: ToastOptions) => show(msg, 'info', opts ?? {})
 
 export function useToast() {
   return { toasts, position, show, success, error, warning, info, dismiss }