[{"data":1,"prerenderedAt":1578},["ShallowReactive",2],{"docs:styling":3},{"frontmatter":4,"meta":5,"nodes":6},{},{},[7,12,16,24,37,43,100,106,112,151,166,172,178,193,289,292,360,363,367,370,384,482,513,574,590,594,620,883,887,903,1103,1384,1392,1405,1559],[8,9,11],"h1",{"id":10},"styling","Styling",[13,14,15],"p",{},"Style parts with CSS or Tailwind.",[13,17,18,19,23],{},"Every part renders a real HTML element with no styles of its own. You write the CSS; the library exposes its state as ",[20,21,22],"code",{},"data-*"," attributes and CSS variables you can target.",[25,26,28,29,32,33,36],"h2",{"id":27},"the-class-and-style-attributes","The ",[20,30,31],{},"class"," and ",[20,34,35],{},"style"," attributes",[13,38,39,40,42],{},"Every part that renders an element accepts ",[20,41,31],{},", applied to that element. Vue's string, array and object forms all work:",[44,45,49],"pre",{"language":46,"meta":47,"class":48},"vue","title=\"Switch\"","shiki shiki-themes github-light github-dark dark:github-dark",[20,50,52,68,69,68,91],{"class":51},"language-vue",[53,54,57,61,65],"span",{"class":55,"style":56},"line","display: inline",[53,58,60],{"style":59},"color:#24292E;--shiki-dark:#E1E4E8","\u003C",[53,62,64],{"style":63},"color:#22863A;--shiki-dark:#85E89D","template",[53,66,67],{"style":59},">","\n",[53,70,71,74,77,81,84,88],{"class":55,"style":56},[53,72,73],{"style":59},"  \u003C",[53,75,76],{"style":63},"Switch.Thumb",[53,78,80],{"style":79},"color:#6F42C1;--shiki-dark:#B392F0"," class",[53,82,83],{"style":59},"=",[53,85,87],{"style":86},"color:#032F62;--shiki-dark:#9ECBFF","\"switch-thumb\"",[53,89,90],{"style":59}," \u002F>",[53,92,93,96,98],{"class":55,"style":56},[53,94,95],{"style":59},"\u003C\u002F",[53,97,64],{"style":63},[53,99,67],{"style":59},[13,101,102,103,105],{},"Prefer a state selector over a class you compute yourself. Most on\u002Foff state is already a ",[20,104,22],{}," attribute (below).",[13,107,108,109,111],{},"Parts take ",[20,110,35],{}," too, for the values only the running app knows:",[44,113,115],{"language":46,"meta":47,"class":114},"shiki shiki-themes github-light github-dark has-highlighted dark:github-dark",[20,116,117,68,125,68,143],{"class":51},[53,118,119,121,123],{"class":55,"style":56},[53,120,60],{"style":59},[53,122,64],{"style":63},[53,124,67],{"style":59},[53,126,129,131,133,136,138,141],{"class":127,"style":56},[55,128],"highlighted",[53,130,73],{"style":59},[53,132,76],{"style":63},[53,134,135],{"style":79}," :style",[53,137,83],{"style":59},[53,139,140],{"style":86},"\"{ transform: `translateX(${x}px)` }\"",[53,142,90],{"style":59},[53,144,145,147,149],{"class":55,"style":56},[53,146,95],{"style":59},[53,148,64],{"style":63},[53,150,67],{"style":59},[13,152,153,154,32,156,158,159,32,162,165],{},"Parts are components, but ",[20,155,31],{},[20,157,35],{}," fall through to the element a part renders, so ",[20,160,161],{},":class",[20,163,164],{},":style"," bindings work on a part exactly as they do on an element, and merge with whatever the part sets itself.",[25,167,169,170,36],{"id":168},"state-as-data-attributes","State as ",[20,171,22],{},[13,173,174,175,177],{},"Each part mirrors its state onto the element as ",[20,176,22],{}," attributes. Write one static class and style against the attribute.",[13,179,180,185,186,32,189,192],{},[181,182,184],"a",{"href":183},"\u002Fswitch","Switch"," publishes ",[20,187,188],{},"[data-checked]",[20,190,191],{},"[data-unchecked]",":",[44,194,197],{"language":195,"meta":196,"class":48},"css","title=\"switch.css\"",[20,198,200,68,208,68,229,68,247,68,252,68,254,68,267,68,285],{"class":199},"language-css",[53,201,202,205],{"class":55,"style":56},[53,203,204],{"style":79},".switch-thumb",[53,206,207],{"style":59}," {",[53,209,210,214,217,220,223,226],{"class":55,"style":56},[53,211,213],{"style":212},"color:#005CC5;--shiki-dark:#79B8FF","  transform",[53,215,216],{"style":59},": ",[53,218,219],{"style":212},"translateX",[53,221,222],{"style":59},"(",[53,224,225],{"style":212},"0",[53,227,228],{"style":59},");",[53,230,231,234,237,240,244],{"class":55,"style":56},[53,232,233],{"style":212},"  transition",[53,235,236],{"style":59},": transform ",[53,238,239],{"style":212},"150",[53,241,243],{"style":242},"color:#D73A49;--shiki-dark:#F97583","ms",[53,245,246],{"style":59},";",[53,248,249],{"class":55,"style":56},[53,250,251],{"style":59},"}",[53,253],{"class":55,"style":56},[53,255,256,258,261,264],{"class":55,"style":56},[53,257,204],{"style":79},[53,259,260],{"style":59},"[",[53,262,263],{"style":79},"data-checked",[53,265,266],{"style":59},"] {",[53,268,269,271,273,275,277,280,283],{"class":55,"style":56},[53,270,213],{"style":212},[53,272,216],{"style":59},[53,274,219],{"style":212},[53,276,222],{"style":59},[53,278,279],{"style":212},"1",[53,281,282],{"style":242},"rem",[53,284,228],{"style":59},[53,286,287],{"class":55,"style":56},[53,288,251],{"style":59},[13,290,291],{},"The attributes are consistent across the library:",[293,294,295,325,342],"ul",{},[296,297,298,216,302,305,306,309,310,305,312,309,314,309,317,320,321,324],"li",{},[299,300,301],"strong",{},"On\u002Foff state",[20,303,304],{},"[data-open]"," \u002F ",[20,307,308],{},"[data-closed]",", ",[20,311,188],{},[20,313,191],{},[20,315,316],{},"[data-disabled]",[20,318,319],{},"[data-selected]",", and ",[20,322,323],{},"[data-highlighted]"," for the item the keyboard or pointer has highlighted in a list.",[296,326,327,216,330,32,333,336,337,341],{},[299,328,329],{},"Resolved position",[20,331,332],{},"[data-side]",[20,334,335],{},"[data-align]"," on a positioner and popup carry where a floating element landed ",[338,339,340],"em",{},"after"," collision handling, so a popup can style the edge nearest its trigger.",[296,343,344,216,347,350,351,354,355,359],{},[299,345,346],{},"Enter and exit",[20,348,349],{},"[data-starting-style]"," marks an element the frame it mounts; ",[20,352,353],{},"[data-ending-style]"," the moment before it unmounts. Set resting styles as the default and transitional styles behind these two attributes, and mount\u002Funmount animate with a plain transition. See ",[181,356,358],{"href":357},"\u002Fanimation","Animation",".",[13,361,362],{},"Each component's API reference lists what its own parts expose.",[25,364,366],{"id":365},"css-variables-live-measurements","CSS variables: live measurements",[13,368,369],{},"Where an attribute can't carry a number, a part sets a CSS variable for sizing or transform math. It updates as the layout changes.",[13,371,372,376,377,380,381,192],{},[181,373,375],{"href":374},"\u002Faccordion","Accordion"," measures its panel and exposes ",[20,378,379],{},"--accordion-panel-height",", which animates a height from ",[20,382,383],{},"auto",[44,385,387],{"language":195,"meta":386,"class":48},"title=\"accordion.css\"",[20,388,389,68,396,68,408,68,425,68,439,68,443,68,445,68,457,68,468,68,478],{"class":199},[53,390,391,394],{"class":55,"style":56},[53,392,393],{"style":79},".accordion-panel",[53,395,207],{"style":59},[53,397,398,401,403,406],{"class":55,"style":56},[53,399,400],{"style":212},"  overflow",[53,402,216],{"style":59},[53,404,405],{"style":212},"hidden",[53,407,246],{"style":59},[53,409,410,413,415,418,420,423],{"class":55,"style":56},[53,411,412],{"style":212},"  height",[53,414,216],{"style":59},[53,416,417],{"style":212},"var",[53,419,222],{"style":59},[53,421,379],{"style":422},"color:#E36209;--shiki-dark:#FFAB70",[53,424,228],{"style":59},[53,426,427,429,432,435,437],{"class":55,"style":56},[53,428,233],{"style":212},[53,430,431],{"style":59},": height ",[53,433,434],{"style":212},"200",[53,436,243],{"style":242},[53,438,246],{"style":59},[53,440,441],{"class":55,"style":56},[53,442,251],{"style":59},[53,444],{"class":55,"style":56},[53,446,447,449,451,454],{"class":55,"style":56},[53,448,393],{"style":79},[53,450,260],{"style":59},[53,452,453],{"style":79},"data-starting-style",[53,455,456],{"style":59},"],",[53,458,459,461,463,466],{"class":55,"style":56},[53,460,393],{"style":79},[53,462,260],{"style":59},[53,464,465],{"style":79},"data-ending-style",[53,467,266],{"style":59},[53,469,470,472,474,476],{"class":55,"style":56},[53,471,412],{"style":212},[53,473,216],{"style":59},[53,475,225],{"style":212},[53,477,246],{"style":59},[53,479,480],{"class":55,"style":56},[53,481,251],{"style":59},[13,483,484,485,489,490,494,495,305,498,501,502,305,505,508,509,512],{},"Floating parts publish measurements the same way. A ",[181,486,488],{"href":487},"\u002Fselect","Select"," or ",[181,491,493],{"href":492},"\u002Fpopover","Popover"," positioner sets ",[20,496,497],{},"--anchor-width",[20,499,500],{},"--anchor-height"," (the trigger's size), ",[20,503,504],{},"--available-width",[20,506,507],{},"--available-height"," (room before the viewport edge), and ",[20,510,511],{},"--transform-origin"," (the point nearest the anchor). They sit on the positioner and inherit down, so the popup can read them:",[44,514,516],{"language":195,"meta":515,"class":48},"title=\"select.css\"",[20,517,518,68,525,68,540,68,555,68,570],{"class":199},[53,519,520,523],{"class":55,"style":56},[53,521,522],{"style":79},".select-popup",[53,524,207],{"style":59},[53,526,527,530,532,534,536,538],{"class":55,"style":56},[53,528,529],{"style":212},"  min-width",[53,531,216],{"style":59},[53,533,417],{"style":212},[53,535,222],{"style":59},[53,537,497],{"style":422},[53,539,228],{"style":59},[53,541,542,545,547,549,551,553],{"class":55,"style":56},[53,543,544],{"style":212},"  max-height",[53,546,216],{"style":59},[53,548,417],{"style":212},[53,550,222],{"style":59},[53,552,507],{"style":422},[53,554,228],{"style":59},[53,556,557,560,562,564,566,568],{"class":55,"style":56},[53,558,559],{"style":212},"  transform-origin",[53,561,216],{"style":59},[53,563,417],{"style":212},[53,565,222],{"style":59},[53,567,511],{"style":422},[53,569,228],{"style":59},[53,571,572],{"class":55,"style":56},[53,573,251],{"style":59},[13,575,576,577,581,582,585,586,589],{},"Every ",[181,578,580],{"href":579},"\u002Fdialog","Dialog"," popup sets ",[20,583,584],{},"--nested-dialogs"," — how many dialogs are open inside it — paired with ",[20,587,588],{},"[data-nested-dialog-open]",", so a parent can shrink or dim as children stack on top.",[25,591,593],{"id":592},"tailwind","Tailwind",[13,595,596,597,599,600,602,603,605,606,309,609,612,613,616,617,192],{},"Pass utilities through each part's ",[20,598,31],{},", and key state variants off the same ",[20,601,22],{}," attributes with Tailwind's ",[20,604,22],{}," syntax (",[20,607,608],{},"data-highlighted:…",[20,610,611],{},"data-starting-style:…","). Read a CSS variable with the ",[20,614,615],{},"(--var)"," shorthand, as in ",[20,618,619],{},"origin-(--transform-origin)",[44,621,623],{"language":46,"meta":622,"class":48},"title=\"Menu\"",[20,624,625,68,637,68,651,68,659,68,661,68,669,68,678,68,686,68,696,68,701,68,706,68,715,68,724,68,749,68,757,68,767,68,772,68,780,68,790,68,795,68,800,68,809,68,815,68,823,68,827,68,832,68,840,68,849,68,858,68,866,68,875],{"class":51},[53,626,627,629,632,635],{"class":55,"style":56},[53,628,60],{"style":59},[53,630,631],{"style":63},"script",[53,633,634],{"style":79}," setup",[53,636,67],{"style":59},[53,638,639,642,645,648],{"class":55,"style":56},[53,640,641],{"style":242},"import",[53,643,644],{"style":59}," { Menu } ",[53,646,647],{"style":242},"from",[53,649,650],{"style":86}," '@shardsui\u002Fvue\u002Fmenu'",[53,652,653,655,657],{"class":55,"style":56},[53,654,95],{"style":59},[53,656,631],{"style":63},[53,658,67],{"style":59},[53,660],{"class":55,"style":56},[53,662,663,665,667],{"class":55,"style":56},[53,664,60],{"style":59},[53,666,64],{"style":63},[53,668,67],{"style":59},[53,670,671,673,676],{"class":55,"style":56},[53,672,73],{"style":59},[53,674,675],{"style":63},"Menu.Root",[53,677,67],{"style":59},[53,679,680,683],{"class":55,"style":56},[53,681,682],{"style":59},"    \u003C",[53,684,685],{"style":63},"Menu.Trigger",[53,687,688,691,693],{"class":55,"style":56},[53,689,690],{"style":79},"      class",[53,692,83],{"style":59},[53,694,695],{"style":86},"\"flex h-8 items-center justify-center rounded-md border border-gray-950 bg-white px-3 text-sm text-gray-950 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-950 active:bg-gray-200 data-popup-open:bg-gray-100\"",[53,697,698],{"class":55,"style":56},[53,699,700],{"style":59},"    >",[53,702,703],{"class":55,"style":56},[53,704,705],{"style":59},"      Song",[53,707,708,711,713],{"class":55,"style":56},[53,709,710],{"style":59},"    \u003C\u002F",[53,712,685],{"style":63},[53,714,67],{"style":59},[53,716,717,719,722],{"class":55,"style":56},[53,718,682],{"style":59},[53,720,721],{"style":63},"Menu.Portal",[53,723,67],{"style":59},[53,725,726,729,732,734,736,739,742,744,747],{"class":55,"style":56},[53,727,728],{"style":59},"      \u003C",[53,730,731],{"style":63},"Menu.Positioner",[53,733,80],{"style":79},[53,735,83],{"style":59},[53,737,738],{"style":86},"\"outline-hidden\"",[53,740,741],{"style":79}," :side-offset",[53,743,83],{"style":59},[53,745,746],{"style":86},"\"8\"",[53,748,67],{"style":59},[53,750,751,754],{"class":55,"style":56},[53,752,753],{"style":59},"        \u003C",[53,755,756],{"style":63},"Menu.Popup",[53,758,759,762,764],{"class":55,"style":56},[53,760,761],{"style":79},"          class",[53,763,83],{"style":59},[53,765,766],{"style":86},"\"origin-(--transform-origin) border border-gray-950 bg-white py-1 text-gray-950 outline-hidden transition data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0\"",[53,768,769],{"class":55,"style":56},[53,770,771],{"style":59},"        >",[53,773,774,777],{"class":55,"style":56},[53,775,776],{"style":59},"          \u003C",[53,778,779],{"style":63},"Menu.Item",[53,781,782,785,787],{"class":55,"style":56},[53,783,784],{"style":79},"            class",[53,786,83],{"style":59},[53,788,789],{"style":86},"\"flex py-2 pr-8 pl-4 text-sm\u002F4 outline-hidden select-none data-highlighted:bg-gray-950 data-highlighted:text-white\"",[53,791,792],{"class":55,"style":56},[53,793,794],{"style":59},"          >",[53,796,797],{"class":55,"style":56},[53,798,799],{"style":59},"            Add to Library",[53,801,802,805,807],{"class":55,"style":56},[53,803,804],{"style":59},"          \u003C\u002F",[53,806,779],{"style":63},[53,808,67],{"style":59},[53,810,811,813],{"class":55,"style":56},[53,812,776],{"style":59},[53,814,779],{"style":63},[53,816,817,819,821],{"class":55,"style":56},[53,818,784],{"style":79},[53,820,83],{"style":59},[53,822,789],{"style":86},[53,824,825],{"class":55,"style":56},[53,826,794],{"style":59},[53,828,829],{"class":55,"style":56},[53,830,831],{"style":59},"            Add to Playlist",[53,833,834,836,838],{"class":55,"style":56},[53,835,804],{"style":59},[53,837,779],{"style":63},[53,839,67],{"style":59},[53,841,842,845,847],{"class":55,"style":56},[53,843,844],{"style":59},"        \u003C\u002F",[53,846,756],{"style":63},[53,848,67],{"style":59},[53,850,851,854,856],{"class":55,"style":56},[53,852,853],{"style":59},"      \u003C\u002F",[53,855,731],{"style":63},[53,857,67],{"style":59},[53,859,860,862,864],{"class":55,"style":56},[53,861,710],{"style":59},[53,863,721],{"style":63},[53,865,67],{"style":59},[53,867,868,871,873],{"class":55,"style":56},[53,869,870],{"style":59},"  \u003C\u002F",[53,872,675],{"style":63},[53,874,67],{"style":59},[53,876,877,879,881],{"class":55,"style":56},[53,878,95],{"style":59},[53,880,64],{"style":63},[53,882,67],{"style":59},[25,884,886],{"id":885},"plain-css","Plain CSS",[13,888,889,890,892,893,895,896,309,899,902],{},"Give each part a ",[20,891,31],{},", then write the rules in a stylesheet. The same ",[20,894,22],{}," attributes and CSS variables work from these selectors (",[20,897,898],{},".menu-item[data-highlighted]",[20,900,901],{},".menu-popup[data-starting-style]","):",[44,904,905],{"language":46,"meta":622,"class":48},[20,906,907,68,917,68,924,68,934,68,942,68,944,68,952,68,960,68,980,68,988,68,1009,68,1024,68,1044,68,1063,68,1071,68,1079,68,1087,68,1095],{"class":51},[53,908,909,911,913,915],{"class":55,"style":56},[53,910,60],{"style":59},[53,912,631],{"style":63},[53,914,634],{"style":79},[53,916,67],{"style":59},[53,918,919,921],{"class":55,"style":56},[53,920,641],{"style":242},[53,922,923],{"style":86}," '.\u002Fmenu.css'",[53,925,926,928,930,932],{"class":55,"style":56},[53,927,641],{"style":242},[53,929,644],{"style":59},[53,931,647],{"style":242},[53,933,650],{"style":86},[53,935,936,938,940],{"class":55,"style":56},[53,937,95],{"style":59},[53,939,631],{"style":63},[53,941,67],{"style":59},[53,943],{"class":55,"style":56},[53,945,946,948,950],{"class":55,"style":56},[53,947,60],{"style":59},[53,949,64],{"style":63},[53,951,67],{"style":59},[53,953,954,956,958],{"class":55,"style":56},[53,955,73],{"style":59},[53,957,675],{"style":63},[53,959,67],{"style":59},[53,961,962,964,966,968,970,973,976,978],{"class":55,"style":56},[53,963,682],{"style":59},[53,965,685],{"style":63},[53,967,80],{"style":79},[53,969,83],{"style":59},[53,971,972],{"style":86},"\"menu-trigger\"",[53,974,975],{"style":59},">Song\u003C\u002F",[53,977,685],{"style":63},[53,979,67],{"style":59},[53,981,982,984,986],{"class":55,"style":56},[53,983,682],{"style":59},[53,985,721],{"style":63},[53,987,67],{"style":59},[53,989,990,992,994,996,998,1001,1003,1005,1007],{"class":55,"style":56},[53,991,728],{"style":59},[53,993,731],{"style":63},[53,995,80],{"style":79},[53,997,83],{"style":59},[53,999,1000],{"style":86},"\"menu-positioner\"",[53,1002,741],{"style":79},[53,1004,83],{"style":59},[53,1006,746],{"style":86},[53,1008,67],{"style":59},[53,1010,1011,1013,1015,1017,1019,1022],{"class":55,"style":56},[53,1012,753],{"style":59},[53,1014,756],{"style":63},[53,1016,80],{"style":79},[53,1018,83],{"style":59},[53,1020,1021],{"style":86},"\"menu-popup\"",[53,1023,67],{"style":59},[53,1025,1026,1028,1030,1032,1034,1037,1040,1042],{"class":55,"style":56},[53,1027,776],{"style":59},[53,1029,779],{"style":63},[53,1031,80],{"style":79},[53,1033,83],{"style":59},[53,1035,1036],{"style":86},"\"menu-item\"",[53,1038,1039],{"style":59},">Add to Library\u003C\u002F",[53,1041,779],{"style":63},[53,1043,67],{"style":59},[53,1045,1046,1048,1050,1052,1054,1056,1059,1061],{"class":55,"style":56},[53,1047,776],{"style":59},[53,1049,779],{"style":63},[53,1051,80],{"style":79},[53,1053,83],{"style":59},[53,1055,1036],{"style":86},[53,1057,1058],{"style":59},">Add to Playlist\u003C\u002F",[53,1060,779],{"style":63},[53,1062,67],{"style":59},[53,1064,1065,1067,1069],{"class":55,"style":56},[53,1066,844],{"style":59},[53,1068,756],{"style":63},[53,1070,67],{"style":59},[53,1072,1073,1075,1077],{"class":55,"style":56},[53,1074,853],{"style":59},[53,1076,731],{"style":63},[53,1078,67],{"style":59},[53,1080,1081,1083,1085],{"class":55,"style":56},[53,1082,710],{"style":59},[53,1084,721],{"style":63},[53,1086,67],{"style":59},[53,1088,1089,1091,1093],{"class":55,"style":56},[53,1090,870],{"style":59},[53,1092,675],{"style":63},[53,1094,67],{"style":59},[53,1096,1097,1099,1101],{"class":55,"style":56},[53,1098,95],{"style":59},[53,1100,64],{"style":63},[53,1102,67],{"style":59},[44,1104,1106],{"language":195,"meta":1105,"class":48},"title=\"menu.css\"",[20,1107,1108,68,1115,68,1127,68,1140,68,1152,68,1177,68,1189,68,1203,68,1207,68,1209,68,1216,68,1230,68,1250,68,1260,68,1274,68,1278,68,1280,68,1287,68,1297,68,1326,68,1338,68,1342,68,1344,68,1355,68,1369,68,1380],{"class":199},[53,1109,1110,1113],{"class":55,"style":56},[53,1111,1112],{"style":79},".menu-trigger",[53,1114,207],{"style":59},[53,1116,1117,1120,1122,1125],{"class":55,"style":56},[53,1118,1119],{"style":212},"  display",[53,1121,216],{"style":59},[53,1123,1124],{"style":212},"flex",[53,1126,246],{"style":59},[53,1128,1129,1131,1133,1136,1138],{"class":55,"style":56},[53,1130,412],{"style":212},[53,1132,216],{"style":59},[53,1134,1135],{"style":212},"2",[53,1137,282],{"style":242},[53,1139,246],{"style":59},[53,1141,1142,1145,1147,1150],{"class":55,"style":56},[53,1143,1144],{"style":212},"  align-items",[53,1146,216],{"style":59},[53,1148,1149],{"style":212},"center",[53,1151,246],{"style":59},[53,1153,1154,1157,1159,1161,1164,1167,1170,1172,1175],{"class":55,"style":56},[53,1155,1156],{"style":212},"  border",[53,1158,216],{"style":59},[53,1160,279],{"style":212},[53,1162,1163],{"style":242},"px",[53,1165,1166],{"style":212}," solid",[53,1168,1169],{"style":212}," var",[53,1171,222],{"style":59},[53,1173,1174],{"style":422},"--color-gray-950",[53,1176,228],{"style":59},[53,1178,1179,1182,1184,1187],{"class":55,"style":56},[53,1180,1181],{"style":212},"  background-color",[53,1183,216],{"style":59},[53,1185,1186],{"style":212},"white",[53,1188,246],{"style":59},[53,1190,1191,1194,1196,1199,1201],{"class":55,"style":56},[53,1192,1193],{"style":212},"  padding-inline",[53,1195,216],{"style":59},[53,1197,1198],{"style":212},"0.75",[53,1200,282],{"style":242},[53,1202,246],{"style":59},[53,1204,1205],{"class":55,"style":56},[53,1206,251],{"style":59},[53,1208],{"class":55,"style":56},[53,1210,1211,1214],{"class":55,"style":56},[53,1212,1213],{"style":79},".menu-popup",[53,1215,207],{"style":59},[53,1217,1218,1220,1222,1224,1226,1228],{"class":55,"style":56},[53,1219,559],{"style":212},[53,1221,216],{"style":59},[53,1223,417],{"style":212},[53,1225,222],{"style":59},[53,1227,511],{"style":422},[53,1229,228],{"style":59},[53,1231,1232,1234,1236,1238,1240,1242,1244,1246,1248],{"class":55,"style":56},[53,1233,1156],{"style":212},[53,1235,216],{"style":59},[53,1237,279],{"style":212},[53,1239,1163],{"style":242},[53,1241,1166],{"style":212},[53,1243,1169],{"style":212},[53,1245,222],{"style":59},[53,1247,1174],{"style":422},[53,1249,228],{"style":59},[53,1251,1252,1254,1256,1258],{"class":55,"style":56},[53,1253,1181],{"style":212},[53,1255,216],{"style":59},[53,1257,1186],{"style":212},[53,1259,246],{"style":59},[53,1261,1262,1265,1267,1270,1272],{"class":55,"style":56},[53,1263,1264],{"style":212},"  padding-block",[53,1266,216],{"style":59},[53,1268,1269],{"style":212},"0.25",[53,1271,282],{"style":242},[53,1273,246],{"style":59},[53,1275,1276],{"class":55,"style":56},[53,1277,251],{"style":59},[53,1279],{"class":55,"style":56},[53,1281,1282,1285],{"class":55,"style":56},[53,1283,1284],{"style":79},".menu-item",[53,1286,207],{"style":59},[53,1288,1289,1291,1293,1295],{"class":55,"style":56},[53,1290,1119],{"style":212},[53,1292,216],{"style":59},[53,1294,1124],{"style":212},[53,1296,246],{"style":59},[53,1298,1299,1302,1304,1307,1309,1312,1314,1317,1319,1322,1324],{"class":55,"style":56},[53,1300,1301],{"style":212},"  padding",[53,1303,216],{"style":59},[53,1305,1306],{"style":212},"0.5",[53,1308,282],{"style":242},[53,1310,1311],{"style":212}," 2",[53,1313,282],{"style":242},[53,1315,1316],{"style":212}," 0.5",[53,1318,282],{"style":242},[53,1320,1321],{"style":212}," 1",[53,1323,282],{"style":242},[53,1325,246],{"style":59},[53,1327,1328,1331,1333,1336],{"class":55,"style":56},[53,1329,1330],{"style":212},"  user-select",[53,1332,216],{"style":59},[53,1334,1335],{"style":212},"none",[53,1337,246],{"style":59},[53,1339,1340],{"class":55,"style":56},[53,1341,251],{"style":59},[53,1343],{"class":55,"style":56},[53,1345,1346,1348,1350,1353],{"class":55,"style":56},[53,1347,1284],{"style":79},[53,1349,260],{"style":59},[53,1351,1352],{"style":79},"data-highlighted",[53,1354,266],{"style":59},[53,1356,1357,1359,1361,1363,1365,1367],{"class":55,"style":56},[53,1358,1181],{"style":212},[53,1360,216],{"style":59},[53,1362,417],{"style":212},[53,1364,222],{"style":59},[53,1366,1174],{"style":422},[53,1368,228],{"style":59},[53,1370,1371,1374,1376,1378],{"class":55,"style":56},[53,1372,1373],{"style":212},"  color",[53,1375,216],{"style":59},[53,1377,1186],{"style":212},[53,1379,246],{"style":59},[53,1381,1382],{"class":55,"style":56},[53,1383,251],{"style":59},[25,1385,1387,1388,1391],{"id":1386},"scoped-style-reaches-the-parts-you-write","Scoped ",[20,1389,1390],{},"\u003Cstyle>"," reaches the parts you write",[13,1393,1394,1397,1398,1400,1401,1404],{},[20,1395,1396],{},"\u003Cstyle scoped>"," stamps a data attribute onto the elements in your template and adds it to every selector. A child component's root element receives the parent's attribute too, so a ",[20,1399,31],{}," you pass to a part that renders a single element is matched by your scoped rules — portalled or not. This works because each part is written in ",[338,1402,1403],{},"your"," template; the scope follows the markup, not the DOM position.",[44,1406,1408],{"language":46,"meta":1407,"class":48},"title=\"Accordion\"",[20,1409,1410,68,1418,68,1427,68,1436,68,1445,68,1459,68,1467,68,1488,68,1496,68,1504,68,1512,68,1514,68,1525,68,1531,68,1537,68,1547,68,1551],{"class":51},[53,1411,1412,1414,1416],{"class":55,"style":56},[53,1413,60],{"style":59},[53,1415,64],{"style":63},[53,1417,67],{"style":59},[53,1419,1420,1422,1425],{"class":55,"style":56},[53,1421,73],{"style":59},[53,1423,1424],{"style":63},"Accordion.Root",[53,1426,67],{"style":59},[53,1428,1429,1431,1434],{"class":55,"style":56},[53,1430,682],{"style":59},[53,1432,1433],{"style":63},"Accordion.Item",[53,1435,67],{"style":59},[53,1437,1438,1440,1443],{"class":55,"style":56},[53,1439,728],{"style":59},[53,1441,1442],{"style":63},"Accordion.Header",[53,1444,67],{"style":59},[53,1446,1447,1449,1452,1455,1457],{"class":55,"style":56},[53,1448,753],{"style":59},[53,1450,1451],{"style":63},"Accordion.Trigger",[53,1453,1454],{"style":59},">Shipping\u003C\u002F",[53,1456,1451],{"style":63},[53,1458,67],{"style":59},[53,1460,1461,1463,1465],{"class":55,"style":56},[53,1462,853],{"style":59},[53,1464,1442],{"style":63},[53,1466,67],{"style":59},[53,1468,1469,1471,1474,1476,1478,1481,1484,1486],{"class":55,"style":56},[53,1470,728],{"style":59},[53,1472,1473],{"style":63},"Accordion.Panel",[53,1475,80],{"style":79},[53,1477,83],{"style":59},[53,1479,1480],{"style":86},"\"accordion-panel\"",[53,1482,1483],{"style":59},">Ships in 2–3 days.\u003C\u002F",[53,1485,1473],{"style":63},[53,1487,67],{"style":59},[53,1489,1490,1492,1494],{"class":55,"style":56},[53,1491,710],{"style":59},[53,1493,1433],{"style":63},[53,1495,67],{"style":59},[53,1497,1498,1500,1502],{"class":55,"style":56},[53,1499,870],{"style":59},[53,1501,1424],{"style":63},[53,1503,67],{"style":59},[53,1505,1506,1508,1510],{"class":55,"style":56},[53,1507,95],{"style":59},[53,1509,64],{"style":63},[53,1511,67],{"style":59},[53,1513],{"class":55,"style":56},[53,1515,1516,1518,1520,1523],{"class":55,"style":56},[53,1517,60],{"style":59},[53,1519,35],{"style":63},[53,1521,1522],{"style":79}," scoped",[53,1524,67],{"style":59},[53,1526,1527],{"class":55,"style":56},[53,1528,1530],{"style":1529},"color:#6A737D;--shiki-dark:#6A737D","\u002F* Matches: the Panel's element carries this component's scope attribute. *\u002F",[53,1532,1533,1535],{"class":55,"style":56},[53,1534,393],{"style":79},[53,1536,207],{"style":59},[53,1538,1539,1541,1543,1545],{"class":55,"style":56},[53,1540,400],{"style":212},[53,1542,216],{"style":59},[53,1544,405],{"style":212},[53,1546,246],{"style":59},[53,1548,1549],{"class":55,"style":56},[53,1550,251],{"style":59},[53,1552,1553,1555,1557],{"class":55,"style":56},[53,1554,95],{"style":59},[53,1556,35],{"style":63},[53,1558,67],{"style":59},[13,1560,1561,1562,309,1565,32,1568,1571,1572,32,1574,1577],{},"A few parts render a second element beside their own — a hidden input on ",[20,1563,1564],{},"Checkbox.Root",[20,1566,1567],{},"Radio.Root",[20,1569,1570],{},"Switch.Root",", focus guards on ",[20,1573,685],{},[20,1575,1576],{},"Popover.Trigger",", a backdrop on the positioners. Vue applies the scope attribute only to a component that renders exactly one element, so scoped rules don't reach those. Style them from a stylesheet instead.",1789390078378]