{
  "default": "<j3w1-text-field id=\"example-text-field-default\"><div class=\"text-field\">\n  <label class=\"text-field-label\" for=\"example-text-field-default-tf-name\">Display name <span class=\"text-field-required\" aria-hidden=\"true\">*</span><span class=\"text-field-required sr-only\"> required</span></label>\n  <div class=\"text-field-root\">\n    <input class=\"text-field-input\" id=\"example-text-field-default-tf-name\" type=\"text\" value=\"j3w1\" placeholder=\"Your name\" aria-describedby=\"example-text-field-default-tf-name-help example-text-field-default-tf-name-message\" name=\"example-text-field-default-tf-name\">\n    <span class=\"text-field-loading\" aria-hidden=\"true\">⋯</span>\n  </div>\n  <p class=\"text-field-help\" id=\"example-text-field-default-tf-name-help\">Shown on your profile and in the window title.</p>\n  <p class=\"text-field-message\" id=\"example-text-field-default-tf-name-message\">✕ Use 2 to 32 characters.</p>\n</div></j3w1-text-field>",
  "password": "<j3w1-text-field id=\"example-text-field-password\"><div class=\"text-field\">\n  <label class=\"text-field-label\" for=\"example-text-field-password-tf-pass\">Passphrase <span class=\"text-field-required\" aria-hidden=\"true\">*</span><span class=\"text-field-required sr-only\"> required</span></label>\n  <div class=\"text-field-root\">\n    <input class=\"text-field-input\" id=\"example-text-field-password-tf-pass\" type=\"password\" required=\"\" value=\"correct horse\" placeholder=\"At least 12 characters\" aria-describedby=\"example-text-field-password-tf-pass-help example-text-field-password-tf-pass-message\" name=\"example-text-field-password-tf-pass\">\n    <button class=\"text-field-action\" type=\"button\" aria-pressed=\"false\" aria-label=\"Reveal passphrase\">reveal</button>\n    <span class=\"text-field-loading\" aria-hidden=\"true\">⋯</span>\n  </div>\n  <p class=\"text-field-help\" id=\"example-text-field-password-tf-pass-help\">Twelve characters or more; spaces allowed.</p>\n  <p class=\"text-field-message\" id=\"example-text-field-password-tf-pass-message\">✕ Too short.</p>\n</div></j3w1-text-field>",
  "search": "<j3w1-text-field id=\"example-text-field-search\"><div class=\"text-field\">\n  <label class=\"text-field-label\" for=\"example-text-field-search-tf-search\">Search files <span class=\"text-field-required\" aria-hidden=\"true\">*</span><span class=\"text-field-required sr-only\"> required</span></label>\n  <div class=\"text-field-root\">\n    <span class=\"text-field-affix\" aria-hidden=\"true\">/</span>\n    <input class=\"text-field-input\" id=\"example-text-field-search-tf-search\" type=\"search\" value=\"site.css\" placeholder=\"Name or path\" aria-describedby=\"example-text-field-search-tf-search-help example-text-field-search-tf-search-message\">\n    <button class=\"text-field-action\" type=\"button\" aria-label=\"Clear search\">clear</button>\n    <span class=\"text-field-loading\" aria-hidden=\"true\">⋯</span>\n  </div>\n  <p class=\"text-field-help\" id=\"example-text-field-search-tf-search-help\">Escape clears the query.</p>\n  <p class=\"text-field-message\" id=\"example-text-field-search-tf-search-message\">✕ No such path.</p>\n</div></j3w1-text-field>",
  "number": "<j3w1-text-field id=\"example-text-field-number\"><div class=\"text-field\">\n  <label class=\"text-field-label\" for=\"example-text-field-number-tf-gap\">Inner gap <span class=\"text-field-required\" aria-hidden=\"true\">*</span><span class=\"text-field-required sr-only\"> required</span></label>\n  <div class=\"text-field-root\">\n    <input class=\"text-field-input text-field-input-numeric\" id=\"example-text-field-number-tf-gap\" type=\"number\" value=\"14\" min=\"0\" max=\"64\" step=\"1\" placeholder=\"0\" aria-describedby=\"example-text-field-number-tf-gap-help example-text-field-number-tf-gap-message\" name=\"example-text-field-number-tf-gap\">\n    <span class=\"text-field-affix\" aria-hidden=\"true\">px</span>\n    <span class=\"text-field-stepper\">\n      <button class=\"text-field-action\" type=\"button\" aria-label=\"Increase inner gap\">+</button>\n      <button class=\"text-field-action\" type=\"button\" aria-label=\"Decrease inner gap\">−</button>\n    </span>\n    <span class=\"text-field-loading\" aria-hidden=\"true\">⋯</span>\n  </div>\n  <p class=\"text-field-help\" id=\"example-text-field-number-tf-gap-help\">Up and Down step by one; Shift steps by ten.</p>\n  <p class=\"text-field-message\" id=\"example-text-field-number-tf-gap-message\">✕ Between 0 and 64.</p>\n</div></j3w1-text-field>",
  "affix": "<j3w1-text-field id=\"example-text-field-affix\"><div class=\"text-field\">\n  <label class=\"text-field-label\" for=\"example-text-field-affix-tf-site\">Site <span class=\"text-field-required\" aria-hidden=\"true\">*</span><span class=\"text-field-required sr-only\"> required</span></label>\n  <div class=\"text-field-root\">\n    <span class=\"text-field-affix\" aria-hidden=\"true\">https://</span>\n    <input class=\"text-field-input\" id=\"example-text-field-affix-tf-site\" type=\"text\" value=\"j3w1.github.io\" placeholder=\"host\" aria-describedby=\"example-text-field-affix-tf-site-help example-text-field-affix-tf-site-message\" name=\"example-text-field-affix-tf-site\">\n    <span class=\"text-field-affix\" aria-hidden=\"true\">/theme/</span>\n    <span class=\"text-field-loading\" aria-hidden=\"true\">⋯</span>\n  </div>\n  <p class=\"text-field-help\" id=\"example-text-field-affix-tf-site-help\">Host only; the path is fixed.</p>\n  <p class=\"text-field-message\" id=\"example-text-field-affix-tf-site-message\">✕ Not a valid host.</p>\n</div></j3w1-text-field>"
}