[{"data":1,"prerenderedAt":2505},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Fswiper":460,"\u002Fcomponents\u002Fswiper-surround":2500},[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":267,"body":462,"description":2489,"extension":2396,"links":2490,"meta":2496,"navigation":2497,"package":63,"path":268,"seo":2498,"stem":269,"__hash__":2499},"docs\u002F3.components\u002Fswiper.md",{"type":463,"value":464,"toc":2468},"minimark",[465,470,489,494,501,516,520,535,1027,1041,1046,1065,1451,1457,1461,1473,1745,1749,1764,1847,1851,1862,2037,2041,2080,2089,2093,2096,2100,2103,2107,2110,2124,2128,2131,2137,2173,2273,2280,2282,2288,2290,2295,2297,2301,2311,2381,2405,2408,2416,2420,2438,2442,2464],[466,467,469],"h2",{"id":468},"overview","Overview",[471,472,473,477,478,480,481,484,485,488],"p",{},[474,475,476],"code",{},"VySwiper"," is the styled carousel built on the ",[474,479,41],{}," ",[474,482,483],{},"SwiperRoot"," and ",[474,486,487],{},"SwiperItem"," primitives. Slides follow the finger natively, snap to the nearest page on release, and a quick flick advances even before the halfway point. It supports controlled index state, data-driven or manual slides, measured full-width pages, seamless looping, autoplay, axis locking, and opt-in indicator dots.",[490,491],"component-code",{"height":492,"name":493},"280px","swiper-example",[495,496,498],"callout",{"icon":497},"i-lucide-pointer",[471,499,500],{},"Works with touch and mouse: drag the slides in the preview above with a mouse, or swipe on device — both drive the same gesture.",[495,502,503],{"icon":44},[471,504,505,506,508,509,515],{},"Styled on top of the ",[474,507,41],{}," Swiper primitives, whose gesture is a shared main-thread drag controller. Reach for ",[510,511,513],"a",{"href":512},"#built-on-vyuicore",[474,514,483],{}," directly when you need spacing, alignment, RTL, or custom thresholds.",[466,517,519],{"id":518},"usage","Usage",[471,521,522,523,526,527,530,531,534],{},"Bind the active index with ",[474,524,525],{},"v-model",", pass an ",[474,528,529],{},"items"," array, and render each slide through the ",[474,532,533],{},"item"," slot.",[536,537,542],"pre",{"className":538,"code":539,"language":540,"meta":541,"style":541},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VySwiper } from '@vyui\u002Fkit\u002Fswiper'\n\nconst current = ref(0)\nconst slides = [\n  { title: 'Explore', description: 'Find something new.' },\n  { title: 'Save', description: 'Keep favorites close.' },\n  { title: 'Share', description: 'Send them to friends.' },\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVySwiper v-model=\"current\" :items=\"slides\" show-indicators>\n    \u003Ctemplate #item=\"{ item, index }\">\n      \u003Cview class=\"h-48 p-6 bg-neutral-100\">\n        \u003Ctext class=\"text-xl font-semibold\">{{ item.title }}\u003C\u002Ftext>\n        \u003Ctext class=\"mt-2 text-neutral-600\">{{ item.description }}\u003C\u002Ftext>\n        \u003Ctext class=\"mt-4 text-sm text-neutral-500\">Slide {{ index + 1 }}\u003C\u002Ftext>\n      \u003C\u002Fview>\n    \u003C\u002Ftemplate>\n  \u003C\u002FVySwiper>\n\u003C\u002Ftemplate>\n","vue","",[474,543,544,579,607,628,635,659,672,710,741,772,778,788,793,803,840,875,898,930,959,988,998,1008,1018],{"__ignoreMap":541},[545,546,549,553,557,561,564,567,570,574,576],"span",{"class":547,"line":548},"line",1,[545,550,552],{"class":551},"sMK4o","\u003C",[545,554,556],{"class":555},"swJcz","script",[545,558,560],{"class":559},"spNyl"," setup",[545,562,563],{"class":559}," lang",[545,565,566],{"class":551},"=",[545,568,569],{"class":551},"\"",[545,571,573],{"class":572},"sfazB","ts",[545,575,569],{"class":551},[545,577,578],{"class":551},">\n",[545,580,582,586,589,593,596,599,602,604],{"class":547,"line":581},2,[545,583,585],{"class":584},"s7zQu","import",[545,587,588],{"class":551}," {",[545,590,592],{"class":591},"sTEyZ"," ref",[545,594,595],{"class":551}," }",[545,597,598],{"class":584}," from",[545,600,601],{"class":551}," '",[545,603,540],{"class":572},[545,605,606],{"class":551},"'\n",[545,608,610,612,614,617,619,621,623,626],{"class":547,"line":609},3,[545,611,585],{"class":584},[545,613,588],{"class":551},[545,615,616],{"class":591}," VySwiper",[545,618,595],{"class":551},[545,620,598],{"class":584},[545,622,601],{"class":551},[545,624,625],{"class":572},"@vyui\u002Fkit\u002Fswiper",[545,627,606],{"class":551},[545,629,631],{"class":547,"line":630},4,[545,632,634],{"emptyLinePlaceholder":633},true,"\n",[545,636,638,641,644,646,649,652,656],{"class":547,"line":637},5,[545,639,640],{"class":559},"const",[545,642,643],{"class":591}," current ",[545,645,566],{"class":551},[545,647,592],{"class":648},"s2Zo4",[545,650,651],{"class":591},"(",[545,653,655],{"class":654},"sbssI","0",[545,657,658],{"class":591},")\n",[545,660,662,664,667,669],{"class":547,"line":661},6,[545,663,640],{"class":559},[545,665,666],{"class":591}," slides ",[545,668,566],{"class":551},[545,670,671],{"class":591}," [\n",[545,673,675,678,681,684,686,689,692,695,698,700,702,705,707],{"class":547,"line":674},7,[545,676,677],{"class":551},"  {",[545,679,680],{"class":555}," title",[545,682,683],{"class":551},":",[545,685,601],{"class":551},[545,687,688],{"class":572},"Explore",[545,690,691],{"class":551},"'",[545,693,694],{"class":551},",",[545,696,697],{"class":555}," description",[545,699,683],{"class":551},[545,701,601],{"class":551},[545,703,704],{"class":572},"Find something new.",[545,706,691],{"class":551},[545,708,709],{"class":551}," },\n",[545,711,713,715,717,719,721,724,726,728,730,732,734,737,739],{"class":547,"line":712},8,[545,714,677],{"class":551},[545,716,680],{"class":555},[545,718,683],{"class":551},[545,720,601],{"class":551},[545,722,723],{"class":572},"Save",[545,725,691],{"class":551},[545,727,694],{"class":551},[545,729,697],{"class":555},[545,731,683],{"class":551},[545,733,601],{"class":551},[545,735,736],{"class":572},"Keep favorites close.",[545,738,691],{"class":551},[545,740,709],{"class":551},[545,742,744,746,748,750,752,755,757,759,761,763,765,768,770],{"class":547,"line":743},9,[545,745,677],{"class":551},[545,747,680],{"class":555},[545,749,683],{"class":551},[545,751,601],{"class":551},[545,753,754],{"class":572},"Share",[545,756,691],{"class":551},[545,758,694],{"class":551},[545,760,697],{"class":555},[545,762,683],{"class":551},[545,764,601],{"class":551},[545,766,767],{"class":572},"Send them to friends.",[545,769,691],{"class":551},[545,771,709],{"class":551},[545,773,775],{"class":547,"line":774},10,[545,776,777],{"class":591},"]\n",[545,779,781,784,786],{"class":547,"line":780},11,[545,782,783],{"class":551},"\u003C\u002F",[545,785,556],{"class":555},[545,787,578],{"class":551},[545,789,791],{"class":547,"line":790},12,[545,792,634],{"emptyLinePlaceholder":633},[545,794,796,798,801],{"class":547,"line":795},13,[545,797,552],{"class":551},[545,799,800],{"class":555},"template",[545,802,578],{"class":551},[545,804,806,809,811,814,816,818,821,823,826,828,830,833,835,838],{"class":547,"line":805},14,[545,807,808],{"class":551},"  \u003C",[545,810,476],{"class":555},[545,812,813],{"class":559}," v-model",[545,815,566],{"class":551},[545,817,569],{"class":551},[545,819,820],{"class":572},"current",[545,822,569],{"class":551},[545,824,825],{"class":559}," :items",[545,827,566],{"class":551},[545,829,569],{"class":551},[545,831,832],{"class":572},"slides",[545,834,569],{"class":551},[545,836,837],{"class":559}," show-indicators",[545,839,578],{"class":551},[545,841,843,846,848,851,853,855,857,860,863,865,868,871,873],{"class":547,"line":842},15,[545,844,845],{"class":551},"    \u003C",[545,847,800],{"class":555},[545,849,850],{"class":551}," #",[545,852,533],{"class":559},[545,854,566],{"class":551},[545,856,569],{"class":551},[545,858,859],{"class":551},"{",[545,861,862],{"class":591}," item",[545,864,694],{"class":551},[545,866,867],{"class":591}," index ",[545,869,870],{"class":551},"}",[545,872,569],{"class":551},[545,874,578],{"class":551},[545,876,878,881,884,887,889,891,894,896],{"class":547,"line":877},16,[545,879,880],{"class":551},"      \u003C",[545,882,883],{"class":555},"view",[545,885,886],{"class":559}," class",[545,888,566],{"class":551},[545,890,569],{"class":551},[545,892,893],{"class":572},"h-48 p-6 bg-neutral-100",[545,895,569],{"class":551},[545,897,578],{"class":551},[545,899,901,904,907,909,911,913,916,918,921,924,926,928],{"class":547,"line":900},17,[545,902,903],{"class":551},"        \u003C",[545,905,906],{"class":555},"text",[545,908,886],{"class":559},[545,910,566],{"class":551},[545,912,569],{"class":551},[545,914,915],{"class":572},"text-xl font-semibold",[545,917,569],{"class":551},[545,919,920],{"class":551},">",[545,922,923],{"class":591},"{{ item.title }}",[545,925,783],{"class":551},[545,927,906],{"class":555},[545,929,578],{"class":551},[545,931,933,935,937,939,941,943,946,948,950,953,955,957],{"class":547,"line":932},18,[545,934,903],{"class":551},[545,936,906],{"class":555},[545,938,886],{"class":559},[545,940,566],{"class":551},[545,942,569],{"class":551},[545,944,945],{"class":572},"mt-2 text-neutral-600",[545,947,569],{"class":551},[545,949,920],{"class":551},[545,951,952],{"class":591},"{{ item.description }}",[545,954,783],{"class":551},[545,956,906],{"class":555},[545,958,578],{"class":551},[545,960,962,964,966,968,970,972,975,977,979,982,984,986],{"class":547,"line":961},19,[545,963,903],{"class":551},[545,965,906],{"class":555},[545,967,886],{"class":559},[545,969,566],{"class":551},[545,971,569],{"class":551},[545,973,974],{"class":572},"mt-4 text-sm text-neutral-500",[545,976,569],{"class":551},[545,978,920],{"class":551},[545,980,981],{"class":591},"Slide {{ index + 1 }}",[545,983,783],{"class":551},[545,985,906],{"class":555},[545,987,578],{"class":551},[545,989,991,994,996],{"class":547,"line":990},20,[545,992,993],{"class":551},"      \u003C\u002F",[545,995,883],{"class":555},[545,997,578],{"class":551},[545,999,1001,1004,1006],{"class":547,"line":1000},21,[545,1002,1003],{"class":551},"    \u003C\u002F",[545,1005,800],{"class":555},[545,1007,578],{"class":551},[545,1009,1011,1014,1016],{"class":547,"line":1010},22,[545,1012,1013],{"class":551},"  \u003C\u002F",[545,1015,476],{"class":555},[545,1017,578],{"class":551},[545,1019,1021,1023,1025],{"class":547,"line":1020},23,[545,1022,783],{"class":551},[545,1024,800],{"class":555},[545,1026,578],{"class":551},[471,1028,1029,1030,1033,1034,1037,1038,1040],{},"When ",[474,1031,1032],{},"itemWidth"," is omitted, the wrapper measures its container and makes each slide fill the available width (using ",[474,1035,1036],{},"300px"," until the first layout measurement arrives). Set ",[474,1039,1032],{}," explicitly for fixed-width slides.",[1042,1043,1045],"h3",{"id":1044},"loop-and-autoplay","Loop and autoplay",[471,1047,1048,1049,1052,1053,1056,1057,1060,1061,1064],{},"Set ",[474,1050,1051],{},"loop"," to navigate seamlessly across both ends — the edge slides are cloned so motion continues over the seam instead of rewinding. Set ",[474,1054,1055],{},"autoplay"," to ",[474,1058,1059],{},"true"," for the default ",[474,1062,1063],{},"3000ms"," interval, or pass an interval in milliseconds.",[536,1066,1068],{"className":538,"code":1067,"language":540,"meta":541,"style":541},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VySwiper } from '@vyui\u002Fkit\u002Fswiper'\n\nconst current = ref(0)\nconst promotions = [\n  { label: 'Free delivery', color: 'bg-primary-100' },\n  { label: 'Member pricing', color: 'bg-success-100' },\n  { label: 'New arrivals', color: 'bg-warning-100' },\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVySwiper\n    v-model=\"current\"\n    :items=\"promotions\"\n    :autoplay=\"5000\"\n    loop\n    axis-lock\n    show-indicators\n  >\n    \u003Ctemplate #item=\"{ item }\">\n      \u003Cview :class=\"['h-40 items-center justify-center', item.color]\">\n        \u003Ctext class=\"text-xl font-semibold\">{{ item.label }}\u003C\u002Ftext>\n      \u003C\u002Fview>\n    \u003C\u002Ftemplate>\n  \u003C\u002FVySwiper>\n\u003C\u002Ftemplate>\n",[474,1069,1070,1090,1108,1126,1130,1146,1157,1189,1219,1249,1253,1261,1265,1273,1280,1294,1308,1322,1327,1332,1337,1342,1367,1387,1415,1424,1433,1442],{"__ignoreMap":541},[545,1071,1072,1074,1076,1078,1080,1082,1084,1086,1088],{"class":547,"line":548},[545,1073,552],{"class":551},[545,1075,556],{"class":555},[545,1077,560],{"class":559},[545,1079,563],{"class":559},[545,1081,566],{"class":551},[545,1083,569],{"class":551},[545,1085,573],{"class":572},[545,1087,569],{"class":551},[545,1089,578],{"class":551},[545,1091,1092,1094,1096,1098,1100,1102,1104,1106],{"class":547,"line":581},[545,1093,585],{"class":584},[545,1095,588],{"class":551},[545,1097,592],{"class":591},[545,1099,595],{"class":551},[545,1101,598],{"class":584},[545,1103,601],{"class":551},[545,1105,540],{"class":572},[545,1107,606],{"class":551},[545,1109,1110,1112,1114,1116,1118,1120,1122,1124],{"class":547,"line":609},[545,1111,585],{"class":584},[545,1113,588],{"class":551},[545,1115,616],{"class":591},[545,1117,595],{"class":551},[545,1119,598],{"class":584},[545,1121,601],{"class":551},[545,1123,625],{"class":572},[545,1125,606],{"class":551},[545,1127,1128],{"class":547,"line":630},[545,1129,634],{"emptyLinePlaceholder":633},[545,1131,1132,1134,1136,1138,1140,1142,1144],{"class":547,"line":637},[545,1133,640],{"class":559},[545,1135,643],{"class":591},[545,1137,566],{"class":551},[545,1139,592],{"class":648},[545,1141,651],{"class":591},[545,1143,655],{"class":654},[545,1145,658],{"class":591},[545,1147,1148,1150,1153,1155],{"class":547,"line":661},[545,1149,640],{"class":559},[545,1151,1152],{"class":591}," promotions ",[545,1154,566],{"class":551},[545,1156,671],{"class":591},[545,1158,1159,1161,1164,1166,1168,1171,1173,1175,1178,1180,1182,1185,1187],{"class":547,"line":674},[545,1160,677],{"class":551},[545,1162,1163],{"class":555}," label",[545,1165,683],{"class":551},[545,1167,601],{"class":551},[545,1169,1170],{"class":572},"Free delivery",[545,1172,691],{"class":551},[545,1174,694],{"class":551},[545,1176,1177],{"class":555}," color",[545,1179,683],{"class":551},[545,1181,601],{"class":551},[545,1183,1184],{"class":572},"bg-primary-100",[545,1186,691],{"class":551},[545,1188,709],{"class":551},[545,1190,1191,1193,1195,1197,1199,1202,1204,1206,1208,1210,1212,1215,1217],{"class":547,"line":712},[545,1192,677],{"class":551},[545,1194,1163],{"class":555},[545,1196,683],{"class":551},[545,1198,601],{"class":551},[545,1200,1201],{"class":572},"Member pricing",[545,1203,691],{"class":551},[545,1205,694],{"class":551},[545,1207,1177],{"class":555},[545,1209,683],{"class":551},[545,1211,601],{"class":551},[545,1213,1214],{"class":572},"bg-success-100",[545,1216,691],{"class":551},[545,1218,709],{"class":551},[545,1220,1221,1223,1225,1227,1229,1232,1234,1236,1238,1240,1242,1245,1247],{"class":547,"line":743},[545,1222,677],{"class":551},[545,1224,1163],{"class":555},[545,1226,683],{"class":551},[545,1228,601],{"class":551},[545,1230,1231],{"class":572},"New arrivals",[545,1233,691],{"class":551},[545,1235,694],{"class":551},[545,1237,1177],{"class":555},[545,1239,683],{"class":551},[545,1241,601],{"class":551},[545,1243,1244],{"class":572},"bg-warning-100",[545,1246,691],{"class":551},[545,1248,709],{"class":551},[545,1250,1251],{"class":547,"line":774},[545,1252,777],{"class":591},[545,1254,1255,1257,1259],{"class":547,"line":780},[545,1256,783],{"class":551},[545,1258,556],{"class":555},[545,1260,578],{"class":551},[545,1262,1263],{"class":547,"line":790},[545,1264,634],{"emptyLinePlaceholder":633},[545,1266,1267,1269,1271],{"class":547,"line":795},[545,1268,552],{"class":551},[545,1270,800],{"class":555},[545,1272,578],{"class":551},[545,1274,1275,1277],{"class":547,"line":805},[545,1276,808],{"class":551},[545,1278,1279],{"class":555},"VySwiper\n",[545,1281,1282,1285,1287,1289,1291],{"class":547,"line":842},[545,1283,1284],{"class":559},"    v-model",[545,1286,566],{"class":551},[545,1288,569],{"class":551},[545,1290,820],{"class":572},[545,1292,1293],{"class":551},"\"\n",[545,1295,1296,1299,1301,1303,1306],{"class":547,"line":877},[545,1297,1298],{"class":559},"    :items",[545,1300,566],{"class":551},[545,1302,569],{"class":551},[545,1304,1305],{"class":572},"promotions",[545,1307,1293],{"class":551},[545,1309,1310,1313,1315,1317,1320],{"class":547,"line":900},[545,1311,1312],{"class":559},"    :autoplay",[545,1314,566],{"class":551},[545,1316,569],{"class":551},[545,1318,1319],{"class":572},"5000",[545,1321,1293],{"class":551},[545,1323,1324],{"class":547,"line":932},[545,1325,1326],{"class":559},"    loop\n",[545,1328,1329],{"class":547,"line":961},[545,1330,1331],{"class":559},"    axis-lock\n",[545,1333,1334],{"class":547,"line":990},[545,1335,1336],{"class":559},"    show-indicators\n",[545,1338,1339],{"class":547,"line":1000},[545,1340,1341],{"class":551},"  >\n",[545,1343,1344,1346,1348,1350,1352,1354,1356,1358,1361,1363,1365],{"class":547,"line":1010},[545,1345,845],{"class":551},[545,1347,800],{"class":555},[545,1349,850],{"class":551},[545,1351,533],{"class":559},[545,1353,566],{"class":551},[545,1355,569],{"class":551},[545,1357,859],{"class":551},[545,1359,1360],{"class":591}," item ",[545,1362,870],{"class":551},[545,1364,569],{"class":551},[545,1366,578],{"class":551},[545,1368,1369,1371,1373,1376,1378,1380,1383,1385],{"class":547,"line":1020},[545,1370,880],{"class":551},[545,1372,883],{"class":555},[545,1374,1375],{"class":559}," :class",[545,1377,566],{"class":551},[545,1379,569],{"class":551},[545,1381,1382],{"class":572},"['h-40 items-center justify-center', item.color]",[545,1384,569],{"class":551},[545,1386,578],{"class":551},[545,1388,1390,1392,1394,1396,1398,1400,1402,1404,1406,1409,1411,1413],{"class":547,"line":1389},24,[545,1391,903],{"class":551},[545,1393,906],{"class":555},[545,1395,886],{"class":559},[545,1397,566],{"class":551},[545,1399,569],{"class":551},[545,1401,915],{"class":572},[545,1403,569],{"class":551},[545,1405,920],{"class":551},[545,1407,1408],{"class":591},"{{ item.label }}",[545,1410,783],{"class":551},[545,1412,906],{"class":555},[545,1414,578],{"class":551},[545,1416,1418,1420,1422],{"class":547,"line":1417},25,[545,1419,993],{"class":551},[545,1421,883],{"class":555},[545,1423,578],{"class":551},[545,1425,1427,1429,1431],{"class":547,"line":1426},26,[545,1428,1003],{"class":551},[545,1430,800],{"class":555},[545,1432,578],{"class":551},[545,1434,1436,1438,1440],{"class":547,"line":1435},27,[545,1437,1013],{"class":551},[545,1439,476],{"class":555},[545,1441,578],{"class":551},[545,1443,1445,1447,1449],{"class":547,"line":1444},28,[545,1446,783],{"class":551},[545,1448,800],{"class":555},[545,1450,578],{"class":551},[471,1452,1453,1454,1456],{},"Autoplay pauses while the user is dragging and resumes after the release settles. Without ",[474,1455,1051],{},", autoplay stops advancing at the final slide.",[1042,1458,1460],{"id":1459},"manual-slides","Manual slides",[471,1462,1463,1464,1466,1467,1469,1470,1472],{},"Omit ",[474,1465,529],{}," and place core ",[474,1468,487],{}," children in the default slot. The wrapper derives the item count from the number of top-level slot nodes, so keep the slot to direct ",[474,1471,487],{}," children.",[536,1474,1476],{"className":538,"code":1475,"language":540,"meta":541,"style":541},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { SwiperItem } from '@vyui\u002Fcore'\nimport { VySwiper } from '@vyui\u002Fkit\u002Fswiper'\n\nconst current = ref(0)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVySwiper v-model=\"current\" :item-width=\"320\">\n    \u003CSwiperItem>\n      \u003Cview class=\"h-40 p-5 bg-primary-100\">\u003Ctext>First slide\u003C\u002Ftext>\u003C\u002Fview>\n    \u003C\u002FSwiperItem>\n    \u003CSwiperItem>\n      \u003Cview class=\"h-40 p-5 bg-secondary-100\">\u003Ctext>Second slide\u003C\u002Ftext>\u003C\u002Fview>\n    \u003C\u002FSwiperItem>\n  \u003C\u002FVySwiper>\n\u003C\u002Ftemplate>\n",[474,1477,1478,1498,1516,1535,1553,1557,1573,1581,1585,1593,1623,1631,1669,1677,1685,1721,1729,1737],{"__ignoreMap":541},[545,1479,1480,1482,1484,1486,1488,1490,1492,1494,1496],{"class":547,"line":548},[545,1481,552],{"class":551},[545,1483,556],{"class":555},[545,1485,560],{"class":559},[545,1487,563],{"class":559},[545,1489,566],{"class":551},[545,1491,569],{"class":551},[545,1493,573],{"class":572},[545,1495,569],{"class":551},[545,1497,578],{"class":551},[545,1499,1500,1502,1504,1506,1508,1510,1512,1514],{"class":547,"line":581},[545,1501,585],{"class":584},[545,1503,588],{"class":551},[545,1505,592],{"class":591},[545,1507,595],{"class":551},[545,1509,598],{"class":584},[545,1511,601],{"class":551},[545,1513,540],{"class":572},[545,1515,606],{"class":551},[545,1517,1518,1520,1522,1525,1527,1529,1531,1533],{"class":547,"line":609},[545,1519,585],{"class":584},[545,1521,588],{"class":551},[545,1523,1524],{"class":591}," SwiperItem",[545,1526,595],{"class":551},[545,1528,598],{"class":584},[545,1530,601],{"class":551},[545,1532,41],{"class":572},[545,1534,606],{"class":551},[545,1536,1537,1539,1541,1543,1545,1547,1549,1551],{"class":547,"line":630},[545,1538,585],{"class":584},[545,1540,588],{"class":551},[545,1542,616],{"class":591},[545,1544,595],{"class":551},[545,1546,598],{"class":584},[545,1548,601],{"class":551},[545,1550,625],{"class":572},[545,1552,606],{"class":551},[545,1554,1555],{"class":547,"line":637},[545,1556,634],{"emptyLinePlaceholder":633},[545,1558,1559,1561,1563,1565,1567,1569,1571],{"class":547,"line":661},[545,1560,640],{"class":559},[545,1562,643],{"class":591},[545,1564,566],{"class":551},[545,1566,592],{"class":648},[545,1568,651],{"class":591},[545,1570,655],{"class":654},[545,1572,658],{"class":591},[545,1574,1575,1577,1579],{"class":547,"line":674},[545,1576,783],{"class":551},[545,1578,556],{"class":555},[545,1580,578],{"class":551},[545,1582,1583],{"class":547,"line":712},[545,1584,634],{"emptyLinePlaceholder":633},[545,1586,1587,1589,1591],{"class":547,"line":743},[545,1588,552],{"class":551},[545,1590,800],{"class":555},[545,1592,578],{"class":551},[545,1594,1595,1597,1599,1601,1603,1605,1607,1609,1612,1614,1616,1619,1621],{"class":547,"line":774},[545,1596,808],{"class":551},[545,1598,476],{"class":555},[545,1600,813],{"class":559},[545,1602,566],{"class":551},[545,1604,569],{"class":551},[545,1606,820],{"class":572},[545,1608,569],{"class":551},[545,1610,1611],{"class":559}," :item-width",[545,1613,566],{"class":551},[545,1615,569],{"class":551},[545,1617,1618],{"class":572},"320",[545,1620,569],{"class":551},[545,1622,578],{"class":551},[545,1624,1625,1627,1629],{"class":547,"line":780},[545,1626,845],{"class":551},[545,1628,487],{"class":555},[545,1630,578],{"class":551},[545,1632,1633,1635,1637,1639,1641,1643,1646,1648,1651,1653,1655,1658,1660,1662,1665,1667],{"class":547,"line":790},[545,1634,880],{"class":551},[545,1636,883],{"class":555},[545,1638,886],{"class":559},[545,1640,566],{"class":551},[545,1642,569],{"class":551},[545,1644,1645],{"class":572},"h-40 p-5 bg-primary-100",[545,1647,569],{"class":551},[545,1649,1650],{"class":551},">\u003C",[545,1652,906],{"class":555},[545,1654,920],{"class":551},[545,1656,1657],{"class":591},"First slide",[545,1659,783],{"class":551},[545,1661,906],{"class":555},[545,1663,1664],{"class":551},">\u003C\u002F",[545,1666,883],{"class":555},[545,1668,578],{"class":551},[545,1670,1671,1673,1675],{"class":547,"line":795},[545,1672,1003],{"class":551},[545,1674,487],{"class":555},[545,1676,578],{"class":551},[545,1678,1679,1681,1683],{"class":547,"line":805},[545,1680,845],{"class":551},[545,1682,487],{"class":555},[545,1684,578],{"class":551},[545,1686,1687,1689,1691,1693,1695,1697,1700,1702,1704,1706,1708,1711,1713,1715,1717,1719],{"class":547,"line":842},[545,1688,880],{"class":551},[545,1690,883],{"class":555},[545,1692,886],{"class":559},[545,1694,566],{"class":551},[545,1696,569],{"class":551},[545,1698,1699],{"class":572},"h-40 p-5 bg-secondary-100",[545,1701,569],{"class":551},[545,1703,1650],{"class":551},[545,1705,906],{"class":555},[545,1707,920],{"class":551},[545,1709,1710],{"class":591},"Second slide",[545,1712,783],{"class":551},[545,1714,906],{"class":555},[545,1716,1664],{"class":551},[545,1718,883],{"class":555},[545,1720,578],{"class":551},[545,1722,1723,1725,1727],{"class":547,"line":877},[545,1724,1003],{"class":551},[545,1726,487],{"class":555},[545,1728,578],{"class":551},[545,1730,1731,1733,1735],{"class":547,"line":900},[545,1732,1013],{"class":551},[545,1734,476],{"class":555},[545,1736,578],{"class":551},[545,1738,1739,1741,1743],{"class":547,"line":932},[545,1740,783],{"class":551},[545,1742,800],{"class":555},[545,1744,578],{"class":551},[1042,1746,1748],{"id":1747},"indicators","Indicators",[471,1750,1751,1752,1755,1756,1759,1760,1763],{},"Indicators are opt-in via ",[474,1753,1754],{},"showIndicators"," and appear when there is more than one slide. The active dot is derived from ",[474,1757,1758],{},"modelValue",", so keep it bound. ",[474,1761,1762],{},"size"," scales the dots.",[536,1765,1767],{"className":538,"code":1766,"language":540,"meta":541,"style":541},"\u003CVySwiper v-model=\"current\" :items=\"slides\" size=\"lg\" show-indicators>\n  \u003Ctemplate #item=\"{ item }\">\n    \u003Cview class=\"h-48 p-6\">\n      \u003Ctext>{{ item.title }}\u003C\u002Ftext>\n    \u003C\u002Fview>\n  \u003C\u002Ftemplate>\n\u003C\u002FVySwiper>\n",[474,1768,1769,1814,1819,1824,1829,1834,1839],{"__ignoreMap":541},[545,1770,1771,1773,1775,1777,1779,1781,1783,1785,1788,1790,1792,1794,1796,1798,1801,1803,1805,1808,1810,1812],{"class":547,"line":548},[545,1772,552],{"class":551},[545,1774,476],{"class":555},[545,1776,813],{"class":559},[545,1778,566],{"class":551},[545,1780,569],{"class":551},[545,1782,820],{"class":591},[545,1784,569],{"class":551},[545,1786,1787],{"class":551}," :",[545,1789,529],{"class":559},[545,1791,566],{"class":551},[545,1793,569],{"class":551},[545,1795,832],{"class":591},[545,1797,569],{"class":551},[545,1799,1800],{"class":559}," size",[545,1802,566],{"class":551},[545,1804,569],{"class":551},[545,1806,1807],{"class":572},"lg",[545,1809,569],{"class":551},[545,1811,837],{"class":559},[545,1813,578],{"class":551},[545,1815,1816],{"class":547,"line":581},[545,1817,1818],{"class":591},"  \u003Ctemplate #item=\"{ item }\">\n",[545,1820,1821],{"class":547,"line":609},[545,1822,1823],{"class":591},"    \u003Cview class=\"h-48 p-6\">\n",[545,1825,1826],{"class":547,"line":630},[545,1827,1828],{"class":591},"      \u003Ctext>{{ item.title }}\u003C\u002Ftext>\n",[545,1830,1831],{"class":547,"line":637},[545,1832,1833],{"class":591},"    \u003C\u002Fview>\n",[545,1835,1836],{"class":547,"line":661},[545,1837,1838],{"class":591},"  \u003C\u002Ftemplate>\n",[545,1840,1841,1843,1845],{"class":547,"line":674},[545,1842,783],{"class":551},[545,1844,476],{"class":555},[545,1846,578],{"class":551},[1042,1848,1850],{"id":1849},"custom-styles","Custom styles",[471,1852,1853,1854,1857,1858,1861],{},"Use ",[474,1855,1856],{},"class"," for the root or ",[474,1859,1860],{},"ui"," for individual theme slots.",[536,1863,1865],{"className":538,"code":1864,"language":540,"meta":541,"style":541},"\u003CVySwiper\n  v-model=\"current\"\n  :items=\"slides\"\n  show-indicators\n  class=\"rounded-2xl\"\n  :ui=\"{\n    item: 'rounded-2xl',\n    indicators: 'bottom-4',\n    indicator: 'bg-neutral-400',\n    indicatorActive: 'bg-error-500',\n  }\"\n>\n  \u003Ctemplate #item=\"{ item }\">\n    \u003Cview class=\"h-48 p-6 bg-neutral-100\">\n      \u003Ctext>{{ item.title }}\u003C\u002Ftext>\n    \u003C\u002Fview>\n  \u003C\u002Ftemplate>\n\u003C\u002FVySwiper>\n",[474,1866,1867,1873,1886,1901,1906,1920,1933,1949,1965,1981,1997,2004,2008,2012,2017,2021,2025,2029],{"__ignoreMap":541},[545,1868,1869,1871],{"class":547,"line":548},[545,1870,552],{"class":551},[545,1872,1279],{"class":555},[545,1874,1875,1878,1880,1882,1884],{"class":547,"line":581},[545,1876,1877],{"class":559},"  v-model",[545,1879,566],{"class":551},[545,1881,569],{"class":551},[545,1883,820],{"class":591},[545,1885,1293],{"class":551},[545,1887,1888,1891,1893,1895,1897,1899],{"class":547,"line":609},[545,1889,1890],{"class":551},"  :",[545,1892,529],{"class":559},[545,1894,566],{"class":551},[545,1896,569],{"class":551},[545,1898,832],{"class":591},[545,1900,1293],{"class":551},[545,1902,1903],{"class":547,"line":630},[545,1904,1905],{"class":559},"  show-indicators\n",[545,1907,1908,1911,1913,1915,1918],{"class":547,"line":637},[545,1909,1910],{"class":559},"  class",[545,1912,566],{"class":551},[545,1914,569],{"class":551},[545,1916,1917],{"class":572},"rounded-2xl",[545,1919,1293],{"class":551},[545,1921,1922,1924,1926,1928,1930],{"class":547,"line":661},[545,1923,1890],{"class":551},[545,1925,1860],{"class":559},[545,1927,566],{"class":551},[545,1929,569],{"class":551},[545,1931,1932],{"class":551},"{\n",[545,1934,1935,1938,1940,1942,1944,1946],{"class":547,"line":674},[545,1936,1937],{"class":555},"    item",[545,1939,683],{"class":551},[545,1941,601],{"class":551},[545,1943,1917],{"class":572},[545,1945,691],{"class":551},[545,1947,1948],{"class":551},",\n",[545,1950,1951,1954,1956,1958,1961,1963],{"class":547,"line":712},[545,1952,1953],{"class":555},"    indicators",[545,1955,683],{"class":551},[545,1957,601],{"class":551},[545,1959,1960],{"class":572},"bottom-4",[545,1962,691],{"class":551},[545,1964,1948],{"class":551},[545,1966,1967,1970,1972,1974,1977,1979],{"class":547,"line":743},[545,1968,1969],{"class":555},"    indicator",[545,1971,683],{"class":551},[545,1973,601],{"class":551},[545,1975,1976],{"class":572},"bg-neutral-400",[545,1978,691],{"class":551},[545,1980,1948],{"class":551},[545,1982,1983,1986,1988,1990,1993,1995],{"class":547,"line":774},[545,1984,1985],{"class":555},"    indicatorActive",[545,1987,683],{"class":551},[545,1989,601],{"class":551},[545,1991,1992],{"class":572},"bg-error-500",[545,1994,691],{"class":551},[545,1996,1948],{"class":551},[545,1998,1999,2002],{"class":547,"line":780},[545,2000,2001],{"class":551},"  }",[545,2003,1293],{"class":551},[545,2005,2006],{"class":547,"line":790},[545,2007,578],{"class":551},[545,2009,2010],{"class":547,"line":795},[545,2011,1818],{"class":591},[545,2013,2014],{"class":547,"line":805},[545,2015,2016],{"class":591},"    \u003Cview class=\"h-48 p-6 bg-neutral-100\">\n",[545,2018,2019],{"class":547,"line":842},[545,2020,1828],{"class":591},[545,2022,2023],{"class":547,"line":877},[545,2024,1833],{"class":591},[545,2026,2027],{"class":547,"line":900},[545,2028,1838],{"class":591},[545,2030,2031,2033,2035],{"class":547,"line":932},[545,2032,783],{"class":551},[545,2034,476],{"class":555},[545,2036,578],{"class":551},[466,2038,2040],{"id":2039},"features-and-behavior","Features and behavior",[2042,2043,2044,2050,2061,2064,2070,2075],"ul",{},[2045,2046,2047,2049],"li",{},[474,2048,525],{}," controls the zero-based active index; it updates after a completed swipe or autoplay step, and changing it programmatically animates the track to the new slide.",[2045,2051,2052,2053,2056,2057,2060],{},"Release snaps to the nearest page: a drag past ",[474,2054,2055],{},"0.3"," of the slide width advances, and a flick of at least ",[474,2058,2059],{},"300px\u002Fs"," advances one slide from where the drag started, even on a short drag.",[2045,2062,2063],{},"Non-looping swipers clamp at the first and last slide. Looping swipers clone the slide set on both sides of the track so seam crossings are continuous; in loop mode a programmatic index change takes the shortest path, including over the seam.",[2045,2065,2066,2069],{},[474,2067,2068],{},"axisLock"," classifies the gesture once it moves ~8px: within 45° of horizontal the swiper consumes it, otherwise the drag is released to the surrounding scroll surface. Use it whenever a swiper sits inside a vertical scroller.",[2045,2071,2072,2074],{},[474,2073,1032],{}," sets the slide and snap width. When omitted, the measured wrapper width follows layout changes such as device rotation.",[2045,2076,2077,2079],{},[474,2078,1754],{}," renders the dot strip as a fixed overlay outside the moving track.",[2081,2082,2083],"warning",{},[471,2084,2085,2088],{},[474,2086,2087],{},"direction=\"vertical\""," only moves the indicator strip to a vertical layout. Slides, track movement, and gesture recognition remain horizontal.",[466,2090,2092],{"id":2091},"api","API",[471,2094,2095],{},"These tables are generated directly from the component source.",[1042,2097,2099],{"id":2098},"props","Props",[2101,2102],"component-props",{"name":267},[1042,2104,2106],{"id":2105},"emits","Emits",[2108,2109],"component-emits",{"name":267},[471,2111,2112,2113,2116,2117,2120,2121,2123],{},"The kit wrapper does not forward the core ",[474,2114,2115],{},"swipeStart"," \u002F ",[474,2118,2119],{},"swipeEnd"," events — use ",[474,2122,483],{}," directly when you need drag lifecycle callbacks.",[1042,2125,2127],{"id":2126},"slots","Slots",[2129,2130],"component-slots",{"name":267},[466,2132,2134,2135],{"id":2133},"built-on-vyuicore","Built on ",[474,2136,41],{},[471,2138,2139,2141,2142,484,2144,2146,2147,2150,2151,2116,2154,2157,2158,2161,2162,2165,2166,2168,2169,2172],{},[474,2140,476],{}," composes the headless ",[474,2143,483],{},[474,2145,487],{}," primitives. Use them directly for the options the kit wrapper does not expose: item spacing (",[474,2148,2149],{},"spaceBetween","), viewport alignment (",[474,2152,2153],{},"align",[474,2155,2156],{},"containerWidth","), RTL, offset clamping (",[474,2159,2160],{},"offsetLimit","), custom snap thresholds and duration, ",[474,2163,2164],{},"disabled",", and the drag lifecycle emits. ",[474,2167,483],{}," also exposes a ",[474,2170,2171],{},"setIndex(index)"," method (via template ref) that wraps or clamps and animates to a slide.",[536,2174,2176],{"className":538,"code":2175,"language":540,"meta":541,"style":541},"\u003CSwiperRoot v-model=\"current\" :item-width=\"300\" :item-count=\"3\" :space-between=\"12\">\n  \u003CSwiperItem>...\u003C\u002FSwiperItem>\n  \u003CSwiperItem>...\u003C\u002FSwiperItem>\n  \u003CSwiperItem>...\u003C\u002FSwiperItem>\n  \u003Ctemplate #overlay>\n    \u003C!-- fixed content that must not move with the track -->\n  \u003C\u002Ftemplate>\n\u003C\u002FSwiperRoot>\n",[474,2177,2178,2238,2243,2247,2251,2256,2261,2265],{"__ignoreMap":541},[545,2179,2180,2182,2184,2186,2188,2190,2192,2194,2196,2199,2201,2203,2206,2208,2210,2213,2215,2217,2220,2222,2224,2227,2229,2231,2234,2236],{"class":547,"line":548},[545,2181,552],{"class":551},[545,2183,483],{"class":555},[545,2185,813],{"class":559},[545,2187,566],{"class":551},[545,2189,569],{"class":551},[545,2191,820],{"class":591},[545,2193,569],{"class":551},[545,2195,1787],{"class":551},[545,2197,2198],{"class":559},"item-width",[545,2200,566],{"class":551},[545,2202,569],{"class":551},[545,2204,2205],{"class":654},"300",[545,2207,569],{"class":551},[545,2209,1787],{"class":551},[545,2211,2212],{"class":559},"item-count",[545,2214,566],{"class":551},[545,2216,569],{"class":551},[545,2218,2219],{"class":654},"3",[545,2221,569],{"class":551},[545,2223,1787],{"class":551},[545,2225,2226],{"class":559},"space-between",[545,2228,566],{"class":551},[545,2230,569],{"class":551},[545,2232,2233],{"class":654},"12",[545,2235,569],{"class":551},[545,2237,578],{"class":551},[545,2239,2240],{"class":547,"line":581},[545,2241,2242],{"class":591},"  \u003CSwiperItem>...\u003C\u002FSwiperItem>\n",[545,2244,2245],{"class":547,"line":609},[545,2246,2242],{"class":591},[545,2248,2249],{"class":547,"line":630},[545,2250,2242],{"class":591},[545,2252,2253],{"class":547,"line":637},[545,2254,2255],{"class":591},"  \u003Ctemplate #overlay>\n",[545,2257,2258],{"class":547,"line":661},[545,2259,2260],{"class":591},"    \u003C!-- fixed content that must not move with the track -->\n",[545,2262,2263],{"class":547,"line":674},[545,2264,1838],{"class":591},[545,2266,2267,2269,2271],{"class":547,"line":712},[545,2268,783],{"class":551},[545,2270,483],{"class":555},[545,2272,578],{"class":551},[2274,2275,2277,2279],"h4",{"id":2276},"swiperroot-props",[474,2278,483],{}," props",[2101,2281],{"name":483},[2274,2283,2285,2287],{"id":2284},"swiperroot-emits",[474,2286,483],{}," emits",[2108,2289],{"name":483},[2274,2291,2293,2279],{"id":2292},"swiperitem-props",[474,2294,487],{},[2101,2296],{"name":487},[466,2298,2300],{"id":2299},"styling-and-theming","Styling and theming",[471,2302,2303,2304,2307,2308,2310],{},"Override globally through ",[474,2305,2306],{},"appConfig.ui.swiper"," or locally with ",[474,2309,1860],{},".",[2312,2313,2314,2327],"table",{},[2315,2316,2317],"thead",{},[2318,2319,2320,2324],"tr",{},[2321,2322,2323],"th",{},"UI slot",[2321,2325,2326],{},"Purpose",[2328,2329,2330,2341,2352,2361,2371],"tbody",{},[2318,2331,2332,2338],{},[2333,2334,2335],"td",{},[474,2336,2337],{},"root",[2333,2339,2340],{},"Relative, full-width clipping wrapper.",[2318,2342,2343,2347],{},[2333,2344,2345],{},[474,2346,533],{},[2333,2348,2349,2350,2310],{},"Classes applied to each generated ",[474,2351,487],{},[2318,2353,2354,2358],{},[2333,2355,2356],{},[474,2357,1747],{},[2333,2359,2360],{},"Fixed indicator strip positioned over the viewport.",[2318,2362,2363,2368],{},[2333,2364,2365],{},[474,2366,2367],{},"indicator",[2333,2369,2370],{},"Inactive indicator dot.",[2318,2372,2373,2378],{},[2333,2374,2375],{},[474,2376,2377],{},"indicatorActive",[2333,2379,2380],{},"Additional class applied to the active dot.",[471,2382,2383,2384,2387,2388,2390,2391,2116,2394,2116,2397,2399,2400,484,2403,2310],{},"The ",[474,2385,2386],{},"direction"," variant positions the indicator strip horizontally at the bottom or vertically at the right. The ",[474,2389,1762],{}," variant (",[474,2392,2393],{},"sm",[474,2395,2396],{},"md",[474,2398,1807],{},") controls dot diameter and spacing. Defaults are ",[474,2401,2402],{},"horizontal",[474,2404,2396],{},[466,2406,328],{"id":2407},"accessibility",[2042,2409,2410,2413],{},[2045,2411,2412],{},"The swiper does not add carousel, group, or live-region semantics, and the indicator dots are visual elements, not controls. There is no keyboard navigation — provide separate accessible controls when users must be able to move directly between slides, and avoid placing essential information only in an automatically advancing slide.",[2045,2414,2415],{},"Loop mode renders cloned copies of the slide slot that are not hidden from the accessibility tree. Test looped carousels with VoiceOver and TalkBack before using them for interactive content.",[466,2417,2419],{"id":2418},"platform-notes","Platform notes",[2042,2421,2422,2425,2428,2435],{},[2045,2423,2424],{},"Drag tracking, velocity sampling, snapping, looping, and autoplay all run in Lynx main-thread worklets, so slides track the finger without a background-thread round trip.",[2045,2426,2427],{},"Touch and mouse are both wired: on-device swipes use touch events, while desktop browsers (Lynx web) drive the same worklets from mouse events — the live preview above works with a mouse. There is no keyboard support.",[2045,2429,2430,2431,2434],{},"The wrapper listens for Lynx ",[474,2432,2433],{},"layoutchange"," to update full-width slides after its container resizes.",[2045,2436,2437],{},"Avoid changing slide identity or count during a gesture, especially in loop mode where the slot is cloned.",[466,2439,2441],{"id":2440},"related-components","Related components",[2042,2443,2444,2452,2459],{},[2045,2445,2446,2451],{},[510,2447,2448],{"href":263},[474,2449,2450],{},"SwipeAction"," for revealing row actions with a horizontal gesture.",[2045,2453,2454,2458],{},[510,2455,2456],{"href":132},[474,2457,131],{}," — the headless pan-gesture primitive family behind vyui's drag surfaces.",[2045,2460,2461,2463],{},[474,2462,277],{}," for persistent, directly selectable peer views.",[2465,2466,2467],"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 pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":541,"searchDepth":548,"depth":581,"links":2469},[2470,2471,2477,2478,2483,2485,2486,2487,2488],{"id":468,"depth":581,"text":469},{"id":518,"depth":581,"text":519,"children":2472},[2473,2474,2475,2476],{"id":1044,"depth":609,"text":1045},{"id":1459,"depth":609,"text":1460},{"id":1747,"depth":609,"text":1748},{"id":1849,"depth":609,"text":1850},{"id":2039,"depth":581,"text":2040},{"id":2091,"depth":581,"text":2092,"children":2479},[2480,2481,2482],{"id":2098,"depth":609,"text":2099},{"id":2105,"depth":609,"text":2106},{"id":2126,"depth":609,"text":2127},{"id":2133,"depth":581,"text":2484},"Built on @vyui\u002Fcore",{"id":2299,"depth":581,"text":2300},{"id":2407,"depth":581,"text":328},{"id":2418,"depth":581,"text":2419},{"id":2440,"depth":581,"text":2441},"Present swipeable, snapping content as a paged carousel.",[2491],{"label":2492,"icon":2493,"to":2494,"target":2495},"Source","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002FKealanAU\u002Fvyui\u002Fblob\u002Fmain\u002Fpackages\u002Fkit\u002Fsrc\u002Fcomponents\u002FSwiper.vue","_blank",{},{"icon":270},{"title":267,"description":2489},"yYQxupVLoMlJSz2gyvl3EJBVlTM7agOOROD-C4bmmUY",[2501,2503],{"title":262,"path":263,"stem":264,"description":2502,"icon":-1,"children":-1,"navigation":-1},"Reveal trailing row actions or commit an action with a full swipe.",{"title":272,"path":273,"stem":274,"description":2504,"icon":-1,"children":-1,"navigation":-1},"Toggle a persistent setting between on and off states.",1785060126301]