[{"data":1,"prerenderedAt":572},["ShallowReactive",2],{"docs-layout-toc:\u002Fdocs\u002Fgetting-started\u002Fdata-attributes":3,"docs-header-toc:\u002Fdocs\u002Fgetting-started\u002Fdata-attributes":244,"$lF6uQFtHwx":408},{"id":4,"title":5,"body":6,"description":55,"extension":238,"meta":239,"navigation":174,"path":240,"seo":241,"stem":242,"__hash__":243},"content\u002Fdocs\u002Fgetting-started\u002Fdata-attributes.md","Data Attributes",{"type":7,"value":8,"toc":229},"minimark",[9,14,23,26,30,33,37,42,49,125,128,132,135,210,214,221,225],[10,11,13],"h2",{"id":12},"data-attributes","Data attributes",[15,16,17,18,22],"p",{},"Some AirUI components set ",[19,20,21],"code",{},"data-*"," attributes on their root or layer element. These attributes are styling hooks: AirUI applies no styles for them. You target them in your own CSS to adapt tokens or styles to the context a component renders in.",[15,24,25],{},"Each component page lists the attributes it sets in its own table. This page explains how to use them.",[27,28,29],"h3",{"id":29},"data-surface",[15,31,32],{},"Marks the layer a component draws, such as a card or a modal. Components that sit on top of a layer, like form fields, can then adapt to it from your CSS without the design system knowing about your project.",[34,35],"data-attributes-table",{":attributes":36},"[{\"name\":\"data-surface\",\"value\":\"container\",\"description\":\"Set by Card and Drawer. Marks a container layer.\"},{\"name\":\"data-surface\",\"value\":\"modal\",\"description\":\"Set by ModalDialog on its content panel. Marks a modal layer.\"}]",[38,39,41],"h4",{"id":40},"adapting-tokens-to-a-layer","Adapting tokens to a layer",[15,43,44,45,48],{},"Form fields use the ",[19,46,47],{},"--color-background-field"," token for their background. On a plain page that token works as is, but inside a card or a modal it may blend with the layer behind it. Override the token for each layer in your global stylesheet:",[50,51,56],"pre",{"className":52,"code":53,"language":54,"meta":55,"style":55},"language-css shiki shiki-themes github-dark github-dark","[data-surface=\"container\"],\n[data-surface=\"modal\"] {\n    --color-background-field: var(--color-background-surface);\n}\n","css","",[19,57,58,81,96,119],{"__ignoreMap":55},[59,60,63,67,70,74,78],"span",{"class":61,"line":62},"line",1,[59,64,66],{"class":65},"suv1-","[",[59,68,29],{"class":69},"sFR8T",[59,71,73],{"class":72},"sOPea","=",[59,75,77],{"class":76},"s4wv1","\"container\"",[59,79,80],{"class":65},"],\n",[59,82,84,86,88,90,93],{"class":61,"line":83},2,[59,85,66],{"class":65},[59,87,29],{"class":69},[59,89,73],{"class":72},[59,91,92],{"class":76},"\"modal\"",[59,94,95],{"class":65},"] {\n",[59,97,99,103,106,110,113,116],{"class":61,"line":98},3,[59,100,102],{"class":101},"s-3mD","    --color-background-field",[59,104,105],{"class":65},": ",[59,107,109],{"class":108},"s8ozJ","var",[59,111,112],{"class":65},"(",[59,114,115],{"class":101},"--color-background-surface",[59,117,118],{"class":65},");\n",[59,120,122],{"class":61,"line":121},4,[59,123,124],{"class":65},"}\n",[15,126,127],{},"Every form field rendered inside a matching layer now uses the new value. Fields outside any layer keep the default.",[38,129,131],{"id":130},"targeting-a-single-layer","Targeting a single layer",[15,133,134],{},"Use one selector per value to style layers differently:",[50,136,138],{"className":52,"code":137,"language":54,"meta":55,"style":55},"[data-surface=\"container\"] {\n    --color-background-field: var(--color-background-surface);\n}\n\n[data-surface=\"modal\"] {\n    --color-background-field: var(--color-background-neutral-subtle);\n}\n",[19,139,140,152,166,170,176,189,205],{"__ignoreMap":55},[59,141,142,144,146,148,150],{"class":61,"line":62},[59,143,66],{"class":65},[59,145,29],{"class":69},[59,147,73],{"class":72},[59,149,77],{"class":76},[59,151,95],{"class":65},[59,153,154,156,158,160,162,164],{"class":61,"line":83},[59,155,102],{"class":101},[59,157,105],{"class":65},[59,159,109],{"class":108},[59,161,112],{"class":65},[59,163,115],{"class":101},[59,165,118],{"class":65},[59,167,168],{"class":61,"line":98},[59,169,124],{"class":65},[59,171,172],{"class":61,"line":121},[59,173,175],{"emptyLinePlaceholder":174},true,"\n",[59,177,179,181,183,185,187],{"class":61,"line":178},5,[59,180,66],{"class":65},[59,182,29],{"class":69},[59,184,73],{"class":72},[59,186,92],{"class":76},[59,188,95],{"class":65},[59,190,192,194,196,198,200,203],{"class":61,"line":191},6,[59,193,102],{"class":101},[59,195,105],{"class":65},[59,197,109],{"class":108},[59,199,112],{"class":65},[59,201,202],{"class":101},"--color-background-neutral-subtle",[59,204,118],{"class":65},[59,206,208],{"class":61,"line":207},7,[59,209,124],{"class":65},[38,211,213],{"id":212},"nested-layers","Nested layers",[15,215,216,217,220],{},"CSS custom properties inherit, so the closest layer wins. A field inside a Card that sits inside a ModalDialog uses the ",[19,218,219],{},"container"," value. Declare overrides only for the values you need.",[222,223],"content-alert",{":props":224},"{\"title\":\"Important\",\"description\":\"The design system only sets the attribute. Without a rule in your CSS, nothing changes visually.\"}",[226,227,228],"style",{},"html pre.shiki code .suv1-, html code.shiki .suv1-{--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}html pre.shiki code .sFR8T, html code.shiki .sFR8T{--shiki-default:#B392F0;--shiki-dark:#B392F0}html pre.shiki code .sOPea, html code.shiki .sOPea{--shiki-default:#F97583;--shiki-dark:#F97583}html pre.shiki code .s4wv1, html code.shiki .s4wv1{--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF}html pre.shiki code .s-3mD, html code.shiki .s-3mD{--shiki-default:#FFAB70;--shiki-dark:#FFAB70}html pre.shiki code .s8ozJ, html code.shiki .s8ozJ{--shiki-default:#79B8FF;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":55,"searchDepth":83,"depth":98,"links":230},[231],{"id":12,"depth":83,"text":13,"children":232},[233],{"id":29,"depth":98,"text":29,"children":234},[235,236,237],{"id":40,"depth":121,"text":41},{"id":130,"depth":121,"text":131},{"id":212,"depth":121,"text":213},"md",{},"\u002Fdocs\u002Fgetting-started\u002Fdata-attributes",{"description":55},"docs\u002Fgetting-started\u002Fdata-attributes","DIwGqP3q9Y4mrR5qxAlW4cV9AichHkF1RYWLwsK4AnY",{"id":4,"title":5,"body":245,"description":55,"extension":238,"meta":406,"navigation":174,"path":240,"seo":407,"stem":242,"__hash__":243},{"type":7,"value":246,"toc":397},[247,249,253,255,257,259,261,263,267,313,315,317,319,387,389,393,395],[10,248,13],{"id":12},[15,250,17,251,22],{},[19,252,21],{},[15,254,25],{},[27,256,29],{"id":29},[15,258,32],{},[34,260],{":attributes":36},[38,262,41],{"id":40},[15,264,44,265,48],{},[19,266,47],{},[50,268,269],{"className":52,"code":53,"language":54,"meta":55,"style":55},[19,270,271,283,295,309],{"__ignoreMap":55},[59,272,273,275,277,279,281],{"class":61,"line":62},[59,274,66],{"class":65},[59,276,29],{"class":69},[59,278,73],{"class":72},[59,280,77],{"class":76},[59,282,80],{"class":65},[59,284,285,287,289,291,293],{"class":61,"line":83},[59,286,66],{"class":65},[59,288,29],{"class":69},[59,290,73],{"class":72},[59,292,92],{"class":76},[59,294,95],{"class":65},[59,296,297,299,301,303,305,307],{"class":61,"line":98},[59,298,102],{"class":101},[59,300,105],{"class":65},[59,302,109],{"class":108},[59,304,112],{"class":65},[59,306,115],{"class":101},[59,308,118],{"class":65},[59,310,311],{"class":61,"line":121},[59,312,124],{"class":65},[15,314,127],{},[38,316,131],{"id":130},[15,318,134],{},[50,320,321],{"className":52,"code":137,"language":54,"meta":55,"style":55},[19,322,323,335,349,353,357,369,383],{"__ignoreMap":55},[59,324,325,327,329,331,333],{"class":61,"line":62},[59,326,66],{"class":65},[59,328,29],{"class":69},[59,330,73],{"class":72},[59,332,77],{"class":76},[59,334,95],{"class":65},[59,336,337,339,341,343,345,347],{"class":61,"line":83},[59,338,102],{"class":101},[59,340,105],{"class":65},[59,342,109],{"class":108},[59,344,112],{"class":65},[59,346,115],{"class":101},[59,348,118],{"class":65},[59,350,351],{"class":61,"line":98},[59,352,124],{"class":65},[59,354,355],{"class":61,"line":121},[59,356,175],{"emptyLinePlaceholder":174},[59,358,359,361,363,365,367],{"class":61,"line":178},[59,360,66],{"class":65},[59,362,29],{"class":69},[59,364,73],{"class":72},[59,366,92],{"class":76},[59,368,95],{"class":65},[59,370,371,373,375,377,379,381],{"class":61,"line":191},[59,372,102],{"class":101},[59,374,105],{"class":65},[59,376,109],{"class":108},[59,378,112],{"class":65},[59,380,202],{"class":101},[59,382,118],{"class":65},[59,384,385],{"class":61,"line":207},[59,386,124],{"class":65},[38,388,213],{"id":212},[15,390,216,391,220],{},[19,392,219],{},[222,394],{":props":224},[226,396,228],{},{"title":55,"searchDepth":83,"depth":98,"links":398},[399],{"id":12,"depth":83,"text":13,"children":400},[401],{"id":29,"depth":98,"text":29,"children":402},[403,404,405],{"id":40,"depth":121,"text":41},{"id":130,"depth":121,"text":131},{"id":212,"depth":121,"text":213},{},{"description":55},{"id":4,"title":5,"body":409,"description":55,"extension":238,"meta":570,"navigation":174,"path":240,"seo":571,"stem":242,"__hash__":243},{"type":7,"value":410,"toc":561},[411,413,417,419,421,423,425,427,431,477,479,481,483,551,553,557,559],[10,412,13],{"id":12},[15,414,17,415,22],{},[19,416,21],{},[15,418,25],{},[27,420,29],{"id":29},[15,422,32],{},[34,424],{":attributes":36},[38,426,41],{"id":40},[15,428,44,429,48],{},[19,430,47],{},[50,432,433],{"className":52,"code":53,"language":54,"meta":55,"style":55},[19,434,435,447,459,473],{"__ignoreMap":55},[59,436,437,439,441,443,445],{"class":61,"line":62},[59,438,66],{"class":65},[59,440,29],{"class":69},[59,442,73],{"class":72},[59,444,77],{"class":76},[59,446,80],{"class":65},[59,448,449,451,453,455,457],{"class":61,"line":83},[59,450,66],{"class":65},[59,452,29],{"class":69},[59,454,73],{"class":72},[59,456,92],{"class":76},[59,458,95],{"class":65},[59,460,461,463,465,467,469,471],{"class":61,"line":98},[59,462,102],{"class":101},[59,464,105],{"class":65},[59,466,109],{"class":108},[59,468,112],{"class":65},[59,470,115],{"class":101},[59,472,118],{"class":65},[59,474,475],{"class":61,"line":121},[59,476,124],{"class":65},[15,478,127],{},[38,480,131],{"id":130},[15,482,134],{},[50,484,485],{"className":52,"code":137,"language":54,"meta":55,"style":55},[19,486,487,499,513,517,521,533,547],{"__ignoreMap":55},[59,488,489,491,493,495,497],{"class":61,"line":62},[59,490,66],{"class":65},[59,492,29],{"class":69},[59,494,73],{"class":72},[59,496,77],{"class":76},[59,498,95],{"class":65},[59,500,501,503,505,507,509,511],{"class":61,"line":83},[59,502,102],{"class":101},[59,504,105],{"class":65},[59,506,109],{"class":108},[59,508,112],{"class":65},[59,510,115],{"class":101},[59,512,118],{"class":65},[59,514,515],{"class":61,"line":98},[59,516,124],{"class":65},[59,518,519],{"class":61,"line":121},[59,520,175],{"emptyLinePlaceholder":174},[59,522,523,525,527,529,531],{"class":61,"line":178},[59,524,66],{"class":65},[59,526,29],{"class":69},[59,528,73],{"class":72},[59,530,92],{"class":76},[59,532,95],{"class":65},[59,534,535,537,539,541,543,545],{"class":61,"line":191},[59,536,102],{"class":101},[59,538,105],{"class":65},[59,540,109],{"class":108},[59,542,112],{"class":65},[59,544,202],{"class":101},[59,546,118],{"class":65},[59,548,549],{"class":61,"line":207},[59,550,124],{"class":65},[38,552,213],{"id":212},[15,554,216,555,220],{},[19,556,219],{},[222,558],{":props":224},[226,560,228],{},{"title":55,"searchDepth":83,"depth":98,"links":562},[563],{"id":12,"depth":83,"text":13,"children":564},[565],{"id":29,"depth":98,"text":29,"children":566},[567,568,569],{"id":40,"depth":121,"text":41},{"id":130,"depth":121,"text":131},{"id":212,"depth":121,"text":213},{},{"description":55},1792572263665]