[{"data":1,"prerenderedAt":2690},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Fisland":460,"\u002Fcomponents\u002Fisland-surround":2685},[4,34,51,301,327,332,337,406],{"title":5,"path":6,"stem":7,"children":8,"package":11,"icon":33},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,13,18,23,28],{"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",{"title":24,"path":25,"stem":26,"package":11,"icon":27},"CLI","\u002Fgetting-started\u002Fcli","1.getting-started\u002F4.cli","i-lucide-terminal",{"title":29,"path":30,"stem":31,"package":11,"icon":32},"Roadmap","\u002Fgetting-started\u002Froadmap","1.getting-started\u002F5.roadmap","i-lucide-map","i-lucide-rocket",{"title":35,"package":11,"icon":36,"path":37,"stem":38,"children":39,"page":50},"Packages","i-lucide-package","\u002Fpackages","2.packages",[40,45],{"title":41,"path":42,"stem":43,"package":11,"icon":44},"@vyui\u002Fcore","\u002Fpackages\u002Fcore","2.packages\u002F1.core","i-lucide-box",{"title":46,"path":47,"stem":48,"package":11,"icon":49},"@vyui\u002Fkit","\u002Fpackages\u002Fkit","2.packages\u002F2.kit","i-lucide-layers",false,{"title":52,"package":11,"icon":53,"path":54,"stem":55,"children":56},"Components","i-lucide-layout-grid","\u002Fcomponents","3.components",[57,59,65,70,75,80,85,90,95,100,105,110,115,120,125,130,135,140,144,149,153,158,163,168,173,178,183,188,193,198,203,208,213,218,223,228,233,238,242,246,251,256,261,266,271,276,280,284,288,292,296],{"title":52,"path":54,"stem":58,"package":11,"icon":53},"3.components\u002Findex",{"title":60,"path":61,"stem":62,"package":63,"icon":64},"Accordion","\u002Fcomponents\u002Faccordion","3.components\u002Faccordion","kit","i-lucide-list-collapse",{"title":66,"path":67,"stem":68,"package":63,"icon":69},"Action Sheet","\u002Fcomponents\u002Faction-sheet","3.components\u002Faction-sheet","i-lucide-panel-bottom",{"title":71,"path":72,"stem":73,"package":63,"icon":74},"Alert","\u002Fcomponents\u002Falert","3.components\u002Falert","i-lucide-triangle-alert",{"title":76,"path":77,"stem":78,"package":79,"icon":74},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","3.components\u002Falert-dialog","core",{"title":81,"path":82,"stem":83,"package":63,"icon":84},"App","\u002Fcomponents\u002Fapp","3.components\u002Fapp","i-lucide-smartphone",{"title":86,"path":87,"stem":88,"package":63,"icon":89},"Aspect Ratio","\u002Fcomponents\u002Faspect-ratio","3.components\u002Faspect-ratio","i-lucide-ratio",{"title":91,"path":92,"stem":93,"package":63,"icon":94},"Avatar","\u002Fcomponents\u002Favatar","3.components\u002Favatar","i-lucide-circle-user-round",{"title":96,"path":97,"stem":98,"package":63,"icon":99},"Avatar Group","\u002Fcomponents\u002Favatar-group","3.components\u002Favatar-group","i-lucide-users-round",{"title":101,"path":102,"stem":103,"package":63,"icon":104},"Button","\u002Fcomponents\u002Fbutton","3.components\u002Fbutton","i-lucide-square-mouse-pointer",{"title":106,"path":107,"stem":108,"package":63,"icon":109},"Calendar","\u002Fcomponents\u002Fcalendar","3.components\u002Fcalendar","i-lucide-calendar-days",{"title":111,"path":112,"stem":113,"package":63,"icon":114},"Card","\u002Fcomponents\u002Fcard","3.components\u002Fcard","i-lucide-square",{"title":116,"path":117,"stem":118,"package":63,"icon":119},"Checkbox","\u002Fcomponents\u002Fcheckbox","3.components\u002Fcheckbox","i-lucide-square-check",{"title":121,"path":122,"stem":123,"package":79,"icon":124},"Collapsible","\u002Fcomponents\u002Fcollapsible","3.components\u002Fcollapsible","i-lucide-chevrons-down-up",{"title":126,"path":127,"stem":128,"package":79,"icon":129},"Dialog","\u002Fcomponents\u002Fdialog","3.components\u002Fdialog","i-lucide-app-window",{"title":131,"path":132,"stem":133,"package":79,"icon":134},"Draggable","\u002Fcomponents\u002Fdraggable","3.components\u002Fdraggable","i-lucide-move",{"title":136,"path":137,"stem":138,"package":63,"icon":139},"Form","\u002Fcomponents\u002Fform","3.components\u002Fform","i-lucide-clipboard-list",{"title":141,"path":142,"stem":143,"package":79,"icon":22},"Icon","\u002Fcomponents\u002Ficon","3.components\u002Ficon",{"title":145,"path":146,"stem":147,"package":63,"icon":148},"Input","\u002Fcomponents\u002Finput","3.components\u002Finput","i-lucide-text-cursor-input",{"title":150,"path":151,"stem":152,"package":63,"icon":69},"Island","\u002Fcomponents\u002Fisland","3.components\u002Fisland",{"title":154,"path":155,"stem":156,"package":63,"icon":157},"Island Button","\u002Fcomponents\u002Fisland-button","3.components\u002Fisland-button","i-lucide-circle-ellipsis",{"title":159,"path":160,"stem":161,"package":63,"icon":162},"Island Group","\u002Fcomponents\u002Fisland-group","3.components\u002Fisland-group","i-lucide-panels-top-left",{"title":164,"path":165,"stem":166,"package":63,"icon":167},"KeyboardAware","\u002Fcomponents\u002Fkeyboard-aware","3.components\u002Fkeyboard-aware","i-lucide-keyboard",{"title":169,"path":170,"stem":171,"package":63,"icon":172},"Label","\u002Fcomponents\u002Flabel","3.components\u002Flabel","i-lucide-tag",{"title":174,"path":175,"stem":176,"package":63,"icon":177},"Modal","\u002Fcomponents\u002Fmodal","3.components\u002Fmodal","i-lucide-gallery-vertical-end",{"title":179,"path":180,"stem":181,"package":79,"icon":182},"Navigation","\u002Fcomponents\u002Fnavigation","3.components\u002Fnavigation","i-lucide-route",{"title":184,"path":185,"stem":186,"package":63,"icon":187},"Number Field","\u002Fcomponents\u002Fnumber-field","3.components\u002Fnumber-field","i-lucide-list-plus",{"title":189,"path":190,"stem":191,"package":79,"icon":192},"Pagination","\u002Fcomponents\u002Fpagination","3.components\u002Fpagination","i-lucide-ellipsis",{"title":194,"path":195,"stem":196,"package":63,"icon":197},"Pin Input","\u002Fcomponents\u002Fpin-input","3.components\u002Fpin-input","i-lucide-key-round",{"title":199,"path":200,"stem":201,"package":63,"icon":202},"Placeholder","\u002Fcomponents\u002Fplaceholder","3.components\u002Fplaceholder","i-lucide-square-dashed",{"title":204,"path":205,"stem":206,"package":63,"icon":207},"Popover","\u002Fcomponents\u002Fpopover","3.components\u002Fpopover","i-lucide-message-square-more",{"title":209,"path":210,"stem":211,"package":63,"icon":212},"Progress","\u002Fcomponents\u002Fprogress","3.components\u002Fprogress","i-lucide-chart-no-axes-column-increasing",{"title":214,"path":215,"stem":216,"package":63,"icon":217},"Radio Group","\u002Fcomponents\u002Fradio-group","3.components\u002Fradio-group","i-lucide-circle-dot",{"title":219,"path":220,"stem":221,"package":63,"icon":222},"Rating","\u002Fcomponents\u002Frating","3.components\u002Frating","i-lucide-star",{"title":224,"path":225,"stem":226,"package":79,"icon":227},"Scroll View","\u002Fcomponents\u002Fscroll-view","3.components\u002Fscroll-view","i-lucide-scroll",{"title":229,"path":230,"stem":231,"package":63,"icon":232},"Select","\u002Fcomponents\u002Fselect","3.components\u002Fselect","i-lucide-list-check",{"title":234,"path":235,"stem":236,"package":63,"icon":237},"Separator","\u002Fcomponents\u002Fseparator","3.components\u002Fseparator","i-lucide-separator-horizontal",{"title":239,"path":240,"stem":241,"package":79,"icon":69},"Sheet","\u002Fcomponents\u002Fsheet","3.components\u002Fsheet",{"title":243,"path":244,"stem":245,"package":63,"icon":162},"Skeleton","\u002Fcomponents\u002Fskeleton","3.components\u002Fskeleton",{"title":247,"path":248,"stem":249,"package":63,"icon":250},"Slider","\u002Fcomponents\u002Fslider","3.components\u002Fslider","i-lucide-sliders-horizontal",{"title":252,"path":253,"stem":254,"package":63,"icon":255},"Sortable","\u002Fcomponents\u002Fsortable","3.components\u002Fsortable","i-lucide-list-restart",{"title":257,"path":258,"stem":259,"package":63,"icon":260},"Stepper","\u002Fcomponents\u002Fstepper","3.components\u002Fstepper","i-lucide-list-ordered",{"title":262,"path":263,"stem":264,"package":63,"icon":265},"Swipe Action","\u002Fcomponents\u002Fswipe-action","3.components\u002Fswipe-action","i-lucide-move-horizontal",{"title":267,"path":268,"stem":269,"package":63,"icon":270},"Swiper","\u002Fcomponents\u002Fswiper","3.components\u002Fswiper","i-lucide-gallery-horizontal-end",{"title":272,"path":273,"stem":274,"package":63,"icon":275},"Switch","\u002Fcomponents\u002Fswitch","3.components\u002Fswitch","i-lucide-toggle-right",{"title":277,"path":278,"stem":279,"package":63,"icon":162},"Tabs","\u002Fcomponents\u002Ftabs","3.components\u002Ftabs",{"title":281,"path":282,"stem":283,"package":63,"icon":148},"Textarea","\u002Fcomponents\u002Ftextarea","3.components\u002Ftextarea",{"title":285,"path":286,"stem":287,"package":63,"icon":207},"Toast","\u002Fcomponents\u002Ftoast","3.components\u002Ftoast",{"title":289,"path":290,"stem":291,"package":63,"icon":275},"Toggle","\u002Fcomponents\u002Ftoggle","3.components\u002Ftoggle",{"title":293,"path":294,"stem":295,"package":63,"icon":162},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","3.components\u002Ftoggle-group",{"title":297,"path":298,"stem":299,"package":63,"icon":300},"Tray","\u002Fcomponents\u002Ftray","3.components\u002Ftray","i-lucide-square-dashed-bottom",{"title":302,"path":303,"stem":304,"children":305,"package":11,"icon":307},"Theming","\u002Ftheming","4.theming\u002F1.index",[306,308,312,317,322],{"title":302,"path":303,"stem":304,"package":11,"icon":307},"i-lucide-palette",{"title":309,"path":310,"stem":311,"package":11,"icon":250},"Overrides","\u002Ftheming\u002Foverrides","4.theming\u002F2.overrides",{"title":313,"path":314,"stem":315,"package":11,"icon":316},"Colors","\u002Ftheming\u002Fcolors","4.theming\u002F3.colors","i-lucide-swatch-book",{"title":318,"path":319,"stem":320,"package":11,"icon":321},"Dark Mode","\u002Ftheming\u002Fdark-mode","4.theming\u002F4.dark-mode","i-lucide-moon",{"title":323,"path":324,"stem":325,"package":11,"icon":326},"Fonts","\u002Ftheming\u002Ffonts","4.theming\u002F5.fonts","i-lucide-type",{"title":328,"path":329,"stem":330,"package":11,"icon":331},"Accessibility","\u002Faccessibility","5.accessibility","i-lucide-accessibility",{"title":333,"path":334,"stem":335,"package":11,"icon":336},"i18n","\u002Fi18n","6.i18n","i-lucide-languages",{"title":338,"path":339,"stem":340,"children":341,"package":11,"icon":343},"Composables","\u002Fcomposables","7.composables\u002F1.index",[342,344,349,354,359,364,369,374,378,383,387,391,396,401],{"title":338,"path":339,"stem":340,"package":11,"icon":343},"i-lucide-square-function",{"title":345,"path":346,"stem":347,"package":11,"icon":348},"useEmitAsProps","\u002Fcomposables\u002Fuse-emit-as-props","7.composables\u002F10.use-emit-as-props","i-lucide-zap",{"title":350,"path":351,"stem":352,"package":11,"icon":353},"useForwardPropsEmits","\u002Fcomposables\u002Fuse-forward-props-emits","7.composables\u002F11.use-forward-props-emits","i-lucide-merge",{"title":355,"path":356,"stem":357,"package":11,"icon":358},"useForwardExpose","\u002Fcomposables\u002Fuse-forward-expose","7.composables\u002F12.use-forward-expose","i-lucide-share-2",{"title":360,"path":361,"stem":362,"package":11,"icon":363},"useStateMachine","\u002Fcomposables\u002Fuse-state-machine","7.composables\u002F13.use-state-machine","i-lucide-workflow",{"title":365,"path":366,"stem":367,"package":11,"icon":368},"usePrimitiveElement","\u002Fcomposables\u002Fuse-primitive-element","7.composables\u002F14.use-primitive-element","i-lucide-crosshair",{"title":370,"path":371,"stem":372,"package":11,"icon":373},"useAppConfig","\u002Fcomposables\u002Fuse-app-config","7.composables\u002F2.use-app-config","i-lucide-settings",{"title":375,"path":376,"stem":377,"package":11,"icon":321},"useColorMode","\u002Fcomposables\u002Fuse-color-mode","7.composables\u002F3.use-color-mode",{"title":379,"path":380,"stem":381,"package":11,"icon":382},"useComponentIcons","\u002Fcomposables\u002Fuse-component-icons","7.composables\u002F4.use-component-icons","i-lucide-shapes",{"title":384,"path":385,"stem":386,"package":11,"icon":69},"useTray","\u002Fcomposables\u002Fuse-tray","7.composables\u002F5.use-tray",{"title":388,"path":389,"stem":390,"package":11,"icon":336},"i18n composables","\u002Fcomposables\u002Fi18n-composables","7.composables\u002F6.i18n-composables",{"title":392,"path":393,"stem":394,"package":11,"icon":395},"useId","\u002Fcomposables\u002Fuse-id","7.composables\u002F7.use-id","i-lucide-hash",{"title":397,"path":398,"stem":399,"package":11,"icon":400},"useFilter","\u002Fcomposables\u002Fuse-filter","7.composables\u002F8.use-filter","i-lucide-filter",{"title":402,"path":403,"stem":404,"package":11,"icon":405},"useForwardProps","\u002Fcomposables\u002Fuse-forward-props","7.composables\u002F9.use-forward-props","i-lucide-arrow-right-left",{"title":407,"path":408,"stem":409,"children":410,"package":11,"icon":412},"Guides","\u002Fguides","8.guides\u002F1.index",[411,413,417,422,427,432,437,441,446,450,455],{"title":407,"path":408,"stem":409,"package":11,"icon":412},"i-lucide-book-open",{"title":414,"path":415,"stem":416,"package":11,"icon":348},"Instant first-frame rendering","\u002Fguides\u002Finstant-first-frame-rendering","8.guides\u002F10.instant-first-frame-rendering",{"title":418,"path":419,"stem":420,"package":11,"icon":421},"Why use Vy UI","\u002Fguides\u002Fwhy-vy-ui","8.guides\u002F11.why-vy-ui","i-lucide-help-circle",{"title":423,"path":424,"stem":425,"package":11,"icon":426},"Lynx UI frameworks","\u002Fguides\u002Flynx-ui-frameworks","8.guides\u002F2.lynx-ui-frameworks","i-lucide-library",{"title":428,"path":429,"stem":430,"package":11,"icon":431},"What is Vue Lynx","\u002Fguides\u002Fvue-lynx","8.guides\u002F3.vue-lynx","i-lucide-component",{"title":433,"path":434,"stem":435,"package":11,"icon":436},"Lynx vs React Native","\u002Fguides\u002Flynx-vs-react-native","8.guides\u002F4.lynx-vs-react-native","i-lucide-git-compare",{"title":438,"path":439,"stem":440,"package":11,"icon":84},"Testing on your phone","\u002Fguides\u002Ftesting-on-device","8.guides\u002F5.testing-on-device",{"title":442,"path":443,"stem":444,"package":11,"icon":445},"Testing with Xcode","\u002Fguides\u002Ftesting-with-xcode","8.guides\u002F6.testing-with-xcode","i-lucide-apple",{"title":447,"path":448,"stem":449,"package":11,"icon":27},"The rspeedy dev server","\u002Fguides\u002Frspeedy-dev-server","8.guides\u002F7.rspeedy-dev-server",{"title":451,"path":452,"stem":453,"package":11,"icon":454},"Tailwind on Lynx","\u002Fguides\u002Ftailwind-on-lynx","8.guides\u002F8.tailwind-on-lynx","i-lucide-wind",{"title":456,"path":457,"stem":458,"package":11,"icon":459},"Theming on Lynx","\u002Fguides\u002Ftheming-on-lynx","8.guides\u002F9.theming-on-lynx","i-lucide-paintbrush",{"id":461,"title":150,"body":462,"description":2674,"extension":2484,"links":2675,"meta":2681,"navigation":2682,"package":63,"path":151,"seo":2683,"stem":152,"__hash__":2684},"docs\u002F3.components\u002Fisland.md",{"type":463,"value":464,"toc":2656},"minimark",[465,470,494,499,503,513,856,862,867,884,1219,1222,1226,1241,1627,1637,1641,1651,1717,1729,1733,1812,1816,1822,1933,1948,1952,2233,2237,2295,2299,2305,2354,2375,2379,2388,2432,2449,2517,2529,2532,2540,2550,2554,2616,2620,2653],[466,467,469],"h2",{"id":468},"overview","Overview",[471,472,473,477,478,481,482,485,486,489,490,493],"p",{},[474,475,476],"code",{},"VyIsland"," is a Linear-inspired container for compact navigation and actions. It can float at a viewport edge or participate in normal layout, and it coordinates three independent state axes for child ",[474,479,480],{},"VyIslandButton"," components: selected ",[474,483,484],{},"value",", active row ",[474,487,488],{},"mode",", and expanded ",[474,491,492],{},"open"," state.",[495,496],"component-code",{"height":497,"name":498},"160px","island-example",[466,500,502],{"id":501},"usage","Usage",[471,504,505,506,508,509,512],{},"Compose an island from ",[474,507,480],{}," children. Set ",[474,510,511],{},"layer=\"inline\""," when the island should remain in document flow.",[514,515,520],"pre",{"className":516,"code":517,"language":518,"meta":519,"style":519},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VyIsland } from '@vyui\u002Fkit\u002Fisland'\nimport { VyIslandButton } from '@vyui\u002Fkit\u002Fisland-button'\n\nconst section = ref\u003Cstring | number | null>('inbox')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVyIsland v-model:value=\"section\" layer=\"inline\">\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\u003C\u002Ftemplate>\n","vue","",[474,521,522,557,585,606,627,634,682,692,697,707,741,775,806,837,847],{"__ignoreMap":519},[523,524,527,531,535,539,542,545,548,552,554],"span",{"class":525,"line":526},"line",1,[523,528,530],{"class":529},"sMK4o","\u003C",[523,532,534],{"class":533},"swJcz","script",[523,536,538],{"class":537},"spNyl"," setup",[523,540,541],{"class":537}," lang",[523,543,544],{"class":529},"=",[523,546,547],{"class":529},"\"",[523,549,551],{"class":550},"sfazB","ts",[523,553,547],{"class":529},[523,555,556],{"class":529},">\n",[523,558,560,564,567,571,574,577,580,582],{"class":525,"line":559},2,[523,561,563],{"class":562},"s7zQu","import",[523,565,566],{"class":529}," {",[523,568,570],{"class":569},"sTEyZ"," ref",[523,572,573],{"class":529}," }",[523,575,576],{"class":562}," from",[523,578,579],{"class":529}," '",[523,581,518],{"class":550},[523,583,584],{"class":529},"'\n",[523,586,588,590,592,595,597,599,601,604],{"class":525,"line":587},3,[523,589,563],{"class":562},[523,591,566],{"class":529},[523,593,594],{"class":569}," VyIsland",[523,596,573],{"class":529},[523,598,576],{"class":562},[523,600,579],{"class":529},[523,602,603],{"class":550},"@vyui\u002Fkit\u002Fisland",[523,605,584],{"class":529},[523,607,609,611,613,616,618,620,622,625],{"class":525,"line":608},4,[523,610,563],{"class":562},[523,612,566],{"class":529},[523,614,615],{"class":569}," VyIslandButton",[523,617,573],{"class":529},[523,619,576],{"class":562},[523,621,579],{"class":529},[523,623,624],{"class":550},"@vyui\u002Fkit\u002Fisland-button",[523,626,584],{"class":529},[523,628,630],{"class":525,"line":629},5,[523,631,633],{"emptyLinePlaceholder":632},true,"\n",[523,635,637,640,643,645,648,650,654,657,660,662,665,668,671,674,677,679],{"class":525,"line":636},6,[523,638,639],{"class":537},"const",[523,641,642],{"class":569}," section ",[523,644,544],{"class":529},[523,646,570],{"class":647},"s2Zo4",[523,649,530],{"class":529},[523,651,653],{"class":652},"sBMFI","string",[523,655,656],{"class":529}," |",[523,658,659],{"class":652}," number",[523,661,656],{"class":529},[523,663,664],{"class":652}," null",[523,666,667],{"class":529},">",[523,669,670],{"class":569},"(",[523,672,673],{"class":529},"'",[523,675,676],{"class":550},"inbox",[523,678,673],{"class":529},[523,680,681],{"class":569},")\n",[523,683,685,688,690],{"class":525,"line":684},7,[523,686,687],{"class":529},"\u003C\u002F",[523,689,534],{"class":533},[523,691,556],{"class":529},[523,693,695],{"class":525,"line":694},8,[523,696,633],{"emptyLinePlaceholder":632},[523,698,700,702,705],{"class":525,"line":699},9,[523,701,530],{"class":529},[523,703,704],{"class":533},"template",[523,706,556],{"class":529},[523,708,710,713,715,718,720,722,725,727,730,732,734,737,739],{"class":525,"line":709},10,[523,711,712],{"class":529},"  \u003C",[523,714,476],{"class":533},[523,716,717],{"class":537}," v-model:value",[523,719,544],{"class":529},[523,721,547],{"class":529},[523,723,724],{"class":550},"section",[523,726,547],{"class":529},[523,728,729],{"class":537}," layer",[523,731,544],{"class":529},[523,733,547],{"class":529},[523,735,736],{"class":550},"inline",[523,738,547],{"class":529},[523,740,556],{"class":529},[523,742,744,747,749,752,754,756,758,760,763,765,767,770,772],{"class":525,"line":743},11,[523,745,746],{"class":529},"    \u003C",[523,748,480],{"class":533},[523,750,751],{"class":537}," value",[523,753,544],{"class":529},[523,755,547],{"class":529},[523,757,676],{"class":550},[523,759,547],{"class":529},[523,761,762],{"class":537}," icon",[523,764,544],{"class":529},[523,766,547],{"class":529},[523,768,769],{"class":550},"i-lucide-inbox",[523,771,547],{"class":529},[523,773,774],{"class":529}," \u002F>\n",[523,776,778,780,782,784,786,788,791,793,795,797,799,802,804],{"class":525,"line":777},12,[523,779,746],{"class":529},[523,781,480],{"class":533},[523,783,751],{"class":537},[523,785,544],{"class":529},[523,787,547],{"class":529},[523,789,790],{"class":550},"activity",[523,792,547],{"class":529},[523,794,762],{"class":537},[523,796,544],{"class":529},[523,798,547],{"class":529},[523,800,801],{"class":550},"i-lucide-bell",[523,803,547],{"class":529},[523,805,774],{"class":529},[523,807,809,811,813,815,817,819,822,824,826,828,830,833,835],{"class":525,"line":808},13,[523,810,746],{"class":529},[523,812,480],{"class":533},[523,814,751],{"class":537},[523,816,544],{"class":529},[523,818,547],{"class":529},[523,820,821],{"class":550},"profile",[523,823,547],{"class":529},[523,825,762],{"class":537},[523,827,544],{"class":529},[523,829,547],{"class":529},[523,831,832],{"class":550},"i-lucide-user",[523,834,547],{"class":529},[523,836,774],{"class":529},[523,838,840,843,845],{"class":525,"line":839},14,[523,841,842],{"class":529},"  \u003C\u002F",[523,844,476],{"class":533},[523,846,556],{"class":529},[523,848,850,852,854],{"class":525,"line":849},15,[523,851,687],{"class":529},[523,853,704],{"class":533},[523,855,556],{"class":529},[471,857,858,859,861],{},"Buttons with a ",[474,860,484],{}," update the island model and automatically receive active styling when their value matches.",[863,864,866],"h3",{"id":865},"row-modes","Row modes",[471,868,869,870,872,873,875,876,879,880,883],{},"Use ",[474,871,488],{}," to replace the normal row with a named slot. Mode names are free-form strings. A button with the same ",[474,874,488],{}," switches the parent, and a button with ",[474,877,878],{},"reset"," returns it to ",[474,881,882],{},"default",".",[514,885,887],{"className":516,"code":886,"language":518,"meta":519,"style":519},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VyIsland } from '@vyui\u002Fkit\u002Fisland'\nimport { VyIslandButton } from '@vyui\u002Fkit\u002Fisland-button'\n\nconst mode = ref('default')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVyIsland v-model:mode=\"mode\" layer=\"inline\">\n    \u003CVyIslandButton icon=\"i-lucide-inbox\" \u002F>\n    \u003CVyIslandButton mode=\"search\" icon=\"i-lucide-search\" \u002F>\n\n    \u003Ctemplate #search>\n      \u003CVyIslandButton\n        reset\n        icon=\"i-lucide-search\"\n        label=\"Search messages…\"\n        :style=\"{ flexGrow: 1, justifyContent: 'flex-start' }\"\n      \u002F>\n      \u003CVyIslandButton reset icon=\"i-lucide-x\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FVyIsland>\n\u003C\u002Ftemplate>\n",[474,888,889,909,927,945,963,967,988,996,1000,1008,1037,1055,1086,1090,1103,1111,1117,1132,1147,1162,1168,1191,1201,1210],{"__ignoreMap":519},[523,890,891,893,895,897,899,901,903,905,907],{"class":525,"line":526},[523,892,530],{"class":529},[523,894,534],{"class":533},[523,896,538],{"class":537},[523,898,541],{"class":537},[523,900,544],{"class":529},[523,902,547],{"class":529},[523,904,551],{"class":550},[523,906,547],{"class":529},[523,908,556],{"class":529},[523,910,911,913,915,917,919,921,923,925],{"class":525,"line":559},[523,912,563],{"class":562},[523,914,566],{"class":529},[523,916,570],{"class":569},[523,918,573],{"class":529},[523,920,576],{"class":562},[523,922,579],{"class":529},[523,924,518],{"class":550},[523,926,584],{"class":529},[523,928,929,931,933,935,937,939,941,943],{"class":525,"line":587},[523,930,563],{"class":562},[523,932,566],{"class":529},[523,934,594],{"class":569},[523,936,573],{"class":529},[523,938,576],{"class":562},[523,940,579],{"class":529},[523,942,603],{"class":550},[523,944,584],{"class":529},[523,946,947,949,951,953,955,957,959,961],{"class":525,"line":608},[523,948,563],{"class":562},[523,950,566],{"class":529},[523,952,615],{"class":569},[523,954,573],{"class":529},[523,956,576],{"class":562},[523,958,579],{"class":529},[523,960,624],{"class":550},[523,962,584],{"class":529},[523,964,965],{"class":525,"line":629},[523,966,633],{"emptyLinePlaceholder":632},[523,968,969,971,974,976,978,980,982,984,986],{"class":525,"line":636},[523,970,639],{"class":537},[523,972,973],{"class":569}," mode ",[523,975,544],{"class":529},[523,977,570],{"class":647},[523,979,670],{"class":569},[523,981,673],{"class":529},[523,983,882],{"class":550},[523,985,673],{"class":529},[523,987,681],{"class":569},[523,989,990,992,994],{"class":525,"line":684},[523,991,687],{"class":529},[523,993,534],{"class":533},[523,995,556],{"class":529},[523,997,998],{"class":525,"line":694},[523,999,633],{"emptyLinePlaceholder":632},[523,1001,1002,1004,1006],{"class":525,"line":699},[523,1003,530],{"class":529},[523,1005,704],{"class":533},[523,1007,556],{"class":529},[523,1009,1010,1012,1014,1017,1019,1021,1023,1025,1027,1029,1031,1033,1035],{"class":525,"line":709},[523,1011,712],{"class":529},[523,1013,476],{"class":533},[523,1015,1016],{"class":537}," v-model:mode",[523,1018,544],{"class":529},[523,1020,547],{"class":529},[523,1022,488],{"class":550},[523,1024,547],{"class":529},[523,1026,729],{"class":537},[523,1028,544],{"class":529},[523,1030,547],{"class":529},[523,1032,736],{"class":550},[523,1034,547],{"class":529},[523,1036,556],{"class":529},[523,1038,1039,1041,1043,1045,1047,1049,1051,1053],{"class":525,"line":743},[523,1040,746],{"class":529},[523,1042,480],{"class":533},[523,1044,762],{"class":537},[523,1046,544],{"class":529},[523,1048,547],{"class":529},[523,1050,769],{"class":550},[523,1052,547],{"class":529},[523,1054,774],{"class":529},[523,1056,1057,1059,1061,1064,1066,1068,1071,1073,1075,1077,1079,1082,1084],{"class":525,"line":777},[523,1058,746],{"class":529},[523,1060,480],{"class":533},[523,1062,1063],{"class":537}," mode",[523,1065,544],{"class":529},[523,1067,547],{"class":529},[523,1069,1070],{"class":550},"search",[523,1072,547],{"class":529},[523,1074,762],{"class":537},[523,1076,544],{"class":529},[523,1078,547],{"class":529},[523,1080,1081],{"class":550},"i-lucide-search",[523,1083,547],{"class":529},[523,1085,774],{"class":529},[523,1087,1088],{"class":525,"line":808},[523,1089,633],{"emptyLinePlaceholder":632},[523,1091,1092,1094,1096,1099,1101],{"class":525,"line":839},[523,1093,746],{"class":529},[523,1095,704],{"class":533},[523,1097,1098],{"class":529}," #",[523,1100,1070],{"class":537},[523,1102,556],{"class":529},[523,1104,1105,1108],{"class":525,"line":849},[523,1106,1107],{"class":529},"      \u003C",[523,1109,1110],{"class":533},"VyIslandButton\n",[523,1112,1114],{"class":525,"line":1113},16,[523,1115,1116],{"class":537},"        reset\n",[523,1118,1120,1123,1125,1127,1129],{"class":525,"line":1119},17,[523,1121,1122],{"class":537},"        icon",[523,1124,544],{"class":529},[523,1126,547],{"class":529},[523,1128,1081],{"class":550},[523,1130,1131],{"class":529},"\"\n",[523,1133,1135,1138,1140,1142,1145],{"class":525,"line":1134},18,[523,1136,1137],{"class":537},"        label",[523,1139,544],{"class":529},[523,1141,547],{"class":529},[523,1143,1144],{"class":550},"Search messages…",[523,1146,1131],{"class":529},[523,1148,1150,1153,1155,1157,1160],{"class":525,"line":1149},19,[523,1151,1152],{"class":537},"        :style",[523,1154,544],{"class":529},[523,1156,547],{"class":529},[523,1158,1159],{"class":550},"{ flexGrow: 1, justifyContent: 'flex-start' }",[523,1161,1131],{"class":529},[523,1163,1165],{"class":525,"line":1164},20,[523,1166,1167],{"class":529},"      \u002F>\n",[523,1169,1171,1173,1175,1178,1180,1182,1184,1187,1189],{"class":525,"line":1170},21,[523,1172,1107],{"class":529},[523,1174,480],{"class":533},[523,1176,1177],{"class":537}," reset",[523,1179,762],{"class":537},[523,1181,544],{"class":529},[523,1183,547],{"class":529},[523,1185,1186],{"class":550},"i-lucide-x",[523,1188,547],{"class":529},[523,1190,774],{"class":529},[523,1192,1194,1197,1199],{"class":525,"line":1193},22,[523,1195,1196],{"class":529},"    \u003C\u002F",[523,1198,704],{"class":533},[523,1200,556],{"class":529},[523,1202,1204,1206,1208],{"class":525,"line":1203},23,[523,1205,842],{"class":529},[523,1207,476],{"class":533},[523,1209,556],{"class":529},[523,1211,1213,1215,1217],{"class":525,"line":1212},24,[523,1214,687],{"class":529},[523,1216,704],{"class":533},[523,1218,556],{"class":529},[471,1220,1221],{},"If the current mode has no matching named slot, the island safely falls back to the default slot.",[863,1223,1225],{"id":1224},"expandable-panel","Expandable panel",[471,1227,1228,1229,1232,1233,1236,1237,1240],{},"Add an ",[474,1230,1231],{},"expanded"," slot and use an ",[474,1234,1235],{},"expand"," button to toggle it. For a bottom island, the panel appears above the row; ",[474,1238,1239],{},"position=\"top\""," places it below.",[514,1242,1244],{"className":516,"code":1243,"language":518,"meta":519,"style":519},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VyIsland } from '@vyui\u002Fkit\u002Fisland'\nimport { VyIslandButton } from '@vyui\u002Fkit\u002Fisland-button'\n\nconst open = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVyIsland v-model:open=\"open\" layer=\"inline\">\n    \u003CVyIslandButton icon=\"i-lucide-home\" \u002F>\n    \u003CVyIslandButton\n      expand\n      :icon=\"open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'\"\n    \u002F>\n\n    \u003Ctemplate #expanded=\"{ close }\">\n      \u003CVyIslandButton\n        icon=\"i-lucide-settings\"\n        label=\"Settings\"\n        class=\"w-full justify-start\"\n        @tap=\"close\"\n      \u002F>\n      \u003CVyIslandButton\n        icon=\"i-lucide-circle-help\"\n        label=\"Help\"\n        class=\"w-full justify-start\"\n        @tap=\"close\"\n      \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FVyIsland>\n\u003C\u002Ftemplate>\n",[474,1245,1246,1266,1284,1302,1320,1324,1343,1351,1355,1363,1392,1411,1417,1422,1436,1441,1445,1472,1478,1490,1503,1517,1531,1535,1541,1555,1569,1582,1595,1600,1609,1618],{"__ignoreMap":519},[523,1247,1248,1250,1252,1254,1256,1258,1260,1262,1264],{"class":525,"line":526},[523,1249,530],{"class":529},[523,1251,534],{"class":533},[523,1253,538],{"class":537},[523,1255,541],{"class":537},[523,1257,544],{"class":529},[523,1259,547],{"class":529},[523,1261,551],{"class":550},[523,1263,547],{"class":529},[523,1265,556],{"class":529},[523,1267,1268,1270,1272,1274,1276,1278,1280,1282],{"class":525,"line":559},[523,1269,563],{"class":562},[523,1271,566],{"class":529},[523,1273,570],{"class":569},[523,1275,573],{"class":529},[523,1277,576],{"class":562},[523,1279,579],{"class":529},[523,1281,518],{"class":550},[523,1283,584],{"class":529},[523,1285,1286,1288,1290,1292,1294,1296,1298,1300],{"class":525,"line":587},[523,1287,563],{"class":562},[523,1289,566],{"class":529},[523,1291,594],{"class":569},[523,1293,573],{"class":529},[523,1295,576],{"class":562},[523,1297,579],{"class":529},[523,1299,603],{"class":550},[523,1301,584],{"class":529},[523,1303,1304,1306,1308,1310,1312,1314,1316,1318],{"class":525,"line":608},[523,1305,563],{"class":562},[523,1307,566],{"class":529},[523,1309,615],{"class":569},[523,1311,573],{"class":529},[523,1313,576],{"class":562},[523,1315,579],{"class":529},[523,1317,624],{"class":550},[523,1319,584],{"class":529},[523,1321,1322],{"class":525,"line":629},[523,1323,633],{"emptyLinePlaceholder":632},[523,1325,1326,1328,1331,1333,1335,1337,1341],{"class":525,"line":636},[523,1327,639],{"class":537},[523,1329,1330],{"class":569}," open ",[523,1332,544],{"class":529},[523,1334,570],{"class":647},[523,1336,670],{"class":569},[523,1338,1340],{"class":1339},"sfNiH","false",[523,1342,681],{"class":569},[523,1344,1345,1347,1349],{"class":525,"line":684},[523,1346,687],{"class":529},[523,1348,534],{"class":533},[523,1350,556],{"class":529},[523,1352,1353],{"class":525,"line":694},[523,1354,633],{"emptyLinePlaceholder":632},[523,1356,1357,1359,1361],{"class":525,"line":699},[523,1358,530],{"class":529},[523,1360,704],{"class":533},[523,1362,556],{"class":529},[523,1364,1365,1367,1369,1372,1374,1376,1378,1380,1382,1384,1386,1388,1390],{"class":525,"line":709},[523,1366,712],{"class":529},[523,1368,476],{"class":533},[523,1370,1371],{"class":537}," v-model:open",[523,1373,544],{"class":529},[523,1375,547],{"class":529},[523,1377,492],{"class":550},[523,1379,547],{"class":529},[523,1381,729],{"class":537},[523,1383,544],{"class":529},[523,1385,547],{"class":529},[523,1387,736],{"class":550},[523,1389,547],{"class":529},[523,1391,556],{"class":529},[523,1393,1394,1396,1398,1400,1402,1404,1407,1409],{"class":525,"line":743},[523,1395,746],{"class":529},[523,1397,480],{"class":533},[523,1399,762],{"class":537},[523,1401,544],{"class":529},[523,1403,547],{"class":529},[523,1405,1406],{"class":550},"i-lucide-home",[523,1408,547],{"class":529},[523,1410,774],{"class":529},[523,1412,1413,1415],{"class":525,"line":777},[523,1414,746],{"class":529},[523,1416,1110],{"class":533},[523,1418,1419],{"class":525,"line":808},[523,1420,1421],{"class":537},"      expand\n",[523,1423,1424,1427,1429,1431,1434],{"class":525,"line":839},[523,1425,1426],{"class":537},"      :icon",[523,1428,544],{"class":529},[523,1430,547],{"class":529},[523,1432,1433],{"class":550},"open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'",[523,1435,1131],{"class":529},[523,1437,1438],{"class":525,"line":849},[523,1439,1440],{"class":529},"    \u002F>\n",[523,1442,1443],{"class":525,"line":1113},[523,1444,633],{"emptyLinePlaceholder":632},[523,1446,1447,1449,1451,1453,1455,1457,1459,1462,1465,1468,1470],{"class":525,"line":1119},[523,1448,746],{"class":529},[523,1450,704],{"class":533},[523,1452,1098],{"class":529},[523,1454,1231],{"class":537},[523,1456,544],{"class":529},[523,1458,547],{"class":529},[523,1460,1461],{"class":529},"{",[523,1463,1464],{"class":569}," close ",[523,1466,1467],{"class":529},"}",[523,1469,547],{"class":529},[523,1471,556],{"class":529},[523,1473,1474,1476],{"class":525,"line":1134},[523,1475,1107],{"class":529},[523,1477,1110],{"class":533},[523,1479,1480,1482,1484,1486,1488],{"class":525,"line":1149},[523,1481,1122],{"class":537},[523,1483,544],{"class":529},[523,1485,547],{"class":529},[523,1487,373],{"class":550},[523,1489,1131],{"class":529},[523,1491,1492,1494,1496,1498,1501],{"class":525,"line":1164},[523,1493,1137],{"class":537},[523,1495,544],{"class":529},[523,1497,547],{"class":529},[523,1499,1500],{"class":550},"Settings",[523,1502,1131],{"class":529},[523,1504,1505,1508,1510,1512,1515],{"class":525,"line":1170},[523,1506,1507],{"class":537},"        class",[523,1509,544],{"class":529},[523,1511,547],{"class":529},[523,1513,1514],{"class":550},"w-full justify-start",[523,1516,1131],{"class":529},[523,1518,1519,1522,1524,1526,1529],{"class":525,"line":1193},[523,1520,1521],{"class":537},"        @tap",[523,1523,544],{"class":529},[523,1525,547],{"class":529},[523,1527,1528],{"class":550},"close",[523,1530,1131],{"class":529},[523,1532,1533],{"class":525,"line":1203},[523,1534,1167],{"class":529},[523,1536,1537,1539],{"class":525,"line":1212},[523,1538,1107],{"class":529},[523,1540,1110],{"class":533},[523,1542,1544,1546,1548,1550,1553],{"class":525,"line":1543},25,[523,1545,1122],{"class":537},[523,1547,544],{"class":529},[523,1549,547],{"class":529},[523,1551,1552],{"class":550},"i-lucide-circle-help",[523,1554,1131],{"class":529},[523,1556,1558,1560,1562,1564,1567],{"class":525,"line":1557},26,[523,1559,1137],{"class":537},[523,1561,544],{"class":529},[523,1563,547],{"class":529},[523,1565,1566],{"class":550},"Help",[523,1568,1131],{"class":529},[523,1570,1572,1574,1576,1578,1580],{"class":525,"line":1571},27,[523,1573,1507],{"class":537},[523,1575,544],{"class":529},[523,1577,547],{"class":529},[523,1579,1514],{"class":550},[523,1581,1131],{"class":529},[523,1583,1585,1587,1589,1591,1593],{"class":525,"line":1584},28,[523,1586,1521],{"class":537},[523,1588,544],{"class":529},[523,1590,547],{"class":529},[523,1592,1528],{"class":550},[523,1594,1131],{"class":529},[523,1596,1598],{"class":525,"line":1597},29,[523,1599,1167],{"class":529},[523,1601,1603,1605,1607],{"class":525,"line":1602},30,[523,1604,1196],{"class":529},[523,1606,704],{"class":533},[523,1608,556],{"class":529},[523,1610,1612,1614,1616],{"class":525,"line":1611},31,[523,1613,842],{"class":529},[523,1615,476],{"class":533},[523,1617,556],{"class":529},[523,1619,1621,1623,1625],{"class":525,"line":1620},32,[523,1622,687],{"class":529},[523,1624,704],{"class":533},[523,1626,556],{"class":529},[471,1628,1629,1632,1633,1636],{},[474,1630,1631],{},"expand-style=\"floating\""," keeps the panel and row as separate surfaces. Use ",[474,1634,1635],{},"expand-style=\"attached\""," to merge them into one rounded surface while open.",[863,1638,1640],{"id":1639},"floating-placement","Floating placement",[471,1642,1643,1644,1647,1648,883],{},"The default ",[474,1645,1646],{},"layer=\"overlay\""," fixes the island 16 pixels from the bottom edge at ",[474,1649,1650],{},"z-index: 50",[514,1652,1654],{"className":516,"code":1653,"language":518,"meta":519,"style":519},"\u003CVyIsland position=\"top\" layer=\"base\" size=\"sm\">\n  \u003CVyIslandButton icon=\"i-lucide-arrow-left\" accessibility-label=\"Go back\" \u002F>\n  \u003CVyIslandButton label=\"Project settings\" \u002F>\n\u003C\u002FVyIsland>\n",[474,1655,1656,1699,1704,1709],{"__ignoreMap":519},[523,1657,1658,1660,1662,1665,1667,1669,1672,1674,1676,1678,1680,1683,1685,1688,1690,1692,1695,1697],{"class":525,"line":526},[523,1659,530],{"class":529},[523,1661,476],{"class":533},[523,1663,1664],{"class":537}," position",[523,1666,544],{"class":529},[523,1668,547],{"class":529},[523,1670,1671],{"class":550},"top",[523,1673,547],{"class":529},[523,1675,729],{"class":537},[523,1677,544],{"class":529},[523,1679,547],{"class":529},[523,1681,1682],{"class":550},"base",[523,1684,547],{"class":529},[523,1686,1687],{"class":537}," size",[523,1689,544],{"class":529},[523,1691,547],{"class":529},[523,1693,1694],{"class":550},"sm",[523,1696,547],{"class":529},[523,1698,556],{"class":529},[523,1700,1701],{"class":525,"line":559},[523,1702,1703],{"class":569},"  \u003CVyIslandButton icon=\"i-lucide-arrow-left\" accessibility-label=\"Go back\" \u002F>\n",[523,1705,1706],{"class":525,"line":587},[523,1707,1708],{"class":569},"  \u003CVyIslandButton label=\"Project settings\" \u002F>\n",[523,1710,1711,1713,1715],{"class":525,"line":608},[523,1712,687],{"class":529},[523,1714,476],{"class":533},[523,1716,556],{"class":529},[471,1718,869,1719,1722,1723,1725,1726,883],{},[474,1720,1721],{},"layer=\"base\""," when drawers and modals should render above the island. Use ",[474,1724,511],{}," for cards, toolbars, custom corner placement, or islands managed by ",[474,1727,1728],{},"VyIslandGroup",[466,1730,1732],{"id":1731},"features-and-behavior","Features and behavior",[1734,1735,1736,1748,1759,1762,1765,1772,1784,1796],"ul",{},[1737,1738,1739,1741,1742,1744,1745,1747],"li",{},[474,1740,484],{},", ",[474,1743,488],{},", and ",[474,1746,492],{}," are independent; one island can use any combination of them.",[1737,1749,1750,1751,1754,1755,1758],{},"Each axis supports controlled state through ",[474,1752,1753],{},"v-model:*"," and uncontrolled state through its matching ",[474,1756,1757],{},"default*"," prop.",[1737,1760,1761],{},"In controlled mode, the component emits an update but continues to render the supplied prop until the parent updates it.",[1737,1763,1764],{},"A single renderable row child activates compact symmetric padding, allowing an icon-only island to appear circular.",[1737,1766,1767,1768,1771],{},"Whitespace, comments, false ",[474,1769,1770],{},"v-if"," branches, and fragments are handled when counting row children.",[1737,1773,1774,1775,1777,1778,1780,1781,883],{},"The ",[474,1776,1231],{}," slot must exist for the island to enter its rendered open state. Without it, ",[474,1779,492],{}," can update, but no panel appears and slot props report ",[474,1782,1783],{},"open: false",[1737,1785,1786,1789,1790,1792,1793,1795],{},[474,1787,1788],{},"size"," is provided to descendant ",[474,1791,480],{}," components. A button's explicit ",[474,1794,1788],{}," takes precedence.",[1737,1797,1798,1801,1802,1804,1805,1744,1808,1811],{},[474,1799,1800],{},"data-state"," is ",[474,1803,492],{}," or ",[474,1806,1807],{},"closed",[474,1809,1810],{},"data-mode"," contains the resolved row mode.",[863,1813,1815],{"id":1814},"state-composition","State composition",[471,1817,1818,1819,1821],{},"The default and named row slots, plus the ",[474,1820,1231],{}," slot, all receive the same state helpers.",[514,1823,1825],{"className":516,"code":1824,"language":518,"meta":519,"style":519},"\u003CVyIsland v-slot=\"{ value, setValue, toggle }\" layer=\"inline\">\n  \u003CVyIslandButton\n    label=\"Inbox\"\n    :active=\"value === 'inbox'\"\n    @tap=\"setValue('inbox')\"\n  \u002F>\n  \u003CVyIslandButton label=\"More\" @tap=\"toggle\" \u002F>\n\n  \u003Ctemplate #expanded=\"{ setMode, close }\">\n    \u003CVyIslandButton label=\"Compose\" @tap=\"setMode('compose')\" \u002F>\n    \u003CVyIslandButton label=\"Close\" @tap=\"close\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FVyIsland>\n",[474,1826,1827,1871,1876,1881,1886,1891,1896,1901,1905,1910,1915,1920,1925],{"__ignoreMap":519},[523,1828,1829,1831,1833,1836,1838,1840,1842,1844,1847,1850,1852,1855,1857,1859,1861,1863,1865,1867,1869],{"class":525,"line":526},[523,1830,530],{"class":529},[523,1832,476],{"class":533},[523,1834,1835],{"class":537}," v-slot",[523,1837,544],{"class":529},[523,1839,547],{"class":529},[523,1841,1461],{"class":529},[523,1843,751],{"class":569},[523,1845,1846],{"class":529},",",[523,1848,1849],{"class":569}," setValue",[523,1851,1846],{"class":529},[523,1853,1854],{"class":569}," toggle ",[523,1856,1467],{"class":529},[523,1858,547],{"class":529},[523,1860,729],{"class":537},[523,1862,544],{"class":529},[523,1864,547],{"class":529},[523,1866,736],{"class":550},[523,1868,547],{"class":529},[523,1870,556],{"class":529},[523,1872,1873],{"class":525,"line":559},[523,1874,1875],{"class":569},"  \u003CVyIslandButton\n",[523,1877,1878],{"class":525,"line":587},[523,1879,1880],{"class":569},"    label=\"Inbox\"\n",[523,1882,1883],{"class":525,"line":608},[523,1884,1885],{"class":569},"    :active=\"value === 'inbox'\"\n",[523,1887,1888],{"class":525,"line":629},[523,1889,1890],{"class":569},"    @tap=\"setValue('inbox')\"\n",[523,1892,1893],{"class":525,"line":636},[523,1894,1895],{"class":569},"  \u002F>\n",[523,1897,1898],{"class":525,"line":684},[523,1899,1900],{"class":569},"  \u003CVyIslandButton label=\"More\" @tap=\"toggle\" \u002F>\n",[523,1902,1903],{"class":525,"line":694},[523,1904,633],{"emptyLinePlaceholder":632},[523,1906,1907],{"class":525,"line":699},[523,1908,1909],{"class":569},"  \u003Ctemplate #expanded=\"{ setMode, close }\">\n",[523,1911,1912],{"class":525,"line":709},[523,1913,1914],{"class":569},"    \u003CVyIslandButton label=\"Compose\" @tap=\"setMode('compose')\" \u002F>\n",[523,1916,1917],{"class":525,"line":743},[523,1918,1919],{"class":569},"    \u003CVyIslandButton label=\"Close\" @tap=\"close\" \u002F>\n",[523,1921,1922],{"class":525,"line":777},[523,1923,1924],{"class":569},"  \u003C\u002Ftemplate>\n",[523,1926,1927,1929,1931],{"class":525,"line":808},[523,1928,687],{"class":529},[523,1930,476],{"class":533},[523,1932,556],{"class":529},[471,1934,1935,1936,1741,1938,1741,1940,1744,1942,1944,1945,1947],{},"Prefer the declarative ",[474,1937,484],{},[474,1939,488],{},[474,1941,1235],{},[474,1943,878],{}," props on ",[474,1946,480],{}," for common cases. The helpers are useful for custom content or compound actions.",[466,1949,1951],{"id":1950},"props","Props",[1953,1954,1955,1974],"table",{},[1956,1957,1958],"thead",{},[1959,1960,1961,1965,1968,1971],"tr",{},[1962,1963,1964],"th",{},"Prop",[1962,1966,1967],{},"Type",[1962,1969,1970],{},"Default",[1962,1972,1973],{},"Description",[1975,1976,1977,2000,2018,2038,2057,2078,2097,2117,2137,2157,2176,2195,2214],"tbody",{},[1959,1978,1979,1984,1989,1994],{},[1980,1981,1982],"td",{},[474,1983,492],{},[1980,1985,1986],{},[474,1987,1988],{},"boolean",[1980,1990,1991],{},[474,1992,1993],{},"undefined",[1980,1995,1996,1997,883],{},"Controlled expanded state used by ",[474,1998,1999],{},"v-model:open",[1959,2001,2002,2007,2011,2015],{},[1980,2003,2004],{},[474,2005,2006],{},"defaultOpen",[1980,2008,2009],{},[474,2010,1988],{},[1980,2012,2013],{},[474,2014,1340],{},[1980,2016,2017],{},"Initial expanded state when uncontrolled.",[1959,2019,2020,2024,2028,2032],{},[1980,2021,2022],{},[474,2023,488],{},[1980,2025,2026],{},[474,2027,653],{},[1980,2029,2030],{},[474,2031,1993],{},[1980,2033,2034,2035,883],{},"Controlled row mode used by ",[474,2036,2037],{},"v-model:mode",[1959,2039,2040,2045,2049,2054],{},[1980,2041,2042],{},[474,2043,2044],{},"defaultMode",[1980,2046,2047],{},[474,2048,653],{},[1980,2050,2051],{},[474,2052,2053],{},"'default'",[1980,2055,2056],{},"Initial row mode when uncontrolled.",[1959,2058,2059,2063,2068,2072],{},[1980,2060,2061],{},[474,2062,484],{},[1980,2064,2065],{},[474,2066,2067],{},"string | number | null",[1980,2069,2070],{},[474,2071,1993],{},[1980,2073,2074,2075,883],{},"Controlled selected value used by ",[474,2076,2077],{},"v-model:value",[1959,2079,2080,2085,2089,2094],{},[1980,2081,2082],{},[474,2083,2084],{},"defaultValue",[1980,2086,2087],{},[474,2088,2067],{},[1980,2090,2091],{},[474,2092,2093],{},"null",[1980,2095,2096],{},"Initial selected value when uncontrolled.",[1959,2098,2099,2104,2109,2114],{},[1980,2100,2101],{},[474,2102,2103],{},"position",[1980,2105,2106],{},[474,2107,2108],{},"'top' | 'bottom'",[1980,2110,2111],{},[474,2112,2113],{},"'bottom'",[1980,2115,2116],{},"Floating viewport edge and panel growth direction. Ignored by inline layers for placement.",[1959,2118,2119,2124,2129,2134],{},[1980,2120,2121],{},[474,2122,2123],{},"layer",[1980,2125,2126],{},[474,2127,2128],{},"'overlay' | 'base' | 'inline'",[1980,2130,2131],{},[474,2132,2133],{},"'overlay'",[1980,2135,2136],{},"Floating and stacking strategy.",[1959,2138,2139,2144,2149,2154],{},[1980,2140,2141],{},[474,2142,2143],{},"expandStyle",[1980,2145,2146],{},[474,2147,2148],{},"'floating' | 'attached'",[1980,2150,2151],{},[474,2152,2153],{},"'floating'",[1980,2155,2156],{},"Visual relationship between the row and an open panel.",[1959,2158,2159,2163,2168,2173],{},[1980,2160,2161],{},[474,2162,1788],{},[1980,2164,2165],{},[474,2166,2167],{},"'sm' | 'md' | 'lg' | 'xl'",[1980,2169,2170],{},[474,2171,2172],{},"'md'",[1980,2174,2175],{},"Island spacing and inherited button size.",[1959,2177,2178,2183,2187,2192],{},[1980,2179,2180],{},[474,2181,2182],{},"as",[1980,2184,2185],{},[474,2186,653],{},[1980,2188,2189],{},[474,2190,2191],{},"'view'",[1980,2193,2194],{},"Element or component used for the root.",[1959,2196,2197,2202,2207,2211],{},[1980,2198,2199],{},[474,2200,2201],{},"class",[1980,2203,2204],{},[474,2205,2206],{},"any",[1980,2208,2209],{},[474,2210,1993],{},[1980,2212,2213],{},"Classes merged onto the root slot.",[1959,2215,2216,2221,2226,2230],{},[1980,2217,2218],{},[474,2219,2220],{},"ui",[1980,2222,2223],{},[474,2224,2225],{},"Partial\u003CRecord\u003CIslandSlot, any>>",[1980,2227,2228],{},[474,2229,1993],{},[1980,2231,2232],{},"Per-instance theme slot overrides.",[466,2234,2236],{"id":2235},"emits","Emits",[1953,2238,2239,2251],{},[1956,2240,2241],{},[1959,2242,2243,2246,2249],{},[1962,2244,2245],{},"Event",[1962,2247,2248],{},"Payload",[1962,2250,1973],{},[1975,2252,2253,2267,2281],{},[1959,2254,2255,2260,2264],{},[1980,2256,2257],{},[474,2258,2259],{},"update:open",[1980,2261,2262],{},[474,2263,1988],{},[1980,2265,2266],{},"The expanded state changed.",[1959,2268,2269,2274,2278],{},[1980,2270,2271],{},[474,2272,2273],{},"update:mode",[1980,2275,2276],{},[474,2277,653],{},[1980,2279,2280],{},"The active row mode changed.",[1959,2282,2283,2288,2292],{},[1980,2284,2285],{},[474,2286,2287],{},"update:value",[1980,2289,2290],{},[474,2291,2067],{},[1980,2293,2294],{},"The selected value changed.",[466,2296,2298],{"id":2297},"slots","Slots",[471,2300,2301,2302,883],{},"Every slot receives ",[474,2303,2304],{},"{ open, mode, value, setOpen, toggle, close, setMode, resetMode, setValue }",[1953,2306,2307,2316],{},[1956,2308,2309],{},[1959,2310,2311,2314],{},[1962,2312,2313],{},"Slot",[1962,2315,1973],{},[1975,2317,2318,2332,2341],{},[1959,2319,2320,2324],{},[1980,2321,2322],{},[474,2323,882],{},[1980,2325,2326,2327,1801,2329,2331],{},"Row rendered when ",[474,2328,488],{},[474,2330,2053],{}," or the selected named slot does not exist.",[1959,2333,2334,2338],{},[1980,2335,2336],{},[474,2337,1231],{},[1980,2339,2340],{},"Panel rendered while the resolved open state is true. Its presence enables the rendered open state.",[1959,2342,2343,2348],{},[1980,2344,2345],{},[474,2346,2347],{},"[mode]",[1980,2349,2350,2351,2353],{},"Any named slot whose name matches the current free-form ",[474,2352,488],{}," value.",[471,2355,2356,1741,2359,1744,2362,2365,2366,1741,2369,1744,2371,2374],{},[474,2357,2358],{},"setOpen(boolean)",[474,2360,2361],{},"setMode(string)",[474,2363,2364],{},"setValue(value)"," write local state and emit their corresponding update event. ",[474,2367,2368],{},"toggle",[474,2370,1528],{},[474,2372,2373],{},"resetMode"," are convenience helpers.",[466,2376,2378],{"id":2377},"styling-and-theming","Styling and theming",[471,2380,2381,2382,2385,2386,883],{},"Override globally through ",[474,2383,2384],{},"appConfig.ui.island"," or locally with ",[474,2387,2220],{},[1953,2389,2390,2400],{},[1956,2391,2392],{},[1959,2393,2394,2397],{},[1962,2395,2396],{},"UI slot",[1962,2398,2399],{},"Purpose",[1975,2401,2402,2412,2422],{},[1959,2403,2404,2409],{},[1980,2405,2406],{},[474,2407,2408],{},"root",[1980,2410,2411],{},"Outer layout, panel-to-row gap, width limit, and attached-surface chrome.",[1959,2413,2414,2419],{},[1980,2415,2416],{},[474,2417,2418],{},"row",[1980,2420,2421],{},"Main pill surface and horizontal child layout.",[1959,2423,2424,2429],{},[1980,2425,2426],{},[474,2427,2428],{},"panel",[1980,2430,2431],{},"Expandable surface, vertical layout, scrolling, and height limit.",[471,2433,2434,2435,1741,2437,1741,2439,2441,2442,2444,2445,2448],{},"The theme combines ",[474,2436,2103],{},[474,2438,1788],{},[474,2440,2143],{},", rendered ",[474,2443,492],{}," state, and automatic ",[474,2446,2447],{},"solo"," detection.",[1953,2450,2451,2464],{},[1956,2452,2453],{},[1959,2454,2455,2458,2461],{},[1962,2456,2457],{},"Size",[1962,2459,2460],{},"Button target",[1962,2462,2463],{},"Typical use",[1975,2465,2466,2478,2491,2504],{},[1959,2467,2468,2472,2475],{},[1980,2469,2470],{},[474,2471,1694],{},[1980,2473,2474],{},"40px",[1980,2476,2477],{},"Compact toolbars and secondary islands.",[1959,2479,2480,2485,2488],{},[1980,2481,2482],{},[474,2483,2484],{},"md",[1980,2486,2487],{},"44px",[1980,2489,2490],{},"Default controls and minimum comfortable target.",[1959,2492,2493,2498,2501],{},[1980,2494,2495],{},[474,2496,2497],{},"lg",[1980,2499,2500],{},"56px",[1980,2502,2503],{},"Prominent mobile docks.",[1959,2505,2506,2511,2514],{},[1980,2507,2508],{},[474,2509,2510],{},"xl",[1980,2512,2513],{},"64px",[1980,2515,2516],{},"Oversized or presentation-focused docks.",[471,2518,2519,2520,2522,2523,2525,2526,2528],{},"Both surfaces use a translucent white background, backdrop blur, subtle border, and shadow. The default theme is light-mode-oriented. In attached mode, open-state chrome moves to ",[474,2521,2408],{},", the gap collapses, and ",[474,2524,2418],{}," and ",[474,2527,2428],{}," become transparent sections.",[466,2530,328],{"id":2531},"accessibility",[471,2533,2534,2536,2537,2539],{},[474,2535,476],{}," is a visual and state-coordination container; it does not assign a navigation, toolbar, or group role. Choose the semantic context around it based on the content. Its built-in ",[474,2538,480],{}," children use native Lynx button semantics and announce disabled state.",[471,2541,2542,2543,2546,2547,2549],{},"Give every icon-only button an ",[474,2544,2545],{},"accessibility-label",". When a ",[474,2548,484],{}," button represents navigation, expose the destination in visible or accessible text and communicate the current destination in surrounding page content; active styling alone is not a complete selection announcement. Keep custom mode and panel content in a predictable focus order, and test expanding or morphing layouts with VoiceOver and TalkBack.",[466,2551,2553],{"id":2552},"platform-notes","Platform notes",[1734,2555,2556,2567,2582,2599,2606],{},[1737,2557,2558,2559,2562,2563,2566],{},"Floating placement is applied with an inline ",[474,2560,2561],{},"position: fixed"," style because Lynx does not reliably apply the Tailwind ",[474,2564,2565],{},"fixed"," utility.",[1737,2568,2569,2570,2573,2574,2577,2578,2581],{},"Floating islands span the viewport from ",[474,2571,2572],{},"left: 0"," to ",[474,2575,2576],{},"right: 0"," and center the pill. Override inline ",[474,2579,2580],{},"style"," for custom offsets or corner placement.",[1737,2583,2584,2587,2588,2590,2591,2587,2593,2590,2596,2598],{},[474,2585,2586],{},"overlay"," uses ",[474,2589,1650],{},"; ",[474,2592,1682],{},[474,2594,2595],{},"z-index: 10",[474,2597,736],{}," applies no positioning style.",[1737,2600,2601,2602,2605],{},"The panel grows away from the selected edge and is capped at ",[474,2603,2604],{},"calc(100dvh - 4rem)"," with vertical scrolling.",[1737,2607,2608,2609,2525,2612,2615],{},"The component uses Lynx ",[474,2610,2611],{},"view",[474,2613,2614],{},"text"," conventions rather than assuming DOM-only elements.",[466,2617,2619],{"id":2618},"related-components","Related components",[1734,2621,2622,2630,2637,2646],{},[1737,2623,2624,2629],{},[2625,2626,2627],"a",{"href":155},[474,2628,154],{}," for declarative actions, selection, modes, and expansion.",[1737,2631,2632,2636],{},[2625,2633,2634],{"href":160},[474,2635,159],{}," for positioning multiple companion islands together.",[1737,2638,2639,2645],{},[2625,2640,2642],{"href":2641},"\u002Fcomponents\u002Fdropdown-menu",[474,2643,2644],{},"Dropdown Menu"," for an anchored menu with menu semantics.",[1737,2647,2648,2652],{},[2625,2649,2650],{"href":278},[474,2651,277],{}," for persistent peer panels with explicit tab behavior.",[2580,2654,2655],{},"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 .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);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":519,"searchDepth":526,"depth":559,"links":2657},[2658,2659,2664,2667,2668,2669,2670,2671,2672,2673],{"id":468,"depth":559,"text":469},{"id":501,"depth":559,"text":502,"children":2660},[2661,2662,2663],{"id":865,"depth":587,"text":866},{"id":1224,"depth":587,"text":1225},{"id":1639,"depth":587,"text":1640},{"id":1731,"depth":559,"text":1732,"children":2665},[2666],{"id":1814,"depth":587,"text":1815},{"id":1950,"depth":559,"text":1951},{"id":2235,"depth":559,"text":2236},{"id":2297,"depth":559,"text":2298},{"id":2377,"depth":559,"text":2378},{"id":2531,"depth":559,"text":328},{"id":2552,"depth":559,"text":2553},{"id":2618,"depth":559,"text":2619},"Build a floating or inline pill that can select, morph, and expand.",[2676],{"label":2677,"icon":2678,"to":2679,"target":2680},"Source","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002FKealanAU\u002Fvyui\u002Fblob\u002Fmain\u002Fpackages\u002Fkit\u002Fsrc\u002Fcomponents\u002FIsland.vue","_blank",{},{"icon":69},{"title":150,"description":2674},"Iy-FY2fkm6tVN1GxJt__msaWTGQOKm0L2ElUO1BuPC0",[2686,2688],{"title":145,"path":146,"stem":147,"description":2687,"icon":-1,"children":-1,"navigation":-1},"Collect single-line text with themed states, icons, avatars, and native keyboard events.",{"title":154,"path":155,"stem":156,"description":2689,"icon":-1,"children":-1,"navigation":-1},"Add actions, selections, mode switches, and expansion controls to an island.",1785060126316]