[{"data":1,"prerenderedAt":2696},["ShallowReactive",2],{"docs:typescript":3},{"frontmatter":4,"meta":5,"nodes":6},{},{},[7,12,16,24,29,36,174,196,246,250,259,370,381,518,522,561,568,795,802,1008,1027,1034,1150,1174,1437,1462,1595,1599,1602,1671,1682,1685,1724,1728,1735,1945,2010,2036,2081,2088,2115,2285,2291,2394,2398,2401,2503,2510,2615,2625,2629,2674],[8,9,11],"h1",{"id":10},"typescript","TypeScript",[13,14,15],"p",{},"Inferring props, refs, and value types.",[13,17,18,19,23],{},"ShardsUI is written in TypeScript, so types flow through ",[20,21,22],"code",{},"v-model",", event payloads, and scoped slots with no annotations. The cases below are the ones where you do name a type.",[25,26,28],"h2",{"id":27},"inferring-a-components-props","Inferring a component's props",[13,30,31,32,35],{},"Each part declares its props inline, so there's no props interface to import. When you build a wrapper that should accept exactly what the underlying part accepts, index the part's instance type for its ",[20,33,34],{},"$props",":",[37,38,42],"pre",{"language":39,"meta":40,"class":41},"vue","title=\"Wrapping a part\"","shiki shiki-themes github-light github-dark dark:github-dark",[20,43,45,75,76,75,91,75,93,75,127,75,136,75,138,75,147,75,166],{"class":44},"language-vue",[46,47,50,54,58,62,65,68,72],"span",{"class":48,"style":49},"line","display: inline",[46,51,53],{"style":52},"color:#24292E;--shiki-dark:#E1E4E8","\u003C",[46,55,57],{"style":56},"color:#22863A;--shiki-dark:#85E89D","script",[46,59,61],{"style":60},"color:#6F42C1;--shiki-dark:#B392F0"," setup",[46,63,64],{"style":60}," lang",[46,66,67],{"style":52},"=",[46,69,71],{"style":70},"color:#032F62;--shiki-dark:#9ECBFF","\"ts\"",[46,73,74],{"style":52},">","\n",[46,77,78,82,85,88],{"class":48,"style":49},[46,79,81],{"style":80},"color:#D73A49;--shiki-dark:#F97583","import",[46,83,84],{"style":52}," { Tooltip } ",[46,86,87],{"style":80},"from",[46,89,90],{"style":70}," '@shardsui\u002Fvue\u002Ftooltip'",[46,92],{"class":48,"style":49},[46,94,95,98,102,105,108,110,113,115,118,121,124],{"class":48,"style":49},[46,96,97],{"style":80},"const",[46,99,101],{"style":100},"color:#005CC5;--shiki-dark:#79B8FF"," props",[46,103,104],{"style":80}," =",[46,106,107],{"style":60}," defineProps",[46,109,53],{"style":52},[46,111,112],{"style":60},"InstanceType",[46,114,53],{"style":52},[46,116,117],{"style":80},"typeof",[46,119,120],{"style":52}," Tooltip.Root>[",[46,122,123],{"style":70},"'$props'",[46,125,126],{"style":52},"]>()",[46,128,129,132,134],{"class":48,"style":49},[46,130,131],{"style":52},"\u003C\u002F",[46,133,57],{"style":56},[46,135,74],{"style":52},[46,137],{"class":48,"style":49},[46,139,140,142,145],{"class":48,"style":49},[46,141,53],{"style":52},[46,143,144],{"style":56},"template",[46,146,74],{"style":52},[46,148,149,152,155,158,160,163],{"class":48,"style":49},[46,150,151],{"style":52},"  \u003C",[46,153,154],{"style":56},"Tooltip.Root",[46,156,157],{"style":60}," v-bind",[46,159,67],{"style":52},[46,161,162],{"style":70},"\"props\"",[46,164,165],{"style":52}," \u002F>",[46,167,168,170,172],{"class":48,"style":49},[46,169,131],{"style":52},[46,171,144],{"style":56},[46,173,74],{"style":52},[13,175,176,179,180,183,184,187,188,191,192,195],{},[20,177,178],{},"InstanceType\u003Ctypeof X>['$props']"," resolves to the full prop surface of ",[20,181,182],{},"X",": ",[20,185,186],{},"as",", the model props, and every part-specific prop. ",[20,189,190],{},"class"," and ",[20,193,194],{},"style"," aren't props — they fall through as attributes and need no declaration. Index into it to reuse or narrow one of them:",[37,197,200],{"language":198,"meta":199,"class":41},"ts","title=\"Reusing one prop's type\"",[20,201,203,75,213,75,215],{"class":202},"language-ts",[46,204,205,207,209,211],{"class":48,"style":49},[46,206,81],{"style":80},[46,208,84],{"style":52},[46,210,87],{"style":80},[46,212,90],{"style":70},[46,214],{"class":48,"style":49},[46,216,217,220,223,225,228,230,232,235,237,240,243],{"class":48,"style":49},[46,218,219],{"style":80},"type",[46,221,222],{"style":60}," TooltipDelay",[46,224,104],{"style":80},[46,226,227],{"style":60}," InstanceType",[46,229,53],{"style":52},[46,231,117],{"style":80},[46,233,234],{"style":52}," Tooltip.Trigger>[",[46,236,123],{"style":70},[46,238,239],{"style":52},"][",[46,241,242],{"style":70},"'delay'",[46,244,245],{"style":52},"]",[25,247,249],{"id":248},"typing-controlled-state","Typing controlled state",[13,251,252,253,255,256,258],{},"A stateful prop does double duty: pass a value without ",[20,254,22],{}," and the part owns the state; add ",[20,257,22],{}," and you own it:",[37,260,262],{"language":39,"meta":261,"class":41},"title=\"Controlled value\"",[20,263,264,75,280,75,292,75,304,75,306,75,327,75,335,75,337,75,345,75,362],{"class":44},[46,265,266,268,270,272,274,276,278],{"class":48,"style":49},[46,267,53],{"style":52},[46,269,57],{"style":56},[46,271,61],{"style":60},[46,273,64],{"style":60},[46,275,67],{"style":52},[46,277,71],{"style":70},[46,279,74],{"style":52},[46,281,282,284,287,289],{"class":48,"style":49},[46,283,81],{"style":80},[46,285,286],{"style":52}," { shallowRef } ",[46,288,87],{"style":80},[46,290,291],{"style":70}," 'vue'",[46,293,294,296,299,301],{"class":48,"style":49},[46,295,81],{"style":80},[46,297,298],{"style":52}," { Switch } ",[46,300,87],{"style":80},[46,302,303],{"style":70}," '@shardsui\u002Fvue\u002Fswitch'",[46,305],{"class":48,"style":49},[46,307,308,310,313,315,318,321,324],{"class":48,"style":49},[46,309,97],{"style":80},[46,311,312],{"style":100}," checked",[46,314,104],{"style":80},[46,316,317],{"style":60}," shallowRef",[46,319,320],{"style":52},"(",[46,322,323],{"style":100},"false",[46,325,326],{"style":52},")",[46,328,329,331,333],{"class":48,"style":49},[46,330,131],{"style":52},[46,332,57],{"style":56},[46,334,74],{"style":52},[46,336],{"class":48,"style":49},[46,338,339,341,343],{"class":48,"style":49},[46,340,53],{"style":52},[46,342,144],{"style":56},[46,344,74],{"style":52},[46,346,347,349,352,355,357,360],{"class":48,"style":49},[46,348,151],{"style":52},[46,350,351],{"style":56},"Switch.Root",[46,353,354],{"style":60}," v-model:checked",[46,356,67],{"style":52},[46,358,359],{"style":70},"\"checked\"",[46,361,165],{"style":52},[46,363,364,366,368],{"class":48,"style":49},[46,365,131],{"style":52},[46,367,144],{"style":56},[46,369,74],{"style":52},[13,371,372,373,376,377,380],{},"The ref's inferred type is usually enough. ",[20,374,375],{},"shallowRef(false)"," is already ",[20,378,379],{},"Ref\u003Cboolean>",". Annotate it when the value is a union, so an invalid value is caught at the binding site instead of at runtime:",[37,382,384],{"language":39,"meta":383,"class":41},"title=\"Controlled select value\"",[20,385,386,75,402,75,412,75,424,75,426,75,460,75,468,75,470,75,478,75,495,75,501,75,510],{"class":44},[46,387,388,390,392,394,396,398,400],{"class":48,"style":49},[46,389,53],{"style":52},[46,391,57],{"style":56},[46,393,61],{"style":60},[46,395,64],{"style":60},[46,397,67],{"style":52},[46,399,71],{"style":70},[46,401,74],{"style":52},[46,403,404,406,408,410],{"class":48,"style":49},[46,405,81],{"style":80},[46,407,286],{"style":52},[46,409,87],{"style":80},[46,411,291],{"style":70},[46,413,414,416,419,421],{"class":48,"style":49},[46,415,81],{"style":80},[46,417,418],{"style":52}," { Select } ",[46,420,87],{"style":80},[46,422,423],{"style":70}," '@shardsui\u002Fvue\u002Fselect'",[46,425],{"class":48,"style":49},[46,427,428,430,433,435,437,439,442,445,448,450,453,456,458],{"class":48,"style":49},[46,429,97],{"style":80},[46,431,432],{"style":100}," value",[46,434,104],{"style":80},[46,436,317],{"style":60},[46,438,53],{"style":52},[46,440,441],{"style":70},"'sans'",[46,443,444],{"style":80}," |",[46,446,447],{"style":70}," 'serif'",[46,449,444],{"style":80},[46,451,452],{"style":70}," 'mono'",[46,454,455],{"style":52},">(",[46,457,441],{"style":70},[46,459,326],{"style":52},[46,461,462,464,466],{"class":48,"style":49},[46,463,131],{"style":52},[46,465,57],{"style":56},[46,467,74],{"style":52},[46,469],{"class":48,"style":49},[46,471,472,474,476],{"class":48,"style":49},[46,473,53],{"style":52},[46,475,144],{"style":56},[46,477,74],{"style":52},[46,479,480,482,485,488,490,493],{"class":48,"style":49},[46,481,151],{"style":52},[46,483,484],{"style":56},"Select.Root",[46,486,487],{"style":60}," v-model:value",[46,489,67],{"style":52},[46,491,492],{"style":70},"\"value\"",[46,494,74],{"style":52},[46,496,497],{"class":48,"style":49},[46,498,500],{"style":499},"color:#6A737D;--shiki-dark:#6A737D","    \u003C!-- … -->",[46,502,503,506,508],{"class":48,"style":49},[46,504,505],{"style":52},"  \u003C\u002F",[46,507,484],{"style":56},[46,509,74],{"style":52},[46,511,512,514,516],{"class":48,"style":49},[46,513,131],{"style":52},[46,515,144],{"style":56},[46,517,74],{"style":52},[25,519,521],{"id":520},"value-types-for-generic-parts","Value types for generic parts",[13,523,524,191,526,529,530,533,534,537,538,541,542,545,546,549,550,553,554,557,558,560],{},[20,525,484],{},[20,527,528],{},"Combobox.Root"," are generic over the item they hold and over whether selection is single or multiple, but ",[20,531,532],{},"items"," never infers it: Combobox types it ",[20,535,536],{},"readonly NoInfer\u003CValue>[]"," and Select's entries are ",[20,539,540],{},"unknown",". Annotate the bound ",[20,543,544],{},"value"," instead. The item type flows from there into ",[20,547,548],{},"update:value",", ",[20,551,552],{},"itemToStringLabel",", the item slots, and Combobox's ",[20,555,556],{},"itemHighlighted"," event, with no casts. Without an annotated ",[20,559,544],{},", the type has to come from a typed wrapper (see below).",[13,562,563,564,567],{},"In single mode (the default) the value is the item, or ",[20,565,566],{},"null"," when nothing is chosen:",[37,569,571],{"language":39,"meta":570,"class":41},"title=\"Single-select value\"",[20,572,573,75,589,75,599,75,611,75,613,75,625,75,636,75,645,75,650,75,652,75,671,75,688,75,703,75,707,75,709,75,735,75,743,75,745,75,753,75,775,75,779,75,787],{"class":44},[46,574,575,577,579,581,583,585,587],{"class":48,"style":49},[46,576,53],{"style":52},[46,578,57],{"style":56},[46,580,61],{"style":60},[46,582,64],{"style":60},[46,584,67],{"style":52},[46,586,71],{"style":70},[46,588,74],{"style":52},[46,590,591,593,595,597],{"class":48,"style":49},[46,592,81],{"style":80},[46,594,286],{"style":52},[46,596,87],{"style":80},[46,598,291],{"style":70},[46,600,601,603,606,608],{"class":48,"style":49},[46,602,81],{"style":80},[46,604,605],{"style":52}," { Combobox } ",[46,607,87],{"style":80},[46,609,610],{"style":70}," '@shardsui\u002Fvue\u002Fcombobox'",[46,612],{"class":48,"style":49},[46,614,615,617,620,622],{"class":48,"style":49},[46,616,219],{"style":80},[46,618,619],{"style":60}," Fruit",[46,621,104],{"style":80},[46,623,624],{"style":52}," {",[46,626,627,631,633],{"class":48,"style":49},[46,628,630],{"style":629},"color:#E36209;--shiki-dark:#FFAB70","  id",[46,632,35],{"style":80},[46,634,635],{"style":100}," string",[46,637,638,641,643],{"class":48,"style":49},[46,639,640],{"style":629},"  label",[46,642,35],{"style":80},[46,644,635],{"style":100},[46,646,647],{"class":48,"style":49},[46,648,649],{"style":52},"}",[46,651],{"class":48,"style":49},[46,653,654,656,659,661,663,666,668],{"class":48,"style":49},[46,655,97],{"style":80},[46,657,658],{"style":100}," fruits",[46,660,35],{"style":80},[46,662,619],{"style":60},[46,664,665],{"style":52},"[] ",[46,667,67],{"style":80},[46,669,670],{"style":52}," [",[46,672,673,676,679,682,685],{"class":48,"style":49},[46,674,675],{"style":52},"  { id: ",[46,677,678],{"style":70},"'apple'",[46,680,681],{"style":52},", label: ",[46,683,684],{"style":70},"'Apple'",[46,686,687],{"style":52}," },",[46,689,690,692,695,697,700],{"class":48,"style":49},[46,691,675],{"style":52},[46,693,694],{"style":70},"'cherry'",[46,696,681],{"style":52},[46,698,699],{"style":70},"'Cherry'",[46,701,702],{"style":52}," }",[46,704,705],{"class":48,"style":49},[46,706,245],{"style":52},[46,708],{"class":48,"style":49},[46,710,711,713,715,717,719,721,724,726,729,731,733],{"class":48,"style":49},[46,712,97],{"style":80},[46,714,432],{"style":100},[46,716,104],{"style":80},[46,718,317],{"style":60},[46,720,53],{"style":52},[46,722,723],{"style":60},"Fruit",[46,725,444],{"style":80},[46,727,728],{"style":100}," null",[46,730,455],{"style":52},[46,732,566],{"style":100},[46,734,326],{"style":52},[46,736,737,739,741],{"class":48,"style":49},[46,738,131],{"style":52},[46,740,57],{"style":56},[46,742,74],{"style":52},[46,744],{"class":48,"style":49},[46,746,747,749,751],{"class":48,"style":49},[46,748,53],{"style":52},[46,750,144],{"style":56},[46,752,74],{"style":52},[46,754,755,757,759,762,764,767,769,771,773],{"class":48,"style":49},[46,756,151],{"style":52},[46,758,528],{"style":56},[46,760,761],{"style":60}," :items",[46,763,67],{"style":52},[46,765,766],{"style":70},"\"fruits\"",[46,768,487],{"style":60},[46,770,67],{"style":52},[46,772,492],{"style":70},[46,774,74],{"style":52},[46,776,777],{"class":48,"style":49},[46,778,500],{"style":499},[46,780,781,783,785],{"class":48,"style":49},[46,782,505],{"style":52},[46,784,528],{"style":56},[46,786,74],{"style":52},[46,788,789,791,793],{"class":48,"style":49},[46,790,131],{"style":52},[46,792,144],{"style":56},[46,794,74],{"style":52},[13,796,797,798,801],{},"Add ",[20,799,800],{},"multiple"," and the value type flips to an array of items:",[37,803,805],{"language":39,"meta":804,"class":41},"title=\"Multi-select value\"",[20,806,807,75,823,75,833,75,843,75,845,75,855,75,863,75,871,75,875,75,877,75,893,75,905,75,917,75,921,75,923,75,947,75,955,75,957,75,965,75,988,75,992,75,1000],{"class":44},[46,808,809,811,813,815,817,819,821],{"class":48,"style":49},[46,810,53],{"style":52},[46,812,57],{"style":56},[46,814,61],{"style":60},[46,816,64],{"style":60},[46,818,67],{"style":52},[46,820,71],{"style":70},[46,822,74],{"style":52},[46,824,825,827,829,831],{"class":48,"style":49},[46,826,81],{"style":80},[46,828,286],{"style":52},[46,830,87],{"style":80},[46,832,291],{"style":70},[46,834,835,837,839,841],{"class":48,"style":49},[46,836,81],{"style":80},[46,838,605],{"style":52},[46,840,87],{"style":80},[46,842,610],{"style":70},[46,844],{"class":48,"style":49},[46,846,847,849,851,853],{"class":48,"style":49},[46,848,219],{"style":80},[46,850,619],{"style":60},[46,852,104],{"style":80},[46,854,624],{"style":52},[46,856,857,859,861],{"class":48,"style":49},[46,858,630],{"style":629},[46,860,35],{"style":80},[46,862,635],{"style":100},[46,864,865,867,869],{"class":48,"style":49},[46,866,640],{"style":629},[46,868,35],{"style":80},[46,870,635],{"style":100},[46,872,873],{"class":48,"style":49},[46,874,649],{"style":52},[46,876],{"class":48,"style":49},[46,878,879,881,883,885,887,889,891],{"class":48,"style":49},[46,880,97],{"style":80},[46,882,658],{"style":100},[46,884,35],{"style":80},[46,886,619],{"style":60},[46,888,665],{"style":52},[46,890,67],{"style":80},[46,892,670],{"style":52},[46,894,895,897,899,901,903],{"class":48,"style":49},[46,896,675],{"style":52},[46,898,678],{"style":70},[46,900,681],{"style":52},[46,902,684],{"style":70},[46,904,687],{"style":52},[46,906,907,909,911,913,915],{"class":48,"style":49},[46,908,675],{"style":52},[46,910,694],{"style":70},[46,912,681],{"style":52},[46,914,699],{"style":70},[46,916,702],{"style":52},[46,918,919],{"class":48,"style":49},[46,920,245],{"style":52},[46,922],{"class":48,"style":49},[46,924,925,927,929,931,933,935,937,939,942,944],{"class":48,"style":49},[46,926,97],{"style":80},[46,928,432],{"style":100},[46,930,104],{"style":80},[46,932,317],{"style":60},[46,934,53],{"style":52},[46,936,723],{"style":60},[46,938,665],{"style":52},[46,940,941],{"style":80},"|",[46,943,728],{"style":100},[46,945,946],{"style":52},">([])",[46,948,949,951,953],{"class":48,"style":49},[46,950,131],{"style":52},[46,952,57],{"style":56},[46,954,74],{"style":52},[46,956],{"class":48,"style":49},[46,958,959,961,963],{"class":48,"style":49},[46,960,53],{"style":52},[46,962,144],{"style":56},[46,964,74],{"style":52},[46,966,967,969,971,973,975,977,980,982,984,986],{"class":48,"style":49},[46,968,151],{"style":52},[46,970,528],{"style":56},[46,972,761],{"style":60},[46,974,67],{"style":52},[46,976,766],{"style":70},[46,978,979],{"style":60}," multiple",[46,981,487],{"style":60},[46,983,67],{"style":52},[46,985,492],{"style":70},[46,987,74],{"style":52},[46,989,990],{"class":48,"style":49},[46,991,500],{"style":499},[46,993,994,996,998],{"class":48,"style":49},[46,995,505],{"style":52},[46,997,528],{"style":56},[46,999,74],{"style":52},[46,1001,1002,1004,1006],{"class":48,"style":49},[46,1003,131],{"style":52},[46,1005,144],{"style":56},[46,1007,74],{"style":52},[13,1009,1010,1013,1014,549,1016,1019,1020,1022,1023,1026],{},[20,1011,1012],{},"Autocomplete.Root"," is generic over its item too, but only for ",[20,1015,532],{},[20,1017,1018],{},"filter"," and the item slots. Its ",[20,1021,544],{}," is the input's text, so it is always a ",[20,1024,1025],{},"string",".",[13,1028,1029,1030,1033],{},"To wrap a generic part, forward its type parameter with ",[20,1031,1032],{},"\u003Cscript setup generic=\"…\">"," so the item type keeps flowing from your call site through the wrapper into the part:",[37,1035,1037],{"language":39,"meta":1036,"class":41},"title=\"Wrapping a generic part\"",[20,1038,1039,75,1068,75,1078,75,1080,75,1110,75,1118,75,1120,75,1128,75,1142],{"class":44},[46,1040,1041,1043,1045,1047,1049,1051,1053,1056,1058,1061,1064,1066],{"class":48,"style":49},[46,1042,53],{"style":52},[46,1044,57],{"style":56},[46,1046,61],{"style":60},[46,1048,64],{"style":60},[46,1050,67],{"style":52},[46,1052,71],{"style":70},[46,1054,1055],{"style":60}," generic",[46,1057,67],{"style":52},[46,1059,1060],{"style":70},"\"",[46,1062,1063],{"style":60},"Item",[46,1065,1060],{"style":70},[46,1067,74],{"style":52},[46,1069,1070,1072,1074,1076],{"class":48,"style":49},[46,1071,81],{"style":80},[46,1073,605],{"style":52},[46,1075,87],{"style":80},[46,1077,610],{"style":70},[46,1079],{"class":48,"style":49},[46,1081,1082,1084,1086,1088,1090,1092,1094,1096,1098,1101,1103,1106,1108],{"class":48,"style":49},[46,1083,97],{"style":80},[46,1085,101],{"style":100},[46,1087,104],{"style":80},[46,1089,107],{"style":60},[46,1091,53],{"style":52},[46,1093,112],{"style":60},[46,1095,53],{"style":52},[46,1097,117],{"style":80},[46,1099,1100],{"style":52}," Combobox.Root\u003C",[46,1102,1063],{"style":60},[46,1104,1105],{"style":52},">>[",[46,1107,123],{"style":70},[46,1109,126],{"style":52},[46,1111,1112,1114,1116],{"class":48,"style":49},[46,1113,131],{"style":52},[46,1115,57],{"style":56},[46,1117,74],{"style":52},[46,1119],{"class":48,"style":49},[46,1121,1122,1124,1126],{"class":48,"style":49},[46,1123,53],{"style":52},[46,1125,144],{"style":56},[46,1127,74],{"style":52},[46,1129,1130,1132,1134,1136,1138,1140],{"class":48,"style":49},[46,1131,151],{"style":52},[46,1133,528],{"style":56},[46,1135,157],{"style":60},[46,1137,67],{"style":52},[46,1139,162],{"style":70},[46,1141,165],{"style":52},[46,1143,1144,1146,1148],{"class":48,"style":49},[46,1145,131],{"style":52},[46,1147,144],{"style":56},[46,1149,74],{"style":52},[13,1151,1152,1155,1156,1159,1160,1163,1164,1167,1168,1173],{},[20,1153,1154],{},"Form"," is generic over the values object it collects, defaulting to ",[20,1157,1158],{},"Record\u003Cstring, unknown>"," keyed by each field's ",[20,1161,1162],{},"name",". It can't infer what your fields hold, so annotate the ",[20,1165,1166],{},"formSubmit"," handler's parameter and the type flows back into the component — or skip the annotation and parse the values instead (see the ",[1169,1170,1172],"a",{"href":1171},"\u002Fforms#schema-validation-with-zod","Zod example",", where the schema is what produces the typed object):",[37,1175,1177],{"language":39,"meta":1176,"class":41},"title=\"Typing the submitted values\"",[20,1178,1179,75,1195,75,1207,75,1219,75,1221,75,1232,75,1241,75,1250,75,1254,75,1256,75,1284,75,1295,75,1299,75,1307,75,1309,75,1317,75,1340,75,1358,75,1375,75,1384,75,1399,75,1413,75,1421,75,1429],{"class":44},[46,1180,1181,1183,1185,1187,1189,1191,1193],{"class":48,"style":49},[46,1182,53],{"style":52},[46,1184,57],{"style":56},[46,1186,61],{"style":60},[46,1188,64],{"style":60},[46,1190,67],{"style":52},[46,1192,71],{"style":70},[46,1194,74],{"style":52},[46,1196,1197,1199,1202,1204],{"class":48,"style":49},[46,1198,81],{"style":80},[46,1200,1201],{"style":52}," { Form } ",[46,1203,87],{"style":80},[46,1205,1206],{"style":70}," '@shardsui\u002Fvue\u002Fform'",[46,1208,1209,1211,1214,1216],{"class":48,"style":49},[46,1210,81],{"style":80},[46,1212,1213],{"style":52}," { Field } ",[46,1215,87],{"style":80},[46,1217,1218],{"style":70}," '@shardsui\u002Fvue\u002Ffield'",[46,1220],{"class":48,"style":49},[46,1222,1223,1225,1228,1230],{"class":48,"style":49},[46,1224,219],{"style":80},[46,1226,1227],{"style":60}," SignUpValues",[46,1229,104],{"style":80},[46,1231,624],{"style":52},[46,1233,1234,1237,1239],{"class":48,"style":49},[46,1235,1236],{"style":629},"  email",[46,1238,35],{"style":80},[46,1240,635],{"style":100},[46,1242,1243,1246,1248],{"class":48,"style":49},[46,1244,1245],{"style":629},"  password",[46,1247,35],{"style":80},[46,1249,635],{"style":100},[46,1251,1252],{"class":48,"style":49},[46,1253,649],{"style":52},[46,1255],{"class":48,"style":49},[46,1257,1258,1261,1264,1267,1270,1272,1275,1277,1279,1281],{"class":48,"style":49},[46,1259,1260],{"style":80},"function",[46,1262,1263],{"style":60}," onFormSubmit",[46,1265,1266],{"style":52},"({ ",[46,1268,1269],{"style":629},"email",[46,1271,549],{"style":52},[46,1273,1274],{"style":629},"password",[46,1276,702],{"style":52},[46,1278,35],{"style":80},[46,1280,1227],{"style":60},[46,1282,1283],{"style":52},") {",[46,1285,1286,1289,1292],{"class":48,"style":49},[46,1287,1288],{"style":52},"  console.",[46,1290,1291],{"style":60},"log",[46,1293,1294],{"style":52},"(email, password)",[46,1296,1297],{"class":48,"style":49},[46,1298,649],{"style":52},[46,1300,1301,1303,1305],{"class":48,"style":49},[46,1302,131],{"style":52},[46,1304,57],{"style":56},[46,1306,74],{"style":52},[46,1308],{"class":48,"style":49},[46,1310,1311,1313,1315],{"class":48,"style":49},[46,1312,53],{"style":52},[46,1314,144],{"style":56},[46,1316,74],{"style":52},[46,1318,1319,1321,1323,1326,1329,1331,1333,1336,1338],{"class":48,"style":49},[46,1320,151],{"style":52},[46,1322,1154],{"style":56},[46,1324,1325],{"style":52}," @",[46,1327,1328],{"style":60},"form-submit",[46,1330,67],{"style":52},[46,1332,1060],{"style":70},[46,1334,1335],{"style":52},"onFormSubmit",[46,1337,1060],{"style":70},[46,1339,74],{"style":52},[46,1341,1342,1345,1348,1351,1353,1356],{"class":48,"style":49},[46,1343,1344],{"style":52},"    \u003C",[46,1346,1347],{"style":56},"Field.Root",[46,1349,1350],{"style":60}," name",[46,1352,67],{"style":52},[46,1354,1355],{"style":70},"\"email\"",[46,1357,74],{"style":52},[46,1359,1360,1363,1366,1369,1371,1373],{"class":48,"style":49},[46,1361,1362],{"style":52},"      \u003C",[46,1364,1365],{"style":56},"Field.Control",[46,1367,1368],{"style":60}," type",[46,1370,67],{"style":52},[46,1372,1355],{"style":70},[46,1374,165],{"style":52},[46,1376,1377,1380,1382],{"class":48,"style":49},[46,1378,1379],{"style":52},"    \u003C\u002F",[46,1381,1347],{"style":56},[46,1383,74],{"style":52},[46,1385,1386,1388,1390,1392,1394,1397],{"class":48,"style":49},[46,1387,1344],{"style":52},[46,1389,1347],{"style":56},[46,1391,1350],{"style":60},[46,1393,67],{"style":52},[46,1395,1396],{"style":70},"\"password\"",[46,1398,74],{"style":52},[46,1400,1401,1403,1405,1407,1409,1411],{"class":48,"style":49},[46,1402,1362],{"style":52},[46,1404,1365],{"style":56},[46,1406,1368],{"style":60},[46,1408,67],{"style":52},[46,1410,1396],{"style":70},[46,1412,165],{"style":52},[46,1414,1415,1417,1419],{"class":48,"style":49},[46,1416,1379],{"style":52},[46,1418,1347],{"style":56},[46,1420,74],{"style":52},[46,1422,1423,1425,1427],{"class":48,"style":49},[46,1424,505],{"style":52},[46,1426,1154],{"style":56},[46,1428,74],{"style":52},[46,1430,1431,1433,1435],{"class":48,"style":49},[46,1432,131],{"style":52},[46,1434,144],{"style":56},[46,1436,74],{"style":52},[13,1438,1439,1440,1443,1444,1447,1448,1451,1452,1454,1455,1458,1459,35],{},"The ",[20,1441,1442],{},"errors"," prop is typed as ",[20,1445,1446],{},"FormErrors"," — ",[20,1449,1450],{},"Record\u003Cstring, string | string[]>",", keyed by the same field ",[20,1453,1162],{}," — exported from ",[20,1456,1457],{},"@shardsui\u002Fvue\u002Fform"," alongside ",[20,1460,1461],{},"FormValidationMode",[37,1463,1465],{"language":39,"meta":1464,"class":41},"title=\"Holding server errors\"",[20,1466,1467,75,1483,75,1493,75,1503,75,1516,75,1518,75,1536,75,1544,75,1546,75,1554,75,1575,75,1579,75,1587],{"class":44},[46,1468,1469,1471,1473,1475,1477,1479,1481],{"class":48,"style":49},[46,1470,53],{"style":52},[46,1472,57],{"style":56},[46,1474,61],{"style":60},[46,1476,64],{"style":60},[46,1478,67],{"style":52},[46,1480,71],{"style":70},[46,1482,74],{"style":52},[46,1484,1485,1487,1489,1491],{"class":48,"style":49},[46,1486,81],{"style":80},[46,1488,286],{"style":52},[46,1490,87],{"style":80},[46,1492,291],{"style":70},[46,1494,1495,1497,1499,1501],{"class":48,"style":49},[46,1496,81],{"style":80},[46,1498,1201],{"style":52},[46,1500,87],{"style":80},[46,1502,1206],{"style":70},[46,1504,1505,1507,1509,1512,1514],{"class":48,"style":49},[46,1506,81],{"style":80},[46,1508,1368],{"style":80},[46,1510,1511],{"style":52}," { FormErrors } ",[46,1513,87],{"style":80},[46,1515,1206],{"style":70},[46,1517],{"class":48,"style":49},[46,1519,1520,1522,1525,1527,1529,1531,1533],{"class":48,"style":49},[46,1521,97],{"style":80},[46,1523,1524],{"style":100}," errors",[46,1526,104],{"style":80},[46,1528,317],{"style":60},[46,1530,53],{"style":52},[46,1532,1446],{"style":60},[46,1534,1535],{"style":52},">({})",[46,1537,1538,1540,1542],{"class":48,"style":49},[46,1539,131],{"style":52},[46,1541,57],{"style":56},[46,1543,74],{"style":52},[46,1545],{"class":48,"style":49},[46,1547,1548,1550,1552],{"class":48,"style":49},[46,1549,53],{"style":52},[46,1551,144],{"style":56},[46,1553,74],{"style":52},[46,1555,1556,1558,1560,1563,1565,1567,1569,1571,1573],{"class":48,"style":49},[46,1557,151],{"style":52},[46,1559,1154],{"style":56},[46,1561,1562],{"style":52}," :",[46,1564,1442],{"style":60},[46,1566,67],{"style":52},[46,1568,1060],{"style":70},[46,1570,1442],{"style":52},[46,1572,1060],{"style":70},[46,1574,74],{"style":52},[46,1576,1577],{"class":48,"style":49},[46,1578,500],{"style":499},[46,1580,1581,1583,1585],{"class":48,"style":49},[46,1582,505],{"style":52},[46,1584,1154],{"style":56},[46,1586,74],{"style":52},[46,1588,1589,1591,1593],{"class":48,"style":49},[46,1590,131],{"style":52},[46,1592,144],{"style":56},[46,1594,74],{"style":52},[25,1596,1598],{"id":1597},"change-events-and-listeners","Change events and listeners",[13,1600,1601],{},"A change event carries one argument, the new value. Let it infer from the emit, or annotate it when the handler lives away from the markup:",[37,1603,1605],{"language":198,"meta":1604,"class":41},"title=\"Change handlers\"",[20,1606,1607,75,1626,75,1635,75,1639,75,1641,75,1658,75,1667],{"class":202},[46,1608,1609,1611,1614,1616,1619,1621,1624],{"class":48,"style":49},[46,1610,1260],{"style":80},[46,1612,1613],{"style":60}," onCheckedChange",[46,1615,320],{"style":52},[46,1617,1618],{"style":629},"checked",[46,1620,35],{"style":80},[46,1622,1623],{"style":100}," boolean",[46,1625,1283],{"style":52},[46,1627,1628,1630,1632],{"class":48,"style":49},[46,1629,1288],{"style":52},[46,1631,1291],{"style":60},[46,1633,1634],{"style":52},"(checked)",[46,1636,1637],{"class":48,"style":49},[46,1638,649],{"style":52},[46,1640],{"class":48,"style":49},[46,1642,1643,1645,1648,1650,1652,1654,1656],{"class":48,"style":49},[46,1644,1260],{"style":80},[46,1646,1647],{"style":60}," onValueChange",[46,1649,320],{"style":52},[46,1651,544],{"style":629},[46,1653,35],{"style":80},[46,1655,635],{"style":100},[46,1657,1283],{"style":52},[46,1659,1660,1662,1664],{"class":48,"style":49},[46,1661,1288],{"style":52},[46,1663,1291],{"style":60},[46,1665,1666],{"style":52},"(value)",[46,1668,1669],{"class":48,"style":49},[46,1670,649],{"style":52},[13,1672,1673,1674,1676,1677,1681],{},"The component reports the new value; with ",[20,1675,22],{}," it is committed for you, so there is nothing to cancel in the listener. To veto a change, bind the prop and the event separately and decline to write the ref (see ",[1169,1678,1680],{"href":1679},"\u002Fstate#vetoing-a-change","State",").",[13,1683,1684],{},"Native DOM events reach you through ordinary listeners and keep their standard DOM types:",[37,1686,1688],{"language":198,"meta":1687,"class":41},"title=\"Native event handler\"",[20,1689,1690,75,1709,75,1720],{"class":202},[46,1691,1692,1694,1697,1699,1702,1704,1707],{"class":48,"style":49},[46,1693,1260],{"style":80},[46,1695,1696],{"style":60}," onSubmit",[46,1698,320],{"style":52},[46,1700,1701],{"style":629},"event",[46,1703,35],{"style":80},[46,1705,1706],{"style":60}," SubmitEvent",[46,1708,1283],{"style":52},[46,1710,1711,1714,1717],{"class":48,"style":49},[46,1712,1713],{"style":52},"  event.",[46,1715,1716],{"style":60},"preventDefault",[46,1718,1719],{"style":52},"()",[46,1721,1722],{"class":48,"style":49},[46,1723,649],{"style":52},[25,1725,1727],{"id":1726},"imperative-handles","Imperative handles",[13,1729,1730,1731,1734],{},"When a trigger and its content can't sit together in the markup, detach them with a handle. ",[20,1732,1733],{},"Dialog.createHandle()"," constructs one; the type argument makes the handle's own methods generic over the payload you carry:",[37,1736,1738],{"language":39,"meta":1737,"class":41},"title=\"Typed dialog handle\"",[20,1739,1740,75,1756,75,1768,75,1770,75,1798,75,1806,75,1808,75,1816,75,1846,75,1848,75,1871,75,1880,75,1889,75,1912,75,1921,75,1929,75,1937],{"class":44},[46,1741,1742,1744,1746,1748,1750,1752,1754],{"class":48,"style":49},[46,1743,53],{"style":52},[46,1745,57],{"style":56},[46,1747,61],{"style":60},[46,1749,64],{"style":60},[46,1751,67],{"style":52},[46,1753,71],{"style":70},[46,1755,74],{"style":52},[46,1757,1758,1760,1763,1765],{"class":48,"style":49},[46,1759,81],{"style":80},[46,1761,1762],{"style":52}," { Dialog } ",[46,1764,87],{"style":80},[46,1766,1767],{"style":70}," '@shardsui\u002Fvue\u002Fdialog'",[46,1769],{"class":48,"style":49},[46,1771,1772,1774,1777,1779,1782,1785,1788,1791,1793,1795],{"class":48,"style":49},[46,1773,97],{"style":80},[46,1775,1776],{"style":100}," dialog",[46,1778,104],{"style":80},[46,1780,1781],{"style":52}," Dialog.",[46,1783,1784],{"style":60},"createHandle",[46,1786,1787],{"style":52},"\u003C{ ",[46,1789,1790],{"style":629},"text",[46,1792,35],{"style":80},[46,1794,635],{"style":100},[46,1796,1797],{"style":52}," }>()",[46,1799,1800,1802,1804],{"class":48,"style":49},[46,1801,131],{"style":52},[46,1803,57],{"style":56},[46,1805,74],{"style":52},[46,1807],{"class":48,"style":49},[46,1809,1810,1812,1814],{"class":48,"style":49},[46,1811,53],{"style":52},[46,1813,144],{"style":56},[46,1815,74],{"style":52},[46,1817,1818,1820,1823,1826,1828,1831,1834,1836,1839,1842,1844],{"class":48,"style":49},[46,1819,151],{"style":52},[46,1821,1822],{"style":56},"Dialog.Trigger",[46,1824,1825],{"style":60}," :handle",[46,1827,67],{"style":52},[46,1829,1830],{"style":70},"\"dialog\"",[46,1832,1833],{"style":60}," :payload",[46,1835,67],{"style":52},[46,1837,1838],{"style":70},"\"{ text: 'From the toolbar' }\"",[46,1840,1841],{"style":52},">Open\u003C\u002F",[46,1843,1822],{"style":56},[46,1845,74],{"style":52},[46,1847],{"class":48,"style":49},[46,1849,1850,1852,1855,1858,1860,1863,1865,1867,1869],{"class":48,"style":49},[46,1851,151],{"style":52},[46,1853,1854],{"style":56},"Dialog.Root",[46,1856,1857],{"style":60}," v-slot",[46,1859,67],{"style":52},[46,1861,1862],{"style":70},"\"{ payload }\"",[46,1864,1825],{"style":60},[46,1866,67],{"style":52},[46,1868,1830],{"style":70},[46,1870,74],{"style":52},[46,1872,1873,1875,1878],{"class":48,"style":49},[46,1874,1344],{"style":52},[46,1876,1877],{"style":56},"Dialog.Portal",[46,1879,74],{"style":52},[46,1881,1882,1884,1887],{"class":48,"style":49},[46,1883,1362],{"style":52},[46,1885,1886],{"style":56},"Dialog.Popup",[46,1888,74],{"style":52},[46,1890,1891,1894,1897,1900,1902,1905,1908,1910],{"class":48,"style":49},[46,1892,1893],{"style":52},"        \u003C",[46,1895,1896],{"style":56},"Dialog.Description",[46,1898,1899],{"style":60}," v-if",[46,1901,67],{"style":52},[46,1903,1904],{"style":70},"\"payload\"",[46,1906,1907],{"style":52},">Opened by {{ payload.text }}\u003C\u002F",[46,1909,1896],{"style":56},[46,1911,74],{"style":52},[46,1913,1914,1917,1919],{"class":48,"style":49},[46,1915,1916],{"style":52},"      \u003C\u002F",[46,1918,1886],{"style":56},[46,1920,74],{"style":52},[46,1922,1923,1925,1927],{"class":48,"style":49},[46,1924,1379],{"style":52},[46,1926,1877],{"style":56},[46,1928,74],{"style":52},[46,1930,1931,1933,1935],{"class":48,"style":49},[46,1932,505],{"style":52},[46,1934,1854],{"style":56},[46,1936,74],{"style":52},[46,1938,1939,1941,1943],{"class":48,"style":49},[46,1940,131],{"style":52},[46,1942,144],{"style":56},[46,1944,74],{"style":52},[13,1946,1947,1948,549,1951,549,1954,1957,1958,1961,1962,1965,1966,1969,1970,1973,1974,1977,1978,1980,1981,549,1984,191,1987,1990,1991,1993,1994,1996,1997,549,2000,549,2003,191,2006,2009],{},"The handle drives the dialog from your own code — ",[20,1949,1950],{},"dialog.open(triggerId)",[20,1952,1953],{},"dialog.close()",[20,1955,1956],{},"dialog.openWithPayload(payload)",", and the readonly ",[20,1959,1960],{},"dialog.isOpen"," — with ",[20,1963,1964],{},"openWithPayload"," typed against the ",[20,1967,1968],{},"{ text: string }"," you declared. ",[20,1971,1972],{},"open"," takes the ",[20,1975,1976],{},"id"," of a registered detached trigger, or ",[20,1979,566],{}," to open with no trigger at all; ",[20,1982,1983],{},"Dialog",[20,1985,1986],{},"AlertDialog",[20,1988,1989],{},"Drawer"," accept ",[20,1992,566],{}," and carry ",[20,1995,1964],{},", while the ",[20,1998,1999],{},"Popover",[20,2001,2002],{},"Menu",[20,2004,2005],{},"Tooltip",[20,2007,2008],{},"PreviewCard"," handles require an id.",[13,2011,2012,2013,2016,2017,2020,2021,2023,2024,2027,2028,2031,2032,2035],{},"The same type argument flows through ",[20,2014,2015],{},"\u003CDialog.Trigger>","'s ",[20,2018,2019],{},"payload"," prop and into the default slot, where ",[20,2022,2019],{}," arrives as ",[20,2025,2026],{},"{ text: string } | undefined",". Guard the ",[20,2029,2030],{},"undefined",", which means no trigger has opened the dialog yet. To pass a handle across module boundaries, annotate it with the ",[20,2033,2034],{},"Dialog.Handle"," type:",[37,2037,2039],{"language":198,"meta":2038,"class":41},"title=\"Annotating a handle\"",[20,2040,2041,75,2051,75,2053],{"class":202},[46,2042,2043,2045,2047,2049],{"class":48,"style":49},[46,2044,81],{"style":80},[46,2046,1762],{"style":52},[46,2048,87],{"style":80},[46,2050,1767],{"style":70},[46,2052],{"class":48,"style":49},[46,2054,2055,2058,2060,2062,2065,2067,2070,2072,2074,2076,2078],{"class":48,"style":49},[46,2056,2057],{"style":80},"let",[46,2059,1776],{"style":52},[46,2061,35],{"style":80},[46,2063,2064],{"style":60}," Dialog",[46,2066,1026],{"style":52},[46,2068,2069],{"style":60},"Handle",[46,2071,1787],{"style":52},[46,2073,1790],{"style":629},[46,2075,35],{"style":80},[46,2077,635],{"style":100},[46,2079,2080],{"style":52}," }>",[25,2082,2084,2085],{"id":2083},"template-refs-and-el","Template refs and ",[20,2086,2087],{},"$el",[13,2089,2090,2091,2094,2095,2097,2098,183,2101,2103,2104,2107,2108,2110,2111,2114],{},"A template ",[20,2092,2093],{},"ref"," on a part resolves to the part's component instance, and ",[20,2096,2087],{}," on it is the element the part rendered, typed ",[20,2099,2100],{},"HTMLElement",[20,2102,186],{}," makes the tag a runtime value, so the type can't narrow to a concrete element. Narrow with an ",[20,2105,2106],{},"instanceof"," check where you need a tag-specific API. The ref is ",[20,2109,566],{}," until the element mounts, so a prop that wants a non-null element, like ",[20,2112,2113],{},"initialFocus",", takes a getter instead:",[37,2116,2118],{"language":39,"meta":2117,"class":41},"title=\"Typing a part ref\"",[20,2119,2120,75,2136,75,2147,75,2157,75,2159,75,2178,75,2186,75,2188,75,2196,75,2204,75,2216,75,2224,75,2248,75,2253,75,2261,75,2269,75,2277],{"class":44},[46,2121,2122,2124,2126,2128,2130,2132,2134],{"class":48,"style":49},[46,2123,53],{"style":52},[46,2125,57],{"style":56},[46,2127,61],{"style":60},[46,2129,64],{"style":60},[46,2131,67],{"style":52},[46,2133,71],{"style":70},[46,2135,74],{"style":52},[46,2137,2138,2140,2143,2145],{"class":48,"style":49},[46,2139,81],{"style":80},[46,2141,2142],{"style":52}," { useTemplateRef } ",[46,2144,87],{"style":80},[46,2146,291],{"style":70},[46,2148,2149,2151,2153,2155],{"class":48,"style":49},[46,2150,81],{"style":80},[46,2152,1762],{"style":52},[46,2154,87],{"style":80},[46,2156,1767],{"style":70},[46,2158],{"class":48,"style":49},[46,2160,2161,2163,2166,2168,2171,2173,2176],{"class":48,"style":49},[46,2162,97],{"style":80},[46,2164,2165],{"style":100}," popup",[46,2167,104],{"style":80},[46,2169,2170],{"style":60}," useTemplateRef",[46,2172,320],{"style":52},[46,2174,2175],{"style":70},"'popup'",[46,2177,326],{"style":52},[46,2179,2180,2182,2184],{"class":48,"style":49},[46,2181,131],{"style":52},[46,2183,57],{"style":56},[46,2185,74],{"style":52},[46,2187],{"class":48,"style":49},[46,2189,2190,2192,2194],{"class":48,"style":49},[46,2191,53],{"style":52},[46,2193,144],{"style":56},[46,2195,74],{"style":52},[46,2197,2198,2200,2202],{"class":48,"style":49},[46,2199,151],{"style":52},[46,2201,1854],{"style":56},[46,2203,74],{"style":52},[46,2205,2206,2208,2210,2212,2214],{"class":48,"style":49},[46,2207,1344],{"style":52},[46,2209,1822],{"style":56},[46,2211,1841],{"style":52},[46,2213,1822],{"style":56},[46,2215,74],{"style":52},[46,2217,2218,2220,2222],{"class":48,"style":49},[46,2219,1344],{"style":52},[46,2221,1877],{"style":56},[46,2223,74],{"style":52},[46,2225,2226,2228,2230,2233,2235,2238,2241,2243,2246],{"class":48,"style":49},[46,2227,1362],{"style":52},[46,2229,1886],{"style":56},[46,2231,2232],{"style":60}," ref",[46,2234,67],{"style":52},[46,2236,2237],{"style":70},"\"popup\"",[46,2239,2240],{"style":60}," :initial-focus",[46,2242,67],{"style":52},[46,2244,2245],{"style":70},"\"() => popup?.$el\"",[46,2247,74],{"style":52},[46,2249,2250],{"class":48,"style":49},[46,2251,2252],{"style":499},"        \u003C!-- … -->",[46,2254,2255,2257,2259],{"class":48,"style":49},[46,2256,1916],{"style":52},[46,2258,1886],{"style":56},[46,2260,74],{"style":52},[46,2262,2263,2265,2267],{"class":48,"style":49},[46,2264,1379],{"style":52},[46,2266,1877],{"style":56},[46,2268,74],{"style":52},[46,2270,2271,2273,2275],{"class":48,"style":49},[46,2272,505],{"style":52},[46,2274,1854],{"style":56},[46,2276,74],{"style":52},[46,2278,2279,2281,2283],{"class":48,"style":49},[46,2280,131],{"style":52},[46,2282,144],{"style":56},[46,2284,74],{"style":52},[13,2286,2287,2290],{},[20,2288,2289],{},"useTemplateRef"," follows the same rule: typed to the component on a component instance, to the element on a plain element:",[37,2292,2294],{"language":39,"meta":2293,"class":41},"title=\"Typing a ref on an element\"",[20,2295,2296,75,2312,75,2322,75,2324,75,2347,75,2355,75,2357,75,2365,75,2386],{"class":44},[46,2297,2298,2300,2302,2304,2306,2308,2310],{"class":48,"style":49},[46,2299,53],{"style":52},[46,2301,57],{"style":56},[46,2303,61],{"style":60},[46,2305,64],{"style":60},[46,2307,67],{"style":52},[46,2309,71],{"style":70},[46,2311,74],{"style":52},[46,2313,2314,2316,2318,2320],{"class":48,"style":49},[46,2315,81],{"style":80},[46,2317,2142],{"style":52},[46,2319,87],{"style":80},[46,2321,291],{"style":70},[46,2323],{"class":48,"style":49},[46,2325,2326,2328,2331,2333,2335,2337,2340,2342,2345],{"class":48,"style":49},[46,2327,97],{"style":80},[46,2329,2330],{"style":100}," button",[46,2332,104],{"style":80},[46,2334,2170],{"style":60},[46,2336,53],{"style":52},[46,2338,2339],{"style":60},"HTMLButtonElement",[46,2341,455],{"style":52},[46,2343,2344],{"style":70},"'button'",[46,2346,326],{"style":52},[46,2348,2349,2351,2353],{"class":48,"style":49},[46,2350,131],{"style":52},[46,2352,57],{"style":56},[46,2354,74],{"style":52},[46,2356],{"class":48,"style":49},[46,2358,2359,2361,2363],{"class":48,"style":49},[46,2360,53],{"style":52},[46,2362,144],{"style":56},[46,2364,74],{"style":52},[46,2366,2367,2369,2372,2374,2376,2379,2382,2384],{"class":48,"style":49},[46,2368,151],{"style":52},[46,2370,2371],{"style":56},"button",[46,2373,2232],{"style":60},[46,2375,67],{"style":52},[46,2377,2378],{"style":70},"\"button\"",[46,2380,2381],{"style":52},">Click\u003C\u002F",[46,2383,2371],{"style":56},[46,2385,74],{"style":52},[46,2387,2388,2390,2392],{"class":48,"style":49},[46,2389,131],{"style":52},[46,2391,144],{"style":56},[46,2393,74],{"style":52},[25,2395,2397],{"id":2396},"slots","Slots",[13,2399,2400],{},"When a part hands its default slot its state, destructure it. The payload type comes from the part:",[37,2402,2404],{"language":39,"meta":2403,"class":41},"title=\"Slot payload\"",[20,2405,2406,75,2422,75,2432,75,2440,75,2442,75,2450,75,2458,75,2474,75,2479,75,2487,75,2495],{"class":44},[46,2407,2408,2410,2412,2414,2416,2418,2420],{"class":48,"style":49},[46,2409,53],{"style":52},[46,2411,57],{"style":56},[46,2413,61],{"style":60},[46,2415,64],{"style":60},[46,2417,67],{"style":52},[46,2419,71],{"style":70},[46,2421,74],{"style":52},[46,2423,2424,2426,2428,2430],{"class":48,"style":49},[46,2425,81],{"style":80},[46,2427,298],{"style":52},[46,2429,87],{"style":80},[46,2431,303],{"style":70},[46,2433,2434,2436,2438],{"class":48,"style":49},[46,2435,131],{"style":52},[46,2437,57],{"style":56},[46,2439,74],{"style":52},[46,2441],{"class":48,"style":49},[46,2443,2444,2446,2448],{"class":48,"style":49},[46,2445,53],{"style":52},[46,2447,144],{"style":56},[46,2449,74],{"style":52},[46,2451,2452,2454,2456],{"class":48,"style":49},[46,2453,151],{"style":52},[46,2455,351],{"style":56},[46,2457,74],{"style":52},[46,2459,2460,2462,2465,2467,2469,2472],{"class":48,"style":49},[46,2461,1344],{"style":52},[46,2463,2464],{"style":56},"Switch.Thumb",[46,2466,1857],{"style":60},[46,2468,67],{"style":52},[46,2470,2471],{"style":70},"\"{ checked }\"",[46,2473,74],{"style":52},[46,2475,2476],{"class":48,"style":49},[46,2477,2478],{"style":52},"      {{ checked ? 'On' : 'Off' }}",[46,2480,2481,2483,2485],{"class":48,"style":49},[46,2482,1379],{"style":52},[46,2484,2464],{"style":56},[46,2486,74],{"style":52},[46,2488,2489,2491,2493],{"class":48,"style":49},[46,2490,505],{"style":52},[46,2492,351],{"style":56},[46,2494,74],{"style":52},[46,2496,2497,2499,2501],{"class":48,"style":49},[46,2498,131],{"style":52},[46,2500,144],{"style":56},[46,2502,74],{"style":52},[13,2504,2505,2506,2509],{},"To accept a slot in your own component, declare it with ",[20,2507,2508],{},"defineSlots"," and type the props object your slot receives:",[37,2511,2513],{"language":39,"meta":2512,"class":41},"title=\"Accepting a typed slot\"",[20,2514,2515,75,2531,75,2568,75,2576,75,2578,75,2586,75,2607],{"class":44},[46,2516,2517,2519,2521,2523,2525,2527,2529],{"class":48,"style":49},[46,2518,53],{"style":52},[46,2520,57],{"style":56},[46,2522,61],{"style":60},[46,2524,64],{"style":60},[46,2526,67],{"style":52},[46,2528,71],{"style":70},[46,2530,74],{"style":52},[46,2532,2533,2535,2537,2540,2542,2545,2547,2550,2553,2555,2558,2561,2563,2566],{"class":48,"style":49},[46,2534,2508],{"style":60},[46,2536,1787],{"style":52},[46,2538,2539],{"style":60},"default",[46,2541,320],{"style":52},[46,2543,2544],{"style":629},"props",[46,2546,35],{"style":80},[46,2548,2549],{"style":52}," { ",[46,2551,2552],{"style":629},"count",[46,2554,35],{"style":80},[46,2556,2557],{"style":100}," number",[46,2559,2560],{"style":52}," })",[46,2562,35],{"style":80},[46,2564,2565],{"style":100}," any",[46,2567,1797],{"style":52},[46,2569,2570,2572,2574],{"class":48,"style":49},[46,2571,131],{"style":52},[46,2573,57],{"style":56},[46,2575,74],{"style":52},[46,2577],{"class":48,"style":49},[46,2579,2580,2582,2584],{"class":48,"style":49},[46,2581,53],{"style":52},[46,2583,144],{"style":56},[46,2585,74],{"style":52},[46,2587,2588,2590,2593,2596,2598,2601,2605],{"class":48,"style":49},[46,2589,151],{"style":52},[46,2591,2592],{"style":56},"slot",[46,2594,2595],{"style":60}," :count",[46,2597,67],{"style":52},[46,2599,2600],{"style":70},"\"1\"",[46,2602,2604],{"style":2603},"color:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic"," \u002F",[46,2606,74],{"style":52},[46,2608,2609,2611,2613],{"class":48,"style":49},[46,2610,131],{"style":52},[46,2612,144],{"style":56},[46,2614,74],{"style":52},[13,2616,2617,2618,2621,2622,1026],{},"A slot that takes nothing is ",[20,2619,2620],{},"default(): any","; one that receives a payload object is ",[20,2623,2624],{},"default(props: { payload: SomeType }): any",[25,2626,2628],{"id":2627},"other-exported-types","Other exported types",[13,2630,2631,2632,549,2634,549,2637,549,2640,2643,2644,2647,2648,2651,2652,2655,2656,549,2659,191,2662,2665,2666,2669,2670,1026],{},"The toast object your toast content receives carries its ",[20,2633,1976],{},[20,2635,2636],{},"title",[20,2638,2639],{},"description",[20,2641,2642],{},"priority",", transition status and your own ",[20,2645,2646],{},"data","; it is ",[20,2649,2650],{},"ToastObject\u003CData>",", exported from ",[20,2653,2654],{},"@shardsui\u002Fvue\u002Ftoast"," along with ",[20,2657,2658],{},"ToastManagerAddOptions",[20,2660,2661],{},"ToastManagerUpdateOptions",[20,2663,2664],{},"ToastManagerPromiseOptions"," for the ",[20,2667,2668],{},"Toast.Manager"," queue. See ",[1169,2671,2673],{"href":2672},"\u002Ftoast","Toast",[13,2675,2676,2679,2680,2683,2684,2687,2688,2691,2692,1026],{},[20,2677,2678],{},"Combobox.createFilter"," returns a ",[20,2681,2682],{},"ComboboxFilter"," and takes ",[20,2685,2686],{},"ComboboxFilterOptions",", both exported from ",[20,2689,2690],{},"@shardsui\u002Fvue\u002Fcombobox",". See ",[1169,2693,2695],{"href":2694},"\u002Fcombobox","Combobox",1789390078913]