(() => {
  window.componentRegistry ||= {};
  window.componentRegistry["src-web/form-controls/index.html"] = {"showcase":"<div class=\"panel\">\n          <div class=\"panel-heading\"><div class=\"panel-title\">Checkbox / RadioGroup / Switch / Rate</div><div class=\"panel-note\">Value state is independent from interaction</div></div>\n          <div class=\"panel-body\">\n            <div class=\"grid cols-4\" style=\"gap:18px\">\n              <div>\n                <div class=\"rule-label\">Checkbox</div>\n                <div class=\"check-row dnf-ui\" data-checkbox role=\"checkbox\" tabindex=\"0\" aria-checked=\"false\"><span class=\"checkbox-control\"></span><span data-control-label>交互示例 · 未选择</span></div>\n                <div class=\"check-row dnf-ui is-emphasized\"><span class=\"checkbox-control\"></span> Emphasized</div>\n                <div class=\"check-row dnf-ui\"><span class=\"checkbox-control is-checked\"></span> 已选择</div>\n                <div class=\"check-row dnf-ui control-disabled\"><span class=\"checkbox-control\"></span> 已禁用</div>\n              </div>\n              <div data-radio-group role=\"radiogroup\" aria-label=\"效果强度\">\n                <div class=\"rule-label\">RadioGroup</div>\n                <div class=\"radio-row dnf-ui\" data-radio role=\"radio\" tabindex=\"0\" aria-checked=\"true\">关闭</div>\n                <div class=\"radio-row dnf-ui\" data-radio role=\"radio\" tabindex=\"-1\" aria-checked=\"false\">弱</div>\n                <div class=\"radio-row dnf-ui\" data-radio role=\"radio\" tabindex=\"-1\" aria-checked=\"false\">强</div>\n                <div class=\"radio-row dnf-ui control-disabled\">禁用</div>\n              </div>\n              <div>\n                <div class=\"rule-label\">Switch</div>\n                <div class=\"switch-row dnf-ui\" data-switch role=\"switch\" tabindex=\"0\" aria-checked=\"false\"><span data-control-label>Interactive · Off</span></div>\n                <div class=\"switch-row dnf-ui is-hover\">Hover</div>\n                <div class=\"switch-row dnf-ui is-on\">On</div>\n                <div class=\"switch-row dnf-ui control-disabled\">Disabled</div>\n              </div>\n              <div>\n                <div class=\"rule-label\">Rate · Value = 1 / 5</div>\n                <div class=\"rate dnf-ui\" data-rate role=\"slider\" tabindex=\"0\" aria-label=\"评分\" aria-valuemin=\"0\" aria-valuemax=\"5\" aria-valuenow=\"1\">\n                  <img data-rate-item src=\"src-web/form-controls/img/sprite_interface2_popup_menu.NPK/popup_icon_npc.img/126.PNG\" alt=\"第 1 星\">\n                  <img data-rate-item src=\"src-web/form-controls/img/sprite_interface2_popup_menu.NPK/popup_icon_npc.img/149.PNG\" alt=\"第 2 星\">\n                  <img data-rate-item src=\"src-web/form-controls/img/sprite_interface2_popup_menu.NPK/popup_icon_npc.img/149.PNG\" alt=\"第 3 星\">\n                  <img data-rate-item src=\"src-web/form-controls/img/sprite_interface2_popup_menu.NPK/popup_icon_npc.img/149.PNG\" alt=\"第 4 星\">\n                  <img data-rate-item src=\"src-web/form-controls/img/sprite_interface2_popup_menu.NPK/popup_icon_npc.img/149.PNG\" alt=\"第 5 星\">\n                </div>\n                <div class=\"token-label\" style=\"margin-top:12px\">Value = Number 0–5<br>Readonly = Boolean<br>Star = raster asset</div>\n              </div>\n            </div>\n            <div class=\"divider\"></div>\n            <div class=\"spec-row\"><span class=\"spec-chip\">Checked = Off · On · Mixed</span><span class=\"spec-chip\">Interaction = Rest · Hover · Focus · Disabled</span></div>\n          </div>\n        </div>"};
})();