[{"data":1,"prerenderedAt":2591},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Fisland":406,"\u002Fcomponents\u002Fisland-surround":2586},[4,34,51,301,327,332,337],{"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",{"id":407,"title":150,"body":408,"description":2575,"extension":2385,"links":2576,"meta":2582,"navigation":2583,"package":63,"path":151,"seo":2584,"stem":152,"__hash__":2585},"docs\u002F3.components\u002Fisland.md",{"type":409,"value":410,"toc":2557},"minimark",[411,416,440,445,449,459,786,792,797,814,1135,1138,1142,1157,1529,1539,1543,1553,1619,1631,1635,1714,1718,1724,1834,1849,1853,2134,2138,2196,2200,2206,2255,2276,2280,2289,2333,2350,2418,2430,2433,2441,2451,2455,2517,2521,2554],[412,413,415],"h2",{"id":414},"overview","Overview",[417,418,419,423,424,427,428,431,432,435,436,439],"p",{},[420,421,422],"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 ",[420,425,426],{},"VyIslandButton"," components: selected ",[420,429,430],{},"value",", active row ",[420,433,434],{},"mode",", and expanded ",[420,437,438],{},"open"," state.",[441,442],"component-code",{"height":443,"name":444},"160px","island-example",[412,446,448],{"id":447},"usage","Usage",[417,450,451,452,454,455,458],{},"Compose an island from ",[420,453,426],{}," children. Set ",[420,456,457],{},"layer=\"inline\""," when the island should remain in document flow.",[460,461,466],"pre",{"className":462,"code":463,"language":464,"meta":465,"style":465},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VyIsland, VyIslandButton } from '@vyui\u002Fkit'\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","",[420,467,468,503,531,557,564,612,622,627,637,671,705,736,767,777],{"__ignoreMap":465},[469,470,473,477,481,485,488,491,494,498,500],"span",{"class":471,"line":472},"line",1,[469,474,476],{"class":475},"sMK4o","\u003C",[469,478,480],{"class":479},"swJcz","script",[469,482,484],{"class":483},"spNyl"," setup",[469,486,487],{"class":483}," lang",[469,489,490],{"class":475},"=",[469,492,493],{"class":475},"\"",[469,495,497],{"class":496},"sfazB","ts",[469,499,493],{"class":475},[469,501,502],{"class":475},">\n",[469,504,506,510,513,517,520,523,526,528],{"class":471,"line":505},2,[469,507,509],{"class":508},"s7zQu","import",[469,511,512],{"class":475}," {",[469,514,516],{"class":515},"sTEyZ"," ref",[469,518,519],{"class":475}," }",[469,521,522],{"class":508}," from",[469,524,525],{"class":475}," '",[469,527,464],{"class":496},[469,529,530],{"class":475},"'\n",[469,532,534,536,538,541,544,547,549,551,553,555],{"class":471,"line":533},3,[469,535,509],{"class":508},[469,537,512],{"class":475},[469,539,540],{"class":515}," VyIsland",[469,542,543],{"class":475},",",[469,545,546],{"class":515}," VyIslandButton",[469,548,519],{"class":475},[469,550,522],{"class":508},[469,552,525],{"class":475},[469,554,46],{"class":496},[469,556,530],{"class":475},[469,558,560],{"class":471,"line":559},4,[469,561,563],{"emptyLinePlaceholder":562},true,"\n",[469,565,567,570,573,575,578,580,584,587,590,592,595,598,601,604,607,609],{"class":471,"line":566},5,[469,568,569],{"class":483},"const",[469,571,572],{"class":515}," section ",[469,574,490],{"class":475},[469,576,516],{"class":577},"s2Zo4",[469,579,476],{"class":475},[469,581,583],{"class":582},"sBMFI","string",[469,585,586],{"class":475}," |",[469,588,589],{"class":582}," number",[469,591,586],{"class":475},[469,593,594],{"class":582}," null",[469,596,597],{"class":475},">",[469,599,600],{"class":515},"(",[469,602,603],{"class":475},"'",[469,605,606],{"class":496},"inbox",[469,608,603],{"class":475},[469,610,611],{"class":515},")\n",[469,613,615,618,620],{"class":471,"line":614},6,[469,616,617],{"class":475},"\u003C\u002F",[469,619,480],{"class":479},[469,621,502],{"class":475},[469,623,625],{"class":471,"line":624},7,[469,626,563],{"emptyLinePlaceholder":562},[469,628,630,632,635],{"class":471,"line":629},8,[469,631,476],{"class":475},[469,633,634],{"class":479},"template",[469,636,502],{"class":475},[469,638,640,643,645,648,650,652,655,657,660,662,664,667,669],{"class":471,"line":639},9,[469,641,642],{"class":475},"  \u003C",[469,644,422],{"class":479},[469,646,647],{"class":483}," v-model:value",[469,649,490],{"class":475},[469,651,493],{"class":475},[469,653,654],{"class":496},"section",[469,656,493],{"class":475},[469,658,659],{"class":483}," layer",[469,661,490],{"class":475},[469,663,493],{"class":475},[469,665,666],{"class":496},"inline",[469,668,493],{"class":475},[469,670,502],{"class":475},[469,672,674,677,679,682,684,686,688,690,693,695,697,700,702],{"class":471,"line":673},10,[469,675,676],{"class":475},"    \u003C",[469,678,426],{"class":479},[469,680,681],{"class":483}," value",[469,683,490],{"class":475},[469,685,493],{"class":475},[469,687,606],{"class":496},[469,689,493],{"class":475},[469,691,692],{"class":483}," icon",[469,694,490],{"class":475},[469,696,493],{"class":475},[469,698,699],{"class":496},"i-lucide-inbox",[469,701,493],{"class":475},[469,703,704],{"class":475}," \u002F>\n",[469,706,708,710,712,714,716,718,721,723,725,727,729,732,734],{"class":471,"line":707},11,[469,709,676],{"class":475},[469,711,426],{"class":479},[469,713,681],{"class":483},[469,715,490],{"class":475},[469,717,493],{"class":475},[469,719,720],{"class":496},"activity",[469,722,493],{"class":475},[469,724,692],{"class":483},[469,726,490],{"class":475},[469,728,493],{"class":475},[469,730,731],{"class":496},"i-lucide-bell",[469,733,493],{"class":475},[469,735,704],{"class":475},[469,737,739,741,743,745,747,749,752,754,756,758,760,763,765],{"class":471,"line":738},12,[469,740,676],{"class":475},[469,742,426],{"class":479},[469,744,681],{"class":483},[469,746,490],{"class":475},[469,748,493],{"class":475},[469,750,751],{"class":496},"profile",[469,753,493],{"class":475},[469,755,692],{"class":483},[469,757,490],{"class":475},[469,759,493],{"class":475},[469,761,762],{"class":496},"i-lucide-user",[469,764,493],{"class":475},[469,766,704],{"class":475},[469,768,770,773,775],{"class":471,"line":769},13,[469,771,772],{"class":475},"  \u003C\u002F",[469,774,422],{"class":479},[469,776,502],{"class":475},[469,778,780,782,784],{"class":471,"line":779},14,[469,781,617],{"class":475},[469,783,634],{"class":479},[469,785,502],{"class":475},[417,787,788,789,791],{},"Buttons with a ",[420,790,430],{}," update the island model and automatically receive active styling when their value matches.",[793,794,796],"h3",{"id":795},"row-modes","Row modes",[417,798,799,800,802,803,805,806,809,810,813],{},"Use ",[420,801,434],{}," to replace the normal row with a named slot. Mode names are free-form strings. A button with the same ",[420,804,434],{}," switches the parent, and a button with ",[420,807,808],{},"reset"," returns it to ",[420,811,812],{},"default",".",[460,815,817],{"className":462,"code":816,"language":464,"meta":465,"style":465},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VyIsland, VyIslandButton } from '@vyui\u002Fkit'\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",[420,818,819,839,857,879,883,904,912,916,924,953,971,1002,1006,1019,1027,1033,1048,1063,1078,1084,1107,1117,1126],{"__ignoreMap":465},[469,820,821,823,825,827,829,831,833,835,837],{"class":471,"line":472},[469,822,476],{"class":475},[469,824,480],{"class":479},[469,826,484],{"class":483},[469,828,487],{"class":483},[469,830,490],{"class":475},[469,832,493],{"class":475},[469,834,497],{"class":496},[469,836,493],{"class":475},[469,838,502],{"class":475},[469,840,841,843,845,847,849,851,853,855],{"class":471,"line":505},[469,842,509],{"class":508},[469,844,512],{"class":475},[469,846,516],{"class":515},[469,848,519],{"class":475},[469,850,522],{"class":508},[469,852,525],{"class":475},[469,854,464],{"class":496},[469,856,530],{"class":475},[469,858,859,861,863,865,867,869,871,873,875,877],{"class":471,"line":533},[469,860,509],{"class":508},[469,862,512],{"class":475},[469,864,540],{"class":515},[469,866,543],{"class":475},[469,868,546],{"class":515},[469,870,519],{"class":475},[469,872,522],{"class":508},[469,874,525],{"class":475},[469,876,46],{"class":496},[469,878,530],{"class":475},[469,880,881],{"class":471,"line":559},[469,882,563],{"emptyLinePlaceholder":562},[469,884,885,887,890,892,894,896,898,900,902],{"class":471,"line":566},[469,886,569],{"class":483},[469,888,889],{"class":515}," mode ",[469,891,490],{"class":475},[469,893,516],{"class":577},[469,895,600],{"class":515},[469,897,603],{"class":475},[469,899,812],{"class":496},[469,901,603],{"class":475},[469,903,611],{"class":515},[469,905,906,908,910],{"class":471,"line":614},[469,907,617],{"class":475},[469,909,480],{"class":479},[469,911,502],{"class":475},[469,913,914],{"class":471,"line":624},[469,915,563],{"emptyLinePlaceholder":562},[469,917,918,920,922],{"class":471,"line":629},[469,919,476],{"class":475},[469,921,634],{"class":479},[469,923,502],{"class":475},[469,925,926,928,930,933,935,937,939,941,943,945,947,949,951],{"class":471,"line":639},[469,927,642],{"class":475},[469,929,422],{"class":479},[469,931,932],{"class":483}," v-model:mode",[469,934,490],{"class":475},[469,936,493],{"class":475},[469,938,434],{"class":496},[469,940,493],{"class":475},[469,942,659],{"class":483},[469,944,490],{"class":475},[469,946,493],{"class":475},[469,948,666],{"class":496},[469,950,493],{"class":475},[469,952,502],{"class":475},[469,954,955,957,959,961,963,965,967,969],{"class":471,"line":673},[469,956,676],{"class":475},[469,958,426],{"class":479},[469,960,692],{"class":483},[469,962,490],{"class":475},[469,964,493],{"class":475},[469,966,699],{"class":496},[469,968,493],{"class":475},[469,970,704],{"class":475},[469,972,973,975,977,980,982,984,987,989,991,993,995,998,1000],{"class":471,"line":707},[469,974,676],{"class":475},[469,976,426],{"class":479},[469,978,979],{"class":483}," mode",[469,981,490],{"class":475},[469,983,493],{"class":475},[469,985,986],{"class":496},"search",[469,988,493],{"class":475},[469,990,692],{"class":483},[469,992,490],{"class":475},[469,994,493],{"class":475},[469,996,997],{"class":496},"i-lucide-search",[469,999,493],{"class":475},[469,1001,704],{"class":475},[469,1003,1004],{"class":471,"line":738},[469,1005,563],{"emptyLinePlaceholder":562},[469,1007,1008,1010,1012,1015,1017],{"class":471,"line":769},[469,1009,676],{"class":475},[469,1011,634],{"class":479},[469,1013,1014],{"class":475}," #",[469,1016,986],{"class":483},[469,1018,502],{"class":475},[469,1020,1021,1024],{"class":471,"line":779},[469,1022,1023],{"class":475},"      \u003C",[469,1025,1026],{"class":479},"VyIslandButton\n",[469,1028,1030],{"class":471,"line":1029},15,[469,1031,1032],{"class":483},"        reset\n",[469,1034,1036,1039,1041,1043,1045],{"class":471,"line":1035},16,[469,1037,1038],{"class":483},"        icon",[469,1040,490],{"class":475},[469,1042,493],{"class":475},[469,1044,997],{"class":496},[469,1046,1047],{"class":475},"\"\n",[469,1049,1051,1054,1056,1058,1061],{"class":471,"line":1050},17,[469,1052,1053],{"class":483},"        label",[469,1055,490],{"class":475},[469,1057,493],{"class":475},[469,1059,1060],{"class":496},"Search messages…",[469,1062,1047],{"class":475},[469,1064,1066,1069,1071,1073,1076],{"class":471,"line":1065},18,[469,1067,1068],{"class":483},"        :style",[469,1070,490],{"class":475},[469,1072,493],{"class":475},[469,1074,1075],{"class":496},"{ flexGrow: 1, justifyContent: 'flex-start' }",[469,1077,1047],{"class":475},[469,1079,1081],{"class":471,"line":1080},19,[469,1082,1083],{"class":475},"      \u002F>\n",[469,1085,1087,1089,1091,1094,1096,1098,1100,1103,1105],{"class":471,"line":1086},20,[469,1088,1023],{"class":475},[469,1090,426],{"class":479},[469,1092,1093],{"class":483}," reset",[469,1095,692],{"class":483},[469,1097,490],{"class":475},[469,1099,493],{"class":475},[469,1101,1102],{"class":496},"i-lucide-x",[469,1104,493],{"class":475},[469,1106,704],{"class":475},[469,1108,1110,1113,1115],{"class":471,"line":1109},21,[469,1111,1112],{"class":475},"    \u003C\u002F",[469,1114,634],{"class":479},[469,1116,502],{"class":475},[469,1118,1120,1122,1124],{"class":471,"line":1119},22,[469,1121,772],{"class":475},[469,1123,422],{"class":479},[469,1125,502],{"class":475},[469,1127,1129,1131,1133],{"class":471,"line":1128},23,[469,1130,617],{"class":475},[469,1132,634],{"class":479},[469,1134,502],{"class":475},[417,1136,1137],{},"If the current mode has no matching named slot, the island safely falls back to the default slot.",[793,1139,1141],{"id":1140},"expandable-panel","Expandable panel",[417,1143,1144,1145,1148,1149,1152,1153,1156],{},"Add an ",[420,1146,1147],{},"expanded"," slot and use an ",[420,1150,1151],{},"expand"," button to toggle it. For a bottom island, the panel appears above the row; ",[420,1154,1155],{},"position=\"top\""," places it below.",[460,1158,1160],{"className":462,"code":1159,"language":464,"meta":465,"style":465},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VyIsland, VyIslandButton } from '@vyui\u002Fkit'\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",[420,1161,1162,1182,1200,1222,1226,1245,1253,1257,1265,1294,1313,1319,1324,1338,1343,1347,1374,1380,1392,1405,1419,1433,1437,1443,1457,1471,1484,1497,1502,1511,1520],{"__ignoreMap":465},[469,1163,1164,1166,1168,1170,1172,1174,1176,1178,1180],{"class":471,"line":472},[469,1165,476],{"class":475},[469,1167,480],{"class":479},[469,1169,484],{"class":483},[469,1171,487],{"class":483},[469,1173,490],{"class":475},[469,1175,493],{"class":475},[469,1177,497],{"class":496},[469,1179,493],{"class":475},[469,1181,502],{"class":475},[469,1183,1184,1186,1188,1190,1192,1194,1196,1198],{"class":471,"line":505},[469,1185,509],{"class":508},[469,1187,512],{"class":475},[469,1189,516],{"class":515},[469,1191,519],{"class":475},[469,1193,522],{"class":508},[469,1195,525],{"class":475},[469,1197,464],{"class":496},[469,1199,530],{"class":475},[469,1201,1202,1204,1206,1208,1210,1212,1214,1216,1218,1220],{"class":471,"line":533},[469,1203,509],{"class":508},[469,1205,512],{"class":475},[469,1207,540],{"class":515},[469,1209,543],{"class":475},[469,1211,546],{"class":515},[469,1213,519],{"class":475},[469,1215,522],{"class":508},[469,1217,525],{"class":475},[469,1219,46],{"class":496},[469,1221,530],{"class":475},[469,1223,1224],{"class":471,"line":559},[469,1225,563],{"emptyLinePlaceholder":562},[469,1227,1228,1230,1233,1235,1237,1239,1243],{"class":471,"line":566},[469,1229,569],{"class":483},[469,1231,1232],{"class":515}," open ",[469,1234,490],{"class":475},[469,1236,516],{"class":577},[469,1238,600],{"class":515},[469,1240,1242],{"class":1241},"sfNiH","false",[469,1244,611],{"class":515},[469,1246,1247,1249,1251],{"class":471,"line":614},[469,1248,617],{"class":475},[469,1250,480],{"class":479},[469,1252,502],{"class":475},[469,1254,1255],{"class":471,"line":624},[469,1256,563],{"emptyLinePlaceholder":562},[469,1258,1259,1261,1263],{"class":471,"line":629},[469,1260,476],{"class":475},[469,1262,634],{"class":479},[469,1264,502],{"class":475},[469,1266,1267,1269,1271,1274,1276,1278,1280,1282,1284,1286,1288,1290,1292],{"class":471,"line":639},[469,1268,642],{"class":475},[469,1270,422],{"class":479},[469,1272,1273],{"class":483}," v-model:open",[469,1275,490],{"class":475},[469,1277,493],{"class":475},[469,1279,438],{"class":496},[469,1281,493],{"class":475},[469,1283,659],{"class":483},[469,1285,490],{"class":475},[469,1287,493],{"class":475},[469,1289,666],{"class":496},[469,1291,493],{"class":475},[469,1293,502],{"class":475},[469,1295,1296,1298,1300,1302,1304,1306,1309,1311],{"class":471,"line":673},[469,1297,676],{"class":475},[469,1299,426],{"class":479},[469,1301,692],{"class":483},[469,1303,490],{"class":475},[469,1305,493],{"class":475},[469,1307,1308],{"class":496},"i-lucide-home",[469,1310,493],{"class":475},[469,1312,704],{"class":475},[469,1314,1315,1317],{"class":471,"line":707},[469,1316,676],{"class":475},[469,1318,1026],{"class":479},[469,1320,1321],{"class":471,"line":738},[469,1322,1323],{"class":483},"      expand\n",[469,1325,1326,1329,1331,1333,1336],{"class":471,"line":769},[469,1327,1328],{"class":483},"      :icon",[469,1330,490],{"class":475},[469,1332,493],{"class":475},[469,1334,1335],{"class":496},"open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'",[469,1337,1047],{"class":475},[469,1339,1340],{"class":471,"line":779},[469,1341,1342],{"class":475},"    \u002F>\n",[469,1344,1345],{"class":471,"line":1029},[469,1346,563],{"emptyLinePlaceholder":562},[469,1348,1349,1351,1353,1355,1357,1359,1361,1364,1367,1370,1372],{"class":471,"line":1035},[469,1350,676],{"class":475},[469,1352,634],{"class":479},[469,1354,1014],{"class":475},[469,1356,1147],{"class":483},[469,1358,490],{"class":475},[469,1360,493],{"class":475},[469,1362,1363],{"class":475},"{",[469,1365,1366],{"class":515}," close ",[469,1368,1369],{"class":475},"}",[469,1371,493],{"class":475},[469,1373,502],{"class":475},[469,1375,1376,1378],{"class":471,"line":1050},[469,1377,1023],{"class":475},[469,1379,1026],{"class":479},[469,1381,1382,1384,1386,1388,1390],{"class":471,"line":1065},[469,1383,1038],{"class":483},[469,1385,490],{"class":475},[469,1387,493],{"class":475},[469,1389,373],{"class":496},[469,1391,1047],{"class":475},[469,1393,1394,1396,1398,1400,1403],{"class":471,"line":1080},[469,1395,1053],{"class":483},[469,1397,490],{"class":475},[469,1399,493],{"class":475},[469,1401,1402],{"class":496},"Settings",[469,1404,1047],{"class":475},[469,1406,1407,1410,1412,1414,1417],{"class":471,"line":1086},[469,1408,1409],{"class":483},"        class",[469,1411,490],{"class":475},[469,1413,493],{"class":475},[469,1415,1416],{"class":496},"w-full justify-start",[469,1418,1047],{"class":475},[469,1420,1421,1424,1426,1428,1431],{"class":471,"line":1109},[469,1422,1423],{"class":483},"        @tap",[469,1425,490],{"class":475},[469,1427,493],{"class":475},[469,1429,1430],{"class":496},"close",[469,1432,1047],{"class":475},[469,1434,1435],{"class":471,"line":1119},[469,1436,1083],{"class":475},[469,1438,1439,1441],{"class":471,"line":1128},[469,1440,1023],{"class":475},[469,1442,1026],{"class":479},[469,1444,1446,1448,1450,1452,1455],{"class":471,"line":1445},24,[469,1447,1038],{"class":483},[469,1449,490],{"class":475},[469,1451,493],{"class":475},[469,1453,1454],{"class":496},"i-lucide-circle-help",[469,1456,1047],{"class":475},[469,1458,1460,1462,1464,1466,1469],{"class":471,"line":1459},25,[469,1461,1053],{"class":483},[469,1463,490],{"class":475},[469,1465,493],{"class":475},[469,1467,1468],{"class":496},"Help",[469,1470,1047],{"class":475},[469,1472,1474,1476,1478,1480,1482],{"class":471,"line":1473},26,[469,1475,1409],{"class":483},[469,1477,490],{"class":475},[469,1479,493],{"class":475},[469,1481,1416],{"class":496},[469,1483,1047],{"class":475},[469,1485,1487,1489,1491,1493,1495],{"class":471,"line":1486},27,[469,1488,1423],{"class":483},[469,1490,490],{"class":475},[469,1492,493],{"class":475},[469,1494,1430],{"class":496},[469,1496,1047],{"class":475},[469,1498,1500],{"class":471,"line":1499},28,[469,1501,1083],{"class":475},[469,1503,1505,1507,1509],{"class":471,"line":1504},29,[469,1506,1112],{"class":475},[469,1508,634],{"class":479},[469,1510,502],{"class":475},[469,1512,1514,1516,1518],{"class":471,"line":1513},30,[469,1515,772],{"class":475},[469,1517,422],{"class":479},[469,1519,502],{"class":475},[469,1521,1523,1525,1527],{"class":471,"line":1522},31,[469,1524,617],{"class":475},[469,1526,634],{"class":479},[469,1528,502],{"class":475},[417,1530,1531,1534,1535,1538],{},[420,1532,1533],{},"expand-style=\"floating\""," keeps the panel and row as separate surfaces. Use ",[420,1536,1537],{},"expand-style=\"attached\""," to merge them into one rounded surface while open.",[793,1540,1542],{"id":1541},"floating-placement","Floating placement",[417,1544,1545,1546,1549,1550,813],{},"The default ",[420,1547,1548],{},"layer=\"overlay\""," fixes the island 16 pixels from the bottom edge at ",[420,1551,1552],{},"z-index: 50",[460,1554,1556],{"className":462,"code":1555,"language":464,"meta":465,"style":465},"\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",[420,1557,1558,1601,1606,1611],{"__ignoreMap":465},[469,1559,1560,1562,1564,1567,1569,1571,1574,1576,1578,1580,1582,1585,1587,1590,1592,1594,1597,1599],{"class":471,"line":472},[469,1561,476],{"class":475},[469,1563,422],{"class":479},[469,1565,1566],{"class":483}," position",[469,1568,490],{"class":475},[469,1570,493],{"class":475},[469,1572,1573],{"class":496},"top",[469,1575,493],{"class":475},[469,1577,659],{"class":483},[469,1579,490],{"class":475},[469,1581,493],{"class":475},[469,1583,1584],{"class":496},"base",[469,1586,493],{"class":475},[469,1588,1589],{"class":483}," size",[469,1591,490],{"class":475},[469,1593,493],{"class":475},[469,1595,1596],{"class":496},"sm",[469,1598,493],{"class":475},[469,1600,502],{"class":475},[469,1602,1603],{"class":471,"line":505},[469,1604,1605],{"class":515},"  \u003CVyIslandButton icon=\"i-lucide-arrow-left\" accessibility-label=\"Go back\" \u002F>\n",[469,1607,1608],{"class":471,"line":533},[469,1609,1610],{"class":515},"  \u003CVyIslandButton label=\"Project settings\" \u002F>\n",[469,1612,1613,1615,1617],{"class":471,"line":559},[469,1614,617],{"class":475},[469,1616,422],{"class":479},[469,1618,502],{"class":475},[417,1620,799,1621,1624,1625,1627,1628,813],{},[420,1622,1623],{},"layer=\"base\""," when drawers and modals should render above the island. Use ",[420,1626,457],{}," for cards, toolbars, custom corner placement, or islands managed by ",[420,1629,1630],{},"VyIslandGroup",[412,1632,1634],{"id":1633},"features-and-behavior","Features and behavior",[1636,1637,1638,1650,1661,1664,1667,1674,1686,1698],"ul",{},[1639,1640,1641,1643,1644,1646,1647,1649],"li",{},[420,1642,430],{},", ",[420,1645,434],{},", and ",[420,1648,438],{}," are independent; one island can use any combination of them.",[1639,1651,1652,1653,1656,1657,1660],{},"Each axis supports controlled state through ",[420,1654,1655],{},"v-model:*"," and uncontrolled state through its matching ",[420,1658,1659],{},"default*"," prop.",[1639,1662,1663],{},"In controlled mode, the component emits an update but continues to render the supplied prop until the parent updates it.",[1639,1665,1666],{},"A single renderable row child activates compact symmetric padding, allowing an icon-only island to appear circular.",[1639,1668,1669,1670,1673],{},"Whitespace, comments, false ",[420,1671,1672],{},"v-if"," branches, and fragments are handled when counting row children.",[1639,1675,1676,1677,1679,1680,1682,1683,813],{},"The ",[420,1678,1147],{}," slot must exist for the island to enter its rendered open state. Without it, ",[420,1681,438],{}," can update, but no panel appears and slot props report ",[420,1684,1685],{},"open: false",[1639,1687,1688,1691,1692,1694,1695,1697],{},[420,1689,1690],{},"size"," is provided to descendant ",[420,1693,426],{}," components. A button's explicit ",[420,1696,1690],{}," takes precedence.",[1639,1699,1700,1703,1704,1706,1707,1646,1710,1713],{},[420,1701,1702],{},"data-state"," is ",[420,1705,438],{}," or ",[420,1708,1709],{},"closed",[420,1711,1712],{},"data-mode"," contains the resolved row mode.",[793,1715,1717],{"id":1716},"state-composition","State composition",[417,1719,1720,1721,1723],{},"The default and named row slots, plus the ",[420,1722,1147],{}," slot, all receive the same state helpers.",[460,1725,1727],{"className":462,"code":1726,"language":464,"meta":465,"style":465},"\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",[420,1728,1729,1772,1777,1782,1787,1792,1797,1802,1806,1811,1816,1821,1826],{"__ignoreMap":465},[469,1730,1731,1733,1735,1738,1740,1742,1744,1746,1748,1751,1753,1756,1758,1760,1762,1764,1766,1768,1770],{"class":471,"line":472},[469,1732,476],{"class":475},[469,1734,422],{"class":479},[469,1736,1737],{"class":483}," v-slot",[469,1739,490],{"class":475},[469,1741,493],{"class":475},[469,1743,1363],{"class":475},[469,1745,681],{"class":515},[469,1747,543],{"class":475},[469,1749,1750],{"class":515}," setValue",[469,1752,543],{"class":475},[469,1754,1755],{"class":515}," toggle ",[469,1757,1369],{"class":475},[469,1759,493],{"class":475},[469,1761,659],{"class":483},[469,1763,490],{"class":475},[469,1765,493],{"class":475},[469,1767,666],{"class":496},[469,1769,493],{"class":475},[469,1771,502],{"class":475},[469,1773,1774],{"class":471,"line":505},[469,1775,1776],{"class":515},"  \u003CVyIslandButton\n",[469,1778,1779],{"class":471,"line":533},[469,1780,1781],{"class":515},"    label=\"Inbox\"\n",[469,1783,1784],{"class":471,"line":559},[469,1785,1786],{"class":515},"    :active=\"value === 'inbox'\"\n",[469,1788,1789],{"class":471,"line":566},[469,1790,1791],{"class":515},"    @tap=\"setValue('inbox')\"\n",[469,1793,1794],{"class":471,"line":614},[469,1795,1796],{"class":515},"  \u002F>\n",[469,1798,1799],{"class":471,"line":624},[469,1800,1801],{"class":515},"  \u003CVyIslandButton label=\"More\" @tap=\"toggle\" \u002F>\n",[469,1803,1804],{"class":471,"line":629},[469,1805,563],{"emptyLinePlaceholder":562},[469,1807,1808],{"class":471,"line":639},[469,1809,1810],{"class":515},"  \u003Ctemplate #expanded=\"{ setMode, close }\">\n",[469,1812,1813],{"class":471,"line":673},[469,1814,1815],{"class":515},"    \u003CVyIslandButton label=\"Compose\" @tap=\"setMode('compose')\" \u002F>\n",[469,1817,1818],{"class":471,"line":707},[469,1819,1820],{"class":515},"    \u003CVyIslandButton label=\"Close\" @tap=\"close\" \u002F>\n",[469,1822,1823],{"class":471,"line":738},[469,1824,1825],{"class":515},"  \u003C\u002Ftemplate>\n",[469,1827,1828,1830,1832],{"class":471,"line":769},[469,1829,617],{"class":475},[469,1831,422],{"class":479},[469,1833,502],{"class":475},[417,1835,1836,1837,1643,1839,1643,1841,1646,1843,1845,1846,1848],{},"Prefer the declarative ",[420,1838,430],{},[420,1840,434],{},[420,1842,1151],{},[420,1844,808],{}," props on ",[420,1847,426],{}," for common cases. The helpers are useful for custom content or compound actions.",[412,1850,1852],{"id":1851},"props","Props",[1854,1855,1856,1875],"table",{},[1857,1858,1859],"thead",{},[1860,1861,1862,1866,1869,1872],"tr",{},[1863,1864,1865],"th",{},"Prop",[1863,1867,1868],{},"Type",[1863,1870,1871],{},"Default",[1863,1873,1874],{},"Description",[1876,1877,1878,1901,1919,1939,1958,1979,1998,2018,2038,2058,2077,2096,2115],"tbody",{},[1860,1879,1880,1885,1890,1895],{},[1881,1882,1883],"td",{},[420,1884,438],{},[1881,1886,1887],{},[420,1888,1889],{},"boolean",[1881,1891,1892],{},[420,1893,1894],{},"undefined",[1881,1896,1897,1898,813],{},"Controlled expanded state used by ",[420,1899,1900],{},"v-model:open",[1860,1902,1903,1908,1912,1916],{},[1881,1904,1905],{},[420,1906,1907],{},"defaultOpen",[1881,1909,1910],{},[420,1911,1889],{},[1881,1913,1914],{},[420,1915,1242],{},[1881,1917,1918],{},"Initial expanded state when uncontrolled.",[1860,1920,1921,1925,1929,1933],{},[1881,1922,1923],{},[420,1924,434],{},[1881,1926,1927],{},[420,1928,583],{},[1881,1930,1931],{},[420,1932,1894],{},[1881,1934,1935,1936,813],{},"Controlled row mode used by ",[420,1937,1938],{},"v-model:mode",[1860,1940,1941,1946,1950,1955],{},[1881,1942,1943],{},[420,1944,1945],{},"defaultMode",[1881,1947,1948],{},[420,1949,583],{},[1881,1951,1952],{},[420,1953,1954],{},"'default'",[1881,1956,1957],{},"Initial row mode when uncontrolled.",[1860,1959,1960,1964,1969,1973],{},[1881,1961,1962],{},[420,1963,430],{},[1881,1965,1966],{},[420,1967,1968],{},"string | number | null",[1881,1970,1971],{},[420,1972,1894],{},[1881,1974,1975,1976,813],{},"Controlled selected value used by ",[420,1977,1978],{},"v-model:value",[1860,1980,1981,1986,1990,1995],{},[1881,1982,1983],{},[420,1984,1985],{},"defaultValue",[1881,1987,1988],{},[420,1989,1968],{},[1881,1991,1992],{},[420,1993,1994],{},"null",[1881,1996,1997],{},"Initial selected value when uncontrolled.",[1860,1999,2000,2005,2010,2015],{},[1881,2001,2002],{},[420,2003,2004],{},"position",[1881,2006,2007],{},[420,2008,2009],{},"'top' | 'bottom'",[1881,2011,2012],{},[420,2013,2014],{},"'bottom'",[1881,2016,2017],{},"Floating viewport edge and panel growth direction. Ignored by inline layers for placement.",[1860,2019,2020,2025,2030,2035],{},[1881,2021,2022],{},[420,2023,2024],{},"layer",[1881,2026,2027],{},[420,2028,2029],{},"'overlay' | 'base' | 'inline'",[1881,2031,2032],{},[420,2033,2034],{},"'overlay'",[1881,2036,2037],{},"Floating and stacking strategy.",[1860,2039,2040,2045,2050,2055],{},[1881,2041,2042],{},[420,2043,2044],{},"expandStyle",[1881,2046,2047],{},[420,2048,2049],{},"'floating' | 'attached'",[1881,2051,2052],{},[420,2053,2054],{},"'floating'",[1881,2056,2057],{},"Visual relationship between the row and an open panel.",[1860,2059,2060,2064,2069,2074],{},[1881,2061,2062],{},[420,2063,1690],{},[1881,2065,2066],{},[420,2067,2068],{},"'sm' | 'md' | 'lg' | 'xl'",[1881,2070,2071],{},[420,2072,2073],{},"'md'",[1881,2075,2076],{},"Island spacing and inherited button size.",[1860,2078,2079,2084,2088,2093],{},[1881,2080,2081],{},[420,2082,2083],{},"as",[1881,2085,2086],{},[420,2087,583],{},[1881,2089,2090],{},[420,2091,2092],{},"'view'",[1881,2094,2095],{},"Element or component used for the root.",[1860,2097,2098,2103,2108,2112],{},[1881,2099,2100],{},[420,2101,2102],{},"class",[1881,2104,2105],{},[420,2106,2107],{},"any",[1881,2109,2110],{},[420,2111,1894],{},[1881,2113,2114],{},"Classes merged onto the root slot.",[1860,2116,2117,2122,2127,2131],{},[1881,2118,2119],{},[420,2120,2121],{},"ui",[1881,2123,2124],{},[420,2125,2126],{},"Partial\u003CRecord\u003CIslandSlot, any>>",[1881,2128,2129],{},[420,2130,1894],{},[1881,2132,2133],{},"Per-instance theme slot overrides.",[412,2135,2137],{"id":2136},"emits","Emits",[1854,2139,2140,2152],{},[1857,2141,2142],{},[1860,2143,2144,2147,2150],{},[1863,2145,2146],{},"Event",[1863,2148,2149],{},"Payload",[1863,2151,1874],{},[1876,2153,2154,2168,2182],{},[1860,2155,2156,2161,2165],{},[1881,2157,2158],{},[420,2159,2160],{},"update:open",[1881,2162,2163],{},[420,2164,1889],{},[1881,2166,2167],{},"The expanded state changed.",[1860,2169,2170,2175,2179],{},[1881,2171,2172],{},[420,2173,2174],{},"update:mode",[1881,2176,2177],{},[420,2178,583],{},[1881,2180,2181],{},"The active row mode changed.",[1860,2183,2184,2189,2193],{},[1881,2185,2186],{},[420,2187,2188],{},"update:value",[1881,2190,2191],{},[420,2192,1968],{},[1881,2194,2195],{},"The selected value changed.",[412,2197,2199],{"id":2198},"slots","Slots",[417,2201,2202,2203,813],{},"Every slot receives ",[420,2204,2205],{},"{ open, mode, value, setOpen, toggle, close, setMode, resetMode, setValue }",[1854,2207,2208,2217],{},[1857,2209,2210],{},[1860,2211,2212,2215],{},[1863,2213,2214],{},"Slot",[1863,2216,1874],{},[1876,2218,2219,2233,2242],{},[1860,2220,2221,2225],{},[1881,2222,2223],{},[420,2224,812],{},[1881,2226,2227,2228,1703,2230,2232],{},"Row rendered when ",[420,2229,434],{},[420,2231,1954],{}," or the selected named slot does not exist.",[1860,2234,2235,2239],{},[1881,2236,2237],{},[420,2238,1147],{},[1881,2240,2241],{},"Panel rendered while the resolved open state is true. Its presence enables the rendered open state.",[1860,2243,2244,2249],{},[1881,2245,2246],{},[420,2247,2248],{},"[mode]",[1881,2250,2251,2252,2254],{},"Any named slot whose name matches the current free-form ",[420,2253,434],{}," value.",[417,2256,2257,1643,2260,1646,2263,2266,2267,1643,2270,1646,2272,2275],{},[420,2258,2259],{},"setOpen(boolean)",[420,2261,2262],{},"setMode(string)",[420,2264,2265],{},"setValue(value)"," write local state and emit their corresponding update event. ",[420,2268,2269],{},"toggle",[420,2271,1430],{},[420,2273,2274],{},"resetMode"," are convenience helpers.",[412,2277,2279],{"id":2278},"styling-and-theming","Styling and theming",[417,2281,2282,2283,2286,2287,813],{},"Override globally through ",[420,2284,2285],{},"appConfig.ui.island"," or locally with ",[420,2288,2121],{},[1854,2290,2291,2301],{},[1857,2292,2293],{},[1860,2294,2295,2298],{},[1863,2296,2297],{},"UI slot",[1863,2299,2300],{},"Purpose",[1876,2302,2303,2313,2323],{},[1860,2304,2305,2310],{},[1881,2306,2307],{},[420,2308,2309],{},"root",[1881,2311,2312],{},"Outer layout, panel-to-row gap, width limit, and attached-surface chrome.",[1860,2314,2315,2320],{},[1881,2316,2317],{},[420,2318,2319],{},"row",[1881,2321,2322],{},"Main pill surface and horizontal child layout.",[1860,2324,2325,2330],{},[1881,2326,2327],{},[420,2328,2329],{},"panel",[1881,2331,2332],{},"Expandable surface, vertical layout, scrolling, and height limit.",[417,2334,2335,2336,1643,2338,1643,2340,2342,2343,2345,2346,2349],{},"The theme combines ",[420,2337,2004],{},[420,2339,1690],{},[420,2341,2044],{},", rendered ",[420,2344,438],{}," state, and automatic ",[420,2347,2348],{},"solo"," detection.",[1854,2351,2352,2365],{},[1857,2353,2354],{},[1860,2355,2356,2359,2362],{},[1863,2357,2358],{},"Size",[1863,2360,2361],{},"Button target",[1863,2363,2364],{},"Typical use",[1876,2366,2367,2379,2392,2405],{},[1860,2368,2369,2373,2376],{},[1881,2370,2371],{},[420,2372,1596],{},[1881,2374,2375],{},"40px",[1881,2377,2378],{},"Compact toolbars and secondary islands.",[1860,2380,2381,2386,2389],{},[1881,2382,2383],{},[420,2384,2385],{},"md",[1881,2387,2388],{},"44px",[1881,2390,2391],{},"Default controls and minimum comfortable target.",[1860,2393,2394,2399,2402],{},[1881,2395,2396],{},[420,2397,2398],{},"lg",[1881,2400,2401],{},"56px",[1881,2403,2404],{},"Prominent mobile docks.",[1860,2406,2407,2412,2415],{},[1881,2408,2409],{},[420,2410,2411],{},"xl",[1881,2413,2414],{},"64px",[1881,2416,2417],{},"Oversized or presentation-focused docks.",[417,2419,2420,2421,2423,2424,2426,2427,2429],{},"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 ",[420,2422,2309],{},", the gap collapses, and ",[420,2425,2319],{}," and ",[420,2428,2329],{}," become transparent sections.",[412,2431,328],{"id":2432},"accessibility",[417,2434,2435,2437,2438,2440],{},[420,2436,422],{}," 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 ",[420,2439,426],{}," children use native Lynx button semantics and announce disabled state.",[417,2442,2443,2444,2447,2448,2450],{},"Give every icon-only button an ",[420,2445,2446],{},"accessibility-label",". When a ",[420,2449,430],{}," 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.",[412,2452,2454],{"id":2453},"platform-notes","Platform notes",[1636,2456,2457,2468,2483,2500,2507],{},[1639,2458,2459,2460,2463,2464,2467],{},"Floating placement is applied with an inline ",[420,2461,2462],{},"position: fixed"," style because Lynx does not reliably apply the Tailwind ",[420,2465,2466],{},"fixed"," utility.",[1639,2469,2470,2471,2474,2475,2478,2479,2482],{},"Floating islands span the viewport from ",[420,2472,2473],{},"left: 0"," to ",[420,2476,2477],{},"right: 0"," and center the pill. Override inline ",[420,2480,2481],{},"style"," for custom offsets or corner placement.",[1639,2484,2485,2488,2489,2491,2492,2488,2494,2491,2497,2499],{},[420,2486,2487],{},"overlay"," uses ",[420,2490,1552],{},"; ",[420,2493,1584],{},[420,2495,2496],{},"z-index: 10",[420,2498,666],{}," applies no positioning style.",[1639,2501,2502,2503,2506],{},"The panel grows away from the selected edge and is capped at ",[420,2504,2505],{},"calc(100dvh - 4rem)"," with vertical scrolling.",[1639,2508,2509,2510,2426,2513,2516],{},"The component uses Lynx ",[420,2511,2512],{},"view",[420,2514,2515],{},"text"," conventions rather than assuming DOM-only elements.",[412,2518,2520],{"id":2519},"related-components","Related components",[1636,2522,2523,2531,2538,2547],{},[1639,2524,2525,2530],{},[2526,2527,2528],"a",{"href":155},[420,2529,154],{}," for declarative actions, selection, modes, and expansion.",[1639,2532,2533,2537],{},[2526,2534,2535],{"href":160},[420,2536,159],{}," for positioning multiple companion islands together.",[1639,2539,2540,2546],{},[2526,2541,2543],{"href":2542},"\u002Fcomponents\u002Fdropdown-menu",[420,2544,2545],{},"Dropdown Menu"," for an anchored menu with menu semantics.",[1639,2548,2549,2553],{},[2526,2550,2551],{"href":278},[420,2552,277],{}," for persistent peer panels with explicit tab behavior.",[2481,2555,2556],{},"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":465,"searchDepth":472,"depth":505,"links":2558},[2559,2560,2565,2568,2569,2570,2571,2572,2573,2574],{"id":414,"depth":505,"text":415},{"id":447,"depth":505,"text":448,"children":2561},[2562,2563,2564],{"id":795,"depth":533,"text":796},{"id":1140,"depth":533,"text":1141},{"id":1541,"depth":533,"text":1542},{"id":1633,"depth":505,"text":1634,"children":2566},[2567],{"id":1716,"depth":533,"text":1717},{"id":1851,"depth":505,"text":1852},{"id":2136,"depth":505,"text":2137},{"id":2198,"depth":505,"text":2199},{"id":2278,"depth":505,"text":2279},{"id":2432,"depth":505,"text":328},{"id":2453,"depth":505,"text":2454},{"id":2519,"depth":505,"text":2520},"Build a floating or inline pill that can select, morph, and expand.",[2577],{"label":2578,"icon":2579,"to":2580,"target":2581},"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":2575},"d5AGZKOIncGRtaMzNOr4IhaWWbYWe_t08FhLPqhK9HU",[2587,2589],{"title":145,"path":146,"stem":147,"description":2588,"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":2590,"icon":-1,"children":-1,"navigation":-1},"Add actions, selections, mode switches, and expansion controls to an island.",1783534421194]