@taprootio/espalier 2.8.0 → 2.8.1

package/custom-elements.json

@@ -7096,196 +7096,237 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/checkbox/esp-checkbox-group.js",
+      "path": "dist/button/action-state-lightness.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "BUTTON_ICON_SPLIT_LIGHTNESS_FACTOR",
+          "type": {
+            "text": "number"
+          },
+          "default": "0.9"
+        },
+        {
+          "kind": "variable",
+          "name": "BUTTON_INTERACTION_LIGHTNESS_FACTOR",
+          "type": {
+            "text": "number"
+          },
+          "default": "0.88"
+        },
+        {
+          "kind": "variable",
+          "name": "BUTTON_ICON_INTERACTION_LIGHTNESS_FACTOR",
+          "type": {
+            "text": "number"
+          },
+          "default": "0.8"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BUTTON_ICON_SPLIT_LIGHTNESS_FACTOR",
+          "declaration": {
+            "name": "BUTTON_ICON_SPLIT_LIGHTNESS_FACTOR",
+            "module": "dist/button/action-state-lightness.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "BUTTON_INTERACTION_LIGHTNESS_FACTOR",
+          "declaration": {
+            "name": "BUTTON_INTERACTION_LIGHTNESS_FACTOR",
+            "module": "dist/button/action-state-lightness.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "BUTTON_ICON_INTERACTION_LIGHTNESS_FACTOR",
+          "declaration": {
+            "name": "BUTTON_ICON_INTERACTION_LIGHTNESS_FACTOR",
+            "module": "dist/button/action-state-lightness.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/button/esp-button-group.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Groups multiple [esp-checkbox](/components/checkbox)\ncomponents and manages their collective state. Works with\n[esp-form-item](/components/form-item) for label and\nerror message integration.\n\n```html\n<esp-box>\n  <esp-form-item label=\"Select toppings\">\n    <esp-checkbox-group>\n      <esp-checkbox value=\"cheese\">Cheese</esp-checkbox>\n      <esp-checkbox value=\"pepperoni\">Pepperoni</esp-checkbox>\n      <esp-checkbox value=\"mushrooms\">Mushrooms</esp-checkbox>\n    </esp-checkbox-group>\n  </esp-form-item>\n</esp-box>\n```\n\n```html\n<esp-box>\n  <esp-form-item label=\"Disabled group\">\n    <esp-checkbox-group disabled>\n      <esp-checkbox value=\"a\">Option A</esp-checkbox>\n      <esp-checkbox value=\"b\" checked>Option B</esp-checkbox>\n      <esp-checkbox value=\"c\">Option C</esp-checkbox>\n    </esp-checkbox-group>\n  </esp-form-item>\n</esp-box>\n```",
-          "name": "EspalierCheckboxGroup",
+          "description": "Groups related buttons into a visually connected segmented control.\n\nChild `esp-button` elements lose their individual border-radius and\nmerge into a continuous strip; the group container provides the outer\nrounded corners and border.\n\n```html\n<esp-button-group label=\"Actions\">\n  <esp-button icon-only icon=\"save\" aria-label=\"Save\"></esp-button>\n  <esp-button icon-only icon=\"edit\" aria-label=\"Edit\"></esp-button>\n  <esp-button icon-only icon=\"trash\" aria-label=\"Delete\"></esp-button>\n</esp-button-group>\n```\n\nGroups can also contain labelled buttons:\n\n```html\n<esp-button-group label=\"Navigation\">\n  <esp-button label=\"Back\" icon=\"arrow-big-left\" collapsed></esp-button>\n  <esp-button label=\"Forward\" icon=\"arrow-big-right\" collapsed></esp-button>\n</esp-button-group>\n```\n\nButtons can be wrapped in `esp-tooltip` or `esp-popover`:\n\n```html\n<esp-button-group label=\"With tooltips\">\n  <esp-tooltip text=\"Save changes\">\n    <esp-button icon-only icon=\"save\" aria-label=\"Save\"></esp-button>\n  </esp-tooltip>\n  <esp-tooltip text=\"Edit item\">\n    <esp-button icon-only icon=\"edit\" aria-label=\"Edit\"></esp-button>\n  </esp-tooltip>\n  <esp-tooltip text=\"Delete item\">\n    <esp-button icon-only icon=\"trash\" aria-label=\"Delete\"></esp-button>\n  </esp-tooltip>\n</esp-button-group>\n```\n\nWhen the group has a fixed width and contains more buttons than\ncan fit, horizontal scrolling kicks in:\n\n```html\n<esp-button-group label=\"Many actions\" style=\"width: 360px;\">\n  <esp-button icon-only icon=\"save\" aria-label=\"Save\"></esp-button>\n  <esp-button icon-only icon=\"edit\" aria-label=\"Edit\"></esp-button>\n  <esp-button icon-only icon=\"upload\" aria-label=\"Upload\"></esp-button>\n  <esp-button icon-only icon=\"pin\" aria-label=\"Pin\"></esp-button>\n  <esp-button icon-only icon=\"cog\" aria-label=\"Settings\"></esp-button>\n  <esp-button icon-only icon=\"user\" aria-label=\"User\"></esp-button>\n  <esp-button icon-only icon=\"photo\" aria-label=\"Photo\"></esp-button>\n  <esp-button icon-only icon=\"rocket\" aria-label=\"Rocket\"></esp-button>\n  <esp-button icon-only icon=\"code\" aria-label=\"Code\"></esp-button>\n  <esp-button icon-only icon=\"palette\" aria-label=\"Palette\"></esp-button>\n  <esp-button icon-only icon=\"wand\" aria-label=\"Wand\"></esp-button>\n  <esp-button icon-only icon=\"tags\" aria-label=\"Tags\"></esp-button>\n</esp-button-group>\n```\n\nAdd the `toolbar` attribute to opt into the WAI-ARIA toolbar\npattern. This changes how the group sits in the tab order: instead of\nevery button being its own tab stop, the whole group becomes a *single*\ntab stop, and the arrow keys (plus `Home`/`End`) move focus between the\nbuttons inside it. Tabbing into the group lands on one button; the next\nTab leaves the group entirely. Use it when a group bundles many actions\n(for example an editor formatting bar) so keyboard users do not have to\nTab through every button.\n\nThe `esp-input` elements below sit before and after the group so the\nsingle-tab-stop behavior is easy to see: Tab from the first input lands\non one toolbar button, the arrow keys move between the buttons, and the\nnext Tab jumps straight to the second input.\n\n```html\n<esp-input value=\"Before\"></esp-input>\n<esp-button-group toolbar label=\"Document actions\">\n  <esp-button icon-only icon=\"save\" aria-label=\"Save\"></esp-button>\n  <esp-button icon-only icon=\"edit\" aria-label=\"Edit\"></esp-button>\n  <esp-button icon-only icon=\"upload\" aria-label=\"Upload\"></esp-button>\n  <esp-button icon-only icon=\"trash\" aria-label=\"Delete\"></esp-button>\n</esp-button-group>\n<esp-input value=\"After\"></esp-input>\n```\n\nWhen a button is wrapped in an `esp-tooltip`, the group sets\n`trigger-tabindex=\"-1\"` on that tooltip automatically so its wrapper span\ndoes not reintroduce a tab stop the roving manager is removing:\n\n```html\n<esp-input value=\"Before\"></esp-input>\n<esp-button-group toolbar label=\"Document actions\">\n  <esp-tooltip text=\"Save\">\n    <esp-button icon-only icon=\"save\" aria-label=\"Save\"></esp-button>\n  </esp-tooltip>\n  <esp-tooltip text=\"Edit\">\n    <esp-button icon-only icon=\"edit\" aria-label=\"Edit\"></esp-button>\n  </esp-tooltip>\n  <esp-tooltip text=\"Upload\">\n    <esp-button icon-only icon=\"upload\" aria-label=\"Upload\"></esp-button>\n  </esp-tooltip>\n</esp-button-group>\n<esp-input value=\"After\"></esp-input>\n```",
+          "name": "EspalierButtonGroup",
+          "cssProperties": [
+            {
+              "description": "The border style between grouped buttons. Defaults to `1px dotted var(--esp-color-border)`.",
+              "name": "--esp-button-group-divider"
+            }
+          ],
           "slots": [
             {
-              "description": "Place `esp-checkbox` elements in the default slot.",
+              "description": "One or more `esp-button`, `esp-tooltip`, or `esp-popover` elements containing an `esp-button`.",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "formAssociated",
-              "type": {
-                "text": "boolean"
-              },
-              "static": true,
-              "default": "true"
-            },
-            {
-              "kind": "field",
-              "name": "internals",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "formCtrl",
-              "privacy": "private",
-              "default": "new FormFieldController({ host: this, internals: this.internals, getFormValue: () => { const v = this.values; return v.length > 0 ? v.join(\",\") : null; }, getValidity: () => { if (this.required && this.values.length === 0) { return { flags: { valueMissing: true }, message: this.requiredMessage || \"Please select at least one option.\", }; } return null; }, onReset: () => { for (const cb of this.getCheckboxes()) { cb.checked = false; } }, onRestore: (state: string) => { const selected = state.split(\",\"); for (const cb of this.getCheckboxes()) { cb.checked = selected.includes(cb.value); } }, onDisabled: (isDisabled: boolean) => { this.disabled = isDisabled; }, })"
-            },
-            {
-              "kind": "field",
-              "name": "itemsSlot",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "formItemDescription",
-              "type": {
-                "text": "string | null"
-              },
-              "privacy": "private",
-              "default": "null"
-            },
-            {
-              "kind": "field",
-              "name": "describedCheckboxes",
-              "privacy": "private",
-              "default": "new Set<EspalierCheckbox>()"
-            },
-            {
-              "kind": "field",
-              "name": "name",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "privacy": "public",
               "default": "\"\"",
-              "description": "The name used when the group participates in a `<form>`.",
-              "attribute": "name",
-              "reflects": true
+              "description": "Accessible label for the group. Screen readers announce this\nso users understand the purpose of the grouped buttons.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "toolbar",
               "type": {
                 "text": "boolean"
               },
               "privacy": "public",
               "default": "false",
-              "description": "When true, at least one checkbox must be checked before\nthe form can be submitted.",
-              "attribute": "required",
-              "reflects": true
+              "description": "Opt into the WAI-ARIA toolbar pattern. When set, the group renders\nwith `role=\"toolbar\"`, becomes a single tab stop (roving tabindex),\nand the arrow keys, `Home`, and `End` move focus between the\nenabled buttons. When unset, every button remains an independent\ntab stop and behavior is unchanged.",
+              "attribute": "toolbar"
             },
             {
               "kind": "field",
-              "name": "requiredMessage",
+              "name": "activeButton",
               "type": {
-                "text": "string"
+                "text": "EspalierButton | null"
               },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "A custom message to display when the group is required but no\ncheckbox is checked. Defaults to\n`\"Please select at least one option.\"` when not set.",
-              "attribute": "required-message"
+              "privacy": "private",
+              "default": "null",
+              "description": "The button that currently holds the group's single tab stop."
             },
             {
               "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Disables all child checkboxes in the group.",
-              "attribute": "disabled",
-              "reflects": true
+              "name": "managedButtons",
+              "privacy": "private",
+              "default": "new Set<EspalierButton>()",
+              "description": "Buttons whose `tabindex` this group currently manages. Tracked so that a\nbutton leaving the group (removed or moved elsewhere) has its roving\n`tabindex` cleared instead of being stranded as untabbable."
             },
             {
               "kind": "field",
-              "name": "values",
+              "name": "managedTooltips",
+              "privacy": "private",
+              "default": "new Set<Element>()",
+              "description": "`esp-tooltip` children whose `trigger-tabindex` this group currently\nmanages. In toolbar mode the group forces each tooltip wrapper out of the\ntab order so it does not reintroduce a tab stop the roving manager is\nremoving. Tracked so a tooltip leaving the group (or toolbar mode turning\noff) gets its `trigger-tabindex` cleared and its auto-detection restored."
+            },
+            {
+              "kind": "field",
+              "name": "stateObserver",
               "type": {
-                "text": "Array<string>"
+                "text": "MutationObserver | undefined"
               },
-              "privacy": "public",
-              "description": "Returns the values of all currently checked checkboxes\nin the group.",
-              "readonly": true
+              "privacy": "private",
+              "description": "Watches slotted buttons for `disabled`/`loading` changes so the roving\ntab stop can move off a button that becomes unusable (and onto one that\nbecomes usable). Always attached, but its callback (`applyRovingTabindex`)\nis a no-op outside toolbar mode, so it stays inert until `toolbar` is set."
             },
             {
               "kind": "method",
-              "name": "focus",
-              "privacy": "public",
+              "name": "isEnabled",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "boolean"
                 }
               },
               "parameters": [
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "btn",
                   "type": {
-                    "text": "FocusOptions"
+                    "text": "EspalierButton"
                   }
                 }
               ],
-              "description": "Focus the first non-disabled checkbox in the group."
+              "description": "A button is usable as a tab stop only when it is neither disabled nor\nloading. `esp-button` disables its inner control while loading, so a\nloading button must be skipped just like a disabled one."
             },
             {
               "kind": "method",
-              "name": "validate",
-              "privacy": "public",
+              "name": "handleSlotChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "getButtons",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "EspalierButton[]"
                 }
               },
-              "description": "Re-run constraint validation and dispatch `validity-changed`."
+              "description": "The `esp-button` elements in the group, unwrapping any that are\nnested in an `esp-tooltip` or used as an `esp-popover` target.\nMirrors the discovery logic in `handleSlotChange`."
             },
             {
               "kind": "method",
-              "name": "checkValidity",
-              "privacy": "public",
+              "name": "getTooltips",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "boolean"
+                  "text": "Element[]"
                 }
               },
