[{"data":1,"prerenderedAt":2399},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-modifiers-composables-directional":407,"-docs-theme-modifiers-composables-directional-surround":2394},{"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":2387,"extension":802,"links":2388,"meta":2389,"navigation":2390,"path":381,"seo":2391,"sitemap":2392,"stem":382,"__hash__":2393},"docs_theme/docs/theme/modifiers/02.composables/01.directional.md","Directional Modifiers",{"type":411,"value":412,"toc":2373},"minimark",[413,417,421,425,428,462,468,478,1000,1005,1036,1046,1052,1061,1457,1460,1484,1490,1496,1789,1794,1837,1841,1845,2268,2272,2326,2330,2369],[414,415,64],"h2",{"id":416},"overview",[418,419,420],"p",{},"Directional modifiers let you apply utility styles conditionally based on the text direction of the document or a parent element. They wrap utility declarations in CSS selectors that match either right-to-left (RTL) or left-to-right (LTR) contexts, generating variant utility classes that adapt to text direction.",[414,422,424],{"id":423},"why-use-directional-modifiers","Why Use Directional Modifiers?",[418,426,427],{},"Directional modifiers help you:",[429,430,431,439,445,451],"ul",{},[432,433,434,438],"li",{},[435,436,437],"strong",{},"Support internationalization",": Adapt layouts for RTL languages like Arabic, Hebrew, and Persian",[432,440,441,444],{},[435,442,443],{},"Flip directional properties",": Swap margins, paddings, and positions based on text direction",[432,446,447,450],{},[435,448,449],{},"Build bidirectional components",": Create components that work in both LTR and RTL contexts",[432,452,453,456,457,461],{},[435,454,455],{},"Maintain zero specificity",": The ",[458,459,460],"code",{},":where()"," wrapper prevents specificity conflicts",[414,463,465],{"id":464},"usertlmodifier",[458,466,467],{},"useRtlModifier",[418,469,470,471,474,475,477],{},"The ",[458,472,473],{},"useRtlModifier()"," function creates a modifier that applies styles in right-to-left contexts. It uses ",[458,476,460],{}," to maintain zero specificity.",[479,480,481,777,946],"tabs",{},[482,483,486],"tabs-item",{"icon":484,"label":485},"i-lucide-code","Code",[487,488,494],"pre",{"className":489,"code":490,"filename":491,"language":492,"meta":493,"style":493},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useMarginLeftUtility, useMarginRightUtility } from \"@styleframe/theme\";\nimport { useRtlModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst rtl = useRtlModifier(s);\n\nuseMarginLeftUtility(s, {\n    md: '1rem',\n    0: '0',\n}, [rtl]);\n\nuseMarginRightUtility(s, {\n    md: '1rem',\n    0: '0',\n}, [rtl]);\n\nexport default s;\n","styleframe.config.ts","ts","",[458,495,496,532,561,583,589,610,615,632,637,651,673,691,702,707,719,734,749,758,763],{"__ignoreMap":493},[497,498,501,505,509,513,516,519,522,526,529],"span",{"class":499,"line":500},"line",1,[497,502,504],{"class":503},"s7zQu","import",[497,506,508],{"class":507},"sMK4o"," {",[497,510,512],{"class":511},"sTEyZ"," styleframe",[497,514,515],{"class":507}," }",[497,517,518],{"class":503}," from",[497,520,521],{"class":507}," \"",[497,523,525],{"class":524},"sfazB","styleframe",[497,527,528],{"class":507},"\"",[497,530,531],{"class":507},";\n",[497,533,535,537,539,542,545,548,550,552,554,557,559],{"class":499,"line":534},2,[497,536,504],{"class":503},[497,538,508],{"class":507},[497,540,541],{"class":511}," useMarginLeftUtility",[497,543,544],{"class":507},",",[497,546,547],{"class":511}," useMarginRightUtility",[497,549,515],{"class":507},[497,551,518],{"class":503},[497,553,521],{"class":507},[497,555,556],{"class":524},"@styleframe/theme",[497,558,528],{"class":507},[497,560,531],{"class":507},[497,562,564,566,568,571,573,575,577,579,581],{"class":499,"line":563},3,[497,565,504],{"class":503},[497,567,508],{"class":507},[497,569,570],{"class":511}," useRtlModifier",[497,572,515],{"class":507},[497,574,518],{"class":503},[497,576,521],{"class":507},[497,578,556],{"class":524},[497,580,528],{"class":507},[497,582,531],{"class":507},[497,584,586],{"class":499,"line":585},4,[497,587,588],{"emptyLinePlaceholder":206},"\n",[497,590,592,596,599,602,605,608],{"class":499,"line":591},5,[497,593,595],{"class":594},"spNyl","const",[497,597,598],{"class":511}," s ",[497,600,601],{"class":507},"=",[497,603,512],{"class":604},"s2Zo4",[497,606,607],{"class":511},"()",[497,609,531],{"class":507},[497,611,613],{"class":499,"line":612},6,[497,614,588],{"emptyLinePlaceholder":206},[497,616,618,620,623,625,627,630],{"class":499,"line":617},7,[497,619,595],{"class":594},[497,621,622],{"class":511}," rtl ",[497,624,601],{"class":507},[497,626,570],{"class":604},[497,628,629],{"class":511},"(s)",[497,631,531],{"class":507},[497,633,635],{"class":499,"line":634},8,[497,636,588],{"emptyLinePlaceholder":206},[497,638,640,643,646,648],{"class":499,"line":639},9,[497,641,642],{"class":604},"useMarginLeftUtility",[497,644,645],{"class":511},"(s",[497,647,544],{"class":507},[497,649,650],{"class":507}," {\n",[497,652,654,658,661,664,667,670],{"class":499,"line":653},10,[497,655,657],{"class":656},"swJcz","    md",[497,659,660],{"class":507},":",[497,662,663],{"class":507}," '",[497,665,666],{"class":524},"1rem",[497,668,669],{"class":507},"'",[497,671,672],{"class":507},",\n",[497,674,676,680,682,684,687,689],{"class":499,"line":675},11,[497,677,679],{"class":678},"sbssI","    0",[497,681,660],{"class":507},[497,683,663],{"class":507},[497,685,686],{"class":524},"0",[497,688,669],{"class":507},[497,690,672],{"class":507},[497,692,694,697,700],{"class":499,"line":693},12,[497,695,696],{"class":507},"},",[497,698,699],{"class":511}," [rtl])",[497,701,531],{"class":507},[497,703,705],{"class":499,"line":704},13,[497,706,588],{"emptyLinePlaceholder":206},[497,708,710,713,715,717],{"class":499,"line":709},14,[497,711,712],{"class":604},"useMarginRightUtility",[497,714,645],{"class":511},[497,716,544],{"class":507},[497,718,650],{"class":507},[497,720,722,724,726,728,730,732],{"class":499,"line":721},15,[497,723,657],{"class":656},[497,725,660],{"class":507},[497,727,663],{"class":507},[497,729,666],{"class":524},[497,731,669],{"class":507},[497,733,672],{"class":507},[497,735,737,739,741,743,745,747],{"class":499,"line":736},16,[497,738,679],{"class":678},[497,740,660],{"class":507},[497,742,663],{"class":507},[497,744,686],{"class":524},[497,746,669],{"class":507},[497,748,672],{"class":507},[497,750,752,754,756],{"class":499,"line":751},17,[497,753,696],{"class":507},[497,755,699],{"class":511},[497,757,531],{"class":507},[497,759,761],{"class":499,"line":760},18,[497,762,588],{"emptyLinePlaceholder":206},[497,764,766,769,772,775],{"class":499,"line":765},19,[497,767,768],{"class":503},"export",[497,770,771],{"class":503}," default",[497,773,774],{"class":511}," s",[497,776,531],{"class":507},[482,778,780],{"icon":140,"label":779},"Output",[487,781,786],{"className":782,"code":783,"filename":784,"language":785,"meta":493,"style":493},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","._margin-left\\:md { margin-left: 1rem; }\n._margin-right\\:md { margin-right: 1rem; }\n\n._rtl\\:margin-left\\:0 {\n    &:where(:dir(rtl), [dir=\"rtl\"], [dir=\"rtl\"] *) {\n        margin-left: 0;\n    }\n}\n\n._rtl\\:margin-right\\:md {\n    &:where(:dir(rtl), [dir=\"rtl\"], [dir=\"rtl\"] *) {\n        margin-right: 1rem;\n    }\n}\n","styleframe/index.css","css",[458,787,788,820,844,848,866,876,888,893,898,902,919,927,938,942],{"__ignoreMap":493},[497,789,790,793,797,800,803,805,809,811,814,817],{"class":499,"line":500},[497,791,792],{"class":507},".",[497,794,796],{"class":795},"sBMFI","_margin-left",[497,798,799],{"class":511},"\\:",[497,801,802],{"class":795},"md",[497,804,508],{"class":507},[497,806,808],{"class":807},"sqsOY"," margin-left",[497,810,660],{"class":507},[497,812,813],{"class":678}," 1rem",[497,815,816],{"class":507},";",[497,818,819],{"class":507}," }\n",[497,821,822,824,827,829,831,833,836,838,840,842],{"class":499,"line":534},[497,823,792],{"class":507},[497,825,826],{"class":795},"_margin-right",[497,828,799],{"class":511},[497,830,802],{"class":795},[497,832,508],{"class":507},[497,834,835],{"class":807}," margin-right",[497,837,660],{"class":507},[497,839,813],{"class":678},[497,841,816],{"class":507},[497,843,819],{"class":507},[497,845,846],{"class":499,"line":563},[497,847,588],{"emptyLinePlaceholder":206},[497,849,850,852,855,857,860,862,864],{"class":499,"line":585},[497,851,792],{"class":507},[497,853,854],{"class":795},"_rtl",[497,856,799],{"class":511},[497,858,859],{"class":795},"margin-left",[497,861,799],{"class":511},[497,863,686],{"class":795},[497,865,650],{"class":507},[497,867,868,871,873],{"class":499,"line":591},[497,869,870],{"class":511},"    &",[497,872,660],{"class":507},[497,874,875],{"class":511},"where(:dir(rtl), [dir=\"rtl\"], [dir=\"rtl\"] *) {\n",[497,877,878,881,883,886],{"class":499,"line":612},[497,879,880],{"class":807},"        margin-left",[497,882,660],{"class":507},[497,884,885],{"class":678}," 0",[497,887,531],{"class":507},[497,889,890],{"class":499,"line":617},[497,891,892],{"class":507},"    }\n",[497,894,895],{"class":499,"line":634},[497,896,897],{"class":511},"}\n",[497,899,900],{"class":499,"line":639},[497,901,588],{"emptyLinePlaceholder":206},[497,903,904,906,908,910,913,915,917],{"class":499,"line":653},[497,905,792],{"class":507},[497,907,854],{"class":795},[497,909,799],{"class":511},[497,911,912],{"class":795},"margin-right",[497,914,799],{"class":511},[497,916,802],{"class":795},[497,918,650],{"class":507},[497,920,921,923,925],{"class":499,"line":675},[497,922,870],{"class":511},[497,924,660],{"class":507},[497,926,875],{"class":511},[497,928,929,932,934,936],{"class":499,"line":693},[497,930,931],{"class":807},"        margin-right",[497,933,660],{"class":507},[497,935,813],{"class":678},[497,937,531],{"class":507},[497,939,940],{"class":499,"line":704},[497,941,892],{"class":507},[497,943,944],{"class":499,"line":709},[497,945,897],{"class":511},[482,947,950],{"icon":948,"label":949},"i-lucide-layout","Usage",[487,951,955],{"className":952,"code":953,"language":954,"meta":493,"style":493},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Flip margin direction for RTL -->\n\u003Cdiv class=\"_margin-left:md _rtl:margin-left:0 _rtl:margin-right:md\">\n    Content with directional margin\n\u003C/div>\n","html",[458,956,957,963,986,991],{"__ignoreMap":493},[497,958,959],{"class":499,"line":500},[497,960,962],{"class":961},"sHwdD","\u003C!-- Flip margin direction for RTL -->\n",[497,964,965,968,971,974,976,978,981,983],{"class":499,"line":534},[497,966,967],{"class":507},"\u003C",[497,969,970],{"class":656},"div",[497,972,973],{"class":594}," class",[497,975,601],{"class":507},[497,977,528],{"class":507},[497,979,980],{"class":524},"_margin-left:md _rtl:margin-left:0 _rtl:margin-right:md",[497,982,528],{"class":507},[497,984,985],{"class":507},">\n",[497,987,988],{"class":499,"line":563},[497,989,990],{"class":511},"    Content with directional margin\n",[497,992,993,996,998],{"class":499,"line":585},[497,994,995],{"class":507},"\u003C/",[497,997,970],{"class":656},[497,999,985],{"class":507},[1001,1002,1004],"h4",{"id":1003},"css-selector","CSS Selector",[1006,1007,1008,1020],"table",{},[1009,1010,1011],"thead",{},[1012,1013,1014,1018],"tr",{},[1015,1016,1017],"th",{},"Modifier Name",[1015,1019,1004],{},[1021,1022,1023],"tbody",{},[1012,1024,1025,1031],{},[1026,1027,1028],"td",{},[458,1029,1030],{},"rtl",[1026,1032,1033],{},[458,1034,1035],{},"&:where(:dir(rtl), [dir=\"rtl\"], [dir=\"rtl\"] *)",[1037,1038,1039,1042,1043,1045],"tip",{},[435,1040,1041],{},"Pro tip",": The RTL modifier uses ",[458,1044,460],{}," to keep specificity at zero. This prevents the RTL variant from winning over other utility classes due to specificity, making the cascade more predictable.",[414,1047,1049],{"id":1048},"useltrmodifier",[458,1050,1051],{},"useLtrModifier",[418,1053,470,1054,1057,1058,1060],{},[458,1055,1056],{},"useLtrModifier()"," function creates a modifier that applies styles in left-to-right contexts. Like the RTL modifier, it uses ",[458,1059,460],{}," for zero specificity.",[479,1062,1063,1262,1413],{},[482,1064,1065],{"icon":484,"label":485},[487,1066,1068],{"className":489,"code":1067,"filename":491,"language":492,"meta":493,"style":493},"import { styleframe } from \"styleframe\";\nimport { useTextAlignUtility } from \"@styleframe/theme\";\nimport { useLtrModifier, useRtlModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst ltr = useLtrModifier(s);\nconst rtl = useRtlModifier(s);\n\nuseTextAlignUtility(s, {\n    left: 'left',\n    right: 'right',\n}, [ltr, rtl]);\n\nexport default s;\n",[458,1069,1070,1090,1111,1136,1140,1154,1158,1173,1187,1191,1202,1218,1234,1248,1252],{"__ignoreMap":493},[497,1071,1072,1074,1076,1078,1080,1082,1084,1086,1088],{"class":499,"line":500},[497,1073,504],{"class":503},[497,1075,508],{"class":507},[497,1077,512],{"class":511},[497,1079,515],{"class":507},[497,1081,518],{"class":503},[497,1083,521],{"class":507},[497,1085,525],{"class":524},[497,1087,528],{"class":507},[497,1089,531],{"class":507},[497,1091,1092,1094,1096,1099,1101,1103,1105,1107,1109],{"class":499,"line":534},[497,1093,504],{"class":503},[497,1095,508],{"class":507},[497,1097,1098],{"class":511}," useTextAlignUtility",[497,1100,515],{"class":507},[497,1102,518],{"class":503},[497,1104,521],{"class":507},[497,1106,556],{"class":524},[497,1108,528],{"class":507},[497,1110,531],{"class":507},[497,1112,1113,1115,1117,1120,1122,1124,1126,1128,1130,1132,1134],{"class":499,"line":563},[497,1114,504],{"class":503},[497,1116,508],{"class":507},[497,1118,1119],{"class":511}," useLtrModifier",[497,1121,544],{"class":507},[497,1123,570],{"class":511},[497,1125,515],{"class":507},[497,1127,518],{"class":503},[497,1129,521],{"class":507},[497,1131,556],{"class":524},[497,1133,528],{"class":507},[497,1135,531],{"class":507},[497,1137,1138],{"class":499,"line":585},[497,1139,588],{"emptyLinePlaceholder":206},[497,1141,1142,1144,1146,1148,1150,1152],{"class":499,"line":591},[497,1143,595],{"class":594},[497,1145,598],{"class":511},[497,1147,601],{"class":507},[497,1149,512],{"class":604},[497,1151,607],{"class":511},[497,1153,531],{"class":507},[497,1155,1156],{"class":499,"line":612},[497,1157,588],{"emptyLinePlaceholder":206},[497,1159,1160,1162,1165,1167,1169,1171],{"class":499,"line":617},[497,1161,595],{"class":594},[497,1163,1164],{"class":511}," ltr ",[497,1166,601],{"class":507},[497,1168,1119],{"class":604},[497,1170,629],{"class":511},[497,1172,531],{"class":507},[497,1174,1175,1177,1179,1181,1183,1185],{"class":499,"line":634},[497,1176,595],{"class":594},[497,1178,622],{"class":511},[497,1180,601],{"class":507},[497,1182,570],{"class":604},[497,1184,629],{"class":511},[497,1186,531],{"class":507},[497,1188,1189],{"class":499,"line":639},[497,1190,588],{"emptyLinePlaceholder":206},[497,1192,1193,1196,1198,1200],{"class":499,"line":653},[497,1194,1195],{"class":604},"useTextAlignUtility",[497,1197,645],{"class":511},[497,1199,544],{"class":507},[497,1201,650],{"class":507},[497,1203,1204,1207,1209,1211,1214,1216],{"class":499,"line":675},[497,1205,1206],{"class":656},"    left",[497,1208,660],{"class":507},[497,1210,663],{"class":507},[497,1212,1213],{"class":524},"left",[497,1215,669],{"class":507},[497,1217,672],{"class":507},[497,1219,1220,1223,1225,1227,1230,1232],{"class":499,"line":693},[497,1221,1222],{"class":656},"    right",[497,1224,660],{"class":507},[497,1226,663],{"class":507},[497,1228,1229],{"class":524},"right",[497,1231,669],{"class":507},[497,1233,672],{"class":507},[497,1235,1236,1238,1241,1243,1246],{"class":499,"line":704},[497,1237,696],{"class":507},[497,1239,1240],{"class":511}," [ltr",[497,1242,544],{"class":507},[497,1244,1245],{"class":511}," rtl])",[497,1247,531],{"class":507},[497,1249,1250],{"class":499,"line":709},[497,1251,588],{"emptyLinePlaceholder":206},[497,1253,1254,1256,1258,1260],{"class":499,"line":721},[497,1255,768],{"class":503},[497,1257,771],{"class":503},[497,1259,774],{"class":511},[497,1261,531],{"class":507},[482,1263,1264],{"icon":140,"label":779},[487,1265,1267],{"className":782,"code":1266,"filename":784,"language":785,"meta":493,"style":493},"._text-align\\:left { text-align: left; }\n._text-align\\:right { text-align: right; }\n\n._ltr\\:text-align\\:left {\n    &:where(:dir(ltr), [dir=\"ltr\"], [dir=\"ltr\"] *) {\n        text-align: left;\n    }\n}\n\n._rtl\\:text-align\\:right {\n    &:where(:dir(rtl), [dir=\"rtl\"], [dir=\"rtl\"] *) {\n        text-align: right;\n    }\n}\n",[458,1268,1269,1294,1317,1321,1339,1348,1359,1363,1367,1371,1387,1395,1405,1409],{"__ignoreMap":493},[497,1270,1271,1273,1276,1278,1280,1282,1285,1287,1290,1292],{"class":499,"line":500},[497,1272,792],{"class":507},[497,1274,1275],{"class":795},"_text-align",[497,1277,799],{"class":511},[497,1279,1213],{"class":795},[497,1281,508],{"class":507},[497,1283,1284],{"class":807}," text-align",[497,1286,660],{"class":507},[497,1288,1289],{"class":511}," left",[497,1291,816],{"class":507},[497,1293,819],{"class":507},[497,1295,1296,1298,1300,1302,1304,1306,1308,1310,1313,1315],{"class":499,"line":534},[497,1297,792],{"class":507},[497,1299,1275],{"class":795},[497,1301,799],{"class":511},[497,1303,1229],{"class":795},[497,1305,508],{"class":507},[497,1307,1284],{"class":807},[497,1309,660],{"class":507},[497,1311,1312],{"class":511}," right",[497,1314,816],{"class":507},[497,1316,819],{"class":507},[497,1318,1319],{"class":499,"line":563},[497,1320,588],{"emptyLinePlaceholder":206},[497,1322,1323,1325,1328,1330,1333,1335,1337],{"class":499,"line":585},[497,1324,792],{"class":507},[497,1326,1327],{"class":795},"_ltr",[497,1329,799],{"class":511},[497,1331,1332],{"class":795},"text-align",[497,1334,799],{"class":511},[497,1336,1213],{"class":795},[497,1338,650],{"class":507},[497,1340,1341,1343,1345],{"class":499,"line":591},[497,1342,870],{"class":511},[497,1344,660],{"class":507},[497,1346,1347],{"class":511},"where(:dir(ltr), [dir=\"ltr\"], [dir=\"ltr\"] *) {\n",[497,1349,1350,1353,1355,1357],{"class":499,"line":612},[497,1351,1352],{"class":807},"        text-align",[497,1354,660],{"class":507},[497,1356,1289],{"class":511},[497,1358,531],{"class":507},[497,1360,1361],{"class":499,"line":617},[497,1362,892],{"class":507},[497,1364,1365],{"class":499,"line":634},[497,1366,897],{"class":511},[497,1368,1369],{"class":499,"line":639},[497,1370,588],{"emptyLinePlaceholder":206},[497,1372,1373,1375,1377,1379,1381,1383,1385],{"class":499,"line":653},[497,1374,792],{"class":507},[497,1376,854],{"class":795},[497,1378,799],{"class":511},[497,1380,1332],{"class":795},[497,1382,799],{"class":511},[497,1384,1229],{"class":795},[497,1386,650],{"class":507},[497,1388,1389,1391,1393],{"class":499,"line":675},[497,1390,870],{"class":511},[497,1392,660],{"class":507},[497,1394,875],{"class":511},[497,1396,1397,1399,1401,1403],{"class":499,"line":693},[497,1398,1352],{"class":807},[497,1400,660],{"class":507},[497,1402,1312],{"class":511},[497,1404,531],{"class":507},[497,1406,1407],{"class":499,"line":704},[497,1408,892],{"class":507},[497,1410,1411],{"class":499,"line":709},[497,1412,897],{"class":511},[482,1414,1415],{"icon":948,"label":949},[487,1416,1418],{"className":952,"code":1417,"language":954,"meta":493,"style":493},"\u003C!-- Explicit directional text alignment -->\n\u003Cp class=\"_ltr:text-align:left _rtl:text-align:right\">\n    Directional text alignment\n\u003C/p>\n",[458,1419,1420,1425,1444,1449],{"__ignoreMap":493},[497,1421,1422],{"class":499,"line":500},[497,1423,1424],{"class":961},"\u003C!-- Explicit directional text alignment -->\n",[497,1426,1427,1429,1431,1433,1435,1437,1440,1442],{"class":499,"line":534},[497,1428,967],{"class":507},[497,1430,418],{"class":656},[497,1432,973],{"class":594},[497,1434,601],{"class":507},[497,1436,528],{"class":507},[497,1438,1439],{"class":524},"_ltr:text-align:left _rtl:text-align:right",[497,1441,528],{"class":507},[497,1443,985],{"class":507},[497,1445,1446],{"class":499,"line":563},[497,1447,1448],{"class":511},"    Directional text alignment\n",[497,1450,1451,1453,1455],{"class":499,"line":585},[497,1452,995],{"class":507},[497,1454,418],{"class":656},[497,1456,985],{"class":507},[1001,1458,1004],{"id":1459},"css-selector-1",[1006,1461,1462,1470],{},[1009,1463,1464],{},[1012,1465,1466,1468],{},[1015,1467,1017],{},[1015,1469,1004],{},[1021,1471,1472],{},[1012,1473,1474,1479],{},[1026,1475,1476],{},[458,1477,1478],{},"ltr",[1026,1480,1481],{},[458,1482,1483],{},"&:where(:dir(ltr), [dir=\"ltr\"], [dir=\"ltr\"] *)",[414,1485,1487],{"id":1486},"usedirectionalmodifiers",[458,1488,1489],{},"useDirectionalModifiers",[418,1491,470,1492,1495],{},[458,1493,1494],{},"useDirectionalModifiers()"," function registers both directional modifiers at once and returns them as a destructurable object.",[479,1497,1498,1745],{},[482,1499,1500],{"icon":484,"label":485},[487,1501,1503],{"className":489,"code":1502,"filename":491,"language":492,"meta":493,"style":493},"import { styleframe } from \"styleframe\";\nimport { usePaddingLeftUtility, usePaddingRightUtility } from \"@styleframe/theme\";\nimport { useDirectionalModifiers } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst { rtl, ltr } = useDirectionalModifiers(s);\n\nusePaddingLeftUtility(s, {\n    md: '1rem',\n    0: '0',\n}, [rtl, ltr]);\n\nusePaddingRightUtility(s, {\n    md: '1rem',\n    0: '0',\n}, [rtl, ltr]);\n\nexport default s;\n",[458,1504,1505,1525,1551,1572,1576,1590,1594,1619,1623,1634,1648,1662,1676,1680,1691,1705,1719,1731,1735],{"__ignoreMap":493},[497,1506,1507,1509,1511,1513,1515,1517,1519,1521,1523],{"class":499,"line":500},[497,1508,504],{"class":503},[497,1510,508],{"class":507},[497,1512,512],{"class":511},[497,1514,515],{"class":507},[497,1516,518],{"class":503},[497,1518,521],{"class":507},[497,1520,525],{"class":524},[497,1522,528],{"class":507},[497,1524,531],{"class":507},[497,1526,1527,1529,1531,1534,1536,1539,1541,1543,1545,1547,1549],{"class":499,"line":534},[497,1528,504],{"class":503},[497,1530,508],{"class":507},[497,1532,1533],{"class":511}," usePaddingLeftUtility",[497,1535,544],{"class":507},[497,1537,1538],{"class":511}," usePaddingRightUtility",[497,1540,515],{"class":507},[497,1542,518],{"class":503},[497,1544,521],{"class":507},[497,1546,556],{"class":524},[497,1548,528],{"class":507},[497,1550,531],{"class":507},[497,1552,1553,1555,1557,1560,1562,1564,1566,1568,1570],{"class":499,"line":563},[497,1554,504],{"class":503},[497,1556,508],{"class":507},[497,1558,1559],{"class":511}," useDirectionalModifiers",[497,1561,515],{"class":507},[497,1563,518],{"class":503},[497,1565,521],{"class":507},[497,1567,556],{"class":524},[497,1569,528],{"class":507},[497,1571,531],{"class":507},[497,1573,1574],{"class":499,"line":585},[497,1575,588],{"emptyLinePlaceholder":206},[497,1577,1578,1580,1582,1584,1586,1588],{"class":499,"line":591},[497,1579,595],{"class":594},[497,1581,598],{"class":511},[497,1583,601],{"class":507},[497,1585,512],{"class":604},[497,1587,607],{"class":511},[497,1589,531],{"class":507},[497,1591,1592],{"class":499,"line":612},[497,1593,588],{"emptyLinePlaceholder":206},[497,1595,1596,1598,1600,1603,1605,1607,1610,1613,1615,1617],{"class":499,"line":617},[497,1597,595],{"class":594},[497,1599,508],{"class":507},[497,1601,1602],{"class":511}," rtl",[497,1604,544],{"class":507},[497,1606,1164],{"class":511},[497,1608,1609],{"class":507},"}",[497,1611,1612],{"class":507}," =",[497,1614,1559],{"class":604},[497,1616,629],{"class":511},[497,1618,531],{"class":507},[497,1620,1621],{"class":499,"line":634},[497,1622,588],{"emptyLinePlaceholder":206},[497,1624,1625,1628,1630,1632],{"class":499,"line":639},[497,1626,1627],{"class":604},"usePaddingLeftUtility",[497,1629,645],{"class":511},[497,1631,544],{"class":507},[497,1633,650],{"class":507},[497,1635,1636,1638,1640,1642,1644,1646],{"class":499,"line":653},[497,1637,657],{"class":656},[497,1639,660],{"class":507},[497,1641,663],{"class":507},[497,1643,666],{"class":524},[497,1645,669],{"class":507},[497,1647,672],{"class":507},[497,1649,1650,1652,1654,1656,1658,1660],{"class":499,"line":675},[497,1651,679],{"class":678},[497,1653,660],{"class":507},[497,1655,663],{"class":507},[497,1657,686],{"class":524},[497,1659,669],{"class":507},[497,1661,672],{"class":507},[497,1663,1664,1666,1669,1671,1674],{"class":499,"line":693},[497,1665,696],{"class":507},[497,1667,1668],{"class":511}," [rtl",[497,1670,544],{"class":507},[497,1672,1673],{"class":511}," ltr])",[497,1675,531],{"class":507},[497,1677,1678],{"class":499,"line":704},[497,1679,588],{"emptyLinePlaceholder":206},[497,1681,1682,1685,1687,1689],{"class":499,"line":709},[497,1683,1684],{"class":604},"usePaddingRightUtility",[497,1686,645],{"class":511},[497,1688,544],{"class":507},[497,1690,650],{"class":507},[497,1692,1693,1695,1697,1699,1701,1703],{"class":499,"line":721},[497,1694,657],{"class":656},[497,1696,660],{"class":507},[497,1698,663],{"class":507},[497,1700,666],{"class":524},[497,1702,669],{"class":507},[497,1704,672],{"class":507},[497,1706,1707,1709,1711,1713,1715,1717],{"class":499,"line":736},[497,1708,679],{"class":678},[497,1710,660],{"class":507},[497,1712,663],{"class":507},[497,1714,686],{"class":524},[497,1716,669],{"class":507},[497,1718,672],{"class":507},[497,1720,1721,1723,1725,1727,1729],{"class":499,"line":751},[497,1722,696],{"class":507},[497,1724,1668],{"class":511},[497,1726,544],{"class":507},[497,1728,1673],{"class":511},[497,1730,531],{"class":507},[497,1732,1733],{"class":499,"line":760},[497,1734,588],{"emptyLinePlaceholder":206},[497,1736,1737,1739,1741,1743],{"class":499,"line":765},[497,1738,768],{"class":503},[497,1740,771],{"class":503},[497,1742,774],{"class":511},[497,1744,531],{"class":507},[482,1746,1747],{"icon":948,"label":949},[487,1748,1750],{"className":952,"code":1749,"language":954,"meta":493,"style":493},"\u003C!-- Flip padding direction -->\n\u003Cdiv class=\"_padding-left:md _rtl:padding-left:0 _rtl:padding-right:md\">\n    Content with directional padding\n\u003C/div>\n",[458,1751,1752,1757,1776,1781],{"__ignoreMap":493},[497,1753,1754],{"class":499,"line":500},[497,1755,1756],{"class":961},"\u003C!-- Flip padding direction -->\n",[497,1758,1759,1761,1763,1765,1767,1769,1772,1774],{"class":499,"line":534},[497,1760,967],{"class":507},[497,1762,970],{"class":656},[497,1764,973],{"class":594},[497,1766,601],{"class":507},[497,1768,528],{"class":507},[497,1770,1771],{"class":524},"_padding-left:md _rtl:padding-left:0 _rtl:padding-right:md",[497,1773,528],{"class":507},[497,1775,985],{"class":507},[497,1777,1778],{"class":499,"line":563},[497,1779,1780],{"class":511},"    Content with directional padding\n",[497,1782,1783,1785,1787],{"class":499,"line":585},[497,1784,995],{"class":507},[497,1786,970],{"class":656},[497,1788,985],{"class":507},[1790,1791,1793],"h3",{"id":1792},"returned-modifiers","Returned Modifiers",[1006,1795,1796,1807],{},[1009,1797,1798],{},[1012,1799,1800,1803,1805],{},[1015,1801,1802],{},"Key",[1015,1804,1017],{},[1015,1806,1004],{},[1021,1808,1809,1823],{},[1012,1810,1811,1815,1819],{},[1026,1812,1813],{},[458,1814,1030],{},[1026,1816,1817],{},[458,1818,1030],{},[1026,1820,1821],{},[458,1822,1035],{},[1012,1824,1825,1829,1833],{},[1026,1826,1827],{},[458,1828,1478],{},[1026,1830,1831],{},[458,1832,1478],{},[1026,1834,1835],{},[458,1836,1483],{},[414,1838,1840],{"id":1839},"examples","Examples",[1790,1842,1844],{"id":1843},"bidirectional-navigation","Bidirectional Navigation",[479,1846,1847,2161],{},[482,1848,1849],{"icon":484,"label":485},[487,1850,1852],{"className":489,"code":1851,"filename":491,"language":492,"meta":493,"style":493},"import { styleframe } from \"styleframe\";\nimport {\n    useMarginLeftUtility,\n    useMarginRightUtility,\n    usePaddingLeftUtility,\n    usePaddingRightUtility,\n} from \"@styleframe/theme\";\nimport { useDirectionalModifiers } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst { rtl } = useDirectionalModifiers(s);\n\nuseMarginLeftUtility(s, { auto: 'auto', 0: '0' }, [rtl]);\nuseMarginRightUtility(s, { auto: 'auto', 0: '0' }, [rtl]);\n\nusePaddingLeftUtility(s, { md: '1rem', 0: '0' }, [rtl]);\nusePaddingRightUtility(s, { md: '1rem', 0: '0' }, [rtl]);\n\nexport default s;\n",[458,1853,1854,1874,1880,1887,1894,1901,1908,1922,1942,1946,1960,1964,1982,1986,2027,2065,2069,2108,2146,2150],{"__ignoreMap":493},[497,1855,1856,1858,1860,1862,1864,1866,1868,1870,1872],{"class":499,"line":500},[497,1857,504],{"class":503},[497,1859,508],{"class":507},[497,1861,512],{"class":511},[497,1863,515],{"class":507},[497,1865,518],{"class":503},[497,1867,521],{"class":507},[497,1869,525],{"class":524},[497,1871,528],{"class":507},[497,1873,531],{"class":507},[497,1875,1876,1878],{"class":499,"line":534},[497,1877,504],{"class":503},[497,1879,650],{"class":507},[497,1881,1882,1885],{"class":499,"line":563},[497,1883,1884],{"class":511},"    useMarginLeftUtility",[497,1886,672],{"class":507},[497,1888,1889,1892],{"class":499,"line":585},[497,1890,1891],{"class":511},"    useMarginRightUtility",[497,1893,672],{"class":507},[497,1895,1896,1899],{"class":499,"line":591},[497,1897,1898],{"class":511},"    usePaddingLeftUtility",[497,1900,672],{"class":507},[497,1902,1903,1906],{"class":499,"line":612},[497,1904,1905],{"class":511},"    usePaddingRightUtility",[497,1907,672],{"class":507},[497,1909,1910,1912,1914,1916,1918,1920],{"class":499,"line":617},[497,1911,1609],{"class":507},[497,1913,518],{"class":503},[497,1915,521],{"class":507},[497,1917,556],{"class":524},[497,1919,528],{"class":507},[497,1921,531],{"class":507},[497,1923,1924,1926,1928,1930,1932,1934,1936,1938,1940],{"class":499,"line":634},[497,1925,504],{"class":503},[497,1927,508],{"class":507},[497,1929,1559],{"class":511},[497,1931,515],{"class":507},[497,1933,518],{"class":503},[497,1935,521],{"class":507},[497,1937,556],{"class":524},[497,1939,528],{"class":507},[497,1941,531],{"class":507},[497,1943,1944],{"class":499,"line":639},[497,1945,588],{"emptyLinePlaceholder":206},[497,1947,1948,1950,1952,1954,1956,1958],{"class":499,"line":653},[497,1949,595],{"class":594},[497,1951,598],{"class":511},[497,1953,601],{"class":507},[497,1955,512],{"class":604},[497,1957,607],{"class":511},[497,1959,531],{"class":507},[497,1961,1962],{"class":499,"line":675},[497,1963,588],{"emptyLinePlaceholder":206},[497,1965,1966,1968,1970,1972,1974,1976,1978,1980],{"class":499,"line":693},[497,1967,595],{"class":594},[497,1969,508],{"class":507},[497,1971,622],{"class":511},[497,1973,1609],{"class":507},[497,1975,1612],{"class":507},[497,1977,1559],{"class":604},[497,1979,629],{"class":511},[497,1981,531],{"class":507},[497,1983,1984],{"class":499,"line":704},[497,1985,588],{"emptyLinePlaceholder":206},[497,1987,1988,1990,1992,1994,1996,1999,2001,2003,2006,2008,2010,2012,2014,2016,2018,2020,2023,2025],{"class":499,"line":709},[497,1989,642],{"class":604},[497,1991,645],{"class":511},[497,1993,544],{"class":507},[497,1995,508],{"class":507},[497,1997,1998],{"class":656}," auto",[497,2000,660],{"class":507},[497,2002,663],{"class":507},[497,2004,2005],{"class":524},"auto",[497,2007,669],{"class":507},[497,2009,544],{"class":507},[497,2011,885],{"class":678},[497,2013,660],{"class":507},[497,2015,663],{"class":507},[497,2017,686],{"class":524},[497,2019,669],{"class":507},[497,2021,2022],{"class":507}," },",[497,2024,699],{"class":511},[497,2026,531],{"class":507},[497,2028,2029,2031,2033,2035,2037,2039,2041,2043,2045,2047,2049,2051,2053,2055,2057,2059,2061,2063],{"class":499,"line":721},[497,2030,712],{"class":604},[497,2032,645],{"class":511},[497,2034,544],{"class":507},[497,2036,508],{"class":507},[497,2038,1998],{"class":656},[497,2040,660],{"class":507},[497,2042,663],{"class":507},[497,2044,2005],{"class":524},[497,2046,669],{"class":507},[497,2048,544],{"class":507},[497,2050,885],{"class":678},[497,2052,660],{"class":507},[497,2054,663],{"class":507},[497,2056,686],{"class":524},[497,2058,669],{"class":507},[497,2060,2022],{"class":507},[497,2062,699],{"class":511},[497,2064,531],{"class":507},[497,2066,2067],{"class":499,"line":736},[497,2068,588],{"emptyLinePlaceholder":206},[497,2070,2071,2073,2075,2077,2079,2082,2084,2086,2088,2090,2092,2094,2096,2098,2100,2102,2104,2106],{"class":499,"line":751},[497,2072,1627],{"class":604},[497,2074,645],{"class":511},[497,2076,544],{"class":507},[497,2078,508],{"class":507},[497,2080,2081],{"class":656}," md",[497,2083,660],{"class":507},[497,2085,663],{"class":507},[497,2087,666],{"class":524},[497,2089,669],{"class":507},[497,2091,544],{"class":507},[497,2093,885],{"class":678},[497,2095,660],{"class":507},[497,2097,663],{"class":507},[497,2099,686],{"class":524},[497,2101,669],{"class":507},[497,2103,2022],{"class":507},[497,2105,699],{"class":511},[497,2107,531],{"class":507},[497,2109,2110,2112,2114,2116,2118,2120,2122,2124,2126,2128,2130,2132,2134,2136,2138,2140,2142,2144],{"class":499,"line":760},[497,2111,1684],{"class":604},[497,2113,645],{"class":511},[497,2115,544],{"class":507},[497,2117,508],{"class":507},[497,2119,2081],{"class":656},[497,2121,660],{"class":507},[497,2123,663],{"class":507},[497,2125,666],{"class":524},[497,2127,669],{"class":507},[497,2129,544],{"class":507},[497,2131,885],{"class":678},[497,2133,660],{"class":507},[497,2135,663],{"class":507},[497,2137,686],{"class":524},[497,2139,669],{"class":507},[497,2141,2022],{"class":507},[497,2143,699],{"class":511},[497,2145,531],{"class":507},[497,2147,2148],{"class":499,"line":765},[497,2149,588],{"emptyLinePlaceholder":206},[497,2151,2153,2155,2157,2159],{"class":499,"line":2152},20,[497,2154,768],{"class":503},[497,2156,771],{"class":503},[497,2158,774],{"class":511},[497,2160,531],{"class":507},[482,2162,2163],{"icon":948,"label":949},[487,2164,2166],{"className":952,"code":2165,"language":954,"meta":493,"style":493},"\u003Cnav>\n    \u003Cul>\n        \u003Cli class=\"_margin-right:auto _rtl:margin-right:0 _rtl:margin-left:auto\">\n            Logo\n        \u003C/li>\n        \u003Cli class=\"_padding-left:md _rtl:padding-left:0 _rtl:padding-right:md\">\n            Menu item\n        \u003C/li>\n    \u003C/ul>\n\u003C/nav>\n",[458,2167,2168,2177,2186,2206,2211,2220,2238,2243,2251,2260],{"__ignoreMap":493},[497,2169,2170,2172,2175],{"class":499,"line":500},[497,2171,967],{"class":507},[497,2173,2174],{"class":656},"nav",[497,2176,985],{"class":507},[497,2178,2179,2182,2184],{"class":499,"line":534},[497,2180,2181],{"class":507},"    \u003C",[497,2183,429],{"class":656},[497,2185,985],{"class":507},[497,2187,2188,2191,2193,2195,2197,2199,2202,2204],{"class":499,"line":563},[497,2189,2190],{"class":507},"        \u003C",[497,2192,432],{"class":656},[497,2194,973],{"class":594},[497,2196,601],{"class":507},[497,2198,528],{"class":507},[497,2200,2201],{"class":524},"_margin-right:auto _rtl:margin-right:0 _rtl:margin-left:auto",[497,2203,528],{"class":507},[497,2205,985],{"class":507},[497,2207,2208],{"class":499,"line":585},[497,2209,2210],{"class":511},"            Logo\n",[497,2212,2213,2216,2218],{"class":499,"line":591},[497,2214,2215],{"class":507},"        \u003C/",[497,2217,432],{"class":656},[497,2219,985],{"class":507},[497,2221,2222,2224,2226,2228,2230,2232,2234,2236],{"class":499,"line":612},[497,2223,2190],{"class":507},[497,2225,432],{"class":656},[497,2227,973],{"class":594},[497,2229,601],{"class":507},[497,2231,528],{"class":507},[497,2233,1771],{"class":524},[497,2235,528],{"class":507},[497,2237,985],{"class":507},[497,2239,2240],{"class":499,"line":617},[497,2241,2242],{"class":511},"            Menu item\n",[497,2244,2245,2247,2249],{"class":499,"line":634},[497,2246,2215],{"class":507},[497,2248,432],{"class":656},[497,2250,985],{"class":507},[497,2252,2253,2256,2258],{"class":499,"line":639},[497,2254,2255],{"class":507},"    \u003C/",[497,2257,429],{"class":656},[497,2259,985],{"class":507},[497,2261,2262,2264,2266],{"class":499,"line":653},[497,2263,995],{"class":507},[497,2265,2174],{"class":656},[497,2267,985],{"class":507},[414,2269,2271],{"id":2270},"best-practices","Best Practices",[429,2273,2274,2288,2294,2312,2318],{},[432,2275,2276,2279,2280,2283,2284,2287],{},[435,2277,2278],{},"Prefer logical properties",": When possible, use CSS logical properties (",[458,2281,2282],{},"margin-inline-start",", ",[458,2285,2286],{},"padding-inline-end",") instead of directional modifiers, as they handle RTL automatically",[432,2289,2290,2293],{},[435,2291,2292],{},"Use directional modifiers for exceptions",": Apply them when logical properties don't cover your use case (e.g., absolute positioning, transforms)",[432,2295,2296,2303,2304,2307,2308,2311],{},[435,2297,2298,2299,2302],{},"Set ",[458,2300,2301],{},"dir"," attribute",": Ensure your HTML has the correct ",[458,2305,2306],{},"dir=\"rtl\""," or ",[458,2309,2310],{},"dir=\"ltr\""," attribute for the selectors to match",[432,2313,2314,2317],{},[435,2315,2316],{},"Test both directions",": Verify your layouts work correctly in both LTR and RTL modes",[432,2319,2320,456,2323,2325],{},[435,2321,2322],{},"Keep specificity low",[458,2324,460],{}," wrapper ensures directional modifiers don't cause specificity battles",[414,2327,2329],{"id":2328},"faq","FAQ",[2331,2332,2333,2341,2353],"accordion",{},[2334,2335,470,2338,2340],"accordion-item",{"icon":2336,"label":2337},"i-lucide-circle-help","Why do directional modifiers use :where()?",[458,2339,460],{}," pseudo-class has zero specificity, which means the directional modifier won't increase the specificity of the generated selector. This prevents common issues where RTL overrides would unintentionally win over other utility classes.",[2334,2342,2344,2345,2283,2347,2283,2349,2352],{"icon":2336,"label":2343},"Should I use directional modifiers or logical properties?","Prefer CSS logical properties (",[458,2346,2282],{},[458,2348,2286],{},[458,2350,2351],{},"inset-inline-start",") for most use cases. Use directional modifiers when you need to apply completely different styles in RTL vs LTR that go beyond simple property flipping.",[2334,2354,2356,2357,2360,2361,2364,2365,2368],{"icon":2336,"label":2355},"How do directional modifiers detect text direction?","The modifiers use a combination of selectors: ",[458,2358,2359],{},":dir(rtl)"," (the CSS pseudo-class) and ",[458,2362,2363],{},"[dir=\"rtl\"]"," (the HTML attribute selector), plus ",[458,2366,2367],{},"[dir=\"rtl\"] *"," for nested elements. This ensures broad compatibility across browsers.",[2370,2371,2372],"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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}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":493,"searchDepth":534,"depth":534,"links":2374},[2375,2376,2377,2378,2379,2382,2385,2386],{"id":416,"depth":534,"text":64},{"id":423,"depth":534,"text":424},{"id":464,"depth":534,"text":467},{"id":1048,"depth":534,"text":1051},{"id":1486,"depth":534,"text":1489,"children":2380},[2381],{"id":1792,"depth":563,"text":1793},{"id":1839,"depth":534,"text":1840,"children":2383},[2384],{"id":1843,"depth":563,"text":1844},{"id":2270,"depth":534,"text":2271},{"id":2328,"depth":534,"text":2329},"Create directional modifiers for targeting elements based on text direction (RTL/LTR) with full type safety.",null,{},{"title":380,"icon":7},{"title":409,"description":2387},{"loc":381},"Vs5oqPlASeMW5gopbCq0LSV9yQAqI7bau4DBkJ6bc7Q",[2395,2397],{"title":376,"path":377,"stem":378,"description":2396,"icon":7,"children":-1},"Create ARIA state modifiers for styling elements based on their ARIA attribute values with full type safety.",{"title":384,"path":385,"stem":386,"description":2398,"icon":7,"children":-1},"Create form state modifiers for styling form elements based on their validation and interaction states with full type safety.",1776621151554]