[{"data":1,"prerenderedAt":1178},["ShallowReactive",2],{"docs:state":3,"demo:direction-provider\u002Fhero":1177},{"frontmatter":4,"meta":5,"nodes":6},{},{},[7,12,16,25,30,33,142,153,160,178,181,366,381,385,398,401,529,543,559,563,570,764,777,781,784,867,878,882,898,902,905,965,996,1013,1064,1068,1071,1174],[8,9,11],"h1",{"id":10},"state","State",[13,14,15],"p",{},"Controlled state, direction, disabled, and read-only.",[13,17,18,19,24],{},"Every component manages its own state by default. Props let you take over when you need to: hold the state yourself, set the reading direction, or take parts out of play. Appearance lives on the ",[20,21,23],"a",{"href":22},"\u002Fstyling","Styling"," page.",[26,27,29],"h2",{"id":28},"uncontrolled-by-default","Uncontrolled by default",[13,31,32],{},"A trigger toggles a dialog, a click expands an accordion item. Nothing to wire up on your side.",[34,35,39],"pre",{"language":36,"meta":37,"class":38},"vue","title=\"Uncontrolled dialog\"","shiki shiki-themes github-light github-dark dark:github-dark",[40,41,43,63,64,63,80,63,89,63,91,63,100,63,110,63,125,63,134],"code",{"class":42},"language-vue",[44,45,48,52,56,60],"span",{"class":46,"style":47},"line","display: inline",[44,49,51],{"style":50},"color:#24292E;--shiki-dark:#E1E4E8","\u003C",[44,53,55],{"style":54},"color:#22863A;--shiki-dark:#85E89D","script",[44,57,59],{"style":58},"color:#6F42C1;--shiki-dark:#B392F0"," setup",[44,61,62],{"style":50},">","\n",[44,65,66,70,73,76],{"class":46,"style":47},[44,67,69],{"style":68},"color:#D73A49;--shiki-dark:#F97583","import",[44,71,72],{"style":50}," { Dialog } ",[44,74,75],{"style":68},"from",[44,77,79],{"style":78},"color:#032F62;--shiki-dark:#9ECBFF"," '@shardsui\u002Fvue\u002Fdialog'",[44,81,82,85,87],{"class":46,"style":47},[44,83,84],{"style":50},"\u003C\u002F",[44,86,55],{"style":54},[44,88,62],{"style":50},[44,90],{"class":46,"style":47},[44,92,93,95,98],{"class":46,"style":47},[44,94,51],{"style":50},[44,96,97],{"style":54},"template",[44,99,62],{"style":50},[44,101,102,105,108],{"class":46,"style":47},[44,103,104],{"style":50},"  \u003C",[44,106,107],{"style":54},"Dialog.Root",[44,109,62],{"style":50},[44,111,112,115,118,121,123],{"class":46,"style":47},[44,113,114],{"style":50},"    \u003C",[44,116,117],{"style":54},"Dialog.Trigger",[44,119,120],{"style":50},">Open\u003C\u002F",[44,122,117],{"style":54},[44,124,62],{"style":50},[44,126,127,130,132],{"class":46,"style":47},[44,128,129],{"style":50},"  \u003C\u002F",[44,131,107],{"style":54},[44,133,62],{"style":50},[44,135,136,138,140],{"class":46,"style":47},[44,137,84],{"style":50},[44,139,97],{"style":54},[44,141,62],{"style":50},[13,143,144,145,148,149,152],{},"The starting state is the initial value of the state prop. There's no separate ",[40,146,147],{},"defaultValue",". Render ",[40,150,151],{},"\u003CAccordion.Root :value=\"['overview']\">"," and that panel opens first; the component takes ownership from there. Pass a literal (or a ref you never write) so the component stays in charge; to drive it yourself, use one of the two patterns below.",[26,154,156,157],{"id":155},"taking-control-with-v-model","Taking control with ",[40,158,159],{},"v-model",[13,161,162,163,166,167,166,170,173,174,177],{},"State props — ",[40,164,165],{},"open",", ",[40,168,169],{},"value",[40,171,172],{},"checked"," — are models, so ",[40,175,176],{},"v-model:open"," keeps your ref and the component in sync both ways: write it and the component reflects the change, or the component writes it and your ref updates.",[13,179,180],{},"Open a dialog after a timeout, with no trigger at all:",[34,182,184],{"language":36,"meta":183,"class":38},"title=\"Controlled dialog\"",[40,185,186,63,196,63,208,63,218,63,220,63,244,63,246,63,254,63,268,63,299,63,304,63,319,63,327,63,329,63,337,63,358],{"class":42},[44,187,188,190,192,194],{"class":46,"style":47},[44,189,51],{"style":50},[44,191,55],{"style":54},[44,193,59],{"style":58},[44,195,62],{"style":50},[44,197,198,200,203,205],{"class":46,"style":47},[44,199,69],{"style":68},[44,201,202],{"style":50}," { onMounted, onUnmounted, shallowRef } ",[44,204,75],{"style":68},[44,206,207],{"style":78}," 'vue'",[44,209,210,212,214,216],{"class":46,"style":47},[44,211,69],{"style":68},[44,213,72],{"style":50},[44,215,75],{"style":68},[44,217,79],{"style":78},[44,219],{"class":46,"style":47},[44,221,222,225,229,232,235,238,241],{"class":46,"style":47},[44,223,224],{"style":68},"const",[44,226,228],{"style":227},"color:#005CC5;--shiki-dark:#79B8FF"," open",[44,230,231],{"style":68}," =",[44,233,234],{"style":58}," shallowRef",[44,236,237],{"style":50},"(",[44,239,240],{"style":227},"false",[44,242,243],{"style":50},")",[44,245],{"class":46,"style":47},[44,247,248,251],{"class":46,"style":47},[44,249,250],{"style":68},"let",[44,252,253],{"style":50}," id",[44,255,256,259,262,265],{"class":46,"style":47},[44,257,258],{"style":58},"onMounted",[44,260,261],{"style":50},"(() ",[44,263,264],{"style":68},"=>",[44,266,267],{"style":50}," {",[44,269,270,273,276,279,281,283,286,288,291,294,297],{"class":46,"style":47},[44,271,272],{"style":50},"  id ",[44,274,275],{"style":68},"=",[44,277,278],{"style":58}," setTimeout",[44,280,261],{"style":50},[44,282,264],{"style":68},[44,284,285],{"style":50}," (open.value ",[44,287,275],{"style":68},[44,289,290],{"style":227}," true",[44,292,293],{"style":50},"), ",[44,295,296],{"style":227},"1000",[44,298,243],{"style":50},[44,300,301],{"class":46,"style":47},[44,302,303],{"style":50},"})",[44,305,306,309,311,313,316],{"class":46,"style":47},[44,307,308],{"style":58},"onUnmounted",[44,310,261],{"style":50},[44,312,264],{"style":68},[44,314,315],{"style":58}," clearTimeout",[44,317,318],{"style":50},"(id))",[44,320,321,323,325],{"class":46,"style":47},[44,322,84],{"style":50},[44,324,55],{"style":54},[44,326,62],{"style":50},[44,328],{"class":46,"style":47},[44,330,331,333,335],{"class":46,"style":47},[44,332,51],{"style":50},[44,334,97],{"style":54},[44,336,62],{"style":50},[44,338,339,341,343,346,348,351,354,356],{"class":46,"style":47},[44,340,104],{"style":50},[44,342,107],{"style":54},[44,344,345],{"style":58}," v-model:open",[44,347,275],{"style":50},[44,349,350],{"style":78},"\"open\"",[44,352,353],{"style":50},">...\u003C\u002F",[44,355,107],{"style":54},[44,357,62],{"style":50},[44,359,360,362,364],{"class":46,"style":47},[44,361,84],{"style":50},[44,363,97],{"style":54},[44,365,62],{"style":50},[13,367,368,369,373,374,377,378,380],{},"Binding also lets you ",[370,371,372],"em",{},"read"," the component's state anywhere in the parent: gate a save button on ",[40,375,376],{},"value.length",", mirror ",[40,379,165],{}," into a heading.",[26,382,384],{"id":383},"reacting-to-changes","Reacting to changes",[13,386,387,388,166,391,166,394,397],{},"Alongside the state prop, each component emits a change event: ",[40,389,390],{},"update:open",[40,392,393],{},"update:value",[40,395,396],{},"update:checked",". These are the component's own events, not native DOM ones. One listener catches every interaction that can move the state, whether that's a pointer, a keypress, an outside click or an escape. Writing to your own bound ref doesn't emit it; the event reports what the component decided.",[13,399,400],{},"Use it to run a side effect when the state moves:",[34,402,404],{"language":36,"meta":403,"class":38},"title=\"update:value\"",[40,405,406,63,424,63,435,63,447,63,449,63,468,63,476,63,478,63,486,63,492,63,521],{"class":42},[44,407,408,410,412,414,417,419,422],{"class":46,"style":47},[44,409,51],{"style":50},[44,411,55],{"style":54},[44,413,59],{"style":58},[44,415,416],{"style":58}," lang",[44,418,275],{"style":50},[44,420,421],{"style":78},"\"ts\"",[44,423,62],{"style":50},[44,425,426,428,431,433],{"class":46,"style":47},[44,427,69],{"style":68},[44,429,430],{"style":50}," { shallowRef } ",[44,432,75],{"style":68},[44,434,207],{"style":78},[44,436,437,439,442,444],{"class":46,"style":47},[44,438,69],{"style":68},[44,440,441],{"style":50}," { Accordion } ",[44,443,75],{"style":68},[44,445,446],{"style":78}," '@shardsui\u002Fvue\u002Faccordion'",[44,448],{"class":46,"style":47},[44,450,451,453,456,458,460,462,465],{"class":46,"style":47},[44,452,224],{"style":68},[44,454,455],{"style":227}," value",[44,457,231],{"style":68},[44,459,234],{"style":58},[44,461,51],{"style":50},[44,463,464],{"style":227},"string",[44,466,467],{"style":50},"[]>([])",[44,469,470,472,474],{"class":46,"style":47},[44,471,84],{"style":50},[44,473,55],{"style":54},[44,475,62],{"style":50},[44,477],{"class":46,"style":47},[44,479,480,482,484],{"class":46,"style":47},[44,481,51],{"style":50},[44,483,97],{"style":54},[44,485,62],{"style":50},[44,487,488],{"class":46,"style":47},[44,489,491],{"style":490},"color:#6A737D;--shiki-dark:#6A737D","  \u003C!-- [!code word:@update:value] -->",[44,493,494,496,499,502,504,507,510,512,515,517,519],{"class":46,"style":47},[44,495,104],{"style":50},[44,497,498],{"style":54},"Accordion.Root",[44,500,501],{"style":58}," :value",[44,503,275],{"style":50},[44,505,506],{"style":78},"\"value\"",[44,508,509],{"style":58}," @update:value",[44,511,275],{"style":50},[44,513,514],{"style":78},"\"(next) => (value = next)\"",[44,516,353],{"style":50},[44,518,498],{"style":54},[44,520,62],{"style":50},[44,522,523,525,527],{"class":46,"style":47},[44,524,84],{"style":50},[44,526,97],{"style":54},[44,528,62],{"style":50},[13,530,531,532,535,536,539,540,542],{},"Pairing the state prop with its event — ",[40,533,534],{},":open"," plus ",[40,537,538],{},"@update:open"," — is one-way control, an alternative to ",[40,541,159],{}," when you'd rather own the write. Nothing changes until your listener updates the ref.",[13,544,545,546,549,550,553,554,558],{},"Components with a popup add an ",[40,547,548],{},"openChangeComplete"," event — bound as ",[40,551,552],{},"@open-change-complete"," — which fires once the open or close ",[20,555,557],{"href":556},"\u002Fanimation","animation"," has finished.",[26,560,562],{"id":561},"vetoing-a-change","Vetoing a change",[13,564,565,566,569],{},"Change events carry one argument. The component reports the new state and asks you to commit it. To ",[370,567,568],{},"prevent"," a change (say, keep a dialog open while a confirmation prompt is shown), use one-way control: pass the prop and listen to its event, and simply don't write the ref. The prop keeps its old value, so the component stays put.",[34,571,573],{"language":36,"meta":572,"class":38},"title=\"Keep a dialog open through a close attempt\"",[40,574,575,63,585,63,595,63,605,63,607,63,624,63,646,63,648,63,665,63,696,63,706,63,711,63,719,63,721,63,729,63,756],{"class":42},[44,576,577,579,581,583],{"class":46,"style":47},[44,578,51],{"style":50},[44,580,55],{"style":54},[44,582,59],{"style":58},[44,584,62],{"style":50},[44,586,587,589,591,593],{"class":46,"style":47},[44,588,69],{"style":68},[44,590,430],{"style":50},[44,592,75],{"style":68},[44,594,207],{"style":78},[44,596,597,599,601,603],{"class":46,"style":47},[44,598,69],{"style":68},[44,600,72],{"style":50},[44,602,75],{"style":68},[44,604,79],{"style":78},[44,606],{"class":46,"style":47},[44,608,609,611,613,615,617,619,622],{"class":46,"style":47},[44,610,224],{"style":68},[44,612,228],{"style":227},[44,614,231],{"style":68},[44,616,234],{"style":58},[44,618,237],{"style":50},[44,620,621],{"style":227},"true",[44,623,243],{"style":50},[44,625,626,628,631,636,638,640,642,644],{"class":46,"style":47},[44,627,224],{"style":68},[44,629,630],{"style":227}," ",[44,632,635],{"style":227,"class":633},[634],"highlighted-word","hasUnsavedChanges",[44,637,231],{"style":68},[44,639,234],{"style":58},[44,641,237],{"style":50},[44,643,621],{"style":227},[44,645,243],{"style":50},[44,647],{"class":46,"style":47},[44,649,650,653,656,658,662],{"class":46,"style":47},[44,651,652],{"style":68},"function",[44,654,655],{"style":58}," onOpenChange",[44,657,237],{"style":50},[44,659,661],{"style":660},"color:#E36209;--shiki-dark:#FFAB70","next",[44,663,664],{"style":50},") {",[44,666,667,670,673,676,679,682,684,687,690,693],{"class":46,"style":47},[44,668,669],{"style":68},"  if",[44,671,672],{"style":50}," (",[44,674,675],{"style":68},"!",[44,677,678],{"style":50},"next ",[44,680,681],{"style":68},"&&",[44,683,630],{"style":50},[44,685,635],{"style":50,"class":686},[634],[44,688,689],{"style":50},".value) ",[44,691,692],{"style":68},"return",[44,694,695],{"style":490}," \u002F\u002F veto: don't commit, dialog stays open",[44,697,698,701,703],{"class":46,"style":47},[44,699,700],{"style":50},"  open.value ",[44,702,275],{"style":68},[44,704,705],{"style":50}," next",[44,707,708],{"class":46,"style":47},[44,709,710],{"style":50},"}",[44,712,713,715,717],{"class":46,"style":47},[44,714,84],{"style":50},[44,716,55],{"style":54},[44,718,62],{"style":50},[44,720],{"class":46,"style":47},[44,722,723,725,727],{"class":46,"style":47},[44,724,51],{"style":50},[44,726,97],{"style":54},[44,728,62],{"style":50},[44,730,731,733,735,738,740,742,745,747,750,752,754],{"class":46,"style":47},[44,732,104],{"style":50},[44,734,107],{"style":54},[44,736,737],{"style":58}," :open",[44,739,275],{"style":50},[44,741,350],{"style":78},[44,743,744],{"style":58}," @update:open",[44,746,275],{"style":50},[44,748,749],{"style":78},"\"onOpenChange\"",[44,751,353],{"style":50},[44,753,107],{"style":54},[44,755,62],{"style":50},[44,757,758,760,762],{"class":46,"style":47},[44,759,84],{"style":50},[44,761,97],{"style":54},[44,763,62],{"style":50},[13,765,766,767,166,769,166,771,773,774,776],{},"The same pattern vetoes any model prop — ",[40,768,165],{},[40,770,169],{},[40,772,172],{}," — on any component, since the listener is where you decide whether to accept the new value. With ",[40,775,159],{}," the write is automatic, so switch to the explicit pair wherever you need a say.",[26,778,780],{"id":779},"reading-direction","Reading direction",[13,782,783],{},"Every component that navigates with arrow keys or slides content sideways assumes left-to-right. Wrap a subtree — or the whole app — in the Direction Provider to flip that to right-to-left:",[34,785,787],{"language":36,"meta":786,"class":38},"title=\"RTL subtree\"",[40,788,789,63,799,63,811,63,819,63,821,63,829,63,846,63,851,63,859],{"class":42},[44,790,791,793,795,797],{"class":46,"style":47},[44,792,51],{"style":50},[44,794,55],{"style":54},[44,796,59],{"style":58},[44,798,62],{"style":50},[44,800,801,803,806,808],{"class":46,"style":47},[44,802,69],{"style":68},[44,804,805],{"style":50}," { DirectionProvider } ",[44,807,75],{"style":68},[44,809,810],{"style":78}," '@shardsui\u002Fvue\u002Fdirection-provider'",[44,812,813,815,817],{"class":46,"style":47},[44,814,84],{"style":50},[44,816,55],{"style":54},[44,818,62],{"style":50},[44,820],{"class":46,"style":47},[44,822,823,825,827],{"class":46,"style":47},[44,824,51],{"style":50},[44,826,97],{"style":54},[44,828,62],{"style":50},[44,830,831,833,836,839,841,844],{"class":46,"style":47},[44,832,104],{"style":50},[44,834,835],{"style":54},"DirectionProvider",[44,837,838],{"style":58}," direction",[44,840,275],{"style":50},[44,842,843],{"style":78},"\"rtl\"",[44,845,62],{"style":50},[44,847,848],{"class":46,"style":47},[44,849,850],{"style":490},"    \u003C!-- Your app or a group of components -->",[44,852,853,855,857],{"class":46,"style":47},[44,854,129],{"style":50},[44,856,835],{"style":54},[44,858,62],{"style":50},[44,860,861,863,865],{"class":46,"style":47},[44,862,84],{"style":50},[44,864,97],{"style":54},[44,866,62],{"style":50},[13,868,869,870,873,874,877],{},"It changes component behavior only: which arrow key moves focus, which side a positioner flips to, which way a slider or scrollbar tracks. It never touches the DOM's own text direction, so you still flip the actual text yourself with ",[40,871,872],{},"dir=\"rtl\""," on an element or ",[40,875,876],{},"direction: rtl"," in CSS.",[879,880],"demo",{"name":881},"direction-provider\u002Fhero",[13,883,884,885,888,889,892,893,897],{},"Popups render through a portal, outside your app root and beyond the reach of a surrounding ",[40,886,887],{},"dir"," attribute. To pick up the active direction there, read it with ",[40,890,891],{},"getDirection()"," and apply it where the portal lands. See ",[20,894,896],{"href":895},"\u002Fdirection-provider","Direction Provider"," for the full API.",[26,899,901],{"id":900},"disabling-and-read-only","Disabling and read-only",[13,903,904],{},"Two ways to take a control out of play, with different intent.",[13,906,907,913,914,917,918,921,922,926,927,166,931,917,935,939,940,944,945,166,949,917,953,957,958,960,961,964],{},[908,909,910],"strong",{},[40,911,912],{},"disabled"," removes it from the interaction entirely: no pointer, no focus, out of the tab order, and in a form its value isn't submitted. It's on every interactive component, and on individual parts too: disable a single ",[40,915,916],{},"Accordion.Item"," or ",[40,919,920],{},"Menu.Item"," while the rest stay live. Where losing focus would be disorienting — an item inside a ",[20,923,925],{"href":924},"\u002Ftoolbar","Toolbar","'s single tab stop, a ",[20,928,930],{"href":929},"\u002Fmenu","Menu",[20,932,934],{"href":933},"\u002Fselect","Select",[20,936,938],{"href":937},"\u002Fcombobox","Combobox"," item, a ",[20,941,943],{"href":942},"\u002Ftabs","Tabs"," tab, an ",[20,946,948],{"href":947},"\u002Faccordion","Accordion",[20,950,952],{"href":951},"\u002Fcollapsible","Collapsible",[20,954,956],{"href":955},"\u002Fnavigation-menu","Navigation Menu"," trigger — the part swaps the native ",[40,959,912],{}," for ",[40,962,963],{},"aria-disabled"," so it stays reachable.",[13,966,967,972,973,166,977,166,981,985,986,166,988,990,991,995],{},[908,968,969],{},[40,970,971],{},"readOnly"," keeps the control focusable and its value visible and submittable, but blocks edits. Use it for a value the user should see in context but can't change yet. It's on the editable controls: ",[20,974,976],{"href":975},"\u002Fcheckbox","Checkbox",[20,978,980],{"href":979},"\u002Fswitch","Switch",[20,982,984],{"href":983},"\u002Fradio","Radio"," and Radio Group, ",[20,987,934],{"href":933},[20,989,938],{"href":937},", and ",[20,992,994],{"href":993},"\u002Fautocomplete","Autocomplete",".",[13,997,998,999,166,1002,1005,1006,1008,1009,1012],{},"Both reflect as data attributes on the parts — ",[40,1000,1001],{},"[data-disabled]",[40,1003,1004],{},"[data-readonly]"," — so you can style each state, and both set the right accessibility semantics (a native ",[40,1007,912],{},", an ",[40,1010,1011],{},"aria-readonly",") so assistive tech announces it.",[34,1014,1017],{"language":1015,"meta":1016,"class":38},"css","title=\"switch.css\"",[40,1018,1020,63,1034,63,1048,63,1060],{"class":1019},"language-css",[44,1021,1022,1025,1028,1031],{"class":46,"style":47},[44,1023,1024],{"style":58},".switch",[44,1026,1027],{"style":50},"[",[44,1029,1030],{"style":58},"data-disabled",[44,1032,1033],{"style":50},"] {",[44,1035,1036,1039,1042,1045],{"class":46,"style":47},[44,1037,1038],{"style":227},"  opacity",[44,1040,1041],{"style":50},": ",[44,1043,1044],{"style":227},"0.5",[44,1046,1047],{"style":50},";",[44,1049,1050,1053,1055,1058],{"class":46,"style":47},[44,1051,1052],{"style":227},"  cursor",[44,1054,1041],{"style":50},[44,1056,1057],{"style":227},"not-allowed",[44,1059,1047],{"style":50},[44,1061,1062],{"class":46,"style":47},[44,1063,710],{"style":50},[26,1065,1067],{"id":1066},"per-component-behavior-props","Per-component behavior props",[13,1069,1070],{},"Beyond the shared props, each component exposes props for the behavior only it has:",[1072,1073,1074,1100,1118,1130],"ul",{},[1075,1076,1077,1082,1083,166,1085,166,1089,166,1091,166,1093,166,1097,1099],"li",{},[908,1078,1079],{},[40,1080,1081],{},"loopFocus"," on list components (",[20,1084,930],{"href":929},[20,1086,1088],{"href":1087},"\u002Fmenubar","Menubar",[20,1090,943],{"href":942},[20,1092,925],{"href":924},[20,1094,1096],{"href":1095},"\u002Ftoggle-group","Toggle Group",[20,1098,938],{"href":937},"): whether arrow-key navigation wraps from the last item back to the first. On by default.",[1075,1101,1102,1041,1107,917,1110,1113,1114,1117],{},[908,1103,1104],{},[40,1105,1106],{},"orientation",[40,1108,1109],{},"'horizontal'",[40,1111,1112],{},"'vertical'","; decides which arrow keys move focus, and reflects as ",[40,1115,1116],{},"data-orientation"," on the parts whose layout depends on it.",[1075,1119,1120,1125,1126,1129],{},[908,1121,1122],{},[40,1123,1124],{},"modal"," on overlays: whether opening uses a ",[908,1127,1128],{},"focus trap"," and blocks the page behind it.",[1075,1131,1132,1137,1138,917,1140,1144,1145,1150,1151,1156,1157,1161,1162,1166,1167,990,1170,1173],{},[908,1133,1134],{},[40,1135,1136],{},"openOnHover"," on a ",[20,1139,930],{"href":929},[20,1141,1143],{"href":1142},"\u002Fpopover","Popover"," trigger: open on pointer hover instead of click (submenu triggers hover-open by default). ",[908,1146,1147],{},[40,1148,1149],{},"delay"," and ",[908,1152,1153],{},[40,1154,1155],{},"closeDelay"," on the same trigger set how long the pointer must rest before it opens and how long it lingers after the pointer leaves. A ",[20,1158,1160],{"href":1159},"\u002Ftooltip","Tooltip"," is hover-driven by nature: its ",[908,1163,1164],{},[40,1165,1149],{}," sits on ",[40,1168,1169],{},"Tooltip.Trigger",[40,1171,1172],{},"Tooltip.Provider"," supplies a shared one for a group.",[13,1175,1176],{},"The complete set for each component lives in its API reference.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { DirectionProvider } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Fdirection-provider'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Slider } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Fslider'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> dir\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"rtl\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">DirectionProvider\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"rtl\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> :value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"40\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"w-56\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"flex items-center justify-between\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">          <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"text-sm font-medium text-gray-900 select-none\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>السطوع<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">          <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"text-sm text-gray-600 select-none\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Control\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"flex w-full touch-none items-center py-3 select-none\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">          <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Track\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">            class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"h-1 w-full rounded-sm bg-gray-50 inset-ring inset-ring-gray-200 select-none\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">          >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">            <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Indicator\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"rounded-sm bg-gray-700 select-none\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">            <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Thumb\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">              class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"size-4 rounded-full bg-gray-50 outline-1 outline-gray-300 select-none has-focus-visible:outline-2 has-focus-visible:outline-gray-950\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">            \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">          <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Control\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">DirectionProvider\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",1789390078563]