-              "description": "Check whether the current state is valid (delegates to ElementInternals)."
+              "description": "The direct `esp-tooltip` children of the group. These are the wrappers\nwhose `trigger-tabindex` the group manages in toolbar mode so their span\ndoes not reintroduce a tab stop the roving manager is removing."
             },
             {
               "kind": "method",
-              "name": "getCheckboxes",
+              "name": "applyTabindexValues",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "EspalierCheckbox[]"
+                  "text": "void"
                 }
-              }
+              },
+              "description": "Push the roving `tabindex` (0 on the active button, -1 on the rest) and\nclear any button that has left the group since the last pass so it does\nnot keep a stale `-1`/`0` and become untabbable elsewhere."
             },
             {
               "kind": "method",
-              "name": "applyDisabledState",
+              "name": "syncTooltipOptOut",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "description": "Force each tooltip-wrapped button's wrapper span out of the tab order by\nsetting `trigger-tabindex=\"-1\"`, and clear any tooltip that has left the\ngroup since the last pass so it does not keep a stale opt-out (its\nauto-detection takes over again once it is no longer managed here)."
             },
             {
               "kind": "method",
-              "name": "applyFormItemDescription",
+              "name": "applyRovingTabindex",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "description": "Establish or refresh the roving tabindex. Keeps the current active\nbutton when it is still present and usable, otherwise falls back to the\nfirst usable button. When no button is usable, every button is removed\nfrom the tab order (-1) so disabled anchors do not stay focusable.\nNo-op when not in toolbar mode."
             },
             {
-              "kind": "field",
-              "name": "handleItemsSlotChange",
-              "privacy": "private"
+              "kind": "method",
+              "name": "clearRovingTabindex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Tear down the roving tabindex, restoring each button's natural\ntabbability. Used when `toolbar` is toggled off so dynamic usage returns\nto the default behavior."
             },
             {
               "kind": "method",
-              "name": "handleChildChanged",
+              "name": "handleKeyDown",
               "privacy": "private",
               "return": {
                 "type": {
@@ -7296,24 +7337,206 @@
                 {
                   "name": "ev",
                   "type": {
-                    "text": "Event"
+                    "text": "KeyboardEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "formResetCallback",
+              "name": "handleFocusIn",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "description": "Called by the browser when the owning `<form>` is reset."
+              "parameters": [
+                {
+                  "name": "ev",
+                  "type": {
+                    "text": "FocusEvent"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Accessible label for the group. Screen readers announce this\nso users understand the purpose of the grouped buttons.",
+              "fieldName": "label"
+            },
+            {
+              "name": "toolbar",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Opt into the WAI-ARIA toolbar pattern. When set, the group renders\nwith `role=\"toolbar\"`, becomes a single tab stop (roving tabindex),\nand the arrow keys, `Home`, and `End` move focus between the\nenabled buttons. When unset, every button remains an independent\ntab stop and behavior is unchanged.",
+              "fieldName": "toolbar"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "esp-button-group",
+          "customElement": true,
+          "docPageTitle": {
+            "name": "Button",
+            "description": "Group"
+          },
+          "docUrl": {
+            "name": "/components/button-group",
+            "description": ""
+          },
+          "menuGroup": {
+            "name": "Interaction",
+            "description": ""
+          },
+          "menuLabel": {
+            "name": "Button",
+            "description": "Group"
+          },
+          "menuIcon": {
+            "name": "button",
+            "description": ""
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "EspalierButtonGroup",
+          "declaration": {
+            "name": "EspalierButtonGroup",
+            "module": "dist/button/esp-button-group.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "esp-button-group",
+          "declaration": {
+            "name": "EspalierButtonGroup",
+            "module": "dist/button/esp-button-group.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/button/esp-button.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Used to initiate a user action or link to another page.\n\n```html\n<esp-button label=\"Hello there!\"></esp-button>\n<script>\n  const theButton = findByTagName(\"esp-button\")[0];\n  theButton.addEventListener(\"clicked\", () => {\n    showToast({\n      message: `You clicked the button!`,\n      icon: \"info-i\",\n      duration: 2\n    });\n  });\n</script>\n```\n\nHere are some different button color variants:\n\n```html\n<div style=\"display: flex; flex-wrap: wrap; gap: var(--esp-size-padding);\">\n  <esp-button label=\"Analogous Left\" variant=\"analogous-left\" collapsed></esp-button>\n  <esp-button label=\"Analogous Right\" variant=\"analogous-right\" collapsed></esp-button>\n  <esp-button label=\"Complementary\" variant=\"complementary\" collapsed></esp-button>\n  <esp-button label=\"Danger\" variant=\"danger\" collapsed></esp-button>\n  <esp-button label=\"Primary\" variant=\"primary\" collapsed></esp-button>\n  <esp-button label=\"Split Complementary Left\" variant=\"split-complementary-left\" collapsed></esp-button>\n  <esp-button label=\"Split Complementary Right\" variant=\"split-complementary-right\" collapsed></esp-button>\n  <esp-button label=\"Success\" variant=\"success\" collapsed></esp-button>\n  <esp-button label=\"Triadic Left\" variant=\"triadic-left\" collapsed></esp-button>\n  <esp-button label=\"Triadic Right\" variant=\"triadic-right\" collapsed></esp-button>\n  <esp-button label=\"Warning\" variant=\"warning\" collapsed></esp-button>\n</div>\n```",
+          "name": "EspalierButton",
+          "cssProperties": [
+            {
+              "description": "The padding inside the button label and icon areas.",
+              "name": "--esp-button-padding"
+            },
+            {
+              "description": "The padding for the incognito button style.",
+              "name": "--esp-button-incognito-padding"
+            },
+            {
+              "description": "Background color of the shared field shell. Defaults to `var(--esp-color-layer-2)`.",
+              "name": "--esp-field-background",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Border color of the shared field shell. Defaults to `var(--esp-color-border)`.",
+              "name": "--esp-field-border-color",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Border width of the shared field shell. Defaults to `1px`.",
+              "name": "--esp-field-border-width",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Text color used inside the shared field shell. Defaults to `var(--esp-color-text)`.",
+              "name": "--esp-field-text-color",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Hover background color of the shared field shell. Derived from `--esp-field-background`.",
+              "name": "--esp-field-hover-bg",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Focus background color of the shared field shell. Derived from `--esp-field-background`.",
+              "name": "--esp-field-focus-bg",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Shadow color used for shared field focus treatment. Defaults to `var(--esp-color-shadow)`.",
+              "name": "--esp-field-focus-shadow",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "description": "Optional custom SVG icon. Slotted icons override the generated SVG from the `icon` attribute. ```html <esp-button label=\"Profile\" icon=\"user-circle\"></esp-button> ```",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "iconSlot",
+              "privacy": "private",
+              "default": "new SlottedIconController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "innerTabindex",
+              "type": {
+                "text": "number | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "neutralizingTabindex",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "method",
-              "name": "formStateRestoreCallback",
+              "name": "writeHostTabindex",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
@@ -7321,17 +7544,36 @@
               },
               "parameters": [
                 {
-                  "name": "state",
+                  "name": "value",
+                  "type": {
+                    "text": "string | null"
+                  }
+                }
+              ],
+              "description": "Write the host `tabindex` without re-triggering the forwarding logic."
+            },
+            {
+              "kind": "method",
+              "name": "removeAttribute",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
                   "type": {
                     "text": "string"
                   }
                 }
               ],
-              "description": "Called by the browser to restore form state (bfcache, etc.)."
+              "description": "Clear forwarding when the host `tabindex` is removed. Forwarding a\nnon-negative value strips the host attribute (so the inner control is the\nsole tab stop), which means a later `removeAttribute(\"tabindex\")` changes\nnothing on the host and never reaches `attributeChangedCallback`. Catching\nthe removal here restores the inner control's natural tabbability even when\nthe host attribute was already absent. Removals we perform ourselves while\nneutralizing are skipped via the guard."
             },
             {
               "kind": "method",
-              "name": "formDisabledCallback",
+              "name": "focus",
+              "privacy": "public",
               "return": {
                 "type": {
                   "text": "void"
@@ -7339,13 +7581,167 @@
               },
               "parameters": [
                 {
-                  "name": "isDisabled",
+                  "name": "options",
+                  "optional": true,
                   "type": {
-                    "text": "boolean"
+                    "text": "FocusOptions"
                   }
                 }
               ],
-              "description": "Called by the browser when a parent `<fieldset>` is enabled or disabled."
+              "description": "Focus the button. Forwards focus (and any `FocusOptions`) to the inner\n`<button>` (or the `<a>` when `href` is set)."
+            },
+            {
+              "kind": "field",
+              "name": "buttonType",
+              "type": {
+                "text": "\"button\" | \"submit\" | \"reset\""
+              },
+              "privacy": "public",
+              "default": "\"button\"",
+              "description": "Controls the [button type](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#type).\nThe available options are: `button`, `submit`, or `reset`.\nThe default value is `button`. To use a link instead of a\nbutton, set the `href` attribute.\n\n```html\n<esp-button label=\"Default\"></esp-button>\n<esp-button button-type=\"submit\" label=\"Submit\"></esp-button>\n<esp-button button-type=\"reset\" label=\"Reset\"></esp-button>\n<esp-button href=\"#\" label=\"Link\"></esp-button>\n```",
+              "attribute": "button-type"
+            },
+            {
+              "kind": "field",
+              "name": "collapsed",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "By default, buttons take up the entire width of their parent\ncontainer. Use the `collapsed` attribute to shrink them to the\nsize of their content:\n\n```html\n<esp-button label=\"Full Width\"></esp-button>\n<esp-button collapsed label=\"Collapsed\"></esp-button>\n```",
+              "attribute": "collapsed"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Controls whether or not the button is disabled.\n\n```html\n<esp-button disabled label=\"Disabled\"></esp-button>\n<script>\n  const theButton = findByTagName(\"esp-button\")[0];\n  theButton.addEventListener(\"clicked\", () => {\n  alert(\"We will not get here...\");\n});\n</script>\n```",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "If href is set, the button will be rendered as an anchor link\npointing to the href value instead of a button.\n\n```html\n<esp-button href=\"#\" label=\"Link button\"></esp-button>\n```",
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "iconOnly",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "If true, the button only displays the icon.\n\n```html\n<esp-button icon-only icon=\"cog\" aria-label=\"Settings\"></esp-button>\n```",
+              "attribute": "icon-only"
+            },
+            {
+              "kind": "field",
+              "name": "incognito",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Renders the button with a borderless, transparent treatment for\nquiet icon or inline actions.\n\n```html\n<esp-button incognito icon-only icon=\"edit\" aria-label=\"Edit\"></esp-button>\n```",
+              "attribute": "incognito",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "icon",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "Optional icon name from the configured Espalier SVG sprite.\nSlotted SVG content remains supported and overrides this value.\n\n```html\n<esp-button label=\"Settings\" icon=\"cog\"></esp-button>\n```",
+              "attribute": "icon"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "The label of the button.\n\n```html\n<esp-button label=\"Do something\"></esp-button>\n```",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "loading",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Controls whether or not the button is in a loading state.\nThe button will be disabled and show a spinner while loading\nis true.\n\n```html\n<esp-button label=\"Click me...\" icon=\"save\"></esp-button>\n<script>\n  const theButton = findByTagName(\"esp-button\")[0];\n  theButton.addEventListener(\"clicked\", async () => {\n    theButton.loading = true;\n    setTimeout(function() {\n      theButton.loading = false;\n    }, 5000);\n  });\n</script>\n```",
+              "attribute": "loading",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "If the button is a link, this specifies the target browser window.\n\n```html\n<esp-button href=\"#\" target=\"_blank\" label=\"External link\"></esp-button>\n```",
+              "attribute": "target"
+            },
+            {
+              "kind": "field",
+              "name": "rel",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "If the button is a link, this specifies the relationship\nbetween the current page and the linked URL. Common values\ninclude `\"noopener noreferrer\"` for external links opened\nin a new tab.\n\n```html\n<esp-button href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\" label=\"External\"></esp-button>\n```",
+              "attribute": "rel"
+            },
+            {
+              "kind": "field",
+              "name": "formNoValidate",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "When true and `button-type` is `\"submit\"`, the enclosing\nform is submitted without running constraint validation.\n\n```html\n<esp-button button-type=\"submit\" formnovalidate label=\"Save Draft\"></esp-button>\n```",
+              "attribute": "formnovalidate"
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "_",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "buildIcon",
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -7841,12 +8237,18 @@
             }
           ],
           "events": [
+            {
+              "name": "clicked",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Emitted when the button is clicked. ```html <esp-button label=\"Click me!\"></esp-button> <script> const theButton = findByTagName(\"esp-button\")[0]; theButton.addEventListener(\"clicked\", () => { showToast({ message: `Hi! You clicked the button. This message will self-destruct in 4 seconds...`, icon: \"info-i\", duration: 4 }); }); </script> ```"
+            },
             {
               "name": "value-changed",
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when any child checkbox state changes. The detail is an array of the values of all currently checked checkboxes.",
               "inheritedFrom": {
                 "name": "EspalierElementBase",
                 "module": "dist/shared/esp-element-base.js"
@@ -7855,40 +8257,115 @@
           ],
           "attributes": [
             {
-              "name": "name",
+              "name": "tabindex"
+            },
+            {
+              "description": "Renders the button with a borderless, transparent treatment for\nquiet icon or inline actions.\n\n```html\n<esp-button incognito icon-only icon=\"edit\" aria-label=\"Edit\"></esp-button>\n```",
+              "name": "incognito",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "incognito"
+            },
+            {
+              "name": "button-type",
+              "type": {
+                "text": "\"button\" | \"submit\" | \"reset\""
+              },
+              "default": "\"button\"",
+              "description": "Controls the [button type](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#type).\nThe available options are: `button`, `submit`, or `reset`.\nThe default value is `button`. To use a link instead of a\nbutton, set the `href` attribute.\n\n```html\n<esp-button label=\"Default\"></esp-button>\n<esp-button button-type=\"submit\" label=\"Submit\"></esp-button>\n<esp-button button-type=\"reset\" label=\"Reset\"></esp-button>\n<esp-button href=\"#\" label=\"Link\"></esp-button>\n```",
+              "fieldName": "buttonType"
+            },
+            {
+              "name": "collapsed",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "By default, buttons take up the entire width of their parent\ncontainer. Use the `collapsed` attribute to shrink them to the\nsize of their content:\n\n```html\n<esp-button label=\"Full Width\"></esp-button>\n<esp-button collapsed label=\"Collapsed\"></esp-button>\n```",
+              "fieldName": "collapsed"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether or not the button is disabled.\n\n```html\n<esp-button disabled label=\"Disabled\"></esp-button>\n<script>\n  const theButton = findByTagName(\"esp-button\")[0];\n  theButton.addEventListener(\"clicked\", () => {\n  alert(\"We will not get here...\");\n});\n</script>\n```",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "href",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The name used when the group participates in a `<form>`.",
-              "fieldName": "name"
+              "description": "If href is set, the button will be rendered as an anchor link\npointing to the href value instead of a button.\n\n```html\n<esp-button href=\"#\" label=\"Link button\"></esp-button>\n```",
+              "fieldName": "href"
             },
             {
-              "name": "required",
+              "name": "icon-only",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, at least one checkbox must be checked before\nthe form can be submitted.",
-              "fieldName": "required"
+              "description": "If true, the button only displays the icon.\n\n```html\n<esp-button icon-only icon=\"cog\" aria-label=\"Settings\"></esp-button>\n```",
+              "fieldName": "iconOnly"
             },
             {
-              "name": "required-message",
+              "name": "icon",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "A custom message to display when the group is required but no\ncheckbox is checked. Defaults to\n`\"Please select at least one option.\"` when not set.",
-              "fieldName": "requiredMessage"
+              "description": "Optional icon name from the configured Espalier SVG sprite.\nSlotted SVG content remains supported and overrides this value.\n\n```html\n<esp-button label=\"Settings\" icon=\"cog\"></esp-button>\n```",
+              "fieldName": "icon"
             },
             {
-              "name": "disabled",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The label of the button.\n\n```html\n<esp-button label=\"Do something\"></esp-button>\n```",
+              "fieldName": "label"
+            },
+            {
+              "name": "loading",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables all child checkboxes in the group.",
-              "fieldName": "disabled"
+              "description": "Controls whether or not the button is in a loading state.\nThe button will be disabled and show a spinner while loading\nis true.\n\n```html\n<esp-button label=\"Click me...\" icon=\"save\"></esp-button>\n<script>\n  const theButton = findByTagName(\"esp-button\")[0];\n  theButton.addEventListener(\"clicked\", async () => {\n    theButton.loading = true;\n    setTimeout(function() {\n      theButton.loading = false;\n    }, 5000);\n  });\n</script>\n```",
+              "fieldName": "loading"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "If the button is a link, this specifies the target browser window.\n\n```html\n<esp-button href=\"#\" target=\"_blank\" label=\"External link\"></esp-button>\n```",
+              "fieldName": "target"
+            },
+            {
+              "name": "rel",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "If the button is a link, this specifies the relationship\nbetween the current page and the linked URL. Common values\ninclude `\"noopener noreferrer\"` for external links opened\nin a new tab.\n\n```html\n<esp-button href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\" label=\"External\"></esp-button>\n```",
+              "fieldName": "rel"
+            },
+            {
+              "name": "formnovalidate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true and `button-type` is `\"submit\"`, the enclosing\nform is submitted without running constraint validation.\n\n```html\n<esp-button button-type=\"submit\" formnovalidate label=\"Save Draft\"></esp-button>\n```",
+              "fieldName": "formNoValidate"
             },
             {
               "name": "scheme",
@@ -7920,180 +8397,60 @@
             "name": "EspalierElementBase",
             "module": "dist/shared/esp-element-base.js"
           },
+          "tagName": "esp-button",
+          "customElement": true,
           "docPageTitle": {
-            "name": "Checkbox",
-            "description": "Group"
+            "name": "Button",
+            "description": ""
           },
           "docUrl": {
-            "name": "/components/checkbox/group",
+            "name": "/components/button",
             "description": ""
           },
           "menuGroup": {
-            "name": "Form",
-            "description": "Controls"
+            "name": "Interaction",
+            "description": ""
           },
-          "tagName": "esp-checkbox-group",
-          "customElement": true,
-          "cssProperties": [
-            {
-              "description": "Background color of the shared field shell. Defaults to `var(--esp-color-layer-2)`.",
-              "name": "--esp-field-background",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Border color of the shared field shell. Defaults to `var(--esp-color-border)`.",
-              "name": "--esp-field-border-color",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Border width of the shared field shell. Defaults to `1px`.",
-              "name": "--esp-field-border-width",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Text color used inside the shared field shell. Defaults to `var(--esp-color-text)`.",
-              "name": "--esp-field-text-color",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Hover background color of the shared field shell. Derived from `--esp-field-background`.",
-              "name": "--esp-field-hover-bg",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Focus background color of the shared field shell. Derived from `--esp-field-background`.",
-              "name": "--esp-field-focus-bg",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Shadow color used for shared field focus treatment. Defaults to `var(--esp-color-shadow)`.",
-              "name": "--esp-field-focus-shadow",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            }
-          ]
+          "menuLabel": {
+            "name": "Button",
+            "description": ""
+          },
+          "menuIcon": {
+            "name": "button",
+            "description": ""
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "EspalierCheckboxGroup",
+          "name": "EspalierButton",
           "declaration": {
-            "name": "EspalierCheckboxGroup",
-            "module": "dist/checkbox/esp-checkbox-group.js"
+            "name": "EspalierButton",
+            "module": "dist/button/esp-button.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "esp-checkbox-group",
+          "name": "esp-button",
           "declaration": {
-            "name": "EspalierCheckboxGroup",
-            "module": "dist/checkbox/esp-checkbox-group.js"
+            "name": "EspalierButton",
+            "module": "dist/button/esp-button.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/checkbox/esp-checkbox.js",
+      "path": "dist/checkbox/esp-checkbox-group.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "A checkbox control for toggling boolean values. Uses Tabler\nSVG icons for checked, unchecked, and indeterminate states.\nWorks standalone or inside an\n[esp-checkbox-group](/components/checkbox/group) for multi-select.\n\n```html\n<esp-box>\n  <esp-form-item label=\"Terms and conditions\">\n    <esp-checkbox value=\"agree\">\n      I agree to the terms\n    </esp-checkbox>\n  </esp-form-item>\n</esp-box>\n```\n\n```html\n<esp-box>\n  <esp-checkbox checked value=\"newsletter\">\n    Subscribe to newsletter\n  </esp-checkbox>\n  <esp-checkbox disabled value=\"disabled-opt\">\n    Disabled option\n  </esp-checkbox>\n  <esp-checkbox indeterminate value=\"partial\">\n    Indeterminate state\n  </esp-checkbox>\n</esp-box>\n```",
-          "name": "EspalierCheckbox",
-          "cssProperties": [
-            {
-              "description": "The width and height of the checkbox icon. Defaults to `var(--esp-size-normal-to-medium)`.",
-              "name": "--esp-checkbox-size"
-            },
-            {
-              "description": "The stroke color of the checkbox icon. Defaults to `var(--esp-color-text)`.",
-              "name": "--esp-checkbox-icon-color"
-            },
-            {
-              "description": "The color of the focus ring shadow. Defaults to `var(--esp-color-shadow)`.",
-              "name": "--esp-checkbox-focus-shadow"
-            },
-            {
-              "description": "Background color of the shared field shell. Defaults to `var(--esp-color-layer-2)`.",
-              "name": "--esp-field-background",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Border color of the shared field shell. Defaults to `var(--esp-color-border)`.",
-              "name": "--esp-field-border-color",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Border width of the shared field shell. Defaults to `1px`.",
-              "name": "--esp-field-border-width",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Text color used inside the shared field shell. Defaults to `var(--esp-color-text)`.",
-              "name": "--esp-field-text-color",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Hover background color of the shared field shell. Derived from `--esp-field-background`.",
-              "name": "--esp-field-hover-bg",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Focus background color of the shared field shell. Derived from `--esp-field-background`.",
-              "name": "--esp-field-focus-bg",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Shadow color used for shared field focus treatment. Defaults to `var(--esp-color-shadow)`.",
-              "name": "--esp-field-focus-shadow",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            }
-          ],
+          "description": "Groups multiple [esp-checkbox](/components/checkbox)\ncomponents and manages their collective state. Works with\n[esp-form-item](/components/form-item) for label and\nerror message integration.\n\n```html\n<esp-box>\n  <esp-form-item label=\"Select toppings\">\n    <esp-checkbox-group>\n      <esp-checkbox value=\"cheese\">Cheese</esp-checkbox>\n      <esp-checkbox value=\"pepperoni\">Pepperoni</esp-checkbox>\n      <esp-checkbox value=\"mushrooms\">Mushrooms</esp-checkbox>\n    </esp-checkbox-group>\n  </esp-form-item>\n</esp-box>\n```\n\n```html\n<esp-box>\n  <esp-form-item label=\"Disabled group\">\n    <esp-checkbox-group disabled>\n      <esp-checkbox value=\"a\">Option A</esp-checkbox>\n      <esp-checkbox value=\"b\" checked>Option B</esp-checkbox>\n      <esp-checkbox value=\"c\">Option C</esp-checkbox>\n    </esp-checkbox-group>\n  </esp-form-item>\n</esp-box>\n```",
+          "name": "EspalierCheckboxGroup",
           "slots": [
             {
-              "description": "The label text for the checkbox.",
+              "description": "Place `esp-checkbox` elements in the default slot.",
               "name": ""
             }
           ],
@@ -8116,36 +8473,27 @@
               "kind": "field",
               "name": "formCtrl",
               "privacy": "private",
-              "default": "new FormFieldController({ host: this, internals: this.internals, getFormValue: () => (this.checked ? this.value || \"on\" : null), getValidity: () => { if (this.required && !this.checked) { return { flags: { valueMissing: true }, message: this.requiredMessage || \"Please check this box to continue.\", }; } return null; }, onReset: () => { this.checked = false; this.indeterminate = false; }, onRestore: (state: string) => { this.checked = state === \"on\" || state === this.value; }, onDisabled: (isDisabled: boolean) => { this.disabled = isDisabled; }, })"
-            },
-            {
-              "kind": "field",
-              "name": "formItemDescription",
-              "privacy": "private",
-              "default": "new FormFieldDescriptionController({ host: this, getTarget: () => this.shadowRoot?.querySelector<HTMLElement>(\".checkbox-control\"), })"
+              "default": "new FormFieldController({ host: this, internals: this.internals, getFormValue: () => { const v = this.values; return v.length > 0 ? v.join(\",\") : null; }, getValidity: () => { if (this.required && this.values.length === 0) { return { flags: { valueMissing: true }, message: this.requiredMessage || \"Please select at least one option.\", }; } return null; }, onReset: () => { for (const cb of this.getCheckboxes()) { cb.checked = false; } }, onRestore: (state: string) => { const selected = state.split(\",\"); for (const cb of this.getCheckboxes()) { cb.checked = selected.includes(cb.value); } }, onDisabled: (isDisabled: boolean) => { this.disabled = isDisabled; }, })"
             },
             {
               "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the checkbox is in the checked state.",
-              "attribute": "checked",
-              "reflects": true
+              "name": "itemsSlot",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "formItemDescription",
               "type": {
-                "text": "string"
+                "text": "string | null"
               },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "The value associated with this checkbox. Used by\n[esp-checkbox-group](/components/checkbox/group) to track\nwhich checkboxes are selected.",
-              "attribute": "value"
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "describedCheckboxes",
+              "privacy": "private",
+              "default": "new Set<EspalierCheckbox>()"
             },
             {
               "kind": "field",
@@ -8155,7 +8503,7 @@
               },
               "privacy": "public",
               "default": "\"\"",
-              "description": "The name used when the checkbox participates in a `<form>`.",
+              "description": "The name used when the group participates in a `<form>`.",
               "attribute": "name",
               "reflects": true
             },
@@ -8167,7 +8515,7 @@
               },
               "privacy": "public",
               "default": "false",
-              "description": "When true, the checkbox must be checked before the form can\nbe submitted.",
+              "description": "When true, at least one checkbox must be checked before\nthe form can be submitted.",
               "attribute": "required",
               "reflects": true
             },
@@ -8179,7 +8527,7 @@
               },
               "privacy": "public",
               "default": "\"\"",
-              "description": "A custom message to display when the checkbox is required but\nnot checked. Defaults to `\"Please check this box to continue.\"`\nwhen not set.\n\n```html\n<esp-checkbox required required-message=\"You must accept the terms.\">\n  I accept\n</esp-checkbox>\n```",
+              "description": "A custom message to display when the group is required but no\ncheckbox is checked. Defaults to\n`\"Please select at least one option.\"` when not set.",
               "attribute": "required-message"
             },
             {
@@ -8190,21 +8538,19 @@
               },
               "privacy": "public",
               "default": "false",
-              "description": "Controls whether the checkbox is disabled.",
+              "description": "Disables all child checkboxes in the group.",
               "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "indeterminate",
+              "name": "values",
               "type": {
-                "text": "boolean"
+                "text": "Array<string>"
               },
               "privacy": "public",
-              "default": "false",
-              "description": "Displays the checkbox in an indeterminate (partial) state.\nClicking the checkbox clears the indeterminate state.",
-              "attribute": "indeterminate",
-              "reflects": true
+              "description": "Returns the values of all currently checked checkboxes\nin the group.",
+              "readonly": true
             },
             {
               "kind": "method",
@@ -8224,7 +8570,7 @@
                   }
                 }
               ],
-              "description": "Focus the checkbox control."
+              "description": "Focus the first non-disabled checkbox in the group."
             },
             {
               "kind": "method",
@@ -8250,7 +8596,17 @@
             },
             {
               "kind": "method",
-              "name": "toggle",
+              "name": "getCheckboxes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "EspalierCheckbox[]"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "applyDisabledState",
               "privacy": "private",
               "return": {
                 "type": {
@@ -8260,7 +8616,22 @@
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
+              "name": "applyFormItemDescription",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "handleItemsSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleChildChanged",
               "privacy": "private",
               "return": {
                 "type": {
@@ -8271,21 +8642,11 @@
                 {
                   "name": "ev",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "Event"
                   }
                 }
               ]
             },
-            {
-              "kind": "method",
-              "name": "getSvg",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              }
-            },
             {
               "kind": "method",
               "name": "formResetCallback",
@@ -8831,7 +9192,7 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the checkbox is toggled. The detail contains the new `checked` state and the checkbox `value`.",
+              "description": "Fired when any child checkbox state changes. The detail is an array of the values of all currently checked checkboxes.",
               "inheritedFrom": {
                 "name": "EspalierElementBase",
                 "module": "dist/shared/esp-element-base.js"
@@ -8839,31 +9200,13 @@
             }
           ],
           "attributes": [
-            {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the checkbox is in the checked state.",
-              "fieldName": "checked"
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value associated with this checkbox. Used by\n[esp-checkbox-group](/components/checkbox/group) to track\nwhich checkboxes are selected.",
-              "fieldName": "value"
-            },
             {
               "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The name used when the checkbox participates in a `<form>`.",
+              "description": "The name used when the group participates in a `<form>`.",
               "fieldName": "name"
             },
             {
@@ -8872,7 +9215,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, the checkbox must be checked before the form can\nbe submitted.",
+              "description": "When true, at least one checkbox must be checked before\nthe form can be submitted.",
               "fieldName": "required"
             },
             {
@@ -8881,7 +9224,7 @@
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "A custom message to display when the checkbox is required but\nnot checked. Defaults to `\"Please check this box to continue.\"`\nwhen not set.\n\n```html\n<esp-checkbox required required-message=\"You must accept the terms.\">\n  I accept\n</esp-checkbox>\n```",
+              "description": "A custom message to display when the group is required but no\ncheckbox is checked. Defaults to\n`\"Please select at least one option.\"` when not set.",
               "fieldName": "requiredMessage"
             },
             {
@@ -8890,18 +9233,9 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the checkbox is disabled.",
+              "description": "Disables all child checkboxes in the group.",
               "fieldName": "disabled"
             },
-            {
-              "name": "indeterminate",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Displays the checkbox in an indeterminate (partial) state.\nClicking the checkbox clears the indeterminate state.",
-              "fieldName": "indeterminate"
-            },
             {
               "name": "scheme",
               "type": {
@@ -8934,397 +9268,117 @@
           },
           "docPageTitle": {
             "name": "Checkbox",
-            "description": ""
+            "description": "Group"
           },
           "docUrl": {
-            "name": "/components/checkbox",
+            "name": "/components/checkbox/group",
             "description": ""
           },
           "menuGroup": {
             "name": "Form",
             "description": "Controls"
           },
-          "menuLabel": {
-            "name": "Checkbox",
-            "description": ""
-          },
-          "menuIcon": {
-            "name": "checkbox",
-            "description": ""
-          },
-          "tagName": "esp-checkbox",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "EspalierCheckbox",
-          "declaration": {
-            "name": "EspalierCheckbox",
-            "module": "dist/checkbox/esp-checkbox.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "esp-checkbox",
-          "declaration": {
-            "name": "EspalierCheckbox",
-            "module": "dist/checkbox/esp-checkbox.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/button/action-state-lightness.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "BUTTON_ICON_SPLIT_LIGHTNESS_FACTOR",
-          "type": {
-            "text": "number"
-          },
-          "default": "0.9"
-        },
-        {
-          "kind": "variable",
-          "name": "BUTTON_INTERACTION_LIGHTNESS_FACTOR",
-          "type": {
-            "text": "number"
-          },
-          "default": "0.88"
-        },
-        {
-          "kind": "variable",
-          "name": "BUTTON_ICON_INTERACTION_LIGHTNESS_FACTOR",
-          "type": {
-            "text": "number"
-          },
-          "default": "0.8"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BUTTON_ICON_SPLIT_LIGHTNESS_FACTOR",
-          "declaration": {
-            "name": "BUTTON_ICON_SPLIT_LIGHTNESS_FACTOR",
-            "module": "dist/button/action-state-lightness.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "BUTTON_INTERACTION_LIGHTNESS_FACTOR",
-          "declaration": {
-            "name": "BUTTON_INTERACTION_LIGHTNESS_FACTOR",
-            "module": "dist/button/action-state-lightness.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "BUTTON_ICON_INTERACTION_LIGHTNESS_FACTOR",
-          "declaration": {
-            "name": "BUTTON_ICON_INTERACTION_LIGHTNESS_FACTOR",
-            "module": "dist/button/action-state-lightness.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/button/esp-button-group.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Groups related buttons into a visually connected segmented control.\n\nChild `esp-button` elements lose their individual border-radius and\nmerge into a continuous strip; the group container provides the outer\nrounded corners and border.\n\n```html\n<esp-button-group label=\"Actions\">\n  <esp-button icon-only icon=\"save\" aria-label=\"Save\"></esp-button>\n  <esp-button icon-only icon=\"edit\" aria-label=\"Edit\"></esp-button>\n  <esp-button icon-only icon=\"trash\" aria-label=\"Delete\"></esp-button>\n</esp-button-group>\n```\n\nGroups can also contain labelled buttons:\n\n```html\n<esp-button-group label=\"Navigation\">\n  <esp-button label=\"Back\" icon=\"arrow-big-left\" collapsed></esp-button>\n  <esp-button label=\"Forward\" icon=\"arrow-big-right\" collapsed></esp-button>\n</esp-button-group>\n```\n\nButtons can be wrapped in `esp-tooltip` or `esp-popover`:\n\n```html\n<esp-button-group label=\"With tooltips\">\n  <esp-tooltip text=\"Save changes\">\n    <esp-button icon-only icon=\"save\" aria-label=\"Save\"></esp-button>\n  </esp-tooltip>\n  <esp-tooltip text=\"Edit item\">\n    <esp-button icon-only icon=\"edit\" aria-label=\"Edit\"></esp-button>\n  </esp-tooltip>\n  <esp-tooltip text=\"Delete item\">\n    <esp-button icon-only icon=\"trash\" aria-label=\"Delete\"></esp-button>\n  </esp-tooltip>\n</esp-button-group>\n```\n\nWhen the group has a fixed width and contains more buttons than\ncan fit, horizontal scrolling kicks in:\n\n```html\n<esp-button-group label=\"Many actions\" style=\"width: 360px;\">\n  <esp-button icon-only icon=\"save\" aria-label=\"Save\"></esp-button>\n  <esp-button icon-only icon=\"edit\" aria-label=\"Edit\"></esp-button>\n  <esp-button icon-only icon=\"upload\" aria-label=\"Upload\"></esp-button>\n  <esp-button icon-only icon=\"pin\" aria-label=\"Pin\"></esp-button>\n  <esp-button icon-only icon=\"cog\" aria-label=\"Settings\"></esp-button>\n  <esp-button icon-only icon=\"user\" aria-label=\"User\"></esp-button>\n  <esp-button icon-only icon=\"photo\" aria-label=\"Photo\"></esp-button>\n  <esp-button icon-only icon=\"rocket\" aria-label=\"Rocket\"></esp-button>\n  <esp-button icon-only icon=\"code\" aria-label=\"Code\"></esp-button>\n  <esp-button icon-only icon=\"palette\" aria-label=\"Palette\"></esp-button>\n  <esp-button icon-only icon=\"wand\" aria-label=\"Wand\"></esp-button>\n  <esp-button icon-only icon=\"tags\" aria-label=\"Tags\"></esp-button>\n</esp-button-group>\n```\n\nAdd the `toolbar` attribute to opt into the WAI-ARIA toolbar\npattern. This changes how the group sits in the tab order: instead of\nevery button being its own tab stop, the whole group becomes a *single*\ntab stop, and the arrow keys (plus `Home`/`End`) move focus between the\nbuttons inside it. Tabbing into the group lands on one button; the next\nTab leaves the group entirely. Use it when a group bundles many actions\n(for example an editor formatting bar) so keyboard users do not have to\nTab through every button.\n\nThe `esp-input` elements below sit before and after the group so the\nsingle-tab-stop behavior is easy to see: Tab from the first input lands\non one toolbar button, the arrow keys move between the buttons, and the\nnext Tab jumps straight to the second input.\n\n```html\n<esp-input value=\"Before\"></esp-input>\n<esp-button-group toolbar label=\"Document actions\">\n  <esp-button icon-only icon=\"save\" aria-label=\"Save\"></esp-button>\n  <esp-button icon-only icon=\"edit\" aria-label=\"Edit\"></esp-button>\n  <esp-button icon-only icon=\"upload\" aria-label=\"Upload\"></esp-button>\n  <esp-button icon-only icon=\"trash\" aria-label=\"Delete\"></esp-button>\n</esp-button-group>\n<esp-input value=\"After\"></esp-input>\n```\n\nWhen a button is wrapped in an `esp-tooltip`, the group sets\n`trigger-tabindex=\"-1\"` on that tooltip automatically so its wrapper span\ndoes not reintroduce a tab stop the roving manager is removing:\n\n```html\n<esp-input value=\"Before\"></esp-input>\n<esp-button-group toolbar label=\"Document actions\">\n  <esp-tooltip text=\"Save\">\n    <esp-button icon-only icon=\"save\" aria-label=\"Save\"></esp-button>\n  </esp-tooltip>\n  <esp-tooltip text=\"Edit\">\n    <esp-button icon-only icon=\"edit\" aria-label=\"Edit\"></esp-button>\n  </esp-tooltip>\n  <esp-tooltip text=\"Upload\">\n    <esp-button icon-only icon=\"upload\" aria-label=\"Upload\"></esp-button>\n  </esp-tooltip>\n</esp-button-group>\n<esp-input value=\"After\"></esp-input>\n```",
-          "name": "EspalierButtonGroup",
+          "tagName": "esp-checkbox-group",
+          "customElement": true,
           "cssProperties": [
             {
-              "description": "The border style between grouped buttons. Defaults to `1px dotted var(--esp-color-border)`.",
-              "name": "--esp-button-group-divider"
-            }
-          ],
-          "slots": [
-            {
-              "description": "One or more `esp-button`, `esp-tooltip`, or `esp-popover` elements containing an `esp-button`.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "Accessible label for the group. Screen readers announce this\nso users understand the purpose of the grouped buttons.",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "toolbar",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Opt into the WAI-ARIA toolbar pattern. When set, the group renders\nwith `role=\"toolbar\"`, becomes a single tab stop (roving tabindex),\nand the arrow keys, `Home`, and `End` move focus between the\nenabled buttons. When unset, every button remains an independent\ntab stop and behavior is unchanged.",
-              "attribute": "toolbar"
-            },
-            {
-              "kind": "field",
-              "name": "activeButton",
-              "type": {
-                "text": "EspalierButton | null"
-              },
-              "privacy": "private",
-              "default": "null",
-              "description": "The button that currently holds the group's single tab stop."
-            },
-            {
-              "kind": "field",
-              "name": "managedButtons",
-              "privacy": "private",
-              "default": "new Set<EspalierButton>()",
-              "description": "Buttons whose `tabindex` this group currently manages. Tracked so that a\nbutton leaving the group (removed or moved elsewhere) has its roving\n`tabindex` cleared instead of being stranded as untabbable."
-            },
-            {
-              "kind": "field",
-              "name": "managedTooltips",
-              "privacy": "private",
-              "default": "new Set<Element>()",
-              "description": "`esp-tooltip` children whose `trigger-tabindex` this group currently\nmanages. In toolbar mode the group forces each tooltip wrapper out of the\ntab order so it does not reintroduce a tab stop the roving manager is\nremoving. Tracked so a tooltip leaving the group (or toolbar mode turning\noff) gets its `trigger-tabindex` cleared and its auto-detection restored."
-            },
-            {
-              "kind": "field",
-              "name": "stateObserver",
-              "type": {
-                "text": "MutationObserver | undefined"
-              },
-              "privacy": "private",
-              "description": "Watches slotted buttons for `disabled`/`loading` changes so the roving\ntab stop can move off a button that becomes unusable (and onto one that\nbecomes usable). Always attached, but its callback (`applyRovingTabindex`)\nis a no-op outside toolbar mode, so it stays inert until `toolbar` is set."
-            },
-            {
-              "kind": "method",
-              "name": "isEnabled",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "btn",
-                  "type": {
-                    "text": "EspalierButton"
-                  }
-                }
-              ],
-              "description": "A button is usable as a tab stop only when it is neither disabled nor\nloading. `esp-button` disables its inner control while loading, so a\nloading button must be skipped just like a disabled one."
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "getButtons",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "EspalierButton[]"
-                }
-              },
-              "description": "The `esp-button` elements in the group, unwrapping any that are\nnested in an `esp-tooltip` or used as an `esp-popover` target.\nMirrors the discovery logic in `handleSlotChange`."
-            },
-            {
-              "kind": "method",
-              "name": "getTooltips",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Element[]"
-                }
-              },
-              "description": "The direct `esp-tooltip` children of the group. These are the wrappers\nwhose `trigger-tabindex` the group manages in toolbar mode so their span\ndoes not reintroduce a tab stop the roving manager is removing."
-            },
-            {
-              "kind": "method",
-              "name": "applyTabindexValues",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Push the roving `tabindex` (0 on the active button, -1 on the rest) and\nclear any button that has left the group since the last pass so it does\nnot keep a stale `-1`/`0` and become untabbable elsewhere."
+              "description": "Background color of the shared field shell. Defaults to `var(--esp-color-layer-2)`.",
+              "name": "--esp-field-background",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "syncTooltipOptOut",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Force each tooltip-wrapped button's wrapper span out of the tab order by\nsetting `trigger-tabindex=\"-1\"`, and clear any tooltip that has left the\ngroup since the last pass so it does not keep a stale opt-out (its\nauto-detection takes over again once it is no longer managed here)."
+              "description": "Border color of the shared field shell. Defaults to `var(--esp-color-border)`.",
+              "name": "--esp-field-border-color",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "applyRovingTabindex",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Establish or refresh the roving tabindex. Keeps the current active\nbutton when it is still present and usable, otherwise falls back to the\nfirst usable button. When no button is usable, every button is removed\nfrom the tab order (-1) so disabled anchors do not stay focusable.\nNo-op when not in toolbar mode."
+              "description": "Border width of the shared field shell. Defaults to `1px`.",
+              "name": "--esp-field-border-width",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "clearRovingTabindex",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Tear down the roving tabindex, restoring each button's natural\ntabbability. Used when `toolbar` is toggled off so dynamic usage returns\nto the default behavior."
+              "description": "Text color used inside the shared field shell. Defaults to `var(--esp-color-text)`.",
+              "name": "--esp-field-text-color",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "ev",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
+              "description": "Hover background color of the shared field shell. Derived from `--esp-field-background`.",
+              "name": "--esp-field-hover-bg",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleFocusIn",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "ev",
-                  "type": {
-                    "text": "FocusEvent"
-                  }
-                }
-              ]
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Accessible label for the group. Screen readers announce this\nso users understand the purpose of the grouped buttons.",
-              "fieldName": "label"
+              "description": "Focus background color of the shared field shell. Derived from `--esp-field-background`.",
+              "name": "--esp-field-focus-bg",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
-              "name": "toolbar",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Opt into the WAI-ARIA toolbar pattern. When set, the group renders\nwith `role=\"toolbar\"`, becomes a single tab stop (roving tabindex),\nand the arrow keys, `Home`, and `End` move focus between the\nenabled buttons. When unset, every button remains an independent\ntab stop and behavior is unchanged.",
-              "fieldName": "toolbar"
+              "description": "Shadow color used for shared field focus treatment. Defaults to `var(--esp-color-shadow)`.",
+              "name": "--esp-field-focus-shadow",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "esp-button-group",
-          "customElement": true,
-          "docPageTitle": {
-            "name": "Button",
-            "description": "Group"
-          },
-          "docUrl": {
-            "name": "/components/button-group",
-            "description": ""
-          },
-          "menuGroup": {
-            "name": "Interaction",
-            "description": ""
-          },
-          "menuLabel": {
-            "name": "Button",
-            "description": "Group"
-          },
-          "menuIcon": {
-            "name": "button",
-            "description": ""
-          }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "EspalierButtonGroup",
+          "name": "EspalierCheckboxGroup",
           "declaration": {
-            "name": "EspalierButtonGroup",
-            "module": "dist/button/esp-button-group.js"
+            "name": "EspalierCheckboxGroup",
+            "module": "dist/checkbox/esp-checkbox-group.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "esp-button-group",
+          "name": "esp-checkbox-group",
           "declaration": {
-            "name": "EspalierButtonGroup",
-            "module": "dist/button/esp-button-group.js"
+            "name": "EspalierCheckboxGroup",
+            "module": "dist/checkbox/esp-checkbox-group.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/button/esp-button.js",
+      "path": "dist/checkbox/esp-checkbox.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Used to initiate a user action or link to another page.\n\n```html\n<esp-button label=\"Hello there!\"></esp-button>\n<script>\n  const theButton = findByTagName(\"esp-button\")[0];\n  theButton.addEventListener(\"clicked\", () => {\n    showToast({\n      message: `You clicked the button!`,\n      icon: \"info-i\",\n      duration: 2\n    });\n  });\n</script>\n```\n\nHere are some different button color variants:\n\n```html\n<div style=\"display: flex; flex-wrap: wrap; gap: var(--esp-size-padding);\">\n  <esp-button label=\"Analogous Left\" variant=\"analogous-left\" collapsed></esp-button>\n  <esp-button label=\"Analogous Right\" variant=\"analogous-right\" collapsed></esp-button>\n  <esp-button label=\"Complementary\" variant=\"complementary\" collapsed></esp-button>\n  <esp-button label=\"Danger\" variant=\"danger\" collapsed></esp-button>\n  <esp-button label=\"Primary\" variant=\"primary\" collapsed></esp-button>\n  <esp-button label=\"Split Complementary Left\" variant=\"split-complementary-left\" collapsed></esp-button>\n  <esp-button label=\"Split Complementary Right\" variant=\"split-complementary-right\" collapsed></esp-button>\n  <esp-button label=\"Success\" variant=\"success\" collapsed></esp-button>\n  <esp-button label=\"Triadic Left\" variant=\"triadic-left\" collapsed></esp-button>\n  <esp-button label=\"Triadic Right\" variant=\"triadic-right\" collapsed></esp-button>\n  <esp-button label=\"Warning\" variant=\"warning\" collapsed></esp-button>\n</div>\n```",
-          "name": "EspalierButton",
+          "description": "A checkbox control for toggling boolean values. Uses Tabler\nSVG icons for checked, unchecked, and indeterminate states.\nWorks standalone or inside an\n[esp-checkbox-group](/components/checkbox/group) for multi-select.\n\n```html\n<esp-box>\n  <esp-form-item label=\"Terms and conditions\">\n    <esp-checkbox value=\"agree\">\n      I agree to the terms\n    </esp-checkbox>\n  </esp-form-item>\n</esp-box>\n```\n\n```html\n<esp-box>\n  <esp-checkbox checked value=\"newsletter\">\n    Subscribe to newsletter\n  </esp-checkbox>\n  <esp-checkbox disabled value=\"disabled-opt\">\n    Disabled option\n  </esp-checkbox>\n  <esp-checkbox indeterminate value=\"partial\">\n    Indeterminate state\n  </esp-checkbox>\n</esp-box>\n```",
+          "name": "EspalierCheckbox",
           "cssProperties": [
             {
-              "description": "The padding inside the button label and icon areas.",
-              "name": "--esp-button-padding"
+              "description": "The width and height of the checkbox icon. Defaults to `var(--esp-size-normal-to-medium)`.",
+              "name": "--esp-checkbox-size"
             },
             {
-              "description": "The padding for the incognito button style.",
-              "name": "--esp-button-incognito-padding"
+              "description": "The stroke color of the checkbox icon. Defaults to `var(--esp-color-text)`.",
+              "name": "--esp-checkbox-icon-color"
+            },
+            {
+              "description": "The color of the focus ring shadow. Defaults to `var(--esp-color-shadow)`.",
+              "name": "--esp-checkbox-focus-shadow"
             },
             {
               "description": "Background color of the shared field shell. Defaults to `var(--esp-color-layer-2)`.",
@@ -9385,244 +9439,244 @@
           ],
           "slots": [
             {
-              "description": "Optional custom SVG icon. Slotted icons override the generated SVG from the `icon` attribute. ```html <esp-button label=\"Profile\" icon=\"user-circle\"></esp-button> ```",
+              "description": "The label text for the checkbox.",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "iconSlot",
-              "privacy": "private",
-              "default": "new SlottedIconController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "innerTabindex",
-              "type": {
-                "text": "number | null"
-              },
-              "privacy": "private",
-              "default": "null"
-            },
-            {
-              "kind": "field",
-              "name": "neutralizingTabindex",
+              "name": "formAssociated",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "method",
-              "name": "writeHostTabindex",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "string | null"
-                  }
-                }
-              ],
-              "description": "Write the host `tabindex` without re-triggering the forwarding logic."
-            },
-            {
-              "kind": "method",
-              "name": "removeAttribute",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Clear forwarding when the host `tabindex` is removed. Forwarding a\nnon-negative value strips the host attribute (so the inner control is the\nsole tab stop), which means a later `removeAttribute(\"tabindex\")` changes\nnothing on the host and never reaches `attributeChangedCallback`. Catching\nthe removal here restores the inner control's natural tabbability even when\nthe host attribute was already absent. Removals we perform ourselves while\nneutralizing are skipped via the guard."
+              "static": true,
+              "default": "true"
             },
             {
-              "kind": "method",
-              "name": "focus",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ],
-              "description": "Focus the button. Forwards focus (and any `FocusOptions`) to the inner\n`<button>` (or the `<a>` when `href` is set)."
+              "kind": "field",
+              "name": "internals",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "buttonType",
-              "type": {
-                "text": "\"button\" | \"submit\" | \"reset\""
-              },
-              "privacy": "public",
-              "default": "\"button\"",
-              "description": "Controls the [button type](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#type).\nThe available options are: `button`, `submit`, or `reset`.\nThe default value is `button`. To use a link instead of a\nbutton, set the `href` attribute.\n\n```html\n<esp-button label=\"Default\"></esp-button>\n<esp-button button-type=\"submit\" label=\"Submit\"></esp-button>\n<esp-button button-type=\"reset\" label=\"Reset\"></esp-button>\n<esp-button href=\"#\" label=\"Link\"></esp-button>\n```",
-              "attribute": "button-type"
+              "name": "formCtrl",
+              "privacy": "private",
+              "default": "new FormFieldController({ host: this, internals: this.internals, getFormValue: () => (this.checked ? this.value || \"on\" : null), getValidity: () => { if (this.required && !this.checked) { return { flags: { valueMissing: true }, message: this.requiredMessage || \"Please check this box to continue.\", }; } return null; }, onReset: () => { this.checked = false; this.indeterminate = false; }, onRestore: (state: string) => { this.checked = state === \"on\" || state === this.value; }, onDisabled: (isDisabled: boolean) => { this.disabled = isDisabled; }, })"
             },
             {
               "kind": "field",
-              "name": "collapsed",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "By default, buttons take up the entire width of their parent\ncontainer. Use the `collapsed` attribute to shrink them to the\nsize of their content:\n\n```html\n<esp-button label=\"Full Width\"></esp-button>\n<esp-button collapsed label=\"Collapsed\"></esp-button>\n```",
-              "attribute": "collapsed"
+              "name": "formItemDescription",
+              "privacy": "private",
+              "default": "new FormFieldDescriptionController({ host: this, getTarget: () => this.shadowRoot?.querySelector<HTMLElement>(\".checkbox-control\"), })"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "checked",
               "type": {
                 "text": "boolean"
               },
               "privacy": "public",
               "default": "false",
-              "description": "Controls whether or not the button is disabled.\n\n```html\n<esp-button disabled label=\"Disabled\"></esp-button>\n<script>\n  const theButton = findByTagName(\"esp-button\")[0];\n  theButton.addEventListener(\"clicked\", () => {\n  alert(\"We will not get here...\");\n});\n</script>\n```",
-              "attribute": "disabled",
+              "description": "Whether the checkbox is in the checked state.",
+              "attribute": "checked",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "href",
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "privacy": "public",
               "default": "\"\"",
-              "description": "If href is set, the button will be rendered as an anchor link\npointing to the href value instead of a button.\n\n```html\n<esp-button href=\"#\" label=\"Link button\"></esp-button>\n```",
-              "attribute": "href"
+              "description": "The value associated with this checkbox. Used by\n[esp-checkbox-group](/components/checkbox/group) to track\nwhich checkboxes are selected.",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "iconOnly",
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
               "privacy": "public",
-              "default": "false",
-              "description": "If true, the button only displays the icon.\n\n```html\n<esp-button icon-only icon=\"cog\" aria-label=\"Settings\"></esp-button>\n```",
-              "attribute": "icon-only"
+              "default": "\"\"",
+              "description": "The name used when the checkbox participates in a `<form>`.",
+              "attribute": "name",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "incognito",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "privacy": "public",
               "default": "false",
-              "description": "Renders the button with a borderless, transparent treatment for\nquiet icon or inline actions.\n\n```html\n<esp-button incognito icon-only icon=\"edit\" aria-label=\"Edit\"></esp-button>\n```",
-              "attribute": "incognito",
+              "description": "When true, the checkbox must be checked before the form can\nbe submitted.",
+              "attribute": "required",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "icon",
+              "name": "requiredMessage",
               "type": {
                 "text": "string"
               },
               "privacy": "public",
               "default": "\"\"",
-              "description": "Optional icon name from the configured Espalier SVG sprite.\nSlotted SVG content remains supported and overrides this value.\n\n```html\n<esp-button label=\"Settings\" icon=\"cog\"></esp-button>\n```",
-              "attribute": "icon"
+              "description": "A custom message to display when the checkbox is required but\nnot checked. Defaults to `\"Please check this box to continue.\"`\nwhen not set.\n\n```html\n<esp-checkbox required required-message=\"You must accept the terms.\">\n  I accept\n</esp-checkbox>\n```",
+              "attribute": "required-message"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
               "privacy": "public",
-              "default": "\"\"",
-              "description": "The label of the button.\n\n```html\n<esp-button label=\"Do something\"></esp-button>\n```",
-              "attribute": "label"
+              "default": "false",
+              "description": "Controls whether the checkbox is disabled.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "loading",
+              "name": "indeterminate",
               "type": {
                 "text": "boolean"
               },
               "privacy": "public",
               "default": "false",
-              "description": "Controls whether or not the button is in a loading state.\nThe button will be disabled and show a spinner while loading\nis true.\n\n```html\n<esp-button label=\"Click me...\" icon=\"save\"></esp-button>\n<script>\n  const theButton = findByTagName(\"esp-button\")[0];\n  theButton.addEventListener(\"clicked\", async () => {\n    theButton.loading = true;\n    setTimeout(function() {\n      theButton.loading = false;\n    }, 5000);\n  });\n</script>\n```",
-              "attribute": "loading",
+              "description": "Displays the checkbox in an indeterminate (partial) state.\nClicking the checkbox clears the indeterminate state.",
+              "attribute": "indeterminate",
               "reflects": true
             },
             {
-              "kind": "field",
-              "name": "target",
-              "type": {
-                "text": "string"
-              },
+              "kind": "method",
+              "name": "focus",
               "privacy": "public",
-              "default": "\"\"",
-              "description": "If the button is a link, this specifies the target browser window.\n\n```html\n<esp-button href=\"#\" target=\"_blank\" label=\"External link\"></esp-button>\n```",
-              "attribute": "target"
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Focus the checkbox control."
             },
             {
-              "kind": "field",
-              "name": "rel",
-              "type": {
-                "text": "string"
-              },
+              "kind": "method",
+              "name": "validate",
               "privacy": "public",
-              "default": "\"\"",
-              "description": "If the button is a link, this specifies the relationship\nbetween the current page and the linked URL. Common values\ninclude `\"noopener noreferrer\"` for external links opened\nin a new tab.\n\n```html\n<esp-button href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\" label=\"External\"></esp-button>\n```",
-              "attribute": "rel"
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Re-run constraint validation and dispatch `validity-changed`."
             },
             {
-              "kind": "field",
-              "name": "formNoValidate",
-              "type": {
-                "text": "boolean"
-              },
+              "kind": "method",
+              "name": "checkValidity",
               "privacy": "public",
-              "default": "false",
-              "description": "When true and `button-type` is `\"submit\"`, the enclosing\nform is submitted without running constraint validation.\n\n```html\n<esp-button button-type=\"submit\" formnovalidate label=\"Save Draft\"></esp-button>\n```",
-              "attribute": "formnovalidate"
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Check whether the current state is valid (delegates to ElementInternals)."
             },
             {
               "kind": "method",
-              "name": "handleClick",
+              "name": "toggle",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
-                  "name": "_",
+                  "name": "ev",
                   "type": {
-                    "text": "Event"
+                    "text": "KeyboardEvent"
                   }
                 }
               ]
             },
             {
-              "kind": "field",
-              "name": "buildIcon",
-              "privacy": "private"
+              "kind": "method",
+              "name": "getSvg",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Called by the browser when the owning `<form>` is reset."
+            },
+            {
+              "kind": "method",
+              "name": "formStateRestoreCallback",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "state",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Called by the browser to restore form state (bfcache, etc.)."
+            },
+            {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "isDisabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Called by the browser when a parent `<fieldset>` is enabled or disabled."
             },
             {
               "kind": "field",
@@ -10118,18 +10172,12 @@
             }
           ],
           "events": [
-            {
-              "name": "clicked",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Emitted when the button is clicked. ```html <esp-button label=\"Click me!\"></esp-button> <script> const theButton = findByTagName(\"esp-button\")[0]; theButton.addEventListener(\"clicked\", () => { showToast({ message: `Hi! You clicked the button. This message will self-destruct in 4 seconds...`, icon: \"info-i\", duration: 4 }); }); </script> ```"
-            },
             {
               "name": "value-changed",
               "type": {
                 "text": "CustomEvent"
               },
+              "description": "Fired when the checkbox is toggled. The detail contains the new `checked` state and the checkbox `value`.",
               "inheritedFrom": {
                 "name": "EspalierElementBase",
                 "module": "dist/shared/esp-element-base.js"
@@ -10138,115 +10186,67 @@
           ],
           "attributes": [
             {
-              "name": "tabindex"
-            },
-            {
-              "description": "Renders the button with a borderless, transparent treatment for\nquiet icon or inline actions.\n\n```html\n<esp-button incognito icon-only icon=\"edit\" aria-label=\"Edit\"></esp-button>\n```",
-              "name": "incognito",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "incognito"
-            },
-            {
-              "name": "button-type",
-              "type": {
-                "text": "\"button\" | \"submit\" | \"reset\""
-              },
-              "default": "\"button\"",
-              "description": "Controls the [button type](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#type).\nThe available options are: `button`, `submit`, or `reset`.\nThe default value is `button`. To use a link instead of a\nbutton, set the `href` attribute.\n\n```html\n<esp-button label=\"Default\"></esp-button>\n<esp-button button-type=\"submit\" label=\"Submit\"></esp-button>\n<esp-button button-type=\"reset\" label=\"Reset\"></esp-button>\n<esp-button href=\"#\" label=\"Link\"></esp-button>\n```",
-              "fieldName": "buttonType"
-            },
-            {
-              "name": "collapsed",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "By default, buttons take up the entire width of their parent\ncontainer. Use the `collapsed` attribute to shrink them to the\nsize of their content:\n\n```html\n<esp-button label=\"Full Width\"></esp-button>\n<esp-button collapsed label=\"Collapsed\"></esp-button>\n```",
-              "fieldName": "collapsed"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether or not the button is disabled.\n\n```html\n<esp-button disabled label=\"Disabled\"></esp-button>\n<script>\n  const theButton = findByTagName(\"esp-button\")[0];\n  theButton.addEventListener(\"clicked\", () => {\n  alert(\"We will not get here...\");\n});\n</script>\n```",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "href",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "If href is set, the button will be rendered as an anchor link\npointing to the href value instead of a button.\n\n```html\n<esp-button href=\"#\" label=\"Link button\"></esp-button>\n```",
-              "fieldName": "href"
-            },
-            {
-              "name": "icon-only",
+              "name": "checked",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "If true, the button only displays the icon.\n\n```html\n<esp-button icon-only icon=\"cog\" aria-label=\"Settings\"></esp-button>\n```",
-              "fieldName": "iconOnly"
+              "description": "Whether the checkbox is in the checked state.",
+              "fieldName": "checked"
             },
             {
-              "name": "icon",
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "Optional icon name from the configured Espalier SVG sprite.\nSlotted SVG content remains supported and overrides this value.\n\n```html\n<esp-button label=\"Settings\" icon=\"cog\"></esp-button>\n```",
-              "fieldName": "icon"
+              "description": "The value associated with this checkbox. Used by\n[esp-checkbox-group](/components/checkbox/group) to track\nwhich checkboxes are selected.",
+              "fieldName": "value"
             },
             {
-              "name": "label",
+              "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The label of the button.\n\n```html\n<esp-button label=\"Do something\"></esp-button>\n```",
-              "fieldName": "label"
+              "description": "The name used when the checkbox participates in a `<form>`.",
+              "fieldName": "name"
             },
             {
-              "name": "loading",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether or not the button is in a loading state.\nThe button will be disabled and show a spinner while loading\nis true.\n\n```html\n<esp-button label=\"Click me...\" icon=\"save\"></esp-button>\n<script>\n  const theButton = findByTagName(\"esp-button\")[0];\n  theButton.addEventListener(\"clicked\", async () => {\n    theButton.loading = true;\n    setTimeout(function() {\n      theButton.loading = false;\n    }, 5000);\n  });\n</script>\n```",
-              "fieldName": "loading"
+              "description": "When true, the checkbox must be checked before the form can\nbe submitted.",
+              "fieldName": "required"
             },
             {
-              "name": "target",
+              "name": "required-message",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "If the button is a link, this specifies the target browser window.\n\n```html\n<esp-button href=\"#\" target=\"_blank\" label=\"External link\"></esp-button>\n```",
-              "fieldName": "target"
+              "description": "A custom message to display when the checkbox is required but\nnot checked. Defaults to `\"Please check this box to continue.\"`\nwhen not set.\n\n```html\n<esp-checkbox required required-message=\"You must accept the terms.\">\n  I accept\n</esp-checkbox>\n```",
+              "fieldName": "requiredMessage"
             },
             {
-              "name": "rel",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\"",
-              "description": "If the button is a link, this specifies the relationship\nbetween the current page and the linked URL. Common values\ninclude `\"noopener noreferrer\"` for external links opened\nin a new tab.\n\n```html\n<esp-button href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\" label=\"External\"></esp-button>\n```",
-              "fieldName": "rel"
+              "default": "false",
+              "description": "Controls whether the checkbox is disabled.",
+              "fieldName": "disabled"
             },
             {
-              "name": "formnovalidate",
+              "name": "indeterminate",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true and `button-type` is `\"submit\"`, the enclosing\nform is submitted without running constraint validation.\n\n```html\n<esp-button button-type=\"submit\" formnovalidate label=\"Save Draft\"></esp-button>\n```",
-              "fieldName": "formNoValidate"
+              "description": "Displays the checkbox in an indeterminate (partial) state.\nClicking the checkbox clears the indeterminate state.",
+              "fieldName": "indeterminate"
             },
             {
               "name": "scheme",
@@ -10278,45 +10278,45 @@
             "name": "EspalierElementBase",
             "module": "dist/shared/esp-element-base.js"
           },
-          "tagName": "esp-button",
-          "customElement": true,
           "docPageTitle": {
-            "name": "Button",
+            "name": "Checkbox",
             "description": ""
           },
           "docUrl": {
-            "name": "/components/button",
+            "name": "/components/checkbox",
             "description": ""
           },
           "menuGroup": {
-            "name": "Interaction",
-            "description": ""
+            "name": "Form",
+            "description": "Controls"
           },
           "menuLabel": {
-            "name": "Button",
+            "name": "Checkbox",
             "description": ""
           },
           "menuIcon": {
-            "name": "button",
+            "name": "checkbox",
             "description": ""
-          }
+          },
+          "tagName": "esp-checkbox",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "EspalierButton",
+          "name": "EspalierCheckbox",
           "declaration": {
-            "name": "EspalierButton",
-            "module": "dist/button/esp-button.js"
+            "name": "EspalierCheckbox",
+            "module": "dist/checkbox/esp-checkbox.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "esp-button",
+          "name": "esp-checkbox",
           "declaration": {
-            "name": "EspalierButton",
-            "module": "dist/button/esp-button.js"
+            "name": "EspalierCheckbox",
+            "module": "dist/checkbox/esp-checkbox.js"
           }
         }
       ]
@@ -14669,8 +14669,9 @@
             {
               "name": "esp-dialog-closed",
               "type": {
-                "text": "CustomEvent"
-              }
+                "text": "CustomEvent<{ reason: \"escape\" | \"close-dialog\" | \"api\" }>"
+              },
+              "description": "Fired after the dialog has fully closed, inert state has been restored, and focus has returned to the previously focused element. Safe to tear down resources."
             },
             {
               "name": "esp-dialog-opened",
@@ -14683,13 +14684,8 @@
               "type": {
                 "text": "CustomEvent<{ reason: \"escape\" | \"close-dialog\" | \"api\" }>"
               },
-              "description": "esp-dialog-closing - Fired before the dialog begins closing. Call `event.preventDefault()` to cancel the close (e.g. for unsaved-changes confirmation). The `reason` indicates what triggered the close: `\"escape\"` for the Escape key, `\"close-dialog\"` for a `closeDialog` event from slotted content (typically `<esp-form method=\"dialog\">`), or `\"api\"` for a direct `toggleOpen()` call."
-            },
-            {
-              "type": {
-                "text": "CustomEvent<{ reason: \"escape\" | \"close-dialog\" | \"api\" }>"
-              },
-              "description": "esp-dialog-closed - Fired after the dialog has fully closed, inert state has been restored, and focus has returned to the previously focused element. Safe to tear down resources."
+              "description": "Fired before the dialog begins closing. Call `event.preventDefault()` to cancel the close (e.g. for unsaved-changes confirmation). The `reason` indicates what triggered the close: `\"escape\"` for the Escape key, `\"close-dialog\"` for a `closeDialog` event from slotted content (typically `<esp-form method=\"dialog\">`), or `\"api\"` for a direct `toggleOpen()` call.",
+              "name": "esp-dialog-closing"
             }
           ],
           "attributes": [
@@ -28767,8 +28763,17 @@
           "events": [
             {
               "type": {
-                "text": "CustomEvent"
-              }
+                "text": "CustomEvent<EspalierImagePreview>"
+              },
+              "description": "Fired when the user requests removal of this preview.",
+              "name": "remove-image"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<EspalierImagePreview>"
+              },
+              "description": "Fired when the user requests another upload attempt for this preview.",
+              "name": "retry-upload"
             },
             {
               "name": "value-changed",
@@ -29936,11 +29941,6 @@
             }
           ],
           "events": [
-            {
-              "type": {
-                "text": "CustomEvent"
-              }
-            },
             {
               "type": {
                 "text": "CustomEvent<EspalierUploadImage>"
@@ -37001,11 +37001,6 @@
             }
           ],
           "events": [
-            {
-              "type": {
-                "text": "CustomEvent"
-              }
-            },
             {
               "type": {
                 "text": "CustomEvent"
@@ -50351,20 +50346,15 @@
           ],
           "events": [
             {
-              "type": {
-                "text": "CustomEvent"
-              }
-            },
-            {
-              "description": "— The user changed the query input. Fires on every keystroke (not debounced) so consumers can track the latest query and discard stale async results. Consumers that need debouncing should apply it themselves (e.g. Pagefind's `debouncedSearch()`). `detail: { query: string }`",
+              "description": "The user changed the query input. Fires on every keystroke (not debounced) so consumers can track the latest query and discard stale async results. Consumers that need debouncing should apply it themselves (e.g. Pagefind's `debouncedSearch()`). `detail: { query: string }`",
               "name": "search-requested"
             },
             {
-              "description": "— The user chose a result. `detail: { url: string }`",
+              "description": "The user chose a result. `detail: { url: string }`",
               "name": "result-selected"
             },
             {
-              "description": "— The overlay was closed (Escape, backdrop click, or result selection). Consumers should use this to cancel in-flight searches or discard pending results. `detail: {}`",
+              "description": "The overlay was closed (Escape, backdrop click, or result selection). Consumers should use this to cancel in-flight searches or discard pending results. `detail: {}`",
               "name": "search-closed"
             },
             {