[{"data":1,"prerenderedAt":5239},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-composables-pagination":444,"-docs-theme-components-composables-pagination-surround":5234},{"gettingStarted":4,"api":71,"theme":162},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,34,40,61,66],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"to":30,"target":31,"external":32,"icon":33},"Storybook","/docs/getting-started/storybook","docs/getting-started/04.storybook","https://storybook.styleframe.dev","_blank",true,"i-simple-icons-storybook",{"title":35,"path":36,"stem":37,"to":38,"target":31,"external":32,"icon":39},"Playground","/docs/getting-started/playground","docs/getting-started/05.playground","https://play.styleframe.dev","i-simple-icons-playwright",{"title":41,"icon":42,"path":43,"stem":44,"children":45,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/06.tooling",[46,51,56],{"title":47,"path":48,"stem":49,"icon":50},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/06.tooling/01.cli","i-lucide-square-terminal",{"title":52,"path":53,"stem":54,"icon":55},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/06.tooling/02.scanner","i-lucide-view",{"title":57,"path":58,"stem":59,"icon":60},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/06.tooling/03.figma-plugin","i-simple-icons-figma",{"title":62,"path":63,"stem":64,"icon":65},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/07.comparisons","i-lucide-file-diff",{"title":67,"path":68,"stem":69,"icon":70},"Licensing","/docs/getting-started/licensing","docs/getting-started/08.licensing","i-lucide-scale",[72],{"title":73,"path":74,"stem":75,"children":76,"icon":7},"API Reference","/docs/api","docs/api/00.index",[77,80,85,90,95,100,105,110,115,120,125,130,145,150,155,160],{"title":78,"path":74,"stem":75,"icon":79},"Overview","i-lucide-book-text",{"title":81,"path":82,"stem":83,"icon":84},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":86,"path":87,"stem":88,"icon":89},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":91,"path":92,"stem":93,"icon":94},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":96,"path":97,"stem":98,"icon":99},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":101,"path":102,"stem":103,"icon":104},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":106,"path":107,"stem":108,"icon":109},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":111,"path":112,"stem":113,"icon":114},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":116,"path":117,"stem":118,"icon":119},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":121,"path":122,"stem":123,"icon":124},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":126,"path":127,"stem":128,"icon":129},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":131,"path":132,"stem":133,"children":134,"icon":144},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[135,136,140],{"title":78,"path":132,"stem":133},{"title":137,"path":138,"stem":139},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":141,"path":142,"stem":143},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":146,"path":147,"stem":148,"icon":149},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":151,"path":152,"stem":153,"icon":154},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":156,"path":157,"stem":158,"icon":159},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":151,"path":152,"stem":161,"icon":154},"docs/api/14.imports",[163,236,326,399],{"title":164,"path":165,"stem":166,"children":167,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[168,169,174],{"title":78,"path":165,"stem":166,"icon":79},{"title":170,"path":171,"stem":172,"icon":173},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":146,"icon":149,"defaultOpen":7,"path":175,"stem":176,"children":177,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[178,182,186,190,194,198,202,206,220,224,228,232],{"title":179,"path":180,"stem":181,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":183,"path":184,"stem":185,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":187,"path":188,"stem":189,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":191,"path":192,"stem":193,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":195,"path":196,"stem":197,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":199,"path":200,"stem":201,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":203,"path":204,"stem":205,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":207,"path":208,"stem":209,"children":210,"icon":7,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[211,212,216],{"title":78,"path":208,"stem":209},{"title":213,"path":214,"stem":215},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":217,"path":218,"stem":219},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",{"title":221,"path":222,"stem":223,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":225,"path":226,"stem":227,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":229,"path":230,"stem":231,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":233,"path":234,"stem":235,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":237,"path":238,"stem":239,"children":240,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[241,242],{"title":78,"path":238,"stem":239,"icon":79},{"title":146,"icon":149,"defaultOpen":32,"path":243,"stem":244,"children":245,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[246,250,254,258,262,266,270,274,278,282,286,290,294,298,302,306,310,314,318,322],{"title":247,"path":248,"stem":249},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":251,"path":252,"stem":253},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":255,"path":256,"stem":257},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":259,"path":260,"stem":261},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":263,"path":264,"stem":265},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":267,"path":268,"stem":269},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":271,"path":272,"stem":273},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":275,"path":276,"stem":277},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":279,"path":280,"stem":281},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":283,"path":284,"stem":285},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":287,"path":288,"stem":289},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":291,"path":292,"stem":293},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":295,"path":296,"stem":297},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":299,"path":300,"stem":301},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":303,"path":304,"stem":305},"Dropdown","/docs/theme/components/composables/dropdown","docs/theme/components/02.composables/14.dropdown",{"title":307,"path":308,"stem":309},"Hamburger Menu","/docs/theme/components/composables/hamburger-menu","docs/theme/components/02.composables/14.hamburger-menu",{"title":311,"path":312,"stem":313},"Breadcrumb","/docs/theme/components/composables/breadcrumb","docs/theme/components/02.composables/15.breadcrumb",{"title":315,"path":316,"stem":317},"Media","/docs/theme/components/composables/media","docs/theme/components/02.composables/15.media",{"title":319,"path":320,"stem":321},"PageHero","/docs/theme/components/composables/page-hero","docs/theme/components/02.composables/15.page-hero",{"title":323,"path":324,"stem":325},"Pagination","/docs/theme/components/composables/pagination","docs/theme/components/02.composables/15.pagination",{"title":116,"path":327,"stem":328,"children":329,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[330,331,334],{"title":78,"path":327,"stem":328,"icon":79},{"title":170,"path":332,"stem":333,"icon":173},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":146,"icon":149,"defaultOpen":7,"path":335,"stem":336,"children":337,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[338,342,346,350,353,357,361,365,369,373,377,380,384,388,392,396],{"title":339,"path":340,"stem":341,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":343,"path":344,"stem":345,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":347,"path":348,"stem":349,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":183,"path":351,"stem":352,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":354,"path":355,"stem":356,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":358,"path":359,"stem":360,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":362,"path":363,"stem":364,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":366,"path":367,"stem":368,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":370,"path":371,"stem":372,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":374,"path":375,"stem":376,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":225,"path":378,"stem":379,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":381,"path":382,"stem":383,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":385,"path":386,"stem":387,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":389,"path":390,"stem":391,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":393,"path":394,"stem":395,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":229,"path":397,"stem":398,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":400,"path":401,"stem":402,"children":403,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[404,405,408],{"title":78,"path":401,"stem":402,"icon":79},{"title":170,"path":406,"stem":407,"icon":173},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":146,"icon":149,"defaultOpen":7,"path":409,"stem":410,"children":411,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[412,416,420,424,428,432,436,440],{"title":413,"path":414,"stem":415,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":417,"path":418,"stem":419,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":421,"path":422,"stem":423,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":425,"path":426,"stem":427,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":429,"path":430,"stem":431,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":433,"path":434,"stem":435,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":437,"path":438,"stem":439,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":441,"path":442,"stem":443,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":445,"title":323,"body":446,"description":5228,"extension":995,"links":5229,"meta":5230,"navigation":32,"path":324,"seo":5231,"sitemap":5232,"stem":325,"__hash__":5233},"docs_theme/docs/theme/components/02.composables/15.pagination.md",{"type":447,"value":448,"toc":5197},"minimark",[449,453,483,490,494,497,537,541,3136,3139,3142,3145,3148,3151,3161,3166,3169,3174,3178,3245,3255,3259,3267,3270,3273,3276,3279,3282,3285,3288,3291,3294,3297,3303,3306,3309,3312,3315,3318,3321,3324,3328,3340,3344,3432,3442,3446,3449,3519,3531,3872,3895,3898,4009,4013,4017,4020,4369,4373,4380,4549,4554,4557,4563,4569,4574,4695,4700,4751,4757,4770,4778,4782,4888,4894,4904,4910,4914,4946,4951,4955,5041,5045,5193],[450,451,78],"h2",{"id":452},"overview",[454,455,456,457,460,461,465,466,469,470,473,474,477,478,482],"p",{},"The ",[458,459,323],"strong",{}," is a navigation component used for moving between pages of a result set such as tables, search results, and content listings. It is composed of three recipe parts: ",[462,463,464],"code",{},"usePaginationRecipe()"," for the container that controls layout direction and spacing, ",[462,467,468],{},"usePaginationItemRecipe()"," for individual page-number buttons with color, variant, and interactive state options, and ",[462,471,472],{},"usePaginationEllipsisRecipe()"," for the non-interactive ",[462,475,476],{},"…"," element that collapses long page ranges. Each composable creates a fully configured ",[479,480,481],"a",{"href":132},"recipe"," with compound variants that handle the color-variant combinations automatically.",[454,484,485,486,489],{},"The Pagination recipes integrate directly with the default ",[479,487,488],{"href":171},"design tokens preset"," and generate type-safe utility classes at build time with zero runtime CSS.",[450,491,493],{"id":492},"why-use-the-pagination-recipe","Why use the Pagination recipe?",[454,495,496],{},"The Pagination recipe helps you:",[498,499,500,507,513,519,525,531],"ul",{},[501,502,503,506],"li",{},[458,504,505],{},"Ship faster with sensible defaults",": Get 2 orientations, 3 colors, 6 visual styles, and 3 sizes out of the box with three composable calls.",[501,508,509,512],{},[458,510,511],{},"Compose flexible navigation",": Three coordinated recipes (container, item, ellipsis) share the size axis, so your pagination stays internally consistent.",[501,514,515,518],{},[458,516,517],{},"Maintain consistency",": Compound variants ensure every color-variant combination follows the same design rules, including hover, focus, active, and dark mode states.",[501,520,521,524],{},[458,522,523],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[501,526,527,530],{},[458,528,529],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, variant, or size values at compile time.",[501,532,533,536],{},[458,534,535],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[450,538,540],{"id":539},"usage","Usage",[542,543,545,550,557,866,870,885,3128,3132],"steps",{"level":544},"4",[546,547,549],"h4",{"id":548},"register-the-recipes","Register the recipes",[454,551,552,553,556],{},"Add the Pagination recipes to a local Styleframe instance. The global ",[462,554,555],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[558,559,561,759],"code-tree",{"default-value":560},"src/components/pagination.styleframe.ts",[562,563,568],"pre",{"className":564,"code":565,"filename":560,"language":566,"meta":567,"style":567},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport {\n    usePaginationRecipe,\n    usePaginationItemRecipe,\n    usePaginationEllipsisRecipe,\n} from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst pagination = usePaginationRecipe(s);\nconst paginationItem = usePaginationItemRecipe(s);\nconst paginationEllipsis = usePaginationEllipsisRecipe(s);\n\nexport default s;\n","ts","",[462,569,570,606,614,623,631,639,656,662,683,688,706,723,740,745],{"__ignoreMap":567},[571,572,575,579,583,587,590,593,596,600,603],"span",{"class":573,"line":574},"line",1,[571,576,578],{"class":577},"s7zQu","import",[571,580,582],{"class":581},"sMK4o"," {",[571,584,586],{"class":585},"sTEyZ"," styleframe",[571,588,589],{"class":581}," }",[571,591,592],{"class":577}," from",[571,594,595],{"class":581}," '",[571,597,599],{"class":598},"sfazB","virtual:styleframe",[571,601,602],{"class":581},"'",[571,604,605],{"class":581},";\n",[571,607,609,611],{"class":573,"line":608},2,[571,610,578],{"class":577},[571,612,613],{"class":581}," {\n",[571,615,617,620],{"class":573,"line":616},3,[571,618,619],{"class":585},"    usePaginationRecipe",[571,621,622],{"class":581},",\n",[571,624,626,629],{"class":573,"line":625},4,[571,627,628],{"class":585},"    usePaginationItemRecipe",[571,630,622],{"class":581},[571,632,634,637],{"class":573,"line":633},5,[571,635,636],{"class":585},"    usePaginationEllipsisRecipe",[571,638,622],{"class":581},[571,640,642,645,647,649,652,654],{"class":573,"line":641},6,[571,643,644],{"class":581},"}",[571,646,592],{"class":577},[571,648,595],{"class":581},[571,650,651],{"class":598},"@styleframe/theme",[571,653,602],{"class":581},[571,655,605],{"class":581},[571,657,659],{"class":573,"line":658},7,[571,660,661],{"emptyLinePlaceholder":32},"\n",[571,663,665,669,672,675,678,681],{"class":573,"line":664},8,[571,666,668],{"class":667},"spNyl","const",[571,670,671],{"class":585}," s ",[571,673,674],{"class":581},"=",[571,676,586],{"class":677},"s2Zo4",[571,679,680],{"class":585},"()",[571,682,605],{"class":581},[571,684,686],{"class":573,"line":685},9,[571,687,661],{"emptyLinePlaceholder":32},[571,689,691,693,696,698,701,704],{"class":573,"line":690},10,[571,692,668],{"class":667},[571,694,695],{"class":585}," pagination ",[571,697,674],{"class":581},[571,699,700],{"class":677}," usePaginationRecipe",[571,702,703],{"class":585},"(s)",[571,705,605],{"class":581},[571,707,709,711,714,716,719,721],{"class":573,"line":708},11,[571,710,668],{"class":667},[571,712,713],{"class":585}," paginationItem ",[571,715,674],{"class":581},[571,717,718],{"class":677}," usePaginationItemRecipe",[571,720,703],{"class":585},[571,722,605],{"class":581},[571,724,726,728,731,733,736,738],{"class":573,"line":725},12,[571,727,668],{"class":667},[571,729,730],{"class":585}," paginationEllipsis ",[571,732,674],{"class":581},[571,734,735],{"class":677}," usePaginationEllipsisRecipe",[571,737,703],{"class":585},[571,739,605],{"class":581},[571,741,743],{"class":573,"line":742},13,[571,744,661],{"emptyLinePlaceholder":32},[571,746,748,751,754,757],{"class":573,"line":747},14,[571,749,750],{"class":577},"export",[571,752,753],{"class":577}," default",[571,755,756],{"class":585}," s",[571,758,605],{"class":581},[562,760,762],{"className":564,"code":761,"filename":555,"language":566,"meta":567,"style":567},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe/theme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[462,763,764,785,812,816,830,834,843,852,856],{"__ignoreMap":567},[571,765,766,768,770,772,774,776,778,781,783],{"class":573,"line":574},[571,767,578],{"class":577},[571,769,582],{"class":581},[571,771,586],{"class":585},[571,773,589],{"class":581},[571,775,592],{"class":577},[571,777,595],{"class":581},[571,779,780],{"class":598},"styleframe",[571,782,602],{"class":581},[571,784,605],{"class":581},[571,786,787,789,791,794,797,800,802,804,806,808,810],{"class":573,"line":608},[571,788,578],{"class":577},[571,790,582],{"class":581},[571,792,793],{"class":585}," useDesignTokensPreset",[571,795,796],{"class":581},",",[571,798,799],{"class":585}," useUtilitiesPreset",[571,801,589],{"class":581},[571,803,592],{"class":577},[571,805,595],{"class":581},[571,807,651],{"class":598},[571,809,602],{"class":581},[571,811,605],{"class":581},[571,813,814],{"class":573,"line":616},[571,815,661],{"emptyLinePlaceholder":32},[571,817,818,820,822,824,826,828],{"class":573,"line":625},[571,819,668],{"class":667},[571,821,671],{"class":585},[571,823,674],{"class":581},[571,825,586],{"class":677},[571,827,680],{"class":585},[571,829,605],{"class":581},[571,831,832],{"class":573,"line":633},[571,833,661],{"emptyLinePlaceholder":32},[571,835,836,839,841],{"class":573,"line":641},[571,837,838],{"class":677},"useDesignTokensPreset",[571,840,703],{"class":585},[571,842,605],{"class":581},[571,844,845,848,850],{"class":573,"line":658},[571,846,847],{"class":677},"useUtilitiesPreset",[571,849,703],{"class":585},[571,851,605],{"class":581},[571,853,854],{"class":573,"line":664},[571,855,661],{"emptyLinePlaceholder":32},[571,857,858,860,862,864],{"class":573,"line":685},[571,859,750],{"class":577},[571,861,753],{"class":577},[571,863,756],{"class":585},[571,865,605],{"class":581},[546,867,869],{"id":868},"build-the-component","Build the component",[454,871,872,873,876,877,880,881,884],{},"Import the ",[462,874,875],{},"pagination",", ",[462,878,879],{},"paginationItem",", and ",[462,882,883],{},"paginationEllipsis"," runtime functions from the virtual module and pass variant props to compute class names:",[886,887,888,1990],"tabs",{},[889,890,893],"tabs-item",{"icon":891,"label":892},"i-devicon-react","React",[562,894,897],{"className":564,"code":895,"filename":896,"language":566,"meta":567,"style":567},"import { pagination, paginationItem, paginationEllipsis } from \"virtual:styleframe\";\n\ninterface PaginationProps {\n    orientation?: \"horizontal\" | \"vertical\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    children?: React.ReactNode;\n}\n\ninterface PaginationItemProps {\n    color?: \"light\" | \"dark\" | \"neutral\";\n    variant?: \"solid\" | \"outline\" | \"soft\" | \"subtle\" | \"ghost\" | \"link\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    active?: boolean;\n    disabled?: boolean;\n    href?: string;\n    \"aria-label\"?: string;\n    children?: React.ReactNode;\n}\n\nexport function Pagination({\n    orientation = \"horizontal\",\n    size = \"md\",\n    children,\n}: PaginationProps) {\n    return (\n        \u003Cnav\n            className={pagination({ orientation, size })}\n            role=\"navigation\"\n            aria-label=\"Pagination\"\n        >\n            {children}\n        \u003C/nav>\n    );\n}\n\nexport function PaginationItem({\n    color = \"neutral\",\n    variant = \"ghost\",\n    size = \"md\",\n    active = false,\n    disabled = false,\n    href,\n    children,\n    ...rest\n}: PaginationItemProps) {\n    const classes = paginationItem({\n        color,\n        variant,\n        size,\n        active: active ? \"true\" : \"false\",\n        disabled: disabled ? \"true\" : \"false\",\n    });\n    const Tag = href ? \"a\" : \"button\";\n    return (\n        \u003CTag\n            className={classes}\n            href={href && !disabled ? href : undefined}\n            disabled={!href && disabled ? true : undefined}\n            aria-current={active ? \"page\" : undefined}\n            aria-disabled={disabled || undefined}\n            {...rest}\n        >\n            {children}\n        \u003C/Tag>\n    );\n}\n\nexport function PaginationEllipsis({ size = \"md\" }: { size?: \"sm\" | \"md\" | \"lg\" }) {\n    return (\n        \u003Cspan className={paginationEllipsis({ size })} aria-hidden=\"true\">\n            …\n        \u003C/span>\n    );\n}\n","src/components/Pagination.tsx",[462,898,899,932,936,947,975,1009,1027,1032,1036,1045,1079,1140,1170,1182,1193,1206,1223,1238,1243,1248,1262,1279,1294,1301,1314,1323,1332,1357,1373,1393,1399,1410,1422,1430,1435,1440,1452,1467,1482,1497,1510,1521,1528,1535,1544,1555,1574,1582,1590,1598,1632,1661,1671,1703,1710,1718,1730,1746,1761,1787,1807,1818,1823,1832,1842,1849,1854,1859,1917,1924,1963,1969,1978,1985],{"__ignoreMap":567},[571,900,901,903,905,908,910,913,915,918,920,922,925,927,930],{"class":573,"line":574},[571,902,578],{"class":577},[571,904,582],{"class":581},[571,906,907],{"class":585}," pagination",[571,909,796],{"class":581},[571,911,912],{"class":585}," paginationItem",[571,914,796],{"class":581},[571,916,917],{"class":585}," paginationEllipsis",[571,919,589],{"class":581},[571,921,592],{"class":577},[571,923,924],{"class":581}," \"",[571,926,599],{"class":598},[571,928,929],{"class":581},"\"",[571,931,605],{"class":581},[571,933,934],{"class":573,"line":608},[571,935,661],{"emptyLinePlaceholder":32},[571,937,938,941,945],{"class":573,"line":616},[571,939,940],{"class":667},"interface",[571,942,944],{"class":943},"sBMFI"," PaginationProps",[571,946,613],{"class":581},[571,948,949,953,956,958,961,963,966,968,971,973],{"class":573,"line":625},[571,950,952],{"class":951},"swJcz","    orientation",[571,954,955],{"class":581},"?:",[571,957,924],{"class":581},[571,959,960],{"class":598},"horizontal",[571,962,929],{"class":581},[571,964,965],{"class":581}," |",[571,967,924],{"class":581},[571,969,970],{"class":598},"vertical",[571,972,929],{"class":581},[571,974,605],{"class":581},[571,976,977,980,982,984,987,989,991,993,996,998,1000,1002,1005,1007],{"class":573,"line":633},[571,978,979],{"class":951},"    size",[571,981,955],{"class":581},[571,983,924],{"class":581},[571,985,986],{"class":598},"sm",[571,988,929],{"class":581},[571,990,965],{"class":581},[571,992,924],{"class":581},[571,994,995],{"class":598},"md",[571,997,929],{"class":581},[571,999,965],{"class":581},[571,1001,924],{"class":581},[571,1003,1004],{"class":598},"lg",[571,1006,929],{"class":581},[571,1008,605],{"class":581},[571,1010,1011,1014,1016,1019,1022,1025],{"class":573,"line":641},[571,1012,1013],{"class":951},"    children",[571,1015,955],{"class":581},[571,1017,1018],{"class":943}," React",[571,1020,1021],{"class":581},".",[571,1023,1024],{"class":943},"ReactNode",[571,1026,605],{"class":581},[571,1028,1029],{"class":573,"line":658},[571,1030,1031],{"class":581},"}\n",[571,1033,1034],{"class":573,"line":664},[571,1035,661],{"emptyLinePlaceholder":32},[571,1037,1038,1040,1043],{"class":573,"line":685},[571,1039,940],{"class":667},[571,1041,1042],{"class":943}," PaginationItemProps",[571,1044,613],{"class":581},[571,1046,1047,1050,1052,1054,1057,1059,1061,1063,1066,1068,1070,1072,1075,1077],{"class":573,"line":690},[571,1048,1049],{"class":951},"    color",[571,1051,955],{"class":581},[571,1053,924],{"class":581},[571,1055,1056],{"class":598},"light",[571,1058,929],{"class":581},[571,1060,965],{"class":581},[571,1062,924],{"class":581},[571,1064,1065],{"class":598},"dark",[571,1067,929],{"class":581},[571,1069,965],{"class":581},[571,1071,924],{"class":581},[571,1073,1074],{"class":598},"neutral",[571,1076,929],{"class":581},[571,1078,605],{"class":581},[571,1080,1081,1084,1086,1088,1091,1093,1095,1097,1100,1102,1104,1106,1109,1111,1113,1115,1118,1120,1122,1124,1127,1129,1131,1133,1136,1138],{"class":573,"line":708},[571,1082,1083],{"class":951},"    variant",[571,1085,955],{"class":581},[571,1087,924],{"class":581},[571,1089,1090],{"class":598},"solid",[571,1092,929],{"class":581},[571,1094,965],{"class":581},[571,1096,924],{"class":581},[571,1098,1099],{"class":598},"outline",[571,1101,929],{"class":581},[571,1103,965],{"class":581},[571,1105,924],{"class":581},[571,1107,1108],{"class":598},"soft",[571,1110,929],{"class":581},[571,1112,965],{"class":581},[571,1114,924],{"class":581},[571,1116,1117],{"class":598},"subtle",[571,1119,929],{"class":581},[571,1121,965],{"class":581},[571,1123,924],{"class":581},[571,1125,1126],{"class":598},"ghost",[571,1128,929],{"class":581},[571,1130,965],{"class":581},[571,1132,924],{"class":581},[571,1134,1135],{"class":598},"link",[571,1137,929],{"class":581},[571,1139,605],{"class":581},[571,1141,1142,1144,1146,1148,1150,1152,1154,1156,1158,1160,1162,1164,1166,1168],{"class":573,"line":725},[571,1143,979],{"class":951},[571,1145,955],{"class":581},[571,1147,924],{"class":581},[571,1149,986],{"class":598},[571,1151,929],{"class":581},[571,1153,965],{"class":581},[571,1155,924],{"class":581},[571,1157,995],{"class":598},[571,1159,929],{"class":581},[571,1161,965],{"class":581},[571,1163,924],{"class":581},[571,1165,1004],{"class":598},[571,1167,929],{"class":581},[571,1169,605],{"class":581},[571,1171,1172,1175,1177,1180],{"class":573,"line":742},[571,1173,1174],{"class":951},"    active",[571,1176,955],{"class":581},[571,1178,1179],{"class":943}," boolean",[571,1181,605],{"class":581},[571,1183,1184,1187,1189,1191],{"class":573,"line":747},[571,1185,1186],{"class":951},"    disabled",[571,1188,955],{"class":581},[571,1190,1179],{"class":943},[571,1192,605],{"class":581},[571,1194,1196,1199,1201,1204],{"class":573,"line":1195},15,[571,1197,1198],{"class":951},"    href",[571,1200,955],{"class":581},[571,1202,1203],{"class":943}," string",[571,1205,605],{"class":581},[571,1207,1209,1212,1215,1217,1219,1221],{"class":573,"line":1208},16,[571,1210,1211],{"class":581},"    \"",[571,1213,1214],{"class":598},"aria-label",[571,1216,929],{"class":581},[571,1218,955],{"class":581},[571,1220,1203],{"class":943},[571,1222,605],{"class":581},[571,1224,1226,1228,1230,1232,1234,1236],{"class":573,"line":1225},17,[571,1227,1013],{"class":951},[571,1229,955],{"class":581},[571,1231,1018],{"class":943},[571,1233,1021],{"class":581},[571,1235,1024],{"class":943},[571,1237,605],{"class":581},[571,1239,1241],{"class":573,"line":1240},18,[571,1242,1031],{"class":581},[571,1244,1246],{"class":573,"line":1245},19,[571,1247,661],{"emptyLinePlaceholder":32},[571,1249,1251,1253,1256,1259],{"class":573,"line":1250},20,[571,1252,750],{"class":577},[571,1254,1255],{"class":667}," function",[571,1257,1258],{"class":677}," Pagination",[571,1260,1261],{"class":581},"({\n",[571,1263,1265,1268,1271,1273,1275,1277],{"class":573,"line":1264},21,[571,1266,952],{"class":1267},"sHdIc",[571,1269,1270],{"class":581}," =",[571,1272,924],{"class":581},[571,1274,960],{"class":598},[571,1276,929],{"class":581},[571,1278,622],{"class":581},[571,1280,1282,1284,1286,1288,1290,1292],{"class":573,"line":1281},22,[571,1283,979],{"class":1267},[571,1285,1270],{"class":581},[571,1287,924],{"class":581},[571,1289,995],{"class":598},[571,1291,929],{"class":581},[571,1293,622],{"class":581},[571,1295,1297,1299],{"class":573,"line":1296},23,[571,1298,1013],{"class":1267},[571,1300,622],{"class":581},[571,1302,1304,1307,1309,1312],{"class":573,"line":1303},24,[571,1305,1306],{"class":581},"}:",[571,1308,944],{"class":943},[571,1310,1311],{"class":581},")",[571,1313,613],{"class":581},[571,1315,1317,1320],{"class":573,"line":1316},25,[571,1318,1319],{"class":577},"    return",[571,1321,1322],{"class":951}," (\n",[571,1324,1326,1329],{"class":573,"line":1325},26,[571,1327,1328],{"class":581},"        \u003C",[571,1330,1331],{"class":1267},"nav\n",[571,1333,1335,1338,1341,1343,1346,1349,1351,1354],{"class":573,"line":1334},27,[571,1336,1337],{"class":585},"            className",[571,1339,1340],{"class":581},"={",[571,1342,875],{"class":951},[571,1344,1345],{"class":581},"({",[571,1347,1348],{"class":1267}," orientation",[571,1350,796],{"class":581},[571,1352,1353],{"class":1267}," size",[571,1355,1356],{"class":581}," })}\n",[571,1358,1360,1363,1365,1367,1370],{"class":573,"line":1359},28,[571,1361,1362],{"class":585},"            role",[571,1364,674],{"class":581},[571,1366,929],{"class":581},[571,1368,1369],{"class":598},"navigation",[571,1371,1372],{"class":581},"\"\n",[571,1374,1376,1379,1382,1385,1387,1389,1391],{"class":573,"line":1375},29,[571,1377,1378],{"class":585},"            aria",[571,1380,1381],{"class":581},"-",[571,1383,1384],{"class":585},"label",[571,1386,674],{"class":581},[571,1388,929],{"class":581},[571,1390,323],{"class":598},[571,1392,1372],{"class":581},[571,1394,1396],{"class":573,"line":1395},30,[571,1397,1398],{"class":581},"        >\n",[571,1400,1402,1405,1408],{"class":573,"line":1401},31,[571,1403,1404],{"class":581},"            {",[571,1406,1407],{"class":1267},"children",[571,1409,1031],{"class":581},[571,1411,1413,1416,1419],{"class":573,"line":1412},32,[571,1414,1415],{"class":581},"        \u003C/",[571,1417,1418],{"class":585},"nav",[571,1420,1421],{"class":581},">\n",[571,1423,1425,1428],{"class":573,"line":1424},33,[571,1426,1427],{"class":951},"    )",[571,1429,605],{"class":581},[571,1431,1433],{"class":573,"line":1432},34,[571,1434,1031],{"class":581},[571,1436,1438],{"class":573,"line":1437},35,[571,1439,661],{"emptyLinePlaceholder":32},[571,1441,1443,1445,1447,1450],{"class":573,"line":1442},36,[571,1444,750],{"class":577},[571,1446,1255],{"class":667},[571,1448,1449],{"class":677}," PaginationItem",[571,1451,1261],{"class":581},[571,1453,1455,1457,1459,1461,1463,1465],{"class":573,"line":1454},37,[571,1456,1049],{"class":1267},[571,1458,1270],{"class":581},[571,1460,924],{"class":581},[571,1462,1074],{"class":598},[571,1464,929],{"class":581},[571,1466,622],{"class":581},[571,1468,1470,1472,1474,1476,1478,1480],{"class":573,"line":1469},38,[571,1471,1083],{"class":1267},[571,1473,1270],{"class":581},[571,1475,924],{"class":581},[571,1477,1126],{"class":598},[571,1479,929],{"class":581},[571,1481,622],{"class":581},[571,1483,1485,1487,1489,1491,1493,1495],{"class":573,"line":1484},39,[571,1486,979],{"class":1267},[571,1488,1270],{"class":581},[571,1490,924],{"class":581},[571,1492,995],{"class":598},[571,1494,929],{"class":581},[571,1496,622],{"class":581},[571,1498,1500,1502,1504,1508],{"class":573,"line":1499},40,[571,1501,1174],{"class":1267},[571,1503,1270],{"class":581},[571,1505,1507],{"class":1506},"sfNiH"," false",[571,1509,622],{"class":581},[571,1511,1513,1515,1517,1519],{"class":573,"line":1512},41,[571,1514,1186],{"class":1267},[571,1516,1270],{"class":581},[571,1518,1507],{"class":1506},[571,1520,622],{"class":581},[571,1522,1524,1526],{"class":573,"line":1523},42,[571,1525,1198],{"class":1267},[571,1527,622],{"class":581},[571,1529,1531,1533],{"class":573,"line":1530},43,[571,1532,1013],{"class":1267},[571,1534,622],{"class":581},[571,1536,1538,1541],{"class":573,"line":1537},44,[571,1539,1540],{"class":581},"    ...",[571,1542,1543],{"class":1267},"rest\n",[571,1545,1547,1549,1551,1553],{"class":573,"line":1546},45,[571,1548,1306],{"class":581},[571,1550,1042],{"class":943},[571,1552,1311],{"class":581},[571,1554,613],{"class":581},[571,1556,1558,1561,1564,1566,1568,1571],{"class":573,"line":1557},46,[571,1559,1560],{"class":667},"    const",[571,1562,1563],{"class":585}," classes",[571,1565,1270],{"class":581},[571,1567,912],{"class":677},[571,1569,1570],{"class":951},"(",[571,1572,1573],{"class":581},"{\n",[571,1575,1577,1580],{"class":573,"line":1576},47,[571,1578,1579],{"class":585},"        color",[571,1581,622],{"class":581},[571,1583,1585,1588],{"class":573,"line":1584},48,[571,1586,1587],{"class":585},"        variant",[571,1589,622],{"class":581},[571,1591,1593,1596],{"class":573,"line":1592},49,[571,1594,1595],{"class":585},"        size",[571,1597,622],{"class":581},[571,1599,1601,1604,1607,1610,1613,1615,1618,1620,1623,1625,1628,1630],{"class":573,"line":1600},50,[571,1602,1603],{"class":951},"        active",[571,1605,1606],{"class":581},":",[571,1608,1609],{"class":585}," active",[571,1611,1612],{"class":581}," ?",[571,1614,924],{"class":581},[571,1616,1617],{"class":598},"true",[571,1619,929],{"class":581},[571,1621,1622],{"class":581}," :",[571,1624,924],{"class":581},[571,1626,1627],{"class":598},"false",[571,1629,929],{"class":581},[571,1631,622],{"class":581},[571,1633,1635,1638,1640,1643,1645,1647,1649,1651,1653,1655,1657,1659],{"class":573,"line":1634},51,[571,1636,1637],{"class":951},"        disabled",[571,1639,1606],{"class":581},[571,1641,1642],{"class":585}," disabled",[571,1644,1612],{"class":581},[571,1646,924],{"class":581},[571,1648,1617],{"class":598},[571,1650,929],{"class":581},[571,1652,1622],{"class":581},[571,1654,924],{"class":581},[571,1656,1627],{"class":598},[571,1658,929],{"class":581},[571,1660,622],{"class":581},[571,1662,1664,1667,1669],{"class":573,"line":1663},52,[571,1665,1666],{"class":581},"    }",[571,1668,1311],{"class":951},[571,1670,605],{"class":581},[571,1672,1674,1676,1679,1681,1684,1686,1688,1690,1692,1694,1696,1699,1701],{"class":573,"line":1673},53,[571,1675,1560],{"class":667},[571,1677,1678],{"class":585}," Tag",[571,1680,1270],{"class":581},[571,1682,1683],{"class":585}," href",[571,1685,1612],{"class":581},[571,1687,924],{"class":581},[571,1689,479],{"class":598},[571,1691,929],{"class":581},[571,1693,1622],{"class":581},[571,1695,924],{"class":581},[571,1697,1698],{"class":598},"button",[571,1700,929],{"class":581},[571,1702,605],{"class":581},[571,1704,1706,1708],{"class":573,"line":1705},54,[571,1707,1319],{"class":577},[571,1709,1322],{"class":951},[571,1711,1713,1715],{"class":573,"line":1712},55,[571,1714,1328],{"class":581},[571,1716,1717],{"class":1267},"Tag\n",[571,1719,1721,1723,1725,1728],{"class":573,"line":1720},56,[571,1722,1337],{"class":585},[571,1724,1340],{"class":581},[571,1726,1727],{"class":585},"classes",[571,1729,1031],{"class":581},[571,1731,1733,1736,1738,1741,1743],{"class":573,"line":1732},57,[571,1734,1735],{"class":585},"            href",[571,1737,1340],{"class":581},[571,1739,1740],{"class":951},"href && !disabled ? href ",[571,1742,1606],{"class":581},[571,1744,1745],{"class":581}," undefined}\n",[571,1747,1749,1752,1754,1757,1759],{"class":573,"line":1748},58,[571,1750,1751],{"class":585},"            disabled",[571,1753,1340],{"class":581},[571,1755,1756],{"class":951},"!href && disabled ? true ",[571,1758,1606],{"class":581},[571,1760,1745],{"class":581},[571,1762,1764,1766,1768,1771,1773,1776,1778,1781,1783,1785],{"class":573,"line":1763},59,[571,1765,1378],{"class":585},[571,1767,1381],{"class":581},[571,1769,1770],{"class":585},"current",[571,1772,1340],{"class":581},[571,1774,1775],{"class":951},"active ? ",[571,1777,929],{"class":581},[571,1779,1780],{"class":951},"page",[571,1782,929],{"class":581},[571,1784,1622],{"class":581},[571,1786,1745],{"class":581},[571,1788,1790,1792,1794,1797,1799,1802,1805],{"class":573,"line":1789},60,[571,1791,1378],{"class":585},[571,1793,1381],{"class":581},[571,1795,1796],{"class":585},"disabled",[571,1798,1340],{"class":581},[571,1800,1801],{"class":951},"disabled || ",[571,1803,1804],{"class":585},"undefined",[571,1806,1031],{"class":581},[571,1808,1810,1813,1816],{"class":573,"line":1809},61,[571,1811,1812],{"class":581},"            {...",[571,1814,1815],{"class":1267},"rest",[571,1817,1031],{"class":581},[571,1819,1821],{"class":573,"line":1820},62,[571,1822,1398],{"class":581},[571,1824,1826,1828,1830],{"class":573,"line":1825},63,[571,1827,1404],{"class":581},[571,1829,1407],{"class":1267},[571,1831,1031],{"class":581},[571,1833,1835,1837,1840],{"class":573,"line":1834},64,[571,1836,1415],{"class":581},[571,1838,1839],{"class":585},"Tag",[571,1841,1421],{"class":581},[571,1843,1845,1847],{"class":573,"line":1844},65,[571,1846,1427],{"class":951},[571,1848,605],{"class":581},[571,1850,1852],{"class":573,"line":1851},66,[571,1853,1031],{"class":581},[571,1855,1857],{"class":573,"line":1856},67,[571,1858,661],{"emptyLinePlaceholder":32},[571,1860,1862,1864,1866,1869,1871,1873,1875,1877,1879,1881,1884,1886,1888,1890,1892,1894,1896,1898,1900,1902,1904,1906,1908,1910,1912,1915],{"class":573,"line":1861},68,[571,1863,750],{"class":577},[571,1865,1255],{"class":667},[571,1867,1868],{"class":677}," PaginationEllipsis",[571,1870,1345],{"class":581},[571,1872,1353],{"class":1267},[571,1874,1270],{"class":581},[571,1876,924],{"class":581},[571,1878,995],{"class":598},[571,1880,929],{"class":581},[571,1882,1883],{"class":581}," }:",[571,1885,582],{"class":581},[571,1887,1353],{"class":951},[571,1889,955],{"class":581},[571,1891,924],{"class":581},[571,1893,986],{"class":598},[571,1895,929],{"class":581},[571,1897,965],{"class":581},[571,1899,924],{"class":581},[571,1901,995],{"class":598},[571,1903,929],{"class":581},[571,1905,965],{"class":581},[571,1907,924],{"class":581},[571,1909,1004],{"class":598},[571,1911,929],{"class":581},[571,1913,1914],{"class":581}," })",[571,1916,613],{"class":581},[571,1918,1920,1922],{"class":573,"line":1919},69,[571,1921,1319],{"class":577},[571,1923,1322],{"class":951},[571,1925,1927,1929,1931,1934,1936,1938,1940,1942,1945,1948,1950,1953,1955,1957,1959,1961],{"class":573,"line":1926},70,[571,1928,1328],{"class":581},[571,1930,571],{"class":585},[571,1932,1933],{"class":585}," className",[571,1935,1340],{"class":581},[571,1937,883],{"class":951},[571,1939,1345],{"class":581},[571,1941,1353],{"class":1267},[571,1943,1944],{"class":581}," })}",[571,1946,1947],{"class":585}," aria",[571,1949,1381],{"class":581},[571,1951,1952],{"class":585},"hidden",[571,1954,674],{"class":581},[571,1956,929],{"class":581},[571,1958,1617],{"class":598},[571,1960,929],{"class":581},[571,1962,1421],{"class":581},[571,1964,1966],{"class":573,"line":1965},71,[571,1967,1968],{"class":951},"            …\n",[571,1970,1972,1974,1976],{"class":573,"line":1971},72,[571,1973,1415],{"class":581},[571,1975,571],{"class":585},[571,1977,1421],{"class":581},[571,1979,1981,1983],{"class":573,"line":1980},73,[571,1982,1427],{"class":951},[571,1984,605],{"class":581},[571,1986,1988],{"class":573,"line":1987},74,[571,1989,1031],{"class":581},[889,1991,1994,2275,2941],{"icon":1992,"label":1993},"i-devicon-vuejs","Vue",[562,1995,2000],{"className":1996,"code":1997,"filename":1998,"language":1999,"meta":567,"style":567},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { pagination } from \"virtual:styleframe\";\n\nconst {\n    orientation = \"horizontal\",\n    size = \"md\",\n} = defineProps\u003C{\n    orientation?: \"horizontal\" | \"vertical\";\n    size?: \"sm\" | \"md\" | \"lg\";\n}>();\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cnav\n        :class=\"pagination({ orientation, size })\"\n        role=\"navigation\"\n        aria-label=\"Pagination\"\n    >\n        \u003Cslot />\n    \u003C/nav>\n\u003C/template>\n","src/components/Pagination.vue","vue",[462,2001,2002,2026,2046,2050,2056,2071,2086,2098,2120,2150,2159,2168,2172,2181,2188,2217,2230,2243,2248,2258,2267],{"__ignoreMap":567},[571,2003,2004,2007,2010,2013,2016,2018,2020,2022,2024],{"class":573,"line":574},[571,2005,2006],{"class":581},"\u003C",[571,2008,2009],{"class":951},"script",[571,2011,2012],{"class":667}," setup",[571,2014,2015],{"class":667}," lang",[571,2017,674],{"class":581},[571,2019,929],{"class":581},[571,2021,566],{"class":598},[571,2023,929],{"class":581},[571,2025,1421],{"class":581},[571,2027,2028,2030,2032,2034,2036,2038,2040,2042,2044],{"class":573,"line":608},[571,2029,578],{"class":577},[571,2031,582],{"class":581},[571,2033,907],{"class":585},[571,2035,589],{"class":581},[571,2037,592],{"class":577},[571,2039,924],{"class":581},[571,2041,599],{"class":598},[571,2043,929],{"class":581},[571,2045,605],{"class":581},[571,2047,2048],{"class":573,"line":616},[571,2049,661],{"emptyLinePlaceholder":32},[571,2051,2052,2054],{"class":573,"line":625},[571,2053,668],{"class":667},[571,2055,613],{"class":581},[571,2057,2058,2061,2063,2065,2067,2069],{"class":573,"line":633},[571,2059,2060],{"class":585},"    orientation ",[571,2062,674],{"class":581},[571,2064,924],{"class":581},[571,2066,960],{"class":598},[571,2068,929],{"class":581},[571,2070,622],{"class":581},[571,2072,2073,2076,2078,2080,2082,2084],{"class":573,"line":641},[571,2074,2075],{"class":585},"    size ",[571,2077,674],{"class":581},[571,2079,924],{"class":581},[571,2081,995],{"class":598},[571,2083,929],{"class":581},[571,2085,622],{"class":581},[571,2087,2088,2090,2092,2095],{"class":573,"line":658},[571,2089,644],{"class":581},[571,2091,1270],{"class":581},[571,2093,2094],{"class":677}," defineProps",[571,2096,2097],{"class":581},"\u003C{\n",[571,2099,2100,2102,2104,2106,2108,2110,2112,2114,2116,2118],{"class":573,"line":664},[571,2101,952],{"class":951},[571,2103,955],{"class":581},[571,2105,924],{"class":581},[571,2107,960],{"class":598},[571,2109,929],{"class":581},[571,2111,965],{"class":581},[571,2113,924],{"class":581},[571,2115,970],{"class":598},[571,2117,929],{"class":581},[571,2119,605],{"class":581},[571,2121,2122,2124,2126,2128,2130,2132,2134,2136,2138,2140,2142,2144,2146,2148],{"class":573,"line":685},[571,2123,979],{"class":951},[571,2125,955],{"class":581},[571,2127,924],{"class":581},[571,2129,986],{"class":598},[571,2131,929],{"class":581},[571,2133,965],{"class":581},[571,2135,924],{"class":581},[571,2137,995],{"class":598},[571,2139,929],{"class":581},[571,2141,965],{"class":581},[571,2143,924],{"class":581},[571,2145,1004],{"class":598},[571,2147,929],{"class":581},[571,2149,605],{"class":581},[571,2151,2152,2155,2157],{"class":573,"line":690},[571,2153,2154],{"class":581},"}>",[571,2156,680],{"class":585},[571,2158,605],{"class":581},[571,2160,2161,2164,2166],{"class":573,"line":708},[571,2162,2163],{"class":581},"\u003C/",[571,2165,2009],{"class":951},[571,2167,1421],{"class":581},[571,2169,2170],{"class":573,"line":725},[571,2171,661],{"emptyLinePlaceholder":32},[571,2173,2174,2176,2179],{"class":573,"line":742},[571,2175,2006],{"class":581},[571,2177,2178],{"class":951},"template",[571,2180,1421],{"class":581},[571,2182,2183,2186],{"class":573,"line":747},[571,2184,2185],{"class":581},"    \u003C",[571,2187,1331],{"class":951},[571,2189,2190,2193,2196,2198,2200,2202,2205,2208,2210,2213,2215],{"class":573,"line":1195},[571,2191,2192],{"class":581},"        :",[571,2194,2195],{"class":667},"class",[571,2197,674],{"class":581},[571,2199,929],{"class":581},[571,2201,875],{"class":677},[571,2203,2204],{"class":581},"({ ",[571,2206,2207],{"class":585},"orientation",[571,2209,876],{"class":581},[571,2211,2212],{"class":585},"size",[571,2214,1914],{"class":581},[571,2216,1372],{"class":581},[571,2218,2219,2222,2224,2226,2228],{"class":573,"line":1208},[571,2220,2221],{"class":667},"        role",[571,2223,674],{"class":581},[571,2225,929],{"class":581},[571,2227,1369],{"class":598},[571,2229,1372],{"class":581},[571,2231,2232,2235,2237,2239,2241],{"class":573,"line":1225},[571,2233,2234],{"class":667},"        aria-label",[571,2236,674],{"class":581},[571,2238,929],{"class":581},[571,2240,323],{"class":598},[571,2242,1372],{"class":581},[571,2244,2245],{"class":573,"line":1240},[571,2246,2247],{"class":581},"    >\n",[571,2249,2250,2252,2255],{"class":573,"line":1245},[571,2251,1328],{"class":581},[571,2253,2254],{"class":951},"slot",[571,2256,2257],{"class":581}," />\n",[571,2259,2260,2263,2265],{"class":573,"line":1250},[571,2261,2262],{"class":581},"    \u003C/",[571,2264,1418],{"class":951},[571,2266,1421],{"class":581},[571,2268,2269,2271,2273],{"class":573,"line":1264},[571,2270,2163],{"class":581},[571,2272,2178],{"class":951},[571,2274,1421],{"class":581},[562,2276,2279],{"className":1996,"code":2277,"filename":2278,"language":1999,"meta":567,"style":567},"\u003Cscript setup lang=\"ts\">\nimport { paginationItem } from \"virtual:styleframe\";\n\nconst {\n    color = \"neutral\",\n    variant = \"ghost\",\n    size = \"md\",\n    active = false,\n    disabled = false,\n    href,\n} = defineProps\u003C{\n    color?: \"light\" | \"dark\" | \"neutral\";\n    variant?: \"solid\" | \"outline\" | \"soft\" | \"subtle\" | \"ghost\" | \"link\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    active?: boolean;\n    disabled?: boolean;\n    href?: string;\n}>();\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Ca\n        v-if=\"href !== undefined\"\n        :class=\"paginationItem({ color, variant, size, active: active ? 'true' : 'false', disabled: disabled ? 'true' : 'false' })\"\n        :href=\"disabled ? undefined : href\"\n        :aria-current=\"active ? 'page' : undefined\"\n        :aria-disabled=\"disabled || undefined\"\n    >\n        \u003Cslot />\n    \u003C/a>\n    \u003Cbutton\n        v-else\n        type=\"button\"\n        :class=\"paginationItem({ color, variant, size, active: active ? 'true' : 'false', disabled: disabled ? 'true' : 'false' })\"\n        :disabled=\"disabled\"\n        :aria-current=\"active ? 'page' : undefined\"\n    >\n        \u003Cslot />\n    \u003C/button>\n\u003C/template>\n","src/components/PaginationItem.vue",[462,2280,2281,2301,2321,2325,2331,2346,2361,2375,2386,2397,2403,2413,2443,2497,2527,2537,2547,2557,2565,2573,2577,2585,2592,2609,2691,2710,2736,2754,2758,2766,2774,2781,2786,2799,2875,2889,2913,2917,2925,2933],{"__ignoreMap":567},[571,2282,2283,2285,2287,2289,2291,2293,2295,2297,2299],{"class":573,"line":574},[571,2284,2006],{"class":581},[571,2286,2009],{"class":951},[571,2288,2012],{"class":667},[571,2290,2015],{"class":667},[571,2292,674],{"class":581},[571,2294,929],{"class":581},[571,2296,566],{"class":598},[571,2298,929],{"class":581},[571,2300,1421],{"class":581},[571,2302,2303,2305,2307,2309,2311,2313,2315,2317,2319],{"class":573,"line":608},[571,2304,578],{"class":577},[571,2306,582],{"class":581},[571,2308,912],{"class":585},[571,2310,589],{"class":581},[571,2312,592],{"class":577},[571,2314,924],{"class":581},[571,2316,599],{"class":598},[571,2318,929],{"class":581},[571,2320,605],{"class":581},[571,2322,2323],{"class":573,"line":616},[571,2324,661],{"emptyLinePlaceholder":32},[571,2326,2327,2329],{"class":573,"line":625},[571,2328,668],{"class":667},[571,2330,613],{"class":581},[571,2332,2333,2336,2338,2340,2342,2344],{"class":573,"line":633},[571,2334,2335],{"class":585},"    color ",[571,2337,674],{"class":581},[571,2339,924],{"class":581},[571,2341,1074],{"class":598},[571,2343,929],{"class":581},[571,2345,622],{"class":581},[571,2347,2348,2351,2353,2355,2357,2359],{"class":573,"line":641},[571,2349,2350],{"class":585},"    variant ",[571,2352,674],{"class":581},[571,2354,924],{"class":581},[571,2356,1126],{"class":598},[571,2358,929],{"class":581},[571,2360,622],{"class":581},[571,2362,2363,2365,2367,2369,2371,2373],{"class":573,"line":658},[571,2364,2075],{"class":585},[571,2366,674],{"class":581},[571,2368,924],{"class":581},[571,2370,995],{"class":598},[571,2372,929],{"class":581},[571,2374,622],{"class":581},[571,2376,2377,2380,2382,2384],{"class":573,"line":664},[571,2378,2379],{"class":585},"    active ",[571,2381,674],{"class":581},[571,2383,1507],{"class":1506},[571,2385,622],{"class":581},[571,2387,2388,2391,2393,2395],{"class":573,"line":685},[571,2389,2390],{"class":585},"    disabled ",[571,2392,674],{"class":581},[571,2394,1507],{"class":1506},[571,2396,622],{"class":581},[571,2398,2399,2401],{"class":573,"line":690},[571,2400,1198],{"class":585},[571,2402,622],{"class":581},[571,2404,2405,2407,2409,2411],{"class":573,"line":708},[571,2406,644],{"class":581},[571,2408,1270],{"class":581},[571,2410,2094],{"class":677},[571,2412,2097],{"class":581},[571,2414,2415,2417,2419,2421,2423,2425,2427,2429,2431,2433,2435,2437,2439,2441],{"class":573,"line":725},[571,2416,1049],{"class":951},[571,2418,955],{"class":581},[571,2420,924],{"class":581},[571,2422,1056],{"class":598},[571,2424,929],{"class":581},[571,2426,965],{"class":581},[571,2428,924],{"class":581},[571,2430,1065],{"class":598},[571,2432,929],{"class":581},[571,2434,965],{"class":581},[571,2436,924],{"class":581},[571,2438,1074],{"class":598},[571,2440,929],{"class":581},[571,2442,605],{"class":581},[571,2444,2445,2447,2449,2451,2453,2455,2457,2459,2461,2463,2465,2467,2469,2471,2473,2475,2477,2479,2481,2483,2485,2487,2489,2491,2493,2495],{"class":573,"line":742},[571,2446,1083],{"class":951},[571,2448,955],{"class":581},[571,2450,924],{"class":581},[571,2452,1090],{"class":598},[571,2454,929],{"class":581},[571,2456,965],{"class":581},[571,2458,924],{"class":581},[571,2460,1099],{"class":598},[571,2462,929],{"class":581},[571,2464,965],{"class":581},[571,2466,924],{"class":581},[571,2468,1108],{"class":598},[571,2470,929],{"class":581},[571,2472,965],{"class":581},[571,2474,924],{"class":581},[571,2476,1117],{"class":598},[571,2478,929],{"class":581},[571,2480,965],{"class":581},[571,2482,924],{"class":581},[571,2484,1126],{"class":598},[571,2486,929],{"class":581},[571,2488,965],{"class":581},[571,2490,924],{"class":581},[571,2492,1135],{"class":598},[571,2494,929],{"class":581},[571,2496,605],{"class":581},[571,2498,2499,2501,2503,2505,2507,2509,2511,2513,2515,2517,2519,2521,2523,2525],{"class":573,"line":747},[571,2500,979],{"class":951},[571,2502,955],{"class":581},[571,2504,924],{"class":581},[571,2506,986],{"class":598},[571,2508,929],{"class":581},[571,2510,965],{"class":581},[571,2512,924],{"class":581},[571,2514,995],{"class":598},[571,2516,929],{"class":581},[571,2518,965],{"class":581},[571,2520,924],{"class":581},[571,2522,1004],{"class":598},[571,2524,929],{"class":581},[571,2526,605],{"class":581},[571,2528,2529,2531,2533,2535],{"class":573,"line":1195},[571,2530,1174],{"class":951},[571,2532,955],{"class":581},[571,2534,1179],{"class":943},[571,2536,605],{"class":581},[571,2538,2539,2541,2543,2545],{"class":573,"line":1208},[571,2540,1186],{"class":951},[571,2542,955],{"class":581},[571,2544,1179],{"class":943},[571,2546,605],{"class":581},[571,2548,2549,2551,2553,2555],{"class":573,"line":1225},[571,2550,1198],{"class":951},[571,2552,955],{"class":581},[571,2554,1203],{"class":943},[571,2556,605],{"class":581},[571,2558,2559,2561,2563],{"class":573,"line":1240},[571,2560,2154],{"class":581},[571,2562,680],{"class":585},[571,2564,605],{"class":581},[571,2566,2567,2569,2571],{"class":573,"line":1245},[571,2568,2163],{"class":581},[571,2570,2009],{"class":951},[571,2572,1421],{"class":581},[571,2574,2575],{"class":573,"line":1250},[571,2576,661],{"emptyLinePlaceholder":32},[571,2578,2579,2581,2583],{"class":573,"line":1264},[571,2580,2006],{"class":581},[571,2582,2178],{"class":951},[571,2584,1421],{"class":581},[571,2586,2587,2589],{"class":573,"line":1281},[571,2588,2185],{"class":581},[571,2590,2591],{"class":951},"a\n",[571,2593,2594,2597,2599,2601,2604,2607],{"class":573,"line":1296},[571,2595,2596],{"class":577},"        v-if",[571,2598,674],{"class":581},[571,2600,929],{"class":581},[571,2602,2603],{"class":585},"href",[571,2605,2606],{"class":581}," !== undefined",[571,2608,1372],{"class":581},[571,2610,2611,2613,2615,2617,2619,2621,2623,2626,2628,2631,2633,2635,2637,2640,2643,2645,2648,2650,2652,2654,2657,2659,2661,2663,2665,2667,2669,2671,2673,2675,2677,2679,2681,2683,2685,2687,2689],{"class":573,"line":1303},[571,2612,2192],{"class":581},[571,2614,2195],{"class":667},[571,2616,674],{"class":581},[571,2618,929],{"class":581},[571,2620,879],{"class":677},[571,2622,2204],{"class":581},[571,2624,2625],{"class":585},"color",[571,2627,876],{"class":581},[571,2629,2630],{"class":585},"variant",[571,2632,876],{"class":581},[571,2634,2212],{"class":585},[571,2636,876],{"class":581},[571,2638,2639],{"class":951},"active",[571,2641,2642],{"class":581},": ",[571,2644,2639],{"class":585},[571,2646,2647],{"class":581}," ? ",[571,2649,602],{"class":581},[571,2651,1617],{"class":598},[571,2653,602],{"class":581},[571,2655,2656],{"class":581}," : ",[571,2658,602],{"class":581},[571,2660,1627],{"class":598},[571,2662,602],{"class":581},[571,2664,876],{"class":581},[571,2666,1796],{"class":951},[571,2668,2642],{"class":581},[571,2670,1796],{"class":585},[571,2672,2647],{"class":581},[571,2674,602],{"class":581},[571,2676,1617],{"class":598},[571,2678,602],{"class":581},[571,2680,2656],{"class":581},[571,2682,602],{"class":581},[571,2684,1627],{"class":598},[571,2686,602],{"class":581},[571,2688,1914],{"class":581},[571,2690,1372],{"class":581},[571,2692,2693,2695,2697,2699,2701,2703,2706,2708],{"class":573,"line":1316},[571,2694,2192],{"class":581},[571,2696,2603],{"class":667},[571,2698,674],{"class":581},[571,2700,929],{"class":581},[571,2702,1796],{"class":585},[571,2704,2705],{"class":581}," ? undefined : ",[571,2707,2603],{"class":585},[571,2709,1372],{"class":581},[571,2711,2712,2714,2717,2719,2721,2723,2725,2727,2729,2731,2734],{"class":573,"line":1325},[571,2713,2192],{"class":581},[571,2715,2716],{"class":667},"aria-current",[571,2718,674],{"class":581},[571,2720,929],{"class":581},[571,2722,2639],{"class":585},[571,2724,2647],{"class":581},[571,2726,602],{"class":581},[571,2728,1780],{"class":598},[571,2730,602],{"class":581},[571,2732,2733],{"class":581}," : undefined",[571,2735,1372],{"class":581},[571,2737,2738,2740,2743,2745,2747,2749,2752],{"class":573,"line":1334},[571,2739,2192],{"class":581},[571,2741,2742],{"class":667},"aria-disabled",[571,2744,674],{"class":581},[571,2746,929],{"class":581},[571,2748,1796],{"class":585},[571,2750,2751],{"class":581}," || undefined",[571,2753,1372],{"class":581},[571,2755,2756],{"class":573,"line":1359},[571,2757,2247],{"class":581},[571,2759,2760,2762,2764],{"class":573,"line":1375},[571,2761,1328],{"class":581},[571,2763,2254],{"class":951},[571,2765,2257],{"class":581},[571,2767,2768,2770,2772],{"class":573,"line":1395},[571,2769,2262],{"class":581},[571,2771,479],{"class":951},[571,2773,1421],{"class":581},[571,2775,2776,2778],{"class":573,"line":1401},[571,2777,2185],{"class":581},[571,2779,2780],{"class":951},"button\n",[571,2782,2783],{"class":573,"line":1412},[571,2784,2785],{"class":577},"        v-else\n",[571,2787,2788,2791,2793,2795,2797],{"class":573,"line":1424},[571,2789,2790],{"class":667},"        type",[571,2792,674],{"class":581},[571,2794,929],{"class":581},[571,2796,1698],{"class":598},[571,2798,1372],{"class":581},[571,2800,2801,2803,2805,2807,2809,2811,2813,2815,2817,2819,2821,2823,2825,2827,2829,2831,2833,2835,2837,2839,2841,2843,2845,2847,2849,2851,2853,2855,2857,2859,2861,2863,2865,2867,2869,2871,2873],{"class":573,"line":1432},[571,2802,2192],{"class":581},[571,2804,2195],{"class":667},[571,2806,674],{"class":581},[571,2808,929],{"class":581},[571,2810,879],{"class":677},[571,2812,2204],{"class":581},[571,2814,2625],{"class":585},[571,2816,876],{"class":581},[571,2818,2630],{"class":585},[571,2820,876],{"class":581},[571,2822,2212],{"class":585},[571,2824,876],{"class":581},[571,2826,2639],{"class":951},[571,2828,2642],{"class":581},[571,2830,2639],{"class":585},[571,2832,2647],{"class":581},[571,2834,602],{"class":581},[571,2836,1617],{"class":598},[571,2838,602],{"class":581},[571,2840,2656],{"class":581},[571,2842,602],{"class":581},[571,2844,1627],{"class":598},[571,2846,602],{"class":581},[571,2848,876],{"class":581},[571,2850,1796],{"class":951},[571,2852,2642],{"class":581},[571,2854,1796],{"class":585},[571,2856,2647],{"class":581},[571,2858,602],{"class":581},[571,2860,1617],{"class":598},[571,2862,602],{"class":581},[571,2864,2656],{"class":581},[571,2866,602],{"class":581},[571,2868,1627],{"class":598},[571,2870,602],{"class":581},[571,2872,1914],{"class":581},[571,2874,1372],{"class":581},[571,2876,2877,2879,2881,2883,2885,2887],{"class":573,"line":1437},[571,2878,2192],{"class":581},[571,2880,1796],{"class":667},[571,2882,674],{"class":581},[571,2884,929],{"class":581},[571,2886,1796],{"class":585},[571,2888,1372],{"class":581},[571,2890,2891,2893,2895,2897,2899,2901,2903,2905,2907,2909,2911],{"class":573,"line":1442},[571,2892,2192],{"class":581},[571,2894,2716],{"class":667},[571,2896,674],{"class":581},[571,2898,929],{"class":581},[571,2900,2639],{"class":585},[571,2902,2647],{"class":581},[571,2904,602],{"class":581},[571,2906,1780],{"class":598},[571,2908,602],{"class":581},[571,2910,2733],{"class":581},[571,2912,1372],{"class":581},[571,2914,2915],{"class":573,"line":1454},[571,2916,2247],{"class":581},[571,2918,2919,2921,2923],{"class":573,"line":1469},[571,2920,1328],{"class":581},[571,2922,2254],{"class":951},[571,2924,2257],{"class":581},[571,2926,2927,2929,2931],{"class":573,"line":1484},[571,2928,2262],{"class":581},[571,2930,1698],{"class":951},[571,2932,1421],{"class":581},[571,2934,2935,2937,2939],{"class":573,"line":1499},[571,2936,2163],{"class":581},[571,2938,2178],{"class":951},[571,2940,1421],{"class":581},[562,2942,2945],{"className":1996,"code":2943,"filename":2944,"language":1999,"meta":567,"style":567},"\u003Cscript setup lang=\"ts\">\nimport { paginationEllipsis } from \"virtual:styleframe\";\n\nconst { size = \"md\" } = defineProps\u003C{\n    size?: \"sm\" | \"md\" | \"lg\";\n}>();\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cspan :class=\"paginationEllipsis({ size })\" aria-hidden=\"true\">…\u003C/span>\n\u003C/template>\n","src/components/PaginationEllipsis.vue",[462,2946,2947,2967,2987,2991,3016,3046,3054,3062,3066,3074,3120],{"__ignoreMap":567},[571,2948,2949,2951,2953,2955,2957,2959,2961,2963,2965],{"class":573,"line":574},[571,2950,2006],{"class":581},[571,2952,2009],{"class":951},[571,2954,2012],{"class":667},[571,2956,2015],{"class":667},[571,2958,674],{"class":581},[571,2960,929],{"class":581},[571,2962,566],{"class":598},[571,2964,929],{"class":581},[571,2966,1421],{"class":581},[571,2968,2969,2971,2973,2975,2977,2979,2981,2983,2985],{"class":573,"line":608},[571,2970,578],{"class":577},[571,2972,582],{"class":581},[571,2974,917],{"class":585},[571,2976,589],{"class":581},[571,2978,592],{"class":577},[571,2980,924],{"class":581},[571,2982,599],{"class":598},[571,2984,929],{"class":581},[571,2986,605],{"class":581},[571,2988,2989],{"class":573,"line":616},[571,2990,661],{"emptyLinePlaceholder":32},[571,2992,2993,2995,2997,3000,3002,3004,3006,3008,3010,3012,3014],{"class":573,"line":625},[571,2994,668],{"class":667},[571,2996,582],{"class":581},[571,2998,2999],{"class":585}," size ",[571,3001,674],{"class":581},[571,3003,924],{"class":581},[571,3005,995],{"class":598},[571,3007,929],{"class":581},[571,3009,589],{"class":581},[571,3011,1270],{"class":581},[571,3013,2094],{"class":677},[571,3015,2097],{"class":581},[571,3017,3018,3020,3022,3024,3026,3028,3030,3032,3034,3036,3038,3040,3042,3044],{"class":573,"line":633},[571,3019,979],{"class":951},[571,3021,955],{"class":581},[571,3023,924],{"class":581},[571,3025,986],{"class":598},[571,3027,929],{"class":581},[571,3029,965],{"class":581},[571,3031,924],{"class":581},[571,3033,995],{"class":598},[571,3035,929],{"class":581},[571,3037,965],{"class":581},[571,3039,924],{"class":581},[571,3041,1004],{"class":598},[571,3043,929],{"class":581},[571,3045,605],{"class":581},[571,3047,3048,3050,3052],{"class":573,"line":641},[571,3049,2154],{"class":581},[571,3051,680],{"class":585},[571,3053,605],{"class":581},[571,3055,3056,3058,3060],{"class":573,"line":658},[571,3057,2163],{"class":581},[571,3059,2009],{"class":951},[571,3061,1421],{"class":581},[571,3063,3064],{"class":573,"line":664},[571,3065,661],{"emptyLinePlaceholder":32},[571,3067,3068,3070,3072],{"class":573,"line":685},[571,3069,2006],{"class":581},[571,3071,2178],{"class":951},[571,3073,1421],{"class":581},[571,3075,3076,3078,3080,3082,3084,3086,3088,3090,3092,3094,3096,3098,3101,3103,3105,3107,3109,3112,3114,3116,3118],{"class":573,"line":690},[571,3077,2185],{"class":581},[571,3079,571],{"class":951},[571,3081,1622],{"class":581},[571,3083,2195],{"class":667},[571,3085,674],{"class":581},[571,3087,929],{"class":581},[571,3089,883],{"class":677},[571,3091,2204],{"class":581},[571,3093,2212],{"class":585},[571,3095,1914],{"class":581},[571,3097,929],{"class":581},[571,3099,3100],{"class":667}," aria-hidden",[571,3102,674],{"class":581},[571,3104,929],{"class":581},[571,3106,1617],{"class":598},[571,3108,929],{"class":581},[571,3110,3111],{"class":581},">",[571,3113,476],{"class":585},[571,3115,2163],{"class":581},[571,3117,571],{"class":951},[571,3119,1421],{"class":581},[571,3121,3122,3124,3126],{"class":573,"line":708},[571,3123,2163],{"class":581},[571,3125,2178],{"class":951},[571,3127,1421],{"class":581},[546,3129,3131],{"id":3130},"see-it-in-action","See it in action",[3133,3134],"story-preview",{"story":3135,":panel":1617},"theme-recipes-pagination--default",[450,3137,3138],{"id":2207},"Orientation",[454,3140,3141],{},"The Pagination container recipe supports two orientations that control the flex layout direction. Horizontal arranges items in a row (the default and most common pagination layout), while vertical stacks items in a column for sidebar-style page lists.",[3133,3143],{"story":3144,":panel":1617},"theme-recipes-pagination--horizontal",[3133,3146],{"story":3147,":panel":1617},"theme-recipes-pagination--vertical",[450,3149,195],{"id":3150},"colors",[454,3152,3153,3154,876,3156,880,3158,3160],{},"The Pagination Item recipe includes 3 color variants: ",[462,3155,1056],{},[462,3157,1065],{},[462,3159,1074],{},". These match the Container color pattern used by Card, Modal, and Tooltip — surface-spectrum colors designed for navigation chrome rather than status communication. Each color is combined with every visual style variant through compound variants, so you get consistent, predictable styling across all combinations — including hover, focus, active, and dark mode states.",[454,3162,456,3163,3165],{},[462,3164,1074],{}," color adapts automatically: it uses a light appearance in light mode and a dark appearance in dark mode, making it the safest default for general-purpose pagination.",[3133,3167],{"story":3168,":panel":1617},"theme-recipes-pagination--neutral",[3170,3171,3173],"h3",{"id":3172},"color-reference","Color Reference",[3133,3175],{"story":3176,":height":3177},"theme-recipes-pagination--all-variants","480",[3179,3180,3181,3197],"table",{},[3182,3183,3184],"thead",{},[3185,3186,3187,3191,3194],"tr",{},[3188,3189,3190],"th",{},"Color",[3188,3192,3193],{},"Token",[3188,3195,3196],{},"Use Case",[3198,3199,3200,3219,3233],"tbody",{},[3185,3201,3202,3207,3216],{},[3203,3204,3205],"td",{},[462,3206,1056],{},[3203,3208,3209,3212,3213],{},[462,3210,3211],{},"@color.white"," / ",[462,3214,3215],{},"@color.gray-*",[3203,3217,3218],{},"Light surfaces, stays light in dark mode",[3185,3220,3221,3225,3230],{},[3203,3222,3223],{},[462,3224,1065],{},[3203,3226,3227],{},[462,3228,3229],{},"@color.gray-900",[3203,3231,3232],{},"Dark surfaces, stays dark in light mode",[3185,3234,3235,3239,3242],{},[3203,3236,3237],{},[462,3238,1074],{},[3203,3240,3241],{},"Adaptive (light ↔ dark)",[3203,3243,3244],{},"Default color, adapts to the current color scheme",[3246,3247,3248,3251,3252,3254],"tip",{},[458,3249,3250],{},"Pro tip:"," Use ",[462,3253,1074],{}," as your default pagination color. It adapts automatically to the user's color scheme, so you don't need to manage light and dark variants separately.",[450,3256,3258],{"id":3257},"variants","Variants",[454,3260,3261,3262,3266],{},"Six visual style variants control how the page-number items are rendered. Each variant is combined with the selected color through ",[479,3263,3265],{"href":3264},"/docs/api/recipes#compound-variants","compound variants",", so you always get the correct background, text, and border colors for your chosen color.",[3170,3268,3269],{"id":1090},"Solid",[454,3271,3272],{},"Filled background with contrasting text. The most prominent style, ideal when pagination is the primary navigation control on the page.",[3133,3274],{"story":3275,":panel":1617},"theme-recipes-pagination--solid",[3170,3277,3278],{"id":1099},"Outline",[454,3280,3281],{},"Transparent background with colored border and text. Useful when the pagination should remain visible without dominating the layout.",[3133,3283],{"story":3284,":panel":1617},"theme-recipes-pagination--outline",[3170,3286,3287],{"id":1108},"Soft",[454,3289,3290],{},"Light tinted background with no visible border. A subtle but visible style that works well for grouped pagination in dense table headers.",[3133,3292],{"story":3293,":panel":1617},"theme-recipes-pagination--soft",[3170,3295,3296],{"id":1117},"Subtle",[454,3298,3299,3300,3302],{},"Light tinted background with a matching border. Combines the softness of ",[462,3301,1108],{}," with added visual definition from a border.",[3133,3304],{"story":3305,":panel":1617},"theme-recipes-pagination--subtle",[3170,3307,3308],{"id":1126},"Ghost",[454,3310,3311],{},"Transparent background that reveals a tinted background on hover. The default variant — ideal when pagination should appear as plain text until interaction.",[3133,3313],{"story":3314,":panel":1617},"theme-recipes-pagination--ghost",[3170,3316,3317],{"id":1135},"Link",[454,3319,3320],{},"Styled as inline text links with no background or border. On hover, the text darkens and gains an underline. Use when pagination should look like ordinary navigation links.",[3133,3322],{"story":3323,":panel":1617},"theme-recipes-pagination--link",[450,3325,3327],{"id":3326},"sizes","Sizes",[454,3329,3330,3331,3333,3334,3336,3337,3339],{},"Three size variants from ",[462,3332,986],{}," to ",[462,3335,1004],{}," control the font size, padding, and gap of the items, the ellipsis, and the container. Pass the same ",[462,3338,2212],{}," value to all three sub-recipes so heights stay aligned.",[3133,3341],{"story":3342,":height":3343},"theme-recipes-pagination--all-sizes","320",[3179,3345,3346,3362],{},[3182,3347,3348],{},[3185,3349,3350,3353,3356,3359],{},[3188,3351,3352],{},"Size",[3188,3354,3355],{},"Item Font Size",[3188,3357,3358],{},"Item Padding (V / H)",[3188,3360,3361],{},"Container Gap",[3198,3363,3364,3388,3410],{},[3185,3365,3366,3370,3375,3383],{},[3203,3367,3368],{},[462,3369,986],{},[3203,3371,3372],{},[462,3373,3374],{},"@font-size.sm",[3203,3376,3377,3212,3380],{},[462,3378,3379],{},"@0.375",[462,3381,3382],{},"@0.625",[3203,3384,3385],{},[462,3386,3387],{},"@0.25",[3185,3389,3390,3394,3398,3406],{},[3203,3391,3392],{},[462,3393,995],{},[3203,3395,3396],{},[462,3397,3374],{},[3203,3399,3400,3212,3403],{},[462,3401,3402],{},"@0.5",[462,3404,3405],{},"@0.75",[3203,3407,3408],{},[462,3409,3379],{},[3185,3411,3412,3416,3421,3428],{},[3203,3413,3414],{},[462,3415,1004],{},[3203,3417,3418],{},[462,3419,3420],{},"@font-size.md",[3203,3422,3423,3212,3425],{},[462,3424,3382],{},[462,3426,3427],{},"@0.875",[3203,3429,3430],{},[462,3431,3402],{},[3433,3434,3435,3438,3439,3441],"note",{},[458,3436,3437],{},"Good to know:"," The ",[462,3440,2212],{}," prop must be passed to each sub-recipe individually. The container controls the gap and overall scale, while each item and ellipsis manages its own padding and font size.",[450,3443,3445],{"id":3444},"anatomy","Anatomy",[454,3447,3448],{},"The Pagination recipe is composed of three independent recipes that work together to form a navigation row:",[3179,3450,3451,3464],{},[3182,3452,3453],{},[3185,3454,3455,3458,3461],{},[3188,3456,3457],{},"Part",[3188,3459,3460],{},"Recipe",[3188,3462,3463],{},"Role",[3198,3465,3466,3484,3498],{},[3185,3467,3468,3473,3477],{},[3203,3469,3470],{},[458,3471,3472],{},"Container",[3203,3474,3475],{},[462,3476,464],{},[3203,3478,3479,3480,3483],{},"Outer ",[462,3481,3482],{},"\u003Cnav>"," flex container that controls orientation and gap",[3185,3485,3486,3491,3495],{},[3203,3487,3488],{},[458,3489,3490],{},"Item",[3203,3492,3493],{},[462,3494,468],{},[3203,3496,3497],{},"Individual page-number button (also used for prev/next/first/last with icon content)",[3185,3499,3500,3505,3509],{},[3203,3501,3502],{},[458,3503,3504],{},"Ellipsis",[3203,3506,3507],{},[462,3508,472],{},[3203,3510,3511,3512,3515,3516,3518],{},"Non-interactive ",[462,3513,3514],{},"\u003Cspan>"," that renders ",[462,3517,476],{}," between page ranges",[454,3520,3521,3522,3524,3525,3527,3528,3530],{},"Each part is a standalone recipe with its own set of variants. The ",[462,3523,2625],{}," and ",[462,3526,2630],{}," props belong to the item recipe, since the container is purely structural and the ellipsis is always neutral. Pass the ",[462,3529,2212],{}," prop consistently to the container and every item / ellipsis so heights line up.",[562,3532,3536],{"className":3533,"code":3534,"language":3535,"meta":567,"style":567},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- All three parts working together -->\n\u003Cnav class=\"pagination(...)\" role=\"navigation\" aria-label=\"Pagination\">\n    \u003Cbutton class=\"paginationItem(...)\" aria-label=\"Previous page\">‹\u003C/button>\n    \u003Ca class=\"paginationItem(...)\" href=\"?page=1\">1\u003C/a>\n    \u003Ca class=\"paginationItem(...) paginationItem--active-true\" href=\"?page=2\" aria-current=\"page\">2\u003C/a>\n    \u003Ca class=\"paginationItem(...)\" href=\"?page=3\">3\u003C/a>\n    \u003Cspan class=\"paginationEllipsis(...)\" aria-hidden=\"true\">…\u003C/span>\n    \u003Ca class=\"paginationItem(...)\" href=\"?page=9\">9\u003C/a>\n    \u003Cbutton class=\"paginationItem(...)\" aria-label=\"Next page\">›\u003C/button>\n\u003C/nav>\n","html",[462,3537,3538,3544,3586,3625,3663,3713,3751,3788,3826,3864],{"__ignoreMap":567},[571,3539,3540],{"class":573,"line":574},[571,3541,3543],{"class":3542},"sHwdD","\u003C!-- All three parts working together -->\n",[571,3545,3546,3548,3550,3553,3555,3557,3560,3562,3565,3567,3569,3571,3573,3576,3578,3580,3582,3584],{"class":573,"line":608},[571,3547,2006],{"class":581},[571,3549,1418],{"class":951},[571,3551,3552],{"class":667}," class",[571,3554,674],{"class":581},[571,3556,929],{"class":581},[571,3558,3559],{"class":598},"pagination(...)",[571,3561,929],{"class":581},[571,3563,3564],{"class":667}," role",[571,3566,674],{"class":581},[571,3568,929],{"class":581},[571,3570,1369],{"class":598},[571,3572,929],{"class":581},[571,3574,3575],{"class":667}," aria-label",[571,3577,674],{"class":581},[571,3579,929],{"class":581},[571,3581,323],{"class":598},[571,3583,929],{"class":581},[571,3585,1421],{"class":581},[571,3587,3588,3590,3592,3594,3596,3598,3601,3603,3605,3607,3609,3612,3614,3616,3619,3621,3623],{"class":573,"line":616},[571,3589,2185],{"class":581},[571,3591,1698],{"class":951},[571,3593,3552],{"class":667},[571,3595,674],{"class":581},[571,3597,929],{"class":581},[571,3599,3600],{"class":598},"paginationItem(...)",[571,3602,929],{"class":581},[571,3604,3575],{"class":667},[571,3606,674],{"class":581},[571,3608,929],{"class":581},[571,3610,3611],{"class":598},"Previous page",[571,3613,929],{"class":581},[571,3615,3111],{"class":581},[571,3617,3618],{"class":585},"‹",[571,3620,2163],{"class":581},[571,3622,1698],{"class":951},[571,3624,1421],{"class":581},[571,3626,3627,3629,3631,3633,3635,3637,3639,3641,3643,3645,3647,3650,3652,3654,3657,3659,3661],{"class":573,"line":625},[571,3628,2185],{"class":581},[571,3630,479],{"class":951},[571,3632,3552],{"class":667},[571,3634,674],{"class":581},[571,3636,929],{"class":581},[571,3638,3600],{"class":598},[571,3640,929],{"class":581},[571,3642,1683],{"class":667},[571,3644,674],{"class":581},[571,3646,929],{"class":581},[571,3648,3649],{"class":598},"?page=1",[571,3651,929],{"class":581},[571,3653,3111],{"class":581},[571,3655,3656],{"class":585},"1",[571,3658,2163],{"class":581},[571,3660,479],{"class":951},[571,3662,1421],{"class":581},[571,3664,3665,3667,3669,3671,3673,3675,3678,3680,3682,3684,3686,3689,3691,3694,3696,3698,3700,3702,3704,3707,3709,3711],{"class":573,"line":633},[571,3666,2185],{"class":581},[571,3668,479],{"class":951},[571,3670,3552],{"class":667},[571,3672,674],{"class":581},[571,3674,929],{"class":581},[571,3676,3677],{"class":598},"paginationItem(...) paginationItem--active-true",[571,3679,929],{"class":581},[571,3681,1683],{"class":667},[571,3683,674],{"class":581},[571,3685,929],{"class":581},[571,3687,3688],{"class":598},"?page=2",[571,3690,929],{"class":581},[571,3692,3693],{"class":667}," aria-current",[571,3695,674],{"class":581},[571,3697,929],{"class":581},[571,3699,1780],{"class":598},[571,3701,929],{"class":581},[571,3703,3111],{"class":581},[571,3705,3706],{"class":585},"2",[571,3708,2163],{"class":581},[571,3710,479],{"class":951},[571,3712,1421],{"class":581},[571,3714,3715,3717,3719,3721,3723,3725,3727,3729,3731,3733,3735,3738,3740,3742,3745,3747,3749],{"class":573,"line":641},[571,3716,2185],{"class":581},[571,3718,479],{"class":951},[571,3720,3552],{"class":667},[571,3722,674],{"class":581},[571,3724,929],{"class":581},[571,3726,3600],{"class":598},[571,3728,929],{"class":581},[571,3730,1683],{"class":667},[571,3732,674],{"class":581},[571,3734,929],{"class":581},[571,3736,3737],{"class":598},"?page=3",[571,3739,929],{"class":581},[571,3741,3111],{"class":581},[571,3743,3744],{"class":585},"3",[571,3746,2163],{"class":581},[571,3748,479],{"class":951},[571,3750,1421],{"class":581},[571,3752,3753,3755,3757,3759,3761,3763,3766,3768,3770,3772,3774,3776,3778,3780,3782,3784,3786],{"class":573,"line":658},[571,3754,2185],{"class":581},[571,3756,571],{"class":951},[571,3758,3552],{"class":667},[571,3760,674],{"class":581},[571,3762,929],{"class":581},[571,3764,3765],{"class":598},"paginationEllipsis(...)",[571,3767,929],{"class":581},[571,3769,3100],{"class":667},[571,3771,674],{"class":581},[571,3773,929],{"class":581},[571,3775,1617],{"class":598},[571,3777,929],{"class":581},[571,3779,3111],{"class":581},[571,3781,476],{"class":585},[571,3783,2163],{"class":581},[571,3785,571],{"class":951},[571,3787,1421],{"class":581},[571,3789,3790,3792,3794,3796,3798,3800,3802,3804,3806,3808,3810,3813,3815,3817,3820,3822,3824],{"class":573,"line":664},[571,3791,2185],{"class":581},[571,3793,479],{"class":951},[571,3795,3552],{"class":667},[571,3797,674],{"class":581},[571,3799,929],{"class":581},[571,3801,3600],{"class":598},[571,3803,929],{"class":581},[571,3805,1683],{"class":667},[571,3807,674],{"class":581},[571,3809,929],{"class":581},[571,3811,3812],{"class":598},"?page=9",[571,3814,929],{"class":581},[571,3816,3111],{"class":581},[571,3818,3819],{"class":585},"9",[571,3821,2163],{"class":581},[571,3823,479],{"class":951},[571,3825,1421],{"class":581},[571,3827,3828,3830,3832,3834,3836,3838,3840,3842,3844,3846,3848,3851,3853,3855,3858,3860,3862],{"class":573,"line":685},[571,3829,2185],{"class":581},[571,3831,1698],{"class":951},[571,3833,3552],{"class":667},[571,3835,674],{"class":581},[571,3837,929],{"class":581},[571,3839,3600],{"class":598},[571,3841,929],{"class":581},[571,3843,3575],{"class":667},[571,3845,674],{"class":581},[571,3847,929],{"class":581},[571,3849,3850],{"class":598},"Next page",[571,3852,929],{"class":581},[571,3854,3111],{"class":581},[571,3856,3857],{"class":585},"›",[571,3859,2163],{"class":581},[571,3861,1698],{"class":951},[571,3863,1421],{"class":581},[571,3865,3866,3868,3870],{"class":573,"line":690},[571,3867,2163],{"class":581},[571,3869,1418],{"class":951},[571,3871,1421],{"class":581},[3246,3873,3874,3876,3877,3880,3881,876,3883,876,3885,876,3888,3891,3892,3894],{},[458,3875,3250],{}," Prev / Next / First / Last controls are not separate recipes — render them as ",[462,3878,3879],{},"\u003CPaginationItem>"," instances with an icon child (",[462,3882,3618],{},[462,3884,3857],{},[462,3886,3887],{},"«",[462,3889,3890],{},"»",") and an ",[462,3893,1214],{},". The item recipe handles their styling automatically, including the disabled state for \"previous on page 1\" and \"next on the last page\".",[450,3896,339],{"id":3897},"accessibility",[498,3899,3900,3922,3932,3961,3971,3984],{},[501,3901,3902,3908,3909,3911,3912,3915,3916,3891,3918,3921],{},[458,3903,3904,3905,3907],{},"Use a ",[462,3906,3482],{}," landmark."," The container should render as ",[462,3910,3482],{}," with ",[462,3913,3914],{},"role=\"navigation\""," (implicit on ",[462,3917,3482],{},[462,3919,3920],{},"aria-label=\"Pagination\""," so assistive technologies announce it as a distinct navigation region.",[501,3923,3924,3927,3928,3931],{},[458,3925,3926],{},"Mark the current page."," Add ",[462,3929,3930],{},"aria-current=\"page\""," to the active item. Screen readers announce \"current page\" alongside the page number.",[501,3933,3934,3937,3938,876,3940,876,3942,876,3944,3946,3947,876,3950,876,3953,3956,3957,3960],{},[458,3935,3936],{},"Label the prev/next/first/last controls."," These items typically render with icon content (",[462,3939,3618],{},[462,3941,3857],{},[462,3943,3887],{},[462,3945,3890],{},"). Add an explicit ",[462,3948,3949],{},"aria-label=\"Previous page\"",[462,3951,3952],{},"\"Next page\"",[462,3954,3955],{},"\"First page\"",", or ",[462,3958,3959],{},"\"Last page\""," so the control has an accessible name.",[501,3962,3963,3966,3967,3970],{},[458,3964,3965],{},"Hide the ellipsis from assistive tech."," The ellipsis is purely visual. Set ",[462,3968,3969],{},"aria-hidden=\"true\""," so screen readers skip it instead of announcing \"horizontal ellipsis\".",[501,3972,3973,3976,3977,3979,3980,3983],{},[458,3974,3975],{},"Disable, don't hide."," When the user is on the first page, mark the previous control with ",[462,3978,1796],{}," (button) or ",[462,3981,3982],{},"aria-disabled=\"true\""," (anchor) instead of removing it. Layout stability prevents the page numbers from shifting.",[501,3985,3986,3989,3990,3993,3994,3997,3998,3212,4001,4004,4005,4008],{},[458,3987,3988],{},"Keyboard navigation."," Items render as ",[462,3991,3992],{},"\u003Cbutton>"," or ",[462,3995,3996],{},"\u003Ca>",", which are natively focusable and activatable with ",[462,3999,4000],{},"Enter",[462,4002,4003],{},"Space",". The ",[462,4006,4007],{},":focus-visible"," ring in the recipe base styles ensures the current focus is always visible.",[450,4010,4012],{"id":4011},"customization","Customization",[3170,4014,4016],{"id":4015},"overriding-defaults","Overriding Defaults",[454,4018,4019],{},"Each pagination composable accepts an optional second argument to override any part of the recipe configuration. Overrides are deep-merged with the defaults, so you only need to specify the properties you want to change:",[562,4021,4023],{"className":564,"code":4022,"filename":560,"language":566,"meta":567,"style":567},"import { styleframe } from 'virtual:styleframe';\nimport {\n    usePaginationRecipe,\n    usePaginationItemRecipe,\n    usePaginationEllipsisRecipe,\n} from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst pagination = usePaginationRecipe(s, {\n    defaultVariants: {\n        orientation: 'horizontal',\n        size: 'lg',\n    },\n});\n\nconst paginationItem = usePaginationItemRecipe(s, {\n    base: { borderRadius: '@border-radius.full' },\n    defaultVariants: {\n        color: 'neutral',\n        variant: 'soft',\n        size: 'lg',\n        active: 'false',\n        disabled: 'false',\n    },\n});\n\nconst paginationEllipsis = usePaginationEllipsisRecipe(s, {\n    defaultVariants: { size: 'lg' },\n});\n\nexport default s;\n",[462,4024,4025,4045,4051,4057,4063,4069,4083,4087,4101,4105,4122,4131,4146,4160,4165,4173,4177,4193,4217,4225,4239,4253,4267,4281,4295,4299,4307,4311,4327,4347,4355,4359],{"__ignoreMap":567},[571,4026,4027,4029,4031,4033,4035,4037,4039,4041,4043],{"class":573,"line":574},[571,4028,578],{"class":577},[571,4030,582],{"class":581},[571,4032,586],{"class":585},[571,4034,589],{"class":581},[571,4036,592],{"class":577},[571,4038,595],{"class":581},[571,4040,599],{"class":598},[571,4042,602],{"class":581},[571,4044,605],{"class":581},[571,4046,4047,4049],{"class":573,"line":608},[571,4048,578],{"class":577},[571,4050,613],{"class":581},[571,4052,4053,4055],{"class":573,"line":616},[571,4054,619],{"class":585},[571,4056,622],{"class":581},[571,4058,4059,4061],{"class":573,"line":625},[571,4060,628],{"class":585},[571,4062,622],{"class":581},[571,4064,4065,4067],{"class":573,"line":633},[571,4066,636],{"class":585},[571,4068,622],{"class":581},[571,4070,4071,4073,4075,4077,4079,4081],{"class":573,"line":641},[571,4072,644],{"class":581},[571,4074,592],{"class":577},[571,4076,595],{"class":581},[571,4078,651],{"class":598},[571,4080,602],{"class":581},[571,4082,605],{"class":581},[571,4084,4085],{"class":573,"line":658},[571,4086,661],{"emptyLinePlaceholder":32},[571,4088,4089,4091,4093,4095,4097,4099],{"class":573,"line":664},[571,4090,668],{"class":667},[571,4092,671],{"class":585},[571,4094,674],{"class":581},[571,4096,586],{"class":677},[571,4098,680],{"class":585},[571,4100,605],{"class":581},[571,4102,4103],{"class":573,"line":685},[571,4104,661],{"emptyLinePlaceholder":32},[571,4106,4107,4109,4111,4113,4115,4118,4120],{"class":573,"line":690},[571,4108,668],{"class":667},[571,4110,695],{"class":585},[571,4112,674],{"class":581},[571,4114,700],{"class":677},[571,4116,4117],{"class":585},"(s",[571,4119,796],{"class":581},[571,4121,613],{"class":581},[571,4123,4124,4127,4129],{"class":573,"line":708},[571,4125,4126],{"class":951},"    defaultVariants",[571,4128,1606],{"class":581},[571,4130,613],{"class":581},[571,4132,4133,4136,4138,4140,4142,4144],{"class":573,"line":725},[571,4134,4135],{"class":951},"        orientation",[571,4137,1606],{"class":581},[571,4139,595],{"class":581},[571,4141,960],{"class":598},[571,4143,602],{"class":581},[571,4145,622],{"class":581},[571,4147,4148,4150,4152,4154,4156,4158],{"class":573,"line":742},[571,4149,1595],{"class":951},[571,4151,1606],{"class":581},[571,4153,595],{"class":581},[571,4155,1004],{"class":598},[571,4157,602],{"class":581},[571,4159,622],{"class":581},[571,4161,4162],{"class":573,"line":747},[571,4163,4164],{"class":581},"    },\n",[571,4166,4167,4169,4171],{"class":573,"line":1195},[571,4168,644],{"class":581},[571,4170,1311],{"class":585},[571,4172,605],{"class":581},[571,4174,4175],{"class":573,"line":1208},[571,4176,661],{"emptyLinePlaceholder":32},[571,4178,4179,4181,4183,4185,4187,4189,4191],{"class":573,"line":1225},[571,4180,668],{"class":667},[571,4182,713],{"class":585},[571,4184,674],{"class":581},[571,4186,718],{"class":677},[571,4188,4117],{"class":585},[571,4190,796],{"class":581},[571,4192,613],{"class":581},[571,4194,4195,4198,4200,4202,4205,4207,4209,4212,4214],{"class":573,"line":1240},[571,4196,4197],{"class":951},"    base",[571,4199,1606],{"class":581},[571,4201,582],{"class":581},[571,4203,4204],{"class":951}," borderRadius",[571,4206,1606],{"class":581},[571,4208,595],{"class":581},[571,4210,4211],{"class":598},"@border-radius.full",[571,4213,602],{"class":581},[571,4215,4216],{"class":581}," },\n",[571,4218,4219,4221,4223],{"class":573,"line":1245},[571,4220,4126],{"class":951},[571,4222,1606],{"class":581},[571,4224,613],{"class":581},[571,4226,4227,4229,4231,4233,4235,4237],{"class":573,"line":1250},[571,4228,1579],{"class":951},[571,4230,1606],{"class":581},[571,4232,595],{"class":581},[571,4234,1074],{"class":598},[571,4236,602],{"class":581},[571,4238,622],{"class":581},[571,4240,4241,4243,4245,4247,4249,4251],{"class":573,"line":1264},[571,4242,1587],{"class":951},[571,4244,1606],{"class":581},[571,4246,595],{"class":581},[571,4248,1108],{"class":598},[571,4250,602],{"class":581},[571,4252,622],{"class":581},[571,4254,4255,4257,4259,4261,4263,4265],{"class":573,"line":1281},[571,4256,1595],{"class":951},[571,4258,1606],{"class":581},[571,4260,595],{"class":581},[571,4262,1004],{"class":598},[571,4264,602],{"class":581},[571,4266,622],{"class":581},[571,4268,4269,4271,4273,4275,4277,4279],{"class":573,"line":1296},[571,4270,1603],{"class":951},[571,4272,1606],{"class":581},[571,4274,595],{"class":581},[571,4276,1627],{"class":598},[571,4278,602],{"class":581},[571,4280,622],{"class":581},[571,4282,4283,4285,4287,4289,4291,4293],{"class":573,"line":1303},[571,4284,1637],{"class":951},[571,4286,1606],{"class":581},[571,4288,595],{"class":581},[571,4290,1627],{"class":598},[571,4292,602],{"class":581},[571,4294,622],{"class":581},[571,4296,4297],{"class":573,"line":1316},[571,4298,4164],{"class":581},[571,4300,4301,4303,4305],{"class":573,"line":1325},[571,4302,644],{"class":581},[571,4304,1311],{"class":585},[571,4306,605],{"class":581},[571,4308,4309],{"class":573,"line":1334},[571,4310,661],{"emptyLinePlaceholder":32},[571,4312,4313,4315,4317,4319,4321,4323,4325],{"class":573,"line":1359},[571,4314,668],{"class":667},[571,4316,730],{"class":585},[571,4318,674],{"class":581},[571,4320,735],{"class":677},[571,4322,4117],{"class":585},[571,4324,796],{"class":581},[571,4326,613],{"class":581},[571,4328,4329,4331,4333,4335,4337,4339,4341,4343,4345],{"class":573,"line":1375},[571,4330,4126],{"class":951},[571,4332,1606],{"class":581},[571,4334,582],{"class":581},[571,4336,1353],{"class":951},[571,4338,1606],{"class":581},[571,4340,595],{"class":581},[571,4342,1004],{"class":598},[571,4344,602],{"class":581},[571,4346,4216],{"class":581},[571,4348,4349,4351,4353],{"class":573,"line":1395},[571,4350,644],{"class":581},[571,4352,1311],{"class":585},[571,4354,605],{"class":581},[571,4356,4357],{"class":573,"line":1401},[571,4358,661],{"emptyLinePlaceholder":32},[571,4360,4361,4363,4365,4367],{"class":573,"line":1412},[571,4362,750],{"class":577},[571,4364,753],{"class":577},[571,4366,756],{"class":585},[571,4368,605],{"class":581},[3170,4370,4372],{"id":4371},"filtering-variants","Filtering Variants",[454,4374,4375,4376,4379],{},"If you only need a subset of the available variants, use the ",[462,4377,4378],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[562,4381,4383],{"className":564,"code":4382,"filename":560,"language":566,"meta":567,"style":567},"import { styleframe } from 'virtual:styleframe';\nimport { usePaginationItemRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Only generate neutral color with ghost and solid styles\nconst paginationItem = usePaginationItemRecipe(s, {\n    filter: {\n        color: ['neutral'],\n        variant: ['ghost', 'solid'],\n    },\n});\n\nexport default s;\n",[462,4384,4385,4405,4425,4429,4443,4447,4452,4468,4477,4497,4523,4527,4535,4539],{"__ignoreMap":567},[571,4386,4387,4389,4391,4393,4395,4397,4399,4401,4403],{"class":573,"line":574},[571,4388,578],{"class":577},[571,4390,582],{"class":581},[571,4392,586],{"class":585},[571,4394,589],{"class":581},[571,4396,592],{"class":577},[571,4398,595],{"class":581},[571,4400,599],{"class":598},[571,4402,602],{"class":581},[571,4404,605],{"class":581},[571,4406,4407,4409,4411,4413,4415,4417,4419,4421,4423],{"class":573,"line":608},[571,4408,578],{"class":577},[571,4410,582],{"class":581},[571,4412,718],{"class":585},[571,4414,589],{"class":581},[571,4416,592],{"class":577},[571,4418,595],{"class":581},[571,4420,651],{"class":598},[571,4422,602],{"class":581},[571,4424,605],{"class":581},[571,4426,4427],{"class":573,"line":616},[571,4428,661],{"emptyLinePlaceholder":32},[571,4430,4431,4433,4435,4437,4439,4441],{"class":573,"line":625},[571,4432,668],{"class":667},[571,4434,671],{"class":585},[571,4436,674],{"class":581},[571,4438,586],{"class":677},[571,4440,680],{"class":585},[571,4442,605],{"class":581},[571,4444,4445],{"class":573,"line":633},[571,4446,661],{"emptyLinePlaceholder":32},[571,4448,4449],{"class":573,"line":641},[571,4450,4451],{"class":3542},"// Only generate neutral color with ghost and solid styles\n",[571,4453,4454,4456,4458,4460,4462,4464,4466],{"class":573,"line":658},[571,4455,668],{"class":667},[571,4457,713],{"class":585},[571,4459,674],{"class":581},[571,4461,718],{"class":677},[571,4463,4117],{"class":585},[571,4465,796],{"class":581},[571,4467,613],{"class":581},[571,4469,4470,4473,4475],{"class":573,"line":664},[571,4471,4472],{"class":951},"    filter",[571,4474,1606],{"class":581},[571,4476,613],{"class":581},[571,4478,4479,4481,4483,4486,4488,4490,4492,4495],{"class":573,"line":685},[571,4480,1579],{"class":951},[571,4482,1606],{"class":581},[571,4484,4485],{"class":585}," [",[571,4487,602],{"class":581},[571,4489,1074],{"class":598},[571,4491,602],{"class":581},[571,4493,4494],{"class":585},"]",[571,4496,622],{"class":581},[571,4498,4499,4501,4503,4505,4507,4509,4511,4513,4515,4517,4519,4521],{"class":573,"line":690},[571,4500,1587],{"class":951},[571,4502,1606],{"class":581},[571,4504,4485],{"class":585},[571,4506,602],{"class":581},[571,4508,1126],{"class":598},[571,4510,602],{"class":581},[571,4512,796],{"class":581},[571,4514,595],{"class":581},[571,4516,1090],{"class":598},[571,4518,602],{"class":581},[571,4520,4494],{"class":585},[571,4522,622],{"class":581},[571,4524,4525],{"class":573,"line":708},[571,4526,4164],{"class":581},[571,4528,4529,4531,4533],{"class":573,"line":725},[571,4530,644],{"class":581},[571,4532,1311],{"class":585},[571,4534,605],{"class":581},[571,4536,4537],{"class":573,"line":742},[571,4538,661],{"emptyLinePlaceholder":32},[571,4540,4541,4543,4545,4547],{"class":573,"line":747},[571,4542,750],{"class":577},[571,4544,753],{"class":577},[571,4546,756],{"class":585},[571,4548,605],{"class":581},[3433,4550,4551,4553],{},[458,4552,3437],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[450,4555,73],{"id":4556},"api-reference",[3170,4558,4560],{"id":4559},"usepaginationrecipes-options",[462,4561,4562],{},"usePaginationRecipe(s, options?)",[454,4564,4565,4566,4568],{},"Creates the pagination container recipe with ",[462,4567,3482],{},"-friendly base styles, an orientation axis, and a size axis.",[454,4570,4571],{},[458,4572,4573],{},"Parameters:",[3179,4575,4576,4589],{},[3182,4577,4578],{},[3185,4579,4580,4583,4586],{},[3188,4581,4582],{},"Parameter",[3188,4584,4585],{},"Type",[3188,4587,4588],{},"Description",[3198,4590,4591,4606,4621,4636,4650,4665,4680],{},[3185,4592,4593,4598,4603],{},[3203,4594,4595],{},[462,4596,4597],{},"s",[3203,4599,4600],{},[462,4601,4602],{},"Styleframe",[3203,4604,4605],{},"The Styleframe instance",[3185,4607,4608,4613,4618],{},[3203,4609,4610],{},[462,4611,4612],{},"options",[3203,4614,4615],{},[462,4616,4617],{},"DeepPartial\u003CRecipeConfig>",[3203,4619,4620],{},"Optional overrides for the recipe configuration",[3185,4622,4623,4628,4633],{},[3203,4624,4625],{},[462,4626,4627],{},"options.base",[3203,4629,4630],{},[462,4631,4632],{},"VariantDeclarationsBlock",[3203,4634,4635],{},"Custom base styles for the pagination container",[3185,4637,4638,4643,4647],{},[3203,4639,4640],{},[462,4641,4642],{},"options.variants",[3203,4644,4645],{},[462,4646,3258],{},[3203,4648,4649],{},"Custom variant definitions for the recipe",[3185,4651,4652,4657,4662],{},[3203,4653,4654],{},[462,4655,4656],{},"options.defaultVariants",[3203,4658,4659],{},[462,4660,4661],{},"Record\u003Ckeyof Variants, string>",[3203,4663,4664],{},"Default variant values for the recipe",[3185,4666,4667,4672,4677],{},[3203,4668,4669],{},[462,4670,4671],{},"options.compoundVariants",[3203,4673,4674],{},[462,4675,4676],{},"CompoundVariant[]",[3203,4678,4679],{},"Custom compound variant definitions for the recipe",[3185,4681,4682,4687,4692],{},[3203,4683,4684],{},[462,4685,4686],{},"options.filter",[3203,4688,4689],{},[462,4690,4691],{},"Record\u003Cstring, string[]>",[3203,4693,4694],{},"Limit which variant values are generated",[454,4696,4697],{},[458,4698,4699],{},"Variants:",[3179,4701,4702,4715],{},[3182,4703,4704],{},[3185,4705,4706,4709,4712],{},[3188,4707,4708],{},"Variant",[3188,4710,4711],{},"Options",[3188,4713,4714],{},"Default",[3198,4716,4717,4733],{},[3185,4718,4719,4723,4729],{},[3203,4720,4721],{},[462,4722,2207],{},[3203,4724,4725,876,4727],{},[462,4726,960],{},[462,4728,970],{},[3203,4730,4731],{},[462,4732,960],{},[3185,4734,4735,4739,4747],{},[3203,4736,4737],{},[462,4738,2212],{},[3203,4740,4741,876,4743,876,4745],{},[462,4742,986],{},[462,4744,995],{},[462,4746,1004],{},[3203,4748,4749],{},[462,4750,995],{},[3170,4752,4754],{"id":4753},"usepaginationitemrecipes-options",[462,4755,4756],{},"usePaginationItemRecipe(s, options?)",[454,4758,4759,4760,3993,4762,4764,4765,3524,4767,4769],{},"Creates the pagination item recipe for individual page-number buttons. Renders consistently as a ",[462,4761,3992],{},[462,4763,3996],{}," and supports the full Interactive variant set plus boolean ",[462,4766,2639],{},[462,4768,1796],{}," axes.",[454,4771,4772,4774,4775,1021],{},[458,4773,4573],{}," identical to ",[462,4776,4777],{},"usePaginationRecipe",[454,4779,4780],{},[458,4781,4699],{},[3179,4783,4784,4794],{},[3182,4785,4786],{},[3185,4787,4788,4790,4792],{},[3188,4789,4708],{},[3188,4791,4711],{},[3188,4793,4714],{},[3198,4795,4796,4814,4838,4856,4872],{},[3185,4797,4798,4802,4810],{},[3203,4799,4800],{},[462,4801,2625],{},[3203,4803,4804,876,4806,876,4808],{},[462,4805,1056],{},[462,4807,1065],{},[462,4809,1074],{},[3203,4811,4812],{},[462,4813,1074],{},[3185,4815,4816,4820,4834],{},[3203,4817,4818],{},[462,4819,2630],{},[3203,4821,4822,876,4824,876,4826,876,4828,876,4830,876,4832],{},[462,4823,1090],{},[462,4825,1099],{},[462,4827,1108],{},[462,4829,1117],{},[462,4831,1126],{},[462,4833,1135],{},[3203,4835,4836],{},[462,4837,1126],{},[3185,4839,4840,4844,4852],{},[3203,4841,4842],{},[462,4843,2212],{},[3203,4845,4846,876,4848,876,4850],{},[462,4847,986],{},[462,4849,995],{},[462,4851,1004],{},[3203,4853,4854],{},[462,4855,995],{},[3185,4857,4858,4862,4868],{},[3203,4859,4860],{},[462,4861,2639],{},[3203,4863,4864,876,4866],{},[462,4865,1617],{},[462,4867,1627],{},[3203,4869,4870],{},[462,4871,1627],{},[3185,4873,4874,4878,4884],{},[3203,4875,4876],{},[462,4877,1796],{},[3203,4879,4880,876,4882],{},[462,4881,1617],{},[462,4883,1627],{},[3203,4885,4886],{},[462,4887,1627],{},[3170,4889,4891],{"id":4890},"usepaginationellipsisrecipes-options",[462,4892,4893],{},"usePaginationEllipsisRecipe(s, options?)",[454,4895,4896,4897,4899,4900,4903],{},"Creates the pagination ellipsis recipe for the non-interactive ",[462,4898,476],{}," element. Always renders with the ",[462,4901,4902],{},"@color.text-weak"," token; only the size axis is exposed.",[454,4905,4906,4774,4908,1021],{},[458,4907,4573],{},[462,4909,4777],{},[454,4911,4912],{},[458,4913,4699],{},[3179,4915,4916,4926],{},[3182,4917,4918],{},[3185,4919,4920,4922,4924],{},[3188,4921,4708],{},[3188,4923,4711],{},[3188,4925,4714],{},[3198,4927,4928],{},[3185,4929,4930,4934,4942],{},[3203,4931,4932],{},[462,4933,2212],{},[3203,4935,4936,876,4938,876,4940],{},[462,4937,986],{},[462,4939,995],{},[462,4941,1004],{},[3203,4943,4944],{},[462,4945,995],{},[454,4947,4948],{},[479,4949,4950],{"href":132},"Learn more about recipes →",[450,4952,4954],{"id":4953},"best-practices","Best Practices",[498,4956,4957,4968,4980,4989,5009,5018,5031],{},[501,4958,4959,4964,4965,4967],{},[458,4960,4961,4962],{},"Always wrap pagination in a ",[462,4963,3482],{},": The container renders as a navigation landmark with ",[462,4966,3920],{}," so assistive tech can jump straight to it.",[501,4969,4970,4975,4976,4979],{},[458,4971,4972,4973],{},"Mark the current page with ",[462,4974,3930],{},": Set it on the item with ",[462,4977,4978],{},"active=true"," so screen readers announce the current position in the page list.",[501,4981,4982,4988],{},[458,4983,4984,4985,4987],{},"Pass ",[462,4986,2212],{}," to every sub-recipe",": The container, items, and ellipsis each manage their own dimensions. Skipping one breaks vertical alignment.",[501,4990,4991,4994,4995,4997,4998,5001,5002,5004,5005,1021],{},[458,4992,4993],{},"Style the active page distinctly",": The default ",[462,4996,2639],{}," axis only bumps font-weight to semibold. For a stronger highlight, pass ",[462,4999,5000],{},"variant=\"solid\""," to the active item while siblings stay on ",[462,5003,1126],{}," — see the ",[479,5006,5008],{"href":5007},"#","active-vs-inactive contrast example",[501,5010,5011,5014,5015,5017],{},[458,5012,5013],{},"Disable, don't hide, the edge controls",": When the user is on the first or last page, set ",[462,5016,1796],{}," on the corresponding prev/next/first/last item rather than removing it. Layout stability beats minor space savings.",[501,5019,5020,5023,5024,5026,5027,5030],{},[458,5021,5022],{},"Filter what you don't need",": Pass a ",[462,5025,4378],{}," option (e.g., ",[462,5028,5029],{},"color: ['neutral']",") to reduce generated CSS in projects that only use one color.",[501,5032,5033,5036,5037,5040],{},[458,5034,5035],{},"Override defaults at the recipe level",": If your pagination is always large and outlined, set those as ",[462,5038,5039],{},"defaultVariants"," so component consumers write less code.",[450,5042,5044],{"id":5043},"faq","FAQ",[5046,5047,5048,5057,5079,5090,5119,5140,5170],"accordion",{},[5049,5050,5053,5054,5056],"accordion-item",{"icon":5051,"label":5052},"i-lucide-circle-help","Why are there three separate recipes instead of one?","Pagination items have a fundamentally different shape from the container and the ellipsis — items are interactive buttons with hover/focus/active/disabled states, the container is a structural flex layout, and the ellipsis is a low-emphasis static element. Three separate recipes give each part its own base styles and compound variants while sharing the same ",[462,5055,2212],{}," axis, keeping each recipe focused and letting you compose only the parts you need.",[5049,5058,5060,5061,3880,5063,876,5065,876,5067,876,5069,5071,5072,5074,5075,5078],{"icon":5051,"label":5059},"How do I render Previous, Next, First, and Last controls?","There is no separate prev/next recipe — render those controls as ordinary ",[462,5062,3879],{},[462,5064,3618],{},[462,5066,3857],{},[462,5068,3887],{},[462,5070,3890],{},") and an explicit ",[462,5073,1214],{},". The item recipe handles their styling and disabled state automatically. The ",[462,5076,5077],{},"WithControls"," story demonstrates the full layout with both edge and step controls.",[5049,5080,5082,5083,876,5085,880,5087,5089],{"icon":5051,"label":5081},"Why doesn't the Pagination Item recipe include semantic colors like primary or success?","Pagination is a navigation chrome element, not a status indicator. Semantic colors (primary, success, error) communicate meaning through color, which is better suited to action-oriented elements like buttons and badges. Pagination uses ",[462,5084,1056],{},[462,5086,1065],{},[462,5088,1074],{}," to provide surface variations that work across all content types without implying a specific status.",[5049,5091,5093,5094,5096,5097,3333,5100,5103,5104,5106,5107,5109,5110,5112,5113,5115,5116,5118],{"icon":5051,"label":5092},"What's the difference between the active boolean axis and passing a different variant for the current page?","Both work. The ",[462,5095,2639],{}," axis bumps the item's ",[462,5098,5099],{},"font-weight",[462,5101,5102],{},"semibold"," — a subtle highlight that stays consistent with the rest of the row. For a stronger visual treatment, pass a different ",[462,5105,2630],{}," to the active item (for example, ",[462,5108,1090],{}," while siblings stay on ",[462,5111,1126],{},"). The two approaches compose: you can set both ",[462,5114,4978],{}," and a different ",[462,5117,2630],{}," on the same item.",[5049,5120,5122,5123,5125,5126,5129,5130,5132,5133,3911,5136,5139],{"icon":5051,"label":5121},"How do I keep the ellipsis vertically aligned with the page numbers?","Pass the same ",[462,5124,2212],{}," prop to ",[462,5127,5128],{},"\u003CPaginationEllipsis>"," as to your ",[462,5131,3879],{}," instances. The ellipsis recipe sets ",[462,5134,5135],{},"display: inline-flex",[462,5137,5138],{},"align-items: center"," and matches the items' vertical padding, so passing the same size keeps everything on the same baseline.",[5049,5141,5143,5165],{"icon":5051,"label":5142},"How do compound variants work in this recipe?",[454,5144,5145,5146,5148,5149,3524,5151,5148,5153,5155,5156,5159,5160,3524,5162,5164],{},"The Pagination Item recipe uses compound variants to map each color-variant combination to specific styles. For example, when ",[462,5147,2625],{}," is ",[462,5150,1074],{},[462,5152,2630],{},[462,5154,1126],{},", the compound variant applies ",[462,5157,5158],{},"color: @color.text"," plus hover, focus, and active backgrounds, with dark mode overrides that switch text color and backgrounds. This keeps the individual ",[462,5161,2625],{},[462,5163,2630],{}," definitions clean while handling all 18 combinations (3 colors × 6 variants) automatically.",[454,5166,5167],{},[479,5168,5169],{"href":3264},"Learn more about compound variants →",[5049,5171,5173,5174,5176,5177,5179,5180,5183,5184,876,5186,876,5188,3956,5190,5192],{"icon":5051,"label":5172},"How does filtering affect compound variants?","When you use the ",[462,5175,4378],{}," option, compound variants that reference filtered-out values are automatically removed. For example, if you filter ",[462,5178,2630],{}," to only ",[462,5181,5182],{},"['ghost', 'solid']",", all compound variants matching ",[462,5185,1099],{},[462,5187,1108],{},[462,5189,1117],{},[462,5191,1135],{}," are excluded from the generated output. Default variants are also adjusted if they reference a removed value.",[5194,5195,5196],"style",{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":567,"searchDepth":608,"depth":608,"links":5198},[5199,5200,5201,5202,5203,5206,5214,5215,5216,5217,5221,5226,5227],{"id":452,"depth":608,"text":78},{"id":492,"depth":608,"text":493},{"id":539,"depth":608,"text":540},{"id":2207,"depth":608,"text":3138},{"id":3150,"depth":608,"text":195,"children":5204},[5205],{"id":3172,"depth":616,"text":3173},{"id":3257,"depth":608,"text":3258,"children":5207},[5208,5209,5210,5211,5212,5213],{"id":1090,"depth":616,"text":3269},{"id":1099,"depth":616,"text":3278},{"id":1108,"depth":616,"text":3287},{"id":1117,"depth":616,"text":3296},{"id":1126,"depth":616,"text":3308},{"id":1135,"depth":616,"text":3317},{"id":3326,"depth":608,"text":3327},{"id":3444,"depth":608,"text":3445},{"id":3897,"depth":608,"text":339},{"id":4011,"depth":608,"text":4012,"children":5218},[5219,5220],{"id":4015,"depth":616,"text":4016},{"id":4371,"depth":616,"text":4372},{"id":4556,"depth":608,"text":73,"children":5222},[5223,5224,5225],{"id":4559,"depth":616,"text":4562},{"id":4753,"depth":616,"text":4756},{"id":4890,"depth":616,"text":4893},{"id":4953,"depth":608,"text":4954},{"id":5043,"depth":608,"text":5044},"A navigation component for moving between pages of content. Supports horizontal and vertical orientations, three colors, six visual styles, three sizes, and active/disabled states through a three-part recipe system.",null,{},{"title":323,"description":5228},{"loc":324},"6uF7Lvm7zjjgdjvEt2gwkWBRCKGK7U1Q-L8Stp6Jixk",[5235,5237],{"title":319,"path":320,"stem":321,"description":5236,"children":-1},"A multi-part landing-section primitive composed of a section container plus headline, title, description, actions, links, image, and backdrop sub-recipes. Supports light, dark, and neutral colors with size, orientation, and alignment axes.",{"title":78,"path":165,"stem":166,"description":5238,"icon":79,"children":-1},"Explore Styleframe's comprehensive design token system. Create consistent, scalable design systems with composable functions for colors, typography, spacing, and more.",1778140980692]