[{"data":1,"prerenderedAt":934},["ShallowReactive",2],{"docs:checkbox-group":3,"demo:checkbox-group\u002Fhero":933},{"frontmatter":4,"meta":5,"nodes":6},{},{},[7,12,16,20,25,34,151,155,178,182,187,194,267,272,335,339,362,509,513,516,718,722,831],[8,9,11],"h1",{"id":10},"checkbox-group","Checkbox Group",[13,14,15],"p",{},"Checkboxes sharing one value.",[17,18],"demo",{"name":19},"checkbox-group\u002Fhero",[21,22,24],"h2",{"id":23},"anatomy","Anatomy",[13,26,27,28,33],{},"A Checkbox Group wraps a set of ",[29,30,32],"a",{"href":31},"\u002Fcheckbox","Checkbox"," parts. Import both and nest the checkboxes inside the group:",[35,36,40],"pre",{"language":37,"meta":38,"class":39},"vue","title=\"Anatomy\"","shiki shiki-themes github-light github-dark dark:github-dark",[41,42,44,64,65,64,81,64,93,64,102,64,104,64,113,64,123,64,134,64,143],"code",{"class":43},"language-vue",[45,46,49,53,57,61],"span",{"class":47,"style":48},"line","display: inline",[45,50,52],{"style":51},"color:#24292E;--shiki-dark:#E1E4E8","\u003C",[45,54,56],{"style":55},"color:#22863A;--shiki-dark:#85E89D","script",[45,58,60],{"style":59},"color:#6F42C1;--shiki-dark:#B392F0"," setup",[45,62,63],{"style":51},">","\n",[45,66,67,71,74,77],{"class":47,"style":48},[45,68,70],{"style":69},"color:#D73A49;--shiki-dark:#F97583","import",[45,72,73],{"style":51}," { Checkbox } ",[45,75,76],{"style":69},"from",[45,78,80],{"style":79},"color:#032F62;--shiki-dark:#9ECBFF"," '@shardsui\u002Fvue\u002Fcheckbox'",[45,82,83,85,88,90],{"class":47,"style":48},[45,84,70],{"style":69},[45,86,87],{"style":51}," { CheckboxGroup } ",[45,89,76],{"style":69},[45,91,92],{"style":79}," '@shardsui\u002Fvue\u002Fcheckbox-group'",[45,94,95,98,100],{"class":47,"style":48},[45,96,97],{"style":51},"\u003C\u002F",[45,99,56],{"style":55},[45,101,63],{"style":51},[45,103],{"class":47,"style":48},[45,105,106,108,111],{"class":47,"style":48},[45,107,52],{"style":51},[45,109,110],{"style":55},"template",[45,112,63],{"style":51},[45,114,115,118,121],{"class":47,"style":48},[45,116,117],{"style":51},"  \u003C",[45,119,120],{"style":55},"CheckboxGroup",[45,122,63],{"style":51},[45,124,125,128,131],{"class":47,"style":48},[45,126,127],{"style":51},"    \u003C",[45,129,130],{"style":55},"Checkbox.Root",[45,132,133],{"style":51}," \u002F>",[45,135,136,139,141],{"class":47,"style":48},[45,137,138],{"style":51},"  \u003C\u002F",[45,140,120],{"style":55},[45,142,63],{"style":51},[45,144,145,147,149],{"class":47,"style":48},[45,146,97],{"style":51},[45,148,110],{"style":55},[45,150,63],{"style":51},[21,152,154],{"id":153},"usage-guidelines","Usage guidelines",[156,157,158],"ul",{},[159,160,161,165,166,169,170,173,174,177],"li",{},[162,163,164],"strong",{},"Form controls must have an accessible name",": name them with ",[41,167,168],{},"\u003Clabel>"," elements, or with the ",[41,171,172],{},"Field"," and ",[41,175,176],{},"Fieldset"," components.",[21,179,181],{"id":180},"examples","Examples",[183,184,186],"h3",{"id":185},"examples-labeling-a-checkbox-group","Labeling a checkbox group",[13,188,189,190,193],{},"Point the group at a sibling label with ",[41,191,192],{},"aria-labelledby",":",[35,195,197],{"language":37,"meta":196,"class":39},"title=\"Using aria-labelledby to label a checkbox group\"",[41,198,199,64,207,64,230,64,245,64,251,64,259],{"class":43},[45,200,201,203,205],{"class":47,"style":48},[45,202,52],{"style":51},[45,204,110],{"style":55},[45,206,63],{"style":51},[45,208,209,211,214,217,220,223,226,228],{"class":47,"style":48},[45,210,117],{"style":51},[45,212,213],{"style":55},"div",[45,215,216],{"style":59}," id",[45,218,219],{"style":51},"=",[45,221,222],{"style":79},"\"protocols-label\"",[45,224,225],{"style":51},">Allowed network protocols\u003C\u002F",[45,227,213],{"style":55},[45,229,63],{"style":51},[45,231,232,234,236,239,241,243],{"class":47,"style":48},[45,233,117],{"style":51},[45,235,120],{"style":55},[45,237,238],{"style":59}," aria-labelledby",[45,240,219],{"style":51},[45,242,222],{"style":79},[45,244,63],{"style":51},[45,246,247],{"class":47,"style":48},[45,248,250],{"style":249},"color:#6A737D;--shiki-dark:#6A737D","    \u003C!-- checkboxes -->",[45,252,253,255,257],{"class":47,"style":48},[45,254,138],{"style":51},[45,256,120],{"style":55},[45,258,63],{"style":51},[45,260,261,263,265],{"class":47,"style":48},[45,262,97],{"style":51},[45,264,110],{"style":55},[45,266,63],{"style":51},[13,268,269,270,193],{},"For the individual checkboxes, the simplest option is to wrap each one in a ",[41,271,168],{},[35,273,276],{"language":37,"meta":274,"class":275},"title=\"Using an enclosing label to label a checkbox\"","shiki shiki-themes github-light github-dark has-highlighted dark:github-dark",[41,277,278,64,286,64,297,64,313,64,318,64,327],{"class":43},[45,279,280,282,284],{"class":47,"style":48},[45,281,52],{"style":51},[45,283,110],{"style":55},[45,285,63],{"style":51},[45,287,290,292,295],{"class":288,"style":48},[47,289],"highlighted",[45,291,117],{"style":51},[45,293,294],{"style":55},"label",[45,296,63],{"style":51},[45,298,299,301,303,306,308,311],{"class":47,"style":48},[45,300,127],{"style":51},[45,302,130],{"style":55},[45,304,305],{"style":59}," value",[45,307,219],{"style":51},[45,309,310],{"style":79},"\"http\"",[45,312,133],{"style":51},[45,314,315],{"class":47,"style":48},[45,316,317],{"style":51},"    HTTP",[45,319,321,323,325],{"class":320,"style":48},[47,289],[45,322,138],{"style":51},[45,324,294],{"style":55},[45,326,63],{"style":51},[45,328,329,331,333],{"class":47,"style":48},[45,330,97],{"style":51},[45,332,110],{"style":55},[45,334,63],{"style":51},[183,336,338],{"id":337},"examples-rendering-as-a-native-button","Rendering as a native button",[13,340,341,343,344,347,348,350,351,354,355,358,359,193],{},[41,342,130],{}," renders a ",[41,345,346],{},"\u003Cspan>"," by default so it can live inside a ",[41,349,168],{},". When each checkbox has its own label tied to it with ",[41,352,353],{},"for","\u002F",[41,356,357],{},"id",", render it as a native button with ",[41,360,361],{},"as=\"button\"",[35,363,365],{"language":37,"meta":364,"class":39},"title=\"Sibling label pattern with a native button\"",[41,366,367,64,375,64,393,64,407,64,415,64,437,64,465,64,475,64,484,64,493,64,501],{"class":43},[45,368,369,371,373],{"class":47,"style":48},[45,370,52],{"style":51},[45,372,110],{"style":55},[45,374,63],{"style":51},[45,376,377,379,381,383,385,387,389,391],{"class":47,"style":48},[45,378,117],{"style":51},[45,380,213],{"style":55},[45,382,216],{"style":59},[45,384,219],{"style":51},[45,386,222],{"style":79},[45,388,225],{"style":51},[45,390,213],{"style":55},[45,392,63],{"style":51},[45,394,395,397,399,401,403,405],{"class":47,"style":48},[45,396,117],{"style":51},[45,398,120],{"style":55},[45,400,238],{"style":59},[45,402,219],{"style":51},[45,404,222],{"style":79},[45,406,63],{"style":51},[45,408,409,411,413],{"class":47,"style":48},[45,410,127],{"style":51},[45,412,213],{"style":55},[45,414,63],{"style":51},[45,416,417,420,422,425,427,430,433,435],{"class":47,"style":48},[45,418,419],{"style":51},"      \u003C",[45,421,294],{"style":55},[45,423,424],{"style":59}," for",[45,426,219],{"style":51},[45,428,429],{"style":79},"\"protocol-http\"",[45,431,432],{"style":51},">HTTP\u003C\u002F",[45,434,294],{"style":55},[45,436,63],{"style":51},[45,438,439,441,443,445,447,449,451,453,455,458,460,463],{"class":47,"style":48},[45,440,419],{"style":51},[45,442,130],{"style":55},[45,444,216],{"style":59},[45,446,219],{"style":51},[45,448,429],{"style":79},[45,450,305],{"style":59},[45,452,219],{"style":51},[45,454,310],{"style":79},[45,456,457],{"style":59}," as",[45,459,219],{"style":51},[45,461,462],{"style":79},"\"button\"",[45,464,63],{"style":51},[45,466,467,470,473],{"class":47,"style":48},[45,468,469],{"style":51},"        \u003C",[45,471,472],{"style":55},"Checkbox.Indicator",[45,474,133],{"style":51},[45,476,477,480,482],{"class":47,"style":48},[45,478,479],{"style":51},"      \u003C\u002F",[45,481,130],{"style":55},[45,483,63],{"style":51},[45,485,486,489,491],{"class":47,"style":48},[45,487,488],{"style":51},"    \u003C\u002F",[45,490,213],{"style":55},[45,492,63],{"style":51},[45,494,495,497,499],{"class":47,"style":48},[45,496,138],{"style":51},[45,498,120],{"style":55},[45,500,63],{"style":51},[45,502,503,505,507],{"class":47,"style":48},[45,504,97],{"style":51},[45,506,110],{"style":55},[45,508,63],{"style":51},[183,510,512],{"id":511},"examples-form-integration","Form integration",[13,514,515],{},"Combine Field and Fieldset to label the group and hook it into a form:",[35,517,519],{"language":37,"meta":518,"class":275},"title=\"Using Checkbox Group in a form\"",[41,520,521,64,529,64,547,64,556,64,569,64,577,64,585,64,600,64,605,64,614,64,622,64,637,64,642,64,650,64,658,64,673,64,678,64,686,64,694,64,702,64,710],{"class":43},[45,522,523,525,527],{"class":47,"style":48},[45,524,52],{"style":51},[45,526,110],{"style":55},[45,528,63],{"style":51},[45,530,532,534,537,540,542,545],{"class":531,"style":48},[47,289],[45,533,117],{"style":51},[45,535,536],{"style":55},"Field.Root",[45,538,539],{"style":59}," name",[45,541,219],{"style":51},[45,543,544],{"style":79},"\"allowedNetworkProtocols\"",[45,546,63],{"style":51},[45,548,549,551,554],{"class":47,"style":48},[45,550,127],{"style":51},[45,552,553],{"style":55},"Fieldset.Root",[45,555,63],{"style":51},[45,557,558,560,563,565,567],{"class":47,"style":48},[45,559,419],{"style":51},[45,561,562],{"style":55},"Fieldset.Legend",[45,564,225],{"style":51},[45,566,562],{"style":55},[45,568,63],{"style":51},[45,570,571,573,575],{"class":47,"style":48},[45,572,419],{"style":51},[45,574,120],{"style":55},[45,576,63],{"style":51},[45,578,579,581,583],{"class":47,"style":48},[45,580,469],{"style":51},[45,582,294],{"style":55},[45,584,63],{"style":51},[45,586,587,590,592,594,596,598],{"class":47,"style":48},[45,588,589],{"style":51},"          \u003C",[45,591,130],{"style":55},[45,593,305],{"style":59},[45,595,219],{"style":51},[45,597,310],{"style":79},[45,599,133],{"style":51},[45,601,602],{"class":47,"style":48},[45,603,604],{"style":51},"          HTTP",[45,606,607,610,612],{"class":47,"style":48},[45,608,609],{"style":51},"        \u003C\u002F",[45,611,294],{"style":55},[45,613,63],{"style":51},[45,615,616,618,620],{"class":47,"style":48},[45,617,469],{"style":51},[45,619,294],{"style":55},[45,621,63],{"style":51},[45,623,624,626,628,630,632,635],{"class":47,"style":48},[45,625,589],{"style":51},[45,627,130],{"style":55},[45,629,305],{"style":59},[45,631,219],{"style":51},[45,633,634],{"style":79},"\"https\"",[45,636,133],{"style":51},[45,638,639],{"class":47,"style":48},[45,640,641],{"style":51},"          HTTPS",[45,643,644,646,648],{"class":47,"style":48},[45,645,609],{"style":51},[45,647,294],{"style":55},[45,649,63],{"style":51},[45,651,652,654,656],{"class":47,"style":48},[45,653,469],{"style":51},[45,655,294],{"style":55},[45,657,63],{"style":51},[45,659,660,662,664,666,668,671],{"class":47,"style":48},[45,661,589],{"style":51},[45,663,130],{"style":55},[45,665,305],{"style":59},[45,667,219],{"style":51},[45,669,670],{"style":79},"\"ssh\"",[45,672,133],{"style":51},[45,674,675],{"class":47,"style":48},[45,676,677],{"style":51},"          SSH",[45,679,680,682,684],{"class":47,"style":48},[45,681,609],{"style":51},[45,683,294],{"style":55},[45,685,63],{"style":51},[45,687,688,690,692],{"class":47,"style":48},[45,689,479],{"style":51},[45,691,120],{"style":55},[45,693,63],{"style":51},[45,695,696,698,700],{"class":47,"style":48},[45,697,488],{"style":51},[45,699,553],{"style":55},[45,701,63],{"style":51},[45,703,704,706,708],{"class":47,"style":48},[45,705,138],{"style":51},[45,707,536],{"style":55},[45,709,63],{"style":51},[45,711,712,714,716],{"class":47,"style":48},[45,713,97],{"style":51},[45,715,110],{"style":55},[45,717,63],{"style":51},[21,719,721],{"id":720},"api-reference","API reference",[723,724],"table",{"columns":725,"rows":729},[726,727,728],"Prop","Type","Default",[730,742,753,762,771,782,792,803,812,821],{"summary":731,"detail":735},[732,733,734],"\u003Ccode>as\u003C\u002Fcode>","\u003Ccode>keyof HTMLElementTagNameMap\u003C\u002Fcode>","\u003Ccode>'div'\u003C\u002Fcode>",[736,737,738,739],{"label":726,"html":732},{"label":727,"html":733},{"label":728,"html":734},{"label":740,"html":741},"Description","HTML element to render.",{"summary":743,"detail":747},[744,745,746],"\u003Ccode>class\u003C\u002Fcode>","\u003Ccode>string\u003C\u002Fcode>","—",[748,749,750,751],{"label":726,"html":744},{"label":727,"html":745},{"label":728,"html":746},{"label":740,"html":752},"CSS class applied to the element.",{"summary":754,"detail":756},[755,745,746],"\u003Ccode>style\u003C\u002Fcode>",[757,758,759,760],{"label":726,"html":755},{"label":727,"html":745},{"label":728,"html":746},{"label":740,"html":761},"Inline style applied to the element.",{"summary":763,"detail":765},[764,745,746],"\u003Ccode>id\u003C\u002Fcode>",[766,767,768,769],{"label":726,"html":764},{"label":727,"html":745},{"label":728,"html":746},{"label":740,"html":770},"Custom element ID.",{"summary":772,"detail":776},[773,774,775],"\u003Ccode>value\u003C\u002Fcode>","\u003Ccode>string[]\u003C\u002Fcode>","\u003Ccode>[]\u003C\u002Fcode>",[777,778,779,780],{"label":726,"html":773},{"label":727,"html":774},{"label":728,"html":775},{"label":740,"html":781},"The checked values. Pass an initial array for uncontrolled use, or \u003Ccode>v-model:value\u003C\u002Fcode> to control it.",{"summary":783,"detail":786},[784,785,746],"\u003Ccode>update:value\u003C\u002Fcode>","\u003Ccode>(value: string[]) => void\u003C\u002Fcode>",[787,788,789,790],{"label":726,"html":784},{"label":727,"html":785},{"label":728,"html":746},{"label":740,"html":791},"Emitted when the checked values change.",{"summary":793,"detail":797},[794,795,796],"\u003Ccode>disabled\u003C\u002Fcode>","\u003Ccode>boolean\u003C\u002Fcode>","\u003Ccode>false\u003C\u002Fcode>",[798,799,800,801],{"label":726,"html":794},{"label":727,"html":795},{"label":728,"html":796},{"label":740,"html":802},"Whether the component should ignore user interaction.",{"summary":804,"detail":806},[805,745,746],"\u003Ccode>aria-labelledby\u003C\u002Fcode>",[807,808,809,810],{"label":726,"html":805},{"label":727,"html":745},{"label":728,"html":746},{"label":740,"html":811},"Accessible name for the group. Replaces the \u003Ccode>Field.Label\u003C\u002Fcode> association when wrapped in \u003Ccode>Field.Root\u003C\u002Fcode>.",{"summary":813,"detail":815},[814,745,746],"\u003Ccode>aria-describedby\u003C\u002Fcode>",[816,817,818,819],{"label":726,"html":814},{"label":727,"html":745},{"label":728,"html":746},{"label":740,"html":820},"Description IDs; merged with Field message IDs when wrapped in \u003Ccode>Field.Root\u003C\u002Fcode>.",{"summary":822,"detail":825},[823,824,746],"\u003Ccode>default\u003C\u002Fcode>","\u003Ccode>Slot<{ touched, dirty, filled, focused, valid, disabled }>\u003C\u002Fcode>",[826,827,828,829],{"label":726,"html":823},{"label":727,"html":824},{"label":728,"html":746},{"label":740,"html":830},"Content; receives the group's \u003Ccode>disabled\u003C\u002Fcode> state and the enclosing field's state.",[723,832,833,846],{},[834,835,836],"thead",{},[837,838,839,844],"tr",{},[840,841,843],"th",{"style":842},"text-align:left","Attribute",[840,845,740],{"style":842},[847,848,849,860,873,885,897,909,921],"tbody",{},[837,850,851,857],{},[852,853,854],"td",{"style":842},[41,855,856],{},"data-disabled",[852,858,859],{"style":842},"Present when the group is disabled.",[837,861,862,867],{},[852,863,864],{"style":842},[41,865,866],{},"data-valid",[852,868,869,870,872],{"style":842},"Present when the field is valid (when wrapped in ",[41,871,536],{},").",[837,874,875,880],{},[852,876,877],{"style":842},[41,878,879],{},"data-invalid",[852,881,882,883,872],{"style":842},"Present when the field is invalid (when wrapped in ",[41,884,536],{},[837,886,887,892],{},[852,888,889],{"style":842},[41,890,891],{},"data-touched",[852,893,894,895,872],{"style":842},"Present when the field has been touched (when wrapped in ",[41,896,536],{},[837,898,899,904],{},[852,900,901],{"style":842},[41,902,903],{},"data-dirty",[852,905,906,907,872],{"style":842},"Present when the value has changed from its initial value (when wrapped in ",[41,908,536],{},[837,910,911,916],{},[852,912,913],{"style":842},[41,914,915],{},"data-filled",[852,917,918,919,872],{"style":842},"Present when at least one checkbox is checked (when wrapped in ",[41,920,536],{},[837,922,923,928],{},[852,924,925],{"style":842},[41,926,927],{},"data-focused",[852,929,930,931,872],{"style":842},"Present when the group is focused (when wrapped in ",[41,932,536],{},"\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\"> { useId } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'vue'\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\"> { Checkbox } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Fcheckbox'\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\"> { CheckboxGroup } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Fcheckbox-group'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> useId\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:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> topics\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\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\">  { value: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'updates'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, label: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Updates'\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\">  { value: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'mentions'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, label: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Mentions'\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\">  { value: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'activity'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, label: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Activity'\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>\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\">CheckboxGroup\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    :\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\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'activity'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\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\">\"flex flex-col items-start gap-2 text-gray-900\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">aria-labelledby\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\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\">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\">\"text-sm font-semibold\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> :id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"id\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>Notify me about<\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\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">label\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"topic in topics\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"topic.value\"\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\">\"flex items-center gap-2 text-sm font-normal\"\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\">Checkbox.Root\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"topics\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\">\"topic.value\"\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\">\"flex size-4 shrink-0 items-center justify-center rounded-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-950 data-checked:bg-gray-900 data-unchecked:border data-unchecked:border-gray-300\"\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\">Checkbox.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\">\"flex text-gray-50 data-unchecked:hidden\"\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\">svg\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> viewBox\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"0 0 24 24\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"none\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> aria-hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"true\"\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\">\"size-4\"\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\">path\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">              d\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"M6 14.15L10.0321 18L18 7\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">              stroke\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"currentColor\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">              stroke-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"1.5\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">              stroke-linecap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"round\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">              stroke-linejoin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"round\"\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\">svg\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\">Checkbox.Indicator\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\">Checkbox.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\">      {{ topic.label }}\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\">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\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">CheckboxGroup\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>",1789390073259]