[{"data":1,"prerenderedAt":2299},["ShallowReactive",2],{"component-docs":3},[4,206,363,502,2010],{"id":5,"title":6,"body":7,"category":156,"description":157,"examples":158,"extension":171,"meta":172,"navigation":174,"order":175,"path":176,"props":177,"seo":197,"slots":198,"stem":204,"__hash__":205},"components\u002Fcomponents\u002Fccm-card.md","ccm-card",{"type":8,"value":9,"toc":145},"minimark",[10,22,27,30,47,52,55,69,73,76,90,94,115,119],[11,12,13,14,17,18,21],"p",{},"The ",[15,16,6],"code",{}," component is a flexible linking component that adapts its layout based on screen size. It's built on top of ",[15,19,20],{},"nuxt-link"," for optimal routing performance and supports both image and text-only configurations.",[23,24,26],"h2",{"id":25},"responsive-behavior","Responsive Behavior",[11,28,29],{},"The card automatically adapts its layout for different screen sizes:",[31,32,33,41],"ul",{},[34,35,36,40],"li",{},[37,38,39],"strong",{},"Mobile (\u003C 768px)",": Stacked layout with image on top, text below",[34,42,43,46],{},[37,44,45],{},"Desktop (≥ 768px)",": Side-by-side layout with alternating image positions",[48,49,51],"h3",{"id":50},"desktop-layout-pattern","Desktop Layout Pattern",[11,53,54],{},"On desktop screens, cards automatically alternate their layout:",[31,56,57,63],{},[34,58,59,62],{},[37,60,61],{},"Odd cards",": Image left, text right",[34,64,65,68],{},[37,66,67],{},"Even cards",": Image right, text left (with right-aligned text)",[23,70,72],{"id":71},"image-handling","Image Handling",[11,74,75],{},"When no image is provided, the component displays a colored background area maintaining the same aspect ratios:",[31,77,78,84],{},[34,79,80,83],{},[37,81,82],{},"Mobile",": 16:9 aspect ratio",[34,85,86,89],{},[37,87,88],{},"Desktop",": 1:1 aspect ratio",[23,91,93],{"id":92},"accessibility-features","Accessibility Features",[31,95,96,102,109,112],{},[34,97,98,99,101],{},"Uses semantic ",[15,100,20],{}," for proper navigation",[34,103,104,105,108],{},"Includes ",[15,106,107],{},"aria-label"," with the provided title",[34,110,111],{},"Maintains proper heading hierarchy within card content",[34,113,114],{},"Keyboard navigation support through native link behavior",[23,116,118],{"id":117},"design-system-integration","Design System Integration",[31,120,121,127,133,139],{},[34,122,123,126],{},[37,124,125],{},"Spacing",": Uses design token system for consistent padding",[34,128,129,132],{},[37,130,131],{},"Colors",": Integrates with CSS custom property color tokens",[34,134,135,138],{},[37,136,137],{},"Typography",": Inherits text styling from parent contexts",[34,140,141,144],{},[37,142,143],{},"Layout",": Responsive grid-friendly sizing",{"title":146,"searchDepth":147,"depth":147,"links":148},"",2,[149,153,154,155],{"id":25,"depth":147,"text":26,"children":150},[151],{"id":50,"depth":152,"text":51},3,{"id":71,"depth":147,"text":72},{"id":92,"depth":147,"text":93},{"id":117,"depth":147,"text":118},"Content","The ccm-card component is a flexible linking component that adapts its layout based on screen size. It's built on top of nuxt-link for optimal routing performance and supports both image and text-only configurations.",[159,162,165,168],{"title":160,"code":161},"Text-only Card","\u003Cccm-card to=\"\u002Fabout\" title=\"About Us\">\n  \u003Ch3>About Our Company\u003C\u002Fh3>\n  \u003Cp>Learn more about our mission and values.\u003C\u002Fp>\n\u003C\u002Fccm-card>\n",{"title":163,"code":164},"Card with Image","\u003Cccm-card \n  to=\"\u002Fservices\" \n  title=\"Our Services\"\n  image=\"\u002Fimages\u002Fservices-hero.jpg\"\n>\n  \u003Ch3>What We Do\u003C\u002Fh3>\n  \u003Cp>Discover our comprehensive service offerings.\u003C\u002Fp>\n\u003C\u002Fccm-card>\n",{"title":166,"code":167},"Custom Styling","\u003Cccm-card \n  to=\"\u002Fcontact\" \n  title=\"Contact Us\"\n  size=\"xl\"\n  background-color=\"color-secondary-tint-20\"\n>\n  \u003Ch3>Get In Touch\u003C\u002Fh3>\n  \u003Cp>Ready to start your project? Let's talk.\u003C\u002Fp>\n\u003C\u002Fccm-card>\n",{"title":169,"code":170},"Custom Image Slot","\u003Cccm-card to=\"\u002Fportfolio\" title=\"Portfolio\">\n  \u003Ctemplate #image>\n    \u003Cdiv class=\"custom-image-area\">\n      \u003Cicon name=\"portfolio\" size=\"large\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Ftemplate>\n  \u003Ch3>Our Work\u003C\u002Fh3>\n  \u003Cp>Explore our latest projects and case studies.\u003C\u002Fp>\n\u003C\u002Fccm-card>\n","md",{"tagline":173},"Versatile linking card component with responsive layout and image support",true,null,"\u002Fcomponents\u002Fccm-card",[178,182,185,189,193],{"name":179,"type":180,"required":174,"description":181},"to","String","Link destination (Nuxt router path)",{"name":183,"type":180,"required":174,"description":184},"title","Card title for accessibility (used in aria-label)",{"name":186,"type":180,"required":187,"description":188},"image",false,"Optional image URL",{"name":190,"type":180,"default":191,"description":192},"size","l","Controls padding using design tokens (xs, s, m, l, xl, 2xl, 3xl)",{"name":194,"type":180,"default":195,"description":196},"backgroundColor","color-primary-tint-20","CSS custom property name for background color",{"title":6,"description":157},[199,202],{"name":200,"description":201},"default","Main card content area",{"name":186,"description":203},"Custom image content (overrides default image display)","components\u002Fccm-card","N701DpUdP8CscKMkKTjM2R8sNRCip8Cu6oEEH4aHuM0",{"id":207,"title":208,"body":209,"category":143,"description":315,"examples":316,"extension":171,"meta":326,"navigation":174,"order":175,"path":328,"props":329,"seo":354,"slots":355,"stem":361,"__hash__":362},"components\u002Fcomponents\u002Fccm-hero.md","ccm-hero",{"type":8,"value":210,"toc":309},[211,216,220,223,248,250,271,275,302,306],[11,212,13,213,215],{},[15,214,208],{}," component provides a flexible header solution with integrated topbar, responsive layout, and customizable content areas. It's designed to work as a standalone header or as part of a larger page layout system.",[23,217,219],{"id":218},"layout-structure","Layout Structure",[11,221,222],{},"The hero component uses a flexbox layout with three main sections:",[224,225,226,236,242],"ol",{},[34,227,228,231,232,235],{},[37,229,230],{},"Top",": Contains the ",[15,233,234],{},"ccm-topbar"," component (can be hidden)",[34,237,238,241],{},[37,239,240],{},"Main",": Primary content area with automatic centering",[34,243,244,247],{},[37,245,246],{},"Bottom",": Footer section for additional content (hidden by default)",[23,249,26],{"id":25},[31,251,252,258,264],{},[34,253,254,257],{},[37,255,256],{},"Default variant",": Maintains a 16\u002F7 aspect ratio for consistent proportions",[34,259,260,263],{},[37,261,262],{},"Minimal variant",": Removes aspect ratio constraints for content-driven sizing",[34,265,266,267,270],{},"All content areas use the ",[15,268,269],{},"center"," utility class for responsive width constraints",[23,272,274],{"id":273},"integration-features","Integration Features",[31,276,277,286,296],{},[34,278,279,282,283,285],{},[37,280,281],{},"Topbar Integration",": Automatically includes ",[15,284,234],{}," unless hidden",[34,287,288,291,292,295],{},[37,289,290],{},"Page Meta",": Works with Nuxt's ",[15,293,294],{},"definePageMeta"," for consistent hero data",[34,297,298,301],{},[37,299,300],{},"Programmatic Styling",": Dynamic CSS custom properties for size and background color",[23,303,305],{"id":304},"advanced-usage","Advanced Usage",[11,307,308],{},"The component supports both default content (brow, title, tagline) and custom content via slots. For complex layouts, use the default slot to provide complete control over the hero content structure.",{"title":146,"searchDepth":147,"depth":147,"links":310},[311,312,313,314],{"id":218,"depth":147,"text":219},{"id":25,"depth":147,"text":26},{"id":273,"depth":147,"text":274},{"id":304,"depth":147,"text":305},"The ccm-hero component provides a flexible header solution with integrated topbar, responsive layout, and customizable content areas. It's designed to work as a standalone header or as part of a larger page layout system.",[317,320,323],{"title":318,"code":319},"Default Hero","\u003Cccm-hero \n  brow=\"Welcome\"\n  title=\"Component Library\" \n  tagline=\"Building consistent, scalable interfaces\"\n\u002F>\n",{"title":321,"code":322},"Minimal Variant","\u003Cccm-hero \n  variant=\"minimal\"\n  size=\"m\"\n  background-color=\"color-primary-tint-95\"\n  title=\"Compact Hero\"\n  tagline=\"No aspect ratio constraints\"\n\u002F>\n",{"title":324,"code":325},"Custom Content","\u003Cccm-hero>\n  \u003Cdiv class=\"custom-hero-content\">\n    \u003Ch1>Custom Layout\u003C\u002Fh1>\n    \u003Cp>Use the default slot for complete control over hero content.\u003C\u002Fp>\n    \u003Cbutton>Call to Action\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fccm-hero>\n",{"tagline":327},"Flexible hero component with topbar integration and responsive layout","\u002Fcomponents\u002Fccm-hero",[330,334,337,341,342,344,347,351],{"name":331,"type":180,"default":332,"description":333},"brow","Brow","Small text above the main title",{"name":183,"type":180,"default":335,"description":336},"Hero","Main heading text",{"name":338,"type":180,"default":339,"description":340},"tagline","Tagline","Subtitle or descriptive text",{"name":190,"type":180,"default":191,"description":192},{"name":194,"type":180,"default":343,"description":196},"transparent",{"name":345,"type":180,"default":200,"description":346},"variant","Layout variant ('default' has 16\u002F7 aspect ratio, 'minimal' removes aspect ratio)",{"name":348,"type":349,"default":187,"description":350},"hideTop","Boolean","Hide the top topbar section",{"name":352,"type":349,"default":174,"description":353},"hideBottom","Hide the bottom footer section",{"title":208,"description":315},[356,358],{"name":200,"description":357},"Main hero content (replaces default hgroup if provided)",{"name":359,"description":360},"footer","Bottom section content","components\u002Fccm-hero","5MVlJ3FWYB1_mn8BXCKsPNHbQwVoPxl-iE8va9tbZpU",{"id":364,"title":365,"body":366,"category":143,"description":476,"examples":477,"extension":171,"meta":487,"navigation":174,"order":175,"path":489,"props":490,"seo":496,"slots":497,"stem":500,"__hash__":501},"components\u002Fcomponents\u002Fccm-section.md","ccm-section",{"type":8,"value":367,"toc":471},[368,373,377,384,417,420,422,449,453,467],[11,369,13,370,372],{},[15,371,365],{}," component is the foundational layout building block that provides consistent vertical spacing and optional background styling. It follows the programmatic CSS custom property pattern for flexible theming.",[23,374,376],{"id":375},"implementation-details","Implementation Details",[11,378,379,380,383],{},"The component uses the ",[15,381,382],{},":style"," binding to dynamically set CSS custom properties:",[385,386,390],"pre",{"className":387,"code":388,"language":389,"meta":146,"style":146},"language-vue shiki shiki-themes github-light github-dark",":style=\"{\n  '--_ccm-section-background-color': `var(--${backgroundColor})`,\n  '--_ccm-section-padding-block': `var(--space-${size})`\n}\"\n","vue",[15,391,392,401,406,411],{"__ignoreMap":146},[393,394,397],"span",{"class":395,"line":396},"line",1,[393,398,400],{"class":399},"sVt8B",":style=\"{\n",[393,402,403],{"class":395,"line":147},[393,404,405],{"class":399},"  '--_ccm-section-background-color': `var(--${backgroundColor})`,\n",[393,407,408],{"class":395,"line":152},[393,409,410],{"class":399},"  '--_ccm-section-padding-block': `var(--space-${size})`\n",[393,412,414],{"class":395,"line":413},4,[393,415,416],{"class":399},"}\"\n",[11,418,419],{},"This approach eliminates the need for CSS attribute selectors while maintaining full flexibility over spacing and theming.",[23,421,118],{"id":117},[31,423,424,433,441],{},[34,425,426,428,429,432],{},[37,427,125],{},": Integrates with the design token system using ",[15,430,431],{},"--space-*"," custom properties",[34,434,435,437,438,440],{},[37,436,131],{},": References color tokens via CSS custom properties (e.g., ",[15,439,195],{},")",[34,442,443,445,446,448],{},[37,444,143],{},": Provides optional centering via the ",[15,447,269],{}," utility class",[23,450,452],{"id":451},"best-practices","Best Practices",[31,454,455,458,461,464],{},[34,456,457],{},"Use as the primary wrapper for page content sections",[34,459,460],{},"Combine different sizes to create visual hierarchy",[34,462,463],{},"Leverage background colors sparingly for emphasis",[34,465,466],{},"Consider full-width usage for custom layouts that need to break out of the container",[468,469,470],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":146,"searchDepth":147,"depth":147,"links":472},[473,474,475],{"id":375,"depth":147,"text":376},{"id":117,"depth":147,"text":118},{"id":451,"depth":147,"text":452},"The ccm-section component is the foundational layout building block that provides consistent vertical spacing and optional background styling. It follows the programmatic CSS custom property pattern for flexible theming.",[478,481,484],{"title":479,"code":480},"Basic Usage","\u003Cccm-section>\n  \u003Ch2>Section Content\u003C\u002Fh2>\n  \u003Cp>This is the default section styling.\u003C\u002Fp>\n\u003C\u002Fccm-section>\n",{"title":482,"code":483},"With Background and Size","\u003Cccm-section size=\"xl\" background-color=\"color-primary-tint-20\">\n  \u003Ch2>Large Section with Background\u003C\u002Fh2>\n  \u003Cp>This section has extra padding and a colored background.\u003C\u002Fp>\n\u003C\u002Fccm-section>\n",{"title":485,"code":486},"Full Width","\u003Cccm-section full-width>\n  \u003Cdiv class=\"custom-layout\">\n    \u003Cp>This section doesn't apply centering constraints.\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Fccm-section>\n",{"tagline":488},"Foundational layout component with consistent spacing and theming","\u002Fcomponents\u002Fccm-section",[491,492,493],{"name":190,"type":180,"default":191,"description":192},{"name":194,"type":180,"default":343,"description":196},{"name":494,"type":349,"default":187,"description":495},"fullWidth","Controls container centering behavior",{"title":365,"description":476},[498],{"name":200,"description":499},"Main content area","components\u002Fccm-section","TgesECEcwnJxxXSvJe5bwec_Xiyc2tpuLVzj_8tYSvM",{"id":503,"title":504,"body":505,"category":175,"description":513,"examples":175,"extension":171,"meta":2005,"navigation":174,"order":175,"path":2006,"props":175,"seo":2007,"slots":175,"stem":2008,"__hash__":2009},"components\u002Fcomponents\u002Fccm-tabs.md","ccmTabs Component",{"type":8,"value":506,"toc":1981},[507,511,514,518,568,572,579,673,679,701,705,710,713,719,765,769,776,847,852,871,874,1155,1159,1557,1561,1599,1601,1632,1634,1637,1651,1655,1658,1725,1729,1732,1879,1883,1897,1899,1930,1934,1954,1958,1978],[508,509,504],"h1",{"id":510},"ccmtabs-component",[11,512,513],{},"An accessible, keyboard-navigable tabbed interface component built with Vue 3 Composition API following inclusive design principles.",[23,515,517],{"id":516},"features","Features",[31,519,520,538,544,550,556,562],{},[34,521,522,525,526,529,530,533,534,537],{},[37,523,524],{},"Fully Accessible",": Implements proper ARIA semantics with ",[15,527,528],{},"tablist",", ",[15,531,532],{},"tab",", and ",[15,535,536],{},"tabpanel"," roles",[34,539,540,543],{},[37,541,542],{},"Keyboard Navigation",": Arrow keys for tab switching, down arrow to focus panel content",[34,545,546,549],{},[37,547,548],{},"Progressive Enhancement",": Works as basic links that enhance into a full tabbed interface",[34,551,552,555],{},[37,553,554],{},"Responsive Design",": Automatically stacks tabs vertically on mobile viewports",[34,557,558,561],{},[37,559,560],{},"Flexible Content",": Supports both direct content and Vue slots",[34,563,564,567],{},[37,565,566],{},"Vue 3 Ready",": Built with Composition API and proper reactivity",[23,569,571],{"id":570},"props","Props",[48,573,575,578],{"id":574},"tabs-required",[15,576,577],{},"tabs"," (Required)",[31,580,581,590,596],{},[34,582,583,586,587],{},[37,584,585],{},"Type",": ",[15,588,589],{},"Array",[34,591,592,595],{},[37,593,594],{},"Description",": Array of tab objects defining the tabbed interface",[34,597,598,601,602],{},[37,599,600],{},"Structure",":\n",[385,603,607],{"className":604,"code":605,"language":606,"meta":146,"style":146},"language-typescript shiki shiki-themes github-light github-dark","{\n  id: string,        \u002F\u002F Unique identifier for the tab\u002Fpanel\n  label: string,     \u002F\u002F Display text for the tab\n  content?: string,  \u002F\u002F HTML content (optional if using slots)\n  slot?: string      \u002F\u002F Named slot reference (optional)\n}\n","typescript",[15,608,609,614,627,638,653,667],{"__ignoreMap":146},[393,610,611],{"class":395,"line":396},[393,612,613],{"class":399},"{\n",[393,615,616,620,623],{"class":395,"line":147},[393,617,619],{"class":618},"sScJk","  id",[393,621,622],{"class":399},": string,        ",[393,624,626],{"class":625},"sJ8bj","\u002F\u002F Unique identifier for the tab\u002Fpanel\n",[393,628,629,632,635],{"class":395,"line":152},[393,630,631],{"class":618},"  label",[393,633,634],{"class":399},": string,     ",[393,636,637],{"class":625},"\u002F\u002F Display text for the tab\n",[393,639,640,643,647,650],{"class":395,"line":413},[393,641,642],{"class":399},"  content",[393,644,646],{"class":645},"szBVR","?:",[393,648,649],{"class":399}," string,  ",[393,651,652],{"class":625},"\u002F\u002F HTML content (optional if using slots)\n",[393,654,656,659,661,664],{"class":395,"line":655},5,[393,657,658],{"class":399},"  slot",[393,660,646],{"class":645},[393,662,663],{"class":399}," string      ",[393,665,666],{"class":625},"\u002F\u002F Named slot reference (optional)\n",[393,668,670],{"class":395,"line":669},6,[393,671,672],{"class":399},"}\n",[48,674,676],{"id":675},"defaulttab",[15,677,678],{},"defaultTab",[31,680,681,688,696],{},[34,682,683,586,685],{},[37,684,585],{},[15,686,687],{},"Number",[34,689,690,586,693],{},[37,691,692],{},"Default",[15,694,695],{},"0",[34,697,698,700],{},[37,699,594],{},": Index of the initially active tab",[23,702,704],{"id":703},"events","Events",[48,706,708],{"id":707},"tab-change",[15,709,707],{},[11,711,712],{},"Emitted when the active tab changes.",[11,714,715,718],{},[37,716,717],{},"Payload",":",[385,720,722],{"className":604,"code":721,"language":606,"meta":146,"style":146},"{\n  activeTab: number,    \u002F\u002F Index of the new active tab\n  tab: object,          \u002F\u002F The new active tab object\n  previousTab: number   \u002F\u002F Index of the previously active tab\n}\n",[15,723,724,728,739,750,761],{"__ignoreMap":146},[393,725,726],{"class":395,"line":396},[393,727,613],{"class":399},[393,729,730,733,736],{"class":395,"line":147},[393,731,732],{"class":618},"  activeTab",[393,734,735],{"class":399},": number,    ",[393,737,738],{"class":625},"\u002F\u002F Index of the new active tab\n",[393,740,741,744,747],{"class":395,"line":152},[393,742,743],{"class":618},"  tab",[393,745,746],{"class":399},": object,          ",[393,748,749],{"class":625},"\u002F\u002F The new active tab object\n",[393,751,752,755,758],{"class":395,"line":413},[393,753,754],{"class":618},"  previousTab",[393,756,757],{"class":399},": number   ",[393,759,760],{"class":625},"\u002F\u002F Index of the previously active tab\n",[393,762,763],{"class":395,"line":655},[393,764,672],{"class":399},[23,766,768],{"id":767},"slots","Slots",[11,770,771,772,775],{},"The component supports named slots for each tab panel. Use the tab's ",[15,773,774],{},"id"," as the slot name.",[385,777,779],{"className":387,"code":778,"language":389,"meta":146,"style":146},"\u003Ctemplate #section1=\"{ tab, index, isActive }\">\n  \u003Ch2>{{ tab.label }}\u003C\u002Fh2>\n  \u003Cp>Custom content for tab {{ index + 1 }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[15,780,781,811,825,838],{"__ignoreMap":146},[393,782,783,786,790,793,796,799,803,806,808],{"class":395,"line":396},[393,784,785],{"class":399},"\u003C",[393,787,789],{"class":788},"s9eBZ","template",[393,791,792],{"class":399}," #",[393,794,795],{"class":618},"section1",[393,797,798],{"class":399},"=",[393,800,802],{"class":801},"sZZnC","\"",[393,804,805],{"class":399},"{ tab, index, isActive }",[393,807,802],{"class":801},[393,809,810],{"class":399},">\n",[393,812,813,816,818,821,823],{"class":395,"line":147},[393,814,815],{"class":399},"  \u003C",[393,817,23],{"class":788},[393,819,820],{"class":399},">{{ tab.label }}\u003C\u002F",[393,822,23],{"class":788},[393,824,810],{"class":399},[393,826,827,829,831,834,836],{"class":395,"line":152},[393,828,815],{"class":399},[393,830,11],{"class":788},[393,832,833],{"class":399},">Custom content for tab {{ index + 1 }}\u003C\u002F",[393,835,11],{"class":788},[393,837,810],{"class":399},[393,839,840,843,845],{"class":395,"line":413},[393,841,842],{"class":399},"\u003C\u002F",[393,844,789],{"class":788},[393,846,810],{"class":399},[11,848,849,718],{},[37,850,851],{},"Slot Props",[31,853,854,859,865],{},[34,855,856,858],{},[15,857,532],{},": The tab object",[34,860,861,864],{},[15,862,863],{},"index",": Tab index",[34,866,867,870],{},[15,868,869],{},"isActive",": Boolean indicating if this is the active tab",[23,872,479],{"id":873},"basic-usage",[385,875,877],{"className":387,"code":876,"language":389,"meta":146,"style":146},"\u003Ctemplate>\n  \u003CccmTabs \n    :tabs=\"tabs\"\n    @tab-change=\"handleTabChange\"\n  \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nconst tabs = [\n  {\n    id: 'overview',\n    label: 'Overview',\n    content: '\u003Cp>Project overview content here.\u003C\u002Fp>'\n  },\n  {\n    id: 'features',\n    label: 'Features',\n    content: '\u003Cp>Feature list and descriptions.\u003C\u002Fp>'\n  },\n  {\n    id: 'usage',\n    label: 'Usage',\n    content: '\u003Cp>Usage examples and guidelines.\u003C\u002Fp>'\n  }\n]\n\nconst handleTabChange = (event) => {\n  console.log('Tab changed:', event.activeTab)\n}\n\u003C\u002Fscript>\n",[15,878,879,887,897,907,917,922,930,936,949,965,971,983,994,1003,1009,1014,1024,1034,1042,1047,1052,1062,1072,1080,1086,1092,1097,1123,1141,1146],{"__ignoreMap":146},[393,880,881,883,885],{"class":395,"line":396},[393,882,785],{"class":399},[393,884,789],{"class":788},[393,886,810],{"class":399},[393,888,889,891,894],{"class":395,"line":147},[393,890,815],{"class":399},[393,892,893],{"class":788},"ccmTabs",[393,895,896],{"class":399}," \n",[393,898,899,902,904],{"class":395,"line":152},[393,900,901],{"class":618},"    :tabs",[393,903,798],{"class":399},[393,905,906],{"class":801},"\"tabs\"\n",[393,908,909,912,914],{"class":395,"line":413},[393,910,911],{"class":618},"    @tab-change",[393,913,798],{"class":399},[393,915,916],{"class":801},"\"handleTabChange\"\n",[393,918,919],{"class":395,"line":655},[393,920,921],{"class":399},"  \u002F>\n",[393,923,924,926,928],{"class":395,"line":669},[393,925,842],{"class":399},[393,927,789],{"class":788},[393,929,810],{"class":399},[393,931,933],{"class":395,"line":932},7,[393,934,935],{"emptyLinePlaceholder":174},"\n",[393,937,939,941,944,947],{"class":395,"line":938},8,[393,940,785],{"class":399},[393,942,943],{"class":788},"script",[393,945,946],{"class":618}," setup",[393,948,810],{"class":399},[393,950,952,955,959,962],{"class":395,"line":951},9,[393,953,954],{"class":645},"const",[393,956,958],{"class":957},"sj4cs"," tabs",[393,960,961],{"class":645}," =",[393,963,964],{"class":399}," [\n",[393,966,968],{"class":395,"line":967},10,[393,969,970],{"class":399},"  {\n",[393,972,974,977,980],{"class":395,"line":973},11,[393,975,976],{"class":399},"    id: ",[393,978,979],{"class":801},"'overview'",[393,981,982],{"class":399},",\n",[393,984,986,989,992],{"class":395,"line":985},12,[393,987,988],{"class":399},"    label: ",[393,990,991],{"class":801},"'Overview'",[393,993,982],{"class":399},[393,995,997,1000],{"class":395,"line":996},13,[393,998,999],{"class":399},"    content: ",[393,1001,1002],{"class":801},"'\u003Cp>Project overview content here.\u003C\u002Fp>'\n",[393,1004,1006],{"class":395,"line":1005},14,[393,1007,1008],{"class":399},"  },\n",[393,1010,1012],{"class":395,"line":1011},15,[393,1013,970],{"class":399},[393,1015,1017,1019,1022],{"class":395,"line":1016},16,[393,1018,976],{"class":399},[393,1020,1021],{"class":801},"'features'",[393,1023,982],{"class":399},[393,1025,1027,1029,1032],{"class":395,"line":1026},17,[393,1028,988],{"class":399},[393,1030,1031],{"class":801},"'Features'",[393,1033,982],{"class":399},[393,1035,1037,1039],{"class":395,"line":1036},18,[393,1038,999],{"class":399},[393,1040,1041],{"class":801},"'\u003Cp>Feature list and descriptions.\u003C\u002Fp>'\n",[393,1043,1045],{"class":395,"line":1044},19,[393,1046,1008],{"class":399},[393,1048,1050],{"class":395,"line":1049},20,[393,1051,970],{"class":399},[393,1053,1055,1057,1060],{"class":395,"line":1054},21,[393,1056,976],{"class":399},[393,1058,1059],{"class":801},"'usage'",[393,1061,982],{"class":399},[393,1063,1065,1067,1070],{"class":395,"line":1064},22,[393,1066,988],{"class":399},[393,1068,1069],{"class":801},"'Usage'",[393,1071,982],{"class":399},[393,1073,1075,1077],{"class":395,"line":1074},23,[393,1076,999],{"class":399},[393,1078,1079],{"class":801},"'\u003Cp>Usage examples and guidelines.\u003C\u002Fp>'\n",[393,1081,1083],{"class":395,"line":1082},24,[393,1084,1085],{"class":399},"  }\n",[393,1087,1089],{"class":395,"line":1088},25,[393,1090,1091],{"class":399},"]\n",[393,1093,1095],{"class":395,"line":1094},26,[393,1096,935],{"emptyLinePlaceholder":174},[393,1098,1100,1102,1105,1107,1110,1114,1117,1120],{"class":395,"line":1099},27,[393,1101,954],{"class":645},[393,1103,1104],{"class":618}," handleTabChange",[393,1106,961],{"class":645},[393,1108,1109],{"class":399}," (",[393,1111,1113],{"class":1112},"s4XuR","event",[393,1115,1116],{"class":399},") ",[393,1118,1119],{"class":645},"=>",[393,1121,1122],{"class":399}," {\n",[393,1124,1126,1129,1132,1135,1138],{"class":395,"line":1125},28,[393,1127,1128],{"class":399},"  console.",[393,1130,1131],{"class":618},"log",[393,1133,1134],{"class":399},"(",[393,1136,1137],{"class":801},"'Tab changed:'",[393,1139,1140],{"class":399},", event.activeTab)\n",[393,1142,1144],{"class":395,"line":1143},29,[393,1145,672],{"class":399},[393,1147,1149,1151,1153],{"class":395,"line":1148},30,[393,1150,842],{"class":399},[393,1152,943],{"class":788},[393,1154,810],{"class":399},[23,1156,1158],{"id":1157},"advanced-usage-with-slots","Advanced Usage with Slots",[385,1160,1162],{"className":387,"code":1161,"language":389,"meta":146,"style":146},"\u003Ctemplate>\n  \u003CccmTabs \n    :tabs=\"tabs\"\n    :default-tab=\"1\"\n  >\n    \u003Ctemplate #overview=\"{ tab }\">\n      \u003Cdiv class=\"overview-section\">\n        \u003Ch2>{{ tab.label }}\u003C\u002Fh2>\n        \u003Cp>Welcome to our project overview.\u003C\u002Fp>\n        \u003Cul>\n          \u003Cli>Built with Vue 3\u003C\u002Fli>\n          \u003Cli>Fully accessible\u003C\u002Fli>\n          \u003Cli>Mobile responsive\u003C\u002Fli>\n        \u003C\u002Ful>\n      \u003C\u002Fdiv>\n    \u003C\u002Ftemplate>\n    \n    \u003Ctemplate #features=\"{ isActive }\">\n      \u003Cdiv class=\"features-section\">\n        \u003Ch2>Key Features\u003C\u002Fh2>\n        \u003Cdiv v-if=\"isActive\" class=\"feature-animation\">\n          \u003C!-- Animated content only when tab is active -->\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Ftemplate>\n  \u003C\u002FccmTabs>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nconst tabs = [\n  { id: 'overview', label: 'Overview' },\n  { id: 'features', label: 'Features' },\n  { id: 'documentation', label: 'Docs', content: '\u003Cp>Documentation content\u003C\u002Fp>' }\n]\n\u003C\u002Fscript>\n",[15,1163,1164,1172,1180,1188,1198,1203,1226,1244,1257,1270,1278,1292,1305,1318,1327,1336,1345,1350,1371,1386,1399,1422,1427,1435,1443,1451,1460,1468,1472,1482,1492,1508,1521,1543,1548],{"__ignoreMap":146},[393,1165,1166,1168,1170],{"class":395,"line":396},[393,1167,785],{"class":399},[393,1169,789],{"class":788},[393,1171,810],{"class":399},[393,1173,1174,1176,1178],{"class":395,"line":147},[393,1175,815],{"class":399},[393,1177,893],{"class":788},[393,1179,896],{"class":399},[393,1181,1182,1184,1186],{"class":395,"line":152},[393,1183,901],{"class":618},[393,1185,798],{"class":399},[393,1187,906],{"class":801},[393,1189,1190,1193,1195],{"class":395,"line":413},[393,1191,1192],{"class":618},"    :default-tab",[393,1194,798],{"class":399},[393,1196,1197],{"class":801},"\"1\"\n",[393,1199,1200],{"class":395,"line":655},[393,1201,1202],{"class":399},"  >\n",[393,1204,1205,1208,1210,1212,1215,1217,1219,1222,1224],{"class":395,"line":669},[393,1206,1207],{"class":399},"    \u003C",[393,1209,789],{"class":788},[393,1211,792],{"class":399},[393,1213,1214],{"class":618},"overview",[393,1216,798],{"class":399},[393,1218,802],{"class":801},[393,1220,1221],{"class":399},"{ tab }",[393,1223,802],{"class":801},[393,1225,810],{"class":399},[393,1227,1228,1231,1234,1237,1239,1242],{"class":395,"line":932},[393,1229,1230],{"class":399},"      \u003C",[393,1232,1233],{"class":788},"div",[393,1235,1236],{"class":618}," class",[393,1238,798],{"class":399},[393,1240,1241],{"class":801},"\"overview-section\"",[393,1243,810],{"class":399},[393,1245,1246,1249,1251,1253,1255],{"class":395,"line":938},[393,1247,1248],{"class":399},"        \u003C",[393,1250,23],{"class":788},[393,1252,820],{"class":399},[393,1254,23],{"class":788},[393,1256,810],{"class":399},[393,1258,1259,1261,1263,1266,1268],{"class":395,"line":951},[393,1260,1248],{"class":399},[393,1262,11],{"class":788},[393,1264,1265],{"class":399},">Welcome to our project overview.\u003C\u002F",[393,1267,11],{"class":788},[393,1269,810],{"class":399},[393,1271,1272,1274,1276],{"class":395,"line":967},[393,1273,1248],{"class":399},[393,1275,31],{"class":788},[393,1277,810],{"class":399},[393,1279,1280,1283,1285,1288,1290],{"class":395,"line":973},[393,1281,1282],{"class":399},"          \u003C",[393,1284,34],{"class":788},[393,1286,1287],{"class":399},">Built with Vue 3\u003C\u002F",[393,1289,34],{"class":788},[393,1291,810],{"class":399},[393,1293,1294,1296,1298,1301,1303],{"class":395,"line":985},[393,1295,1282],{"class":399},[393,1297,34],{"class":788},[393,1299,1300],{"class":399},">Fully accessible\u003C\u002F",[393,1302,34],{"class":788},[393,1304,810],{"class":399},[393,1306,1307,1309,1311,1314,1316],{"class":395,"line":996},[393,1308,1282],{"class":399},[393,1310,34],{"class":788},[393,1312,1313],{"class":399},">Mobile responsive\u003C\u002F",[393,1315,34],{"class":788},[393,1317,810],{"class":399},[393,1319,1320,1323,1325],{"class":395,"line":1005},[393,1321,1322],{"class":399},"        \u003C\u002F",[393,1324,31],{"class":788},[393,1326,810],{"class":399},[393,1328,1329,1332,1334],{"class":395,"line":1011},[393,1330,1331],{"class":399},"      \u003C\u002F",[393,1333,1233],{"class":788},[393,1335,810],{"class":399},[393,1337,1338,1341,1343],{"class":395,"line":1016},[393,1339,1340],{"class":399},"    \u003C\u002F",[393,1342,789],{"class":788},[393,1344,810],{"class":399},[393,1346,1347],{"class":395,"line":1026},[393,1348,1349],{"class":399},"    \n",[393,1351,1352,1354,1356,1358,1360,1362,1364,1367,1369],{"class":395,"line":1036},[393,1353,1207],{"class":399},[393,1355,789],{"class":788},[393,1357,792],{"class":399},[393,1359,516],{"class":618},[393,1361,798],{"class":399},[393,1363,802],{"class":801},[393,1365,1366],{"class":399},"{ isActive }",[393,1368,802],{"class":801},[393,1370,810],{"class":399},[393,1372,1373,1375,1377,1379,1381,1384],{"class":395,"line":1044},[393,1374,1230],{"class":399},[393,1376,1233],{"class":788},[393,1378,1236],{"class":618},[393,1380,798],{"class":399},[393,1382,1383],{"class":801},"\"features-section\"",[393,1385,810],{"class":399},[393,1387,1388,1390,1392,1395,1397],{"class":395,"line":1049},[393,1389,1248],{"class":399},[393,1391,23],{"class":788},[393,1393,1394],{"class":399},">Key Features\u003C\u002F",[393,1396,23],{"class":788},[393,1398,810],{"class":399},[393,1400,1401,1403,1405,1408,1410,1413,1415,1417,1420],{"class":395,"line":1054},[393,1402,1248],{"class":399},[393,1404,1233],{"class":788},[393,1406,1407],{"class":618}," v-if",[393,1409,798],{"class":399},[393,1411,1412],{"class":801},"\"isActive\"",[393,1414,1236],{"class":618},[393,1416,798],{"class":399},[393,1418,1419],{"class":801},"\"feature-animation\"",[393,1421,810],{"class":399},[393,1423,1424],{"class":395,"line":1064},[393,1425,1426],{"class":625},"          \u003C!-- Animated content only when tab is active -->\n",[393,1428,1429,1431,1433],{"class":395,"line":1074},[393,1430,1322],{"class":399},[393,1432,1233],{"class":788},[393,1434,810],{"class":399},[393,1436,1437,1439,1441],{"class":395,"line":1082},[393,1438,1331],{"class":399},[393,1440,1233],{"class":788},[393,1442,810],{"class":399},[393,1444,1445,1447,1449],{"class":395,"line":1088},[393,1446,1340],{"class":399},[393,1448,789],{"class":788},[393,1450,810],{"class":399},[393,1452,1453,1456,1458],{"class":395,"line":1094},[393,1454,1455],{"class":399},"  \u003C\u002F",[393,1457,893],{"class":788},[393,1459,810],{"class":399},[393,1461,1462,1464,1466],{"class":395,"line":1099},[393,1463,842],{"class":399},[393,1465,789],{"class":788},[393,1467,810],{"class":399},[393,1469,1470],{"class":395,"line":1125},[393,1471,935],{"emptyLinePlaceholder":174},[393,1473,1474,1476,1478,1480],{"class":395,"line":1143},[393,1475,785],{"class":399},[393,1477,943],{"class":788},[393,1479,946],{"class":618},[393,1481,810],{"class":399},[393,1483,1484,1486,1488,1490],{"class":395,"line":1148},[393,1485,954],{"class":645},[393,1487,958],{"class":957},[393,1489,961],{"class":645},[393,1491,964],{"class":399},[393,1493,1495,1498,1500,1503,1505],{"class":395,"line":1494},31,[393,1496,1497],{"class":399},"  { id: ",[393,1499,979],{"class":801},[393,1501,1502],{"class":399},", label: ",[393,1504,991],{"class":801},[393,1506,1507],{"class":399}," },\n",[393,1509,1511,1513,1515,1517,1519],{"class":395,"line":1510},32,[393,1512,1497],{"class":399},[393,1514,1021],{"class":801},[393,1516,1502],{"class":399},[393,1518,1031],{"class":801},[393,1520,1507],{"class":399},[393,1522,1524,1526,1529,1531,1534,1537,1540],{"class":395,"line":1523},33,[393,1525,1497],{"class":399},[393,1527,1528],{"class":801},"'documentation'",[393,1530,1502],{"class":399},[393,1532,1533],{"class":801},"'Docs'",[393,1535,1536],{"class":399},", content: ",[393,1538,1539],{"class":801},"'\u003Cp>Documentation content\u003C\u002Fp>'",[393,1541,1542],{"class":399}," }\n",[393,1544,1546],{"class":395,"line":1545},34,[393,1547,1091],{"class":399},[393,1549,1551,1553,1555],{"class":395,"line":1550},35,[393,1552,842],{"class":399},[393,1554,943],{"class":788},[393,1556,810],{"class":399},[23,1558,1560],{"id":1559},"keyboard-controls","Keyboard Controls",[31,1562,1563,1569,1575,1581,1587,1593],{},[34,1564,1565,1568],{},[37,1566,1567],{},"Left\u002FRight Arrow Keys",": Navigate between tabs",[34,1570,1571,1574],{},[37,1572,1573],{},"Down Arrow",": Move focus to the active panel content",[34,1576,1577,1580],{},[37,1578,1579],{},"Home",": Jump to first tab",[34,1582,1583,1586],{},[37,1584,1585],{},"End",": Jump to last tab",[34,1588,1589,1592],{},[37,1590,1591],{},"Tab",": Move focus to panel content (bypasses inactive tabs)",[34,1594,1595,1598],{},[37,1596,1597],{},"Shift + Tab",": Return to active tab from panel",[23,1600,93],{"id":92},[31,1602,1603,1609,1614,1620,1626],{},[34,1604,1605,1608],{},[37,1606,1607],{},"Screen Reader Support",": Proper ARIA roles and relationships",[34,1610,1611,1613],{},[37,1612,542],{},": Full keyboard accessibility",[34,1615,1616,1619],{},[37,1617,1618],{},"Focus Management",": Intelligent focus handling for better UX",[34,1621,1622,1625],{},[37,1623,1624],{},"Panel Labeling",": Each panel is labeled by its corresponding tab",[34,1627,1628,1631],{},[37,1629,1630],{},"State Announcements",": Screen readers announce tab selection and count",[23,1633,26],{"id":25},[11,1635,1636],{},"On viewports smaller than 550px:",[31,1638,1639,1642,1645,1648],{},[34,1640,1641],{},"Tabs stack vertically",[34,1643,1644],{},"Visual indicator (arrow) shows selected tab",[34,1646,1647],{},"All accessibility features remain intact",[34,1649,1650],{},"Keyboard navigation continues to work normally",[23,1652,1654],{"id":1653},"styling","Styling",[11,1656,1657],{},"The component uses CSS custom properties for theming:",[385,1659,1663],{"className":1660,"code":1661,"language":1662,"meta":146,"style":146},"language-css shiki shiki-themes github-light github-dark",".ccm-tabbed {\n  --color-border: #222;\n  --color-bg-active: #fff;\n  --color-bg-hover: #f5f5f5;\n  --color-focus: lightblue;\n}\n","css",[15,1664,1665,1672,1685,1697,1709,1721],{"__ignoreMap":146},[393,1666,1667,1670],{"class":395,"line":396},[393,1668,1669],{"class":618},".ccm-tabbed",[393,1671,1122],{"class":399},[393,1673,1674,1677,1679,1682],{"class":395,"line":147},[393,1675,1676],{"class":1112},"  --color-border",[393,1678,586],{"class":399},[393,1680,1681],{"class":957},"#222",[393,1683,1684],{"class":399},";\n",[393,1686,1687,1690,1692,1695],{"class":395,"line":152},[393,1688,1689],{"class":1112},"  --color-bg-active",[393,1691,586],{"class":399},[393,1693,1694],{"class":957},"#fff",[393,1696,1684],{"class":399},[393,1698,1699,1702,1704,1707],{"class":395,"line":413},[393,1700,1701],{"class":1112},"  --color-bg-hover",[393,1703,586],{"class":399},[393,1705,1706],{"class":957},"#f5f5f5",[393,1708,1684],{"class":399},[393,1710,1711,1714,1716,1719],{"class":395,"line":655},[393,1712,1713],{"class":1112},"  --color-focus",[393,1715,586],{"class":399},[393,1717,1718],{"class":957},"lightblue",[393,1720,1684],{"class":399},[393,1722,1723],{"class":395,"line":669},[393,1724,672],{"class":399},[23,1726,1728],{"id":1727},"component-methods","Component Methods",[11,1730,1731],{},"Access component methods via template ref:",[385,1733,1735],{"className":387,"code":1734,"language":389,"meta":146,"style":146},"\u003Ctemplate>\n  \u003CccmTabs ref=\"tabsRef\" :tabs=\"tabs\" \u002F>\n  \u003Cbutton @click=\"switchToTab(2)\">Go to Tab 3\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nconst tabsRef = ref(null)\n\nconst switchToTab = (index) => {\n  tabsRef.value?.switchTab(index)\n}\n\u003C\u002Fscript>\n",[15,1736,1737,1745,1770,1792,1800,1804,1814,1833,1837,1856,1867,1871],{"__ignoreMap":146},[393,1738,1739,1741,1743],{"class":395,"line":396},[393,1740,785],{"class":399},[393,1742,789],{"class":788},[393,1744,810],{"class":399},[393,1746,1747,1749,1751,1754,1756,1759,1762,1764,1767],{"class":395,"line":147},[393,1748,815],{"class":399},[393,1750,893],{"class":788},[393,1752,1753],{"class":618}," ref",[393,1755,798],{"class":399},[393,1757,1758],{"class":801},"\"tabsRef\"",[393,1760,1761],{"class":618}," :tabs",[393,1763,798],{"class":399},[393,1765,1766],{"class":801},"\"tabs\"",[393,1768,1769],{"class":399}," \u002F>\n",[393,1771,1772,1774,1777,1780,1782,1785,1788,1790],{"class":395,"line":152},[393,1773,815],{"class":399},[393,1775,1776],{"class":788},"button",[393,1778,1779],{"class":618}," @click",[393,1781,798],{"class":399},[393,1783,1784],{"class":801},"\"switchToTab(2)\"",[393,1786,1787],{"class":399},">Go to Tab 3\u003C\u002F",[393,1789,1776],{"class":788},[393,1791,810],{"class":399},[393,1793,1794,1796,1798],{"class":395,"line":413},[393,1795,842],{"class":399},[393,1797,789],{"class":788},[393,1799,810],{"class":399},[393,1801,1802],{"class":395,"line":655},[393,1803,935],{"emptyLinePlaceholder":174},[393,1805,1806,1808,1810,1812],{"class":395,"line":669},[393,1807,785],{"class":399},[393,1809,943],{"class":788},[393,1811,946],{"class":618},[393,1813,810],{"class":399},[393,1815,1816,1818,1821,1823,1825,1827,1830],{"class":395,"line":932},[393,1817,954],{"class":645},[393,1819,1820],{"class":957}," tabsRef",[393,1822,961],{"class":645},[393,1824,1753],{"class":618},[393,1826,1134],{"class":399},[393,1828,1829],{"class":957},"null",[393,1831,1832],{"class":399},")\n",[393,1834,1835],{"class":395,"line":938},[393,1836,935],{"emptyLinePlaceholder":174},[393,1838,1839,1841,1844,1846,1848,1850,1852,1854],{"class":395,"line":951},[393,1840,954],{"class":645},[393,1842,1843],{"class":618}," switchToTab",[393,1845,961],{"class":645},[393,1847,1109],{"class":399},[393,1849,863],{"class":1112},[393,1851,1116],{"class":399},[393,1853,1119],{"class":645},[393,1855,1122],{"class":399},[393,1857,1858,1861,1864],{"class":395,"line":967},[393,1859,1860],{"class":399},"  tabsRef.value?.",[393,1862,1863],{"class":618},"switchTab",[393,1865,1866],{"class":399},"(index)\n",[393,1868,1869],{"class":395,"line":973},[393,1870,672],{"class":399},[393,1872,1873,1875,1877],{"class":395,"line":985},[393,1874,842],{"class":399},[393,1876,943],{"class":788},[393,1878,810],{"class":399},[48,1880,1882],{"id":1881},"available-methods","Available Methods",[31,1884,1885,1891],{},[34,1886,1887,1890],{},[15,1888,1889],{},"switchTab(index)",": Programmatically switch to a specific tab",[34,1892,1893,1896],{},[15,1894,1895],{},"activeTab",": Computed property returning the current active tab index",[23,1898,452],{"id":451},[224,1900,1901,1907,1913,1919,1924],{},[34,1902,1903,1906],{},[37,1904,1905],{},"Use Meaningful Labels",": Tab labels should be descriptive and concise",[34,1908,1909,1912],{},[37,1910,1911],{},"Limit Tab Count",": Avoid too many tabs; consider accordions for large sets",[34,1914,1915,1918],{},[37,1916,1917],{},"Content Organization",": Group related content logically",[34,1920,1921,1923],{},[37,1922,548],{},": Ensure content works without JavaScript",[34,1925,1926,1929],{},[37,1927,1928],{},"Mobile Consideration",": Test the vertical layout on small screens",[23,1931,1933],{"id":1932},"when-to-use","When to Use",[31,1935,1936,1942,1948],{},[34,1937,1938,1941],{},[37,1939,1940],{},"Related Content",": When you have multiple sections of related content",[34,1943,1944,1947],{},[37,1945,1946],{},"Space Constraints",": When you need to save vertical space",[34,1949,1950,1953],{},[37,1951,1952],{},"User Control",": When users benefit from quick switching between views",[23,1955,1957],{"id":1956},"when-not-to-use","When NOT to Use",[31,1959,1960,1966,1972],{},[34,1961,1962,1965],{},[37,1963,1964],{},"Site Navigation",": Don't use for primary site navigation",[34,1967,1968,1971],{},[37,1969,1970],{},"Sequential Content",": Avoid for content that should be read in order",[34,1973,1974,1977],{},[37,1975,1976],{},"Single Content Block",": Don't use for content that doesn't need organization",[468,1979,1980],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":146,"searchDepth":147,"depth":147,"links":1982},[1983,1984,1989,1992,1993,1994,1995,1996,1997,1998,1999,2002,2003,2004],{"id":516,"depth":147,"text":517},{"id":570,"depth":147,"text":571,"children":1985},[1986,1988],{"id":574,"depth":152,"text":1987},"tabs (Required)",{"id":675,"depth":152,"text":678},{"id":703,"depth":147,"text":704,"children":1990},[1991],{"id":707,"depth":152,"text":707},{"id":767,"depth":147,"text":768},{"id":873,"depth":147,"text":479},{"id":1157,"depth":147,"text":1158},{"id":1559,"depth":147,"text":1560},{"id":92,"depth":147,"text":93},{"id":25,"depth":147,"text":26},{"id":1653,"depth":147,"text":1654},{"id":1727,"depth":147,"text":1728,"children":2000},[2001],{"id":1881,"depth":152,"text":1882},{"id":451,"depth":147,"text":452},{"id":1932,"depth":147,"text":1933},{"id":1956,"depth":147,"text":1957},{},"\u002Fcomponents\u002Fccm-tabs",{"title":504,"description":513},"components\u002Fccm-tabs","kThr7vM3wCs7N98PevyfRSVhA3r54zS6bzosgLpLErQ",{"id":2011,"title":2012,"body":2013,"category":2285,"description":146,"examples":2286,"extension":171,"meta":2293,"navigation":174,"order":396,"path":2295,"props":175,"seo":2296,"slots":175,"stem":2297,"__hash__":2298},"components\u002Fcomponents\u002Fdesign-system.md","Design System Overview",{"type":8,"value":2014,"toc":2268},[2015,2019,2026,2030,2056,2060,2064,2067,2111,2115,2118,2150,2154,2157,2192,2196,2200,2212,2216,2229,2233,2240,2244,2247,2251,2254],[23,2016,2018],{"id":2017},"core-principles","Core Principles",[11,2020,2021,2022,2025],{},"Our design system follows a ",[37,2023,2024],{},"programmatic approach"," where component props dynamically set CSS custom properties, enabling flexible theming and consistent spacing without relying on CSS attribute selectors.",[48,2027,2029],{"id":2028},"key-benefits","Key Benefits",[224,2031,2032,2038,2044,2050],{},[34,2033,2034,2037],{},[37,2035,2036],{},"Runtime Flexibility",": Props can accept any valid design token value",[34,2039,2040,2043],{},[37,2041,2042],{},"Performance",": No CSS specificity battles or attribute selector overhead",[34,2045,2046,2049],{},[37,2047,2048],{},"Maintainability",": Single source of truth for design token values",[34,2051,2052,2055],{},[37,2053,2054],{},"Scalability",": Easy to extend with new size or color variants",[23,2057,2059],{"id":2058},"design-token-system","Design Token System",[48,2061,2063],{"id":2062},"spacing-scale","Spacing Scale",[11,2065,2066],{},"The system uses a consistent spacing scale accessible via CSS custom properties:",[31,2068,2069,2075,2081,2087,2093,2099,2105],{},[34,2070,2071,2074],{},[15,2072,2073],{},"--space-xs"," - Extra small spacing",[34,2076,2077,2080],{},[15,2078,2079],{},"--space-s"," - Small spacing",[34,2082,2083,2086],{},[15,2084,2085],{},"--space-m"," - Medium spacing",[34,2088,2089,2092],{},[15,2090,2091],{},"--space-l"," - Large spacing (default for most components)",[34,2094,2095,2098],{},[15,2096,2097],{},"--space-xl"," - Extra large spacing",[34,2100,2101,2104],{},[15,2102,2103],{},"--space-2xl"," - 2x large spacing",[34,2106,2107,2110],{},[15,2108,2109],{},"--space-3xl"," - 3x large spacing",[48,2112,2114],{"id":2113},"color-tokens","Color Tokens",[11,2116,2117],{},"Colors follow a systematic naming convention:",[31,2119,2120,2126,2132,2138,2144],{},[34,2121,2122,2125],{},[15,2123,2124],{},"--color-primary"," - Primary brand color",[34,2127,2128,2131],{},[15,2129,2130],{},"--color-primary-tint-20"," - 20% tint of primary",[34,2133,2134,2137],{},[15,2135,2136],{},"--color-primary-tint-95"," - 95% tint of primary (very light)",[34,2139,2140,2143],{},[15,2141,2142],{},"--color-secondary"," - Secondary color",[34,2145,2146,2149],{},[15,2147,2148],{},"--color-neutral-tint-95"," - Light neutral background",[23,2151,2153],{"id":2152},"implementation-pattern","Implementation Pattern",[11,2155,2156],{},"All components follow this consistent pattern:",[224,2158,2159,2171,2180,2186],{},[34,2160,2161,2164,2165,2167,2168,2170],{},[37,2162,2163],{},"Props Definition",": Accept ",[15,2166,190],{}," and ",[15,2169,194],{}," props with sensible defaults",[34,2172,2173,2176,2177,2179],{},[37,2174,2175],{},"Style Binding",": Use ",[15,2178,382],{}," to set CSS custom properties dynamically",[34,2181,2182,2185],{},[37,2183,2184],{},"CSS Variables",": Define fallback values and consume the dynamic properties",[34,2187,2188,2191],{},[37,2189,2190],{},"Validation",": Ensure prop values match available design tokens",[23,2193,2195],{"id":2194},"component-categories","Component Categories",[48,2197,2199],{"id":2198},"layout-components","Layout Components",[31,2201,2202,2207],{},[34,2203,2204,2206],{},[37,2205,365],{},": Foundational spacing and background wrapper",[34,2208,2209,2211],{},[37,2210,208],{},": Header component with flexible content areas",[48,2213,2215],{"id":2214},"content-components","Content Components",[31,2217,2218,2223],{},[34,2219,2220,2222],{},[37,2221,6],{},": Responsive linking cards with image support",[34,2224,2225,2228],{},[37,2226,2227],{},"ccm-button",": Interactive elements with consistent styling",[48,2230,2232],{"id":2231},"utility-components","Utility Components",[31,2234,2235],{},[34,2236,2237,2239],{},[37,2238,234],{},": Navigation and header utilities",[23,2241,2243],{"id":2242},"responsive-strategy","Responsive Strategy",[11,2245,2246],{},"Components use CSS Grid, Flexbox, and media queries for responsive behavior rather than breakpoint-specific classes. This approach provides more predictable layouts and better performance.",[23,2248,2250],{"id":2249},"future-considerations","Future Considerations",[11,2252,2253],{},"This programmatic approach enables future enhancements like:",[31,2255,2256,2259,2262,2265],{},[34,2257,2258],{},"Theme switching capabilities",[34,2260,2261],{},"User preference customization",[34,2263,2264],{},"Dynamic design token loading",[34,2266,2267],{},"Component variant systems",{"title":146,"searchDepth":147,"depth":147,"links":2269},[2270,2273,2277,2278,2283,2284],{"id":2017,"depth":147,"text":2018,"children":2271},[2272],{"id":2028,"depth":152,"text":2029},{"id":2058,"depth":147,"text":2059,"children":2274},[2275,2276],{"id":2062,"depth":152,"text":2063},{"id":2113,"depth":152,"text":2114},{"id":2152,"depth":147,"text":2153},{"id":2194,"depth":147,"text":2195,"children":2279},[2280,2281,2282],{"id":2198,"depth":152,"text":2199},{"id":2214,"depth":152,"text":2215},{"id":2231,"depth":152,"text":2232},{"id":2242,"depth":147,"text":2243},{"id":2249,"depth":147,"text":2250},"Foundation",[2287,2290],{"title":2288,"code":2289},"Programmatic Pattern","\u003C!-- Template -->\n\u003Ccomponent \n  :style=\"{\n    '--_component-padding': `var(--space-${size})`,\n    '--_component-bg': `var(--${backgroundColor})`\n  }\"\n>\n\n\u003C!-- CSS -->\n\u003Cstyle>\n.component {\n  --_component-padding: var(--space-l); \u002F* fallback *\u002F\n  --_component-bg: transparent; \u002F* fallback *\u002F\n  \n  padding: var(--_component-padding);\n  background: var(--_component-bg);\n}\n\u003C\u002Fstyle>\n",{"title":2291,"code":2292},"Size Prop Implementation","const props = defineProps({\n  size: {\n    type: String,\n    default: 'l',\n    validator: (value) => ['xs', 's', 'm', 'l', 'xl', '2xl', '3xl'].includes(value)\n  }\n})\n",{"tagline":2294},"Programmatic approach to consistent, scalable component design","\u002Fcomponents\u002Fdesign-system",{"title":2012,"description":146},"components\u002Fdesign-system","s70hp_eJEP2KOBmJsDVYNpWokxbavPzbcxQjjSOhdHU",1791043161789]