[{"data":1,"prerenderedAt":1697},["ShallowReactive",2],{"docs:composition":3},{"frontmatter":4,"meta":5,"nodes":6},{},{},[7,12,16,24,29,56,235,252,261,265,268,350,362,489,502,512,719,723,741,796,811,829,871,875,891,957,963,970,1050,1054,1065,1268,1277,1281,1288,1368,1376,1380,1394,1514,1549,1574,1578,1585,1667,1675],[8,9,11],"h1",{"id":10},"composition","Composition",[13,14,15],"p",{},"Slots, the as prop, and detached handles.",[13,17,18,19,23],{},"Each part keeps its behavior — ARIA, keyboard, focus, and ",[20,21,22],"code",{},"data-*"," state — and leaves the rest to you: the tag it renders, its attributes, and its content.",[25,26,28],"h2",{"id":27},"nesting-is-the-api","Nesting is the API",[13,30,31,32,35,36,39,40,43,44,47,48,51,52,55],{},"Parts talk to each other through Vue's provide\u002Finject, not props. A ",[20,33,34],{},"\u003CMenu.Root>"," provides its state; ",[20,37,38],{},"\u003CMenu.Trigger>",", ",[20,41,42],{},"\u003CMenu.Positioner>",", and ",[20,45,46],{},"\u003CMenu.Item>"," inject it back. That's why you nest them instead of wiring ",[20,49,50],{},"open","\u002F",[20,53,54],{},"@update:open"," between siblings by hand. The shared state never appears in your markup at all.",[57,58,62],"pre",{"language":59,"meta":60,"class":61},"vue","title=\"Parts read state through provide\u002Finject\"","shiki shiki-themes github-light github-dark dark:github-dark",[20,63,65,85,86,85,102,85,111,85,113,85,122,85,132,85,147,85,156,85,166,85,176,85,191,85,200,85,209,85,218,85,227],{"class":64},"language-vue",[66,67,70,74,78,82],"span",{"class":68,"style":69},"line","display: inline",[66,71,73],{"style":72},"color:#24292E;--shiki-dark:#E1E4E8","\u003C",[66,75,77],{"style":76},"color:#22863A;--shiki-dark:#85E89D","script",[66,79,81],{"style":80},"color:#6F42C1;--shiki-dark:#B392F0"," setup",[66,83,84],{"style":72},">","\n",[66,87,88,92,95,98],{"class":68,"style":69},[66,89,91],{"style":90},"color:#D73A49;--shiki-dark:#F97583","import",[66,93,94],{"style":72}," { Menu } ",[66,96,97],{"style":90},"from",[66,99,101],{"style":100},"color:#032F62;--shiki-dark:#9ECBFF"," '@shardsui\u002Fvue\u002Fmenu'",[66,103,104,107,109],{"class":68,"style":69},[66,105,106],{"style":72},"\u003C\u002F",[66,108,77],{"style":76},[66,110,84],{"style":72},[66,112],{"class":68,"style":69},[66,114,115,117,120],{"class":68,"style":69},[66,116,73],{"style":72},[66,118,119],{"style":76},"template",[66,121,84],{"style":72},[66,123,124,127,130],{"class":68,"style":69},[66,125,126],{"style":72},"  \u003C",[66,128,129],{"style":76},"Menu.Root",[66,131,84],{"style":72},[66,133,134,137,140,143,145],{"class":68,"style":69},[66,135,136],{"style":72},"    \u003C",[66,138,139],{"style":76},"Menu.Trigger",[66,141,142],{"style":72},">Song\u003C\u002F",[66,144,139],{"style":76},[66,146,84],{"style":72},[66,148,149,151,154],{"class":68,"style":69},[66,150,136],{"style":72},[66,152,153],{"style":76},"Menu.Portal",[66,155,84],{"style":72},[66,157,158,161,164],{"class":68,"style":69},[66,159,160],{"style":72},"      \u003C",[66,162,163],{"style":76},"Menu.Positioner",[66,165,84],{"style":72},[66,167,168,171,174],{"class":68,"style":69},[66,169,170],{"style":72},"        \u003C",[66,172,173],{"style":76},"Menu.Popup",[66,175,84],{"style":72},[66,177,178,181,184,187,189],{"class":68,"style":69},[66,179,180],{"style":72},"          \u003C",[66,182,183],{"style":76},"Menu.Item",[66,185,186],{"style":72},">Add to Library\u003C\u002F",[66,188,183],{"style":76},[66,190,84],{"style":72},[66,192,193,196,198],{"class":68,"style":69},[66,194,195],{"style":72},"        \u003C\u002F",[66,197,173],{"style":76},[66,199,84],{"style":72},[66,201,202,205,207],{"class":68,"style":69},[66,203,204],{"style":72},"      \u003C\u002F",[66,206,163],{"style":76},[66,208,84],{"style":72},[66,210,211,214,216],{"class":68,"style":69},[66,212,213],{"style":72},"    \u003C\u002F",[66,215,153],{"style":76},[66,217,84],{"style":72},[66,219,220,223,225],{"class":68,"style":69},[66,221,222],{"style":72},"  \u003C\u002F",[66,224,129],{"style":76},[66,226,84],{"style":72},[66,228,229,231,233],{"class":68,"style":69},[66,230,106],{"style":72},[66,232,119],{"style":76},[66,234,84],{"style":72},[13,236,237,240,241,244,245,248,249,251],{},[20,238,239],{},"Portal"," moves the popup out to ",[20,242,243],{},"\u003Cbody>",", and nesting still holds — the part is written inside its Root, and provide\u002Finject follows the markup, not the DOM. Use the Portal part rather than Vue's ",[20,246,247],{},"\u003CTeleport>",": the library marks its own portal element and reads that marker to decide what counts as inside the popup for outside-press and focus, so a ",[20,250,247],{}," it doesn't know about breaks those checks.",[13,253,254,255,260],{},"The only rule this imposes: a part must be a descendant of its Root. Depth and intervening markup don't matter, so wrap parts in your own layout elements as you like. When the nesting genuinely can't hold (a trigger that lives in a header, a popup that lives in a route), reach for a ",[256,257,259],"a",{"href":258},"#detaching-parts-with-a-handle","handle"," instead.",[25,262,264],{"id":263},"content-is-a-slot","Content is a slot",[13,266,267],{},"Whatever you put between a part's tags is its default slot, rendered wherever the part decides its content belongs:",[57,269,271],{"language":59,"meta":270,"class":61},"title=\"Default slot\"",[20,272,273,85,281,85,299,85,308,85,326,85,334,85,342],{"class":64},[66,274,275,277,279],{"class":68,"style":69},[66,276,73],{"style":72},[66,278,119],{"style":76},[66,280,84],{"style":72},[66,282,283,285,288,291,294,297],{"class":68,"style":69},[66,284,126],{"style":72},[66,286,287],{"style":76},"Switch.Root",[66,289,290],{"style":80}," v-model:checked",[66,292,293],{"style":72},"=",[66,295,296],{"style":100},"\"checked\"",[66,298,84],{"style":72},[66,300,301,303,306],{"class":68,"style":69},[66,302,136],{"style":72},[66,304,305],{"style":76},"Switch.Thumb",[66,307,84],{"style":72},[66,309,310,312,315,318,320,323],{"class":68,"style":69},[66,311,160],{"style":72},[66,313,314],{"style":76},"Icon",[66,316,317],{"style":80}," name",[66,319,293],{"style":72},[66,321,322],{"style":100},"\"check\"",[66,324,325],{"style":72}," \u002F>",[66,327,328,330,332],{"class":68,"style":69},[66,329,213],{"style":72},[66,331,305],{"style":76},[66,333,84],{"style":72},[66,335,336,338,340],{"class":68,"style":69},[66,337,222],{"style":72},[66,339,287],{"style":76},[66,341,84],{"style":72},[66,343,344,346,348],{"class":68,"style":69},[66,345,106],{"style":72},[66,347,119],{"style":76},[66,349,84],{"style":72},[13,351,352,353,357,358,361],{},"Most parts hand their own state ",[354,355,356],"em",{},"back"," through that slot. Add ",[20,359,360],{},"v-slot"," to receive it and branch on it in markup:",[57,363,365],{"language":59,"meta":364,"class":61},"title=\"Stateful content\"",[20,366,367,85,377,85,389,85,397,85,399,85,407,85,415,85,431,85,453,85,465,85,473,85,481],{"class":64},[66,368,369,371,373,375],{"class":68,"style":69},[66,370,73],{"style":72},[66,372,77],{"style":76},[66,374,81],{"style":80},[66,376,84],{"style":72},[66,378,379,381,384,386],{"class":68,"style":69},[66,380,91],{"style":90},[66,382,383],{"style":72}," { Switch } ",[66,385,97],{"style":90},[66,387,388],{"style":100}," '@shardsui\u002Fvue\u002Fswitch'",[66,390,391,393,395],{"class":68,"style":69},[66,392,106],{"style":72},[66,394,77],{"style":76},[66,396,84],{"style":72},[66,398],{"class":68,"style":69},[66,400,401,403,405],{"class":68,"style":69},[66,402,73],{"style":72},[66,404,119],{"style":76},[66,406,84],{"style":72},[66,408,409,411,413],{"class":68,"style":69},[66,410,126],{"style":72},[66,412,287],{"style":76},[66,414,84],{"style":72},[66,416,417,419,421,424,426,429],{"class":68,"style":69},[66,418,136],{"style":72},[66,420,305],{"style":76},[66,422,423],{"style":80}," v-slot",[66,425,293],{"style":72},[66,427,428],{"style":100},"\"{ checked }\"",[66,430,84],{"style":72},[66,432,433,435,438,441,443,446,449,451],{"class":68,"style":69},[66,434,160],{"style":72},[66,436,437],{"style":76},"CheckedIcon",[66,439,440],{"style":90}," v-if",[66,442,293],{"style":72},[66,444,445],{"style":100},"\"",[66,447,448],{"style":72},"checked",[66,450,445],{"style":100},[66,452,325],{"style":72},[66,454,455,457,460,463],{"class":68,"style":69},[66,456,160],{"style":72},[66,458,459],{"style":76},"UncheckedIcon",[66,461,462],{"style":90}," v-else",[66,464,325],{"style":72},[66,466,467,469,471],{"class":68,"style":69},[66,468,213],{"style":72},[66,470,305],{"style":76},[66,472,84],{"style":72},[66,474,475,477,479],{"class":68,"style":69},[66,476,222],{"style":72},[66,478,287],{"style":76},[66,480,84],{"style":72},[66,482,483,485,487],{"class":68,"style":69},[66,484,106],{"style":72},[66,486,119],{"style":76},[66,488,84],{"style":72},[13,490,491,492,495,496,498,499,501],{},"The scoped form is otherwise identical to markup between the tags. It lets you name the payload. What a part passes is listed in its ",[20,493,494],{},"default"," row in the API reference. The same values are also emitted as ",[20,497,22],{}," attributes, so reach for the slot when you need different markup; for styling alone, ",[20,500,22],{}," in CSS is simpler.",[13,503,504,507,508,511],{},[20,505,506],{},"\u003CDialog.Root>"," passes something other than its own state: the ",[20,509,510],{},"payload"," of whichever trigger opened it.",[57,513,515],{"language":59,"meta":514,"class":61},"title=\"A slot that receives the trigger's payload\"",[20,516,517,85,535,85,547,85,549,85,583,85,591,85,593,85,601,85,631,85,633,85,655,85,664,85,673,85,687,85,695,85,703,85,711],{"class":64},[66,518,519,521,523,525,528,530,533],{"class":68,"style":69},[66,520,73],{"style":72},[66,522,77],{"style":76},[66,524,81],{"style":80},[66,526,527],{"style":80}," lang",[66,529,293],{"style":72},[66,531,532],{"style":100},"\"ts\"",[66,534,84],{"style":72},[66,536,537,539,542,544],{"class":68,"style":69},[66,538,91],{"style":90},[66,540,541],{"style":72}," { Dialog } ",[66,543,97],{"style":90},[66,545,546],{"style":100}," '@shardsui\u002Fvue\u002Fdialog'",[66,548],{"class":68,"style":69},[66,550,551,554,558,561,564,567,570,574,577,580],{"class":68,"style":69},[66,552,553],{"style":90},"const",[66,555,557],{"style":556},"color:#005CC5;--shiki-dark:#79B8FF"," confirm",[66,559,560],{"style":90}," =",[66,562,563],{"style":72}," Dialog.",[66,565,566],{"style":80},"createHandle",[66,568,569],{"style":72},"\u003C{ ",[66,571,573],{"style":572},"color:#E36209;--shiki-dark:#FFAB70","name",[66,575,576],{"style":90},":",[66,578,579],{"style":556}," string",[66,581,582],{"style":72}," }>()",[66,584,585,587,589],{"class":68,"style":69},[66,586,106],{"style":72},[66,588,77],{"style":76},[66,590,84],{"style":72},[66,592],{"class":68,"style":69},[66,594,595,597,599],{"class":68,"style":69},[66,596,73],{"style":72},[66,598,119],{"style":76},[66,600,84],{"style":72},[66,602,603,605,608,611,613,616,619,621,624,627,629],{"class":68,"style":69},[66,604,126],{"style":72},[66,606,607],{"style":76},"Dialog.Trigger",[66,609,610],{"style":80}," :handle",[66,612,293],{"style":72},[66,614,615],{"style":100},"\"confirm\"",[66,617,618],{"style":80}," :payload",[66,620,293],{"style":72},[66,622,623],{"style":100},"\"{ name: 'billing' }\"",[66,625,626],{"style":72},">Delete\u003C\u002F",[66,628,607],{"style":76},[66,630,84],{"style":72},[66,632],{"class":68,"style":69},[66,634,635,637,640,642,644,647,649,651,653],{"class":68,"style":69},[66,636,126],{"style":72},[66,638,639],{"style":76},"Dialog.Root",[66,641,423],{"style":80},[66,643,293],{"style":72},[66,645,646],{"style":100},"\"{ payload }\"",[66,648,610],{"style":80},[66,650,293],{"style":72},[66,652,615],{"style":100},[66,654,84],{"style":72},[66,656,657,659,662],{"class":68,"style":69},[66,658,136],{"style":72},[66,660,661],{"style":76},"Dialog.Portal",[66,663,84],{"style":72},[66,665,666,668,671],{"class":68,"style":69},[66,667,160],{"style":72},[66,669,670],{"style":76},"Dialog.Popup",[66,672,84],{"style":72},[66,674,675,677,680,683,685],{"class":68,"style":69},[66,676,170],{"style":72},[66,678,679],{"style":76},"Dialog.Title",[66,681,682],{"style":72},">Delete {{ payload?.name }}?\u003C\u002F",[66,684,679],{"style":76},[66,686,84],{"style":72},[66,688,689,691,693],{"class":68,"style":69},[66,690,204],{"style":72},[66,692,670],{"style":76},[66,694,84],{"style":72},[66,696,697,699,701],{"class":68,"style":69},[66,698,213],{"style":72},[66,700,661],{"style":76},[66,702,84],{"style":72},[66,704,705,707,709],{"class":68,"style":69},[66,706,222],{"style":72},[66,708,639],{"style":76},[66,710,84],{"style":72},[66,712,713,715,717],{"class":68,"style":69},[66,714,106],{"style":72},[66,716,119],{"style":76},[66,718,84],{"style":72},[25,720,722],{"id":721},"changing-the-rendered-element","Changing the rendered element",[13,724,725,726,729,730,732,733,736,737,740],{},"Every part picks the element that's correct for its role, and the ",[20,727,728],{},"as"," prop swaps it. ",[20,731,46],{}," renders a ",[20,734,735],{},"\u003Cdiv>"," by default; render it as an ",[20,738,739],{},"\u003Ca>"," and it behaves like a real link while keeping its menu-item semantics:",[57,742,744],{"language":59,"meta":743,"class":61},"title=\"Item as a link\"",[20,745,746,85,754,85,788],{"class":64},[66,747,748,750,752],{"class":68,"style":69},[66,749,73],{"style":72},[66,751,119],{"style":76},[66,753,84],{"style":72},[66,755,756,758,760,763,767,770,774,777,779,782,784,786],{"class":68,"style":69},[66,757,126],{"style":72},[66,759,183],{"style":76},[66,761,762],{"style":80}," ",[66,764,728],{"style":80,"class":765},[766],"highlighted-word",[66,768,293],{"style":72,"class":769},[766],[66,771,773],{"style":100,"class":772},[766],"\"a\"",[66,775,776],{"style":80}," href",[66,778,293],{"style":72},[66,780,781],{"style":100},"\"https:\u002F\u002Fexample.com\"",[66,783,186],{"style":72},[66,785,183],{"style":76},[66,787,84],{"style":72},[66,789,790,792,794],{"class":68,"style":69},[66,791,106],{"style":72},[66,793,119],{"style":76},[66,795,84],{"style":72},[13,797,798,800,801,39,804,39,807,810],{},[20,799,728],{}," takes an HTML tag name — ",[20,802,803],{},"'a'",[20,805,806],{},"'button'",[20,808,809],{},"'span'",", and so on — not a component. Reach for it only when a case like the anchor above calls for a different tag.",[13,812,813,814,817,818,821,822,825,826,828],{},"A plain ",[20,815,816],{},"\u003Ca href>"," navigates with a full page load. To route on the client, keep the anchor and hand the click to your router — ",[20,819,820],{},"@click.prevent=\"router.push('\u002Fpricing')\""," — so the element stays a real link for the browser and assistive tech. ",[20,823,824],{},"\u003CNavigationMenu.Link>"," renders an ",[20,827,739],{}," to begin with:",[57,830,832],{"language":59,"meta":831,"class":61},"title=\"Navigation menu link\"",[20,833,834,85,842,85,863],{"class":64},[66,835,836,838,840],{"class":68,"style":69},[66,837,73],{"style":72},[66,839,119],{"style":76},[66,841,84],{"style":72},[66,843,844,846,849,851,853,856,859,861],{"class":68,"style":69},[66,845,126],{"style":72},[66,847,848],{"style":76},"NavigationMenu.Link",[66,850,776],{"style":80},[66,852,293],{"style":72},[66,854,855],{"style":100},"\"\u002Fpricing\"",[66,857,858],{"style":72},">Pricing\u003C\u002F",[66,860,848],{"style":76},[66,862,84],{"style":72},[66,864,865,867,869],{"class":68,"style":69},[66,866,106],{"style":72},[66,868,119],{"style":76},[66,870,84],{"style":72},[25,872,874],{"id":873},"merging-your-own-attributes","Merging your own attributes",[13,876,877,878,881,882,884,885,887,888,890],{},"Any attribute that isn't one of a part's own props falls through to the element it renders. In the link above, ",[20,879,880],{},"href"," isn't a ",[20,883,183],{}," prop, so it lands on the ",[20,886,739],{},". The same path carries event listeners, ARIA, ",[20,889,22],{},", and styling hooks:",[57,892,894],{"language":59,"meta":893,"class":61},"title=\"Forwarded attributes\"",[20,895,896,85,904,85,936,85,941,85,949],{"class":64},[66,897,898,900,902],{"class":68,"style":69},[66,899,73],{"style":72},[66,901,119],{"style":76},[66,903,84],{"style":72},[66,905,906,908,910,913,915,918,921,923,926,929,931,934],{"class":68,"style":69},[66,907,126],{"style":72},[66,909,183],{"style":76},[66,911,912],{"style":80}," data-section",[66,914,293],{"style":72},[66,916,917],{"style":100},"\"billing\"",[66,919,920],{"style":80}," aria-label",[66,922,293],{"style":72},[66,924,925],{"style":100},"\"Open billing\"",[66,927,928],{"style":80}," @click",[66,930,293],{"style":72},[66,932,933],{"style":100},"\"console.log('selected')\"",[66,935,84],{"style":72},[66,937,938],{"class":68,"style":69},[66,939,940],{"style":72},"    Billing",[66,942,943,945,947],{"class":68,"style":69},[66,944,222],{"style":72},[66,946,183],{"style":76},[66,948,84],{"style":72},[66,950,951,953,955],{"class":68,"style":69},[66,952,106],{"style":72},[66,954,119],{"style":76},[66,956,84],{"style":72},[13,958,959,960,962],{},"A listener doesn't replace the part's: for every event a part handles, yours runs first and the part's runs after, so its ARIA, keyboard handling, and ",[20,961,22],{}," state all survive.",[13,964,965,966,969],{},"When you need the part to stand down for one event, call ",[20,967,968],{},"preventShardsUIHandler()"," on it, an escape hatch for cases no prop covers yet:",[57,971,973],{"language":59,"meta":972,"class":61},"title=\"Suppressing the part's handler\"",[20,974,975,85,983,85,989,85,998,85,1003,85,1015,85,1020,85,1025,85,1030,85,1034,85,1042],{"class":64},[66,976,977,979,981],{"class":68,"style":69},[66,978,73],{"style":72},[66,980,119],{"style":76},[66,982,84],{"style":72},[66,984,985,987],{"class":68,"style":69},[66,986,126],{"style":72},[66,988,183],{"style":76},[66,990,991,994,996],{"class":68,"style":69},[66,992,993],{"style":80},"    @click",[66,995,293],{"style":72},[66,997,445],{"style":100},[66,999,1000],{"class":68,"style":69},[66,1001,1002],{"style":100},"      (event) => {",[66,1004,1005,1008,1012],{"class":68,"style":69},[66,1006,1007],{"style":100},"        if (!ready) event.",[66,1009,1011],{"style":100,"class":1010},[766],"preventShardsUIHandler",[66,1013,1014],{"style":100},"()",[66,1016,1017],{"class":68,"style":69},[66,1018,1019],{"style":100},"      }",[66,1021,1022],{"class":68,"style":69},[66,1023,1024],{"style":100},"    \"",[66,1026,1027],{"class":68,"style":69},[66,1028,1029],{"style":72},"  >",[66,1031,1032],{"class":68,"style":69},[66,1033,940],{"style":72},[66,1035,1036,1038,1040],{"class":68,"style":69},[66,1037,222],{"style":72},[66,1039,183],{"style":76},[66,1041,84],{"style":72},[66,1043,1044,1046,1048],{"class":68,"style":69},[66,1045,106],{"style":72},[66,1047,119],{"style":76},[66,1049,84],{"style":72},[25,1051,1053],{"id":1052},"getting-the-dom-node","Getting the DOM node",[13,1055,1056,1057,1060,1061,1064],{},"A part renders one element, so a template ",[20,1058,1059],{},"ref"," on the part resolves to a component instance whose ",[20,1062,1063],{},"$el"," is that element. It's populated after the element mounts, so read it from a watcher or an event handler, never during setup:",[57,1066,1068],{"language":59,"meta":1067,"class":61},"title=\"Reading the element\"",[20,1069,1070,85,1086,85,1098,85,1110,85,1112,85,1133,85,1135,85,1149,85,1173,85,1193,85,1198,85,1206,85,1208,85,1216,85,1225,85,1247,85,1252,85,1260],{"class":64},[66,1071,1072,1074,1076,1078,1080,1082,1084],{"class":68,"style":69},[66,1073,73],{"style":72},[66,1075,77],{"style":76},[66,1077,81],{"style":80},[66,1079,527],{"style":80},[66,1081,293],{"style":72},[66,1083,532],{"style":100},[66,1085,84],{"style":72},[66,1087,1088,1090,1093,1095],{"class":68,"style":69},[66,1089,91],{"style":90},[66,1091,1092],{"style":72}," { onMounted, useTemplateRef } ",[66,1094,97],{"style":90},[66,1096,1097],{"style":100}," 'vue'",[66,1099,1100,1102,1105,1107],{"class":68,"style":69},[66,1101,91],{"style":90},[66,1103,1104],{"style":72}," { Popover } ",[66,1106,97],{"style":90},[66,1108,1109],{"style":100}," '@shardsui\u002Fvue\u002Fpopover'",[66,1111],{"class":68,"style":69},[66,1113,1114,1116,1119,1121,1124,1127,1130],{"class":68,"style":69},[66,1115,553],{"style":90},[66,1117,1118],{"style":556}," trigger",[66,1120,560],{"style":90},[66,1122,1123],{"style":80}," useTemplateRef",[66,1125,1126],{"style":72},"(",[66,1128,1129],{"style":100},"'trigger'",[66,1131,1132],{"style":72},")",[66,1134],{"class":68,"style":69},[66,1136,1137,1140,1143,1146],{"class":68,"style":69},[66,1138,1139],{"style":80},"onMounted",[66,1141,1142],{"style":72},"(() ",[66,1144,1145],{"style":90},"=>",[66,1147,1148],{"style":72}," {",[66,1150,1151,1154,1157,1159,1162,1164,1167,1170],{"class":68,"style":69},[66,1152,1153],{"style":90},"  const",[66,1155,1156],{"style":556}," element",[66,1158,560],{"style":90},[66,1160,1161],{"style":72}," trigger.value?.$el ",[66,1163,728],{"style":90},[66,1165,1166],{"style":80}," HTMLElement",[66,1168,1169],{"style":90}," |",[66,1171,1172],{"style":556}," undefined",[66,1174,1175,1178,1181,1184,1187,1190],{"class":68,"style":69},[66,1176,1177],{"style":90},"  if",[66,1179,1180],{"style":72}," (element) console.",[66,1182,1183],{"style":80},"log",[66,1185,1186],{"style":72},"(element.",[66,1188,1189],{"style":80},"getBoundingClientRect",[66,1191,1192],{"style":72},"())",[66,1194,1195],{"class":68,"style":69},[66,1196,1197],{"style":72},"})",[66,1199,1200,1202,1204],{"class":68,"style":69},[66,1201,106],{"style":72},[66,1203,77],{"style":76},[66,1205,84],{"style":72},[66,1207],{"class":68,"style":69},[66,1209,1210,1212,1214],{"class":68,"style":69},[66,1211,73],{"style":72},[66,1213,119],{"style":76},[66,1215,84],{"style":72},[66,1217,1218,1220,1223],{"class":68,"style":69},[66,1219,126],{"style":72},[66,1221,1222],{"style":76},"Popover.Root",[66,1224,84],{"style":72},[66,1226,1227,1229,1232,1235,1237,1240,1243,1245],{"class":68,"style":69},[66,1228,136],{"style":72},[66,1230,1231],{"style":76},"Popover.Trigger",[66,1233,1234],{"style":80}," ref",[66,1236,293],{"style":72},[66,1238,1239],{"style":100},"\"trigger\"",[66,1241,1242],{"style":72},">Open\u003C\u002F",[66,1244,1231],{"style":76},[66,1246,84],{"style":72},[66,1248,1249],{"class":68,"style":69},[66,1250,1251],{"style":72},"    ...",[66,1253,1254,1256,1258],{"class":68,"style":69},[66,1255,222],{"style":72},[66,1257,1222],{"style":76},[66,1259,84],{"style":72},[66,1261,1262,1264,1266],{"class":68,"style":69},[66,1263,106],{"style":72},[66,1265,119],{"style":76},[66,1267,84],{"style":72},[13,1269,1270,1271,1273,1274,1276],{},"Every part that renders its own element exposes it as ",[20,1272,1063],{},". Pure providers like ",[20,1275,639],{}," don't.",[25,1278,1280],{"id":1279},"wrapping-a-part-in-your-own-component","Wrapping a part in your own component",[13,1282,1283,1284,1287],{},"There's no render prop: to build a styled component out of a part, render the part and let your attributes fall through. A single-root component forwards everything it doesn't declare, and a caller's ",[20,1285,1286],{},"class"," merges with yours rather than replacing it:",[57,1289,1291],{"language":59,"meta":1290,"class":61},"title=\"MenuLink.vue\"",[20,1292,1293,85,1309,85,1319,85,1327,85,1329,85,1337,85,1360],{"class":64},[66,1294,1295,1297,1299,1301,1303,1305,1307],{"class":68,"style":69},[66,1296,73],{"style":72},[66,1298,77],{"style":76},[66,1300,81],{"style":80},[66,1302,527],{"style":80},[66,1304,293],{"style":72},[66,1306,532],{"style":100},[66,1308,84],{"style":72},[66,1310,1311,1313,1315,1317],{"class":68,"style":69},[66,1312,91],{"style":90},[66,1314,94],{"style":72},[66,1316,97],{"style":90},[66,1318,101],{"style":100},[66,1320,1321,1323,1325],{"class":68,"style":69},[66,1322,106],{"style":72},[66,1324,77],{"style":76},[66,1326,84],{"style":72},[66,1328],{"class":68,"style":69},[66,1330,1331,1333,1335],{"class":68,"style":69},[66,1332,73],{"style":72},[66,1334,119],{"style":76},[66,1336,84],{"style":72},[66,1338,1339,1341,1343,1346,1348,1350,1353,1355,1358],{"class":68,"style":69},[66,1340,126],{"style":72},[66,1342,183],{"style":76},[66,1344,1345],{"style":80}," as",[66,1347,293],{"style":72},[66,1349,773],{"style":100},[66,1351,1352],{"style":80}," class",[66,1354,293],{"style":72},[66,1356,1357],{"style":100},"\"menu-link\"",[66,1359,325],{"style":72},[66,1361,1362,1364,1366],{"class":68,"style":69},[66,1363,106],{"style":72},[66,1365,119],{"style":76},[66,1367,84],{"style":72},[13,1369,1370,1371,1375],{},"To accept exactly the part's props with types, declare them from the part's own prop type. See ",[256,1372,1374],{"href":1373},"\u002Ftypescript","TypeScript"," for typing a wrapper.",[25,1377,1379],{"id":1378},"detaching-parts-with-a-handle","Detaching parts with a handle",[13,1381,1382,1383,1386,1387,1389,1390,1393],{},"When a trigger and the thing it opens can't sit together in the markup — a toolbar button and a dialog defined in a different route, say — a ",[1384,1385,259],"strong",{}," connects them without any shared ",[20,1388,50],{}," state threaded through props. Create one with the component's ",[20,1391,1392],{},"createHandle()",", pass it to both ends, and they find each other:",[57,1395,1397],{"language":59,"meta":1396,"class":61},"title=\"Detached trigger\"",[20,1398,1399,85,1405,85,1415,85,1425,85,1427,85,1442,85,1450,85,1452,85,1460,85,1480,85,1482,85,1487,85,1506],{"class":64},[66,1400,1401],{"class":68,"style":69},[66,1402,1404],{"style":1403},"color:#6A737D;--shiki-dark:#6A737D","\u003C!-- [!code word::handle=\"settings\"] -->",[66,1406,1407,1409,1411,1413],{"class":68,"style":69},[66,1408,73],{"style":72},[66,1410,77],{"style":76},[66,1412,81],{"style":80},[66,1414,84],{"style":72},[66,1416,1417,1419,1421,1423],{"class":68,"style":69},[66,1418,91],{"style":90},[66,1420,541],{"style":72},[66,1422,97],{"style":90},[66,1424,546],{"style":100},[66,1426],{"class":68,"style":69},[66,1428,1429,1431,1434,1436,1438,1440],{"class":68,"style":69},[66,1430,553],{"style":90},[66,1432,1433],{"style":556}," settings",[66,1435,560],{"style":90},[66,1437,563],{"style":72},[66,1439,566],{"style":80},[66,1441,1014],{"style":72},[66,1443,1444,1446,1448],{"class":68,"style":69},[66,1445,106],{"style":72},[66,1447,77],{"style":76},[66,1449,84],{"style":72},[66,1451],{"class":68,"style":69},[66,1453,1454,1456,1458],{"class":68,"style":69},[66,1455,73],{"style":72},[66,1457,119],{"style":76},[66,1459,84],{"style":72},[66,1461,1462,1464,1466,1468,1470,1473,1476,1478],{"class":68,"style":69},[66,1463,126],{"style":72},[66,1465,607],{"style":76},[66,1467,610],{"style":80},[66,1469,293],{"style":72},[66,1471,1472],{"style":100},"\"settings\"",[66,1474,1475],{"style":72},">Open settings\u003C\u002F",[66,1477,607],{"style":76},[66,1479,84],{"style":72},[66,1481],{"class":68,"style":69},[66,1483,1484],{"class":68,"style":69},[66,1485,1486],{"style":1403},"  \u003C!-- ...anywhere else in the tree... -->",[66,1488,1489,1491,1493,1495,1497,1499,1502,1504],{"class":68,"style":69},[66,1490,126],{"style":72},[66,1492,639],{"style":76},[66,1494,610],{"style":80},[66,1496,293],{"style":72},[66,1498,1472],{"style":100},[66,1500,1501],{"style":72},">...\u003C\u002F",[66,1503,639],{"style":76},[66,1505,84],{"style":72},[66,1507,1508,1510,1512],{"class":68,"style":69},[66,1509,106],{"style":72},[66,1511,119],{"style":76},[66,1513,84],{"style":72},[13,1515,1516,1517,39,1520,1523,1524,1527,1528,1530,1531,1534,1535,1538,1539,1527,1542,1545,1546,1548],{},"A handle also drives the component from your own code, no trigger required: ",[20,1518,1519],{},"settings.open(triggerId)",[20,1521,1522],{},"settings.close()",", and a readonly ",[20,1525,1526],{},"settings.isOpen",". ",[20,1529,50],{}," takes the ",[20,1532,1533],{},"id"," of a registered detached trigger so the popup knows what it was opened from. Popover, Menu, Tooltip, and Preview Card throw if no trigger with that id is registered, while Dialog, Alert Dialog, and Drawer also accept ",[20,1536,1537],{},"null"," for \"no trigger\" and add ",[20,1540,1541],{},"openWithPayload(payload)",[20,1543,1544],{},"Dialog.createHandle\u003CPayload>()"," types the payload that flows through the trigger and into the root's default slot. See ",[256,1547,1374],{"href":1373}," for the details.",[13,1550,1551,1552,39,1555,39,1558,39,1561,39,1564,39,1567,43,1570,1573],{},"Handles are available on the overlay components where a detached trigger makes sense: ",[20,1553,1554],{},"Dialog",[20,1556,1557],{},"AlertDialog",[20,1559,1560],{},"Drawer",[20,1562,1563],{},"Popover",[20,1565,1566],{},"Menu",[20,1568,1569],{},"Tooltip",[20,1571,1572],{},"PreviewCard",".",[25,1575,1577],{"id":1576},"providers","Providers",[13,1579,1580,1581,1584],{},"A provider renders no element of its own — it only provides context to everything nested inside it. ",[20,1582,1583],{},"DirectionProvider"," is the one that applies to every component: wrap a subtree, or the whole app, and the components inside navigate and lay out for right-to-left reading.",[57,1586,1588],{"language":59,"meta":1587,"class":61},"title=\"Right-to-left subtree\"",[20,1589,1590,85,1600,85,1612,85,1620,85,1622,85,1630,85,1646,85,1651,85,1659],{"class":64},[66,1591,1592,1594,1596,1598],{"class":68,"style":69},[66,1593,73],{"style":72},[66,1595,77],{"style":76},[66,1597,81],{"style":80},[66,1599,84],{"style":72},[66,1601,1602,1604,1607,1609],{"class":68,"style":69},[66,1603,91],{"style":90},[66,1605,1606],{"style":72}," { DirectionProvider } ",[66,1608,97],{"style":90},[66,1610,1611],{"style":100}," '@shardsui\u002Fvue\u002Fdirection-provider'",[66,1613,1614,1616,1618],{"class":68,"style":69},[66,1615,106],{"style":72},[66,1617,77],{"style":76},[66,1619,84],{"style":72},[66,1621],{"class":68,"style":69},[66,1623,1624,1626,1628],{"class":68,"style":69},[66,1625,73],{"style":72},[66,1627,119],{"style":76},[66,1629,84],{"style":72},[66,1631,1632,1634,1636,1639,1641,1644],{"class":68,"style":69},[66,1633,126],{"style":72},[66,1635,1583],{"style":76},[66,1637,1638],{"style":80}," direction",[66,1640,293],{"style":72},[66,1642,1643],{"style":100},"\"rtl\"",[66,1645,84],{"style":72},[66,1647,1648],{"class":68,"style":69},[66,1649,1650],{"style":1403},"    \u003C!-- components here read RTL -->",[66,1652,1653,1655,1657],{"class":68,"style":69},[66,1654,222],{"style":72},[66,1656,1583],{"style":76},[66,1658,84],{"style":72},[66,1660,1661,1663,1665],{"class":68,"style":69},[66,1662,106],{"style":72},[66,1664,119],{"style":76},[66,1666,84],{"style":72},[13,1668,1669,1670,1674],{},"It changes component behavior only, never the DOM's own text direction. See ",[256,1671,1673],{"href":1672},"\u002Fstate#reading-direction","Reading direction"," for what that leaves you to do.",[13,1676,1677,1678,1681,1682,1685,1686,1689,1690,1693,1694,1573],{},"Three components ship a provider of their own: ",[20,1679,1680],{},"\u003CTooltip.Provider>"," shares one delay across the tooltips inside it, so the next one opens instantly; ",[20,1683,1684],{},"\u003CToast.Provider>"," holds the toast queue; and ",[20,1687,1688],{},"\u003CDrawer.Provider>"," tracks which drawers are open, driving ",[20,1691,1692],{},"\u003CDrawer.Indent>"," and ",[20,1695,1696],{},"\u003CDrawer.IndentBackground>",1789390078500]