[{"data":1,"prerenderedAt":18},["ShallowReactive",2],{"page-c-popover":3},{"examplesHtml":4,"typesHtml":14,"usageHtml":17},{"c-popover\u002Fbasic":5},{"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-popover\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> heading\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">\"Display settings\"\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-button\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> slot\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">\"trigger\"\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> outlined\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">        Display settings\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-icon\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> :path\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">\"mdiTuneVariant\"\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> \u002F>\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-button\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\">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-grid\"\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-switch\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\">\"compact\"\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>Compact rows<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-switch\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-switch\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\">\"showIds\"\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>Show identifiers<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-switch\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\">c-popover\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\">>Compact: {{ compact }}, identifiers: {{ showIds }}<\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\">import\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> { \u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">mdiTuneVariant\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\"> '@mdi\u002Fjs'\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\"> compact\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\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\">const\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#E5C07B\"> showIds\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\">true\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\">mdiTuneVariant\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\"> '@mdi\u002Fjs'\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\">CButton\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">CIcon\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">CPopover\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">CSwitch\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\">compact\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#E5C07B\">setCompact\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\">\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\">showIds\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#E5C07B\">setShowIds\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\">true\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\">CPopover\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-light-font-style:inherit;--shiki-dark:#D19A66;--shiki-dark-font-style:italic\"> heading\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#56B6C2\">=\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">\"Display settings\"\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\">CButton\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-light-font-style:inherit;--shiki-dark:#D19A66;--shiki-dark-font-style:italic\"> slot\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#56B6C2\">=\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">\"trigger\"\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-light-font-style:inherit;--shiki-dark:#D19A66;--shiki-dark-font-style:italic\"> outlined\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">          Display settings\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">          <\u003C\u002Fspan>\u003Cspan style=\"color:#C18401;--shiki-dark:#E5C07B\">CIcon\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-light-font-style:inherit;--shiki-dark:#D19A66;--shiki-dark-font-style:italic\"> path\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\">mdiTuneVariant\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#C678DD\">}\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> \u002F>\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\">CButton\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\">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-grid\"\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\">CSwitch\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\">            value\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\">compact\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\">            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\"> setCompact\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\">            Compact rows\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\">CSwitch\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:#C18401;--shiki-dark:#E5C07B\">CSwitch\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\">            value\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\">showIds\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\">            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\"> setShowIds\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\">            Show identifiers\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\">CSwitch\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:#C18401;--shiki-dark:#E5C07B\">CPopover\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\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">        Compact: \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\">compact\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\">, identifiers: \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\">showIds\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\">      <\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\">\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\">mdiTuneVariant\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\"> '@mdi\u002Fjs'\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-popover heading=\"Display settings\">\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">        <c-button slot=\"trigger\" outlined>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">          Display settings\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">          <c-icon [path]=\"mdiTuneVariant\" \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">        <\u002Fc-button>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">        <div class=\"example-grid\">\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">          <c-switch\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">            [value]=\"compact()\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">            (changeValue)=\"compact.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\">            Compact rows\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">          <\u002Fc-switch>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">          <c-switch\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">            [value]=\"showIds()\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">            (changeValue)=\"showIds.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\">            Show identifiers\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">          <\u002Fc-switch>\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\">      <\u002Fc-popover>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">      <p>Compact: {{ compact() }}, identifiers: {{ showIds() }}<\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\">  mdiTuneVariant\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#E06C75\"> mdiTuneVariant\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:#E06C75\">  compact\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\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#E06C75\">  showIds\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\">true\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],"\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-popover\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> heading\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">\"Display settings\"\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-button\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> slot\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\">\"trigger\"\u003C\u002Fspan>\u003Cspan style=\"color:#986801;--shiki-dark:#D19A66\"> outlined\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">    Display settings\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-icon\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-icon\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\">c-button\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\">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-grid\"\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-switch\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>Compact rows<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-switch\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-switch\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>Show identifiers<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#E45649;--shiki-dark:#E06C75\">c-switch\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\">c-popover\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"CPopoverProps":15,"CPlacement":16},"\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\">export\u003C\u002Fspan>\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\"> interface\u003C\u002Fspan>\u003Cspan style=\"color:#C18401;--shiki-dark:#E5C07B\"> CPopoverProps\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\"> {\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\">  \u002F** Distance from the trigger to the panel, in pixels. Defaults to `0`. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#E06C75\">  distance\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#C678DD\">?\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">:\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#E5C07B\"> number\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\"> |\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#E5C07B\"> string\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">;\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\">  \u002F**\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\">   * Heading rendered at the top of the panel, doubling as its accessible\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\">   * name. Without it, set `aria-label` on the host. Named `heading`, not\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\">   * `title`: a `title` attribute on the host would trigger the browser's\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\">   * native tooltip and collides with `HTMLElement.title`.\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\">   * \u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-light-font-style:italic;--shiki-dark:#C678DD;--shiki-dark-font-style:italic\">@\u003C\u002Fspan>\u003Cspan style=\"color:#A626A4;--shiki-light-font-style:italic;--shiki-dark:#C678DD;--shiki-dark-font-style:italic\">freeform\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\">   *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#E06C75\">  heading\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#C678DD\">?\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">:\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#E5C07B\"> string\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">;\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\">  \u002F** Whether the popover is open. Two-way: emits `change:open`. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#E06C75\">  open\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#C678DD\">?\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">:\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:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">  \u002F** Preferred placement of the panel relative to the trigger. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#E06C75\">  position\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#C678DD\">?\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">:\u003C\u002Fspan>\u003Cspan style=\"color:#C18401;--shiki-dark:#E5C07B\"> CPlacement\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">;\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\">  \u002F**\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\">   * Designated trigger: an element elsewhere in the document that opens the\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\">   * popover — its document ID, or the element itself. The same trigger\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\">   * concept as the `trigger` slot, supplied by reference: the popover wires\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\">   * click-to-toggle, ARIA and focus return onto it and anchors the panel to\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\">   * it. When both routes are supplied, this prop wins over the slot.\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\">   *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#383A42;--shiki-dark:#E06C75\">  trigger\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#C678DD\">?\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">:\u003C\u002Fspan>\u003Cspan style=\"color:#C18401;--shiki-dark:#E5C07B\"> HTMLElement\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\"> |\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#E5C07B\"> string\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>\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\">export\u003C\u002Fspan>\u003Cspan style=\"color:#A626A4;--shiki-dark:#C678DD\"> type\u003C\u002Fspan>\u003Cspan style=\"color:#C18401;--shiki-dark:#E5C07B\"> CPlacement\u003C\u002Fspan>\u003Cspan style=\"color:#0184BC;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">  |\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\"> 'bottom-end'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">  |\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\"> 'bottom-start'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">  |\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\"> 'bottom'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">  |\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\"> 'left-end'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">  |\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\"> 'left-start'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">  |\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\"> 'left'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">  |\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\"> 'right-end'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">  |\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\"> 'right-start'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">  |\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\"> 'right'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">  |\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\"> 'top-end'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">  |\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\"> 'top-start'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#0184BC;--shiki-dark:#ABB2BF\">  |\u003C\u002Fspan>\u003Cspan style=\"color:#50A14F;--shiki-dark:#98C379\"> 'top'\u003C\u002Fspan>\u003Cspan style=\"color:#383A42;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cp>Put the element that opens the popover in the \u003Ccode>trigger\u003C\u002Fcode> slot and the content in the default slot. An optional \u003Ccode>heading\u003C\u002Fcode> prop renders a heading and doubles as the panel's accessible name (it is not called \u003Ccode>title\u003C\u002Fcode> — a \u003Ccode>title\u003C\u002Fcode> attribute would trigger the browser's native tooltip). The popover is deliberately minimal: compose footers, actions, or a close button from existing components (e.g. \u003Ccode>c-button\u003C\u002Fcode>) inside the body.\u003C\u002Fp>\n\u003Ch2>Designated trigger\u003C\u002Fh2>\n\u003Cp>When the opener cannot be slotted — a button living elsewhere in the layout — point the \u003Ccode>trigger\u003C\u002Fcode> prop at it instead: the ID of the element, or the element itself via property binding. The two routes are the same concept: the popover wires click-to-toggle onto the designated element, mirrors \u003Ccode>aria-haspopup\u003C\u002Fcode>\u002F\u003Ccode>aria-expanded\u003C\u002Fcode>, returns focus to it on Escape, anchors the panel to it, and clicking it never counts as a light dismiss. Supplying both routes is a misuse: the prop wins, the slotted element gets no wiring, and a console warning flags it.\u003C\u002Fp>\n\u003Ch2>When to use\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>Contextual, dismissable UI attached to a control: a small settings panel, a confirm-lite prompt, help content with links.\u003C\u002Fli>\n\u003Cli>Not for a plain text hint — use \u003Ccode>c-tooltip\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>Not for blocking flows the user must complete — the popover never traps focus or blocks the page; use \u003Ccode>c-modal\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Dismissal\u003C\u002Fh2>\n\u003Cp>Clicking outside the popover or pressing Escape closes it. Escape returns focus to the trigger when focus was inside the panel; light dismiss leaves focus where the user clicked. Focus is not moved into the panel on open — Tab reaches the content naturally from the trigger.\u003C\u002Fp>\n\u003Ch2>Nesting\u003C\u002Fh2>\n\u003Cp>Popovers nest: a control inside one popover's panel can open another. The open popovers form a popover chain — each nested in the previous one; opening a popover whose trigger is not inside the open one closes it first, so sibling popovers never coexist. Escape closes only the innermost popover, one press per layer; clicking outside closes every popover that does not contain the click (clicking in a parent panel closes just its child); closing a popover closes everything nested inside it. Nesting follows the trigger, not the markup — a popover opened from a designated trigger inside another popover's panel chains under it even though its host element lives elsewhere.\u003C\u002Fp>\n\u003Ch2>Accessibility\u003C\u002Fh2>\n\u003Cp>The panel is a non-modal \u003Ccode>role="dialog"\u003C\u002Fcode> and needs an accessible name: the \u003Ccode>heading\u003C\u002Fcode> prop provides one, or set \u003Ccode>aria-label\u003C\u002Fcode> on the \u003Ccode>c-popover\u003C\u002Fcode> element (\u003Ccode>aria-labelledby\u003C\u002Fcode> cannot reference slotted content across the shadow boundary). The component warns in the console when it opens unnamed. \u003Ccode>aria-haspopup="dialog"\u003C\u002Fcode> and \u003Ccode>aria-expanded\u003C\u002Fcode> are mirrored onto the slotted trigger.\u003C\u002Fp>\n\u003Ch2>Layering\u003C\u002Fh2>\n\u003Cp>The panel is a native popover in the top layer: it is never clipped by ancestor overflow and needs no z-index management, even when opened from inside a modal.\u003C\u002Fp>\n\u003Ch2>Customization\u003C\u002Fh2>\n\u003Cp>Structural styling via \u003Ccode>::part(trigger)\u003C\u002Fcode>, \u003Ccode>::part(panel)\u003C\u002Fcode> and \u003Ccode>::part(heading)\u003C\u002Fcode>. Colours come from the overlay-surface semantic tokens (\u003Ccode>--c-surface-overlay\u003C\u002Fcode>, \u003Ccode>--c-on-surface\u003C\u002Fcode>); override the tokens to re-theme.\u003C\u002Fp>\n",1788348227406]