[{"data":1,"prerenderedAt":26},["ShallowReactive",2],{"page-c-checkbox":3},{"examplesHtml":4,"typesHtml":24,"usageHtml":25},{"c-checkbox\u002Fbasic":5,"c-checkbox\u002Fstates":15},{"vue":6,"react":8,"angular":10,"typescript":12},[7],"\u003Cpre class=\"shiki shiki-themes one-light one-dark-pro\" style=\"background-color:#FAFAFA;--shiki-dark-bg:#282c34;color:#383A42;--shiki-dark:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">template\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">\"example-row\"\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> v-model\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">\"subscribed\"\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> hint\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">\"You can unsubscribe at any time\"\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">      Subscribe to the newsletter\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">p\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>Value: {{ subscribed }}<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">p\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">template\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">script\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> setup\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> lang\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">import\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> { \u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">ref\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> } \u003C\u002Fspan>\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">from\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">const\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#E5C07B\"> subscribed\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#4078F2;--shiki-dark:#61AFEF\"> ref\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\">false\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">script\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[9],"\u003Cpre class=\"shiki shiki-themes one-light one-dark-pro\" style=\"background-color:#FAFAFA;--shiki-dark-bg:#282c34;color:#383A42;--shiki-dark:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">import\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> { \u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">useState\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> } \u003C\u002Fspan>\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">from\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\"> 'react'\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">import\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> { \u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">CCheckbox\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> } \u003C\u002Fspan>\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">from\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\"> '@cscfi\u002Fcsc-ui-react'\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">export\u003C\u002Fspan>\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\"> const\u003C\u002Fspan>\u003Cspan style=\"color:#4078F2;--shiki-dark:#61AFEF\"> Basic\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> () \u003C\u002Fspan>\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> [\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#E5C07B\">subscribed\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#E5C07B\">setSubscribed\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">] \u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#56B6C2\">=\u003C\u002Fspan>\u003Cspan style=\"color:#4078F2;--shiki-dark:#61AFEF\"> useState\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\">false\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">  return\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> (\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-light-font-style:inherit;--shiki-dark:#D19A66;--shiki-dark-font-style:italic\"> className\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#56B6C2\">=\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">\"example-row\"\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#C18401;--shiki-dark:#E5C07B\">CCheckbox\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#986801;--shiki-light-font-style:inherit;--shiki-dark:#D19A66;--shiki-dark-font-style:italic\">        checked\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#56B6C2\">=\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#C678DD\">{\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#E06C75\">subscribed\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#C678DD\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#986801;--shiki-light-font-style:inherit;--shiki-dark:#D19A66;--shiki-dark-font-style:italic\">        hint\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#56B6C2\">=\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">\"You can unsubscribe at any time\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#986801;--shiki-light-font-style:inherit;--shiki-dark:#D19A66;--shiki-dark-font-style:italic\">        onChangeValue\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#56B6C2\">=\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#C678DD\">{\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic\">event\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">) \u003C\u002Fspan>\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#4078F2;--shiki-dark:#61AFEF\"> setSubscribed\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E5C07B\">event\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">detail\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#C678DD\"> as\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#E5C07B\"> boolean\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">)\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#C678DD\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">      >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">        Subscribe to the newsletter\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#C18401;--shiki-dark:#E5C07B\">CCheckbox\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">p\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>Value: \u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#C678DD\">{\u003C\u002Fspan>\u003Cspan style=\"color:#4078F2;--shiki-dark:#61AFEF\">String\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#E06C75\">subscribed\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">)\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#C678DD\">}\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">p\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">  );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[11],"\u003Cpre class=\"shiki shiki-themes one-light one-dark-pro\" style=\"background-color:#FAFAFA;--shiki-dark-bg:#282c34;color:#383A42;--shiki-dark:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">import\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> { \u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">Component\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">CUSTOM_ELEMENTS_SCHEMA\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">signal\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> } \u003C\u002Fspan>\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">from\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\"> '@angular\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">@\u003C\u002Fspan>\u003Cspan style=\"color:#4078F2;--shiki-dark:#61AFEF\">Component\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">  selector\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">:\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\"> 'app-example'\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">  standalone\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">:\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> true\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">  schemas\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">:\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> [\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#E5C07B\">CUSTOM_ELEMENTS_SCHEMA\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">  template\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">:\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\"> `\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">    <div class=\"example-row\">\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">      <c-checkbox\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">        [checked]=\"subscribed()\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">        hint=\"You can unsubscribe at any time\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">        (changeValue)=\"subscribed.set($any($event).detail)\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">      >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">        Subscribe to the newsletter\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">      <\u002Fc-checkbox>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">      <p>Value: {{ subscribed() }}<\u002Fp>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">  `\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">})\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">export\u003C\u002Fspan>\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#C18401;--shiki-dark:#E5C07B\"> BasicExampleComponent\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#E06C75\">  subscribed\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#4078F2;--shiki-dark:#61AFEF\"> signal\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\">false\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[13,14],"\u003Cpre class=\"shiki shiki-themes one-light one-dark-pro\" style=\"background-color:#FAFAFA;--shiki-dark-bg:#282c34;color:#383A42;--shiki-dark:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> hint\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">\"You can unsubscribe at any time\"\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">  Subscribe to the newsletter\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">p\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>Value: false<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">p\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki shiki-themes one-light one-dark-pro\" style=\"background-color:#FAFAFA;--shiki-dark-bg:#282c34;color:#383A42;--shiki-dark:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">const\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#E5C07B\"> checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#E5C07B\"> document\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#4078F2;--shiki-dark:#61AFEF\">querySelector\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">'c-checkbox'\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">)\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#56B6C2\">!\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">const\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#E5C07B\"> status\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#E5C07B\"> document\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#4078F2;--shiki-dark:#61AFEF\">querySelector\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">'p'\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">)\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#56B6C2\">!\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#E5C07B\">checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#4078F2;--shiki-dark:#61AFEF\">addEventListener\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">'changeValue'\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">, (\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic\">event\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">) \u003C\u002Fspan>\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#E5C07B\">  checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">checked\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#E5C07B\"> event\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">detail\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#C678DD\"> as\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#E5C07B\"> boolean\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#E5C07B\">  status\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">textContent\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\"> `Value: \u003C\u002Fspan>\u003Cspan style=\"color:#CA1243;--shiki-dark:#C678DD\">${\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#E5C07B\">event\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">detail\u003C\u002Fspan>\u003Cspan style=\"color:#CA1243;--shiki-dark:#C678DD\">}\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">`\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"vue":16,"react":18,"angular":20,"typescript":22},[17],"\u003Cpre class=\"shiki shiki-themes one-light one-dark-pro\" style=\"background-color:#FAFAFA;--shiki-dark-bg:#282c34;color:#383A42;--shiki-dark:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">template\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">\"example-row\"\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> hide-details\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>Unchecked<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> checked\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> hide-details\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>Checked<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> indeterminate\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> hide-details\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>Indeterminate<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> disabled\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> hide-details\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>Disabled<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> checked\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> disabled\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> hide-details\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>Checked and disabled<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">template\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[19],"\u003Cpre class=\"shiki shiki-themes one-light one-dark-pro\" style=\"background-color:#FAFAFA;--shiki-dark-bg:#282c34;color:#383A42;--shiki-dark:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">import\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> { \u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">CCheckbox\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> } \u003C\u002Fspan>\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">from\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\"> '@cscfi\u002Fcsc-ui-react'\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">export\u003C\u002Fspan>\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\"> const\u003C\u002Fspan>\u003Cspan style=\"color:#4078F2;--shiki-dark:#61AFEF\"> States\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> () \u003C\u002Fspan>\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> (\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-light-font-style:inherit;--shiki-dark:#D19A66;--shiki-dark-font-style:italic\"> className\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#56B6C2\">=\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">\"example-row\"\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#C18401;--shiki-dark:#E5C07B\">CCheckbox\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-light-font-style:inherit;--shiki-dark:#D19A66;--shiki-dark-font-style:italic\"> hideDetails\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>Unchecked<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#C18401;--shiki-dark:#E5C07B\">CCheckbox\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#C18401;--shiki-dark:#E5C07B\">CCheckbox\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-light-font-style:inherit;--shiki-dark:#D19A66;--shiki-dark-font-style:italic\"> checked\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-light-font-style:inherit;--shiki-dark:#D19A66;--shiki-dark-font-style:italic\"> hideDetails\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">      Checked\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#C18401;--shiki-dark:#E5C07B\">CCheckbox\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#C18401;--shiki-dark:#E5C07B\">CCheckbox\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-light-font-style:inherit;--shiki-dark:#D19A66;--shiki-dark-font-style:italic\"> indeterminate\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-light-font-style:inherit;--shiki-dark:#D19A66;--shiki-dark-font-style:italic\"> hideDetails\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">      Indeterminate\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#C18401;--shiki-dark:#E5C07B\">CCheckbox\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#C18401;--shiki-dark:#E5C07B\">CCheckbox\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-light-font-style:inherit;--shiki-dark:#D19A66;--shiki-dark-font-style:italic\"> disabled\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-light-font-style:inherit;--shiki-dark:#D19A66;--shiki-dark-font-style:italic\"> hideDetails\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">      Disabled\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#C18401;--shiki-dark:#E5C07B\">CCheckbox\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#C18401;--shiki-dark:#E5C07B\">CCheckbox\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-light-font-style:inherit;--shiki-dark:#D19A66;--shiki-dark-font-style:italic\"> checked\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-light-font-style:inherit;--shiki-dark:#D19A66;--shiki-dark-font-style:italic\"> disabled\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-light-font-style:inherit;--shiki-dark:#D19A66;--shiki-dark-font-style:italic\"> hideDetails\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">      Checked and disabled\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#C18401;--shiki-dark:#E5C07B\">CCheckbox\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">div\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[21],"\u003Cpre class=\"shiki shiki-themes one-light one-dark-pro\" style=\"background-color:#FAFAFA;--shiki-dark-bg:#282c34;color:#383A42;--shiki-dark:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">import\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> { \u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">Component\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">CUSTOM_ELEMENTS_SCHEMA\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> } \u003C\u002Fspan>\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">from\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\"> '@angular\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">@\u003C\u002Fspan>\u003Cspan style=\"color:#4078F2;--shiki-dark:#61AFEF\">Component\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">  selector\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">:\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\"> 'app-example'\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">  standalone\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">:\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> true\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">  schemas\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">:\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> [\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#E5C07B\">CUSTOM_ELEMENTS_SCHEMA\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">  template\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">:\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\"> `\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">    <div class=\"example-row\">\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">      <c-checkbox hide-details>Unchecked<\u002Fc-checkbox>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">      <c-checkbox checked hide-details>Checked<\u002Fc-checkbox>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">      <c-checkbox indeterminate hide-details>Indeterminate<\u002Fc-checkbox>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">      <c-checkbox disabled hide-details>Disabled<\u002Fc-checkbox>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">      <c-checkbox checked disabled hide-details>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">        Checked and disabled\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">      <\u002Fc-checkbox>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">  `\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">})\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">export\u003C\u002Fspan>\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#C18401;--shiki-dark:#E5C07B\"> StatesExampleComponent\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> {}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[23],"\u003Cpre class=\"shiki shiki-themes one-light one-dark-pro\" style=\"background-color:#FAFAFA;--shiki-dark-bg:#282c34;color:#383A42;--shiki-dark:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> hide-details\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>Unchecked<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> checked\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> hide-details\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>Checked<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> indeterminate\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> hide-details\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>Indeterminate<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> disabled\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> hide-details\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>Disabled<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> checked\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> disabled\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> hide-details\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>Checked and disabled<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{},"\u003Cp>Bind the state with a plain \u003Ccode>v-model\u003C\u002Fcode> (or the \u003Ccode>checked\u003C\u002Fcode> prop); \u003Ccode>true-value\u003C\u002Fcode> \u002F\n\u003Ccode>false-value\u003C\u002Fcode> map the checked state onto custom values. Set \u003Ccode>indeterminate\u003C\u002Fcode>\nfor the mixed "some but not all" state of a parent checkbox.\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes one-light one-dark-pro\" style=\"background-color:#FAFAFA;--shiki-dark-bg:#282c34;color:#383A42;--shiki-dark:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> v-model\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">\"accepted\"\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> label\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">\"I accept the terms\"\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Set \u003Ccode>hint\u003C\u002Fcode> for a persistent helper line below the control; while \u003Ccode>valid\u003C\u002Fcode> is\n\u003Ccode>false\u003C\u002Fcode>, \u003Ccode>error-message\u003C\u002Fcode> replaces it. \u003Ccode>hide-details\u003C\u002Fcode> removes the message area\nentirely.\u003C\u002Fp>\n\u003Ch2>When to use\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>A single independent yes\u002Fno choice (consent, feature toggle in a form).\u003C\u002Fli>\n\u003Cli>A list where several options can be selected at once.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>When not to use\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>Choosing exactly one of several options — use \u003Ccode>c-radio-group\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>Switching a setting that takes effect immediately — use \u003Ccode>c-switch\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Customization\u003C\u002Fh2>\n\u003Cp>Restyle via CSS parts from your own stylesheet. The \u003Ccode>indicator\u003C\u002Fcode> part is the\ncheckbox box and \u003Ccode>mark\u003C\u002Fcode> is the check glyph inside it. The indicator's border,\nits checked fill and its keyboard focus ring all draw with \u003Ccode>currentColor\u003C\u002Fcode>, so\none \u003Ccode>color\u003C\u002Fcode> recolours the three together; the host exposes the \u003Ccode>checked\u003C\u002Fcode> and\n\u003Ccode>indeterminate\u003C\u002Fcode> custom states, so the box is also stylable per state:\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes one-light one-dark-pro\" style=\"background-color:#FAFAFA;--shiki-dark-bg:#282c34;color:#383A42;--shiki-dark:#abb2bf\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">\u002F* Border, checked fill and focus ring follow `color`. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">::part(indicator\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">  color: \u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#56B6C2\">var\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">--my-green\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">\u002F* The mark draws with currentColor too — recolour it via `color`. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">:state(checked\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">)\u003C\u002Fspan>\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">::part(\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">mark\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">  color: \u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\">black\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">\u002F* Finer control still works per property and per state (the focus ring\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">   keeps following `color`, not these). *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-checkbox\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#56B6C2\">:not\u003C\u002Fspan>\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">(:state(checked)\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">)\u003C\u002Fspan>\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">::part(indicator\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">  border-color: \u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\">gray\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>For app-wide recolouring prefer the design tokens (\u003Ccode>--c-primary\u003C\u002Fcode> seed) over\nper-component rules.\u003C\u002Fp>\n",1788348223167]