[{"data":1,"prerenderedAt":3526},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-modifiers-composables-structural":407,"-docs-theme-modifiers-composables-structural-surround":3521},{"gettingStarted":4,"api":57,"theme":148},[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,31,52],{"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,"icon":30},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/04.comparisons","i-lucide-file-diff",{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/05.tooling",[37,42,47],{"title":38,"path":39,"stem":40,"icon":41},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/05.tooling/01.cli","i-lucide-square-terminal",{"title":43,"path":44,"stem":45,"icon":46},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/05.tooling/02.scanner","i-lucide-view",{"title":48,"path":49,"stem":50,"icon":51},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/05.tooling/03.figma-plugin","i-simple-icons-figma",{"title":53,"path":54,"stem":55,"icon":56},"Licensing","/docs/getting-started/licensing","docs/getting-started/06.licensing","i-lucide-scale",[58],{"title":59,"path":60,"stem":61,"children":62,"icon":7},"API Reference","/docs/api","docs/api/00.index",[63,66,71,76,81,86,91,96,101,106,111,116,131,136,141,146],{"title":64,"path":60,"stem":61,"icon":65},"Overview","i-lucide-book-text",{"title":67,"path":68,"stem":69,"icon":70},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":72,"path":73,"stem":74,"icon":75},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":77,"path":78,"stem":79,"icon":80},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":82,"path":83,"stem":84,"icon":85},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":87,"path":88,"stem":89,"icon":90},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":92,"path":93,"stem":94,"icon":95},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":97,"path":98,"stem":99,"icon":100},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":102,"path":103,"stem":104,"icon":105},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":107,"path":108,"stem":109,"icon":110},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":112,"path":113,"stem":114,"icon":115},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":117,"path":118,"stem":119,"children":120,"icon":130},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[121,122,126],{"title":64,"path":118,"stem":119},{"title":123,"path":124,"stem":125},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":127,"path":128,"stem":129},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":132,"path":133,"stem":134,"icon":135},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":137,"path":138,"stem":139,"icon":140},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":142,"path":143,"stem":144,"icon":145},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":137,"path":138,"stem":147,"icon":140},"docs/api/14.imports",[149,223,289,362],{"title":150,"path":151,"stem":152,"children":153,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[154,155,160],{"title":64,"path":151,"stem":152,"icon":65},{"title":156,"path":157,"stem":158,"icon":159},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":132,"icon":135,"defaultOpen":7,"path":161,"stem":162,"children":163,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[164,168,172,176,180,184,188,192,207,211,215,219],{"title":165,"path":166,"stem":167,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":169,"path":170,"stem":171,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":173,"path":174,"stem":175,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":177,"path":178,"stem":179,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":181,"path":182,"stem":183,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":185,"path":186,"stem":187,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":189,"path":190,"stem":191,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":193,"path":194,"stem":195,"children":196,"icon":7,"pro":206,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[197,198,202],{"title":64,"path":194,"stem":195},{"title":199,"path":200,"stem":201},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":203,"path":204,"stem":205},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",true,{"title":208,"path":209,"stem":210,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":212,"path":213,"stem":214,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":216,"path":217,"stem":218,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":220,"path":221,"stem":222,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":224,"path":225,"stem":226,"children":227,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[228,229],{"title":64,"path":225,"stem":226,"icon":65},{"title":132,"icon":135,"defaultOpen":206,"path":230,"stem":231,"children":232,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[233,237,241,245,249,253,257,261,265,269,273,277,281,285],{"title":234,"path":235,"stem":236},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":238,"path":239,"stem":240},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":242,"path":243,"stem":244},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":246,"path":247,"stem":248},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":250,"path":251,"stem":252},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":254,"path":255,"stem":256},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":258,"path":259,"stem":260},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":262,"path":263,"stem":264},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":266,"path":267,"stem":268},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":270,"path":271,"stem":272},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":274,"path":275,"stem":276},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":278,"path":279,"stem":280},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":282,"path":283,"stem":284},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":286,"path":287,"stem":288},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":102,"path":290,"stem":291,"children":292,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[293,294,297],{"title":64,"path":290,"stem":291,"icon":65},{"title":156,"path":295,"stem":296,"icon":159},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":298,"stem":299,"children":300,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[301,305,309,313,316,320,324,328,332,336,340,343,347,351,355,359],{"title":302,"path":303,"stem":304,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":306,"path":307,"stem":308,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":310,"path":311,"stem":312,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":169,"path":314,"stem":315,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":317,"path":318,"stem":319,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":321,"path":322,"stem":323,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":325,"path":326,"stem":327,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":329,"path":330,"stem":331,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":333,"path":334,"stem":335,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":337,"path":338,"stem":339,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":212,"path":341,"stem":342,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":344,"path":345,"stem":346,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":348,"path":349,"stem":350,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":352,"path":353,"stem":354,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":356,"path":357,"stem":358,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":216,"path":360,"stem":361,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":363,"path":364,"stem":365,"children":366,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[367,368,371],{"title":64,"path":364,"stem":365,"icon":65},{"title":156,"path":369,"stem":370,"icon":159},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":372,"stem":373,"children":374,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[375,379,383,387,391,395,399,403],{"title":376,"path":377,"stem":378,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":380,"path":381,"stem":382,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":384,"path":385,"stem":386,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":388,"path":389,"stem":390,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":392,"path":393,"stem":394,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":396,"path":397,"stem":398,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":400,"path":401,"stem":402,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":404,"path":405,"stem":406,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":408,"title":409,"body":410,"description":3513,"extension":3514,"links":3515,"meta":3516,"navigation":3517,"path":405,"seo":3518,"sitemap":3519,"stem":406,"__hash__":3520},"docs_theme/docs/theme/modifiers/02.composables/07.structural.md","Structural Modifiers",{"type":411,"value":412,"toc":3491},"minimark",[413,417,434,438,441,476,482,489,991,996,1027,1033,1039,1323,1326,1350,1356,1362,1365,1389,1395,1401,1920,1923,1947,1953,1959,1962,1986,1992,1998,2001,2025,2031,2037,2040,2064,2070,2076,2079,2103,2109,2115,2393,2396,2420,2426,2432,2437,2581,2585,2589,2984,2988,3395,3399,3431,3435,3487],[414,415,64],"h2",{"id":416},"overview",[418,419,420,421,425,426,429,430,433],"p",{},"Structural modifiers let you apply utility styles conditionally based on an element's position within its parent. They wrap utility declarations in CSS structural pseudo-class selectors like ",[422,423,424],"code",{},":first-child",", ",[422,427,428],{},":last-child",", and ",[422,431,432],{},":nth-child()",", generating variant utility classes that target elements by position.",[414,435,437],{"id":436},"why-use-structural-modifiers","Why Use Structural Modifiers?",[418,439,440],{},"Structural modifiers help you:",[442,443,444,452,458,464,470],"ul",{},[445,446,447,451],"li",{},[448,449,450],"strong",{},"Style list items differently",": Apply unique styles to the first, last, or alternating items",[445,453,454,457],{},[448,455,456],{},"Create zebra striping",": Use odd/even modifiers for table rows or list items",[445,459,460,463],{},[448,461,462],{},"Remove redundant borders",": Remove top/bottom borders on first/last items",[445,465,466,469],{},[448,467,468],{},"Handle edge cases",": Style only-child or empty elements differently",[445,471,472,475],{},[448,473,474],{},"Build dynamic layouts",": Adapt styling based on element position without JavaScript",[414,477,479],{"id":478},"usefirstmodifier",[422,480,481],{},"useFirstModifier",[418,483,484,485,488],{},"The ",[422,486,487],{},"useFirstModifier()"," function creates a modifier that applies styles to the first child element.",[490,491,492,763,896],"tabs",{},[493,494,497],"tabs-item",{"icon":495,"label":496},"i-lucide-code","Code",[498,499,505],"pre",{"className":500,"code":501,"filename":502,"language":503,"meta":504,"style":504},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useBorderWidthUtility, useBorderRadiusUtility } from \"@styleframe/theme\";\nimport { useFirstModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst first = useFirstModifier(s);\n\nuseBorderWidthUtility(s, {\n    0: '0',\n}, [first]);\n\nuseBorderRadiusUtility(s, {\n    'top-md': '0.375rem 0.375rem 0 0',\n}, [first]);\n\nexport default s;\n","styleframe.config.ts","ts","",[422,506,507,543,572,594,600,621,626,643,648,662,684,695,700,712,735,744,749],{"__ignoreMap":504},[508,509,512,516,520,524,527,530,533,537,540],"span",{"class":510,"line":511},"line",1,[508,513,515],{"class":514},"s7zQu","import",[508,517,519],{"class":518},"sMK4o"," {",[508,521,523],{"class":522},"sTEyZ"," styleframe",[508,525,526],{"class":518}," }",[508,528,529],{"class":514}," from",[508,531,532],{"class":518}," \"",[508,534,536],{"class":535},"sfazB","styleframe",[508,538,539],{"class":518},"\"",[508,541,542],{"class":518},";\n",[508,544,546,548,550,553,556,559,561,563,565,568,570],{"class":510,"line":545},2,[508,547,515],{"class":514},[508,549,519],{"class":518},[508,551,552],{"class":522}," useBorderWidthUtility",[508,554,555],{"class":518},",",[508,557,558],{"class":522}," useBorderRadiusUtility",[508,560,526],{"class":518},[508,562,529],{"class":514},[508,564,532],{"class":518},[508,566,567],{"class":535},"@styleframe/theme",[508,569,539],{"class":518},[508,571,542],{"class":518},[508,573,575,577,579,582,584,586,588,590,592],{"class":510,"line":574},3,[508,576,515],{"class":514},[508,578,519],{"class":518},[508,580,581],{"class":522}," useFirstModifier",[508,583,526],{"class":518},[508,585,529],{"class":514},[508,587,532],{"class":518},[508,589,567],{"class":535},[508,591,539],{"class":518},[508,593,542],{"class":518},[508,595,597],{"class":510,"line":596},4,[508,598,599],{"emptyLinePlaceholder":206},"\n",[508,601,603,607,610,613,616,619],{"class":510,"line":602},5,[508,604,606],{"class":605},"spNyl","const",[508,608,609],{"class":522}," s ",[508,611,612],{"class":518},"=",[508,614,523],{"class":615},"s2Zo4",[508,617,618],{"class":522},"()",[508,620,542],{"class":518},[508,622,624],{"class":510,"line":623},6,[508,625,599],{"emptyLinePlaceholder":206},[508,627,629,631,634,636,638,641],{"class":510,"line":628},7,[508,630,606],{"class":605},[508,632,633],{"class":522}," first ",[508,635,612],{"class":518},[508,637,581],{"class":615},[508,639,640],{"class":522},"(s)",[508,642,542],{"class":518},[508,644,646],{"class":510,"line":645},8,[508,647,599],{"emptyLinePlaceholder":206},[508,649,651,654,657,659],{"class":510,"line":650},9,[508,652,653],{"class":615},"useBorderWidthUtility",[508,655,656],{"class":522},"(s",[508,658,555],{"class":518},[508,660,661],{"class":518}," {\n",[508,663,665,669,672,675,678,681],{"class":510,"line":664},10,[508,666,668],{"class":667},"sbssI","    0",[508,670,671],{"class":518},":",[508,673,674],{"class":518}," '",[508,676,677],{"class":535},"0",[508,679,680],{"class":518},"'",[508,682,683],{"class":518},",\n",[508,685,687,690,693],{"class":510,"line":686},11,[508,688,689],{"class":518},"},",[508,691,692],{"class":522}," [first])",[508,694,542],{"class":518},[508,696,698],{"class":510,"line":697},12,[508,699,599],{"emptyLinePlaceholder":206},[508,701,703,706,708,710],{"class":510,"line":702},13,[508,704,705],{"class":615},"useBorderRadiusUtility",[508,707,656],{"class":522},[508,709,555],{"class":518},[508,711,661],{"class":518},[508,713,715,718,722,724,726,728,731,733],{"class":510,"line":714},14,[508,716,717],{"class":518},"    '",[508,719,721],{"class":720},"swJcz","top-md",[508,723,680],{"class":518},[508,725,671],{"class":518},[508,727,674],{"class":518},[508,729,730],{"class":535},"0.375rem 0.375rem 0 0",[508,732,680],{"class":518},[508,734,683],{"class":518},[508,736,738,740,742],{"class":510,"line":737},15,[508,739,689],{"class":518},[508,741,692],{"class":522},[508,743,542],{"class":518},[508,745,747],{"class":510,"line":746},16,[508,748,599],{"emptyLinePlaceholder":206},[508,750,752,755,758,761],{"class":510,"line":751},17,[508,753,754],{"class":514},"export",[508,756,757],{"class":514}," default",[508,759,760],{"class":522}," s",[508,762,542],{"class":518},[493,764,766],{"icon":140,"label":765},"Output",[498,767,772],{"className":768,"code":769,"filename":770,"language":771,"meta":504,"style":504},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","._border-width\\:0 { border-width: 0; }\n\n._first\\:border-width\\:0 {\n    &:first-child { border-width: 0; }\n}\n\n._first\\:border-radius\\:top-md {\n    &:first-child { border-radius: 0.375rem 0.375rem 0 0; }\n}\n","styleframe/index.css","css",[422,773,774,805,809,827,843,848,852,869,892],{"__ignoreMap":504},[508,775,776,779,783,786,788,790,794,796,799,802],{"class":510,"line":511},[508,777,778],{"class":518},".",[508,780,782],{"class":781},"sBMFI","_border-width",[508,784,785],{"class":522},"\\:",[508,787,677],{"class":781},[508,789,519],{"class":518},[508,791,793],{"class":792},"sqsOY"," border-width",[508,795,671],{"class":518},[508,797,798],{"class":667}," 0",[508,800,801],{"class":518},";",[508,803,804],{"class":518}," }\n",[508,806,807],{"class":510,"line":545},[508,808,599],{"emptyLinePlaceholder":206},[508,810,811,813,816,818,821,823,825],{"class":510,"line":574},[508,812,778],{"class":518},[508,814,815],{"class":781},"_first",[508,817,785],{"class":522},[508,819,820],{"class":781},"border-width",[508,822,785],{"class":522},[508,824,677],{"class":781},[508,826,661],{"class":518},[508,828,829,832,834,837,839,841],{"class":510,"line":596},[508,830,831],{"class":522},"    &",[508,833,671],{"class":518},[508,835,836],{"class":522},"first-child { border-width: ",[508,838,677],{"class":667},[508,840,801],{"class":518},[508,842,804],{"class":518},[508,844,845],{"class":510,"line":602},[508,846,847],{"class":522},"}\n",[508,849,850],{"class":510,"line":623},[508,851,599],{"emptyLinePlaceholder":206},[508,853,854,856,858,860,863,865,867],{"class":510,"line":628},[508,855,778],{"class":518},[508,857,815],{"class":781},[508,859,785],{"class":522},[508,861,862],{"class":781},"border-radius",[508,864,785],{"class":522},[508,866,721],{"class":781},[508,868,661],{"class":518},[508,870,871,873,875,878,881,884,886,888,890],{"class":510,"line":645},[508,872,831],{"class":522},[508,874,671],{"class":518},[508,876,877],{"class":522},"first-child { border-radius: ",[508,879,880],{"class":667},"0.375rem",[508,882,883],{"class":667}," 0.375rem",[508,885,798],{"class":667},[508,887,798],{"class":667},[508,889,801],{"class":518},[508,891,804],{"class":518},[508,893,894],{"class":510,"line":650},[508,895,847],{"class":522},[493,897,900],{"icon":898,"label":899},"i-lucide-layout","Usage",[498,901,905],{"className":902,"code":903,"language":904,"meta":504,"style":504},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cul>\n    \u003Cli class=\"_first:border-width:0 _first:border-radius:top-md\">First item\u003C/li>\n    \u003Cli>Middle item\u003C/li>\n    \u003Cli>Last item\u003C/li>\n\u003C/ul>\n","html",[422,906,907,917,949,966,983],{"__ignoreMap":504},[508,908,909,912,914],{"class":510,"line":511},[508,910,911],{"class":518},"\u003C",[508,913,442],{"class":720},[508,915,916],{"class":518},">\n",[508,918,919,922,924,927,929,931,934,936,939,942,945,947],{"class":510,"line":545},[508,920,921],{"class":518},"    \u003C",[508,923,445],{"class":720},[508,925,926],{"class":605}," class",[508,928,612],{"class":518},[508,930,539],{"class":518},[508,932,933],{"class":535},"_first:border-width:0 _first:border-radius:top-md",[508,935,539],{"class":518},[508,937,938],{"class":518},">",[508,940,941],{"class":522},"First item",[508,943,944],{"class":518},"\u003C/",[508,946,445],{"class":720},[508,948,916],{"class":518},[508,950,951,953,955,957,960,962,964],{"class":510,"line":574},[508,952,921],{"class":518},[508,954,445],{"class":720},[508,956,938],{"class":518},[508,958,959],{"class":522},"Middle item",[508,961,944],{"class":518},[508,963,445],{"class":720},[508,965,916],{"class":518},[508,967,968,970,972,974,977,979,981],{"class":510,"line":596},[508,969,921],{"class":518},[508,971,445],{"class":720},[508,973,938],{"class":518},[508,975,976],{"class":522},"Last item",[508,978,944],{"class":518},[508,980,445],{"class":720},[508,982,916],{"class":518},[508,984,985,987,989],{"class":510,"line":602},[508,986,944],{"class":518},[508,988,442],{"class":720},[508,990,916],{"class":518},[992,993,995],"h4",{"id":994},"css-selector","CSS Selector",[997,998,999,1011],"table",{},[1000,1001,1002],"thead",{},[1003,1004,1005,1009],"tr",{},[1006,1007,1008],"th",{},"Modifier Name",[1006,1010,995],{},[1012,1013,1014],"tbody",{},[1003,1015,1016,1022],{},[1017,1018,1019],"td",{},[422,1020,1021],{},"first",[1017,1023,1024],{},[422,1025,1026],{},"&:first-child",[414,1028,1030],{"id":1029},"uselastmodifier",[422,1031,1032],{},"useLastModifier",[418,1034,484,1035,1038],{},[422,1036,1037],{},"useLastModifier()"," function creates a modifier that applies styles to the last child element.",[490,1040,1041,1197,1240],{},[493,1042,1043],{"icon":495,"label":496},[498,1044,1046],{"className":500,"code":1045,"filename":502,"language":503,"meta":504,"style":504},"import { styleframe } from \"styleframe\";\nimport { useBorderWidthUtility } from \"@styleframe/theme\";\nimport { useLastModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst last = useLastModifier(s);\n\nuseBorderWidthUtility(s, {\n    0: '0',\n}, [last]);\n\nexport default s;\n",[422,1047,1048,1068,1088,1109,1113,1127,1131,1146,1150,1160,1174,1183,1187],{"__ignoreMap":504},[508,1049,1050,1052,1054,1056,1058,1060,1062,1064,1066],{"class":510,"line":511},[508,1051,515],{"class":514},[508,1053,519],{"class":518},[508,1055,523],{"class":522},[508,1057,526],{"class":518},[508,1059,529],{"class":514},[508,1061,532],{"class":518},[508,1063,536],{"class":535},[508,1065,539],{"class":518},[508,1067,542],{"class":518},[508,1069,1070,1072,1074,1076,1078,1080,1082,1084,1086],{"class":510,"line":545},[508,1071,515],{"class":514},[508,1073,519],{"class":518},[508,1075,552],{"class":522},[508,1077,526],{"class":518},[508,1079,529],{"class":514},[508,1081,532],{"class":518},[508,1083,567],{"class":535},[508,1085,539],{"class":518},[508,1087,542],{"class":518},[508,1089,1090,1092,1094,1097,1099,1101,1103,1105,1107],{"class":510,"line":574},[508,1091,515],{"class":514},[508,1093,519],{"class":518},[508,1095,1096],{"class":522}," useLastModifier",[508,1098,526],{"class":518},[508,1100,529],{"class":514},[508,1102,532],{"class":518},[508,1104,567],{"class":535},[508,1106,539],{"class":518},[508,1108,542],{"class":518},[508,1110,1111],{"class":510,"line":596},[508,1112,599],{"emptyLinePlaceholder":206},[508,1114,1115,1117,1119,1121,1123,1125],{"class":510,"line":602},[508,1116,606],{"class":605},[508,1118,609],{"class":522},[508,1120,612],{"class":518},[508,1122,523],{"class":615},[508,1124,618],{"class":522},[508,1126,542],{"class":518},[508,1128,1129],{"class":510,"line":623},[508,1130,599],{"emptyLinePlaceholder":206},[508,1132,1133,1135,1138,1140,1142,1144],{"class":510,"line":628},[508,1134,606],{"class":605},[508,1136,1137],{"class":522}," last ",[508,1139,612],{"class":518},[508,1141,1096],{"class":615},[508,1143,640],{"class":522},[508,1145,542],{"class":518},[508,1147,1148],{"class":510,"line":645},[508,1149,599],{"emptyLinePlaceholder":206},[508,1151,1152,1154,1156,1158],{"class":510,"line":650},[508,1153,653],{"class":615},[508,1155,656],{"class":522},[508,1157,555],{"class":518},[508,1159,661],{"class":518},[508,1161,1162,1164,1166,1168,1170,1172],{"class":510,"line":664},[508,1163,668],{"class":667},[508,1165,671],{"class":518},[508,1167,674],{"class":518},[508,1169,677],{"class":535},[508,1171,680],{"class":518},[508,1173,683],{"class":518},[508,1175,1176,1178,1181],{"class":510,"line":686},[508,1177,689],{"class":518},[508,1179,1180],{"class":522}," [last])",[508,1182,542],{"class":518},[508,1184,1185],{"class":510,"line":697},[508,1186,599],{"emptyLinePlaceholder":206},[508,1188,1189,1191,1193,1195],{"class":510,"line":702},[508,1190,754],{"class":514},[508,1192,757],{"class":514},[508,1194,760],{"class":522},[508,1196,542],{"class":518},[493,1198,1199],{"icon":140,"label":765},[498,1200,1202],{"className":768,"code":1201,"filename":770,"language":771,"meta":504,"style":504},"._last\\:border-width\\:0 {\n    &:last-child { border-width: 0; }\n}\n",[422,1203,1204,1221,1236],{"__ignoreMap":504},[508,1205,1206,1208,1211,1213,1215,1217,1219],{"class":510,"line":511},[508,1207,778],{"class":518},[508,1209,1210],{"class":781},"_last",[508,1212,785],{"class":522},[508,1214,820],{"class":781},[508,1216,785],{"class":522},[508,1218,677],{"class":781},[508,1220,661],{"class":518},[508,1222,1223,1225,1227,1230,1232,1234],{"class":510,"line":545},[508,1224,831],{"class":522},[508,1226,671],{"class":518},[508,1228,1229],{"class":522},"last-child { border-width: ",[508,1231,677],{"class":667},[508,1233,801],{"class":518},[508,1235,804],{"class":518},[508,1237,1238],{"class":510,"line":574},[508,1239,847],{"class":522},[493,1241,1242],{"icon":898,"label":899},[498,1243,1245],{"className":902,"code":1244,"language":904,"meta":504,"style":504},"\u003Cul>\n    \u003Cli>First item\u003C/li>\n    \u003Cli>Middle item\u003C/li>\n    \u003Cli class=\"_last:border-width:0\">Last item (no bottom border)\u003C/li>\n\u003C/ul>\n",[422,1246,1247,1255,1271,1287,1315],{"__ignoreMap":504},[508,1248,1249,1251,1253],{"class":510,"line":511},[508,1250,911],{"class":518},[508,1252,442],{"class":720},[508,1254,916],{"class":518},[508,1256,1257,1259,1261,1263,1265,1267,1269],{"class":510,"line":545},[508,1258,921],{"class":518},[508,1260,445],{"class":720},[508,1262,938],{"class":518},[508,1264,941],{"class":522},[508,1266,944],{"class":518},[508,1268,445],{"class":720},[508,1270,916],{"class":518},[508,1272,1273,1275,1277,1279,1281,1283,1285],{"class":510,"line":574},[508,1274,921],{"class":518},[508,1276,445],{"class":720},[508,1278,938],{"class":518},[508,1280,959],{"class":522},[508,1282,944],{"class":518},[508,1284,445],{"class":720},[508,1286,916],{"class":518},[508,1288,1289,1291,1293,1295,1297,1299,1302,1304,1306,1309,1311,1313],{"class":510,"line":596},[508,1290,921],{"class":518},[508,1292,445],{"class":720},[508,1294,926],{"class":605},[508,1296,612],{"class":518},[508,1298,539],{"class":518},[508,1300,1301],{"class":535},"_last:border-width:0",[508,1303,539],{"class":518},[508,1305,938],{"class":518},[508,1307,1308],{"class":522},"Last item (no bottom border)",[508,1310,944],{"class":518},[508,1312,445],{"class":720},[508,1314,916],{"class":518},[508,1316,1317,1319,1321],{"class":510,"line":602},[508,1318,944],{"class":518},[508,1320,442],{"class":720},[508,1322,916],{"class":518},[992,1324,995],{"id":1325},"css-selector-1",[997,1327,1328,1336],{},[1000,1329,1330],{},[1003,1331,1332,1334],{},[1006,1333,1008],{},[1006,1335,995],{},[1012,1337,1338],{},[1003,1339,1340,1345],{},[1017,1341,1342],{},[422,1343,1344],{},"last",[1017,1346,1347],{},[422,1348,1349],{},"&:last-child",[414,1351,1353],{"id":1352},"useonlymodifier",[422,1354,1355],{},"useOnlyModifier",[418,1357,484,1358,1361],{},[422,1359,1360],{},"useOnlyModifier()"," function creates a modifier that applies styles when an element is the only child.",[992,1363,995],{"id":1364},"css-selector-2",[997,1366,1367,1375],{},[1000,1368,1369],{},[1003,1370,1371,1373],{},[1006,1372,1008],{},[1006,1374,995],{},[1012,1376,1377],{},[1003,1378,1379,1384],{},[1017,1380,1381],{},[422,1382,1383],{},"only",[1017,1385,1386],{},[422,1387,1388],{},"&:only-child",[414,1390,1392],{"id":1391},"useoddmodifier",[422,1393,1394],{},"useOddModifier",[418,1396,484,1397,1400],{},[422,1398,1399],{},"useOddModifier()"," function creates a modifier that applies styles to odd-numbered children (1st, 3rd, 5th, etc.).",[490,1402,1403,1604,1759],{},[493,1404,1405],{"icon":495,"label":496},[498,1406,1408],{"className":500,"code":1407,"filename":502,"language":503,"meta":504,"style":504},"import { styleframe } from \"styleframe\";\nimport { useBackgroundColorUtility } from \"@styleframe/theme\";\nimport { useOddModifier, useEvenModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst odd = useOddModifier(s);\nconst even = useEvenModifier(s);\n\nuseBackgroundColorUtility(s, {\n    white: '#ffffff',\n    light: '#f8f9fa',\n}, [odd, even]);\n\nexport default s;\n",[422,1409,1410,1430,1451,1477,1481,1495,1499,1514,1529,1533,1544,1560,1576,1590,1594],{"__ignoreMap":504},[508,1411,1412,1414,1416,1418,1420,1422,1424,1426,1428],{"class":510,"line":511},[508,1413,515],{"class":514},[508,1415,519],{"class":518},[508,1417,523],{"class":522},[508,1419,526],{"class":518},[508,1421,529],{"class":514},[508,1423,532],{"class":518},[508,1425,536],{"class":535},[508,1427,539],{"class":518},[508,1429,542],{"class":518},[508,1431,1432,1434,1436,1439,1441,1443,1445,1447,1449],{"class":510,"line":545},[508,1433,515],{"class":514},[508,1435,519],{"class":518},[508,1437,1438],{"class":522}," useBackgroundColorUtility",[508,1440,526],{"class":518},[508,1442,529],{"class":514},[508,1444,532],{"class":518},[508,1446,567],{"class":535},[508,1448,539],{"class":518},[508,1450,542],{"class":518},[508,1452,1453,1455,1457,1460,1462,1465,1467,1469,1471,1473,1475],{"class":510,"line":574},[508,1454,515],{"class":514},[508,1456,519],{"class":518},[508,1458,1459],{"class":522}," useOddModifier",[508,1461,555],{"class":518},[508,1463,1464],{"class":522}," useEvenModifier",[508,1466,526],{"class":518},[508,1468,529],{"class":514},[508,1470,532],{"class":518},[508,1472,567],{"class":535},[508,1474,539],{"class":518},[508,1476,542],{"class":518},[508,1478,1479],{"class":510,"line":596},[508,1480,599],{"emptyLinePlaceholder":206},[508,1482,1483,1485,1487,1489,1491,1493],{"class":510,"line":602},[508,1484,606],{"class":605},[508,1486,609],{"class":522},[508,1488,612],{"class":518},[508,1490,523],{"class":615},[508,1492,618],{"class":522},[508,1494,542],{"class":518},[508,1496,1497],{"class":510,"line":623},[508,1498,599],{"emptyLinePlaceholder":206},[508,1500,1501,1503,1506,1508,1510,1512],{"class":510,"line":628},[508,1502,606],{"class":605},[508,1504,1505],{"class":522}," odd ",[508,1507,612],{"class":518},[508,1509,1459],{"class":615},[508,1511,640],{"class":522},[508,1513,542],{"class":518},[508,1515,1516,1518,1521,1523,1525,1527],{"class":510,"line":645},[508,1517,606],{"class":605},[508,1519,1520],{"class":522}," even ",[508,1522,612],{"class":518},[508,1524,1464],{"class":615},[508,1526,640],{"class":522},[508,1528,542],{"class":518},[508,1530,1531],{"class":510,"line":650},[508,1532,599],{"emptyLinePlaceholder":206},[508,1534,1535,1538,1540,1542],{"class":510,"line":664},[508,1536,1537],{"class":615},"useBackgroundColorUtility",[508,1539,656],{"class":522},[508,1541,555],{"class":518},[508,1543,661],{"class":518},[508,1545,1546,1549,1551,1553,1556,1558],{"class":510,"line":686},[508,1547,1548],{"class":720},"    white",[508,1550,671],{"class":518},[508,1552,674],{"class":518},[508,1554,1555],{"class":535},"#ffffff",[508,1557,680],{"class":518},[508,1559,683],{"class":518},[508,1561,1562,1565,1567,1569,1572,1574],{"class":510,"line":697},[508,1563,1564],{"class":720},"    light",[508,1566,671],{"class":518},[508,1568,674],{"class":518},[508,1570,1571],{"class":535},"#f8f9fa",[508,1573,680],{"class":518},[508,1575,683],{"class":518},[508,1577,1578,1580,1583,1585,1588],{"class":510,"line":702},[508,1579,689],{"class":518},[508,1581,1582],{"class":522}," [odd",[508,1584,555],{"class":518},[508,1586,1587],{"class":522}," even])",[508,1589,542],{"class":518},[508,1591,1592],{"class":510,"line":714},[508,1593,599],{"emptyLinePlaceholder":206},[508,1595,1596,1598,1600,1602],{"class":510,"line":737},[508,1597,754],{"class":514},[508,1599,757],{"class":514},[508,1601,760],{"class":522},[508,1603,542],{"class":518},[493,1605,1606],{"icon":140,"label":765},[498,1607,1609],{"className":768,"code":1608,"filename":770,"language":771,"meta":504,"style":504},"._background-color\\:white { background-color: #ffffff; }\n._background-color\\:light { background-color: #f8f9fa; }\n\n._odd\\:background-color\\:light {\n    &:nth-child(odd) { background-color: #f8f9fa; }\n}\n\n._even\\:background-color\\:white {\n    &:nth-child(even) { background-color: #ffffff; }\n}\n",[422,1610,1611,1640,1666,1670,1688,1709,1713,1717,1734,1755],{"__ignoreMap":504},[508,1612,1613,1615,1618,1620,1623,1625,1628,1630,1633,1636,1638],{"class":510,"line":511},[508,1614,778],{"class":518},[508,1616,1617],{"class":781},"_background-color",[508,1619,785],{"class":522},[508,1621,1622],{"class":781},"white",[508,1624,519],{"class":518},[508,1626,1627],{"class":792}," background-color",[508,1629,671],{"class":518},[508,1631,1632],{"class":518}," #",[508,1634,1635],{"class":522},"ffffff",[508,1637,801],{"class":518},[508,1639,804],{"class":518},[508,1641,1642,1644,1646,1648,1651,1653,1655,1657,1659,1662,1664],{"class":510,"line":545},[508,1643,778],{"class":518},[508,1645,1617],{"class":781},[508,1647,785],{"class":522},[508,1649,1650],{"class":781},"light",[508,1652,519],{"class":518},[508,1654,1627],{"class":792},[508,1656,671],{"class":518},[508,1658,1632],{"class":518},[508,1660,1661],{"class":522},"f8f9fa",[508,1663,801],{"class":518},[508,1665,804],{"class":518},[508,1667,1668],{"class":510,"line":574},[508,1669,599],{"emptyLinePlaceholder":206},[508,1671,1672,1674,1677,1679,1682,1684,1686],{"class":510,"line":596},[508,1673,778],{"class":518},[508,1675,1676],{"class":781},"_odd",[508,1678,785],{"class":522},[508,1680,1681],{"class":781},"background-color",[508,1683,785],{"class":522},[508,1685,1650],{"class":781},[508,1687,661],{"class":518},[508,1689,1690,1692,1694,1697,1699,1701,1703,1705,1707],{"class":510,"line":602},[508,1691,831],{"class":522},[508,1693,671],{"class":518},[508,1695,1696],{"class":522},"nth-child(odd) { ",[508,1698,1681],{"class":792},[508,1700,671],{"class":518},[508,1702,1632],{"class":518},[508,1704,1661],{"class":522},[508,1706,801],{"class":518},[508,1708,804],{"class":518},[508,1710,1711],{"class":510,"line":623},[508,1712,847],{"class":522},[508,1714,1715],{"class":510,"line":628},[508,1716,599],{"emptyLinePlaceholder":206},[508,1718,1719,1721,1724,1726,1728,1730,1732],{"class":510,"line":645},[508,1720,778],{"class":518},[508,1722,1723],{"class":781},"_even",[508,1725,785],{"class":522},[508,1727,1681],{"class":781},[508,1729,785],{"class":522},[508,1731,1622],{"class":781},[508,1733,661],{"class":518},[508,1735,1736,1738,1740,1743,1745,1747,1749,1751,1753],{"class":510,"line":650},[508,1737,831],{"class":522},[508,1739,671],{"class":518},[508,1741,1742],{"class":522},"nth-child(even) { ",[508,1744,1681],{"class":792},[508,1746,671],{"class":518},[508,1748,1632],{"class":518},[508,1750,1635],{"class":522},[508,1752,801],{"class":518},[508,1754,804],{"class":518},[508,1756,1757],{"class":510,"line":664},[508,1758,847],{"class":522},[493,1760,1761],{"icon":898,"label":899},[498,1762,1764],{"className":902,"code":1763,"language":904,"meta":504,"style":504},"\u003C!-- Zebra-striped table -->\n\u003Ctable>\n    \u003Ctr class=\"_odd:background-color:light _even:background-color:white\">\n        \u003Ctd>Row 1\u003C/td>\n    \u003C/tr>\n    \u003Ctr class=\"_odd:background-color:light _even:background-color:white\">\n        \u003Ctd>Row 2\u003C/td>\n    \u003C/tr>\n    \u003Ctr class=\"_odd:background-color:light _even:background-color:white\">\n        \u003Ctd>Row 3\u003C/td>\n    \u003C/tr>\n\u003C/table>\n",[422,1765,1766,1772,1780,1799,1817,1826,1844,1861,1869,1887,1904,1912],{"__ignoreMap":504},[508,1767,1768],{"class":510,"line":511},[508,1769,1771],{"class":1770},"sHwdD","\u003C!-- Zebra-striped table -->\n",[508,1773,1774,1776,1778],{"class":510,"line":545},[508,1775,911],{"class":518},[508,1777,997],{"class":720},[508,1779,916],{"class":518},[508,1781,1782,1784,1786,1788,1790,1792,1795,1797],{"class":510,"line":574},[508,1783,921],{"class":518},[508,1785,1003],{"class":720},[508,1787,926],{"class":605},[508,1789,612],{"class":518},[508,1791,539],{"class":518},[508,1793,1794],{"class":535},"_odd:background-color:light _even:background-color:white",[508,1796,539],{"class":518},[508,1798,916],{"class":518},[508,1800,1801,1804,1806,1808,1811,1813,1815],{"class":510,"line":596},[508,1802,1803],{"class":518},"        \u003C",[508,1805,1017],{"class":720},[508,1807,938],{"class":518},[508,1809,1810],{"class":522},"Row 1",[508,1812,944],{"class":518},[508,1814,1017],{"class":720},[508,1816,916],{"class":518},[508,1818,1819,1822,1824],{"class":510,"line":602},[508,1820,1821],{"class":518},"    \u003C/",[508,1823,1003],{"class":720},[508,1825,916],{"class":518},[508,1827,1828,1830,1832,1834,1836,1838,1840,1842],{"class":510,"line":623},[508,1829,921],{"class":518},[508,1831,1003],{"class":720},[508,1833,926],{"class":605},[508,1835,612],{"class":518},[508,1837,539],{"class":518},[508,1839,1794],{"class":535},[508,1841,539],{"class":518},[508,1843,916],{"class":518},[508,1845,1846,1848,1850,1852,1855,1857,1859],{"class":510,"line":628},[508,1847,1803],{"class":518},[508,1849,1017],{"class":720},[508,1851,938],{"class":518},[508,1853,1854],{"class":522},"Row 2",[508,1856,944],{"class":518},[508,1858,1017],{"class":720},[508,1860,916],{"class":518},[508,1862,1863,1865,1867],{"class":510,"line":645},[508,1864,1821],{"class":518},[508,1866,1003],{"class":720},[508,1868,916],{"class":518},[508,1870,1871,1873,1875,1877,1879,1881,1883,1885],{"class":510,"line":650},[508,1872,921],{"class":518},[508,1874,1003],{"class":720},[508,1876,926],{"class":605},[508,1878,612],{"class":518},[508,1880,539],{"class":518},[508,1882,1794],{"class":535},[508,1884,539],{"class":518},[508,1886,916],{"class":518},[508,1888,1889,1891,1893,1895,1898,1900,1902],{"class":510,"line":664},[508,1890,1803],{"class":518},[508,1892,1017],{"class":720},[508,1894,938],{"class":518},[508,1896,1897],{"class":522},"Row 3",[508,1899,944],{"class":518},[508,1901,1017],{"class":720},[508,1903,916],{"class":518},[508,1905,1906,1908,1910],{"class":510,"line":686},[508,1907,1821],{"class":518},[508,1909,1003],{"class":720},[508,1911,916],{"class":518},[508,1913,1914,1916,1918],{"class":510,"line":697},[508,1915,944],{"class":518},[508,1917,997],{"class":720},[508,1919,916],{"class":518},[992,1921,995],{"id":1922},"css-selector-3",[997,1924,1925,1933],{},[1000,1926,1927],{},[1003,1928,1929,1931],{},[1006,1930,1008],{},[1006,1932,995],{},[1012,1934,1935],{},[1003,1936,1937,1942],{},[1017,1938,1939],{},[422,1940,1941],{},"odd",[1017,1943,1944],{},[422,1945,1946],{},"&:nth-child(odd)",[414,1948,1950],{"id":1949},"useevenmodifier",[422,1951,1952],{},"useEvenModifier",[418,1954,484,1955,1958],{},[422,1956,1957],{},"useEvenModifier()"," function creates a modifier that applies styles to even-numbered children (2nd, 4th, 6th, etc.).",[992,1960,995],{"id":1961},"css-selector-4",[997,1963,1964,1972],{},[1000,1965,1966],{},[1003,1967,1968,1970],{},[1006,1969,1008],{},[1006,1971,995],{},[1012,1973,1974],{},[1003,1975,1976,1981],{},[1017,1977,1978],{},[422,1979,1980],{},"even",[1017,1982,1983],{},[422,1984,1985],{},"&:nth-child(even)",[414,1987,1989],{"id":1988},"usefirstoftypemodifier",[422,1990,1991],{},"useFirstOfTypeModifier",[418,1993,484,1994,1997],{},[422,1995,1996],{},"useFirstOfTypeModifier()"," function creates a modifier that applies styles to the first element of its type among siblings.",[992,1999,995],{"id":2000},"css-selector-5",[997,2002,2003,2011],{},[1000,2004,2005],{},[1003,2006,2007,2009],{},[1006,2008,1008],{},[1006,2010,995],{},[1012,2012,2013],{},[1003,2014,2015,2020],{},[1017,2016,2017],{},[422,2018,2019],{},"first-of-type",[1017,2021,2022],{},[422,2023,2024],{},"&:first-of-type",[414,2026,2028],{"id":2027},"uselastoftypemodifier",[422,2029,2030],{},"useLastOfTypeModifier",[418,2032,484,2033,2036],{},[422,2034,2035],{},"useLastOfTypeModifier()"," function creates a modifier that applies styles to the last element of its type among siblings.",[992,2038,995],{"id":2039},"css-selector-6",[997,2041,2042,2050],{},[1000,2043,2044],{},[1003,2045,2046,2048],{},[1006,2047,1008],{},[1006,2049,995],{},[1012,2051,2052],{},[1003,2053,2054,2059],{},[1017,2055,2056],{},[422,2057,2058],{},"last-of-type",[1017,2060,2061],{},[422,2062,2063],{},"&:last-of-type",[414,2065,2067],{"id":2066},"useonlyoftypemodifier",[422,2068,2069],{},"useOnlyOfTypeModifier",[418,2071,484,2072,2075],{},[422,2073,2074],{},"useOnlyOfTypeModifier()"," function creates a modifier that applies styles when an element is the only one of its type among siblings.",[992,2077,995],{"id":2078},"css-selector-7",[997,2080,2081,2089],{},[1000,2082,2083],{},[1003,2084,2085,2087],{},[1006,2086,1008],{},[1006,2088,995],{},[1012,2090,2091],{},[1003,2092,2093,2098],{},[1017,2094,2095],{},[422,2096,2097],{},"only-of-type",[1017,2099,2100],{},[422,2101,2102],{},"&:only-of-type",[414,2104,2106],{"id":2105},"useemptymodifier",[422,2107,2108],{},"useEmptyModifier",[418,2110,484,2111,2114],{},[422,2112,2113],{},"useEmptyModifier()"," function creates a modifier that applies styles to elements with no children.",[490,2116,2117,2277,2348],{},[493,2118,2119],{"icon":495,"label":496},[498,2120,2122],{"className":500,"code":2121,"filename":502,"language":503,"meta":504,"style":504},"import { styleframe } from \"styleframe\";\nimport { useDisplayUtility } from \"@styleframe/theme\";\nimport { useEmptyModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst empty = useEmptyModifier(s);\n\nuseDisplayUtility(s, {\n    none: 'none',\n}, [empty]);\n\nexport default s;\n",[422,2123,2124,2144,2165,2186,2190,2204,2208,2223,2227,2238,2254,2263,2267],{"__ignoreMap":504},[508,2125,2126,2128,2130,2132,2134,2136,2138,2140,2142],{"class":510,"line":511},[508,2127,515],{"class":514},[508,2129,519],{"class":518},[508,2131,523],{"class":522},[508,2133,526],{"class":518},[508,2135,529],{"class":514},[508,2137,532],{"class":518},[508,2139,536],{"class":535},[508,2141,539],{"class":518},[508,2143,542],{"class":518},[508,2145,2146,2148,2150,2153,2155,2157,2159,2161,2163],{"class":510,"line":545},[508,2147,515],{"class":514},[508,2149,519],{"class":518},[508,2151,2152],{"class":522}," useDisplayUtility",[508,2154,526],{"class":518},[508,2156,529],{"class":514},[508,2158,532],{"class":518},[508,2160,567],{"class":535},[508,2162,539],{"class":518},[508,2164,542],{"class":518},[508,2166,2167,2169,2171,2174,2176,2178,2180,2182,2184],{"class":510,"line":574},[508,2168,515],{"class":514},[508,2170,519],{"class":518},[508,2172,2173],{"class":522}," useEmptyModifier",[508,2175,526],{"class":518},[508,2177,529],{"class":514},[508,2179,532],{"class":518},[508,2181,567],{"class":535},[508,2183,539],{"class":518},[508,2185,542],{"class":518},[508,2187,2188],{"class":510,"line":596},[508,2189,599],{"emptyLinePlaceholder":206},[508,2191,2192,2194,2196,2198,2200,2202],{"class":510,"line":602},[508,2193,606],{"class":605},[508,2195,609],{"class":522},[508,2197,612],{"class":518},[508,2199,523],{"class":615},[508,2201,618],{"class":522},[508,2203,542],{"class":518},[508,2205,2206],{"class":510,"line":623},[508,2207,599],{"emptyLinePlaceholder":206},[508,2209,2210,2212,2215,2217,2219,2221],{"class":510,"line":628},[508,2211,606],{"class":605},[508,2213,2214],{"class":522}," empty ",[508,2216,612],{"class":518},[508,2218,2173],{"class":615},[508,2220,640],{"class":522},[508,2222,542],{"class":518},[508,2224,2225],{"class":510,"line":645},[508,2226,599],{"emptyLinePlaceholder":206},[508,2228,2229,2232,2234,2236],{"class":510,"line":650},[508,2230,2231],{"class":615},"useDisplayUtility",[508,2233,656],{"class":522},[508,2235,555],{"class":518},[508,2237,661],{"class":518},[508,2239,2240,2243,2245,2247,2250,2252],{"class":510,"line":664},[508,2241,2242],{"class":720},"    none",[508,2244,671],{"class":518},[508,2246,674],{"class":518},[508,2248,2249],{"class":535},"none",[508,2251,680],{"class":518},[508,2253,683],{"class":518},[508,2255,2256,2258,2261],{"class":510,"line":686},[508,2257,689],{"class":518},[508,2259,2260],{"class":522}," [empty])",[508,2262,542],{"class":518},[508,2264,2265],{"class":510,"line":697},[508,2266,599],{"emptyLinePlaceholder":206},[508,2268,2269,2271,2273,2275],{"class":510,"line":702},[508,2270,754],{"class":514},[508,2272,757],{"class":514},[508,2274,760],{"class":522},[508,2276,542],{"class":518},[493,2278,2279],{"icon":140,"label":765},[498,2280,2282],{"className":768,"code":2281,"filename":770,"language":771,"meta":504,"style":504},"._display\\:none { display: none; }\n\n._empty\\:display\\:none {\n    &:empty { display: none; }\n}\n",[422,2283,2284,2309,2313,2331,2344],{"__ignoreMap":504},[508,2285,2286,2288,2291,2293,2295,2297,2300,2302,2305,2307],{"class":510,"line":511},[508,2287,778],{"class":518},[508,2289,2290],{"class":781},"_display",[508,2292,785],{"class":522},[508,2294,2249],{"class":781},[508,2296,519],{"class":518},[508,2298,2299],{"class":792}," display",[508,2301,671],{"class":518},[508,2303,2304],{"class":522}," none",[508,2306,801],{"class":518},[508,2308,804],{"class":518},[508,2310,2311],{"class":510,"line":545},[508,2312,599],{"emptyLinePlaceholder":206},[508,2314,2315,2317,2320,2322,2325,2327,2329],{"class":510,"line":574},[508,2316,778],{"class":518},[508,2318,2319],{"class":781},"_empty",[508,2321,785],{"class":522},[508,2323,2324],{"class":781},"display",[508,2326,785],{"class":522},[508,2328,2249],{"class":781},[508,2330,661],{"class":518},[508,2332,2333,2335,2337,2340,2342],{"class":510,"line":596},[508,2334,831],{"class":522},[508,2336,671],{"class":518},[508,2338,2339],{"class":522},"empty { display: none",[508,2341,801],{"class":518},[508,2343,804],{"class":518},[508,2345,2346],{"class":510,"line":602},[508,2347,847],{"class":522},[493,2349,2350],{"icon":898,"label":899},[498,2351,2353],{"className":902,"code":2352,"language":904,"meta":504,"style":504},"\u003C!-- Hide container when it has no content -->\n\u003Cdiv class=\"_empty:display:none\">\n    \u003C!-- Will be hidden when empty -->\n\u003C/div>\n",[422,2354,2355,2360,2380,2385],{"__ignoreMap":504},[508,2356,2357],{"class":510,"line":511},[508,2358,2359],{"class":1770},"\u003C!-- Hide container when it has no content -->\n",[508,2361,2362,2364,2367,2369,2371,2373,2376,2378],{"class":510,"line":545},[508,2363,911],{"class":518},[508,2365,2366],{"class":720},"div",[508,2368,926],{"class":605},[508,2370,612],{"class":518},[508,2372,539],{"class":518},[508,2374,2375],{"class":535},"_empty:display:none",[508,2377,539],{"class":518},[508,2379,916],{"class":518},[508,2381,2382],{"class":510,"line":574},[508,2383,2384],{"class":1770},"    \u003C!-- Will be hidden when empty -->\n",[508,2386,2387,2389,2391],{"class":510,"line":596},[508,2388,944],{"class":518},[508,2390,2366],{"class":720},[508,2392,916],{"class":518},[992,2394,995],{"id":2395},"css-selector-8",[997,2397,2398,2406],{},[1000,2399,2400],{},[1003,2401,2402,2404],{},[1006,2403,1008],{},[1006,2405,995],{},[1012,2407,2408],{},[1003,2409,2410,2415],{},[1017,2411,2412],{},[422,2413,2414],{},"empty",[1017,2416,2417],{},[422,2418,2419],{},"&:empty",[414,2421,2423],{"id":2422},"usestructuralmodifiers",[422,2424,2425],{},"useStructuralModifiers",[418,2427,484,2428,2431],{},[422,2429,2430],{},"useStructuralModifiers()"," function registers all structural modifiers at once and returns them as a destructurable object.",[2433,2434,2436],"h3",{"id":2435},"returned-modifiers","Returned Modifiers",[997,2438,2439,2450],{},[1000,2440,2441],{},[1003,2442,2443,2446,2448],{},[1006,2444,2445],{},"Key",[1006,2447,1008],{},[1006,2449,995],{},[1012,2451,2452,2466,2480,2494,2508,2522,2537,2552,2567],{},[1003,2453,2454,2458,2462],{},[1017,2455,2456],{},[422,2457,1021],{},[1017,2459,2460],{},[422,2461,1021],{},[1017,2463,2464],{},[422,2465,1026],{},[1003,2467,2468,2472,2476],{},[1017,2469,2470],{},[422,2471,1344],{},[1017,2473,2474],{},[422,2475,1344],{},[1017,2477,2478],{},[422,2479,1349],{},[1003,2481,2482,2486,2490],{},[1017,2483,2484],{},[422,2485,1383],{},[1017,2487,2488],{},[422,2489,1383],{},[1017,2491,2492],{},[422,2493,1388],{},[1003,2495,2496,2500,2504],{},[1017,2497,2498],{},[422,2499,1941],{},[1017,2501,2502],{},[422,2503,1941],{},[1017,2505,2506],{},[422,2507,1946],{},[1003,2509,2510,2514,2518],{},[1017,2511,2512],{},[422,2513,1980],{},[1017,2515,2516],{},[422,2517,1980],{},[1017,2519,2520],{},[422,2521,1985],{},[1003,2523,2524,2529,2533],{},[1017,2525,2526],{},[422,2527,2528],{},"firstOfType",[1017,2530,2531],{},[422,2532,2019],{},[1017,2534,2535],{},[422,2536,2024],{},[1003,2538,2539,2544,2548],{},[1017,2540,2541],{},[422,2542,2543],{},"lastOfType",[1017,2545,2546],{},[422,2547,2058],{},[1017,2549,2550],{},[422,2551,2063],{},[1003,2553,2554,2559,2563],{},[1017,2555,2556],{},[422,2557,2558],{},"onlyOfType",[1017,2560,2561],{},[422,2562,2097],{},[1017,2564,2565],{},[422,2566,2102],{},[1003,2568,2569,2573,2577],{},[1017,2570,2571],{},[422,2572,2414],{},[1017,2574,2575],{},[422,2576,2414],{},[1017,2578,2579],{},[422,2580,2419],{},[414,2582,2584],{"id":2583},"examples","Examples",[2433,2586,2588],{"id":2587},"list-with-border-separators","List with Border Separators",[490,2590,2591,2868],{},[493,2592,2593],{"icon":495,"label":496},[498,2594,2596],{"className":500,"code":2595,"filename":502,"language":503,"meta":504,"style":504},"import { styleframe } from \"styleframe\";\nimport {\n    useBorderWidthUtility,\n    useBorderRadiusUtility,\n    usePaddingUtility,\n} from \"@styleframe/theme\";\nimport { useStructuralModifiers } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst { first, last } = useStructuralModifiers(s);\n\nuseBorderWidthUtility(s, {\n    'top-0': '0',\n}, [first]);\n\nuseBorderRadiusUtility(s, {\n    'top-md': '0.375rem 0.375rem 0 0',\n    'bottom-md': '0 0 0.375rem 0.375rem',\n    0: '0',\n}, [first, last]);\n\nexport default s;\n",[422,2597,2598,2618,2624,2631,2638,2645,2660,2681,2685,2699,2703,2727,2731,2741,2760,2768,2772,2782,2801,2822,2837,2852,2857],{"__ignoreMap":504},[508,2599,2600,2602,2604,2606,2608,2610,2612,2614,2616],{"class":510,"line":511},[508,2601,515],{"class":514},[508,2603,519],{"class":518},[508,2605,523],{"class":522},[508,2607,526],{"class":518},[508,2609,529],{"class":514},[508,2611,532],{"class":518},[508,2613,536],{"class":535},[508,2615,539],{"class":518},[508,2617,542],{"class":518},[508,2619,2620,2622],{"class":510,"line":545},[508,2621,515],{"class":514},[508,2623,661],{"class":518},[508,2625,2626,2629],{"class":510,"line":574},[508,2627,2628],{"class":522},"    useBorderWidthUtility",[508,2630,683],{"class":518},[508,2632,2633,2636],{"class":510,"line":596},[508,2634,2635],{"class":522},"    useBorderRadiusUtility",[508,2637,683],{"class":518},[508,2639,2640,2643],{"class":510,"line":602},[508,2641,2642],{"class":522},"    usePaddingUtility",[508,2644,683],{"class":518},[508,2646,2647,2650,2652,2654,2656,2658],{"class":510,"line":623},[508,2648,2649],{"class":518},"}",[508,2651,529],{"class":514},[508,2653,532],{"class":518},[508,2655,567],{"class":535},[508,2657,539],{"class":518},[508,2659,542],{"class":518},[508,2661,2662,2664,2666,2669,2671,2673,2675,2677,2679],{"class":510,"line":628},[508,2663,515],{"class":514},[508,2665,519],{"class":518},[508,2667,2668],{"class":522}," useStructuralModifiers",[508,2670,526],{"class":518},[508,2672,529],{"class":514},[508,2674,532],{"class":518},[508,2676,567],{"class":535},[508,2678,539],{"class":518},[508,2680,542],{"class":518},[508,2682,2683],{"class":510,"line":645},[508,2684,599],{"emptyLinePlaceholder":206},[508,2686,2687,2689,2691,2693,2695,2697],{"class":510,"line":650},[508,2688,606],{"class":605},[508,2690,609],{"class":522},[508,2692,612],{"class":518},[508,2694,523],{"class":615},[508,2696,618],{"class":522},[508,2698,542],{"class":518},[508,2700,2701],{"class":510,"line":664},[508,2702,599],{"emptyLinePlaceholder":206},[508,2704,2705,2707,2709,2712,2714,2716,2718,2721,2723,2725],{"class":510,"line":686},[508,2706,606],{"class":605},[508,2708,519],{"class":518},[508,2710,2711],{"class":522}," first",[508,2713,555],{"class":518},[508,2715,1137],{"class":522},[508,2717,2649],{"class":518},[508,2719,2720],{"class":518}," =",[508,2722,2668],{"class":615},[508,2724,640],{"class":522},[508,2726,542],{"class":518},[508,2728,2729],{"class":510,"line":697},[508,2730,599],{"emptyLinePlaceholder":206},[508,2732,2733,2735,2737,2739],{"class":510,"line":702},[508,2734,653],{"class":615},[508,2736,656],{"class":522},[508,2738,555],{"class":518},[508,2740,661],{"class":518},[508,2742,2743,2745,2748,2750,2752,2754,2756,2758],{"class":510,"line":714},[508,2744,717],{"class":518},[508,2746,2747],{"class":720},"top-0",[508,2749,680],{"class":518},[508,2751,671],{"class":518},[508,2753,674],{"class":518},[508,2755,677],{"class":535},[508,2757,680],{"class":518},[508,2759,683],{"class":518},[508,2761,2762,2764,2766],{"class":510,"line":737},[508,2763,689],{"class":518},[508,2765,692],{"class":522},[508,2767,542],{"class":518},[508,2769,2770],{"class":510,"line":746},[508,2771,599],{"emptyLinePlaceholder":206},[508,2773,2774,2776,2778,2780],{"class":510,"line":751},[508,2775,705],{"class":615},[508,2777,656],{"class":522},[508,2779,555],{"class":518},[508,2781,661],{"class":518},[508,2783,2785,2787,2789,2791,2793,2795,2797,2799],{"class":510,"line":2784},18,[508,2786,717],{"class":518},[508,2788,721],{"class":720},[508,2790,680],{"class":518},[508,2792,671],{"class":518},[508,2794,674],{"class":518},[508,2796,730],{"class":535},[508,2798,680],{"class":518},[508,2800,683],{"class":518},[508,2802,2804,2806,2809,2811,2813,2815,2818,2820],{"class":510,"line":2803},19,[508,2805,717],{"class":518},[508,2807,2808],{"class":720},"bottom-md",[508,2810,680],{"class":518},[508,2812,671],{"class":518},[508,2814,674],{"class":518},[508,2816,2817],{"class":535},"0 0 0.375rem 0.375rem",[508,2819,680],{"class":518},[508,2821,683],{"class":518},[508,2823,2825,2827,2829,2831,2833,2835],{"class":510,"line":2824},20,[508,2826,668],{"class":667},[508,2828,671],{"class":518},[508,2830,674],{"class":518},[508,2832,677],{"class":535},[508,2834,680],{"class":518},[508,2836,683],{"class":518},[508,2838,2840,2842,2845,2847,2850],{"class":510,"line":2839},21,[508,2841,689],{"class":518},[508,2843,2844],{"class":522}," [first",[508,2846,555],{"class":518},[508,2848,2849],{"class":522}," last])",[508,2851,542],{"class":518},[508,2853,2855],{"class":510,"line":2854},22,[508,2856,599],{"emptyLinePlaceholder":206},[508,2858,2860,2862,2864,2866],{"class":510,"line":2859},23,[508,2861,754],{"class":514},[508,2863,757],{"class":514},[508,2865,760],{"class":522},[508,2867,542],{"class":518},[493,2869,2870],{"icon":898,"label":899},[498,2871,2873],{"className":902,"code":2872,"language":904,"meta":504,"style":504},"\u003Cul class=\"list\">\n    \u003Cli class=\"_first:border-radius:top-md _last:border-radius:bottom-md\">Item 1\u003C/li>\n    \u003Cli class=\"_first:border-radius:top-md _last:border-radius:bottom-md\">Item 2\u003C/li>\n    \u003Cli class=\"_first:border-radius:top-md _last:border-radius:bottom-md\">Item 3\u003C/li>\n\u003C/ul>\n",[422,2874,2875,2894,2922,2949,2976],{"__ignoreMap":504},[508,2876,2877,2879,2881,2883,2885,2887,2890,2892],{"class":510,"line":511},[508,2878,911],{"class":518},[508,2880,442],{"class":720},[508,2882,926],{"class":605},[508,2884,612],{"class":518},[508,2886,539],{"class":518},[508,2888,2889],{"class":535},"list",[508,2891,539],{"class":518},[508,2893,916],{"class":518},[508,2895,2896,2898,2900,2902,2904,2906,2909,2911,2913,2916,2918,2920],{"class":510,"line":545},[508,2897,921],{"class":518},[508,2899,445],{"class":720},[508,2901,926],{"class":605},[508,2903,612],{"class":518},[508,2905,539],{"class":518},[508,2907,2908],{"class":535},"_first:border-radius:top-md _last:border-radius:bottom-md",[508,2910,539],{"class":518},[508,2912,938],{"class":518},[508,2914,2915],{"class":522},"Item 1",[508,2917,944],{"class":518},[508,2919,445],{"class":720},[508,2921,916],{"class":518},[508,2923,2924,2926,2928,2930,2932,2934,2936,2938,2940,2943,2945,2947],{"class":510,"line":574},[508,2925,921],{"class":518},[508,2927,445],{"class":720},[508,2929,926],{"class":605},[508,2931,612],{"class":518},[508,2933,539],{"class":518},[508,2935,2908],{"class":535},[508,2937,539],{"class":518},[508,2939,938],{"class":518},[508,2941,2942],{"class":522},"Item 2",[508,2944,944],{"class":518},[508,2946,445],{"class":720},[508,2948,916],{"class":518},[508,2950,2951,2953,2955,2957,2959,2961,2963,2965,2967,2970,2972,2974],{"class":510,"line":596},[508,2952,921],{"class":518},[508,2954,445],{"class":720},[508,2956,926],{"class":605},[508,2958,612],{"class":518},[508,2960,539],{"class":518},[508,2962,2908],{"class":535},[508,2964,539],{"class":518},[508,2966,938],{"class":518},[508,2968,2969],{"class":522},"Item 3",[508,2971,944],{"class":518},[508,2973,445],{"class":720},[508,2975,916],{"class":518},[508,2977,2978,2980,2982],{"class":510,"line":602},[508,2979,944],{"class":518},[508,2981,442],{"class":720},[508,2983,916],{"class":518},[2433,2985,2987],{"id":2986},"zebra-striped-data-table","Zebra-Striped Data Table",[490,2989,2990,3184],{},[493,2991,2992],{"icon":495,"label":496},[498,2993,2995],{"className":500,"code":2994,"filename":502,"language":503,"meta":504,"style":504},"import { styleframe } from \"styleframe\";\nimport { useBackgroundColorUtility } from \"@styleframe/theme\";\nimport { useOddModifier, useHoverModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst odd = useOddModifier(s);\nconst hover = useHoverModifier(s);\n\nuseBackgroundColorUtility(s, {\n    light: '#f8f9fa',\n    highlight: '#e9ecef',\n}, [odd, hover]);\n\nexport default s;\n",[422,2996,2997,3017,3037,3062,3066,3080,3084,3098,3113,3117,3127,3141,3157,3170,3174],{"__ignoreMap":504},[508,2998,2999,3001,3003,3005,3007,3009,3011,3013,3015],{"class":510,"line":511},[508,3000,515],{"class":514},[508,3002,519],{"class":518},[508,3004,523],{"class":522},[508,3006,526],{"class":518},[508,3008,529],{"class":514},[508,3010,532],{"class":518},[508,3012,536],{"class":535},[508,3014,539],{"class":518},[508,3016,542],{"class":518},[508,3018,3019,3021,3023,3025,3027,3029,3031,3033,3035],{"class":510,"line":545},[508,3020,515],{"class":514},[508,3022,519],{"class":518},[508,3024,1438],{"class":522},[508,3026,526],{"class":518},[508,3028,529],{"class":514},[508,3030,532],{"class":518},[508,3032,567],{"class":535},[508,3034,539],{"class":518},[508,3036,542],{"class":518},[508,3038,3039,3041,3043,3045,3047,3050,3052,3054,3056,3058,3060],{"class":510,"line":574},[508,3040,515],{"class":514},[508,3042,519],{"class":518},[508,3044,1459],{"class":522},[508,3046,555],{"class":518},[508,3048,3049],{"class":522}," useHoverModifier",[508,3051,526],{"class":518},[508,3053,529],{"class":514},[508,3055,532],{"class":518},[508,3057,567],{"class":535},[508,3059,539],{"class":518},[508,3061,542],{"class":518},[508,3063,3064],{"class":510,"line":596},[508,3065,599],{"emptyLinePlaceholder":206},[508,3067,3068,3070,3072,3074,3076,3078],{"class":510,"line":602},[508,3069,606],{"class":605},[508,3071,609],{"class":522},[508,3073,612],{"class":518},[508,3075,523],{"class":615},[508,3077,618],{"class":522},[508,3079,542],{"class":518},[508,3081,3082],{"class":510,"line":623},[508,3083,599],{"emptyLinePlaceholder":206},[508,3085,3086,3088,3090,3092,3094,3096],{"class":510,"line":628},[508,3087,606],{"class":605},[508,3089,1505],{"class":522},[508,3091,612],{"class":518},[508,3093,1459],{"class":615},[508,3095,640],{"class":522},[508,3097,542],{"class":518},[508,3099,3100,3102,3105,3107,3109,3111],{"class":510,"line":645},[508,3101,606],{"class":605},[508,3103,3104],{"class":522}," hover ",[508,3106,612],{"class":518},[508,3108,3049],{"class":615},[508,3110,640],{"class":522},[508,3112,542],{"class":518},[508,3114,3115],{"class":510,"line":650},[508,3116,599],{"emptyLinePlaceholder":206},[508,3118,3119,3121,3123,3125],{"class":510,"line":664},[508,3120,1537],{"class":615},[508,3122,656],{"class":522},[508,3124,555],{"class":518},[508,3126,661],{"class":518},[508,3128,3129,3131,3133,3135,3137,3139],{"class":510,"line":686},[508,3130,1564],{"class":720},[508,3132,671],{"class":518},[508,3134,674],{"class":518},[508,3136,1571],{"class":535},[508,3138,680],{"class":518},[508,3140,683],{"class":518},[508,3142,3143,3146,3148,3150,3153,3155],{"class":510,"line":697},[508,3144,3145],{"class":720},"    highlight",[508,3147,671],{"class":518},[508,3149,674],{"class":518},[508,3151,3152],{"class":535},"#e9ecef",[508,3154,680],{"class":518},[508,3156,683],{"class":518},[508,3158,3159,3161,3163,3165,3168],{"class":510,"line":702},[508,3160,689],{"class":518},[508,3162,1582],{"class":522},[508,3164,555],{"class":518},[508,3166,3167],{"class":522}," hover])",[508,3169,542],{"class":518},[508,3171,3172],{"class":510,"line":714},[508,3173,599],{"emptyLinePlaceholder":206},[508,3175,3176,3178,3180,3182],{"class":510,"line":737},[508,3177,754],{"class":514},[508,3179,757],{"class":514},[508,3181,760],{"class":522},[508,3183,542],{"class":518},[493,3185,3186],{"icon":898,"label":899},[498,3187,3189],{"className":902,"code":3188,"language":904,"meta":504,"style":504},"\u003Ctable>\n    \u003Ctbody>\n        \u003Ctr class=\"_odd:background-color:light _hover:background-color:highlight\">\n            \u003Ctd>Alice\u003C/td>\u003Ctd>alice@example.com\u003C/td>\n        \u003C/tr>\n        \u003Ctr class=\"_odd:background-color:light _hover:background-color:highlight\">\n            \u003Ctd>Bob\u003C/td>\u003Ctd>bob@example.com\u003C/td>\n        \u003C/tr>\n        \u003Ctr class=\"_odd:background-color:light _hover:background-color:highlight\">\n            \u003Ctd>Charlie\u003C/td>\u003Ctd>charlie@example.com\u003C/td>\n        \u003C/tr>\n    \u003C/tbody>\n\u003C/table>\n",[422,3190,3191,3199,3207,3226,3258,3267,3285,3315,3323,3341,3371,3379,3387],{"__ignoreMap":504},[508,3192,3193,3195,3197],{"class":510,"line":511},[508,3194,911],{"class":518},[508,3196,997],{"class":720},[508,3198,916],{"class":518},[508,3200,3201,3203,3205],{"class":510,"line":545},[508,3202,921],{"class":518},[508,3204,1012],{"class":720},[508,3206,916],{"class":518},[508,3208,3209,3211,3213,3215,3217,3219,3222,3224],{"class":510,"line":574},[508,3210,1803],{"class":518},[508,3212,1003],{"class":720},[508,3214,926],{"class":605},[508,3216,612],{"class":518},[508,3218,539],{"class":518},[508,3220,3221],{"class":535},"_odd:background-color:light _hover:background-color:highlight",[508,3223,539],{"class":518},[508,3225,916],{"class":518},[508,3227,3228,3231,3233,3235,3238,3240,3242,3245,3247,3249,3252,3254,3256],{"class":510,"line":596},[508,3229,3230],{"class":518},"            \u003C",[508,3232,1017],{"class":720},[508,3234,938],{"class":518},[508,3236,3237],{"class":522},"Alice",[508,3239,944],{"class":518},[508,3241,1017],{"class":720},[508,3243,3244],{"class":518},">\u003C",[508,3246,1017],{"class":720},[508,3248,938],{"class":518},[508,3250,3251],{"class":522},"alice@example.com",[508,3253,944],{"class":518},[508,3255,1017],{"class":720},[508,3257,916],{"class":518},[508,3259,3260,3263,3265],{"class":510,"line":602},[508,3261,3262],{"class":518},"        \u003C/",[508,3264,1003],{"class":720},[508,3266,916],{"class":518},[508,3268,3269,3271,3273,3275,3277,3279,3281,3283],{"class":510,"line":623},[508,3270,1803],{"class":518},[508,3272,1003],{"class":720},[508,3274,926],{"class":605},[508,3276,612],{"class":518},[508,3278,539],{"class":518},[508,3280,3221],{"class":535},[508,3282,539],{"class":518},[508,3284,916],{"class":518},[508,3286,3287,3289,3291,3293,3296,3298,3300,3302,3304,3306,3309,3311,3313],{"class":510,"line":628},[508,3288,3230],{"class":518},[508,3290,1017],{"class":720},[508,3292,938],{"class":518},[508,3294,3295],{"class":522},"Bob",[508,3297,944],{"class":518},[508,3299,1017],{"class":720},[508,3301,3244],{"class":518},[508,3303,1017],{"class":720},[508,3305,938],{"class":518},[508,3307,3308],{"class":522},"bob@example.com",[508,3310,944],{"class":518},[508,3312,1017],{"class":720},[508,3314,916],{"class":518},[508,3316,3317,3319,3321],{"class":510,"line":645},[508,3318,3262],{"class":518},[508,3320,1003],{"class":720},[508,3322,916],{"class":518},[508,3324,3325,3327,3329,3331,3333,3335,3337,3339],{"class":510,"line":650},[508,3326,1803],{"class":518},[508,3328,1003],{"class":720},[508,3330,926],{"class":605},[508,3332,612],{"class":518},[508,3334,539],{"class":518},[508,3336,3221],{"class":535},[508,3338,539],{"class":518},[508,3340,916],{"class":518},[508,3342,3343,3345,3347,3349,3352,3354,3356,3358,3360,3362,3365,3367,3369],{"class":510,"line":664},[508,3344,3230],{"class":518},[508,3346,1017],{"class":720},[508,3348,938],{"class":518},[508,3350,3351],{"class":522},"Charlie",[508,3353,944],{"class":518},[508,3355,1017],{"class":720},[508,3357,3244],{"class":518},[508,3359,1017],{"class":720},[508,3361,938],{"class":518},[508,3363,3364],{"class":522},"charlie@example.com",[508,3366,944],{"class":518},[508,3368,1017],{"class":720},[508,3370,916],{"class":518},[508,3372,3373,3375,3377],{"class":510,"line":686},[508,3374,3262],{"class":518},[508,3376,1003],{"class":720},[508,3378,916],{"class":518},[508,3380,3381,3383,3385],{"class":510,"line":697},[508,3382,1821],{"class":518},[508,3384,1012],{"class":720},[508,3386,916],{"class":518},[508,3388,3389,3391,3393],{"class":510,"line":702},[508,3390,944],{"class":518},[508,3392,997],{"class":720},[508,3394,916],{"class":518},[414,3396,3398],{"id":3397},"best-practices","Best Practices",[442,3400,3401,3407,3413,3419,3425],{},[445,3402,3403,3406],{},[448,3404,3405],{},"Use first/last for border cleanup",": Remove redundant borders on first and last items in lists",[445,3408,3409,3412],{},[448,3410,3411],{},"Prefer odd/even for zebra striping",": More maintainable than manually alternating classes",[445,3414,3415,3418],{},[448,3416,3417],{},"Combine with hover",": Add hover effects alongside structural modifiers for interactive lists and tables",[445,3420,3421,3424],{},[448,3422,3423],{},"Use empty for conditional display",": Hide containers that have no content without JavaScript",[445,3426,3427,3430],{},[448,3428,3429],{},"Use first-of-type/last-of-type carefully",": They match by element type, not by class, which can produce unexpected results in mixed-content containers",[414,3432,3434],{"id":3433},"faq","FAQ",[3436,3437,3438,3461,3469],"accordion",{},[3439,3440,3443,3445,3446,3449,3450,3453,3454,3457,3458,3460],"accordion-item",{"icon":3441,"label":3442},"i-lucide-circle-help","What's the difference between first-child and first-of-type?",[422,3444,424],{}," matches the first element regardless of its type. ",[422,3447,3448],{},":first-of-type"," matches the first element of a specific type (e.g., the first ",[422,3451,3452],{},"\u003Cp>"," among siblings). Use ",[422,3455,3456],{},"first-child"," for general positioning and ",[422,3459,2019],{}," when you need type-specific targeting.",[3439,3462,3464,3465,3468],{"icon":3441,"label":3463},"How does :empty work with whitespace?","In CSS, ",[422,3466,3467],{},":empty"," matches elements that have no children, including text nodes. An element with only whitespace text was previously not considered empty, but modern CSS treats elements containing only whitespace as empty. However, behavior may vary across browsers.",[3439,3470,3472,3473,3476,3477,425,3480,429,3483,3486],{"icon":3441,"label":3471},"Can I combine structural modifiers with other modifier types?","Yes! Structural modifiers combine freely with pseudo-state, form state, and other modifiers. For example, ",[422,3474,3475],{},"[first, hover]"," generates ",[422,3478,3479],{},"_first:property:value",[422,3481,3482],{},"_hover:property:value",[422,3484,3485],{},"_first:hover:property:value"," for first-child hover states.",[3488,3489,3490],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":504,"searchDepth":545,"depth":545,"links":3492},[3493,3494,3495,3496,3497,3498,3499,3500,3501,3502,3503,3504,3507,3511,3512],{"id":416,"depth":545,"text":64},{"id":436,"depth":545,"text":437},{"id":478,"depth":545,"text":481},{"id":1029,"depth":545,"text":1032},{"id":1352,"depth":545,"text":1355},{"id":1391,"depth":545,"text":1394},{"id":1949,"depth":545,"text":1952},{"id":1988,"depth":545,"text":1991},{"id":2027,"depth":545,"text":2030},{"id":2066,"depth":545,"text":2069},{"id":2105,"depth":545,"text":2108},{"id":2422,"depth":545,"text":2425,"children":3505},[3506],{"id":2435,"depth":574,"text":2436},{"id":2583,"depth":545,"text":2584,"children":3508},[3509,3510],{"id":2587,"depth":574,"text":2588},{"id":2986,"depth":574,"text":2987},{"id":3397,"depth":545,"text":3398},{"id":3433,"depth":545,"text":3434},"Create structural modifiers for targeting elements by their position in the DOM tree with full type safety.","md",null,{},{"title":404,"icon":7},{"title":409,"description":3513},{"loc":405},"GMOagkL48AxBCxu9LFMC5ym1GjQktVumXi3GfHz4FWY",[3522,3524],{"title":400,"path":401,"stem":402,"description":3523,"icon":7,"children":-1},"Create pseudo-state modifiers for interactive states like hover, focus, active, and more with full type safety.",{"title":64,"path":290,"stem":291,"description":3525,"icon":65,"children":-1},"Explore Styleframe's utility composables for generating CSS utility classes. Create flexible, reusable styling primitives with full type safety.",1776621146393]