[{"data":1,"prerenderedAt":1926},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-elements-composables-kbd":543,"-docs-theme-elements-composables-kbd-surround":1921},{"gettingStarted":4,"api":76,"theme":167},[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,66,71],{"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,61],{"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},"DTCG","/docs/getting-started/tooling/dtcg","docs/getting-started/06.tooling/04.dtcg","i-lucide-square-code",{"title":67,"path":68,"stem":69,"icon":70},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/07.comparisons","i-lucide-file-diff",{"title":72,"path":73,"stem":74,"icon":75},"Licensing","/docs/getting-started/licensing","docs/getting-started/08.licensing","i-lucide-scale",[77],{"title":78,"path":79,"stem":80,"children":81,"icon":7},"API Reference","/docs/api","docs/api/00.index",[82,85,90,95,100,105,110,115,120,125,130,135,150,155,160,165],{"title":83,"path":79,"stem":80,"icon":84},"Overview","i-lucide-book-text",{"title":86,"path":87,"stem":88,"icon":89},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":91,"path":92,"stem":93,"icon":94},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":96,"path":97,"stem":98,"icon":99},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":101,"path":102,"stem":103,"icon":104},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":106,"path":107,"stem":108,"icon":109},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":111,"path":112,"stem":113,"icon":114},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":116,"path":117,"stem":118,"icon":119},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":121,"path":122,"stem":123,"icon":124},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":126,"path":127,"stem":128,"icon":129},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":131,"path":132,"stem":133,"icon":134},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":136,"path":137,"stem":138,"children":139,"icon":149},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[140,141,145],{"title":83,"path":137,"stem":138},{"title":142,"path":143,"stem":144},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":146,"path":147,"stem":148},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":151,"path":152,"stem":153,"icon":154},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":156,"path":157,"stem":158,"icon":159},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":161,"path":162,"stem":163,"icon":164},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":156,"path":157,"stem":166,"icon":159},"docs/api/14.imports",[168,241,335,425,498],{"title":169,"path":170,"stem":171,"children":172,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[173,174,179],{"title":83,"path":170,"stem":171,"icon":84},{"title":175,"path":176,"stem":177,"icon":178},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":151,"icon":154,"defaultOpen":7,"path":180,"stem":181,"children":182,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[183,187,191,195,199,203,207,211,225,229,233,237],{"title":184,"path":185,"stem":186,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":188,"path":189,"stem":190,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":192,"path":193,"stem":194,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":196,"path":197,"stem":198,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":200,"path":201,"stem":202,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":204,"path":205,"stem":206,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":208,"path":209,"stem":210,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":212,"path":213,"stem":214,"children":215,"icon":7,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[216,217,221],{"title":83,"path":213,"stem":214},{"title":218,"path":219,"stem":220},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":222,"path":223,"stem":224},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",{"title":226,"path":227,"stem":228,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":230,"path":231,"stem":232,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":234,"path":235,"stem":236,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":238,"path":239,"stem":240,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":242,"path":243,"stem":244,"children":245,"icon":7},"Elements","/docs/theme/elements","docs/theme/elements/00.index",[246,247,251],{"title":83,"path":243,"stem":244,"icon":84},{"title":248,"path":249,"stem":250,"icon":178},"Preset","/docs/theme/elements/preset","docs/theme/elements/01.preset",{"title":151,"icon":154,"defaultOpen":7,"path":252,"stem":253,"children":254,"page":7},"/docs/theme/elements/composables","docs/theme/elements/02.composables",[255,259,263,267,271,275,279,283,287,291,295,299,303,307,311,315,319,323,327,331],{"title":256,"path":257,"stem":258,"icon":7},"Abbreviation","/docs/theme/elements/composables/abbreviation","docs/theme/elements/02.composables/00.abbreviation",{"title":260,"path":261,"stem":262,"icon":7},"Address","/docs/theme/elements/composables/address","docs/theme/elements/02.composables/01.address",{"title":264,"path":265,"stem":266,"icon":7},"Body","/docs/theme/elements/composables/body","docs/theme/elements/02.composables/02.body",{"title":268,"path":269,"stem":270,"icon":7},"Caption","/docs/theme/elements/composables/caption","docs/theme/elements/02.composables/03.caption",{"title":272,"path":273,"stem":274,"icon":7},"Code","/docs/theme/elements/composables/code","docs/theme/elements/02.composables/04.code",{"title":276,"path":277,"stem":278,"icon":7},"Definition Lists","/docs/theme/elements/composables/definition-lists","docs/theme/elements/02.composables/05.definition-lists",{"title":280,"path":281,"stem":282,"icon":7},"Focus","/docs/theme/elements/composables/focus","docs/theme/elements/02.composables/06.focus",{"title":284,"path":285,"stem":286,"icon":7},"Headings","/docs/theme/elements/composables/headings","docs/theme/elements/02.composables/07.headings",{"title":288,"path":289,"stem":290,"icon":7},"Horizontal Rule","/docs/theme/elements/composables/horizontal-rule","docs/theme/elements/02.composables/08.horizontal-rule",{"title":292,"path":293,"stem":294,"icon":7},"Iframe","/docs/theme/elements/composables/iframe","docs/theme/elements/02.composables/09.iframe",{"title":296,"path":297,"stem":298,"icon":7},"Image","/docs/theme/elements/composables/image","docs/theme/elements/02.composables/10.image",{"title":300,"path":301,"stem":302,"icon":7},"Kbd","/docs/theme/elements/composables/kbd","docs/theme/elements/02.composables/11.kbd",{"title":304,"path":305,"stem":306,"icon":7},"Legend","/docs/theme/elements/composables/legend","docs/theme/elements/02.composables/12.legend",{"title":308,"path":309,"stem":310,"icon":7},"Links","/docs/theme/elements/composables/links","docs/theme/elements/02.composables/13.links",{"title":312,"path":313,"stem":314,"icon":7},"Lists","/docs/theme/elements/composables/lists","docs/theme/elements/02.composables/14.lists",{"title":316,"path":317,"stem":318,"icon":7},"Mark","/docs/theme/elements/composables/mark","docs/theme/elements/02.composables/15.mark",{"title":320,"path":321,"stem":322,"icon":7},"Output","/docs/theme/elements/composables/output","docs/theme/elements/02.composables/16.output",{"title":324,"path":325,"stem":326,"icon":7},"Paragraphs","/docs/theme/elements/composables/paragraphs","docs/theme/elements/02.composables/17.paragraphs",{"title":328,"path":329,"stem":330,"icon":7},"Selection","/docs/theme/elements/composables/selection","docs/theme/elements/02.composables/18.selection",{"title":332,"path":333,"stem":334,"icon":7},"Summary","/docs/theme/elements/composables/summary","docs/theme/elements/02.composables/19.summary",{"title":336,"path":337,"stem":338,"children":339,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[340,341],{"title":83,"path":337,"stem":338,"icon":84},{"title":151,"icon":154,"defaultOpen":32,"path":342,"stem":343,"children":344,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[345,349,353,357,361,365,369,373,377,381,385,389,393,397,401,405,409,413,417,421],{"title":346,"path":347,"stem":348},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":350,"path":351,"stem":352},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":354,"path":355,"stem":356},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":358,"path":359,"stem":360},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":362,"path":363,"stem":364},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":366,"path":367,"stem":368},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":370,"path":371,"stem":372},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":374,"path":375,"stem":376},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":378,"path":379,"stem":380},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":382,"path":383,"stem":384},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":386,"path":387,"stem":388},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":390,"path":391,"stem":392},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":394,"path":395,"stem":396},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":398,"path":399,"stem":400},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":402,"path":403,"stem":404},"Dropdown","/docs/theme/components/composables/dropdown","docs/theme/components/02.composables/14.dropdown",{"title":406,"path":407,"stem":408},"Hamburger Menu","/docs/theme/components/composables/hamburger-menu","docs/theme/components/02.composables/14.hamburger-menu",{"title":410,"path":411,"stem":412},"Breadcrumb","/docs/theme/components/composables/breadcrumb","docs/theme/components/02.composables/15.breadcrumb",{"title":414,"path":415,"stem":416},"Media","/docs/theme/components/composables/media","docs/theme/components/02.composables/15.media",{"title":418,"path":419,"stem":420},"PageHero","/docs/theme/components/composables/page-hero","docs/theme/components/02.composables/15.page-hero",{"title":422,"path":423,"stem":424},"Pagination","/docs/theme/components/composables/pagination","docs/theme/components/02.composables/15.pagination",{"title":121,"path":426,"stem":427,"children":428,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[429,430,433],{"title":83,"path":426,"stem":427,"icon":84},{"title":175,"path":431,"stem":432,"icon":178},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":151,"icon":154,"defaultOpen":7,"path":434,"stem":435,"children":436,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[437,441,445,449,452,456,460,464,468,472,476,479,483,487,491,495],{"title":438,"path":439,"stem":440,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":442,"path":443,"stem":444,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":446,"path":447,"stem":448,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":188,"path":450,"stem":451,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":453,"path":454,"stem":455,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":457,"path":458,"stem":459,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":461,"path":462,"stem":463,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":465,"path":466,"stem":467,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":469,"path":470,"stem":471,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":473,"path":474,"stem":475,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":230,"path":477,"stem":478,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":480,"path":481,"stem":482,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":484,"path":485,"stem":486,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":488,"path":489,"stem":490,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":492,"path":493,"stem":494,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":234,"path":496,"stem":497,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":499,"path":500,"stem":501,"children":502,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[503,504,507],{"title":83,"path":500,"stem":501,"icon":84},{"title":175,"path":505,"stem":506,"icon":178},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":151,"icon":154,"defaultOpen":7,"path":508,"stem":509,"children":510,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[511,515,519,523,527,531,535,539],{"title":512,"path":513,"stem":514,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":516,"path":517,"stem":518,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":520,"path":521,"stem":522,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":524,"path":525,"stem":526,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":528,"path":529,"stem":530,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":532,"path":533,"stem":534,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":536,"path":537,"stem":538,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":540,"path":541,"stem":542,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":544,"title":545,"body":546,"description":1913,"extension":1914,"links":1915,"meta":1916,"navigation":1917,"path":301,"seo":1918,"sitemap":1919,"stem":302,"__hash__":1920},"docs_theme/docs/theme/elements/02.composables/11.kbd.md","Kbd Element",{"type":547,"value":548,"toc":1906},"minimark",[549,553,566,571,576,649,1168,1186,1190,1363,1373,1377,1858,1862,1902],[550,551,83],"h2",{"id":552},"overview",[554,555,556,557,561,562,565],"p",{},"The ",[558,559,560],"code",{},"useKbdElement"," composable styles the ",[558,563,564],{},"kbd"," element for displaying keyboard shortcuts and key combinations. It creates a compact, visually distinct key cap appearance with configurable background, color, font, border radius, and padding.",[567,568],"story-preview",{":panel":569,"story":570},"true","theme-elements-kbd--default",[550,572,574],{"id":573},"usekbdelement",[558,575,560],{},[577,578,583],"pre",{"className":579,"code":580,"language":581,"meta":582,"style":582},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function useKbdElement(\n    s: Styleframe,\n    options?: WithThemes\u003CKbdElementConfig>\n): KbdElementResult\n","ts","",[558,584,585,602,619,640],{"__ignoreMap":582},[586,587,590,594,598],"span",{"class":588,"line":589},"line",1,[586,591,593],{"class":592},"spNyl","function",[586,595,597],{"class":596},"s2Zo4"," useKbdElement",[586,599,601],{"class":600},"sMK4o","(\n",[586,603,605,609,612,616],{"class":588,"line":604},2,[586,606,608],{"class":607},"sHdIc","    s",[586,610,611],{"class":600},":",[586,613,615],{"class":614},"sBMFI"," Styleframe",[586,617,618],{"class":600},",\n",[586,620,622,625,628,631,634,637],{"class":588,"line":621},3,[586,623,624],{"class":607},"    options",[586,626,627],{"class":600},"?:",[586,629,630],{"class":614}," WithThemes",[586,632,633],{"class":600},"\u003C",[586,635,636],{"class":614},"KbdElementConfig",[586,638,639],{"class":600},">\n",[586,641,643,646],{"class":588,"line":642},4,[586,644,645],{"class":600},"):",[586,647,648],{"class":614}," KbdElementResult\n",[650,651,652,842],"tabs",{},[653,654,656],"tabs-item",{"icon":655,"label":272},"i-lucide-code",[577,657,660],{"className":579,"code":658,"filename":659,"language":581,"meta":582,"style":582},"import { styleframe } from 'styleframe';\nimport { useKbdElement } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst {\n    kbdBackground,\n    kbdColor,\n    kbdFontFamily,\n    kbdFontSize,\n    kbdBorderRadius,\n    kbdPaddingBlock,\n    kbdPaddingInline,\n} = useKbdElement(s);\n\nexport default s;\n","styleframe.config.ts",[558,661,662,694,715,720,738,743,751,759,767,775,783,791,799,807,823,828],{"__ignoreMap":582},[586,663,664,668,671,675,678,681,684,688,691],{"class":588,"line":589},[586,665,667],{"class":666},"s7zQu","import",[586,669,670],{"class":600}," {",[586,672,674],{"class":673},"sTEyZ"," styleframe",[586,676,677],{"class":600}," }",[586,679,680],{"class":666}," from",[586,682,683],{"class":600}," '",[586,685,687],{"class":686},"sfazB","styleframe",[586,689,690],{"class":600},"'",[586,692,693],{"class":600},";\n",[586,695,696,698,700,702,704,706,708,711,713],{"class":588,"line":604},[586,697,667],{"class":666},[586,699,670],{"class":600},[586,701,597],{"class":673},[586,703,677],{"class":600},[586,705,680],{"class":666},[586,707,683],{"class":600},[586,709,710],{"class":686},"@styleframe/theme",[586,712,690],{"class":600},[586,714,693],{"class":600},[586,716,717],{"class":588,"line":621},[586,718,719],{"emptyLinePlaceholder":32},"\n",[586,721,722,725,728,731,733,736],{"class":588,"line":642},[586,723,724],{"class":592},"const",[586,726,727],{"class":673}," s ",[586,729,730],{"class":600},"=",[586,732,674],{"class":596},[586,734,735],{"class":673},"()",[586,737,693],{"class":600},[586,739,741],{"class":588,"line":740},5,[586,742,719],{"emptyLinePlaceholder":32},[586,744,746,748],{"class":588,"line":745},6,[586,747,724],{"class":592},[586,749,750],{"class":600}," {\n",[586,752,754,757],{"class":588,"line":753},7,[586,755,756],{"class":673},"    kbdBackground",[586,758,618],{"class":600},[586,760,762,765],{"class":588,"line":761},8,[586,763,764],{"class":673},"    kbdColor",[586,766,618],{"class":600},[586,768,770,773],{"class":588,"line":769},9,[586,771,772],{"class":673},"    kbdFontFamily",[586,774,618],{"class":600},[586,776,778,781],{"class":588,"line":777},10,[586,779,780],{"class":673},"    kbdFontSize",[586,782,618],{"class":600},[586,784,786,789],{"class":588,"line":785},11,[586,787,788],{"class":673},"    kbdBorderRadius",[586,790,618],{"class":600},[586,792,794,797],{"class":588,"line":793},12,[586,795,796],{"class":673},"    kbdPaddingBlock",[586,798,618],{"class":600},[586,800,802,805],{"class":588,"line":801},13,[586,803,804],{"class":673},"    kbdPaddingInline",[586,806,618],{"class":600},[586,808,810,813,816,818,821],{"class":588,"line":809},14,[586,811,812],{"class":600},"}",[586,814,815],{"class":600}," =",[586,817,597],{"class":596},[586,819,820],{"class":673},"(s)",[586,822,693],{"class":600},[586,824,826],{"class":588,"line":825},15,[586,827,719],{"emptyLinePlaceholder":32},[586,829,831,834,837,840],{"class":588,"line":830},16,[586,832,833],{"class":666},"export",[586,835,836],{"class":666}," default",[586,838,839],{"class":673}," s",[586,841,693],{"class":600},[653,843,844],{"icon":159,"label":320},[577,845,850],{"className":846,"code":847,"filename":848,"language":849,"meta":582,"style":582},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --kbd--background: #1e293b;\n    --kbd--color: #ffffff;\n    --kbd--font-family: var(--font-family--mono);\n    --kbd--font-size: 0.875em;\n    --kbd--border-radius: var(--border-radius--sm);\n    --kbd--padding-block: 0.1875rem;\n    --kbd--padding-inline: 0.375rem;\n}\n\nkbd {\n    background: var(--kbd--background);\n    color: var(--kbd--color);\n    font-family: var(--kbd--font-family);\n    font-size: var(--kbd--font-size);\n    border-radius: var(--kbd--border-radius);\n    padding-block: var(--kbd--padding-block);\n    padding-inline: var(--kbd--padding-inline);\n    display: inline-block;\n}\n\nkbd > kbd {\n    padding-block: 0;\n    padding-inline: 0;\n    font-size: 1em;\n}\n","styleframe/index.css","css",[558,851,852,861,876,890,909,922,938,950,962,967,971,977,994,1010,1026,1042,1058,1075,1092,1105,1110,1115,1128,1140,1151,1163],{"__ignoreMap":582},[586,853,854,856,859],{"class":588,"line":589},[586,855,611],{"class":600},[586,857,858],{"class":592},"root",[586,860,750],{"class":600},[586,862,863,866,868,871,874],{"class":588,"line":604},[586,864,865],{"class":673},"    --kbd--background",[586,867,611],{"class":600},[586,869,870],{"class":600}," #",[586,872,873],{"class":673},"1e293b",[586,875,693],{"class":600},[586,877,878,881,883,885,888],{"class":588,"line":621},[586,879,880],{"class":673},"    --kbd--color",[586,882,611],{"class":600},[586,884,870],{"class":600},[586,886,887],{"class":673},"ffffff",[586,889,693],{"class":600},[586,891,892,895,897,900,903,906],{"class":588,"line":642},[586,893,894],{"class":673},"    --kbd--font-family",[586,896,611],{"class":600},[586,898,899],{"class":596}," var",[586,901,902],{"class":600},"(",[586,904,905],{"class":673},"--font-family--mono",[586,907,908],{"class":600},");\n",[586,910,911,914,916,920],{"class":588,"line":740},[586,912,913],{"class":673},"    --kbd--font-size",[586,915,611],{"class":600},[586,917,919],{"class":918},"sbssI"," 0.875em",[586,921,693],{"class":600},[586,923,924,927,929,931,933,936],{"class":588,"line":745},[586,925,926],{"class":673},"    --kbd--border-radius",[586,928,611],{"class":600},[586,930,899],{"class":596},[586,932,902],{"class":600},[586,934,935],{"class":673},"--border-radius--sm",[586,937,908],{"class":600},[586,939,940,943,945,948],{"class":588,"line":753},[586,941,942],{"class":673},"    --kbd--padding-block",[586,944,611],{"class":600},[586,946,947],{"class":918}," 0.1875rem",[586,949,693],{"class":600},[586,951,952,955,957,960],{"class":588,"line":761},[586,953,954],{"class":673},"    --kbd--padding-inline",[586,956,611],{"class":600},[586,958,959],{"class":918}," 0.375rem",[586,961,693],{"class":600},[586,963,964],{"class":588,"line":769},[586,965,966],{"class":600},"}\n",[586,968,969],{"class":588,"line":777},[586,970,719],{"emptyLinePlaceholder":32},[586,972,973,975],{"class":588,"line":785},[586,974,564],{"class":614},[586,976,750],{"class":600},[586,978,979,983,985,987,989,992],{"class":588,"line":793},[586,980,982],{"class":981},"sqsOY","    background",[586,984,611],{"class":600},[586,986,899],{"class":596},[586,988,902],{"class":600},[586,990,991],{"class":673},"--kbd--background",[586,993,908],{"class":600},[586,995,996,999,1001,1003,1005,1008],{"class":588,"line":801},[586,997,998],{"class":981},"    color",[586,1000,611],{"class":600},[586,1002,899],{"class":596},[586,1004,902],{"class":600},[586,1006,1007],{"class":673},"--kbd--color",[586,1009,908],{"class":600},[586,1011,1012,1015,1017,1019,1021,1024],{"class":588,"line":809},[586,1013,1014],{"class":981},"    font-family",[586,1016,611],{"class":600},[586,1018,899],{"class":596},[586,1020,902],{"class":600},[586,1022,1023],{"class":673},"--kbd--font-family",[586,1025,908],{"class":600},[586,1027,1028,1031,1033,1035,1037,1040],{"class":588,"line":825},[586,1029,1030],{"class":981},"    font-size",[586,1032,611],{"class":600},[586,1034,899],{"class":596},[586,1036,902],{"class":600},[586,1038,1039],{"class":673},"--kbd--font-size",[586,1041,908],{"class":600},[586,1043,1044,1047,1049,1051,1053,1056],{"class":588,"line":830},[586,1045,1046],{"class":981},"    border-radius",[586,1048,611],{"class":600},[586,1050,899],{"class":596},[586,1052,902],{"class":600},[586,1054,1055],{"class":673},"--kbd--border-radius",[586,1057,908],{"class":600},[586,1059,1061,1064,1066,1068,1070,1073],{"class":588,"line":1060},17,[586,1062,1063],{"class":981},"    padding-block",[586,1065,611],{"class":600},[586,1067,899],{"class":596},[586,1069,902],{"class":600},[586,1071,1072],{"class":673},"--kbd--padding-block",[586,1074,908],{"class":600},[586,1076,1078,1081,1083,1085,1087,1090],{"class":588,"line":1077},18,[586,1079,1080],{"class":981},"    padding-inline",[586,1082,611],{"class":600},[586,1084,899],{"class":596},[586,1086,902],{"class":600},[586,1088,1089],{"class":673},"--kbd--padding-inline",[586,1091,908],{"class":600},[586,1093,1095,1098,1100,1103],{"class":588,"line":1094},19,[586,1096,1097],{"class":981},"    display",[586,1099,611],{"class":600},[586,1101,1102],{"class":673}," inline-block",[586,1104,693],{"class":600},[586,1106,1108],{"class":588,"line":1107},20,[586,1109,966],{"class":600},[586,1111,1113],{"class":588,"line":1112},21,[586,1114,719],{"emptyLinePlaceholder":32},[586,1116,1118,1120,1123,1126],{"class":588,"line":1117},22,[586,1119,564],{"class":614},[586,1121,1122],{"class":600}," >",[586,1124,1125],{"class":614}," kbd",[586,1127,750],{"class":600},[586,1129,1131,1133,1135,1138],{"class":588,"line":1130},23,[586,1132,1063],{"class":981},[586,1134,611],{"class":600},[586,1136,1137],{"class":918}," 0",[586,1139,693],{"class":600},[586,1141,1143,1145,1147,1149],{"class":588,"line":1142},24,[586,1144,1080],{"class":981},[586,1146,611],{"class":600},[586,1148,1137],{"class":918},[586,1150,693],{"class":600},[586,1152,1154,1156,1158,1161],{"class":588,"line":1153},25,[586,1155,1030],{"class":981},[586,1157,611],{"class":600},[586,1159,1160],{"class":918}," 1em",[586,1162,693],{"class":600},[586,1164,1166],{"class":588,"line":1165},26,[586,1167,966],{"class":600},[554,1169,1170,1171,1174,1175,1177,1178,1181,1182,1185],{},"The composable also sets ",[558,1172,1173],{},"display: inline-block"," on the ",[558,1176,564],{}," element. Nested ",[558,1179,1180],{},"kbd > kbd"," elements have their padding and font size reset to avoid double-styling compound key combinations like ",[558,1183,1184],{},"Ctrl+C",".",[550,1187,1189],{"id":1188},"default-values","Default Values",[1191,1192,1193,1212],"table",{},[1194,1195,1196],"thead",{},[1197,1198,1199,1203,1206,1209],"tr",{},[1200,1201,1202],"th",{},"Option",[1200,1204,1205],{},"Default",[1200,1207,1208],{},"Variable",[1200,1210,1211],{},"Export",[1213,1214,1215,1237,1258,1279,1300,1321,1342],"tbody",{},[1197,1216,1217,1223,1228,1232],{},[1218,1219,1220],"td",{},[558,1221,1222],{},"background",[1218,1224,1225],{},[558,1226,1227],{},"\"#1e293b\"",[1218,1229,1230],{},[558,1231,991],{},[1218,1233,1234],{},[558,1235,1236],{},"kbdBackground",[1197,1238,1239,1244,1249,1253],{},[1218,1240,1241],{},[558,1242,1243],{},"color",[1218,1245,1246],{},[558,1247,1248],{},"\"#ffffff\"",[1218,1250,1251],{},[558,1252,1007],{},[1218,1254,1255],{},[558,1256,1257],{},"kbdColor",[1197,1259,1260,1265,1270,1274],{},[1218,1261,1262],{},[558,1263,1264],{},"fontFamily",[1218,1266,1267],{},[558,1268,1269],{},"\"@font-family.mono\"",[1218,1271,1272],{},[558,1273,1023],{},[1218,1275,1276],{},[558,1277,1278],{},"kbdFontFamily",[1197,1280,1281,1286,1291,1295],{},[1218,1282,1283],{},[558,1284,1285],{},"fontSize",[1218,1287,1288],{},[558,1289,1290],{},"\"0.875em\"",[1218,1292,1293],{},[558,1294,1039],{},[1218,1296,1297],{},[558,1298,1299],{},"kbdFontSize",[1197,1301,1302,1307,1312,1316],{},[1218,1303,1304],{},[558,1305,1306],{},"borderRadius",[1218,1308,1309],{},[558,1310,1311],{},"\"@border-radius.sm\"",[1218,1313,1314],{},[558,1315,1055],{},[1218,1317,1318],{},[558,1319,1320],{},"kbdBorderRadius",[1197,1322,1323,1328,1333,1337],{},[1218,1324,1325],{},[558,1326,1327],{},"paddingBlock",[1218,1329,1330],{},[558,1331,1332],{},"\"0.1875rem\"",[1218,1334,1335],{},[558,1336,1072],{},[1218,1338,1339],{},[558,1340,1341],{},"kbdPaddingBlock",[1197,1343,1344,1349,1354,1358],{},[1218,1345,1346],{},[558,1347,1348],{},"paddingInline",[1218,1350,1351],{},[558,1352,1353],{},"\"0.375rem\"",[1218,1355,1356],{},[558,1357,1089],{},[1218,1359,1360],{},[558,1361,1362],{},"kbdPaddingInline",[554,1364,1365,1366,1369,1370,1185],{},"The default configuration includes a dark theme that inverts the colors: ",[558,1367,1368],{},"background: \"@color.white\""," and ",[558,1371,1372],{},"color: \"@color.black\"",[550,1374,1376],{"id":1375},"custom-values","Custom Values",[650,1378,1379,1578],{},[653,1380,1381],{"icon":655,"label":272},[577,1382,1384],{"className":579,"code":1383,"filename":659,"language":581,"meta":582,"style":582},"import { styleframe } from 'styleframe';\nimport { useKbdElement } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { kbdBackground, kbdColor } = useKbdElement(s, {\n    background: '@color.gray-100',\n    color: '@color.gray-800',\n    borderRadius: '@border-radius.md',\n    paddingBlock: '0.25rem',\n    paddingInline: '0.5rem',\n});\n\nexport default s;\n",[558,1385,1386,1406,1426,1430,1444,1448,1476,1492,1507,1523,1539,1555,1564,1568],{"__ignoreMap":582},[586,1387,1388,1390,1392,1394,1396,1398,1400,1402,1404],{"class":588,"line":589},[586,1389,667],{"class":666},[586,1391,670],{"class":600},[586,1393,674],{"class":673},[586,1395,677],{"class":600},[586,1397,680],{"class":666},[586,1399,683],{"class":600},[586,1401,687],{"class":686},[586,1403,690],{"class":600},[586,1405,693],{"class":600},[586,1407,1408,1410,1412,1414,1416,1418,1420,1422,1424],{"class":588,"line":604},[586,1409,667],{"class":666},[586,1411,670],{"class":600},[586,1413,597],{"class":673},[586,1415,677],{"class":600},[586,1417,680],{"class":666},[586,1419,683],{"class":600},[586,1421,710],{"class":686},[586,1423,690],{"class":600},[586,1425,693],{"class":600},[586,1427,1428],{"class":588,"line":621},[586,1429,719],{"emptyLinePlaceholder":32},[586,1431,1432,1434,1436,1438,1440,1442],{"class":588,"line":642},[586,1433,724],{"class":592},[586,1435,727],{"class":673},[586,1437,730],{"class":600},[586,1439,674],{"class":596},[586,1441,735],{"class":673},[586,1443,693],{"class":600},[586,1445,1446],{"class":588,"line":740},[586,1447,719],{"emptyLinePlaceholder":32},[586,1449,1450,1452,1454,1457,1460,1463,1465,1467,1469,1472,1474],{"class":588,"line":745},[586,1451,724],{"class":592},[586,1453,670],{"class":600},[586,1455,1456],{"class":673}," kbdBackground",[586,1458,1459],{"class":600},",",[586,1461,1462],{"class":673}," kbdColor ",[586,1464,812],{"class":600},[586,1466,815],{"class":600},[586,1468,597],{"class":596},[586,1470,1471],{"class":673},"(s",[586,1473,1459],{"class":600},[586,1475,750],{"class":600},[586,1477,1478,1481,1483,1485,1488,1490],{"class":588,"line":753},[586,1479,982],{"class":1480},"swJcz",[586,1482,611],{"class":600},[586,1484,683],{"class":600},[586,1486,1487],{"class":686},"@color.gray-100",[586,1489,690],{"class":600},[586,1491,618],{"class":600},[586,1493,1494,1496,1498,1500,1503,1505],{"class":588,"line":761},[586,1495,998],{"class":1480},[586,1497,611],{"class":600},[586,1499,683],{"class":600},[586,1501,1502],{"class":686},"@color.gray-800",[586,1504,690],{"class":600},[586,1506,618],{"class":600},[586,1508,1509,1512,1514,1516,1519,1521],{"class":588,"line":769},[586,1510,1511],{"class":1480},"    borderRadius",[586,1513,611],{"class":600},[586,1515,683],{"class":600},[586,1517,1518],{"class":686},"@border-radius.md",[586,1520,690],{"class":600},[586,1522,618],{"class":600},[586,1524,1525,1528,1530,1532,1535,1537],{"class":588,"line":777},[586,1526,1527],{"class":1480},"    paddingBlock",[586,1529,611],{"class":600},[586,1531,683],{"class":600},[586,1533,1534],{"class":686},"0.25rem",[586,1536,690],{"class":600},[586,1538,618],{"class":600},[586,1540,1541,1544,1546,1548,1551,1553],{"class":588,"line":785},[586,1542,1543],{"class":1480},"    paddingInline",[586,1545,611],{"class":600},[586,1547,683],{"class":600},[586,1549,1550],{"class":686},"0.5rem",[586,1552,690],{"class":600},[586,1554,618],{"class":600},[586,1556,1557,1559,1562],{"class":588,"line":793},[586,1558,812],{"class":600},[586,1560,1561],{"class":673},")",[586,1563,693],{"class":600},[586,1565,1566],{"class":588,"line":801},[586,1567,719],{"emptyLinePlaceholder":32},[586,1569,1570,1572,1574,1576],{"class":588,"line":809},[586,1571,833],{"class":666},[586,1573,836],{"class":666},[586,1575,839],{"class":673},[586,1577,693],{"class":600},[653,1579,1580],{"icon":159,"label":320},[577,1581,1583],{"className":846,"code":1582,"filename":848,"language":849,"meta":582,"style":582},":root {\n    --kbd--background: var(--color--gray-100);\n    --kbd--color: var(--color--gray-800);\n    --kbd--font-family: var(--font-family--mono);\n    --kbd--font-size: 0.875em;\n    --kbd--border-radius: var(--border-radius--md);\n    --kbd--padding-block: 0.25rem;\n    --kbd--padding-inline: 0.5rem;\n}\n\nkbd {\n    background: var(--kbd--background);\n    color: var(--kbd--color);\n    font-family: var(--kbd--font-family);\n    font-size: var(--kbd--font-size);\n    border-radius: var(--kbd--border-radius);\n    padding-block: var(--kbd--padding-block);\n    padding-inline: var(--kbd--padding-inline);\n    display: inline-block;\n}\n\nkbd > kbd {\n    padding-block: 0;\n    padding-inline: 0;\n    font-size: 1em;\n}\n",[558,1584,1585,1593,1608,1623,1637,1647,1662,1673,1684,1688,1692,1698,1712,1726,1740,1754,1768,1782,1796,1806,1810,1814,1824,1834,1844,1854],{"__ignoreMap":582},[586,1586,1587,1589,1591],{"class":588,"line":589},[586,1588,611],{"class":600},[586,1590,858],{"class":592},[586,1592,750],{"class":600},[586,1594,1595,1597,1599,1601,1603,1606],{"class":588,"line":604},[586,1596,865],{"class":673},[586,1598,611],{"class":600},[586,1600,899],{"class":596},[586,1602,902],{"class":600},[586,1604,1605],{"class":673},"--color--gray-100",[586,1607,908],{"class":600},[586,1609,1610,1612,1614,1616,1618,1621],{"class":588,"line":621},[586,1611,880],{"class":673},[586,1613,611],{"class":600},[586,1615,899],{"class":596},[586,1617,902],{"class":600},[586,1619,1620],{"class":673},"--color--gray-800",[586,1622,908],{"class":600},[586,1624,1625,1627,1629,1631,1633,1635],{"class":588,"line":642},[586,1626,894],{"class":673},[586,1628,611],{"class":600},[586,1630,899],{"class":596},[586,1632,902],{"class":600},[586,1634,905],{"class":673},[586,1636,908],{"class":600},[586,1638,1639,1641,1643,1645],{"class":588,"line":740},[586,1640,913],{"class":673},[586,1642,611],{"class":600},[586,1644,919],{"class":918},[586,1646,693],{"class":600},[586,1648,1649,1651,1653,1655,1657,1660],{"class":588,"line":745},[586,1650,926],{"class":673},[586,1652,611],{"class":600},[586,1654,899],{"class":596},[586,1656,902],{"class":600},[586,1658,1659],{"class":673},"--border-radius--md",[586,1661,908],{"class":600},[586,1663,1664,1666,1668,1671],{"class":588,"line":753},[586,1665,942],{"class":673},[586,1667,611],{"class":600},[586,1669,1670],{"class":918}," 0.25rem",[586,1672,693],{"class":600},[586,1674,1675,1677,1679,1682],{"class":588,"line":761},[586,1676,954],{"class":673},[586,1678,611],{"class":600},[586,1680,1681],{"class":918}," 0.5rem",[586,1683,693],{"class":600},[586,1685,1686],{"class":588,"line":769},[586,1687,966],{"class":600},[586,1689,1690],{"class":588,"line":777},[586,1691,719],{"emptyLinePlaceholder":32},[586,1693,1694,1696],{"class":588,"line":785},[586,1695,564],{"class":614},[586,1697,750],{"class":600},[586,1699,1700,1702,1704,1706,1708,1710],{"class":588,"line":793},[586,1701,982],{"class":981},[586,1703,611],{"class":600},[586,1705,899],{"class":596},[586,1707,902],{"class":600},[586,1709,991],{"class":673},[586,1711,908],{"class":600},[586,1713,1714,1716,1718,1720,1722,1724],{"class":588,"line":801},[586,1715,998],{"class":981},[586,1717,611],{"class":600},[586,1719,899],{"class":596},[586,1721,902],{"class":600},[586,1723,1007],{"class":673},[586,1725,908],{"class":600},[586,1727,1728,1730,1732,1734,1736,1738],{"class":588,"line":809},[586,1729,1014],{"class":981},[586,1731,611],{"class":600},[586,1733,899],{"class":596},[586,1735,902],{"class":600},[586,1737,1023],{"class":673},[586,1739,908],{"class":600},[586,1741,1742,1744,1746,1748,1750,1752],{"class":588,"line":825},[586,1743,1030],{"class":981},[586,1745,611],{"class":600},[586,1747,899],{"class":596},[586,1749,902],{"class":600},[586,1751,1039],{"class":673},[586,1753,908],{"class":600},[586,1755,1756,1758,1760,1762,1764,1766],{"class":588,"line":830},[586,1757,1046],{"class":981},[586,1759,611],{"class":600},[586,1761,899],{"class":596},[586,1763,902],{"class":600},[586,1765,1055],{"class":673},[586,1767,908],{"class":600},[586,1769,1770,1772,1774,1776,1778,1780],{"class":588,"line":1060},[586,1771,1063],{"class":981},[586,1773,611],{"class":600},[586,1775,899],{"class":596},[586,1777,902],{"class":600},[586,1779,1072],{"class":673},[586,1781,908],{"class":600},[586,1783,1784,1786,1788,1790,1792,1794],{"class":588,"line":1077},[586,1785,1080],{"class":981},[586,1787,611],{"class":600},[586,1789,899],{"class":596},[586,1791,902],{"class":600},[586,1793,1089],{"class":673},[586,1795,908],{"class":600},[586,1797,1798,1800,1802,1804],{"class":588,"line":1094},[586,1799,1097],{"class":981},[586,1801,611],{"class":600},[586,1803,1102],{"class":673},[586,1805,693],{"class":600},[586,1807,1808],{"class":588,"line":1107},[586,1809,966],{"class":600},[586,1811,1812],{"class":588,"line":1112},[586,1813,719],{"emptyLinePlaceholder":32},[586,1815,1816,1818,1820,1822],{"class":588,"line":1117},[586,1817,564],{"class":614},[586,1819,1122],{"class":600},[586,1821,1125],{"class":614},[586,1823,750],{"class":600},[586,1825,1826,1828,1830,1832],{"class":588,"line":1130},[586,1827,1063],{"class":981},[586,1829,611],{"class":600},[586,1831,1137],{"class":918},[586,1833,693],{"class":600},[586,1835,1836,1838,1840,1842],{"class":588,"line":1142},[586,1837,1080],{"class":981},[586,1839,611],{"class":600},[586,1841,1137],{"class":918},[586,1843,693],{"class":600},[586,1845,1846,1848,1850,1852],{"class":588,"line":1153},[586,1847,1030],{"class":981},[586,1849,611],{"class":600},[586,1851,1160],{"class":918},[586,1853,693],{"class":600},[586,1855,1856],{"class":588,"line":1165},[586,1857,966],{"class":600},[550,1859,1861],{"id":1860},"best-practices","Best Practices",[1863,1864,1865,1873,1879,1889],"ul",{},[1866,1867,1868,1872],"li",{},[1869,1870,1871],"strong",{},"Use high-contrast colors",": Ensure sufficient contrast between background and text for readability.",[1866,1874,1875,1878],{},[1869,1876,1877],{},"Use a monospace font",": The default monospace font helps users recognize keyboard shortcuts at a glance.",[1866,1880,1881,1884,1885,1888],{},[1869,1882,1883],{},"Customize per-theme",": The default dark theme inverts colors automatically. Override the ",[558,1886,1887],{},"themes"," option if your dark mode needs different values.",[1866,1890,1891,1894,1895,1897,1898,1901],{},[1869,1892,1893],{},"Rely on the nested reset",": Compound key combinations using nested ",[558,1896,564],{}," elements (e.g., ",[558,1899,1900],{},"\u003Ckbd>\u003Ckbd>Ctrl\u003C/kbd>+\u003Ckbd>C\u003C/kbd>\u003C/kbd>",") are automatically handled.",[1903,1904,1905],"style",{},"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 pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":582,"searchDepth":604,"depth":604,"links":1907},[1908,1909,1910,1911,1912],{"id":552,"depth":604,"text":83},{"id":573,"depth":604,"text":560},{"id":1188,"depth":604,"text":1189},{"id":1375,"depth":604,"text":1376},{"id":1860,"depth":604,"text":1861},"Style keyboard input elements with configurable background, color, font, border radius, and padding using the useKbdElement composable.","md",null,{},{"title":300,"icon":7},{"title":545,"description":1913},{"loc":301},"8nZrE8ePp3N1QkWvkHFRt0nbXDMjCYb-YX3-ySP0vro",[1922,1924],{"title":296,"path":297,"stem":298,"description":1923,"icon":7,"children":-1},"Align image and SVG elements to vertical middle using the useImgElement composable.",{"title":304,"path":305,"stem":306,"description":1925,"icon":7,"children":-1},"Style legend elements for proper form layout using the useLegendElement composable.",1778412269617]