@m3ui-vue/m3ui-vue 0.4.6 → 0.4.7

package/dist/styles.css

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

package/package.json

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

package/src/components/MCircleProgressBar.vue

@@ -0,0 +1,352 @@
+<script setup lang="ts">
+import { computed, ref, watch, onMounted, onUnmounted, useId } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    value?: number;
+    indeterminate?: boolean;
+    color?: "primary" | "secondary" | "tertiary" | "error";
+    variant?: "circle" | "wavy";
+    label?: string;
+    size?: number;
+    thickness?: number;
+  }>(),
+  {
+    color: "primary",
+    variant: "wavy",
+    size: 80,
+    thickness: 3,
+  },
+);
+
+const clampedValue = computed(() => Math.min(100, Math.max(0, props.value ?? 0)));
+
+const svgColorMap: Record<"primary" | "secondary" | "tertiary" | "error", { fill: string; track: string }> = {
+  primary:   { fill: "var(--color-primary)",   track: "var(--color-primary-container)"   },
+  secondary: { fill: "var(--color-secondary)",  track: "var(--color-secondary-container)"  },
+  tertiary:  { fill: "var(--color-tertiary)",   track: "var(--color-tertiary-container)"   },
+  error:     { fill: "var(--color-error)",      track: "var(--color-error-container)"      },
+};
+const svgColor = computed(() => svgColorMap[props.color]);
+
+// ── Geometry ─────────────────────────────────────────────────────────────
+const R        = 40;
+const CIRC     = 2 * Math.PI * R;
+const BUMPS    = 12;
+const SEGS     = BUMPS * 20;
+const AMP_FRAC = 0.055;
+const WAVE_START = 10;
+
+// thickness-derived values (all scale together)
+const strokeW = computed(() => props.thickness);
+// mask must cover: stroke/2 + wave amplitude (R*AMP_FRAC) on each side + small padding
+const maskSW  = computed(() => props.thickness + Math.ceil(2 * R * AMP_FRAC) + 2); // ≥ stroke+7
+const edgeGap = computed(() => 0.75 + props.thickness * 0.25);
+
+// Vue computed — the TARGET arc length the animation follows
+const arcLen = computed(() => (clampedValue.value / 100) * CIRC);
+
+function easeInOut(t: number) {
+  return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+}
+
+// ── All animation state as plain JS variables (no Vue refs) ───────────────
+//
+// Why plain JS and not Vue refs?
+// maskArcLen = displayedArcLen − 2*effGap.  It combines:
+//   • displayedArcLen — must follow props.value smoothly (always)
+//   • effGap          — driven by appearance/completion animations
+// If we use CSS transitions for one part and rAF for the other they fight.
+// Solution: run EVERYTHING in the same rAF tick.
+//   • displayedArcLen uses exponential smoothing (~300ms feel, matches CSS ease)
+//   • effGap changes come from the animation factors below
+// DOM is updated via template refs (setAttribute), bypassing Vue's scheduler.
+
+let displayedArcLen = 0;   // smoothly follows arcLen.value (exponential, τ=130ms)
+let appearanceF     = 0;   // 0=hidden 1=visible, animated at WAVE_START threshold
+let gapF            = 1;   // 1=open  0=closed,  animated during completion phase 1
+let collapseF       = 1;   // 1=full  0=circle,  animated during completion phase 2
+let animPhase       = 0;
+
+// Per-animation: { from, to, t0 (startTime, -1=idle), dur }
+type Anim = { from: number; to: number; t0: number; dur: number };
+const appearAnim:  Anim = { from: 0, to: 0, t0: -1, dur: 500 };
+const gapAnim:     Anim = { from: 1, to: 1, t0: -1, dur: 300 };
+const collapseAnim:Anim = { from: 1, to: 1, t0: -1, dur: 800 };
+const restoreAnim: Anim = { from: 1, to: 1, t0: -1, dur: 400 };
+
+function startAnim(a: Anim, from: number, to: number, now: number) {
+  a.from = from; a.to = to; a.t0 = now;
+}
+function tickAnim(a: Anim, now: number): number {
+  if (a.t0 < 0) return a.to;
+  const t = Math.min(1, (now - a.t0) / a.dur);
+  const v = a.from + (a.to - a.from) * easeInOut(t);
+  if (t >= 1) a.t0 = -1;
+  return v;
+}
+
+// ── Watchers — write to plain JS anim objects, NOT to Vue refs ────────────
+watch(clampedValue, (v, prev) => {
+  if (props.indeterminate) return;
+  if (prev <= WAVE_START && v  >  WAVE_START) startAnim(appearAnim, appearanceF, 1, performance.now());
+  if (prev >  WAVE_START && v <= WAVE_START)  startAnim(appearAnim, appearanceF, 0, performance.now());
+
+  if (v === 100) {
+    // Snap appearance so collapse never starts mid-appear
+    appearanceF = 1; appearAnim.t0 = -1;
+    // Phase 1: close gap; tick will chain to phase 2 automatically
+    restoreAnim.t0 = -1;
+    startAnim(gapAnim, gapF, 0, performance.now());
+    collapseAnim.t0 = -1; collapseAnim.to = 1; collapseF = 1; // reset phase 2
+  } else if (prev === 100) {
+    gapAnim.t0 = -1; gapAnim.to = 1;         // clear "to===0" sentinel
+    collapseAnim.t0 = -1; collapseAnim.to = 1;
+    restoreAnim.t0 = -1;
+    // Restore gap and collapse simultaneously from wherever they are
+    startAnim(restoreAnim, Math.min(gapF, collapseF), 1, performance.now());
+  }
+});
+
+// ── Template refs for direct DOM updates ─────────────────────────────────
+const maskCircleEl  = ref<SVGCircleElement  | null>(null);
+const trackCircleEl = ref<SVGCircleElement  | null>(null);
+const wavePath      = ref(buildPath(R * AMP_FRAC, 0));
+
+// ── rAF tick — single source of truth for all visual updates ─────────────
+let lastTime: number | null = null;
+let rafId = 0;
+const PHASE_PER_MS = (2 * Math.PI / BUMPS) / 90;
+const ARC_TAU = 130; // ms time-constant for displayedArcLen smoothing
+
+function tick(now: number) {
+  const dt = lastTime !== null ? now - lastTime : 0;
+  lastTime = now;
+
+  // 1. Advance wave phase
+  animPhase -= dt * PHASE_PER_MS;
+
+  // 2. Smooth arc (exponential: 90% in ≈300ms, equivalent feel to CSS ease-out)
+  if (dt > 0) {
+    const k = 1 - Math.exp(-dt / ARC_TAU);
+    displayedArcLen += (arcLen.value - displayedArcLen) * k;
+  }
+
+  // 3. Advance appearance animation
+  appearanceF = tickAnim(appearAnim, now);
+
+  // 4. Advance completion sequence
+  //    Phase 1 (gap closing) chains automatically into Phase 2 (wave collapse)
+  if (gapAnim.t0 >= 0 || gapAnim.to === 0) {
+    gapF = tickAnim(gapAnim, now);
+    if (gapAnim.t0 < 0 && gapF <= 0 && collapseAnim.t0 < 0 && collapseAnim.to !== 0) {
+      // Phase 1 done — start phase 2
+      startAnim(collapseAnim, collapseF, 0, now);
+    }
+  }
+  if (collapseAnim.t0 >= 0 || collapseAnim.to === 0) {
+    collapseF = tickAnim(collapseAnim, now);
+  }
+
+  // 5. Advance restore animation (undoes both gap and collapse)
+  if (restoreAnim.t0 >= 0) {
+    const r = tickAnim(restoreAnim, now);
+    gapF = r; collapseF = r;
+  }
+
+  // 6. Compute derived visual values
+  const combined = appearanceF * collapseF;
+  const gap      = edgeGap.value * combined * gapF;
+  const disp     = displayedArcLen;
+  const dispGap  = CIRC - disp;
+
+  // Mask circle
+  const maskedArc = Math.max(0, disp - 2 * gap);
+  const maskAngle = -90 + (gap / CIRC) * 360;
+  const mc = maskCircleEl.value;
+  if (mc) {
+    mc.setAttribute('stroke-dasharray', `${maskedArc.toFixed(2)} ${(CIRC - maskedArc).toFixed(2)}`);
+    mc.setAttribute('transform', `rotate(${maskAngle.toFixed(3)}, 50, 50)`);
+  }
+
+  // Track circle
+  const trackLen = Math.max(0, dispGap - 2 * gap);
+  const trackOff = Math.max(0, dispGap - gap);
+  const tc = trackCircleEl.value;
+  if (tc) {
+    tc.setAttribute('stroke-dasharray', `${trackLen.toFixed(2)} ${(CIRC - trackLen).toFixed(2)}`);
+    tc.setAttribute('stroke-dashoffset', trackOff.toFixed(2));
+  }
+
+  // Wave path
+  wavePath.value = buildPath(R * AMP_FRAC * combined, animPhase);
+
+  rafId = requestAnimationFrame(tick);
+}
+
+function buildPath(amp: number, phase: number): string {
+  const pts: string[] = [];
+  for (let i = 0; i <= SEGS; i++) {
+    const theta = (2 * Math.PI * i) / SEGS - Math.PI / 2;
+    const rr    = R + amp * Math.sin(BUMPS * theta + phase);
+    const x     = 50 + rr * Math.cos(theta);
+    const y     = 50 + rr * Math.sin(theta);
+    pts.push(`${i === 0 ? "M" : "L"}${x.toFixed(2)},${y.toFixed(2)}`);
+  }
+  return pts.join("") + "Z";
+}
+
+function startRaf() { if (!rafId) rafId = requestAnimationFrame(tick); }
+function stopRaf() {
+  cancelAnimationFrame(rafId);
+  rafId = 0; lastTime = null;
+  // Reset anim objects
+  appearAnim.t0 = gapAnim.t0 = collapseAnim.t0 = restoreAnim.t0 = -1;
+}
+
+function initWavy() {
+  const v = clampedValue.value;
+  displayedArcLen = arcLen.value;
+  appearanceF = 0; gapF = 1; collapseF = 1;
+  appearAnim.t0 = gapAnim.t0 = collapseAnim.t0 = restoreAnim.t0 = -1;
+  appearAnim.to = 0; gapAnim.to = 1; collapseAnim.to = 1;
+  if (v === 100) { appearanceF = 1; gapF = 0; collapseF = 0; gapAnim.to = 0; collapseAnim.to = 0; }
+  else if (v > WAVE_START) { appearanceF = 1; appearAnim.to = 1; }
+}
+
+onMounted(() => {
+  if (props.variant === "wavy" && !props.indeterminate) {
+    initWavy();
+    startRaf();
+  }
+});
+onUnmounted(stopRaf);
+watch(() => props.variant, (v) => {
+  if (v === "wavy" && !props.indeterminate) { initWavy(); startRaf(); }
+  else stopRaf();
+});
+watch(() => props.indeterminate, (v) => {
+  if (v) stopRaf();
+  else if (props.variant === "wavy") { initWavy(); startRaf(); }
+});
+
+const maskId = useId();
+</script>
+
+<template>
+  <div class="inline-flex flex-col items-center gap-1">
+    <span v-if="label" class="text-label-small text-on-surface-variant">{{ label }}</span>
+
+    <div class="relative">
+      <svg
+        :width="size" :height="size"
+        viewBox="0 0 100 100"
+        fill="none"
+        role="progressbar"
+        :aria-valuenow="indeterminate ? undefined : clampedValue"
+        aria-valuemin="0" aria-valuemax="100"
+      >
+        <!-- ── Indeterminate — same for both variants ─────────────────── -->
+        <template v-if="indeterminate">
+          <circle cx="50" cy="50" :r="R" fill="none" :stroke-width="strokeW"
+            :style="{ stroke: svgColor.track }"
+          />
+          <circle cx="50" cy="50" :r="R" fill="none" :stroke-width="strokeW"
+            stroke-linecap="round"
+            :style="{ stroke: svgColor.fill, transformOrigin: '50px 50px', animation: 'm3-cpb-spin 1.4s linear infinite, m3-cpb-arc 3s ease-in-out infinite' }"
+          />
+        </template>
+
+        <!-- ── Wavy variant ────────────────────────────────────────────── -->
+        <template v-else-if="variant === 'wavy'">
+          <defs>
+            <mask :id="maskId" maskUnits="userSpaceOnUse">
+              <rect x="0" y="0" width="100" height="100" fill="black" />
+              <circle
+                ref="maskCircleEl"
+                cx="50" cy="50" :r="R"
+                fill="none" :stroke-width="maskSW" stroke="white"
+                stroke-dasharray="0 251"
+                transform="rotate(-90, 50, 50)"
+              />
+            </mask>
+          </defs>
+
+          <circle
+            ref="trackCircleEl"
+            cx="50" cy="50" :r="R"
+            fill="none" :stroke-width="strokeW"
+            :style="{ stroke: svgColor.track }"
+            stroke-dasharray="251 0"
+            transform="rotate(-90, 50, 50)"
+          />
+
+          <path
+            :d="wavePath"
+            fill="none" :stroke-width="strokeW"
+            stroke-linecap="round" stroke-linejoin="round"
+            :mask="`url(#${maskId})`"
+            :style="{ stroke: svgColor.fill }"
+          />
+        </template>
+
+        <!-- ── Circle variant ────────────────────────────────────────── -->
+        <template v-else-if="!indeterminate">
+          <circle cx="50" cy="50" :r="R" fill="none"
+            :stroke-width="strokeW" :style="{ stroke: svgColor.track }"
+          />
+          <circle cx="50" cy="50" :r="R" fill="none"
+            :stroke-width="strokeW"
+            stroke-linecap="round"
+            :style="{
+              stroke: svgColor.fill,
+              strokeDasharray: `${arcLen.toFixed(2)} ${CIRC}`,
+              transform: 'rotate(-90deg)',
+              transformOrigin: '50px 50px',
+              transition: 'stroke-dasharray 300ms ease',
+            }"
+          />
+        </template>
+
+        <!-- Percentage label — hidden when indeterminate or slot content provided -->
+        <text
+          v-if="!indeterminate && !$slots.default"
+          x="50" y="50"
+          text-anchor="middle" dominant-baseline="middle"
+          :style="{
+            fill: svgColor.fill,
+            fontSize: `${size < 60 ? 11 : 14}px`,
+            fontWeight: '600',
+            fontFamily: 'Roboto, sans-serif',
+          }"
+        >{{ clampedValue }}%</text>
+      </svg>
+
+      <!-- Slot content centered inside the ring -->
+      <div
+        v-if="$slots.default"
+        class="absolute inset-0 flex items-center justify-center"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+/* Continuous rotation — linear so speed never changes */
+@keyframes m3-cpb-spin {
+  from { transform: rotate(-90deg); }
+  to   { transform: rotate(270deg); }
+}
+
+/*
+  Arc size oscillates between ~7 % and ~70 % of the circumference (CIRC ≈ 251.3).
+  Combined with the spin at a different period (1.4 s vs 1.05 s, ratio 4:3),
+  head and tail appear to move independently — matching the M3 indeterminate feel.
+*/
+@keyframes m3-cpb-arc {
+  0%, 100% { stroke-dasharray: 18.8 232.5; }
+  50%      { stroke-dasharray: 176  75.3;  }
+}
+</style>

