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