[{"data":1,"prerenderedAt":240},["ShallowReactive",2],{"github-repository":3,"navigation":5,"\u002Fdocs\u002Fcomponents\u002Fresize-motion":96,"surround-\u002Fdocs\u002Fcomponents\u002Fresize-motion":237},{"stargazersCount":4},43,[6],{"title":7,"path":8,"stem":9,"children":10,"page":95},"Docs","\u002Fdocs","docs",[11,34],{"path":8,"stem":9,"title":12,"type":13,"children":14},"Overview","group",[15,21,25,29],{"title":16,"path":17,"stem":18,"tag":19,"type":20,"children":-1},"Introduction","\u002Fdocs\u002Fintroduction","docs\u002F1.introduction",null,"page",{"title":22,"path":23,"stem":24,"tag":19,"type":20,"children":-1},"Getting Started","\u002Fdocs\u002Fgetting-started","docs\u002F2.getting-started",{"title":26,"path":27,"stem":28,"tag":19,"type":20,"children":-1},"Registries","\u002Fdocs\u002Fregistries","docs\u002F3.registries",{"path":30,"stem":31,"title":32,"type":33},"\u002Fllms.txt","llms.txt","Llms.txt","asset",{"title":35,"path":36,"stem":37,"children":38,"page":95,"type":13},"Components","\u002Fdocs\u002Fcomponents","docs\u002Fcomponents",[39,45,49,54,59,63,67,71,75,79,83,87,91],{"title":40,"path":41,"stem":42,"tag":43,"type":44,"children":-1},"ActionSheet","\u002Fdocs\u002Fcomponents\u002Faction-sheet","docs\u002Fcomponents\u002Faction-sheet","new","component",{"title":46,"path":47,"stem":48,"tag":43,"type":44,"children":-1},"Autocomplete","\u002Fdocs\u002Fcomponents\u002Fautocomplete","docs\u002Fcomponents\u002Fautocomplete",{"title":50,"path":51,"stem":52,"tag":53,"type":44,"children":-1},"Color","\u002Fdocs\u002Fcomponents\u002Fcolor","docs\u002Fcomponents\u002Fcolor","alpha",{"title":55,"path":56,"stem":57,"tag":58,"type":44,"children":-1},"Filters","\u002Fdocs\u002Fcomponents\u002Ffilters","docs\u002Fcomponents\u002Ffilters","updated",{"title":60,"path":61,"stem":62,"tag":43,"type":44,"children":-1},"Gallery","\u002Fdocs\u002Fcomponents\u002Fgallery","docs\u002Fcomponents\u002Fgallery",{"title":64,"path":65,"stem":66,"tag":43,"type":44,"children":-1},"Image","\u002Fdocs\u002Fcomponents\u002Fimage","docs\u002Fcomponents\u002Fimage",{"title":68,"path":69,"stem":70,"tag":43,"type":44,"children":-1},"Image Viewer","\u002Fdocs\u002Fcomponents\u002Fimage-viewer","docs\u002Fcomponents\u002Fimage-viewer",{"title":72,"path":73,"stem":74,"tag":43,"type":44,"children":-1},"PasswordField","\u002Fdocs\u002Fcomponents\u002Fpassword-field","docs\u002Fcomponents\u002Fpassword-field",{"title":76,"path":77,"stem":78,"tag":43,"type":44,"children":-1},"PhoneField","\u002Fdocs\u002Fcomponents\u002Fphone-field","docs\u002Fcomponents\u002Fphone-field",{"title":80,"path":81,"stem":82,"tag":43,"type":44,"children":-1},"ResizeMotion","\u002Fdocs\u002Fcomponents\u002Fresize-motion","docs\u002Fcomponents\u002Fresize-motion",{"title":84,"path":85,"stem":86,"tag":43,"type":44,"children":-1},"Stack Menu","\u002Fdocs\u002Fcomponents\u002Fstack-menu","docs\u002Fcomponents\u002Fstack-menu",{"title":88,"path":89,"stem":90,"tag":43,"type":44,"children":-1},"TimeField","\u002Fdocs\u002Fcomponents\u002Ftime-field","docs\u002Fcomponents\u002Ftime-field",{"title":92,"path":93,"stem":94,"tag":43,"type":44,"children":-1},"Timeline","\u002Fdocs\u002Fcomponents\u002Ftimeline","docs\u002Fcomponents\u002Ftimeline",false,{"id":97,"title":80,"body":98,"description":230,"extension":231,"meta":232,"navigation":233,"path":81,"rawbody":234,"seo":235,"stem":82,"tag":43,"__hash__":236},"content\u002Fdocs\u002Fcomponents\u002Fresize-motion.md",{"type":99,"value":100,"toc":223},"minimark",[101,105,110,183,187,191,196,200],[102,103],"component-preview",{"name":104},"ResizeMotionDemo",[106,107,109],"h2",{"id":108},"features","Features",[111,112,113,121,135,141,147,167],"ul",{},[114,115,116,120],"li",{},[117,118,119],"strong",{},"Animated height"," — Observes the slotted content and transitions the wrapper height when it changes",[114,122,123,126,127,131,132],{},[117,124,125],{},"Min and max height"," — Clamp the rendered height with ",[128,129,130],"code",{},"min-height"," and ",[128,133,134],{},"max-height",[114,136,137,140],{},[117,138,139],{},"Scroll support"," — Keeps overflow inside the internal viewport when content exceeds the maximum height",[114,142,143,146],{},[117,144,145],{},"Disabled state"," — Lock the current height while content changes should not animate",[114,148,149,152,153,156,157,156,160,163,164],{},[117,150,151],{},"Animation control"," — Use ",[128,154,155],{},"linear",", ",[128,158,159],{},"spring",[128,161,162],{},"none",", or provide a custom CSS ",[128,165,166],{},"transition",[114,168,169,172,173,156,176,179,180],{},[117,170,171],{},"Lifecycle emits"," — Listen to ",[128,174,175],{},"resize-start",[128,177,178],{},"resize",", and ",[128,181,182],{},"resize-end",[106,184,186],{"id":185},"installation","Installation",[188,189,190],"p",{},"Install from the Vuzeno registry with the shadcn-vue CLI:",[192,193],"installation-tabs",{":exec":194,"command":195},"true","shadcn-vue@latest add https:\u002F\u002Fvuzeno.com\u002Fr\u002Fresize-motion.json",[106,197,199],{"id":198},"anatomy","Anatomy",[111,201,202,211,217],{},[114,203,204,206,207,210],{},[117,205,80],{}," — Root ",[128,208,209],{},"Primitive"," that owns the measured, animated height",[114,212,213,216],{},[117,214,215],{},"Viewport"," — Internal scroll container that controls overflow behavior",[114,218,219,222],{},[117,220,221],{},"Content"," — Internal measured wrapper around the default slot",{"title":224,"searchDepth":225,"depth":225,"links":226},"",2,[227,228,229],{"id":108,"depth":225,"text":109},{"id":185,"depth":225,"text":186},{"id":198,"depth":225,"text":199},"An animated wrapper that tracks content height changes and handles constrained scrolling.","md",{},true,"---\ntitle: ResizeMotion\ndescription: An animated wrapper that tracks content height changes and handles constrained scrolling.\ntag: new\n---\n\n::component-preview\n---\nname: ResizeMotionDemo\n---\n::\n\n## Features\n\n- **Animated height** — Observes the slotted content and transitions the wrapper height when it changes\n- **Min and max height** — Clamp the rendered height with `min-height` and `max-height`\n- **Scroll support** — Keeps overflow inside the internal viewport when content exceeds the maximum height\n- **Disabled state** — Lock the current height while content changes should not animate\n- **Animation control** — Use `linear`, `spring`, `none`, or provide a custom CSS `transition`\n- **Lifecycle emits** — Listen to `resize-start`, `resize`, and `resize-end`\n\n## Installation\n\nInstall from the Vuzeno registry with the shadcn-vue CLI:\n\n::installation-tabs\n---\ncommand: shadcn-vue@latest add https:\u002F\u002Fvuzeno.com\u002Fr\u002Fresize-motion.json\nexec: true\n---\n::\n\n## Anatomy\n\n- **ResizeMotion** — Root `Primitive` that owns the measured, animated height\n- **Viewport** — Internal scroll container that controls overflow behavior\n- **Content** — Internal measured wrapper around the default slot\n",{"title":80,"description":230},"hdrFcDBL30skK64mIaUsp2acFbA9mJOZl4nifiThfhE",[238,239],{"title":76,"path":77,"stem":78,"children":-1},{"title":84,"path":85,"stem":86,"children":-1},1778258994562]