package/src/components/MColorPicker.vue

@@ -215,7 +215,7 @@ onUnmounted(() => {
           <div
             ref="satBrightEl"
             class="relative mb-3 h-40 w-full cursor-crosshair overflow-hidden rounded-lg"
-            :style="{ background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${hueColor})` }"
+            :style="{ background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${hueColor})`, touchAction: 'none' }"
             @pointerdown="onSBPointerDown"
             @pointermove="onSBPointerMove"
             @pointerup="onSBPointerUp"

package/src/components/MColorPickerModal.vue

@@ -171,7 +171,7 @@ function onKeydown(e: KeyboardEvent) { if (e.key === 'Escape') cancel() }
           <div
             ref="satBrightEl"
             class="relative mb-3 h-44 w-full cursor-crosshair overflow-hidden rounded-lg"
-            :style="{ background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${hueColor})` }"
+            :style="{ background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${hueColor})`, touchAction: 'none' }"
             @pointerdown="onSBPointerDown"
             @pointermove="onSBPointerMove"
             @pointerup="onSBPointerUp"

package/src/components/MNotificationHost.vue

@@ -49,14 +49,25 @@ const getStyle = (variant: string) => variantStyles[variant] ?? variantStyles.in
 <template>
   <div :class="containerClass">
     <TransitionGroup :name="isTop ? 'm3-notif-top' : 'm3-notif-bot'">
-      <div v-for="n in notifications" :key="n.id" class="notif-row w-full min-w-56 max-w-sm">
+      <div v-for="n in notifications" :key="n.id" class="notif-row relative w-full min-w-56 max-w-sm">
+        <Transition name="m3-badge">
+          <span
+            v-if="n.count >= 2"
+            class="absolute -top-1.5 -right-1.5 z-10 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-semibold leading-none text-on-primary shadow-elevation-1"
+          >
+            <Transition name="m3-count" mode="out-in">
+              <span :key="n.count">{{ n.count }}</span>
+            </Transition>
+          </span>
+        </Transition>
+
         <div
           class="notif-inner pointer-events-auto flex items-center gap-2.5 rounded px-4 py-3 shadow-elevation-2"
           :class="getStyle(n.variant).bg"
         >
           <MSpinner v-if="n.loading" :size="18" class="shrink-0" />
           <MIcon
-            v-else
+            v-else-if="n.icon !== null"
             :name="n.icon ?? getStyle(n.variant).iconName"
             :size="18"
             class="shrink-0"
@@ -160,4 +171,13 @@ const getStyle = (variant: string) => variantStyles[variant] ?? variantStyles.in
   opacity: 0;
   transform: scale(0.93);
 }
+
+.m3-badge-enter-active { transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
+.m3-badge-leave-active  { transition: opacity 0.15s ease, transform 0.15s ease; }
+.m3-badge-enter-from, .m3-badge-leave-to { opacity: 0; transform: scale(0.5); }
+
+.m3-count-enter-active { transition: opacity 0.12s ease, transform 0.12s ease; }
+.m3-count-leave-active  { transition: opacity 0.08s ease, transform 0.08s ease; }
+.m3-count-enter-from    { opacity: 0; transform: scale(1.5) translateY(-3px); }
+.m3-count-leave-to      { opacity: 0; transform: scale(0.6) translateY(2px); }
 </style>