[{"data":1,"prerenderedAt":2693},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-modifiers-directional":682,"-docs-theme-modifiers-directional-surround":2688},{"gettingStarted":4,"api":71,"theme":162},[5,36,51],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002Fgetting-started",[11,16,21,26,31],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002Fgetting-started\u002F01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002Fgetting-started\u002F02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","\u002Fdocs\u002Fgetting-started\u002Fguides","docs\u002Fgetting-started\u002F03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","\u002Fdocs\u002Fgetting-started\u002Fcomparisons","docs\u002Fgetting-started\u002F06.comparisons","i-lucide-file-diff",{"title":32,"path":33,"stem":34,"icon":35},"Licensing","\u002Fdocs\u002Fgetting-started\u002Flicensing","docs\u002Fgetting-started\u002F07.licensing","i-lucide-scale",{"title":37,"icon":7,"path":38,"stem":39,"children":40,"page":7},"Tooling","\u002Fdocs\u002Fgetting-started\u002Ftooling","docs\u002Fgetting-started\u002Ftooling",[41,46],{"title":42,"path":43,"stem":44,"icon":45},"CLI Reference","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli","docs\u002Fgetting-started\u002Ftooling\u002F01.cli","i-lucide-square-terminal",{"title":47,"path":48,"stem":49,"icon":50},"Utility Scanner","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fscanner","docs\u002Fgetting-started\u002Ftooling\u002F02.scanner","i-lucide-view",{"title":52,"icon":7,"path":53,"stem":54,"children":55,"page":7},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002Fgetting-started\u002Fintegrations",[56,61,66],{"title":57,"path":58,"stem":59,"icon":60},"DTCG","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fdtcg","docs\u002Fgetting-started\u002Fintegrations\u002F01.dtcg","i-lucide-square-code",{"title":62,"path":63,"stem":64,"icon":65},"Figma Plugin","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffigma-plugin","docs\u002Fgetting-started\u002Fintegrations\u002F02.figma-plugin","i-simple-icons-figma",{"title":67,"path":68,"stem":69,"icon":70},"Storybook","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fstorybook","docs\u002Fgetting-started\u002Fintegrations\u002F03.storybook","i-simple-icons-storybook",[72],{"title":73,"path":74,"stem":75,"children":76,"icon":7},"API Reference","\u002Fdocs\u002Fapi","docs\u002Fapi\u002F00.index",[77,80,85,90,95,100,105,110,115,120,125,130,145,150,155,160],{"title":78,"path":74,"stem":75,"icon":79},"Overview","i-lucide-book-text",{"title":81,"path":82,"stem":83,"icon":84},"Instance","\u002Fdocs\u002Fapi\u002Finstance","docs\u002Fapi\u002F01.instance","i-lucide-cloud-lightning",{"title":86,"path":87,"stem":88,"icon":89},"Variables","\u002Fdocs\u002Fapi\u002Fvariables","docs\u002Fapi\u002F02.variables","i-lucide-variable",{"title":91,"path":92,"stem":93,"icon":94},"Selectors","\u002Fdocs\u002Fapi\u002Fselectors","docs\u002Fapi\u002F03.selectors","i-lucide-scan-text",{"title":96,"path":97,"stem":98,"icon":99},"At-Rules","\u002Fdocs\u002Fapi\u002Fat-rules","docs\u002Fapi\u002F04.at-rules","i-lucide-at-sign",{"title":101,"path":102,"stem":103,"icon":104},"Media Queries","\u002Fdocs\u002Fapi\u002Fmedia-queries","docs\u002Fapi\u002F05.media-queries","i-lucide-image-upscale",{"title":106,"path":107,"stem":108,"icon":109},"Keyframes","\u002Fdocs\u002Fapi\u002Fkeyframes","docs\u002Fapi\u002F06.keyframes","i-lucide-square-play",{"title":111,"path":112,"stem":113,"icon":114},"Interpolation","\u002Fdocs\u002Fapi\u002Finterpolation","docs\u002Fapi\u002F07.interpolation","i-lucide-wrap-text",{"title":116,"path":117,"stem":118,"icon":119},"Utilities","\u002Fdocs\u002Fapi\u002Futilities","docs\u002Fapi\u002F08.utilities","i-lucide-sparkles",{"title":121,"path":122,"stem":123,"icon":124},"Utility Modifiers","\u002Fdocs\u002Fapi\u002Futility-modifiers","docs\u002Fapi\u002F09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":126,"path":127,"stem":128,"icon":129},"Themes","\u002Fdocs\u002Fapi\u002Fthemes","docs\u002Fapi\u002F10.themes","i-lucide-paintbrush",{"title":131,"path":132,"stem":133,"children":134,"icon":144},"Recipes","\u002Fdocs\u002Fapi\u002Frecipes","docs\u002Fapi\u002F11.recipes\u002F00.index",[135,136,140],{"title":78,"path":132,"stem":133},{"title":137,"path":138,"stem":139},"Runtime","\u002Fdocs\u002Fapi\u002Frecipes\u002Fruntime","docs\u002Fapi\u002F11.recipes\u002F01.runtime",{"title":141,"path":142,"stem":143},"Output Format","\u002Fdocs\u002Fapi\u002Frecipes\u002Foutput-format","docs\u002Fapi\u002F11.recipes\u002F02.output-format","i-lucide-chef-hat",{"title":146,"path":147,"stem":148,"icon":149},"Composables","\u002Fdocs\u002Fapi\u002Fcomposables","docs\u002Fapi\u002F12.composables","i-lucide-component",{"title":151,"path":152,"stem":153,"icon":154},"Imports","\u002Fdocs\u002Fapi\u002Fimports","docs\u002Fapi\u002F13.imports","i-lucide-file-input",{"title":156,"path":157,"stem":158,"icon":159},"Merging","\u002Fdocs\u002Fapi\u002Fmerging","docs\u002Fapi\u002F13.merging","i-lucide-squares-intersect",{"title":151,"path":152,"stem":161,"icon":154},"docs\u002Fapi\u002F14.imports",[163,243,357,558,635],{"title":164,"path":165,"stem":166,"children":167,"icon":7},"Design Tokens","\u002Fdocs\u002Ftheme\u002Fdesign-tokens","docs\u002Ftheme\u002Fdesign-tokens\u002F00.index",[168,169,174,179,184,189,194,199,204,209,224,228,233,238],{"title":78,"path":165,"stem":166,"icon":79},{"title":170,"path":171,"stem":172,"icon":173},"Preset","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fpreset","docs\u002Ftheme\u002Fdesign-tokens\u002F01.preset","i-lucide-package",{"title":175,"path":176,"stem":177,"icon":178},"Border Radiuses","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborder-radiuses","docs\u002Ftheme\u002Fdesign-tokens\u002F02.border-radiuses","i-lucide-square-round-corner",{"title":180,"path":181,"stem":182,"icon":183},"Borders","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborders","docs\u002Ftheme\u002Fdesign-tokens\u002F03.borders","i-lucide-square-dashed-top-solid",{"title":185,"path":186,"stem":187,"icon":188},"Box Shadows","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbox-shadows","docs\u002Ftheme\u002Fdesign-tokens\u002F04.box-shadows","i-lucide-layers-2",{"title":190,"path":191,"stem":192,"icon":193},"Breakpoints","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbreakpoints","docs\u002Ftheme\u002Fdesign-tokens\u002F05.breakpoints","i-lucide-monitor-smartphone",{"title":195,"path":196,"stem":197,"icon":198},"Colors","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcolors","docs\u002Ftheme\u002Fdesign-tokens\u002F06.colors","i-lucide-palette",{"title":200,"path":201,"stem":202,"icon":203},"Duration","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fduration","docs\u002Ftheme\u002Fdesign-tokens\u002F07.duration","i-lucide-timer",{"title":205,"path":206,"stem":207,"icon":208},"Easing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Feasing","docs\u002Ftheme\u002Fdesign-tokens\u002F08.easing","i-lucide-spline",{"title":210,"path":211,"stem":212,"children":213,"icon":104,"defaultOpen":223},"Fluid Design","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F01.index",[214,215,219],{"title":78,"path":211,"stem":212},{"title":216,"path":217,"stem":218},"Fluid Viewport","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Fviewport","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F02.viewport",{"title":220,"path":221,"stem":222},"Fluid Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F03.typography",true,{"title":225,"path":226,"stem":227,"icon":35},"Scales","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fscales","docs\u002Ftheme\u002Fdesign-tokens\u002F10.scales",{"title":229,"path":230,"stem":231,"icon":232},"Spacing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fspacing","docs\u002Ftheme\u002Fdesign-tokens\u002F11.spacing","i-lucide-move-horizontal",{"title":234,"path":235,"stem":236,"icon":237},"Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F12.typography","i-lucide-type",{"title":239,"path":240,"stem":241,"icon":242},"Z-Index","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fz-index","docs\u002Ftheme\u002Fdesign-tokens\u002F13.z-index","i-lucide-layers",{"title":244,"path":245,"stem":246,"children":247,"icon":7},"Elements","\u002Fdocs\u002Ftheme\u002Felements","docs\u002Ftheme\u002Felements\u002F00.index",[248,249,252,259,281,301,313,329,341],{"title":78,"path":245,"stem":246,"icon":79},{"title":170,"path":250,"stem":251,"icon":173},"\u002Fdocs\u002Ftheme\u002Felements\u002Fpreset","docs\u002Ftheme\u002Felements\u002F01.preset",{"title":253,"icon":242,"defaultOpen":223,"page":7,"children":254},"Base",[255],{"title":256,"path":257,"stem":258,"icon":7},"Body","\u002Fdocs\u002Ftheme\u002Felements\u002Fbody","docs\u002Ftheme\u002Felements\u002F02.base\u002F00.body",{"title":234,"icon":237,"defaultOpen":223,"page":7,"children":260},[261,265,269,273,277],{"title":262,"path":263,"stem":264,"icon":7},"Headings","\u002Fdocs\u002Ftheme\u002Felements\u002Fheadings","docs\u002Ftheme\u002Felements\u002F03.typography\u002F01.headings",{"title":266,"path":267,"stem":268,"icon":7},"Paragraphs","\u002Fdocs\u002Ftheme\u002Felements\u002Fparagraphs","docs\u002Ftheme\u002Felements\u002F03.typography\u002F02.paragraphs",{"title":270,"path":271,"stem":272,"icon":7},"Links","\u002Fdocs\u002Ftheme\u002Felements\u002Flinks","docs\u002Ftheme\u002Felements\u002F03.typography\u002F03.links",{"title":274,"path":275,"stem":276,"icon":7},"Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Flists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F04.lists",{"title":278,"path":279,"stem":280,"icon":7},"Definition Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fdefinition-lists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F05.definition-lists",{"title":282,"icon":283,"defaultOpen":223,"page":7,"children":284},"Inline Text","i-lucide-whole-word",[285,289,293,297],{"title":286,"path":287,"stem":288,"icon":7},"Abbreviation","\u002Fdocs\u002Ftheme\u002Felements\u002Fabbreviation","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F00.abbreviation",{"title":290,"path":291,"stem":292,"icon":7},"Code","\u002Fdocs\u002Ftheme\u002Felements\u002Fcode","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F01.code",{"title":294,"path":295,"stem":296,"icon":7},"Kbd","\u002Fdocs\u002Ftheme\u002Felements\u002Fkbd","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F02.kbd",{"title":298,"path":299,"stem":300,"icon":7},"Mark","\u002Fdocs\u002Ftheme\u002Felements\u002Fmark","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F03.mark",{"title":302,"icon":303,"defaultOpen":223,"page":7,"children":304},"Media & Embeds","i-lucide-image",[305,309],{"title":306,"path":307,"stem":308,"icon":7},"Image","\u002Fdocs\u002Ftheme\u002Felements\u002Fimage","docs\u002Ftheme\u002Felements\u002F05.media\u002F00.image",{"title":310,"path":311,"stem":312,"icon":7},"Iframe","\u002Fdocs\u002Ftheme\u002Felements\u002Fiframe","docs\u002Ftheme\u002Felements\u002F05.media\u002F01.iframe",{"title":314,"icon":315,"defaultOpen":223,"page":7,"children":316},"Forms & Tables","i-lucide-table",[317,321,325],{"title":318,"path":319,"stem":320,"icon":7},"Caption","\u002Fdocs\u002Ftheme\u002Felements\u002Fcaption","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F00.caption",{"title":322,"path":323,"stem":324,"icon":7},"Legend","\u002Fdocs\u002Ftheme\u002Felements\u002Flegend","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F01.legend",{"title":326,"path":327,"stem":328,"icon":7},"Output","\u002Fdocs\u002Ftheme\u002Felements\u002Foutput","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F02.output",{"title":330,"icon":331,"defaultOpen":223,"page":7,"children":332},"Structure","i-lucide-separator-horizontal",[333,337],{"title":334,"path":335,"stem":336,"icon":7},"Address","\u002Fdocs\u002Ftheme\u002Felements\u002Faddress","docs\u002Ftheme\u002Felements\u002F07.structure\u002F00.address",{"title":338,"path":339,"stem":340,"icon":7},"Horizontal Rule","\u002Fdocs\u002Ftheme\u002Felements\u002Fhorizontal-rule","docs\u002Ftheme\u002Felements\u002F07.structure\u002F01.horizontal-rule",{"title":342,"icon":343,"defaultOpen":223,"page":7,"children":344},"States","i-lucide-mouse-pointer-click",[345,349,353],{"title":346,"path":347,"stem":348,"icon":7},"Focus","\u002Fdocs\u002Ftheme\u002Felements\u002Ffocus","docs\u002Ftheme\u002Felements\u002F08.states\u002F00.focus",{"title":350,"path":351,"stem":352,"icon":7},"Selection","\u002Fdocs\u002Ftheme\u002Felements\u002Fselection","docs\u002Ftheme\u002Felements\u002F08.states\u002F01.selection",{"title":354,"path":355,"stem":356,"icon":7},"Summary","\u002Fdocs\u002Ftheme\u002Felements\u002Fsummary","docs\u002Ftheme\u002Felements\u002F08.states\u002F02.summary",{"title":358,"path":359,"stem":360,"children":361,"icon":7},"Components","\u002Fdocs\u002Ftheme\u002Fcomponents","docs\u002Ftheme\u002Fcomponents\u002F00.index",[362,363,375,399,427,491,518,550],{"title":78,"path":359,"stem":360,"icon":79},{"title":364,"icon":365,"defaultOpen":223,"page":7,"children":366},"Actions","i-lucide-square-mouse-pointer",[367,371],{"title":368,"path":369,"stem":370,"icon":7},"Button","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbutton","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F00.button",{"title":372,"path":373,"stem":374,"icon":7},"Hamburger Menu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fhamburger-menu","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F01.hamburger-menu",{"title":376,"icon":377,"defaultOpen":223,"page":7,"children":378},"Navigation","i-lucide-navigation",[379,383,387,391,395],{"title":380,"path":381,"stem":382,"icon":7},"Breadcrumb","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbreadcrumb","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F00.breadcrumb",{"title":384,"path":385,"stem":386,"icon":7},"Nav","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fnav","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F01.nav",{"title":388,"path":389,"stem":390,"icon":7},"Pagination","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpagination","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F02.pagination",{"title":392,"path":393,"stem":394,"icon":7},"Sidebar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fsidebar","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F03.sidebar",{"title":396,"path":397,"stem":398,"icon":7},"Tabs","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftabs","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F04.tabs",{"title":400,"icon":401,"defaultOpen":223,"page":7,"children":402},"Feedback","i-lucide-megaphone",[403,407,411,415,419,423],{"title":404,"path":405,"stem":406,"icon":7},"Badge","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbadge","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F00.badge",{"title":408,"path":409,"stem":410,"icon":7},"Callout","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcallout","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F01.callout",{"title":412,"path":413,"stem":414,"icon":7},"Chip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchip","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F02.chip",{"title":416,"path":417,"stem":418,"icon":7},"Progress","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fprogress","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F03.progress",{"title":420,"path":421,"stem":422,"icon":7},"Skeleton","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fskeleton","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F04.skeleton",{"title":424,"path":425,"stem":426,"icon":7},"Spinner","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fspinner","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F05.spinner",{"title":428,"icon":429,"defaultOpen":223,"page":7,"children":430},"Forms","i-lucide-text-cursor-input",[431,435,439,443,447,451,455,459,463,467,471,475,479,483,487],{"title":432,"path":433,"stem":434,"icon":7},"Calendar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcalendar","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F00.calendar",{"title":436,"path":437,"stem":438,"icon":7},"Checkbox","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F01.checkbox",{"title":440,"path":441,"stem":442,"icon":7},"Checkbox Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F02.checkbox-group",{"title":444,"path":445,"stem":446,"icon":7},"Color Picker","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcolor-picker","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F03.color-picker",{"title":448,"path":449,"stem":450,"icon":7},"Field Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ffield-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F04.field-group",{"title":452,"path":453,"stem":454,"icon":7},"Input","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F05.input",{"title":456,"path":457,"stem":458,"icon":7},"OTP","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fotp","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.otp",{"title":460,"path":461,"stem":462,"icon":7},"Radio","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F07.radio",{"title":464,"path":465,"stem":466,"icon":7},"Radio Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F08.radio-group",{"title":468,"path":469,"stem":470,"icon":7},"Select","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fselect","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F09.select",{"title":472,"path":473,"stem":474,"icon":7},"Slider","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fslider","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F10.slider",{"title":476,"path":477,"stem":478,"icon":7},"Switch","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fswitch","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F11.switch",{"title":480,"path":481,"stem":482,"icon":7},"Textarea","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftextarea","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F12.textarea",{"title":484,"path":485,"stem":486,"icon":7},"Toggle","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F13.toggle",{"title":488,"path":489,"stem":490,"icon":7},"Toggle Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F14.toggle-group",{"title":492,"icon":242,"defaultOpen":223,"page":7,"children":493},"Overlays",[494,498,502,506,510,514],{"title":495,"path":496,"stem":497,"icon":7},"ContextMenu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcontext-menu","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F00.context-menu",{"title":499,"path":500,"stem":501,"icon":7},"Drawer","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdrawer","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F01.drawer",{"title":503,"path":504,"stem":505,"icon":7},"Dropdown","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdropdown","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F02.dropdown",{"title":507,"path":508,"stem":509,"icon":7},"Modal","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmodal","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F03.modal",{"title":511,"path":512,"stem":513,"icon":7},"Popover","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpopover","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F04.popover",{"title":515,"path":516,"stem":517,"icon":7},"Tooltip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftooltip","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F05.tooltip",{"title":519,"icon":520,"defaultOpen":223,"page":7,"children":521},"Layout","i-lucide-layout",[522,526,530,534,538,542,546],{"title":523,"path":524,"stem":525,"icon":7},"Accordion","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Faccordion","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F00.accordion",{"title":527,"path":528,"stem":529,"icon":7},"Avatar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F01.avatar",{"title":531,"path":532,"stem":533,"icon":7},"Avatar Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar-group","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F02.avatar-group",{"title":535,"path":536,"stem":537,"icon":7},"Card","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcard","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F03.card",{"title":539,"path":540,"stem":541,"icon":7},"Media","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmedia","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F04.media",{"title":543,"path":544,"stem":545,"icon":7},"PageHero","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpage-hero","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F05.page-hero",{"title":547,"path":548,"stem":549,"icon":7},"Placeholder","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fplaceholder","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F06.placeholder",{"title":551,"icon":552,"defaultOpen":223,"page":7,"children":553},"AI Chat","i-lucide-message-circle",[554],{"title":555,"path":556,"stem":557,"icon":7},"ChatMessage","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchat-message","docs\u002Ftheme\u002Fcomponents\u002F08.ai-chat\u002F00.chat-message",{"title":116,"path":559,"stem":560,"children":561,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities","docs\u002Ftheme\u002Futilities\u002F00.index",[562,563,567,572,577,581,584,588,593,598,602,605,610,613,618,622,627,632],{"title":78,"path":559,"stem":560,"icon":79},{"title":564,"path":565,"stem":566,"icon":173},"Presets","\u002Fdocs\u002Ftheme\u002Futilities\u002Fpreset","docs\u002Ftheme\u002Futilities\u002F01.preset",{"title":568,"path":569,"stem":570,"icon":571},"Accessibility","\u002Fdocs\u002Ftheme\u002Futilities\u002Faccessibility","docs\u002Ftheme\u002Futilities\u002F02.accessibility","i-lucide-accessibility",{"title":573,"path":574,"stem":575,"icon":576},"Animations","\u002Fdocs\u002Ftheme\u002Futilities\u002Fanimations","docs\u002Ftheme\u002Futilities\u002F03.animations","i-lucide-loader-circle",{"title":578,"path":579,"stem":580,"icon":303},"Backgrounds","\u002Fdocs\u002Ftheme\u002Futilities\u002Fbackgrounds","docs\u002Ftheme\u002Futilities\u002F04.backgrounds",{"title":180,"path":582,"stem":583,"icon":183},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fborders","docs\u002Ftheme\u002Futilities\u002F05.borders",{"title":585,"path":586,"stem":587,"icon":119},"Effects","\u002Fdocs\u002Ftheme\u002Futilities\u002Feffects","docs\u002Ftheme\u002Futilities\u002F06.effects",{"title":589,"path":590,"stem":591,"icon":592},"Filters","\u002Fdocs\u002Ftheme\u002Futilities\u002Ffilters","docs\u002Ftheme\u002Futilities\u002F07.filters","i-lucide-aperture",{"title":594,"path":595,"stem":596,"icon":597},"Flexbox & Grid","\u002Fdocs\u002Ftheme\u002Futilities\u002Fflexbox-grid","docs\u002Ftheme\u002Futilities\u002F08.flexbox-grid","i-lucide-layout-grid",{"title":599,"path":600,"stem":601,"icon":343},"Interactivity","\u002Fdocs\u002Ftheme\u002Futilities\u002Finteractivity","docs\u002Ftheme\u002Futilities\u002F09.interactivity",{"title":519,"path":603,"stem":604,"icon":520},"\u002Fdocs\u002Ftheme\u002Futilities\u002Flayout","docs\u002Ftheme\u002Futilities\u002F10.layout",{"title":606,"path":607,"stem":608,"icon":609},"Sizing","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsizing","docs\u002Ftheme\u002Futilities\u002F11.sizing","i-lucide-scaling",{"title":229,"path":611,"stem":612,"icon":232},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fspacing","docs\u002Ftheme\u002Futilities\u002F12.spacing",{"title":614,"path":615,"stem":616,"icon":617},"SVG","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsvg","docs\u002Ftheme\u002Futilities\u002F13.svg","i-lucide-pen-tool",{"title":619,"path":620,"stem":621,"icon":315},"Tables","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftables","docs\u002Ftheme\u002Futilities\u002F14.tables",{"title":623,"path":624,"stem":625,"icon":626},"Transforms","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransforms","docs\u002Ftheme\u002Futilities\u002F15.transforms","i-lucide-rotate-3d",{"title":628,"path":629,"stem":630,"icon":631},"Transitions","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransitions","docs\u002Ftheme\u002Futilities\u002F16.transitions","i-lucide-arrow-left-right",{"title":234,"path":633,"stem":634,"icon":237},"\u002Fdocs\u002Ftheme\u002Futilities\u002Ftypography","docs\u002Ftheme\u002Futilities\u002F17.typography",{"title":636,"path":637,"stem":638,"children":639,"icon":7},"Modifiers","\u002Fdocs\u002Ftheme\u002Fmodifiers","docs\u002Ftheme\u002Fmodifiers\u002F00.index",[640,641,644,648,653,657,662,667,672,677],{"title":78,"path":637,"stem":638,"icon":79},{"title":564,"path":642,"stem":643,"icon":173},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpreset","docs\u002Ftheme\u002Fmodifiers\u002F01.preset",{"title":645,"path":646,"stem":647,"icon":571},"ARIA State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Faria-state","docs\u002Ftheme\u002Fmodifiers\u002F02.aria-state",{"title":649,"path":650,"stem":651,"icon":652},"Directional","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fdirectional","docs\u002Ftheme\u002Fmodifiers\u002F03.directional","i-lucide-flip-horizontal",{"title":654,"path":655,"stem":656,"icon":429},"Form State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fform-state","docs\u002Ftheme\u002Fmodifiers\u002F04.form-state",{"title":658,"path":659,"stem":660,"icon":661},"Media & Preferences","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fmedia-preferences","docs\u002Ftheme\u002Fmodifiers\u002F05.media-preferences","i-lucide-sun-moon",{"title":663,"path":664,"stem":665,"icon":666},"Other State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fother-state","docs\u002Ftheme\u002Fmodifiers\u002F06.other-state","i-lucide-toggle-left",{"title":668,"path":669,"stem":670,"icon":671},"Pseudo-Elements","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-elements","docs\u002Ftheme\u002Fmodifiers\u002F07.pseudo-elements","i-lucide-box-select",{"title":673,"path":674,"stem":675,"icon":676},"Pseudo-State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-state","docs\u002Ftheme\u002Fmodifiers\u002F08.pseudo-state","i-lucide-pointer",{"title":678,"path":679,"stem":680,"icon":681},"Structural","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fstructural","docs\u002Ftheme\u002Fmodifiers\u002F09.structural","i-lucide-list-ordered",{"id":683,"title":684,"body":685,"description":2682,"extension":1099,"links":2683,"meta":2684,"navigation":2685,"path":650,"seo":2686,"stem":651,"__hash__":2687},"docs_theme\u002Fdocs\u002Ftheme\u002Fmodifiers\u002F03.directional.md","Directional Modifiers",{"type":686,"value":687,"toc":2668},"minimark",[688,714,718,722,726,729,761,767,777,1296,1301,1332,1342,1348,1357,1753,1756,1780,1785,1791,2084,2089,2132,2136,2140,2563,2567,2621,2625,2664],[689,690,691,695,696,700,701,705,706,709,710,713],"note",{"icon":173},[692,693,694],"strong",{},"Part of the Modifiers Preset:"," ",[697,698,699],"code",{},"useDirectionalModifiers"," is included in the ",[702,703,704],"a",{"href":642},"Modifiers Preset"," (",[697,707,708],{},"useModifiersPreset",") and you can configure it through the preset's ",[697,711,712],{},"directional"," option. For most projects, applying it via the preset is the recommended approach.",[715,716,78],"h2",{"id":717},"overview",[719,720,721],"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.",[715,723,725],{"id":724},"why-use-directional-modifiers","Why Use Directional Modifiers?",[719,727,728],{},"Directional modifiers help you:",[730,731,732,739,745,751],"ul",{},[733,734,735,738],"li",{},[692,736,737],{},"Support internationalization",": Adapt layouts for RTL languages like Arabic, Hebrew, and Persian",[733,740,741,744],{},[692,742,743],{},"Flip directional properties",": Swap margins, paddings, and positions based on text direction",[733,746,747,750],{},[692,748,749],{},"Build bidirectional components",": Create components that work in both LTR and RTL contexts",[733,752,753,756,757,760],{},[692,754,755],{},"Maintain zero specificity",": The ",[697,758,759],{},":where()"," wrapper prevents specificity conflicts",[715,762,764],{"id":763},"usertlmodifier",[697,765,766],{},"useRtlModifier",[719,768,769,770,773,774,776],{},"The ",[697,771,772],{},"useRtlModifier()"," function creates a modifier that applies styles in right-to-left contexts. It uses ",[697,775,759],{}," to maintain zero specificity.",[778,779,780,1075,1243],"tabs",{},[781,782,784],"tabs-item",{"icon":783,"label":290},"i-lucide-code",[785,786,792],"pre",{"className":787,"code":788,"filename":789,"language":790,"meta":791,"style":791},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useMarginLeftUtility, useMarginRightUtility } from \"@styleframe\u002Ftheme\";\nimport { useRtlModifier } from \"@styleframe\u002Ftheme\";\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","",[697,793,794,830,859,881,887,908,913,930,935,949,971,989,1000,1005,1017,1032,1047,1056,1061],{"__ignoreMap":791},[795,796,799,803,807,811,814,817,820,824,827],"span",{"class":797,"line":798},"line",1,[795,800,802],{"class":801},"s7zQu","import",[795,804,806],{"class":805},"sMK4o"," {",[795,808,810],{"class":809},"sTEyZ"," styleframe",[795,812,813],{"class":805}," }",[795,815,816],{"class":801}," from",[795,818,819],{"class":805}," \"",[795,821,823],{"class":822},"sfazB","styleframe",[795,825,826],{"class":805},"\"",[795,828,829],{"class":805},";\n",[795,831,833,835,837,840,843,846,848,850,852,855,857],{"class":797,"line":832},2,[795,834,802],{"class":801},[795,836,806],{"class":805},[795,838,839],{"class":809}," useMarginLeftUtility",[795,841,842],{"class":805},",",[795,844,845],{"class":809}," useMarginRightUtility",[795,847,813],{"class":805},[795,849,816],{"class":801},[795,851,819],{"class":805},[795,853,854],{"class":822},"@styleframe\u002Ftheme",[795,856,826],{"class":805},[795,858,829],{"class":805},[795,860,862,864,866,869,871,873,875,877,879],{"class":797,"line":861},3,[795,863,802],{"class":801},[795,865,806],{"class":805},[795,867,868],{"class":809}," useRtlModifier",[795,870,813],{"class":805},[795,872,816],{"class":801},[795,874,819],{"class":805},[795,876,854],{"class":822},[795,878,826],{"class":805},[795,880,829],{"class":805},[795,882,884],{"class":797,"line":883},4,[795,885,886],{"emptyLinePlaceholder":223},"\n",[795,888,890,894,897,900,903,906],{"class":797,"line":889},5,[795,891,893],{"class":892},"spNyl","const",[795,895,896],{"class":809}," s ",[795,898,899],{"class":805},"=",[795,901,810],{"class":902},"s2Zo4",[795,904,905],{"class":809},"()",[795,907,829],{"class":805},[795,909,911],{"class":797,"line":910},6,[795,912,886],{"emptyLinePlaceholder":223},[795,914,916,918,921,923,925,928],{"class":797,"line":915},7,[795,917,893],{"class":892},[795,919,920],{"class":809}," rtl ",[795,922,899],{"class":805},[795,924,868],{"class":902},[795,926,927],{"class":809},"(s)",[795,929,829],{"class":805},[795,931,933],{"class":797,"line":932},8,[795,934,886],{"emptyLinePlaceholder":223},[795,936,938,941,944,946],{"class":797,"line":937},9,[795,939,940],{"class":902},"useMarginLeftUtility",[795,942,943],{"class":809},"(s",[795,945,842],{"class":805},[795,947,948],{"class":805}," {\n",[795,950,952,956,959,962,965,968],{"class":797,"line":951},10,[795,953,955],{"class":954},"swJcz","    md",[795,957,958],{"class":805},":",[795,960,961],{"class":805}," '",[795,963,964],{"class":822},"1rem",[795,966,967],{"class":805},"'",[795,969,970],{"class":805},",\n",[795,972,974,978,980,982,985,987],{"class":797,"line":973},11,[795,975,977],{"class":976},"sbssI","    0",[795,979,958],{"class":805},[795,981,961],{"class":805},[795,983,984],{"class":822},"0",[795,986,967],{"class":805},[795,988,970],{"class":805},[795,990,992,995,998],{"class":797,"line":991},12,[795,993,994],{"class":805},"},",[795,996,997],{"class":809}," [rtl])",[795,999,829],{"class":805},[795,1001,1003],{"class":797,"line":1002},13,[795,1004,886],{"emptyLinePlaceholder":223},[795,1006,1008,1011,1013,1015],{"class":797,"line":1007},14,[795,1009,1010],{"class":902},"useMarginRightUtility",[795,1012,943],{"class":809},[795,1014,842],{"class":805},[795,1016,948],{"class":805},[795,1018,1020,1022,1024,1026,1028,1030],{"class":797,"line":1019},15,[795,1021,955],{"class":954},[795,1023,958],{"class":805},[795,1025,961],{"class":805},[795,1027,964],{"class":822},[795,1029,967],{"class":805},[795,1031,970],{"class":805},[795,1033,1035,1037,1039,1041,1043,1045],{"class":797,"line":1034},16,[795,1036,977],{"class":976},[795,1038,958],{"class":805},[795,1040,961],{"class":805},[795,1042,984],{"class":822},[795,1044,967],{"class":805},[795,1046,970],{"class":805},[795,1048,1050,1052,1054],{"class":797,"line":1049},17,[795,1051,994],{"class":805},[795,1053,997],{"class":809},[795,1055,829],{"class":805},[795,1057,1059],{"class":797,"line":1058},18,[795,1060,886],{"emptyLinePlaceholder":223},[795,1062,1064,1067,1070,1073],{"class":797,"line":1063},19,[795,1065,1066],{"class":801},"export",[795,1068,1069],{"class":801}," default",[795,1071,1072],{"class":809}," s",[795,1074,829],{"class":805},[781,1076,1077],{"icon":154,"label":326},[785,1078,1083],{"className":1079,"code":1080,"filename":1081,"language":1082,"meta":791,"style":791},"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\u002Findex.css","css",[697,1084,1085,1117,1141,1145,1163,1173,1185,1190,1195,1199,1216,1224,1235,1239],{"__ignoreMap":791},[795,1086,1087,1090,1094,1097,1100,1102,1106,1108,1111,1114],{"class":797,"line":798},[795,1088,1089],{"class":805},".",[795,1091,1093],{"class":1092},"sBMFI","_margin-left",[795,1095,1096],{"class":809},"\\:",[795,1098,1099],{"class":1092},"md",[795,1101,806],{"class":805},[795,1103,1105],{"class":1104},"sqsOY"," margin-left",[795,1107,958],{"class":805},[795,1109,1110],{"class":976}," 1rem",[795,1112,1113],{"class":805},";",[795,1115,1116],{"class":805}," }\n",[795,1118,1119,1121,1124,1126,1128,1130,1133,1135,1137,1139],{"class":797,"line":832},[795,1120,1089],{"class":805},[795,1122,1123],{"class":1092},"_margin-right",[795,1125,1096],{"class":809},[795,1127,1099],{"class":1092},[795,1129,806],{"class":805},[795,1131,1132],{"class":1104}," margin-right",[795,1134,958],{"class":805},[795,1136,1110],{"class":976},[795,1138,1113],{"class":805},[795,1140,1116],{"class":805},[795,1142,1143],{"class":797,"line":861},[795,1144,886],{"emptyLinePlaceholder":223},[795,1146,1147,1149,1152,1154,1157,1159,1161],{"class":797,"line":883},[795,1148,1089],{"class":805},[795,1150,1151],{"class":1092},"_rtl",[795,1153,1096],{"class":809},[795,1155,1156],{"class":1092},"margin-left",[795,1158,1096],{"class":809},[795,1160,984],{"class":1092},[795,1162,948],{"class":805},[795,1164,1165,1168,1170],{"class":797,"line":889},[795,1166,1167],{"class":809},"    &",[795,1169,958],{"class":805},[795,1171,1172],{"class":809},"where(:dir(rtl), [dir=\"rtl\"], [dir=\"rtl\"] *) {\n",[795,1174,1175,1178,1180,1183],{"class":797,"line":910},[795,1176,1177],{"class":1104},"        margin-left",[795,1179,958],{"class":805},[795,1181,1182],{"class":976}," 0",[795,1184,829],{"class":805},[795,1186,1187],{"class":797,"line":915},[795,1188,1189],{"class":805},"    }\n",[795,1191,1192],{"class":797,"line":932},[795,1193,1194],{"class":809},"}\n",[795,1196,1197],{"class":797,"line":937},[795,1198,886],{"emptyLinePlaceholder":223},[795,1200,1201,1203,1205,1207,1210,1212,1214],{"class":797,"line":951},[795,1202,1089],{"class":805},[795,1204,1151],{"class":1092},[795,1206,1096],{"class":809},[795,1208,1209],{"class":1092},"margin-right",[795,1211,1096],{"class":809},[795,1213,1099],{"class":1092},[795,1215,948],{"class":805},[795,1217,1218,1220,1222],{"class":797,"line":973},[795,1219,1167],{"class":809},[795,1221,958],{"class":805},[795,1223,1172],{"class":809},[795,1225,1226,1229,1231,1233],{"class":797,"line":991},[795,1227,1228],{"class":1104},"        margin-right",[795,1230,958],{"class":805},[795,1232,1110],{"class":976},[795,1234,829],{"class":805},[795,1236,1237],{"class":797,"line":1002},[795,1238,1189],{"class":805},[795,1240,1241],{"class":797,"line":1007},[795,1242,1194],{"class":809},[781,1244,1246],{"icon":520,"label":1245},"Usage",[785,1247,1251],{"className":1248,"code":1249,"language":1250,"meta":791,"style":791},"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\u002Fdiv>\n","html",[697,1252,1253,1259,1282,1287],{"__ignoreMap":791},[795,1254,1255],{"class":797,"line":798},[795,1256,1258],{"class":1257},"sHwdD","\u003C!-- Flip margin direction for RTL -->\n",[795,1260,1261,1264,1267,1270,1272,1274,1277,1279],{"class":797,"line":832},[795,1262,1263],{"class":805},"\u003C",[795,1265,1266],{"class":954},"div",[795,1268,1269],{"class":892}," class",[795,1271,899],{"class":805},[795,1273,826],{"class":805},[795,1275,1276],{"class":822},"_margin-left:md _rtl:margin-left:0 _rtl:margin-right:md",[795,1278,826],{"class":805},[795,1280,1281],{"class":805},">\n",[795,1283,1284],{"class":797,"line":861},[795,1285,1286],{"class":809},"    Content with directional margin\n",[795,1288,1289,1292,1294],{"class":797,"line":883},[795,1290,1291],{"class":805},"\u003C\u002F",[795,1293,1266],{"class":954},[795,1295,1281],{"class":805},[1297,1298,1300],"h4",{"id":1299},"css-selector","CSS Selector",[1302,1303,1304,1316],"table",{},[1305,1306,1307],"thead",{},[1308,1309,1310,1314],"tr",{},[1311,1312,1313],"th",{},"Modifier Name",[1311,1315,1300],{},[1317,1318,1319],"tbody",{},[1308,1320,1321,1327],{},[1322,1323,1324],"td",{},[697,1325,1326],{},"rtl",[1322,1328,1329],{},[697,1330,1331],{},"&:where(:dir(rtl), [dir=\"rtl\"], [dir=\"rtl\"] *)",[1333,1334,1335,1338,1339,1341],"tip",{},[692,1336,1337],{},"Pro tip",": The RTL modifier uses ",[697,1340,759],{}," to keep specificity at zero. This prevents the RTL variant from winning over other utility classes due to specificity, making the cascade more predictable.",[715,1343,1345],{"id":1344},"useltrmodifier",[697,1346,1347],{},"useLtrModifier",[719,1349,769,1350,1353,1354,1356],{},[697,1351,1352],{},"useLtrModifier()"," function creates a modifier that applies styles in left-to-right contexts. Like the RTL modifier, it uses ",[697,1355,759],{}," for zero specificity.",[778,1358,1359,1558,1709],{},[781,1360,1361],{"icon":783,"label":290},[785,1362,1364],{"className":787,"code":1363,"filename":789,"language":790,"meta":791,"style":791},"import { styleframe } from \"styleframe\";\nimport { useTextAlignUtility } from \"@styleframe\u002Ftheme\";\nimport { useLtrModifier, useRtlModifier } from \"@styleframe\u002Ftheme\";\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",[697,1365,1366,1386,1407,1432,1436,1450,1454,1469,1483,1487,1498,1514,1530,1544,1548],{"__ignoreMap":791},[795,1367,1368,1370,1372,1374,1376,1378,1380,1382,1384],{"class":797,"line":798},[795,1369,802],{"class":801},[795,1371,806],{"class":805},[795,1373,810],{"class":809},[795,1375,813],{"class":805},[795,1377,816],{"class":801},[795,1379,819],{"class":805},[795,1381,823],{"class":822},[795,1383,826],{"class":805},[795,1385,829],{"class":805},[795,1387,1388,1390,1392,1395,1397,1399,1401,1403,1405],{"class":797,"line":832},[795,1389,802],{"class":801},[795,1391,806],{"class":805},[795,1393,1394],{"class":809}," useTextAlignUtility",[795,1396,813],{"class":805},[795,1398,816],{"class":801},[795,1400,819],{"class":805},[795,1402,854],{"class":822},[795,1404,826],{"class":805},[795,1406,829],{"class":805},[795,1408,1409,1411,1413,1416,1418,1420,1422,1424,1426,1428,1430],{"class":797,"line":861},[795,1410,802],{"class":801},[795,1412,806],{"class":805},[795,1414,1415],{"class":809}," useLtrModifier",[795,1417,842],{"class":805},[795,1419,868],{"class":809},[795,1421,813],{"class":805},[795,1423,816],{"class":801},[795,1425,819],{"class":805},[795,1427,854],{"class":822},[795,1429,826],{"class":805},[795,1431,829],{"class":805},[795,1433,1434],{"class":797,"line":883},[795,1435,886],{"emptyLinePlaceholder":223},[795,1437,1438,1440,1442,1444,1446,1448],{"class":797,"line":889},[795,1439,893],{"class":892},[795,1441,896],{"class":809},[795,1443,899],{"class":805},[795,1445,810],{"class":902},[795,1447,905],{"class":809},[795,1449,829],{"class":805},[795,1451,1452],{"class":797,"line":910},[795,1453,886],{"emptyLinePlaceholder":223},[795,1455,1456,1458,1461,1463,1465,1467],{"class":797,"line":915},[795,1457,893],{"class":892},[795,1459,1460],{"class":809}," ltr ",[795,1462,899],{"class":805},[795,1464,1415],{"class":902},[795,1466,927],{"class":809},[795,1468,829],{"class":805},[795,1470,1471,1473,1475,1477,1479,1481],{"class":797,"line":932},[795,1472,893],{"class":892},[795,1474,920],{"class":809},[795,1476,899],{"class":805},[795,1478,868],{"class":902},[795,1480,927],{"class":809},[795,1482,829],{"class":805},[795,1484,1485],{"class":797,"line":937},[795,1486,886],{"emptyLinePlaceholder":223},[795,1488,1489,1492,1494,1496],{"class":797,"line":951},[795,1490,1491],{"class":902},"useTextAlignUtility",[795,1493,943],{"class":809},[795,1495,842],{"class":805},[795,1497,948],{"class":805},[795,1499,1500,1503,1505,1507,1510,1512],{"class":797,"line":973},[795,1501,1502],{"class":954},"    left",[795,1504,958],{"class":805},[795,1506,961],{"class":805},[795,1508,1509],{"class":822},"left",[795,1511,967],{"class":805},[795,1513,970],{"class":805},[795,1515,1516,1519,1521,1523,1526,1528],{"class":797,"line":991},[795,1517,1518],{"class":954},"    right",[795,1520,958],{"class":805},[795,1522,961],{"class":805},[795,1524,1525],{"class":822},"right",[795,1527,967],{"class":805},[795,1529,970],{"class":805},[795,1531,1532,1534,1537,1539,1542],{"class":797,"line":1002},[795,1533,994],{"class":805},[795,1535,1536],{"class":809}," [ltr",[795,1538,842],{"class":805},[795,1540,1541],{"class":809}," rtl])",[795,1543,829],{"class":805},[795,1545,1546],{"class":797,"line":1007},[795,1547,886],{"emptyLinePlaceholder":223},[795,1549,1550,1552,1554,1556],{"class":797,"line":1019},[795,1551,1066],{"class":801},[795,1553,1069],{"class":801},[795,1555,1072],{"class":809},[795,1557,829],{"class":805},[781,1559,1560],{"icon":154,"label":326},[785,1561,1563],{"className":1079,"code":1562,"filename":1081,"language":1082,"meta":791,"style":791},"._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",[697,1564,1565,1590,1613,1617,1635,1644,1655,1659,1663,1667,1683,1691,1701,1705],{"__ignoreMap":791},[795,1566,1567,1569,1572,1574,1576,1578,1581,1583,1586,1588],{"class":797,"line":798},[795,1568,1089],{"class":805},[795,1570,1571],{"class":1092},"_text-align",[795,1573,1096],{"class":809},[795,1575,1509],{"class":1092},[795,1577,806],{"class":805},[795,1579,1580],{"class":1104}," text-align",[795,1582,958],{"class":805},[795,1584,1585],{"class":809}," left",[795,1587,1113],{"class":805},[795,1589,1116],{"class":805},[795,1591,1592,1594,1596,1598,1600,1602,1604,1606,1609,1611],{"class":797,"line":832},[795,1593,1089],{"class":805},[795,1595,1571],{"class":1092},[795,1597,1096],{"class":809},[795,1599,1525],{"class":1092},[795,1601,806],{"class":805},[795,1603,1580],{"class":1104},[795,1605,958],{"class":805},[795,1607,1608],{"class":809}," right",[795,1610,1113],{"class":805},[795,1612,1116],{"class":805},[795,1614,1615],{"class":797,"line":861},[795,1616,886],{"emptyLinePlaceholder":223},[795,1618,1619,1621,1624,1626,1629,1631,1633],{"class":797,"line":883},[795,1620,1089],{"class":805},[795,1622,1623],{"class":1092},"_ltr",[795,1625,1096],{"class":809},[795,1627,1628],{"class":1092},"text-align",[795,1630,1096],{"class":809},[795,1632,1509],{"class":1092},[795,1634,948],{"class":805},[795,1636,1637,1639,1641],{"class":797,"line":889},[795,1638,1167],{"class":809},[795,1640,958],{"class":805},[795,1642,1643],{"class":809},"where(:dir(ltr), [dir=\"ltr\"], [dir=\"ltr\"] *) {\n",[795,1645,1646,1649,1651,1653],{"class":797,"line":910},[795,1647,1648],{"class":1104},"        text-align",[795,1650,958],{"class":805},[795,1652,1585],{"class":809},[795,1654,829],{"class":805},[795,1656,1657],{"class":797,"line":915},[795,1658,1189],{"class":805},[795,1660,1661],{"class":797,"line":932},[795,1662,1194],{"class":809},[795,1664,1665],{"class":797,"line":937},[795,1666,886],{"emptyLinePlaceholder":223},[795,1668,1669,1671,1673,1675,1677,1679,1681],{"class":797,"line":951},[795,1670,1089],{"class":805},[795,1672,1151],{"class":1092},[795,1674,1096],{"class":809},[795,1676,1628],{"class":1092},[795,1678,1096],{"class":809},[795,1680,1525],{"class":1092},[795,1682,948],{"class":805},[795,1684,1685,1687,1689],{"class":797,"line":973},[795,1686,1167],{"class":809},[795,1688,958],{"class":805},[795,1690,1172],{"class":809},[795,1692,1693,1695,1697,1699],{"class":797,"line":991},[795,1694,1648],{"class":1104},[795,1696,958],{"class":805},[795,1698,1608],{"class":809},[795,1700,829],{"class":805},[795,1702,1703],{"class":797,"line":1002},[795,1704,1189],{"class":805},[795,1706,1707],{"class":797,"line":1007},[795,1708,1194],{"class":809},[781,1710,1711],{"icon":520,"label":1245},[785,1712,1714],{"className":1248,"code":1713,"language":1250,"meta":791,"style":791},"\u003C!-- Explicit directional text alignment -->\n\u003Cp class=\"_ltr:text-align:left _rtl:text-align:right\">\n    Directional text alignment\n\u003C\u002Fp>\n",[697,1715,1716,1721,1740,1745],{"__ignoreMap":791},[795,1717,1718],{"class":797,"line":798},[795,1719,1720],{"class":1257},"\u003C!-- Explicit directional text alignment -->\n",[795,1722,1723,1725,1727,1729,1731,1733,1736,1738],{"class":797,"line":832},[795,1724,1263],{"class":805},[795,1726,719],{"class":954},[795,1728,1269],{"class":892},[795,1730,899],{"class":805},[795,1732,826],{"class":805},[795,1734,1735],{"class":822},"_ltr:text-align:left _rtl:text-align:right",[795,1737,826],{"class":805},[795,1739,1281],{"class":805},[795,1741,1742],{"class":797,"line":861},[795,1743,1744],{"class":809},"    Directional text alignment\n",[795,1746,1747,1749,1751],{"class":797,"line":883},[795,1748,1291],{"class":805},[795,1750,719],{"class":954},[795,1752,1281],{"class":805},[1297,1754,1300],{"id":1755},"css-selector-1",[1302,1757,1758,1766],{},[1305,1759,1760],{},[1308,1761,1762,1764],{},[1311,1763,1313],{},[1311,1765,1300],{},[1317,1767,1768],{},[1308,1769,1770,1775],{},[1322,1771,1772],{},[697,1773,1774],{},"ltr",[1322,1776,1777],{},[697,1778,1779],{},"&:where(:dir(ltr), [dir=\"ltr\"], [dir=\"ltr\"] *)",[715,1781,1783],{"id":1782},"usedirectionalmodifiers",[697,1784,699],{},[719,1786,769,1787,1790],{},[697,1788,1789],{},"useDirectionalModifiers()"," function registers both directional modifiers at once and returns them as a destructurable object.",[778,1792,1793,2040],{},[781,1794,1795],{"icon":783,"label":290},[785,1796,1798],{"className":787,"code":1797,"filename":789,"language":790,"meta":791,"style":791},"import { styleframe } from \"styleframe\";\nimport { usePaddingLeftUtility, usePaddingRightUtility } from \"@styleframe\u002Ftheme\";\nimport { useDirectionalModifiers } from \"@styleframe\u002Ftheme\";\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",[697,1799,1800,1820,1846,1867,1871,1885,1889,1914,1918,1929,1943,1957,1971,1975,1986,2000,2014,2026,2030],{"__ignoreMap":791},[795,1801,1802,1804,1806,1808,1810,1812,1814,1816,1818],{"class":797,"line":798},[795,1803,802],{"class":801},[795,1805,806],{"class":805},[795,1807,810],{"class":809},[795,1809,813],{"class":805},[795,1811,816],{"class":801},[795,1813,819],{"class":805},[795,1815,823],{"class":822},[795,1817,826],{"class":805},[795,1819,829],{"class":805},[795,1821,1822,1824,1826,1829,1831,1834,1836,1838,1840,1842,1844],{"class":797,"line":832},[795,1823,802],{"class":801},[795,1825,806],{"class":805},[795,1827,1828],{"class":809}," usePaddingLeftUtility",[795,1830,842],{"class":805},[795,1832,1833],{"class":809}," usePaddingRightUtility",[795,1835,813],{"class":805},[795,1837,816],{"class":801},[795,1839,819],{"class":805},[795,1841,854],{"class":822},[795,1843,826],{"class":805},[795,1845,829],{"class":805},[795,1847,1848,1850,1852,1855,1857,1859,1861,1863,1865],{"class":797,"line":861},[795,1849,802],{"class":801},[795,1851,806],{"class":805},[795,1853,1854],{"class":809}," useDirectionalModifiers",[795,1856,813],{"class":805},[795,1858,816],{"class":801},[795,1860,819],{"class":805},[795,1862,854],{"class":822},[795,1864,826],{"class":805},[795,1866,829],{"class":805},[795,1868,1869],{"class":797,"line":883},[795,1870,886],{"emptyLinePlaceholder":223},[795,1872,1873,1875,1877,1879,1881,1883],{"class":797,"line":889},[795,1874,893],{"class":892},[795,1876,896],{"class":809},[795,1878,899],{"class":805},[795,1880,810],{"class":902},[795,1882,905],{"class":809},[795,1884,829],{"class":805},[795,1886,1887],{"class":797,"line":910},[795,1888,886],{"emptyLinePlaceholder":223},[795,1890,1891,1893,1895,1898,1900,1902,1905,1908,1910,1912],{"class":797,"line":915},[795,1892,893],{"class":892},[795,1894,806],{"class":805},[795,1896,1897],{"class":809}," rtl",[795,1899,842],{"class":805},[795,1901,1460],{"class":809},[795,1903,1904],{"class":805},"}",[795,1906,1907],{"class":805}," =",[795,1909,1854],{"class":902},[795,1911,927],{"class":809},[795,1913,829],{"class":805},[795,1915,1916],{"class":797,"line":932},[795,1917,886],{"emptyLinePlaceholder":223},[795,1919,1920,1923,1925,1927],{"class":797,"line":937},[795,1921,1922],{"class":902},"usePaddingLeftUtility",[795,1924,943],{"class":809},[795,1926,842],{"class":805},[795,1928,948],{"class":805},[795,1930,1931,1933,1935,1937,1939,1941],{"class":797,"line":951},[795,1932,955],{"class":954},[795,1934,958],{"class":805},[795,1936,961],{"class":805},[795,1938,964],{"class":822},[795,1940,967],{"class":805},[795,1942,970],{"class":805},[795,1944,1945,1947,1949,1951,1953,1955],{"class":797,"line":973},[795,1946,977],{"class":976},[795,1948,958],{"class":805},[795,1950,961],{"class":805},[795,1952,984],{"class":822},[795,1954,967],{"class":805},[795,1956,970],{"class":805},[795,1958,1959,1961,1964,1966,1969],{"class":797,"line":991},[795,1960,994],{"class":805},[795,1962,1963],{"class":809}," [rtl",[795,1965,842],{"class":805},[795,1967,1968],{"class":809}," ltr])",[795,1970,829],{"class":805},[795,1972,1973],{"class":797,"line":1002},[795,1974,886],{"emptyLinePlaceholder":223},[795,1976,1977,1980,1982,1984],{"class":797,"line":1007},[795,1978,1979],{"class":902},"usePaddingRightUtility",[795,1981,943],{"class":809},[795,1983,842],{"class":805},[795,1985,948],{"class":805},[795,1987,1988,1990,1992,1994,1996,1998],{"class":797,"line":1019},[795,1989,955],{"class":954},[795,1991,958],{"class":805},[795,1993,961],{"class":805},[795,1995,964],{"class":822},[795,1997,967],{"class":805},[795,1999,970],{"class":805},[795,2001,2002,2004,2006,2008,2010,2012],{"class":797,"line":1034},[795,2003,977],{"class":976},[795,2005,958],{"class":805},[795,2007,961],{"class":805},[795,2009,984],{"class":822},[795,2011,967],{"class":805},[795,2013,970],{"class":805},[795,2015,2016,2018,2020,2022,2024],{"class":797,"line":1049},[795,2017,994],{"class":805},[795,2019,1963],{"class":809},[795,2021,842],{"class":805},[795,2023,1968],{"class":809},[795,2025,829],{"class":805},[795,2027,2028],{"class":797,"line":1058},[795,2029,886],{"emptyLinePlaceholder":223},[795,2031,2032,2034,2036,2038],{"class":797,"line":1063},[795,2033,1066],{"class":801},[795,2035,1069],{"class":801},[795,2037,1072],{"class":809},[795,2039,829],{"class":805},[781,2041,2042],{"icon":520,"label":1245},[785,2043,2045],{"className":1248,"code":2044,"language":1250,"meta":791,"style":791},"\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\u002Fdiv>\n",[697,2046,2047,2052,2071,2076],{"__ignoreMap":791},[795,2048,2049],{"class":797,"line":798},[795,2050,2051],{"class":1257},"\u003C!-- Flip padding direction -->\n",[795,2053,2054,2056,2058,2060,2062,2064,2067,2069],{"class":797,"line":832},[795,2055,1263],{"class":805},[795,2057,1266],{"class":954},[795,2059,1269],{"class":892},[795,2061,899],{"class":805},[795,2063,826],{"class":805},[795,2065,2066],{"class":822},"_padding-left:md _rtl:padding-left:0 _rtl:padding-right:md",[795,2068,826],{"class":805},[795,2070,1281],{"class":805},[795,2072,2073],{"class":797,"line":861},[795,2074,2075],{"class":809},"    Content with directional padding\n",[795,2077,2078,2080,2082],{"class":797,"line":883},[795,2079,1291],{"class":805},[795,2081,1266],{"class":954},[795,2083,1281],{"class":805},[2085,2086,2088],"h3",{"id":2087},"returned-modifiers","Returned Modifiers",[1302,2090,2091,2102],{},[1305,2092,2093],{},[1308,2094,2095,2098,2100],{},[1311,2096,2097],{},"Key",[1311,2099,1313],{},[1311,2101,1300],{},[1317,2103,2104,2118],{},[1308,2105,2106,2110,2114],{},[1322,2107,2108],{},[697,2109,1326],{},[1322,2111,2112],{},[697,2113,1326],{},[1322,2115,2116],{},[697,2117,1331],{},[1308,2119,2120,2124,2128],{},[1322,2121,2122],{},[697,2123,1774],{},[1322,2125,2126],{},[697,2127,1774],{},[1322,2129,2130],{},[697,2131,1779],{},[715,2133,2135],{"id":2134},"examples","Examples",[2085,2137,2139],{"id":2138},"bidirectional-navigation","Bidirectional Navigation",[778,2141,2142,2456],{},[781,2143,2144],{"icon":783,"label":290},[785,2145,2147],{"className":787,"code":2146,"filename":789,"language":790,"meta":791,"style":791},"import { styleframe } from \"styleframe\";\nimport {\n    useMarginLeftUtility,\n    useMarginRightUtility,\n    usePaddingLeftUtility,\n    usePaddingRightUtility,\n} from \"@styleframe\u002Ftheme\";\nimport { useDirectionalModifiers } from \"@styleframe\u002Ftheme\";\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",[697,2148,2149,2169,2175,2182,2189,2196,2203,2217,2237,2241,2255,2259,2277,2281,2322,2360,2364,2403,2441,2445],{"__ignoreMap":791},[795,2150,2151,2153,2155,2157,2159,2161,2163,2165,2167],{"class":797,"line":798},[795,2152,802],{"class":801},[795,2154,806],{"class":805},[795,2156,810],{"class":809},[795,2158,813],{"class":805},[795,2160,816],{"class":801},[795,2162,819],{"class":805},[795,2164,823],{"class":822},[795,2166,826],{"class":805},[795,2168,829],{"class":805},[795,2170,2171,2173],{"class":797,"line":832},[795,2172,802],{"class":801},[795,2174,948],{"class":805},[795,2176,2177,2180],{"class":797,"line":861},[795,2178,2179],{"class":809},"    useMarginLeftUtility",[795,2181,970],{"class":805},[795,2183,2184,2187],{"class":797,"line":883},[795,2185,2186],{"class":809},"    useMarginRightUtility",[795,2188,970],{"class":805},[795,2190,2191,2194],{"class":797,"line":889},[795,2192,2193],{"class":809},"    usePaddingLeftUtility",[795,2195,970],{"class":805},[795,2197,2198,2201],{"class":797,"line":910},[795,2199,2200],{"class":809},"    usePaddingRightUtility",[795,2202,970],{"class":805},[795,2204,2205,2207,2209,2211,2213,2215],{"class":797,"line":915},[795,2206,1904],{"class":805},[795,2208,816],{"class":801},[795,2210,819],{"class":805},[795,2212,854],{"class":822},[795,2214,826],{"class":805},[795,2216,829],{"class":805},[795,2218,2219,2221,2223,2225,2227,2229,2231,2233,2235],{"class":797,"line":932},[795,2220,802],{"class":801},[795,2222,806],{"class":805},[795,2224,1854],{"class":809},[795,2226,813],{"class":805},[795,2228,816],{"class":801},[795,2230,819],{"class":805},[795,2232,854],{"class":822},[795,2234,826],{"class":805},[795,2236,829],{"class":805},[795,2238,2239],{"class":797,"line":937},[795,2240,886],{"emptyLinePlaceholder":223},[795,2242,2243,2245,2247,2249,2251,2253],{"class":797,"line":951},[795,2244,893],{"class":892},[795,2246,896],{"class":809},[795,2248,899],{"class":805},[795,2250,810],{"class":902},[795,2252,905],{"class":809},[795,2254,829],{"class":805},[795,2256,2257],{"class":797,"line":973},[795,2258,886],{"emptyLinePlaceholder":223},[795,2260,2261,2263,2265,2267,2269,2271,2273,2275],{"class":797,"line":991},[795,2262,893],{"class":892},[795,2264,806],{"class":805},[795,2266,920],{"class":809},[795,2268,1904],{"class":805},[795,2270,1907],{"class":805},[795,2272,1854],{"class":902},[795,2274,927],{"class":809},[795,2276,829],{"class":805},[795,2278,2279],{"class":797,"line":1002},[795,2280,886],{"emptyLinePlaceholder":223},[795,2282,2283,2285,2287,2289,2291,2294,2296,2298,2301,2303,2305,2307,2309,2311,2313,2315,2318,2320],{"class":797,"line":1007},[795,2284,940],{"class":902},[795,2286,943],{"class":809},[795,2288,842],{"class":805},[795,2290,806],{"class":805},[795,2292,2293],{"class":954}," auto",[795,2295,958],{"class":805},[795,2297,961],{"class":805},[795,2299,2300],{"class":822},"auto",[795,2302,967],{"class":805},[795,2304,842],{"class":805},[795,2306,1182],{"class":976},[795,2308,958],{"class":805},[795,2310,961],{"class":805},[795,2312,984],{"class":822},[795,2314,967],{"class":805},[795,2316,2317],{"class":805}," },",[795,2319,997],{"class":809},[795,2321,829],{"class":805},[795,2323,2324,2326,2328,2330,2332,2334,2336,2338,2340,2342,2344,2346,2348,2350,2352,2354,2356,2358],{"class":797,"line":1019},[795,2325,1010],{"class":902},[795,2327,943],{"class":809},[795,2329,842],{"class":805},[795,2331,806],{"class":805},[795,2333,2293],{"class":954},[795,2335,958],{"class":805},[795,2337,961],{"class":805},[795,2339,2300],{"class":822},[795,2341,967],{"class":805},[795,2343,842],{"class":805},[795,2345,1182],{"class":976},[795,2347,958],{"class":805},[795,2349,961],{"class":805},[795,2351,984],{"class":822},[795,2353,967],{"class":805},[795,2355,2317],{"class":805},[795,2357,997],{"class":809},[795,2359,829],{"class":805},[795,2361,2362],{"class":797,"line":1034},[795,2363,886],{"emptyLinePlaceholder":223},[795,2365,2366,2368,2370,2372,2374,2377,2379,2381,2383,2385,2387,2389,2391,2393,2395,2397,2399,2401],{"class":797,"line":1049},[795,2367,1922],{"class":902},[795,2369,943],{"class":809},[795,2371,842],{"class":805},[795,2373,806],{"class":805},[795,2375,2376],{"class":954}," md",[795,2378,958],{"class":805},[795,2380,961],{"class":805},[795,2382,964],{"class":822},[795,2384,967],{"class":805},[795,2386,842],{"class":805},[795,2388,1182],{"class":976},[795,2390,958],{"class":805},[795,2392,961],{"class":805},[795,2394,984],{"class":822},[795,2396,967],{"class":805},[795,2398,2317],{"class":805},[795,2400,997],{"class":809},[795,2402,829],{"class":805},[795,2404,2405,2407,2409,2411,2413,2415,2417,2419,2421,2423,2425,2427,2429,2431,2433,2435,2437,2439],{"class":797,"line":1058},[795,2406,1979],{"class":902},[795,2408,943],{"class":809},[795,2410,842],{"class":805},[795,2412,806],{"class":805},[795,2414,2376],{"class":954},[795,2416,958],{"class":805},[795,2418,961],{"class":805},[795,2420,964],{"class":822},[795,2422,967],{"class":805},[795,2424,842],{"class":805},[795,2426,1182],{"class":976},[795,2428,958],{"class":805},[795,2430,961],{"class":805},[795,2432,984],{"class":822},[795,2434,967],{"class":805},[795,2436,2317],{"class":805},[795,2438,997],{"class":809},[795,2440,829],{"class":805},[795,2442,2443],{"class":797,"line":1063},[795,2444,886],{"emptyLinePlaceholder":223},[795,2446,2448,2450,2452,2454],{"class":797,"line":2447},20,[795,2449,1066],{"class":801},[795,2451,1069],{"class":801},[795,2453,1072],{"class":809},[795,2455,829],{"class":805},[781,2457,2458],{"icon":520,"label":1245},[785,2459,2461],{"className":1248,"code":2460,"language":1250,"meta":791,"style":791},"\u003Cnav>\n    \u003Cul>\n        \u003Cli class=\"_margin-right:auto _rtl:margin-right:0 _rtl:margin-left:auto\">\n            Logo\n        \u003C\u002Fli>\n        \u003Cli class=\"_padding-left:md _rtl:padding-left:0 _rtl:padding-right:md\">\n            Menu item\n        \u003C\u002Fli>\n    \u003C\u002Ful>\n\u003C\u002Fnav>\n",[697,2462,2463,2472,2481,2501,2506,2515,2533,2538,2546,2555],{"__ignoreMap":791},[795,2464,2465,2467,2470],{"class":797,"line":798},[795,2466,1263],{"class":805},[795,2468,2469],{"class":954},"nav",[795,2471,1281],{"class":805},[795,2473,2474,2477,2479],{"class":797,"line":832},[795,2475,2476],{"class":805},"    \u003C",[795,2478,730],{"class":954},[795,2480,1281],{"class":805},[795,2482,2483,2486,2488,2490,2492,2494,2497,2499],{"class":797,"line":861},[795,2484,2485],{"class":805},"        \u003C",[795,2487,733],{"class":954},[795,2489,1269],{"class":892},[795,2491,899],{"class":805},[795,2493,826],{"class":805},[795,2495,2496],{"class":822},"_margin-right:auto _rtl:margin-right:0 _rtl:margin-left:auto",[795,2498,826],{"class":805},[795,2500,1281],{"class":805},[795,2502,2503],{"class":797,"line":883},[795,2504,2505],{"class":809},"            Logo\n",[795,2507,2508,2511,2513],{"class":797,"line":889},[795,2509,2510],{"class":805},"        \u003C\u002F",[795,2512,733],{"class":954},[795,2514,1281],{"class":805},[795,2516,2517,2519,2521,2523,2525,2527,2529,2531],{"class":797,"line":910},[795,2518,2485],{"class":805},[795,2520,733],{"class":954},[795,2522,1269],{"class":892},[795,2524,899],{"class":805},[795,2526,826],{"class":805},[795,2528,2066],{"class":822},[795,2530,826],{"class":805},[795,2532,1281],{"class":805},[795,2534,2535],{"class":797,"line":915},[795,2536,2537],{"class":809},"            Menu item\n",[795,2539,2540,2542,2544],{"class":797,"line":932},[795,2541,2510],{"class":805},[795,2543,733],{"class":954},[795,2545,1281],{"class":805},[795,2547,2548,2551,2553],{"class":797,"line":937},[795,2549,2550],{"class":805},"    \u003C\u002F",[795,2552,730],{"class":954},[795,2554,1281],{"class":805},[795,2556,2557,2559,2561],{"class":797,"line":951},[795,2558,1291],{"class":805},[795,2560,2469],{"class":954},[795,2562,1281],{"class":805},[715,2564,2566],{"id":2565},"best-practices","Best Practices",[730,2568,2569,2583,2589,2607,2613],{},[733,2570,2571,2574,2575,2578,2579,2582],{},[692,2572,2573],{},"Prefer logical properties",": When possible, use CSS logical properties (",[697,2576,2577],{},"margin-inline-start",", ",[697,2580,2581],{},"padding-inline-end",") instead of directional modifiers, as they handle RTL automatically",[733,2584,2585,2588],{},[692,2586,2587],{},"Use directional modifiers for exceptions",": Apply them when logical properties don't cover your use case (e.g., absolute positioning, transforms)",[733,2590,2591,2598,2599,2602,2603,2606],{},[692,2592,2593,2594,2597],{},"Set ",[697,2595,2596],{},"dir"," attribute",": Ensure your HTML has the correct ",[697,2600,2601],{},"dir=\"rtl\""," or ",[697,2604,2605],{},"dir=\"ltr\""," attribute for the selectors to match",[733,2608,2609,2612],{},[692,2610,2611],{},"Test both directions",": Verify your layouts work correctly in both LTR and RTL modes",[733,2614,2615,756,2618,2620],{},[692,2616,2617],{},"Keep specificity low",[697,2619,759],{}," wrapper ensures directional modifiers don't cause specificity battles",[715,2622,2624],{"id":2623},"faq","FAQ",[2626,2627,2628,2636,2648],"accordion",{},[2629,2630,769,2633,2635],"accordion-item",{"icon":2631,"label":2632},"i-lucide-circle-help","Why do directional modifiers use :where()?",[697,2634,759],{}," 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.",[2629,2637,2639,2640,2578,2642,2578,2644,2647],{"icon":2631,"label":2638},"Should I use directional modifiers or logical properties?","Prefer CSS logical properties (",[697,2641,2577],{},[697,2643,2581],{},[697,2645,2646],{},"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.",[2629,2649,2651,2652,2655,2656,2659,2660,2663],{"icon":2631,"label":2650},"How do directional modifiers detect text direction?","The modifiers use a combination of selectors: ",[697,2653,2654],{},":dir(rtl)"," (the CSS pseudo-class) and ",[697,2657,2658],{},"[dir=\"rtl\"]"," (the HTML attribute selector), plus ",[697,2661,2662],{},"[dir=\"rtl\"] *"," for nested elements. This ensures broad compatibility across browsers.",[2665,2666,2667],"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":791,"searchDepth":832,"depth":832,"links":2669},[2670,2671,2672,2673,2674,2677,2680,2681],{"id":717,"depth":832,"text":78},{"id":724,"depth":832,"text":725},{"id":763,"depth":832,"text":766},{"id":1344,"depth":832,"text":1347},{"id":1782,"depth":832,"text":699,"children":2675},[2676],{"id":2087,"depth":861,"text":2088},{"id":2134,"depth":832,"text":2135,"children":2678},[2679],{"id":2138,"depth":861,"text":2139},{"id":2565,"depth":832,"text":2566},{"id":2623,"depth":832,"text":2624},"Create directional modifiers for targeting elements based on text direction (RTL\u002FLTR) with full type safety.",null,{},{"title":649,"icon":652},{"title":684,"description":2682},"I4_6_I8ZJSytyZ8jewyVMmvSFJpE_jKRwG3NIAwVj60",[2689,2691],{"title":645,"path":646,"stem":647,"description":2690,"icon":571,"children":-1},"Create ARIA state modifiers for styling elements based on their ARIA attribute values with full type safety.",{"title":654,"path":655,"stem":656,"description":2692,"icon":429,"children":-1},"Create form state modifiers for styling form elements based on their validation and interaction states with full type safety.",1781596356060]