[{"data":1,"prerenderedAt":2199},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Fisland-button":460,"\u002Fcomponents\u002Fisland-button-surround":2194},[4,34,51,301,327,332,337,406],{"title":5,"path":6,"stem":7,"children":8,"package":11,"icon":33},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,13,18,23,28],{"title":10,"path":6,"stem":7,"package":11,"icon":12},"Introduction",null,"i-lucide-house",{"title":14,"path":15,"stem":16,"package":11,"icon":17},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":19,"path":20,"stem":21,"package":11,"icon":22},"Icons","\u002Fgetting-started\u002Ficons","1.getting-started\u002F3.icons","i-lucide-sparkles",{"title":24,"path":25,"stem":26,"package":11,"icon":27},"CLI","\u002Fgetting-started\u002Fcli","1.getting-started\u002F4.cli","i-lucide-terminal",{"title":29,"path":30,"stem":31,"package":11,"icon":32},"Roadmap","\u002Fgetting-started\u002Froadmap","1.getting-started\u002F5.roadmap","i-lucide-map","i-lucide-rocket",{"title":35,"package":11,"icon":36,"path":37,"stem":38,"children":39,"page":50},"Packages","i-lucide-package","\u002Fpackages","2.packages",[40,45],{"title":41,"path":42,"stem":43,"package":11,"icon":44},"@vyui\u002Fcore","\u002Fpackages\u002Fcore","2.packages\u002F1.core","i-lucide-box",{"title":46,"path":47,"stem":48,"package":11,"icon":49},"@vyui\u002Fkit","\u002Fpackages\u002Fkit","2.packages\u002F2.kit","i-lucide-layers",false,{"title":52,"package":11,"icon":53,"path":54,"stem":55,"children":56},"Components","i-lucide-layout-grid","\u002Fcomponents","3.components",[57,59,65,70,75,80,85,90,95,100,105,110,115,120,125,130,135,140,144,149,153,158,163,168,173,178,183,188,193,198,203,208,213,218,223,228,233,238,242,246,251,256,261,266,271,276,280,284,288,292,296],{"title":52,"path":54,"stem":58,"package":11,"icon":53},"3.components\u002Findex",{"title":60,"path":61,"stem":62,"package":63,"icon":64},"Accordion","\u002Fcomponents\u002Faccordion","3.components\u002Faccordion","kit","i-lucide-list-collapse",{"title":66,"path":67,"stem":68,"package":63,"icon":69},"Action Sheet","\u002Fcomponents\u002Faction-sheet","3.components\u002Faction-sheet","i-lucide-panel-bottom",{"title":71,"path":72,"stem":73,"package":63,"icon":74},"Alert","\u002Fcomponents\u002Falert","3.components\u002Falert","i-lucide-triangle-alert",{"title":76,"path":77,"stem":78,"package":79,"icon":74},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","3.components\u002Falert-dialog","core",{"title":81,"path":82,"stem":83,"package":63,"icon":84},"App","\u002Fcomponents\u002Fapp","3.components\u002Fapp","i-lucide-smartphone",{"title":86,"path":87,"stem":88,"package":63,"icon":89},"Aspect Ratio","\u002Fcomponents\u002Faspect-ratio","3.components\u002Faspect-ratio","i-lucide-ratio",{"title":91,"path":92,"stem":93,"package":63,"icon":94},"Avatar","\u002Fcomponents\u002Favatar","3.components\u002Favatar","i-lucide-circle-user-round",{"title":96,"path":97,"stem":98,"package":63,"icon":99},"Avatar Group","\u002Fcomponents\u002Favatar-group","3.components\u002Favatar-group","i-lucide-users-round",{"title":101,"path":102,"stem":103,"package":63,"icon":104},"Button","\u002Fcomponents\u002Fbutton","3.components\u002Fbutton","i-lucide-square-mouse-pointer",{"title":106,"path":107,"stem":108,"package":63,"icon":109},"Calendar","\u002Fcomponents\u002Fcalendar","3.components\u002Fcalendar","i-lucide-calendar-days",{"title":111,"path":112,"stem":113,"package":63,"icon":114},"Card","\u002Fcomponents\u002Fcard","3.components\u002Fcard","i-lucide-square",{"title":116,"path":117,"stem":118,"package":63,"icon":119},"Checkbox","\u002Fcomponents\u002Fcheckbox","3.components\u002Fcheckbox","i-lucide-square-check",{"title":121,"path":122,"stem":123,"package":79,"icon":124},"Collapsible","\u002Fcomponents\u002Fcollapsible","3.components\u002Fcollapsible","i-lucide-chevrons-down-up",{"title":126,"path":127,"stem":128,"package":79,"icon":129},"Dialog","\u002Fcomponents\u002Fdialog","3.components\u002Fdialog","i-lucide-app-window",{"title":131,"path":132,"stem":133,"package":79,"icon":134},"Draggable","\u002Fcomponents\u002Fdraggable","3.components\u002Fdraggable","i-lucide-move",{"title":136,"path":137,"stem":138,"package":63,"icon":139},"Form","\u002Fcomponents\u002Fform","3.components\u002Fform","i-lucide-clipboard-list",{"title":141,"path":142,"stem":143,"package":79,"icon":22},"Icon","\u002Fcomponents\u002Ficon","3.components\u002Ficon",{"title":145,"path":146,"stem":147,"package":63,"icon":148},"Input","\u002Fcomponents\u002Finput","3.components\u002Finput","i-lucide-text-cursor-input",{"title":150,"path":151,"stem":152,"package":63,"icon":69},"Island","\u002Fcomponents\u002Fisland","3.components\u002Fisland",{"title":154,"path":155,"stem":156,"package":63,"icon":157},"Island Button","\u002Fcomponents\u002Fisland-button","3.components\u002Fisland-button","i-lucide-circle-ellipsis",{"title":159,"path":160,"stem":161,"package":63,"icon":162},"Island Group","\u002Fcomponents\u002Fisland-group","3.components\u002Fisland-group","i-lucide-panels-top-left",{"title":164,"path":165,"stem":166,"package":63,"icon":167},"KeyboardAware","\u002Fcomponents\u002Fkeyboard-aware","3.components\u002Fkeyboard-aware","i-lucide-keyboard",{"title":169,"path":170,"stem":171,"package":63,"icon":172},"Label","\u002Fcomponents\u002Flabel","3.components\u002Flabel","i-lucide-tag",{"title":174,"path":175,"stem":176,"package":63,"icon":177},"Modal","\u002Fcomponents\u002Fmodal","3.components\u002Fmodal","i-lucide-gallery-vertical-end",{"title":179,"path":180,"stem":181,"package":79,"icon":182},"Navigation","\u002Fcomponents\u002Fnavigation","3.components\u002Fnavigation","i-lucide-route",{"title":184,"path":185,"stem":186,"package":63,"icon":187},"Number Field","\u002Fcomponents\u002Fnumber-field","3.components\u002Fnumber-field","i-lucide-list-plus",{"title":189,"path":190,"stem":191,"package":79,"icon":192},"Pagination","\u002Fcomponents\u002Fpagination","3.components\u002Fpagination","i-lucide-ellipsis",{"title":194,"path":195,"stem":196,"package":63,"icon":197},"Pin Input","\u002Fcomponents\u002Fpin-input","3.components\u002Fpin-input","i-lucide-key-round",{"title":199,"path":200,"stem":201,"package":63,"icon":202},"Placeholder","\u002Fcomponents\u002Fplaceholder","3.components\u002Fplaceholder","i-lucide-square-dashed",{"title":204,"path":205,"stem":206,"package":63,"icon":207},"Popover","\u002Fcomponents\u002Fpopover","3.components\u002Fpopover","i-lucide-message-square-more",{"title":209,"path":210,"stem":211,"package":63,"icon":212},"Progress","\u002Fcomponents\u002Fprogress","3.components\u002Fprogress","i-lucide-chart-no-axes-column-increasing",{"title":214,"path":215,"stem":216,"package":63,"icon":217},"Radio Group","\u002Fcomponents\u002Fradio-group","3.components\u002Fradio-group","i-lucide-circle-dot",{"title":219,"path":220,"stem":221,"package":63,"icon":222},"Rating","\u002Fcomponents\u002Frating","3.components\u002Frating","i-lucide-star",{"title":224,"path":225,"stem":226,"package":79,"icon":227},"Scroll View","\u002Fcomponents\u002Fscroll-view","3.components\u002Fscroll-view","i-lucide-scroll",{"title":229,"path":230,"stem":231,"package":63,"icon":232},"Select","\u002Fcomponents\u002Fselect","3.components\u002Fselect","i-lucide-list-check",{"title":234,"path":235,"stem":236,"package":63,"icon":237},"Separator","\u002Fcomponents\u002Fseparator","3.components\u002Fseparator","i-lucide-separator-horizontal",{"title":239,"path":240,"stem":241,"package":79,"icon":69},"Sheet","\u002Fcomponents\u002Fsheet","3.components\u002Fsheet",{"title":243,"path":244,"stem":245,"package":63,"icon":162},"Skeleton","\u002Fcomponents\u002Fskeleton","3.components\u002Fskeleton",{"title":247,"path":248,"stem":249,"package":63,"icon":250},"Slider","\u002Fcomponents\u002Fslider","3.components\u002Fslider","i-lucide-sliders-horizontal",{"title":252,"path":253,"stem":254,"package":63,"icon":255},"Sortable","\u002Fcomponents\u002Fsortable","3.components\u002Fsortable","i-lucide-list-restart",{"title":257,"path":258,"stem":259,"package":63,"icon":260},"Stepper","\u002Fcomponents\u002Fstepper","3.components\u002Fstepper","i-lucide-list-ordered",{"title":262,"path":263,"stem":264,"package":63,"icon":265},"Swipe Action","\u002Fcomponents\u002Fswipe-action","3.components\u002Fswipe-action","i-lucide-move-horizontal",{"title":267,"path":268,"stem":269,"package":63,"icon":270},"Swiper","\u002Fcomponents\u002Fswiper","3.components\u002Fswiper","i-lucide-gallery-horizontal-end",{"title":272,"path":273,"stem":274,"package":63,"icon":275},"Switch","\u002Fcomponents\u002Fswitch","3.components\u002Fswitch","i-lucide-toggle-right",{"title":277,"path":278,"stem":279,"package":63,"icon":162},"Tabs","\u002Fcomponents\u002Ftabs","3.components\u002Ftabs",{"title":281,"path":282,"stem":283,"package":63,"icon":148},"Textarea","\u002Fcomponents\u002Ftextarea","3.components\u002Ftextarea",{"title":285,"path":286,"stem":287,"package":63,"icon":207},"Toast","\u002Fcomponents\u002Ftoast","3.components\u002Ftoast",{"title":289,"path":290,"stem":291,"package":63,"icon":275},"Toggle","\u002Fcomponents\u002Ftoggle","3.components\u002Ftoggle",{"title":293,"path":294,"stem":295,"package":63,"icon":162},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","3.components\u002Ftoggle-group",{"title":297,"path":298,"stem":299,"package":63,"icon":300},"Tray","\u002Fcomponents\u002Ftray","3.components\u002Ftray","i-lucide-square-dashed-bottom",{"title":302,"path":303,"stem":304,"children":305,"package":11,"icon":307},"Theming","\u002Ftheming","4.theming\u002F1.index",[306,308,312,317,322],{"title":302,"path":303,"stem":304,"package":11,"icon":307},"i-lucide-palette",{"title":309,"path":310,"stem":311,"package":11,"icon":250},"Overrides","\u002Ftheming\u002Foverrides","4.theming\u002F2.overrides",{"title":313,"path":314,"stem":315,"package":11,"icon":316},"Colors","\u002Ftheming\u002Fcolors","4.theming\u002F3.colors","i-lucide-swatch-book",{"title":318,"path":319,"stem":320,"package":11,"icon":321},"Dark Mode","\u002Ftheming\u002Fdark-mode","4.theming\u002F4.dark-mode","i-lucide-moon",{"title":323,"path":324,"stem":325,"package":11,"icon":326},"Fonts","\u002Ftheming\u002Ffonts","4.theming\u002F5.fonts","i-lucide-type",{"title":328,"path":329,"stem":330,"package":11,"icon":331},"Accessibility","\u002Faccessibility","5.accessibility","i-lucide-accessibility",{"title":333,"path":334,"stem":335,"package":11,"icon":336},"i18n","\u002Fi18n","6.i18n","i-lucide-languages",{"title":338,"path":339,"stem":340,"children":341,"package":11,"icon":343},"Composables","\u002Fcomposables","7.composables\u002F1.index",[342,344,349,354,359,364,369,374,378,383,387,391,396,401],{"title":338,"path":339,"stem":340,"package":11,"icon":343},"i-lucide-square-function",{"title":345,"path":346,"stem":347,"package":11,"icon":348},"useEmitAsProps","\u002Fcomposables\u002Fuse-emit-as-props","7.composables\u002F10.use-emit-as-props","i-lucide-zap",{"title":350,"path":351,"stem":352,"package":11,"icon":353},"useForwardPropsEmits","\u002Fcomposables\u002Fuse-forward-props-emits","7.composables\u002F11.use-forward-props-emits","i-lucide-merge",{"title":355,"path":356,"stem":357,"package":11,"icon":358},"useForwardExpose","\u002Fcomposables\u002Fuse-forward-expose","7.composables\u002F12.use-forward-expose","i-lucide-share-2",{"title":360,"path":361,"stem":362,"package":11,"icon":363},"useStateMachine","\u002Fcomposables\u002Fuse-state-machine","7.composables\u002F13.use-state-machine","i-lucide-workflow",{"title":365,"path":366,"stem":367,"package":11,"icon":368},"usePrimitiveElement","\u002Fcomposables\u002Fuse-primitive-element","7.composables\u002F14.use-primitive-element","i-lucide-crosshair",{"title":370,"path":371,"stem":372,"package":11,"icon":373},"useAppConfig","\u002Fcomposables\u002Fuse-app-config","7.composables\u002F2.use-app-config","i-lucide-settings",{"title":375,"path":376,"stem":377,"package":11,"icon":321},"useColorMode","\u002Fcomposables\u002Fuse-color-mode","7.composables\u002F3.use-color-mode",{"title":379,"path":380,"stem":381,"package":11,"icon":382},"useComponentIcons","\u002Fcomposables\u002Fuse-component-icons","7.composables\u002F4.use-component-icons","i-lucide-shapes",{"title":384,"path":385,"stem":386,"package":11,"icon":69},"useTray","\u002Fcomposables\u002Fuse-tray","7.composables\u002F5.use-tray",{"title":388,"path":389,"stem":390,"package":11,"icon":336},"i18n composables","\u002Fcomposables\u002Fi18n-composables","7.composables\u002F6.i18n-composables",{"title":392,"path":393,"stem":394,"package":11,"icon":395},"useId","\u002Fcomposables\u002Fuse-id","7.composables\u002F7.use-id","i-lucide-hash",{"title":397,"path":398,"stem":399,"package":11,"icon":400},"useFilter","\u002Fcomposables\u002Fuse-filter","7.composables\u002F8.use-filter","i-lucide-filter",{"title":402,"path":403,"stem":404,"package":11,"icon":405},"useForwardProps","\u002Fcomposables\u002Fuse-forward-props","7.composables\u002F9.use-forward-props","i-lucide-arrow-right-left",{"title":407,"path":408,"stem":409,"children":410,"package":11,"icon":412},"Guides","\u002Fguides","8.guides\u002F1.index",[411,413,417,422,427,432,437,441,446,450,455],{"title":407,"path":408,"stem":409,"package":11,"icon":412},"i-lucide-book-open",{"title":414,"path":415,"stem":416,"package":11,"icon":348},"Instant first-frame rendering","\u002Fguides\u002Finstant-first-frame-rendering","8.guides\u002F10.instant-first-frame-rendering",{"title":418,"path":419,"stem":420,"package":11,"icon":421},"Why use Vy UI","\u002Fguides\u002Fwhy-vy-ui","8.guides\u002F11.why-vy-ui","i-lucide-help-circle",{"title":423,"path":424,"stem":425,"package":11,"icon":426},"Lynx UI frameworks","\u002Fguides\u002Flynx-ui-frameworks","8.guides\u002F2.lynx-ui-frameworks","i-lucide-library",{"title":428,"path":429,"stem":430,"package":11,"icon":431},"What is Vue Lynx","\u002Fguides\u002Fvue-lynx","8.guides\u002F3.vue-lynx","i-lucide-component",{"title":433,"path":434,"stem":435,"package":11,"icon":436},"Lynx vs React Native","\u002Fguides\u002Flynx-vs-react-native","8.guides\u002F4.lynx-vs-react-native","i-lucide-git-compare",{"title":438,"path":439,"stem":440,"package":11,"icon":84},"Testing on your phone","\u002Fguides\u002Ftesting-on-device","8.guides\u002F5.testing-on-device",{"title":442,"path":443,"stem":444,"package":11,"icon":445},"Testing with Xcode","\u002Fguides\u002Ftesting-with-xcode","8.guides\u002F6.testing-with-xcode","i-lucide-apple",{"title":447,"path":448,"stem":449,"package":11,"icon":27},"The rspeedy dev server","\u002Fguides\u002Frspeedy-dev-server","8.guides\u002F7.rspeedy-dev-server",{"title":451,"path":452,"stem":453,"package":11,"icon":454},"Tailwind on Lynx","\u002Fguides\u002Ftailwind-on-lynx","8.guides\u002F8.tailwind-on-lynx","i-lucide-wind",{"title":456,"path":457,"stem":458,"package":11,"icon":459},"Theming on Lynx","\u002Fguides\u002Ftheming-on-lynx","8.guides\u002F9.theming-on-lynx","i-lucide-paintbrush",{"id":461,"title":154,"body":462,"description":2183,"extension":1601,"links":2184,"meta":2190,"navigation":2191,"package":63,"path":155,"seo":2192,"stem":156,"__hash__":2193},"docs\u002F3.components\u002Fisland-button.md",{"type":463,"value":464,"toc":2167},"minimark",[465,470,482,487,491,505,745,751,756,767,1049,1055,1059,1079,1454,1467,1471,1478,1530,1536,1540,1615,1619,1850,1854,1882,1886,1918,1921,1925,1934,1977,1990,2054,2057,2060,2070,2073,2077,2128,2132,2163],[466,467,469],"h2",{"id":468},"overview","Overview",[471,472,473,477,478,481],"p",{},[474,475,476],"code",{},"VyIslandButton"," is a pill-shaped action designed for ",[474,479,480],{},"VyIsland",". Inside an island it can declaratively select a value, switch the row mode, toggle an expanded panel, or reset the mode. It also works as a standalone button.",[483,484],"component-code",{"height":485,"name":486},"140px","island-button-example",[466,488,490],{"id":489},"usage","Usage",[471,492,493,494,497,498,501,502,504],{},"Use ",[474,495,496],{},"icon",", ",[474,499,500],{},"label",", or both. Buttons inherit their size from the nearest ",[474,503,480],{},".",[506,507,512],"pre",{"className":508,"code":509,"language":510,"meta":511,"style":511},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { VyIsland } from '@vyui\u002Fkit\u002Fisland'\nimport { VyIslandButton } from '@vyui\u002Fkit\u002Fisland-button'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVyIsland layer=\"inline\" size=\"lg\">\n    \u003CVyIslandButton icon=\"i-lucide-plus\" label=\"New issue\" \u002F>\n    \u003CVyIslandButton icon=\"i-lucide-settings\" accessibility-label=\"Settings\" \u002F>\n  \u003C\u002FVyIsland>\n\u003C\u002Ftemplate>\n","vue","",[474,513,514,549,578,599,609,616,626,660,695,726,736],{"__ignoreMap":511},[515,516,519,523,527,531,534,537,540,544,546],"span",{"class":517,"line":518},"line",1,[515,520,522],{"class":521},"sMK4o","\u003C",[515,524,526],{"class":525},"swJcz","script",[515,528,530],{"class":529},"spNyl"," setup",[515,532,533],{"class":529}," lang",[515,535,536],{"class":521},"=",[515,538,539],{"class":521},"\"",[515,541,543],{"class":542},"sfazB","ts",[515,545,539],{"class":521},[515,547,548],{"class":521},">\n",[515,550,552,556,559,563,566,569,572,575],{"class":517,"line":551},2,[515,553,555],{"class":554},"s7zQu","import",[515,557,558],{"class":521}," {",[515,560,562],{"class":561},"sTEyZ"," VyIsland",[515,564,565],{"class":521}," }",[515,567,568],{"class":554}," from",[515,570,571],{"class":521}," '",[515,573,574],{"class":542},"@vyui\u002Fkit\u002Fisland",[515,576,577],{"class":521},"'\n",[515,579,581,583,585,588,590,592,594,597],{"class":517,"line":580},3,[515,582,555],{"class":554},[515,584,558],{"class":521},[515,586,587],{"class":561}," VyIslandButton",[515,589,565],{"class":521},[515,591,568],{"class":554},[515,593,571],{"class":521},[515,595,596],{"class":542},"@vyui\u002Fkit\u002Fisland-button",[515,598,577],{"class":521},[515,600,602,605,607],{"class":517,"line":601},4,[515,603,604],{"class":521},"\u003C\u002F",[515,606,526],{"class":525},[515,608,548],{"class":521},[515,610,612],{"class":517,"line":611},5,[515,613,615],{"emptyLinePlaceholder":614},true,"\n",[515,617,619,621,624],{"class":517,"line":618},6,[515,620,522],{"class":521},[515,622,623],{"class":525},"template",[515,625,548],{"class":521},[515,627,629,632,634,637,639,641,644,646,649,651,653,656,658],{"class":517,"line":628},7,[515,630,631],{"class":521},"  \u003C",[515,633,480],{"class":525},[515,635,636],{"class":529}," layer",[515,638,536],{"class":521},[515,640,539],{"class":521},[515,642,643],{"class":542},"inline",[515,645,539],{"class":521},[515,647,648],{"class":529}," size",[515,650,536],{"class":521},[515,652,539],{"class":521},[515,654,655],{"class":542},"lg",[515,657,539],{"class":521},[515,659,548],{"class":521},[515,661,663,666,668,671,673,675,678,680,683,685,687,690,692],{"class":517,"line":662},8,[515,664,665],{"class":521},"    \u003C",[515,667,476],{"class":525},[515,669,670],{"class":529}," icon",[515,672,536],{"class":521},[515,674,539],{"class":521},[515,676,677],{"class":542},"i-lucide-plus",[515,679,539],{"class":521},[515,681,682],{"class":529}," label",[515,684,536],{"class":521},[515,686,539],{"class":521},[515,688,689],{"class":542},"New issue",[515,691,539],{"class":521},[515,693,694],{"class":521}," \u002F>\n",[515,696,698,700,702,704,706,708,710,712,715,717,719,722,724],{"class":517,"line":697},9,[515,699,665],{"class":521},[515,701,476],{"class":525},[515,703,670],{"class":529},[515,705,536],{"class":521},[515,707,539],{"class":521},[515,709,373],{"class":542},[515,711,539],{"class":521},[515,713,714],{"class":529}," accessibility-label",[515,716,536],{"class":521},[515,718,539],{"class":521},[515,720,721],{"class":542},"Settings",[515,723,539],{"class":521},[515,725,694],{"class":521},[515,727,729,732,734],{"class":517,"line":728},10,[515,730,731],{"class":521},"  \u003C\u002F",[515,733,480],{"class":525},[515,735,548],{"class":521},[515,737,739,741,743],{"class":517,"line":738},11,[515,740,604],{"class":521},[515,742,623],{"class":525},[515,744,548],{"class":521},[471,746,747,748,750],{},"With no ",[474,749,500],{}," and no default slot content, the button uses a square icon-only footprint. Supplying a label or default slot creates a wider pill.",[752,753,755],"h3",{"id":754},"selected-values","Selected values",[471,757,758,759,762,763,766],{},"Set ",[474,760,761],{},"value"," to connect the button to its parent island's ",[474,764,765],{},"v-model:value",". Matching buttons become active automatically.",[506,768,770],{"className":508,"code":769,"language":510,"meta":511,"style":511},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VyIsland } from '@vyui\u002Fkit\u002Fisland'\nimport { VyIslandButton } from '@vyui\u002Fkit\u002Fisland-button'\n\nconst active = ref\u003Cstring | number | null>('inbox')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVyIsland v-model:value=\"active\" layer=\"inline\">\n    \u003CVyIslandButton value=\"inbox\" icon=\"i-lucide-inbox\" label=\"Inbox\" \u002F>\n    \u003CVyIslandButton value=\"saved\" icon=\"i-lucide-bookmark\" label=\"Saved\" \u002F>\n  \u003C\u002FVyIsland>\n\u003C\u002Ftemplate>\n",[474,771,772,792,811,829,847,851,898,906,910,918,948,989,1031,1040],{"__ignoreMap":511},[515,773,774,776,778,780,782,784,786,788,790],{"class":517,"line":518},[515,775,522],{"class":521},[515,777,526],{"class":525},[515,779,530],{"class":529},[515,781,533],{"class":529},[515,783,536],{"class":521},[515,785,539],{"class":521},[515,787,543],{"class":542},[515,789,539],{"class":521},[515,791,548],{"class":521},[515,793,794,796,798,801,803,805,807,809],{"class":517,"line":551},[515,795,555],{"class":554},[515,797,558],{"class":521},[515,799,800],{"class":561}," ref",[515,802,565],{"class":521},[515,804,568],{"class":554},[515,806,571],{"class":521},[515,808,510],{"class":542},[515,810,577],{"class":521},[515,812,813,815,817,819,821,823,825,827],{"class":517,"line":580},[515,814,555],{"class":554},[515,816,558],{"class":521},[515,818,562],{"class":561},[515,820,565],{"class":521},[515,822,568],{"class":554},[515,824,571],{"class":521},[515,826,574],{"class":542},[515,828,577],{"class":521},[515,830,831,833,835,837,839,841,843,845],{"class":517,"line":601},[515,832,555],{"class":554},[515,834,558],{"class":521},[515,836,587],{"class":561},[515,838,565],{"class":521},[515,840,568],{"class":554},[515,842,571],{"class":521},[515,844,596],{"class":542},[515,846,577],{"class":521},[515,848,849],{"class":517,"line":611},[515,850,615],{"emptyLinePlaceholder":614},[515,852,853,856,859,861,864,866,870,873,876,878,881,884,887,890,893,895],{"class":517,"line":618},[515,854,855],{"class":529},"const",[515,857,858],{"class":561}," active ",[515,860,536],{"class":521},[515,862,800],{"class":863},"s2Zo4",[515,865,522],{"class":521},[515,867,869],{"class":868},"sBMFI","string",[515,871,872],{"class":521}," |",[515,874,875],{"class":868}," number",[515,877,872],{"class":521},[515,879,880],{"class":868}," null",[515,882,883],{"class":521},">",[515,885,886],{"class":561},"(",[515,888,889],{"class":521},"'",[515,891,892],{"class":542},"inbox",[515,894,889],{"class":521},[515,896,897],{"class":561},")\n",[515,899,900,902,904],{"class":517,"line":628},[515,901,604],{"class":521},[515,903,526],{"class":525},[515,905,548],{"class":521},[515,907,908],{"class":517,"line":662},[515,909,615],{"emptyLinePlaceholder":614},[515,911,912,914,916],{"class":517,"line":697},[515,913,522],{"class":521},[515,915,623],{"class":525},[515,917,548],{"class":521},[515,919,920,922,924,927,929,931,934,936,938,940,942,944,946],{"class":517,"line":728},[515,921,631],{"class":521},[515,923,480],{"class":525},[515,925,926],{"class":529}," v-model:value",[515,928,536],{"class":521},[515,930,539],{"class":521},[515,932,933],{"class":542},"active",[515,935,539],{"class":521},[515,937,636],{"class":529},[515,939,536],{"class":521},[515,941,539],{"class":521},[515,943,643],{"class":542},[515,945,539],{"class":521},[515,947,548],{"class":521},[515,949,950,952,954,957,959,961,963,965,967,969,971,974,976,978,980,982,985,987],{"class":517,"line":738},[515,951,665],{"class":521},[515,953,476],{"class":525},[515,955,956],{"class":529}," value",[515,958,536],{"class":521},[515,960,539],{"class":521},[515,962,892],{"class":542},[515,964,539],{"class":521},[515,966,670],{"class":529},[515,968,536],{"class":521},[515,970,539],{"class":521},[515,972,973],{"class":542},"i-lucide-inbox",[515,975,539],{"class":521},[515,977,682],{"class":529},[515,979,536],{"class":521},[515,981,539],{"class":521},[515,983,984],{"class":542},"Inbox",[515,986,539],{"class":521},[515,988,694],{"class":521},[515,990,992,994,996,998,1000,1002,1005,1007,1009,1011,1013,1016,1018,1020,1022,1024,1027,1029],{"class":517,"line":991},12,[515,993,665],{"class":521},[515,995,476],{"class":525},[515,997,956],{"class":529},[515,999,536],{"class":521},[515,1001,539],{"class":521},[515,1003,1004],{"class":542},"saved",[515,1006,539],{"class":521},[515,1008,670],{"class":529},[515,1010,536],{"class":521},[515,1012,539],{"class":521},[515,1014,1015],{"class":542},"i-lucide-bookmark",[515,1017,539],{"class":521},[515,1019,682],{"class":529},[515,1021,536],{"class":521},[515,1023,539],{"class":521},[515,1025,1026],{"class":542},"Saved",[515,1028,539],{"class":521},[515,1030,694],{"class":521},[515,1032,1034,1036,1038],{"class":517,"line":1033},13,[515,1035,731],{"class":521},[515,1037,480],{"class":525},[515,1039,548],{"class":521},[515,1041,1043,1045,1047],{"class":517,"line":1042},14,[515,1044,604],{"class":521},[515,1046,623],{"class":525},[515,1048,548],{"class":521},[471,1050,1051,1052,1054],{},"The explicit ",[474,1053,933],{}," prop can force active styling independently of the parent's value.",[752,1056,1058],{"id":1057},"mode-and-expansion-controls","Mode and expansion controls",[471,1060,1061,1062,1064,1065,1064,1068,1064,1071,1074,1075,1078],{},"Declarative behavior props can be combined. On tap, the button applies ",[474,1063,761],{},", then ",[474,1066,1067],{},"mode",[474,1069,1070],{},"expand",[474,1072,1073],{},"reset",", before emitting its own ",[474,1076,1077],{},"tap"," event.",[506,1080,1082],{"className":508,"code":1081,"language":510,"meta":511,"style":511},"\u003Cscript setup lang=\"ts\">\nimport { VyIsland } from '@vyui\u002Fkit\u002Fisland'\nimport { VyIslandButton } from '@vyui\u002Fkit\u002Fisland-button'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVyIsland layer=\"inline\">\n    \u003CVyIslandButton mode=\"search\" icon=\"i-lucide-search\" \u002F>\n    \u003CVyIslandButton expand icon=\"i-lucide-menu\" \u002F>\n\n    \u003Ctemplate #search>\n      \u003CVyIslandButton\n        reset\n        icon=\"i-lucide-search\"\n        label=\"Search…\"\n        :style=\"{ flexGrow: 1 }\"\n      \u002F>\n      \u003CVyIslandButton reset icon=\"i-lucide-x\" \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #expanded>\n      \u003CVyIslandButton expand icon=\"i-lucide-settings\" label=\"Settings\" \u002F>\n      \u003CVyIslandButton expand icon=\"i-lucide-circle-help\" label=\"Help\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FVyIsland>\n\u003C\u002Ftemplate>\n",[474,1083,1084,1104,1122,1140,1148,1152,1160,1178,1209,1231,1235,1248,1256,1261,1275,1290,1305,1311,1334,1344,1349,1363,1394,1427,1436,1445],{"__ignoreMap":511},[515,1085,1086,1088,1090,1092,1094,1096,1098,1100,1102],{"class":517,"line":518},[515,1087,522],{"class":521},[515,1089,526],{"class":525},[515,1091,530],{"class":529},[515,1093,533],{"class":529},[515,1095,536],{"class":521},[515,1097,539],{"class":521},[515,1099,543],{"class":542},[515,1101,539],{"class":521},[515,1103,548],{"class":521},[515,1105,1106,1108,1110,1112,1114,1116,1118,1120],{"class":517,"line":551},[515,1107,555],{"class":554},[515,1109,558],{"class":521},[515,1111,562],{"class":561},[515,1113,565],{"class":521},[515,1115,568],{"class":554},[515,1117,571],{"class":521},[515,1119,574],{"class":542},[515,1121,577],{"class":521},[515,1123,1124,1126,1128,1130,1132,1134,1136,1138],{"class":517,"line":580},[515,1125,555],{"class":554},[515,1127,558],{"class":521},[515,1129,587],{"class":561},[515,1131,565],{"class":521},[515,1133,568],{"class":554},[515,1135,571],{"class":521},[515,1137,596],{"class":542},[515,1139,577],{"class":521},[515,1141,1142,1144,1146],{"class":517,"line":601},[515,1143,604],{"class":521},[515,1145,526],{"class":525},[515,1147,548],{"class":521},[515,1149,1150],{"class":517,"line":611},[515,1151,615],{"emptyLinePlaceholder":614},[515,1153,1154,1156,1158],{"class":517,"line":618},[515,1155,522],{"class":521},[515,1157,623],{"class":525},[515,1159,548],{"class":521},[515,1161,1162,1164,1166,1168,1170,1172,1174,1176],{"class":517,"line":628},[515,1163,631],{"class":521},[515,1165,480],{"class":525},[515,1167,636],{"class":529},[515,1169,536],{"class":521},[515,1171,539],{"class":521},[515,1173,643],{"class":542},[515,1175,539],{"class":521},[515,1177,548],{"class":521},[515,1179,1180,1182,1184,1187,1189,1191,1194,1196,1198,1200,1202,1205,1207],{"class":517,"line":662},[515,1181,665],{"class":521},[515,1183,476],{"class":525},[515,1185,1186],{"class":529}," mode",[515,1188,536],{"class":521},[515,1190,539],{"class":521},[515,1192,1193],{"class":542},"search",[515,1195,539],{"class":521},[515,1197,670],{"class":529},[515,1199,536],{"class":521},[515,1201,539],{"class":521},[515,1203,1204],{"class":542},"i-lucide-search",[515,1206,539],{"class":521},[515,1208,694],{"class":521},[515,1210,1211,1213,1215,1218,1220,1222,1224,1227,1229],{"class":517,"line":697},[515,1212,665],{"class":521},[515,1214,476],{"class":525},[515,1216,1217],{"class":529}," expand",[515,1219,670],{"class":529},[515,1221,536],{"class":521},[515,1223,539],{"class":521},[515,1225,1226],{"class":542},"i-lucide-menu",[515,1228,539],{"class":521},[515,1230,694],{"class":521},[515,1232,1233],{"class":517,"line":728},[515,1234,615],{"emptyLinePlaceholder":614},[515,1236,1237,1239,1241,1244,1246],{"class":517,"line":738},[515,1238,665],{"class":521},[515,1240,623],{"class":525},[515,1242,1243],{"class":521}," #",[515,1245,1193],{"class":529},[515,1247,548],{"class":521},[515,1249,1250,1253],{"class":517,"line":991},[515,1251,1252],{"class":521},"      \u003C",[515,1254,1255],{"class":525},"VyIslandButton\n",[515,1257,1258],{"class":517,"line":1033},[515,1259,1260],{"class":529},"        reset\n",[515,1262,1263,1266,1268,1270,1272],{"class":517,"line":1042},[515,1264,1265],{"class":529},"        icon",[515,1267,536],{"class":521},[515,1269,539],{"class":521},[515,1271,1204],{"class":542},[515,1273,1274],{"class":521},"\"\n",[515,1276,1278,1281,1283,1285,1288],{"class":517,"line":1277},15,[515,1279,1280],{"class":529},"        label",[515,1282,536],{"class":521},[515,1284,539],{"class":521},[515,1286,1287],{"class":542},"Search…",[515,1289,1274],{"class":521},[515,1291,1293,1296,1298,1300,1303],{"class":517,"line":1292},16,[515,1294,1295],{"class":529},"        :style",[515,1297,536],{"class":521},[515,1299,539],{"class":521},[515,1301,1302],{"class":542},"{ flexGrow: 1 }",[515,1304,1274],{"class":521},[515,1306,1308],{"class":517,"line":1307},17,[515,1309,1310],{"class":521},"      \u002F>\n",[515,1312,1314,1316,1318,1321,1323,1325,1327,1330,1332],{"class":517,"line":1313},18,[515,1315,1252],{"class":521},[515,1317,476],{"class":525},[515,1319,1320],{"class":529}," reset",[515,1322,670],{"class":529},[515,1324,536],{"class":521},[515,1326,539],{"class":521},[515,1328,1329],{"class":542},"i-lucide-x",[515,1331,539],{"class":521},[515,1333,694],{"class":521},[515,1335,1337,1340,1342],{"class":517,"line":1336},19,[515,1338,1339],{"class":521},"    \u003C\u002F",[515,1341,623],{"class":525},[515,1343,548],{"class":521},[515,1345,1347],{"class":517,"line":1346},20,[515,1348,615],{"emptyLinePlaceholder":614},[515,1350,1352,1354,1356,1358,1361],{"class":517,"line":1351},21,[515,1353,665],{"class":521},[515,1355,623],{"class":525},[515,1357,1243],{"class":521},[515,1359,1360],{"class":529},"expanded",[515,1362,548],{"class":521},[515,1364,1366,1368,1370,1372,1374,1376,1378,1380,1382,1384,1386,1388,1390,1392],{"class":517,"line":1365},22,[515,1367,1252],{"class":521},[515,1369,476],{"class":525},[515,1371,1217],{"class":529},[515,1373,670],{"class":529},[515,1375,536],{"class":521},[515,1377,539],{"class":521},[515,1379,373],{"class":542},[515,1381,539],{"class":521},[515,1383,682],{"class":529},[515,1385,536],{"class":521},[515,1387,539],{"class":521},[515,1389,721],{"class":542},[515,1391,539],{"class":521},[515,1393,694],{"class":521},[515,1395,1397,1399,1401,1403,1405,1407,1409,1412,1414,1416,1418,1420,1423,1425],{"class":517,"line":1396},23,[515,1398,1252],{"class":521},[515,1400,476],{"class":525},[515,1402,1217],{"class":529},[515,1404,670],{"class":529},[515,1406,536],{"class":521},[515,1408,539],{"class":521},[515,1410,1411],{"class":542},"i-lucide-circle-help",[515,1413,539],{"class":521},[515,1415,682],{"class":529},[515,1417,536],{"class":521},[515,1419,539],{"class":521},[515,1421,1422],{"class":542},"Help",[515,1424,539],{"class":521},[515,1426,694],{"class":521},[515,1428,1430,1432,1434],{"class":517,"line":1429},24,[515,1431,1339],{"class":521},[515,1433,623],{"class":525},[515,1435,548],{"class":521},[515,1437,1439,1441,1443],{"class":517,"line":1438},25,[515,1440,731],{"class":521},[515,1442,480],{"class":525},[515,1444,548],{"class":521},[515,1446,1448,1450,1452],{"class":517,"line":1447},26,[515,1449,604],{"class":521},[515,1451,623],{"class":525},[515,1453,548],{"class":521},[471,1455,1456,497,1458,1460,1461,1463,1464,1466],{},[474,1457,1067],{},[474,1459,1070],{},", and ",[474,1462,1073],{}," do nothing when the button has no parent island context; the normal ",[474,1465,1077],{}," event still fires.",[752,1468,1470],{"id":1469},"custom-content","Custom content",[471,1472,1473,1474,1477],{},"The ",[474,1475,1476],{},"leading"," slot replaces the built-in icon. The default slot replaces the built-in label while retaining the leading icon.",[506,1479,1481],{"className":508,"code":1480,"language":510,"meta":511,"style":511},"\u003CVyIslandButton icon=\"i-lucide-bell\">\n  \u003Cview class=\"flex flex-row items-center gap-1\">\n    \u003Ctext>Notifications\u003C\u002Ftext>\n    \u003Ctext class=\"rounded-full bg-red-500 px-1.5 text-xs text-white\">3\u003C\u002Ftext>\n  \u003C\u002Fview>\n\u003C\u002FVyIslandButton>\n",[474,1482,1483,1502,1507,1512,1517,1522],{"__ignoreMap":511},[515,1484,1485,1487,1489,1491,1493,1495,1498,1500],{"class":517,"line":518},[515,1486,522],{"class":521},[515,1488,476],{"class":525},[515,1490,670],{"class":529},[515,1492,536],{"class":521},[515,1494,539],{"class":521},[515,1496,1497],{"class":542},"i-lucide-bell",[515,1499,539],{"class":521},[515,1501,548],{"class":521},[515,1503,1504],{"class":517,"line":551},[515,1505,1506],{"class":561},"  \u003Cview class=\"flex flex-row items-center gap-1\">\n",[515,1508,1509],{"class":517,"line":580},[515,1510,1511],{"class":561},"    \u003Ctext>Notifications\u003C\u002Ftext>\n",[515,1513,1514],{"class":517,"line":601},[515,1515,1516],{"class":561},"    \u003Ctext class=\"rounded-full bg-red-500 px-1.5 text-xs text-white\">3\u003C\u002Ftext>\n",[515,1518,1519],{"class":517,"line":611},[515,1520,1521],{"class":561},"  \u003C\u002Fview>\n",[515,1523,1524,1526,1528],{"class":517,"line":618},[515,1525,604],{"class":521},[515,1527,476],{"class":525},[515,1529,548],{"class":521},[471,1531,1532,1533,1535],{},"When rendering a custom SVG icon in ",[474,1534,1476],{},", pass an explicit color because Lynx SVG does not inherit text color.",[466,1537,1539],{"id":1538},"features-and-behavior","Features and behavior",[1541,1542,1543,1549,1554,1559,1567,1579,1584,1592,1602],"ul",{},[1544,1545,1546,1548],"li",{},[474,1547,761],{}," sets the parent island's selected value and automatically participates in active-state matching.",[1544,1550,1551,1553],{},[474,1552,1067],{}," sets the parent island's free-form row mode.",[1544,1555,1556,1558],{},[474,1557,1070],{}," toggles the parent island's open state.",[1544,1560,1561,1563,1564,504],{},[474,1562,1073],{}," sets the parent mode to ",[474,1565,1566],{},"'default'",[1544,1568,1569,1570,1572,1573,1572,1575,1572,1577,504],{},"Behavior props may be combined and run in the fixed order ",[474,1571,761],{}," → ",[474,1574,1067],{},[474,1576,1070],{},[474,1578,1073],{},[1544,1580,1581,1582,504],{},"Disabled buttons do not update island state and do not emit ",[474,1583,1077],{},[1544,1585,1586,1588,1589,1591],{},[474,1587,933],{}," always enables active styling. Otherwise, a defined ",[474,1590,761],{}," is active when it strictly equals the parent value.",[1544,1593,1594,1595,1598,1599,504],{},"An explicit ",[474,1596,1597],{},"size"," overrides the inherited island size. Standalone buttons default to ",[474,1600,1601],{},"md",[1544,1603,1604,1605,497,1608,497,1610,1460,1612,504],{},"Built-in icon sizes are 16, 20, 24, and 28 pixels for ",[474,1606,1607],{},"sm",[474,1609,1601],{},[474,1611,655],{},[474,1613,1614],{},"xl",[466,1616,1618],{"id":1617},"props","Props",[1620,1621,1622,1641],"table",{},[1623,1624,1625],"thead",{},[1626,1627,1628,1632,1635,1638],"tr",{},[1629,1630,1631],"th",{},"Prop",[1629,1633,1634],{},"Type",[1629,1636,1637],{},"Default",[1629,1639,1640],{},"Description",[1642,1643,1644,1663,1680,1699,1720,1738,1755,1772,1792,1812,1831],"tbody",{},[1626,1645,1646,1651,1655,1660],{},[1647,1648,1649],"td",{},[474,1650,496],{},[1647,1652,1653],{},[474,1654,869],{},[1647,1656,1657],{},[474,1658,1659],{},"undefined",[1647,1661,1662],{},"Leading Iconify icon name.",[1626,1664,1665,1669,1673,1677],{},[1647,1666,1667],{},[474,1668,500],{},[1647,1670,1671],{},[474,1672,869],{},[1647,1674,1675],{},[474,1676,1659],{},[1647,1678,1679],{},"Built-in label text. Its presence creates a label-pill footprint.",[1626,1681,1682,1686,1691,1696],{},[1647,1683,1684],{},[474,1685,933],{},[1647,1687,1688],{},[474,1689,1690],{},"boolean",[1647,1692,1693],{},[474,1694,1695],{},"false",[1647,1697,1698],{},"Forces active styling. Parent value matching can also activate the button.",[1626,1700,1701,1706,1710,1714],{},[1647,1702,1703],{},[474,1704,1705],{},"disabled",[1647,1707,1708],{},[474,1709,1690],{},[1647,1711,1712],{},[474,1713,1695],{},[1647,1715,1716,1717,1719],{},"Prevents state changes and ",[474,1718,1077],{}," emission.",[1626,1721,1722,1726,1731,1735],{},[1647,1723,1724],{},[474,1725,761],{},[1647,1727,1728],{},[474,1729,1730],{},"string | number",[1647,1732,1733],{},[474,1734,1659],{},[1647,1736,1737],{},"Value written to the parent island on tap and used for automatic active state.",[1626,1739,1740,1744,1748,1752],{},[1647,1741,1742],{},[474,1743,1067],{},[1647,1745,1746],{},[474,1747,869],{},[1647,1749,1750],{},[474,1751,1659],{},[1647,1753,1754],{},"Free-form row mode written to the parent island on tap.",[1626,1756,1757,1761,1765,1769],{},[1647,1758,1759],{},[474,1760,1070],{},[1647,1762,1763],{},[474,1764,1690],{},[1647,1766,1767],{},[474,1768,1695],{},[1647,1770,1771],{},"Toggles the parent island's open state on tap.",[1626,1773,1774,1778,1782,1786],{},[1647,1775,1776],{},[474,1777,1073],{},[1647,1779,1780],{},[474,1781,1690],{},[1647,1783,1784],{},[474,1785,1695],{},[1647,1787,1788,1789,1791],{},"Resets the parent island's mode to ",[474,1790,1566],{}," on tap.",[1626,1793,1794,1798,1803,1809],{},[1647,1795,1796],{},[474,1797,1597],{},[1647,1799,1800],{},[474,1801,1802],{},"'sm' | 'md' | 'lg' | 'xl'",[1647,1804,1805,1806],{},"Parent size \u002F ",[474,1807,1808],{},"'md'",[1647,1810,1811],{},"Explicit size override.",[1626,1813,1814,1819,1824,1828],{},[1647,1815,1816],{},[474,1817,1818],{},"class",[1647,1820,1821],{},[474,1822,1823],{},"any",[1647,1825,1826],{},[474,1827,1659],{},[1647,1829,1830],{},"Classes merged onto the button base.",[1626,1832,1833,1838,1843,1847],{},[1647,1834,1835],{},[474,1836,1837],{},"ui",[1647,1839,1840],{},[474,1841,1842],{},"Partial\u003CRecord\u003CIslandButtonSlot, any>>",[1647,1844,1845],{},[474,1846,1659],{},[1647,1848,1849],{},"Per-instance theme slot overrides.",[466,1851,1853],{"id":1852},"emits","Emits",[1620,1855,1856,1868],{},[1623,1857,1858],{},[1626,1859,1860,1863,1866],{},[1629,1861,1862],{},"Event",[1629,1864,1865],{},"Payload",[1629,1867,1640],{},[1642,1869,1870],{},[1626,1871,1872,1876,1879],{},[1647,1873,1874],{},[474,1875,1077],{},[1647,1877,1878],{},"none",[1647,1880,1881],{},"Emitted after enabled declarative parent updates have run.",[466,1883,1885],{"id":1884},"slots","Slots",[1620,1887,1888,1897],{},[1623,1889,1890],{},[1626,1891,1892,1895],{},[1629,1893,1894],{},"Slot",[1629,1896,1640],{},[1642,1898,1899,1909],{},[1626,1900,1901,1906],{},[1647,1902,1903],{},[474,1904,1905],{},"default",[1647,1907,1908],{},"Replaces the built-in label. The built-in leading icon remains.",[1626,1910,1911,1915],{},[1647,1912,1913],{},[474,1914,1476],{},[1647,1916,1917],{},"Replaces the built-in icon area entirely.",[471,1919,1920],{},"Slot content does not receive scoped props.",[466,1922,1924],{"id":1923},"styling-and-theming","Styling and theming",[471,1926,1927,1928,1931,1932,504],{},"Override globally through ",[474,1929,1930],{},"appConfig.ui.islandButton"," or locally with ",[474,1933,1837],{},[1620,1935,1936,1946],{},[1623,1937,1938],{},[1626,1939,1940,1943],{},[1629,1941,1942],{},"UI slot",[1629,1944,1945],{},"Purpose",[1642,1947,1948,1958,1968],{},[1626,1949,1950,1955],{},[1647,1951,1952],{},[474,1953,1954],{},"base",[1647,1956,1957],{},"Button layout, target size, spacing, surface states, and rounding.",[1626,1959,1960,1965],{},[1647,1961,1962],{},[474,1963,1964],{},"leadingIcon",[1647,1966,1967],{},"Built-in icon size and foreground color.",[1626,1969,1970,1974],{},[1647,1971,1972],{},[474,1973,500],{},[1647,1975,1976],{},"Built-in label size, truncation, and foreground color.",[471,1978,1979,1980,1982,1983,1985,1986,1989],{},"The theme combines ",[474,1981,1597],{},", resolved ",[474,1984,933],{}," state, and automatic ",[474,1987,1988],{},"iconOnly"," detection.",[1620,1991,1992,2004],{},[1623,1993,1994],{},[1626,1995,1996,1999,2002],{},[1629,1997,1998],{},"Size",[1629,2000,2001],{},"Target",[1629,2003,141],{},[1642,2005,2006,2018,2030,2042],{},[1626,2007,2008,2012,2015],{},[1647,2009,2010],{},[474,2011,1607],{},[1647,2013,2014],{},"40px",[1647,2016,2017],{},"16px",[1626,2019,2020,2024,2027],{},[1647,2021,2022],{},[474,2023,1601],{},[1647,2025,2026],{},"44px",[1647,2028,2029],{},"20px",[1626,2031,2032,2036,2039],{},[1647,2033,2034],{},[474,2035,655],{},[1647,2037,2038],{},"56px",[1647,2040,2041],{},"24px",[1626,2043,2044,2048,2051],{},[1647,2045,2046],{},[474,2047,1614],{},[1647,2049,2050],{},"64px",[1647,2052,2053],{},"28px",[471,2055,2056],{},"Inactive buttons are transparent with slate foregrounds and a pressed background. Active buttons use a subtle dark surface and stronger foreground. Disabled buttons reduce opacity. The default theme is light-mode-oriented.",[466,2058,328],{"id":2059},"accessibility",[471,2061,2062,2063,2065,2066,2069],{},"The underlying ",[474,2064,41],{}," button exposes native Lynx button semantics, blocks interaction when disabled, and announces disabled state. Pass ",[474,2067,2068],{},"accessibility-label"," for every icon-only button; attributes fall through to the underlying button root.",[471,2071,2072],{},"The active visual state does not currently add a pressed, selected, or current accessibility state. Use visible labels where possible, provide surrounding context for navigation state, and test value-driven island navigation with VoiceOver and TalkBack. Custom default content should retain a concise accessible name.",[466,2074,2076],{"id":2075},"platform-notes","Platform notes",[1541,2078,2079,2089,2106,2116],{},[1544,2080,2081,2082,2084,2085,2088],{},"Interaction uses Lynx ",[474,2083,1077],{},", exposed as Vue's ",[474,2086,2087],{},"@tap",", rather than relying on a DOM click event.",[1544,2090,2091,2092,2095,2096,497,2099,1460,2102,2105],{},"Lynx SVG does not inherit ",[474,2093,2094],{},"currentColor",". The built-in icon resolves supported ",[474,2097,2098],{},"text-{color}-{shade}",[474,2100,2101],{},"text-white",[474,2103,2104],{},"text-black"," classes into an explicit icon color.",[1544,2107,2108,2109,2112,2113,2115],{},"Arbitrary foreground classes such as ",[474,2110,2111],{},"text-[#abc]"," cannot be inferred for the built-in SVG; use a custom ",[474,2114,1476],{}," slot and explicit icon color when needed.",[1544,2117,2118,2119,2121,2122,2124,2125,2127],{},"Foreground classes live on ",[474,2120,1964],{}," and ",[474,2123,500],{},", not only on ",[474,2126,1954],{},", because CSS inheritance is disabled in the Lynx build.",[466,2129,2131],{"id":2130},"related-components","Related components",[1541,2133,2134,2142,2149,2156],{},[1544,2135,2136,2141],{},[2137,2138,2139],"a",{"href":151},[474,2140,150],{}," for parent state, sizing, row modes, and expandable panels.",[1544,2143,2144,2148],{},[2137,2145,2146],{"href":160},[474,2147,159],{}," for arranging companion islands.",[1544,2150,2151,2155],{},[2137,2152,2153],{"href":102},[474,2154,101],{}," for a general-purpose action outside island layouts.",[1544,2157,2158,2162],{},[2137,2159,2160],{"href":290},[474,2161,289],{}," when the pressed state itself is the control's value.",[2164,2165,2166],"style",{},"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 .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 .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}",{"title":511,"searchDepth":518,"depth":551,"links":2168},[2169,2170,2175,2176,2177,2178,2179,2180,2181,2182],{"id":468,"depth":551,"text":469},{"id":489,"depth":551,"text":490,"children":2171},[2172,2173,2174],{"id":754,"depth":580,"text":755},{"id":1057,"depth":580,"text":1058},{"id":1469,"depth":580,"text":1470},{"id":1538,"depth":551,"text":1539},{"id":1617,"depth":551,"text":1618},{"id":1852,"depth":551,"text":1853},{"id":1884,"depth":551,"text":1885},{"id":1923,"depth":551,"text":1924},{"id":2059,"depth":551,"text":328},{"id":2075,"depth":551,"text":2076},{"id":2130,"depth":551,"text":2131},"Add actions, selections, mode switches, and expansion controls to an island.",[2185],{"label":2186,"icon":2187,"to":2188,"target":2189},"Source","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002FKealanAU\u002Fvyui\u002Fblob\u002Fmain\u002Fpackages\u002Fkit\u002Fsrc\u002Fcomponents\u002FIslandButton.vue","_blank",{},{"icon":157},{"title":154,"description":2183},"cdTTYJxSo1fqOb_1SVc0XFnNrUMd6yBUhBq3kbspgLw",[2195,2197],{"title":150,"path":151,"stem":152,"description":2196,"icon":-1,"children":-1,"navigation":-1},"Build a floating or inline pill that can select, morph, and expand.",{"title":159,"path":160,"stem":161,"description":2198,"icon":-1,"children":-1,"navigation":-1},"Position multiple companion islands as one floating or inline layout.",1785060128097]