[{"data":1,"prerenderedAt":747},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Faspect-ratio":313,"\u002Fcomponents\u002Faspect-ratio-surround":742},[4,24,41,48,293,298,303,308],{"title":5,"path":6,"stem":7,"children":8,"package":11,"icon":23},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,13,18],{"title":10,"path":6,"stem":7,"package":11,"icon":12},"Introduction",null,"i-lucide-house",{"title":14,"path":15,"stem":16,"package":11,"icon":17},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":19,"path":20,"stem":21,"package":11,"icon":22},"Icons","\u002Fgetting-started\u002Ficons","1.getting-started\u002F3.icons","i-lucide-sparkles","i-lucide-rocket",{"title":25,"package":11,"icon":26,"path":27,"stem":28,"children":29,"page":40},"Packages","i-lucide-package","\u002Fpackages","2.packages",[30,35],{"title":31,"path":32,"stem":33,"package":11,"icon":34},"@vyui\u002Fcore","\u002Fpackages\u002Fcore","2.packages\u002F1.core","i-lucide-box",{"title":36,"path":37,"stem":38,"package":11,"icon":39},"@vyui\u002Fkit","\u002Fpackages\u002Fkit","2.packages\u002F2.kit","i-lucide-layers",false,{"title":42,"path":43,"stem":44,"children":45,"package":11,"icon":47},"CLI","\u002Fcli","3.cli\u002F1.index",[46],{"title":42,"path":43,"stem":44,"package":11,"icon":47},"i-lucide-terminal",{"title":49,"package":11,"icon":50,"path":51,"stem":52,"children":53},"Components","i-lucide-layout-grid","\u002Fcomponents","3.components",[54,56,62,67,72,77,82,87,92,97,102,107,112,117,122,127,132,136,141,145,150,155,160,165,170,175,180,185,190,195,200,205,210,215,220,225,230,234,238,243,248,253,258,263,268,272,276,280,284,288],{"title":49,"path":51,"stem":55,"package":11,"icon":50},"3.components\u002Findex",{"title":57,"path":58,"stem":59,"package":60,"icon":61},"Accordion","\u002Fcomponents\u002Faccordion","3.components\u002Faccordion","kit","i-lucide-list-collapse",{"title":63,"path":64,"stem":65,"package":60,"icon":66},"Action Sheet","\u002Fcomponents\u002Faction-sheet","3.components\u002Faction-sheet","i-lucide-panel-bottom",{"title":68,"path":69,"stem":70,"package":60,"icon":71},"Alert","\u002Fcomponents\u002Falert","3.components\u002Falert","i-lucide-triangle-alert",{"title":73,"path":74,"stem":75,"package":76,"icon":71},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","3.components\u002Falert-dialog","core",{"title":78,"path":79,"stem":80,"package":60,"icon":81},"Aspect Ratio","\u002Fcomponents\u002Faspect-ratio","3.components\u002Faspect-ratio","i-lucide-ratio",{"title":83,"path":84,"stem":85,"package":60,"icon":86},"Avatar","\u002Fcomponents\u002Favatar","3.components\u002Favatar","i-lucide-circle-user-round",{"title":88,"path":89,"stem":90,"package":60,"icon":91},"Avatar Group","\u002Fcomponents\u002Favatar-group","3.components\u002Favatar-group","i-lucide-users-round",{"title":93,"path":94,"stem":95,"package":60,"icon":96},"Button","\u002Fcomponents\u002Fbutton","3.components\u002Fbutton","i-lucide-square-mouse-pointer",{"title":98,"path":99,"stem":100,"package":60,"icon":101},"Calendar","\u002Fcomponents\u002Fcalendar","3.components\u002Fcalendar","i-lucide-calendar-days",{"title":103,"path":104,"stem":105,"package":60,"icon":106},"Card","\u002Fcomponents\u002Fcard","3.components\u002Fcard","i-lucide-square",{"title":108,"path":109,"stem":110,"package":60,"icon":111},"Checkbox","\u002Fcomponents\u002Fcheckbox","3.components\u002Fcheckbox","i-lucide-square-check",{"title":113,"path":114,"stem":115,"package":76,"icon":116},"Collapsible","\u002Fcomponents\u002Fcollapsible","3.components\u002Fcollapsible","i-lucide-chevrons-down-up",{"title":118,"path":119,"stem":120,"package":76,"icon":121},"Dialog","\u002Fcomponents\u002Fdialog","3.components\u002Fdialog","i-lucide-app-window",{"title":123,"path":124,"stem":125,"package":76,"icon":126},"Draggable","\u002Fcomponents\u002Fdraggable","3.components\u002Fdraggable","i-lucide-move",{"title":128,"path":129,"stem":130,"package":60,"icon":131},"Form","\u002Fcomponents\u002Fform","3.components\u002Fform","i-lucide-clipboard-list",{"title":133,"path":134,"stem":135,"package":76,"icon":22},"Icon","\u002Fcomponents\u002Ficon","3.components\u002Ficon",{"title":137,"path":138,"stem":139,"package":60,"icon":140},"Input","\u002Fcomponents\u002Finput","3.components\u002Finput","i-lucide-text-cursor-input",{"title":142,"path":143,"stem":144,"package":60,"icon":66},"Island","\u002Fcomponents\u002Fisland","3.components\u002Fisland",{"title":146,"path":147,"stem":148,"package":60,"icon":149},"Island Button","\u002Fcomponents\u002Fisland-button","3.components\u002Fisland-button","i-lucide-circle-ellipsis",{"title":151,"path":152,"stem":153,"package":60,"icon":154},"Island Group","\u002Fcomponents\u002Fisland-group","3.components\u002Fisland-group","i-lucide-panels-top-left",{"title":156,"path":157,"stem":158,"package":60,"icon":159},"KeyboardAware","\u002Fcomponents\u002Fkeyboard-aware","3.components\u002Fkeyboard-aware","i-lucide-keyboard",{"title":161,"path":162,"stem":163,"package":60,"icon":164},"Label","\u002Fcomponents\u002Flabel","3.components\u002Flabel","i-lucide-tag",{"title":166,"path":167,"stem":168,"package":60,"icon":169},"Modal","\u002Fcomponents\u002Fmodal","3.components\u002Fmodal","i-lucide-gallery-vertical-end",{"title":171,"path":172,"stem":173,"package":76,"icon":174},"Navigation","\u002Fcomponents\u002Fnavigation","3.components\u002Fnavigation","i-lucide-route",{"title":176,"path":177,"stem":178,"package":60,"icon":179},"Number Field","\u002Fcomponents\u002Fnumber-field","3.components\u002Fnumber-field","i-lucide-list-plus",{"title":181,"path":182,"stem":183,"package":76,"icon":184},"Pagination","\u002Fcomponents\u002Fpagination","3.components\u002Fpagination","i-lucide-ellipsis",{"title":186,"path":187,"stem":188,"package":60,"icon":189},"Pin Input","\u002Fcomponents\u002Fpin-input","3.components\u002Fpin-input","i-lucide-key-round",{"title":191,"path":192,"stem":193,"package":60,"icon":194},"Placeholder","\u002Fcomponents\u002Fplaceholder","3.components\u002Fplaceholder","i-lucide-square-dashed",{"title":196,"path":197,"stem":198,"package":60,"icon":199},"Popover","\u002Fcomponents\u002Fpopover","3.components\u002Fpopover","i-lucide-message-square-more",{"title":201,"path":202,"stem":203,"package":60,"icon":204},"Progress","\u002Fcomponents\u002Fprogress","3.components\u002Fprogress","i-lucide-chart-no-axes-column-increasing",{"title":206,"path":207,"stem":208,"package":60,"icon":209},"Radio Group","\u002Fcomponents\u002Fradio-group","3.components\u002Fradio-group","i-lucide-circle-dot",{"title":211,"path":212,"stem":213,"package":60,"icon":214},"Rating","\u002Fcomponents\u002Frating","3.components\u002Frating","i-lucide-star",{"title":216,"path":217,"stem":218,"package":76,"icon":219},"Scroll View","\u002Fcomponents\u002Fscroll-view","3.components\u002Fscroll-view","i-lucide-scroll",{"title":221,"path":222,"stem":223,"package":60,"icon":224},"Select","\u002Fcomponents\u002Fselect","3.components\u002Fselect","i-lucide-list-check",{"title":226,"path":227,"stem":228,"package":60,"icon":229},"Separator","\u002Fcomponents\u002Fseparator","3.components\u002Fseparator","i-lucide-separator-horizontal",{"title":231,"path":232,"stem":233,"package":76,"icon":66},"Sheet","\u002Fcomponents\u002Fsheet","3.components\u002Fsheet",{"title":235,"path":236,"stem":237,"package":60,"icon":154},"Skeleton","\u002Fcomponents\u002Fskeleton","3.components\u002Fskeleton",{"title":239,"path":240,"stem":241,"package":60,"icon":242},"Slider","\u002Fcomponents\u002Fslider","3.components\u002Fslider","i-lucide-sliders-horizontal",{"title":244,"path":245,"stem":246,"package":60,"icon":247},"Sortable","\u002Fcomponents\u002Fsortable","3.components\u002Fsortable","i-lucide-list-restart",{"title":249,"path":250,"stem":251,"package":60,"icon":252},"Stepper","\u002Fcomponents\u002Fstepper","3.components\u002Fstepper","i-lucide-list-ordered",{"title":254,"path":255,"stem":256,"package":60,"icon":257},"Swipe Action","\u002Fcomponents\u002Fswipe-action","3.components\u002Fswipe-action","i-lucide-move-horizontal",{"title":259,"path":260,"stem":261,"package":60,"icon":262},"Swiper","\u002Fcomponents\u002Fswiper","3.components\u002Fswiper","i-lucide-gallery-horizontal-end",{"title":264,"path":265,"stem":266,"package":60,"icon":267},"Switch","\u002Fcomponents\u002Fswitch","3.components\u002Fswitch","i-lucide-toggle-right",{"title":269,"path":270,"stem":271,"package":60,"icon":154},"Tabs","\u002Fcomponents\u002Ftabs","3.components\u002Ftabs",{"title":273,"path":274,"stem":275,"package":60,"icon":140},"Textarea","\u002Fcomponents\u002Ftextarea","3.components\u002Ftextarea",{"title":277,"path":278,"stem":279,"package":60,"icon":199},"Toast","\u002Fcomponents\u002Ftoast","3.components\u002Ftoast",{"title":281,"path":282,"stem":283,"package":60,"icon":267},"Toggle","\u002Fcomponents\u002Ftoggle","3.components\u002Ftoggle",{"title":285,"path":286,"stem":287,"package":60,"icon":154},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","3.components\u002Ftoggle-group",{"title":289,"path":290,"stem":291,"package":60,"icon":292},"Tray","\u002Fcomponents\u002Ftray","3.components\u002Ftray","i-lucide-square-dashed-bottom",{"title":294,"path":295,"stem":296,"package":11,"icon":297},"Theming","\u002Ftheming","4.theming","i-lucide-palette",{"title":299,"path":300,"stem":301,"package":11,"icon":302},"Accessibility","\u002Faccessibility","5.accessibility","i-lucide-accessibility",{"title":304,"path":305,"stem":306,"package":11,"icon":307},"i18n","\u002Fi18n","6.i18n","i-lucide-languages",{"title":309,"path":310,"stem":311,"package":11,"icon":312},"Roadmap","\u002Froadmap","7.roadmap","i-lucide-map",{"id":314,"title":78,"body":315,"description":730,"extension":731,"links":732,"meta":738,"navigation":739,"package":60,"path":79,"seo":740,"stem":80,"__hash__":741},"docs\u002F3.components\u002Faspect-ratio.md",{"type":316,"value":317,"toc":717},"minimark",[318,323,349,354,358,360,363,413,422,426,482,486,568,584,588,591,595,628,632,651,655,658,661,665,690,694,714],[319,320,322],"h2",{"id":321},"overview","Overview",[324,325,326,330,331,333,334,337,338,340,341,344,345,348],"p",{},[327,328,329],"code",{},"VyAspectRatio"," is the ",[327,332,31],{}," ",[327,335,336],{},"AspectRatio"," primitive re-exported by ",[327,339,36],{},". It renders one primitive element at ",[327,342,343],{},"width: 100%"," and applies the native CSS ",[327,346,347],{},"aspect-ratio"," property.",[350,351],"component-code",{"height":352,"name":353},"260px","aspect-ratio-example",[319,355,357],{"id":356},"usage","Usage",[350,359],{"height":352,"name":353},[324,361,362],{},"Import the component and its public type from the kit barrel.",[364,365,370],"pre",{"className":366,"code":367,"language":368,"meta":369,"style":369},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { VyAspectRatio, type AspectRatioProps } from '@vyui\u002Fkit'\n","ts","",[327,371,372],{"__ignoreMap":369},[373,374,377,381,385,389,392,395,398,401,404,407,410],"span",{"class":375,"line":376},"line",1,[373,378,380],{"class":379},"s7zQu","import",[373,382,384],{"class":383},"sMK4o"," {",[373,386,388],{"class":387},"sTEyZ"," VyAspectRatio",[373,390,391],{"class":383},",",[373,393,394],{"class":379}," type",[373,396,397],{"class":387}," AspectRatioProps",[373,399,400],{"class":383}," }",[373,402,403],{"class":379}," from",[373,405,406],{"class":383}," '",[373,408,36],{"class":409},"sfazB",[373,411,412],{"class":383},"'\n",[324,414,415,416,418,419,421],{},"The unprefixed ",[327,417,336],{}," primitive is still available from ",[327,420,31],{}," if you prefer the raw name.",[319,423,425],{"id":424},"features-and-behavior","Features and behavior",[427,428,429,448,454,457,468],"ul",{},[430,431,432,435,436,439,440,443,444,447],"li",{},[327,433,434],{},"ratio"," is width divided by height: use ",[327,437,438],{},"16 \u002F 9",", ",[327,441,442],{},"4 \u002F 3",", or ",[327,445,446],{},"1"," for a square.",[430,449,450,451,453],{},"The component sets ",[327,452,343],{}," because Lynx needs one definite dimension before it can derive the other.",[430,455,456],{},"It renders a single element rather than a padding wrapper with absolutely positioned content.",[430,458,459,460,463,464,467],{},"The default slot receives ",[327,461,462],{},"aspect",", calculated as ",[327,465,466],{},"(1 \u002F ratio) * 100",", for consumers that need the percentage form.",[430,469,470,473,474,477,478,481],{},[327,471,472],{},"as"," and ",[327,475,476],{},"asChild"," come from the core ",[327,479,480],{},"Primitive"," API.",[319,483,485],{"id":484},"props","Props",[487,488,489,508],"table",{},[490,491,492],"thead",{},[493,494,495,499,502,505],"tr",{},[496,497,498],"th",{},"Prop",[496,500,501],{},"Type",[496,503,504],{},"Default",[496,506,507],{},"Description",[509,510,511,530,549],"tbody",{},[493,512,513,518,523,527],{},[514,515,516],"td",{},[327,517,434],{},[514,519,520],{},[327,521,522],{},"number",[514,524,525],{},[327,526,446],{},[514,528,529],{},"Desired width-to-height ratio.",[493,531,532,536,541,546],{},[514,533,534],{},[327,535,472],{},[514,537,538],{},[327,539,540],{},"AsTag | Component",[514,542,543],{},[327,544,545],{},"'view'",[514,547,548],{},"Element or component to render.",[493,550,551,555,560,565],{},[514,552,553],{},[327,554,476],{},[514,556,557],{},[327,558,559],{},"boolean",[514,561,562],{},[327,563,564],{},"false",[514,566,567],{},"Merges behavior and attributes into the single child through the primitive slot mechanism.",[324,569,570,571,473,574,577,578,473,580,583],{},"Additional attributes, including ",[327,572,573],{},"class",[327,575,576],{},"style",", are forwarded to the rendered primitive. The component's inline style supplies ",[327,579,343],{},[327,581,582],{},"aspectRatio",".",[319,585,587],{"id":586},"emits","Emits",[324,589,590],{},"This component does not emit events.",[319,592,594],{"id":593},"slots","Slots",[487,596,597,608],{},[490,598,599],{},[493,600,601,604,606],{},[496,602,603],{},"Slot",[496,605,485],{},[496,607,507],{},[509,609,610],{},[493,611,612,617,622],{},[514,613,614],{},[327,615,616],{},"default",[514,618,619],{},[327,620,621],{},"{ aspect: number }",[514,623,624,625,627],{},"Content constrained by the ratio; ",[327,626,462],{}," is the percentage equivalent.",[319,629,631],{"id":630},"styling-and-theming","Styling and theming",[324,633,634,636,637,640,641,644,645,647,648,650],{},[327,635,329],{}," is not themeable through ",[327,638,639],{},"appConfig.ui"," and has no ",[327,642,643],{},"ui"," prop, slots, variants, or kit theme file. Style the component with forwarded ",[327,646,573],{}," or ",[327,649,576],{},", and style its child so it fills the available box.",[350,652],{"height":653,"name":654},"220px","aspect-ratio-variants",[319,656,299],{"id":657},"accessibility",[324,659,660],{},"The ratio wrapper is structural and adds no role. Accessibility comes from its content: provide meaningful alternative text or native accessibility labeling for images and other media. Decorative media should be treated as decorative by the consuming application.",[319,662,664],{"id":663},"platform-notes","Platform notes",[427,666,667,673,676,683],{},[430,668,669,670,672],{},"Lynx Starlight supports the ",[327,671,347],{}," property directly.",[430,674,675],{},"If you want height to be the definite dimension, override the default width and provide an explicit height.",[430,677,678,679,682],{},"Avoid ",[327,680,681],{},"ratio={0}"," or negative ratios; the component does not validate the value.",[430,684,685,686,689],{},"The root exposes ",[327,687,688],{},"data-vyui-aspect-ratio"," with the current numeric ratio.",[319,691,693],{"id":692},"related-components","Related components",[427,695,696,704,709],{},[430,697,698,703],{},[699,700,701],"a",{"href":84},[327,702,83],{}," for circular profile imagery.",[430,705,706,708],{},[327,707,235],{}," for fixed-ratio loading placeholders.",[430,710,711,713],{},[327,712,103],{}," for framed media and content.",[576,715,716],{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":369,"searchDepth":376,"depth":718,"links":719},2,[720,721,722,723,724,725,726,727,728,729],{"id":321,"depth":718,"text":322},{"id":356,"depth":718,"text":357},{"id":424,"depth":718,"text":425},{"id":484,"depth":718,"text":485},{"id":586,"depth":718,"text":587},{"id":593,"depth":718,"text":594},{"id":630,"depth":718,"text":631},{"id":657,"depth":718,"text":299},{"id":663,"depth":718,"text":664},{"id":692,"depth":718,"text":693},"Constrain content to a fixed width-to-height ratio.","md",[733],{"label":734,"icon":735,"to":736,"target":737},"Core source","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002FKealanAU\u002Fvyui\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fcomponents\u002FAspectRatio\u002FAspectRatioRoot.vue","_blank",{},{"icon":81},{"title":78,"description":730},"__qXc6jHBc96FItHduommWvgTB5aV1u7kIDJsbXcsIA",[743,745],{"title":73,"path":74,"stem":75,"description":744,"icon":-1,"children":-1,"navigation":-1},"Headless confirmation dialog primitive that interrupts the user with a required action or cancel.",{"title":83,"path":84,"stem":85,"description":746,"icon":-1,"children":-1,"navigation":-1},"Display a profile image with text, icon, and status fallbacks.",1783464076156]