[{"data":1,"prerenderedAt":1680},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Fisland-group":313,"\u002Fcomponents\u002Fisland-group-surround":1675},[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":151,"body":315,"description":1663,"extension":1664,"links":1665,"meta":1671,"navigation":1672,"package":60,"path":152,"seo":1673,"stem":153,"__hash__":1674},"docs\u002F3.components\u002Fisland-group.md",{"type":316,"value":317,"toc":1647},"minimark",[318,323,335,340,344,351,863,876,881,888,974,991,995,1006,1110,1113,1117,1128,1183,1189,1193,1253,1257,1420,1435,1439,1444,1448,1471,1474,1478,1487,1511,1527,1551,1554,1559,1565,1569,1616,1620,1644],[319,320,322],"h2",{"id":321},"overview","Overview",[324,325,326,330,331,334],"p",{},[327,328,329],"code",{},"VyIslandGroup"," lays out multiple ",[327,332,333],{},"VyIsland"," surfaces and owns their shared viewport placement. Use it for a main dock with a separate action pill, paired top controls, or stacked companion islands.",[336,337],"component-code",{"height":338,"name":339},"260px","island-group-example",[319,341,343],{"id":342},"usage","Usage",[324,345,346,347,350],{},"Set each member island to ",[327,348,349],{},"layer=\"inline\""," so the group is the only component applying fixed placement.",[352,353,358],"pre",{"className":354,"code":355,"language":356,"meta":357,"style":357},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VyIsland, VyIslandButton, VyIslandGroup } from '@vyui\u002Fkit'\n\nconst visible = ref(true)\nconst section = ref\u003Cstring | number | null>('inbox')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVyIslandGroup v-if=\"visible\" position=\"bottom\">\n    \u003CVyIsland v-model:value=\"section\" layer=\"inline\" size=\"lg\">\n      \u003CVyIslandButton value=\"inbox\" icon=\"i-lucide-inbox\" \u002F>\n      \u003CVyIslandButton value=\"activity\" icon=\"i-lucide-bell\" \u002F>\n      \u003CVyIslandButton value=\"profile\" icon=\"i-lucide-user\" \u002F>\n    \u003C\u002FVyIsland>\n\n    \u003CVyIsland layer=\"inline\" size=\"lg\">\n      \u003CVyIslandButton\n        icon=\"i-lucide-x\"\n        accessibility-label=\"Hide dock\"\n        @tap=\"visible = false\"\n      \u002F>\n    \u003C\u002FVyIsland>\n  \u003C\u002FVyIslandGroup>\n\u003C\u002Ftemplate>\n","vue","",[327,359,360,395,423,454,461,485,529,539,544,554,588,634,669,700,731,741,746,775,783,799,814,829,835,844,854],{"__ignoreMap":357},[361,362,365,369,373,377,380,383,386,390,392],"span",{"class":363,"line":364},"line",1,[361,366,368],{"class":367},"sMK4o","\u003C",[361,370,372],{"class":371},"swJcz","script",[361,374,376],{"class":375},"spNyl"," setup",[361,378,379],{"class":375}," lang",[361,381,382],{"class":367},"=",[361,384,385],{"class":367},"\"",[361,387,389],{"class":388},"sfazB","ts",[361,391,385],{"class":367},[361,393,394],{"class":367},">\n",[361,396,398,402,405,409,412,415,418,420],{"class":363,"line":397},2,[361,399,401],{"class":400},"s7zQu","import",[361,403,404],{"class":367}," {",[361,406,408],{"class":407},"sTEyZ"," ref",[361,410,411],{"class":367}," }",[361,413,414],{"class":400}," from",[361,416,417],{"class":367}," '",[361,419,356],{"class":388},[361,421,422],{"class":367},"'\n",[361,424,426,428,430,433,436,439,441,444,446,448,450,452],{"class":363,"line":425},3,[361,427,401],{"class":400},[361,429,404],{"class":367},[361,431,432],{"class":407}," VyIsland",[361,434,435],{"class":367},",",[361,437,438],{"class":407}," VyIslandButton",[361,440,435],{"class":367},[361,442,443],{"class":407}," VyIslandGroup",[361,445,411],{"class":367},[361,447,414],{"class":400},[361,449,417],{"class":367},[361,451,36],{"class":388},[361,453,422],{"class":367},[361,455,457],{"class":363,"line":456},4,[361,458,460],{"emptyLinePlaceholder":459},true,"\n",[361,462,464,467,470,472,475,478,482],{"class":363,"line":463},5,[361,465,466],{"class":375},"const",[361,468,469],{"class":407}," visible ",[361,471,382],{"class":367},[361,473,408],{"class":474},"s2Zo4",[361,476,477],{"class":407},"(",[361,479,481],{"class":480},"sfNiH","true",[361,483,484],{"class":407},")\n",[361,486,488,490,493,495,497,499,503,506,509,511,514,517,519,522,525,527],{"class":363,"line":487},6,[361,489,466],{"class":375},[361,491,492],{"class":407}," section ",[361,494,382],{"class":367},[361,496,408],{"class":474},[361,498,368],{"class":367},[361,500,502],{"class":501},"sBMFI","string",[361,504,505],{"class":367}," |",[361,507,508],{"class":501}," number",[361,510,505],{"class":367},[361,512,513],{"class":501}," null",[361,515,516],{"class":367},">",[361,518,477],{"class":407},[361,520,521],{"class":367},"'",[361,523,524],{"class":388},"inbox",[361,526,521],{"class":367},[361,528,484],{"class":407},[361,530,532,535,537],{"class":363,"line":531},7,[361,533,534],{"class":367},"\u003C\u002F",[361,536,372],{"class":371},[361,538,394],{"class":367},[361,540,542],{"class":363,"line":541},8,[361,543,460],{"emptyLinePlaceholder":459},[361,545,547,549,552],{"class":363,"line":546},9,[361,548,368],{"class":367},[361,550,551],{"class":371},"template",[361,553,394],{"class":367},[361,555,557,560,562,565,567,569,572,574,577,579,581,584,586],{"class":363,"line":556},10,[361,558,559],{"class":367},"  \u003C",[361,561,329],{"class":371},[361,563,564],{"class":375}," v-if",[361,566,382],{"class":367},[361,568,385],{"class":367},[361,570,571],{"class":388},"visible",[361,573,385],{"class":367},[361,575,576],{"class":375}," position",[361,578,382],{"class":367},[361,580,385],{"class":367},[361,582,583],{"class":388},"bottom",[361,585,385],{"class":367},[361,587,394],{"class":367},[361,589,591,594,596,599,601,603,606,608,611,613,615,618,620,623,625,627,630,632],{"class":363,"line":590},11,[361,592,593],{"class":367},"    \u003C",[361,595,333],{"class":371},[361,597,598],{"class":375}," v-model:value",[361,600,382],{"class":367},[361,602,385],{"class":367},[361,604,605],{"class":388},"section",[361,607,385],{"class":367},[361,609,610],{"class":375}," layer",[361,612,382],{"class":367},[361,614,385],{"class":367},[361,616,617],{"class":388},"inline",[361,619,385],{"class":367},[361,621,622],{"class":375}," size",[361,624,382],{"class":367},[361,626,385],{"class":367},[361,628,629],{"class":388},"lg",[361,631,385],{"class":367},[361,633,394],{"class":367},[361,635,637,640,643,646,648,650,652,654,657,659,661,664,666],{"class":363,"line":636},12,[361,638,639],{"class":367},"      \u003C",[361,641,642],{"class":371},"VyIslandButton",[361,644,645],{"class":375}," value",[361,647,382],{"class":367},[361,649,385],{"class":367},[361,651,524],{"class":388},[361,653,385],{"class":367},[361,655,656],{"class":375}," icon",[361,658,382],{"class":367},[361,660,385],{"class":367},[361,662,663],{"class":388},"i-lucide-inbox",[361,665,385],{"class":367},[361,667,668],{"class":367}," \u002F>\n",[361,670,672,674,676,678,680,682,685,687,689,691,693,696,698],{"class":363,"line":671},13,[361,673,639],{"class":367},[361,675,642],{"class":371},[361,677,645],{"class":375},[361,679,382],{"class":367},[361,681,385],{"class":367},[361,683,684],{"class":388},"activity",[361,686,385],{"class":367},[361,688,656],{"class":375},[361,690,382],{"class":367},[361,692,385],{"class":367},[361,694,695],{"class":388},"i-lucide-bell",[361,697,385],{"class":367},[361,699,668],{"class":367},[361,701,703,705,707,709,711,713,716,718,720,722,724,727,729],{"class":363,"line":702},14,[361,704,639],{"class":367},[361,706,642],{"class":371},[361,708,645],{"class":375},[361,710,382],{"class":367},[361,712,385],{"class":367},[361,714,715],{"class":388},"profile",[361,717,385],{"class":367},[361,719,656],{"class":375},[361,721,382],{"class":367},[361,723,385],{"class":367},[361,725,726],{"class":388},"i-lucide-user",[361,728,385],{"class":367},[361,730,668],{"class":367},[361,732,734,737,739],{"class":363,"line":733},15,[361,735,736],{"class":367},"    \u003C\u002F",[361,738,333],{"class":371},[361,740,394],{"class":367},[361,742,744],{"class":363,"line":743},16,[361,745,460],{"emptyLinePlaceholder":459},[361,747,749,751,753,755,757,759,761,763,765,767,769,771,773],{"class":363,"line":748},17,[361,750,593],{"class":367},[361,752,333],{"class":371},[361,754,610],{"class":375},[361,756,382],{"class":367},[361,758,385],{"class":367},[361,760,617],{"class":388},[361,762,385],{"class":367},[361,764,622],{"class":375},[361,766,382],{"class":367},[361,768,385],{"class":367},[361,770,629],{"class":388},[361,772,385],{"class":367},[361,774,394],{"class":367},[361,776,778,780],{"class":363,"line":777},18,[361,779,639],{"class":367},[361,781,782],{"class":371},"VyIslandButton\n",[361,784,786,789,791,793,796],{"class":363,"line":785},19,[361,787,788],{"class":375},"        icon",[361,790,382],{"class":367},[361,792,385],{"class":367},[361,794,795],{"class":388},"i-lucide-x",[361,797,798],{"class":367},"\"\n",[361,800,802,805,807,809,812],{"class":363,"line":801},20,[361,803,804],{"class":375},"        accessibility-label",[361,806,382],{"class":367},[361,808,385],{"class":367},[361,810,811],{"class":388},"Hide dock",[361,813,798],{"class":367},[361,815,817,820,822,824,827],{"class":363,"line":816},21,[361,818,819],{"class":375},"        @tap",[361,821,382],{"class":367},[361,823,385],{"class":367},[361,825,826],{"class":388},"visible = false",[361,828,798],{"class":367},[361,830,832],{"class":363,"line":831},22,[361,833,834],{"class":367},"      \u002F>\n",[361,836,838,840,842],{"class":363,"line":837},23,[361,839,736],{"class":367},[361,841,333],{"class":371},[361,843,394],{"class":367},[361,845,847,850,852],{"class":363,"line":846},24,[361,848,849],{"class":367},"  \u003C\u002F",[361,851,329],{"class":371},[361,853,394],{"class":367},[361,855,857,859,861],{"class":363,"line":856},25,[361,858,534],{"class":367},[361,860,551],{"class":371},[361,862,394],{"class":367},[324,864,865,867,868,871,872,875],{},[327,866,329],{}," does not provide island context. Its ",[327,869,870],{},"size"," prop controls spacing between members, while each ",[327,873,874],{},"VyIsland.size"," controls that island and its buttons.",[877,878,880],"h3",{"id":879},"edge-alignment","Edge alignment",[324,882,883,884,887],{},"Use ",[327,885,886],{},"align=\"between\""," to pin the first and last members to opposite sides of the viewport strip.",[352,889,891],{"className":354,"code":890,"language":356,"meta":357,"style":357},"\u003CVyIslandGroup position=\"top\" align=\"between\">\n  \u003CVyIsland layer=\"inline\" size=\"sm\">\n    \u003CVyIslandButton icon=\"i-lucide-arrow-left\" accessibility-label=\"Go back\" \u002F>\n    \u003CVyIslandButton label=\"Inbox\" \u002F>\n  \u003C\u002FVyIsland>\n\n  \u003CVyIsland layer=\"inline\" size=\"sm\">\n    \u003CVyIslandButton icon=\"i-lucide-share-2\" accessibility-label=\"Share\" \u002F>\n    \u003CVyIslandButton icon=\"i-lucide-ellipsis\" accessibility-label=\"More actions\" \u002F>\n  \u003C\u002FVyIsland>\n\u003C\u002FVyIslandGroup>\n",[327,892,893,924,929,934,939,944,948,952,957,962,966],{"__ignoreMap":357},[361,894,895,897,899,901,903,905,908,910,913,915,917,920,922],{"class":363,"line":364},[361,896,368],{"class":367},[361,898,329],{"class":371},[361,900,576],{"class":375},[361,902,382],{"class":367},[361,904,385],{"class":367},[361,906,907],{"class":388},"top",[361,909,385],{"class":367},[361,911,912],{"class":407}," align",[361,914,382],{"class":367},[361,916,385],{"class":367},[361,918,919],{"class":388},"between",[361,921,385],{"class":367},[361,923,394],{"class":367},[361,925,926],{"class":363,"line":397},[361,927,928],{"class":407},"  \u003CVyIsland layer=\"inline\" size=\"sm\">\n",[361,930,931],{"class":363,"line":425},[361,932,933],{"class":407},"    \u003CVyIslandButton icon=\"i-lucide-arrow-left\" accessibility-label=\"Go back\" \u002F>\n",[361,935,936],{"class":363,"line":456},[361,937,938],{"class":407},"    \u003CVyIslandButton label=\"Inbox\" \u002F>\n",[361,940,941],{"class":363,"line":463},[361,942,943],{"class":407},"  \u003C\u002FVyIsland>\n",[361,945,946],{"class":363,"line":487},[361,947,460],{"emptyLinePlaceholder":459},[361,949,950],{"class":363,"line":531},[361,951,928],{"class":407},[361,953,954],{"class":363,"line":541},[361,955,956],{"class":407},"    \u003CVyIslandButton icon=\"i-lucide-share-2\" accessibility-label=\"Share\" \u002F>\n",[361,958,959],{"class":363,"line":546},[361,960,961],{"class":407},"    \u003CVyIslandButton icon=\"i-lucide-ellipsis\" accessibility-label=\"More actions\" \u002F>\n",[361,963,964],{"class":363,"line":556},[361,965,943],{"class":407},[361,967,968,970,972],{"class":363,"line":590},[361,969,534],{"class":367},[361,971,329],{"class":371},[361,973,394],{"class":367},[324,975,976,979,980,983,984,986,987,990],{},[327,977,978],{},"start",", ",[327,981,982],{},"end",", and ",[327,985,919],{}," add 16 pixels of outer horizontal padding. ",[327,988,989],{},"center"," has no group-level horizontal padding.",[877,992,994],{"id":993},"vertical-groups","Vertical groups",[324,996,997,998,1001,1002,1005],{},"Set ",[327,999,1000],{},"direction=\"col\""," to stack islands. In column mode, ",[327,1003,1004],{},"align"," maps to the vertical main axis of the flex container.",[352,1007,1009],{"className":354,"code":1008,"language":356,"meta":357,"style":357},"\u003CVyIslandGroup\n  layer=\"inline\"\n  direction=\"col\"\n  align=\"start\"\n  size=\"sm\"\n>\n  \u003CVyIsland layer=\"inline\" size=\"sm\">\n    \u003CVyIslandButton icon=\"i-lucide-zoom-in\" accessibility-label=\"Zoom in\" \u002F>\n  \u003C\u002FVyIsland>\n  \u003CVyIsland layer=\"inline\" size=\"sm\">\n    \u003CVyIslandButton icon=\"i-lucide-zoom-out\" accessibility-label=\"Zoom out\" \u002F>\n  \u003C\u002FVyIsland>\n\u003C\u002FVyIslandGroup>\n",[327,1010,1011,1018,1031,1045,1058,1072,1076,1080,1085,1089,1093,1098,1102],{"__ignoreMap":357},[361,1012,1013,1015],{"class":363,"line":364},[361,1014,368],{"class":367},[361,1016,1017],{"class":371},"VyIslandGroup\n",[361,1019,1020,1023,1025,1027,1029],{"class":363,"line":397},[361,1021,1022],{"class":375},"  layer",[361,1024,382],{"class":367},[361,1026,385],{"class":367},[361,1028,617],{"class":388},[361,1030,798],{"class":367},[361,1032,1033,1036,1038,1040,1043],{"class":363,"line":425},[361,1034,1035],{"class":375},"  direction",[361,1037,382],{"class":367},[361,1039,385],{"class":367},[361,1041,1042],{"class":388},"col",[361,1044,798],{"class":367},[361,1046,1047,1050,1052,1054,1056],{"class":363,"line":456},[361,1048,1049],{"class":407},"  align",[361,1051,382],{"class":367},[361,1053,385],{"class":367},[361,1055,978],{"class":388},[361,1057,798],{"class":367},[361,1059,1060,1063,1065,1067,1070],{"class":363,"line":463},[361,1061,1062],{"class":375},"  size",[361,1064,382],{"class":367},[361,1066,385],{"class":367},[361,1068,1069],{"class":388},"sm",[361,1071,798],{"class":367},[361,1073,1074],{"class":363,"line":487},[361,1075,394],{"class":367},[361,1077,1078],{"class":363,"line":531},[361,1079,928],{"class":407},[361,1081,1082],{"class":363,"line":541},[361,1083,1084],{"class":407},"    \u003CVyIslandButton icon=\"i-lucide-zoom-in\" accessibility-label=\"Zoom in\" \u002F>\n",[361,1086,1087],{"class":363,"line":546},[361,1088,943],{"class":407},[361,1090,1091],{"class":363,"line":556},[361,1092,928],{"class":407},[361,1094,1095],{"class":363,"line":590},[361,1096,1097],{"class":407},"    \u003CVyIslandButton icon=\"i-lucide-zoom-out\" accessibility-label=\"Zoom out\" \u002F>\n",[361,1099,1100],{"class":363,"line":636},[361,1101,943],{"class":407},[361,1103,1104,1106,1108],{"class":363,"line":671},[361,1105,534],{"class":367},[361,1107,329],{"class":371},[361,1109,394],{"class":367},[324,1111,1112],{},"For inline groups, the parent layout owns final placement. This is useful for map controls, card toolbars, and previews that must not float over the viewport.",[877,1114,1116],{"id":1115},"layering","Layering",[324,1118,1119,1120,1123,1124,1127],{},"The group defaults to ",[327,1121,1122],{},"layer=\"overlay\"",". Use ",[327,1125,1126],{},"base"," for persistent navigation that should sit below drawers and modals.",[352,1129,1131],{"className":354,"code":1130,"language":356,"meta":357,"style":357},"\u003CVyIslandGroup position=\"bottom\" layer=\"base\">\n  \u003CVyIsland layer=\"inline\">\n    \u003CVyIslandButton icon=\"i-lucide-home\" label=\"Home\" \u002F>\n  \u003C\u002FVyIsland>\n\u003C\u002FVyIslandGroup>\n",[327,1132,1133,1161,1166,1171,1175],{"__ignoreMap":357},[361,1134,1135,1137,1139,1141,1143,1145,1147,1149,1151,1153,1155,1157,1159],{"class":363,"line":364},[361,1136,368],{"class":367},[361,1138,329],{"class":371},[361,1140,576],{"class":375},[361,1142,382],{"class":367},[361,1144,385],{"class":367},[361,1146,583],{"class":388},[361,1148,385],{"class":367},[361,1150,610],{"class":375},[361,1152,382],{"class":367},[361,1154,385],{"class":367},[361,1156,1126],{"class":388},[361,1158,385],{"class":367},[361,1160,394],{"class":367},[361,1162,1163],{"class":363,"line":397},[361,1164,1165],{"class":407},"  \u003CVyIsland layer=\"inline\">\n",[361,1167,1168],{"class":363,"line":425},[361,1169,1170],{"class":407},"    \u003CVyIslandButton icon=\"i-lucide-home\" label=\"Home\" \u002F>\n",[361,1172,1173],{"class":363,"line":456},[361,1174,943],{"class":407},[361,1176,1177,1179,1181],{"class":363,"line":463},[361,1178,534],{"class":367},[361,1180,329],{"class":371},[361,1182,394],{"class":367},[324,1184,1185,1186,1188],{},"Avoid leaving member islands at their default ",[327,1187,1122],{}," inside a floating group. Each member would apply its own full-width fixed positioning instead of participating normally in the group row.",[319,1190,1192],{"id":1191},"features-and-behavior","Features and behavior",[1194,1195,1196,1206,1211,1220,1229,1240,1246],"ul",{},[1197,1198,1199,1200,1202,1203,1205],"li",{},"Floating groups span from the left to right viewport edge and sit 16 pixels from ",[327,1201,907],{}," or ",[327,1204,583],{},".",[1197,1207,1208,1210],{},[327,1209,1004],{}," controls main-axis justification through an inline style for reliable Lynx layout.",[1197,1212,1213,1216,1217,1219],{},[327,1214,1215],{},"direction=\"row\""," places members side by side; ",[327,1218,1000],{}," stacks them.",[1197,1221,1222,1224,1225,1202,1227,1205],{},[327,1223,870],{}," sets only the gap between member islands. It does not propagate to ",[327,1226,333],{},[327,1228,642],{},[1197,1230,1231,1233,1234,1236,1237,1239],{},[327,1232,1122],{}," uses a high floating layer, ",[327,1235,1126],{}," uses a lower floating layer, and ",[327,1238,617],{}," applies no positioning.",[1197,1241,1242,1243,1245],{},"The default slot is free-form, though ",[327,1244,333],{}," children are the intended composition.",[1197,1247,1248,1249,1252],{},"Consumer-provided inline ",[327,1250,1251],{},"style"," can override generated offsets, positioning, alignment, or stacking through attribute fallthrough.",[319,1254,1256],{"id":1255},"props","Props",[1258,1259,1260,1279],"table",{},[1261,1262,1263],"thead",{},[1264,1265,1266,1270,1273,1276],"tr",{},[1267,1268,1269],"th",{},"Prop",[1267,1271,1272],{},"Type",[1267,1274,1275],{},"Default",[1267,1277,1278],{},"Description",[1280,1281,1282,1303,1323,1343,1362,1381,1401],"tbody",{},[1264,1283,1284,1290,1295,1300],{},[1285,1286,1287],"td",{},[327,1288,1289],{},"position",[1285,1291,1292],{},[327,1293,1294],{},"'top' | 'bottom'",[1285,1296,1297],{},[327,1298,1299],{},"'bottom'",[1285,1301,1302],{},"Viewport edge used by floating groups. Ignored for inline placement.",[1264,1304,1305,1310,1315,1320],{},[1285,1306,1307],{},[327,1308,1309],{},"layer",[1285,1311,1312],{},[327,1313,1314],{},"'overlay' | 'base' | 'inline'",[1285,1316,1317],{},[327,1318,1319],{},"'overlay'",[1285,1321,1322],{},"Floating and stacking strategy.",[1264,1324,1325,1330,1335,1340],{},[1285,1326,1327],{},[327,1328,1329],{},"direction",[1285,1331,1332],{},[327,1333,1334],{},"'row' | 'col'",[1285,1336,1337],{},[327,1338,1339],{},"'row'",[1285,1341,1342],{},"Flex direction for member islands.",[1264,1344,1345,1349,1354,1359],{},[1285,1346,1347],{},[327,1348,1004],{},[1285,1350,1351],{},[327,1352,1353],{},"'start' | 'center' | 'end' | 'between'",[1285,1355,1356],{},[327,1357,1358],{},"'center'",[1285,1360,1361],{},"Main-axis distribution of group members.",[1264,1363,1364,1368,1373,1378],{},[1285,1365,1366],{},[327,1367,870],{},[1285,1369,1370],{},[327,1371,1372],{},"'sm' | 'md' | 'lg' | 'xl'",[1285,1374,1375],{},[327,1376,1377],{},"'md'",[1285,1379,1380],{},"Gap between members; does not set child island size.",[1264,1382,1383,1388,1393,1398],{},[1285,1384,1385],{},[327,1386,1387],{},"class",[1285,1389,1390],{},[327,1391,1392],{},"any",[1285,1394,1395],{},[327,1396,1397],{},"undefined",[1285,1399,1400],{},"Classes merged onto the root slot.",[1264,1402,1403,1408,1413,1417],{},[1285,1404,1405],{},[327,1406,1407],{},"ui",[1285,1409,1410],{},[327,1411,1412],{},"Partial\u003CRecord\u003C'root', any>>",[1285,1414,1415],{},[327,1416,1397],{},[1285,1418,1419],{},"Per-instance root theme override.",[324,1421,1422,1423,979,1426,979,1429,983,1432,1205],{},"The gap scale is ",[327,1424,1425],{},"sm: 12px",[327,1427,1428],{},"md: 16px",[327,1430,1431],{},"lg: 24px",[327,1433,1434],{},"xl: 32px",[319,1436,1438],{"id":1437},"emits","Emits",[324,1440,1441,1443],{},[327,1442,329],{}," does not emit events.",[319,1445,1447],{"id":1446},"slots","Slots",[1258,1449,1450,1459],{},[1261,1451,1452],{},[1264,1453,1454,1457],{},[1267,1455,1456],{},"Slot",[1267,1458,1278],{},[1280,1460,1461],{},[1264,1462,1463,1468],{},[1285,1464,1465],{},[327,1466,1467],{},"default",[1285,1469,1470],{},"Member islands or other companion content.",[324,1472,1473],{},"The slot does not receive scoped props.",[319,1475,1477],{"id":1476},"styling-and-theming","Styling and theming",[324,1479,1480,1481,1484,1485,1205],{},"Override globally through ",[327,1482,1483],{},"appConfig.ui.islandGroup"," or locally with ",[327,1486,1407],{},[1258,1488,1489,1499],{},[1261,1490,1491],{},[1264,1492,1493,1496],{},[1267,1494,1495],{},"UI slot",[1267,1497,1498],{},"Purpose",[1280,1500,1501],{},[1264,1502,1503,1508],{},[1285,1504,1505],{},[327,1506,1507],{},"root",[1285,1509,1510],{},"Flex layout, direction, alignment, gap, maximum width, and optional edge padding.",[324,1512,1513,1514,979,1516,979,1518,983,1520,1522,1523,1526],{},"The theme combines ",[327,1515,1289],{},[327,1517,1329],{},[327,1519,1004],{},[327,1521,870],{},". Fixed placement and ",[327,1524,1525],{},"justifyContent"," are applied separately as inline styles for Lynx compatibility.",[324,1528,1529,1531,1532,1534,1535,979,1538,979,1541,1544,1545,1548,1549,1205],{},[327,1530,1289],{}," aligns floating children against the selected vertical edge. ",[327,1533,1004],{}," applies ",[327,1536,1537],{},"justify-start",[327,1539,1540],{},"justify-center",[327,1542,1543],{},"justify-end",", or ",[327,1546,1547],{},"justify-between","; the component mirrors the same distribution with inline ",[327,1550,1525],{},[319,1552,299],{"id":1553},"accessibility",[324,1555,1556,1558],{},[327,1557,329],{}," is layout-only and does not add a native group, navigation, or toolbar role. Add an appropriate labeled semantic wrapper when the collection needs to be announced as one region. Each interactive child must provide its own accessible name.",[324,1560,1561,1562,1564],{},"Keep companion islands in a logical source order. With ",[327,1563,886],{},", visual distance can be large even though controls remain adjacent in traversal order. Test top and bottom floating controls with VoiceOver and TalkBack to ensure they do not obscure or interrupt primary content.",[319,1566,1568],{"id":1567},"platform-notes","Platform notes",[1194,1570,1571,1582,1597,1608,1613],{},[1197,1572,1573,1574,1577,1578,1581],{},"Floating placement uses inline ",[327,1575,1576],{},"position: fixed"," because Lynx does not reliably honor the Tailwind ",[327,1579,1580],{},"fixed"," utility.",[1197,1583,1584,1587,1588,1591,1592,1587,1594,1205],{},[327,1585,1586],{},"overlay"," uses ",[327,1589,1590],{},"z-index: 50","; ",[327,1593,1126],{},[327,1595,1596],{},"z-index: 10",[1197,1598,1599,1600,1603,1604,1607],{},"Top groups use ",[327,1601,1602],{},"top: 16px"," and align children to the top edge. Bottom groups use ",[327,1605,1606],{},"bottom: 16px"," and align children to the bottom edge.",[1197,1609,1610,1611,1205],{},"The full-width fixed strip is why child islands should use ",[327,1612,349],{},[1197,1614,1615],{},"Leave enough page padding for persistent floating groups so scrollable content is not hidden underneath them.",[319,1617,1619],{"id":1618},"related-components","Related components",[1194,1621,1622,1630,1637],{},[1197,1623,1624,1629],{},[1625,1626,1627],"a",{"href":143},[327,1628,142],{}," for each pill or expandable surface.",[1197,1631,1632,1636],{},[1625,1633,1634],{"href":147},[327,1635,146],{}," for actions inside an island.",[1197,1638,1639,1643],{},[1625,1640,1641],{"href":64},[327,1642,63],{}," for temporary grouped actions that should not remain in the viewport.",[1251,1645,1646],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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":357,"searchDepth":364,"depth":397,"links":1648},[1649,1650,1655,1656,1657,1658,1659,1660,1661,1662],{"id":321,"depth":397,"text":322},{"id":342,"depth":397,"text":343,"children":1651},[1652,1653,1654],{"id":879,"depth":425,"text":880},{"id":993,"depth":425,"text":994},{"id":1115,"depth":425,"text":1116},{"id":1191,"depth":397,"text":1192},{"id":1255,"depth":397,"text":1256},{"id":1437,"depth":397,"text":1438},{"id":1446,"depth":397,"text":1447},{"id":1476,"depth":397,"text":1477},{"id":1553,"depth":397,"text":299},{"id":1567,"depth":397,"text":1568},{"id":1618,"depth":397,"text":1619},"Position multiple companion islands as one floating or inline layout.","md",[1666],{"label":1667,"icon":1668,"to":1669,"target":1670},"Source","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002FKealanAU\u002Fvyui\u002Fblob\u002Fmain\u002Fpackages\u002Fkit\u002Fsrc\u002Fcomponents\u002FIslandGroup.vue","_blank",{},{"icon":154},{"title":151,"description":1663},"ccxhvig9xo6aA18NlBiNOd1Rrl8n2lG3fMxG7xXknGE",[1676,1678],{"title":146,"path":147,"stem":148,"description":1677,"icon":-1,"children":-1,"navigation":-1},"Add actions, selections, mode switches, and expansion controls to an island.",{"title":156,"path":157,"stem":158,"description":1679,"icon":-1,"children":-1,"navigation":-1},"Keep focused form controls visible above the native on-screen keyboard.",1783464079429]